/* ===========================================================
   The CosmoCare Clinic — PREMIUM ELEVATION LAYER
   Loaded after styles.css. Pure visual + motion upgrade.
   Goal: awwwards-grade medical-luxury. Light, cinematic,
   depth-rich, fully animated. No content/SEO changes.
   =========================================================== */

:root {
  /* extended premium tokens */
  --teal-bright: #1ED0E0;
  --teal-gradient: linear-gradient(118deg, #1ED0E0 0%, #0A7A89 55%, #0E3B42 100%);
  --gold-bright: #D8B570;
  --glass: rgba(255, 255, 255, 0.62);
  --glass-strong: rgba(255, 255, 255, 0.78);
  --glass-line: rgba(255, 255, 255, 0.75);
  --ring: rgba(20, 184, 200, 0.30);

  /* layered, soft, expensive shadows */
  --shadow-soft: 0 2px 6px -2px rgba(10,42,46,.10), 0 12px 30px -14px rgba(10,42,46,.18);
  --shadow-float: 0 4px 12px -4px rgba(10,42,46,.12), 0 24px 60px -24px rgba(10,42,46,.30);
  --shadow-pop: 0 8px 22px -8px rgba(10,42,46,.18), 0 44px 90px -40px rgba(10,42,46,.42);
  --shadow-teal: 0 18px 50px -20px rgba(14,90,103,.55);

  --spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --smooth: cubic-bezier(0.22, 1, 0.36, 1);
}

/* smoother base; Lenis controls scroll so disable native smooth */
html.lenis { scroll-behavior: auto; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }

body {
  font-size: 17.5px;
  letter-spacing: -0.005em;
}

/* Richer ambient atmosphere — deeper, more dimensional */
body::before {
  background:
    radial-gradient(55vw 55vw at 88% -12%, rgba(20,184,200,.22), transparent 60%),
    radial-gradient(48vw 48vw at -12% 22%, rgba(194,154,82,.12), transparent 55%),
    radial-gradient(40vw 60vw at 50% 120%, rgba(20,184,200,.10), transparent 60%);
}

/* ===========================================================
   1. TYPOGRAPHY — editorial, optical, premium
   =========================================================== */
h1, h2, h3 { font-optical-sizing: auto; letter-spacing: -0.028em; }
.h-xl { font-size: clamp(3rem, 6.6vw, 6rem); line-height: 0.98; font-weight: 480; }
.h-lg { font-size: clamp(2.3rem, 5vw, 4rem); line-height: 1.02; }
.serif-italic {
  font-style: italic; font-weight: 400;
  background: linear-gradient(105deg, var(--teal-deep), var(--teal-bright) 60%, var(--gold) 130%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  padding-right: .04em;
}
.eyebrow { font-size: .76rem; letter-spacing: .26em; color: var(--teal-deep); }
.eyebrow::before, .eyebrow--center::after {
  width: 30px; height: 1.5px;
  background: linear-gradient(90deg, var(--teal), transparent);
}
.eyebrow--center::after { background: linear-gradient(90deg, transparent, var(--teal)); }
.lead { color: var(--ink-soft); }

/* ===========================================================
   2. FLOATING GLASS-PILL NAVIGATION
   =========================================================== */
.site-header { padding: 20px 0; }
.site-header .container.nav {
  border-radius: 100px;
  padding: 10px 12px 10px 22px;
  transition: all .55s var(--smooth);
}
.site-header.scrolled {
  padding: 12px 0;
  background: transparent;
  backdrop-filter: none;
  box-shadow: none;
}
.site-header.scrolled .container.nav {
  background: var(--glass-strong);
  backdrop-filter: blur(22px) saturate(1.5);
  -webkit-backdrop-filter: blur(22px) saturate(1.5);
  border: 1px solid var(--glass-line);
  box-shadow: var(--shadow-float);
  width: min(1120px, 94%);
}
.nav__links a { font-size: .94rem; }
.nav__links a::after {
  height: 2px; border-radius: 2px;
  background: var(--teal-gradient);
}
.nav__cta .btn--teal {
  background: var(--teal-gradient);
  box-shadow: 0 10px 26px -12px rgba(14,90,103,.7);
  padding: 13px 24px;
}

/* ===========================================================
   3. PREMIUM BUTTONS — sheen sweep + spring
   =========================================================== */
.btn {
  position: relative; overflow: hidden;
  transition: transform .5s var(--spring), box-shadow .5s var(--smooth), background .4s, color .4s;
  isolation: isolate;
}
.btn::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(110deg, transparent 25%, rgba(255,255,255,.35) 50%, transparent 75%);
  transform: translateX(-130%); transition: transform .8s var(--smooth);
}
.btn:hover::after { transform: translateX(130%); }
.btn--primary {
  background: var(--ink);
  box-shadow: 0 10px 30px -14px rgba(10,42,46,.8);
}
.btn--primary:hover { background: var(--teal-ink); transform: translateY(-4px) scale(1.01); box-shadow: var(--shadow-pop); }
.btn--teal { background: var(--teal-gradient); }
.btn--teal:hover { transform: translateY(-4px) scale(1.01); box-shadow: var(--shadow-teal); }
.btn--ghost {
  background: var(--glass);
  backdrop-filter: blur(10px);
  border: 1.5px solid var(--glass-line);
}
.btn--ghost:hover { transform: translateY(-4px); border-color: var(--teal); box-shadow: var(--shadow-soft); }
.btn--lg { padding: 20px 40px; border-radius: 100px; }

/* ===========================================================
   4. HERO — cinematic depth
   =========================================================== */
.hero { padding-top: clamp(160px, 19vw, 230px); }
.hero__grid { gap: clamp(34px, 5vw, 84px); }
.hero .eyebrow {
  padding: 9px 16px; border-radius: 100px;
  background: var(--glass); border: 1px solid var(--glass-line);
  backdrop-filter: blur(8px); box-shadow: var(--shadow-soft);
}
.hero__title { margin: 26px 0 26px; }
.hero__media {
  border-radius: 40px;
  box-shadow: var(--shadow-pop);
  aspect-ratio: 4/4.7;
}
/* glossy frame ring + light reflection */
.hero__media::before {
  content: ""; position: absolute; inset: 0; z-index: 4; border-radius: inherit;
  pointer-events: none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.5), inset 0 0 0 1px rgba(255,255,255,.22);
  background: linear-gradient(140deg, rgba(255,255,255,.28), transparent 40%);
}
.hero__media img { transition: transform 1.4s var(--smooth); }
.hero__visual:hover .hero__media img { transform: scale(1.06); }
/* depth halo behind media */
.hero__visual::before {
  content: ""; position: absolute; z-index: -1;
  width: 80%; height: 80%; left: 10%; top: 12%;
  background: radial-gradient(circle, rgba(20,184,200,.35), transparent 70%);
  filter: blur(60px); border-radius: 50%;
}
.float-card {
  background: var(--glass-strong);
  backdrop-filter: blur(20px) saturate(1.4);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  border: 1px solid var(--glass-line);
  border-radius: 22px; padding: 18px 22px;
  box-shadow: var(--shadow-float);
}
.float-card .num { background: var(--teal-gradient); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.hero__rating b { font-size: 1.5rem; }
.avatars img { width: 42px; height: 42px; border-width: 3px; box-shadow: var(--shadow-soft); transition: transform .4s var(--spring); }
.avatars:hover img { transform: translateY(-3px); }

/* ===========================================================
   5. MARQUEE — edge-masked, refined
   =========================================================== */
.marquee {
  border-block: 1px solid var(--line);
  background: linear-gradient(90deg, var(--cream), #fff 50%, var(--cream));
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.marquee__item { color: var(--teal-ink); font-weight: 500; }
.marquee__item::before { content: "✦"; background: var(--teal-gradient); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }

/* ===========================================================
   6. PREMIUM CARD SYSTEM — gradient border + glow + spring
   =========================================================== */
.scard, .tcard, .real-card, .blog-card {
  background:
    linear-gradient(var(--white), var(--white)) padding-box,
    linear-gradient(150deg, rgba(20,184,200,.35), rgba(255,255,255,0) 40%, rgba(194,154,82,.28)) border-box;
  border: 1px solid transparent;
  box-shadow: var(--shadow-soft);
  transition: transform .55s var(--smooth), box-shadow .55s var(--smooth);
}
.scard { padding: 36px 32px; border-radius: 30px; }
.scard::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(420px circle at var(--mx,50%) var(--my,0%), rgba(20,184,200,.10), transparent 60%);
  opacity: 0; transition: opacity .5s var(--smooth);
}
.scard:hover { box-shadow: var(--shadow-pop); }
.scard:hover::after { opacity: 1; }
.scard__icon {
  width: 64px; height: 64px; border-radius: 18px;
  background: linear-gradient(150deg, var(--mint-2), #fff);
  box-shadow: inset 0 0 0 1px rgba(20,184,200,.18), var(--shadow-soft);
}
.scard:hover .scard__icon { background: var(--teal-gradient); box-shadow: var(--shadow-teal); transform: rotate(-6deg) scale(1.05); }
.scard__link svg { transition: transform .4s var(--spring); }
.scard--feature {
  background: linear-gradient(150deg, var(--teal-ink), #082a2f) padding-box,
              linear-gradient(150deg, rgba(30,208,224,.6), transparent 50%) border-box;
  border: 1px solid transparent;
}
.scard--feature::before { background: linear-gradient(90deg, var(--teal-bright), var(--gold)); }

.tcard, .real-card, .blog-card { border-radius: 26px; }
.tcard__quote { background: var(--teal-gradient); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; opacity: .35; }

/* ===========================================================
   7. STATS — glass slab
   =========================================================== */
.stats {
  background: var(--glass);
  backdrop-filter: blur(12px);
  border: 1px solid var(--glass-line);
  border-radius: 32px;
  padding: 36px 20px;
  box-shadow: var(--shadow-soft);
}
.stat { position: relative; }
.stat + .stat::before {
  content: ""; position: absolute; left: 0; top: 18%; height: 64%; width: 1px;
  background: linear-gradient(180deg, transparent, var(--line), transparent);
}
.stat .num { background: var(--teal-gradient); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }

/* ===========================================================
   8. SPLIT / WHY — premium media frame
   =========================================================== */
.split__media { border-radius: 36px; box-shadow: var(--shadow-pop); }
.split__media::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.25), inset 0 1px 0 rgba(255,255,255,.4);
}
.split__media img { transition: transform 1.2s var(--smooth); }
.split__media:hover img { transform: scale(1.05); }
.tick { background: var(--teal-gradient); color: #fff; box-shadow: var(--shadow-soft); }
.tick svg { color: #fff; }

/* ===========================================================
   9. CTA BAND — dimensional, glowing
   =========================================================== */
.cta-band {
  border-radius: 44px;
  background:
    radial-gradient(120% 100% at 20% 0%, #0e4a52 0%, transparent 55%),
    linear-gradient(140deg, var(--teal-ink), #061f23);
  box-shadow: var(--shadow-pop);
  border: 1px solid rgba(30,208,224,.18);
}
.cta-band h2 { font-size: clamp(2.4rem, 5vw, 4.2rem); }

/* ===========================================================
   10. FAQ — softer, premium
   =========================================================== */
.faq__item { transition: background .4s; border-radius: 16px; }
.faq__item.open { background: linear-gradient(180deg, rgba(20,184,200,.05), transparent); }
.faq__icon { transition: all .4s var(--spring); }
.faq__item.open .faq__icon { background: var(--teal-gradient); border-color: transparent; transform: rotate(90deg); }

/* ===========================================================
   11. FOOTER — richer
   =========================================================== */
.footer { background: radial-gradient(120% 80% at 80% 0%, #0e3338 0%, transparent 60%), var(--ink); }
.footer__social a { transition: all .45s var(--spring); }
.footer__social a:hover { background: var(--teal-gradient); border-color: transparent; transform: translateY(-4px) scale(1.05); }

/* ===========================================================
   12. CUSTOM CURSOR (desktop, fine-pointer only)
   =========================================================== */
.cc-cursor, .cc-cursor-dot { display: none; }
@media (pointer: fine) {
  .has-cc, .has-cc * { cursor: none !important; }
  .cc-cursor {
    display: block; position: fixed; top: 0; left: 0; z-index: 9999;
    width: 42px; height: 42px; margin: -21px 0 0 -21px; border-radius: 50%;
    border: 1.5px solid rgba(14,90,103,.55); pointer-events: none;
    transition: width .3s var(--spring), height .3s var(--spring), margin .3s var(--spring),
                background .3s, border-color .3s, opacity .3s;
    mix-blend-mode: multiply; backdrop-filter: invert(0);
  }
  .cc-cursor-dot {
    display: block; position: fixed; top: 0; left: 0; z-index: 10000;
    width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%;
    background: var(--teal-deep); pointer-events: none;
  }
  .cc-cursor.is-hover {
    width: 64px; height: 64px; margin: -32px 0 0 -32px;
    background: rgba(20,184,200,.12); border-color: var(--teal);
  }
  .cc-cursor.is-down { width: 30px; height: 30px; margin: -15px 0 0 -15px; }
}

/* ===========================================================
   13. SCROLL REVEAL — premium variants used by premium.js
   =========================================================== */
.p-reveal { opacity: 0; transform: translateY(40px); will-change: transform, opacity; }
.p-reveal.in { opacity: 1; transform: none; transition: opacity 1s var(--smooth), transform 1s var(--smooth); }
.p-parallax { will-change: transform; }
[data-split] { will-change: transform; }
.word-line { display: inline-block; overflow: hidden; vertical-align: top; }
.word-line > span { display: inline-block; transform: translateY(110%); }

/* page-load: hold reveals until preloader done to avoid flash */
.preloading .p-reveal { transition: none; }

/* ===========================================================
   14. SECTION DEPTH & RHYTHM
   =========================================================== */
.section { padding: clamp(84px, 11vw, 168px) 0; }
.sec-head { margin-bottom: clamp(44px, 6vw, 72px); }

/* subtle floating scroll-cue in hero */
.scroll-cue {
  position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  font-size: .68rem; letter-spacing: .25em; text-transform: uppercase;
  color: var(--muted); font-weight: 700; opacity: .8; z-index: 5;
}
.scroll-cue .bar { width: 1.5px; height: 42px; background: linear-gradient(var(--teal), transparent); border-radius: 2px; overflow: hidden; position: relative; }
.scroll-cue .bar::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 40%; background: var(--gold); border-radius: 2px; animation: cueRun 1.8s var(--smooth) infinite; }
@keyframes cueRun { 0% { transform: translateY(-100%); } 100% { transform: translateY(250%); } }
@media (max-width: 980px) { .scroll-cue { display: none; } }

/* ===========================================================
   15. REDUCED MOTION
   =========================================================== */
@media (prefers-reduced-motion: reduce) {
  .p-reveal { opacity: 1 !important; transform: none !important; }
  .word-line > span { transform: none !important; }
  .scroll-cue { display: none; }
  .cc-cursor, .cc-cursor-dot { display: none !important; }
  .has-cc, .has-cc * { cursor: auto !important; }
}