/* ═══════════════════════════════════════════════════
   CLEVER DENTAL — Visual Effects CSS
   Aceternity UI + Magic UI inspired
   ═══════════════════════════════════════════════════ */

/* ── AURORA BACKGROUND ───────────────────────── */
.aurora::after {
  content: '';
  position: absolute;
  inset: -50%;
  opacity: 0.25;
  mix-blend-mode: hard-light;
  background-image:
    repeating-linear-gradient(100deg, #C8A96E 10%, transparent 15%, transparent 20%, #C8A96E 25%, #C8A96E 30%),
    repeating-linear-gradient(100deg, #0A0A0A 0%, #0A0A0A 7%, transparent 10%, transparent 12%, #0A0A0A 16%);
  background-size: 300% 200%, 200% 200%;
  filter: blur(40px);
  animation: aurora-drift 60s linear infinite;
  pointer-events: none;
  z-index: 0;
}

.aurora-mask {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 50%, transparent 20%, #0A0A0A 75%);
  pointer-events: none;
  z-index: 0;
}

@keyframes aurora-drift {
  from { background-position: 50% 50%, 50% 50%; }
  to { background-position: 350% 50%, 350% 50%; }
}

/* ── GRADIENT BLOBS ──────────────────────────── */
.blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  mix-blend-mode: hard-light;
  opacity: 0.5;
  pointer-events: none;
  z-index: 0;
}
.blob-1 { background: rgba(200,169,110,0.35); width: 60%; aspect-ratio: 1; animation: blob-v 30s ease infinite; }
.blob-2 { background: rgba(180,150,80,0.25); width: 50%; aspect-ratio: 1; animation: blob-circle 20s reverse infinite; }
.blob-3 { background: rgba(220,190,130,0.2); width: 45%; aspect-ratio: 1; animation: blob-h 40s ease infinite; }

@keyframes blob-v { 0%,100% { transform: translateY(-40%); } 50% { transform: translateY(40%); } }
@keyframes blob-circle { 0% { transform: rotate(0deg) translateX(20%); } 100% { transform: rotate(360deg) translateX(20%); } }
@keyframes blob-h { 0%,100% { transform: translateX(-30%); } 50% { transform: translateX(30%); } }

/* ── METEORS ─────────────────────────────────── */
.meteor {
  position: absolute;
  top: -5%;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: #C8A96E;
  box-shadow: 0 0 4px 2px rgba(200,169,110,0.3);
  animation: meteor-fall 4s linear infinite;
  opacity: 0;
  z-index: 0;
}
.meteor::before {
  content: '';
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 50px;
  height: 1px;
  background: linear-gradient(90deg, #C8A96E, transparent);
}
@keyframes meteor-fall {
  0% { transform: rotate(215deg) translateX(0); opacity: 1; }
  70% { opacity: 1; }
  100% { transform: rotate(215deg) translateX(-600px); opacity: 0; }
}

/* ── SHIMMER BUTTON ──────────────────────────── */
.shimmer-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 18px 44px;
  border-radius: 100px;
  background: transparent;
  color: #C8A96E;
  font-size: .85rem;
  font-weight: 600;
  letter-spacing: .03em;
  overflow: hidden;
  cursor: pointer;
  border: none;
  isolation: isolate;
  z-index: 1;
}
.shimmer-btn .sh-spark {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: inherit;
  z-index: -2;
}
.shimmer-btn .sh-spark::before {
  content: '';
  position: absolute;
  inset: -100%;
  width: 300%;
  height: 300%;
  background: conic-gradient(from 0deg, transparent 0 340deg, #C8A96E 360deg);
  animation: sh-spin 5s linear infinite;
}
.shimmer-btn .sh-bg {
  position: absolute;
  inset: 1.5px;
  border-radius: inherit;
  background: #0A0A0A;
  z-index: -1;
  transition: background .3s;
}
.shimmer-btn:hover .sh-bg { background: #111; }
@keyframes sh-spin { to { transform: rotate(360deg); } }

/* ── PULSATING CTA ───────────────────────────── */
.pulse-cta {
  animation: pulse-ring 2s ease-out infinite;
}
@keyframes pulse-ring {
  0%,100% { box-shadow: 0 0 0 0 rgba(200,169,110,0.4); }
  50% { box-shadow: 0 0 0 12px rgba(200,169,110,0); }
}

/* ── SHINE BORDER ────────────────────────────── */
@property --shine-deg {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}
.shine-border {
  position: relative;
  border-radius: 16px;
  padding: 1.5px;
  background: conic-gradient(from var(--shine-deg), transparent 60%, #C8A96E 75%, transparent 90%);
  animation: shine-spin 12s linear infinite;
}
.shine-border > * {
  background: #0A0A0A;
  border-radius: 14.5px;
}
@keyframes shine-spin {
  to { --shine-deg: 360deg; }
}
/* Fallback */
@supports not (background: conic-gradient(from 0deg, red, blue)) {
  .shine-border { border: 1px solid rgba(200,169,110,0.3); padding: 0; }
}

/* ── LAMP EFFECT ─────────────────────────────── */
.lamp {
  position: relative;
}
.lamp::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 400px;
  height: 250px;
  background: conic-gradient(from 90deg at 50% 0%, transparent 30%, rgba(200,169,110,0.06) 45%, rgba(200,169,110,0.12) 50%, rgba(200,169,110,0.06) 55%, transparent 70%);
  filter: blur(15px);
  pointer-events: none;
  z-index: 0;
}
.lamp::after {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 180px;
  height: 3px;
  background: #C8A96E;
  border-radius: 50%;
  box-shadow: 0 0 30px 15px rgba(200,169,110,0.25), 0 0 60px 30px rgba(200,169,110,0.08);
  z-index: 0;
}

/* ── DOT / GRID BACKGROUNDS ──────────────────── */
.dot-bg {
  background-image: radial-gradient(circle, rgba(200,169,110,0.1) 1px, transparent 1px);
  background-size: 24px 24px;
}
.grid-bg {
  background-image:
    linear-gradient(rgba(200,169,110,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(200,169,110,0.04) 1px, transparent 1px);
  background-size: 40px 40px;
}

/* ── SCROLL REVEAL (blur + fade + lift) ──────── */
.rv, .rv-left, [data-reveal] {
  opacity: 0;
  transform: translateY(30px);
  filter: blur(6px);
  transition: opacity .9s cubic-bezier(.25,.1,.25,1), transform .9s cubic-bezier(.25,.1,.25,1), filter .9s cubic-bezier(.25,.1,.25,1);
}
.rv-left {
  transform: translateX(-40px) !important;
}
.rv.revealed, .rv-left.revealed, [data-reveal].revealed,
.rv.vis, .rv-left.vis {
  opacity: 1;
  transform: translateY(0) translateX(0) !important;
  filter: blur(0);
}
.rv-d1 { transition-delay: .1s; }
.rv-d2 { transition-delay: .2s; }
.rv-d3 { transition-delay: .3s; }
.rv-d4 { transition-delay: .4s; }
.rv-d5 { transition-delay: .5s; }

/* ── TYPEWRITER CURSOR ───────────────────────── */
.tw-cursor {
  display: inline-block;
  width: 3px;
  height: 1em;
  background: #C8A96E;
  margin-left: 4px;
  vertical-align: text-bottom;
  animation: tw-blink 1s step-end infinite;
}
@keyframes tw-blink {
  0%,49% { opacity: 1; }
  50%,100% { opacity: 0; }
}

/* ── GRADIENT TEXT ───────────────────────────── */
.grad-text {
  background: linear-gradient(135deg, #fff 40%, #C8A96E 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.grad-text-gold {
  background: linear-gradient(135deg, #C8A96E 0%, #E8D5A8 50%, #C8A96E 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── GOLD FOCUS GLOW (forms) ────────────────── */
.glow-input:focus {
  outline: none;
  border-color: #C8A96E !important;
  box-shadow: 0 0 0 3px rgba(200,169,110,0.15), 0 0 20px rgba(200,169,110,0.08);
}

/* ── FOOTER DEPTH ───────────────────────────── */
.ftr-depth {
  background-image: radial-gradient(circle at 50% 0%, rgba(200,169,110,0.04) 0%, transparent 50%);
}

/* ── SHIMMER TEXT (metallic light sweep) ─────── */
@keyframes shimmer-sweep {
  0%   { background-position: -200% center; }
  100% { background-position: 200% center; }
}
.shimmer-text {
  background: linear-gradient(90deg, #C8A96E 0%, #E8D5A8 40%, #FFF8E8 50%, #E8D5A8 60%, #C8A96E 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: shimmer-sweep 5s linear infinite;
}

/* ── SCROLL PROGRESS BAR ────────────────────── */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 2px;
  background: linear-gradient(90deg, #C8A96E, #E8D5A8);
  z-index: 9999;
  width: 0%;
  transition: none;
}

/* ── TEXT GENERATE (word-by-word reveal) ─────── */
.word-hidden {
  display: inline-block;
  opacity: 0;
  filter: blur(8px);
  transform: translateY(8px);
  transition: opacity 0.5s ease, filter 0.5s ease, transform 0.5s ease;
}
.word-visible {
  opacity: 1;
  filter: blur(0);
  transform: translateY(0);
}

/* ── RIPPLE CIRCLES ──────────────────────────── */
.ripple-circle {
  position: absolute;
  border: 1px solid rgba(200,169,110,0.1);
  border-radius: 50%;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  animation: ripple-breathe 3s ease infinite;
}
@keyframes ripple-breathe {
  0%,100% { transform: translate(-50%,-50%) scale(1); opacity: 1; }
  50% { transform: translate(-50%,-50%) scale(0.92); opacity: 0.6; }
}

/* ── FOCUS VISIBLE ───────────────────────────── */
:focus-visible {
  outline: 2px solid rgba(181,152,90,0.6);
  outline-offset: 2px;
}

/* ── REDUCED MOTION ─────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .rv, .rv-left, [data-reveal] {
    opacity: 1; transform: none; filter: none;
  }
  .meteor { display: none; }
}