/* ==========================================================================
   WarriorBabe — real Liquid Glass + Hers motion layer
   Load LAST, after wb-v2.css and wb-brand.css.

   WHY V2's GLASS LOOKED FLAT
   Skill §7, "Flat-looking glass: solid backgrounds remove refraction cues."
   Two mistakes:
     1. --glass-light was rgba(255,255,255,.76) — 76% opaque is a tinted panel,
        not a lens. Real glass sits around .12–.30.
     2. There was nothing behind it to refract. A flat gradient gives the blur
        nothing to bend, so backdrop-filter renders as a no-op.
   Fix: drop the alpha, raise the blur, and put an ambient colour field behind
   every glass surface so there is something to distort.

   MOTION — measured off forhers.com computed styles:
     reveal   opacity,transform  600ms  cubic-bezier(.72, 0, .45, 1)   ×8
     settle   0.67s  cubic-bezier(.71, 0, .18, 1)  overshoot 8% → −2%
     float    translateY 0 → −15px → 0, slow, infinite
     hover    300ms ease on colour/box-shadow/backdrop-filter
     micro    150ms linear on border-color/background-color
   ========================================================================== */

:root {
  /* real glass — low alpha, high blur */
  --g-blur:        saturate(140%) blur(28px);
  --g-blur-strong: saturate(150%) blur(40px);

  /* Retuned for the Hims-derived navy ground. These were carried over from the
     women's build as moss (20,26,14), which tinted every glass surface on this
     site olive. The base is now navy so refraction reads cool, not warm-green. */
  --glass-light:      rgba(255,255,255,.22);
  --glass-light-hi:   rgba(255,255,255,.34);
  --glass-dark:       rgba(46,35,22,.28);
  --glass-dark-hi:    rgba(69,52,33,.46);
  --glass-dark-edge:  rgba(255,255,255,.20);

  /* specular — the highlight that actually sells glass */
  --spec-light: inset 0 1px 0 rgba(255,255,255,.75), inset 0 -1px 0 rgba(255,255,255,.18);
  --spec-dark:  inset 0 1px 0 rgba(255,255,255,.22), inset 0 -1px 0 rgba(255,255,255,.05);

  /* easing */
  --ease-reveal: cubic-bezier(.72, 0, .45, 1);
  --ease-settle: cubic-bezier(.71, 0, .18, 1);
  --ease-hover:  cubic-bezier(.4, 0, .2, 1);
}

/* ==========================================================================
   1. AMBIENT FIELD — what the glass refracts
   Three slow-drifting colour blobs behind every dark section. Without this
   the blur has nothing to bend and the glass reads as flat tint.
   ========================================================================== */
/* overflow:hidden clips the ambient layer — it is inset -5% horizontally and
   drifts ±2.5%, which would otherwise push the document wider than the viewport */
.sec-dark, .hero-confirmed, .upsell-head, .chrome {
  position: relative; isolation: isolate; overflow: hidden;
}

/* Tonal variation, not fog. Enough structure for the blur to bend, low enough
   alpha that display type keeps a clean ground. */
.sec-dark::before,
.hero-confirmed::before {
  content: ""; position: absolute; inset: -10% -5%; z-index: -1; pointer-events: none;
  /* Amber and steel, not lime and sage. This is the field the glass refracts,
     so it is what actually decides whether the surface reads Hims or Hers. */
  background:
    radial-gradient(40% 46% at 16% 18%, rgba(255,198,113,.20), transparent 70%),
    radial-gradient(36% 42% at 84% 26%, rgba(185,130,103,.24), transparent 72%),
    radial-gradient(50% 55% at 58% 92%, rgba(69,52,33,.55),    transparent 74%),
    radial-gradient(30% 34% at 94% 76%, rgba(217,195,165,.12), transparent 72%);
  filter: blur(64px);
  animation: drift 32s var(--ease-hover) infinite alternate;
}

/* The upsell progress chrome is sticky over light content, so it needs its own
   ambient field: without one the blur has nothing to bend and it flattens. */
/* Sits UNDER the vibrancy base above, so it reads as slow colour movement
   inside the bar rather than lightening it. Kept low so contrast holds. */
.chrome::before {
  content: ""; position: absolute; inset: -40% -10%; z-index: -1; pointer-events: none;
  background:
    radial-gradient(50% 60% at 18% 50%, rgba(255,198,113,.18), transparent 72%),
    radial-gradient(46% 56% at 82% 50%, rgba(185,130,103,.18), transparent 74%);
  filter: blur(38px);
  animation: drift 32s var(--ease-hover) infinite alternate;
}

@keyframes drift {
  0%   { transform: translate3d(0,0,0) scale(1); }
  50%  { transform: translate3d(-2.5%, 2%, 0) scale(1.06); }
  100% { transform: translate3d(2%, -2.5%, 0) scale(1.03); }
}

/* light sections get a far subtler version so light glass has something too */
.sec-tint, .sec-3 { position: relative; isolation: isolate; overflow: hidden; }
.sec-tint::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(40% 50% at 12% 0%,   rgba(255,198,113,.28), transparent 70%),
    radial-gradient(36% 44% at 88% 100%, rgba(185,130,103,.22), transparent 70%);
}

/* ==========================================================================
   2. GLASS SURFACES — genuinely translucent, with specular edges
   ========================================================================== */
.glass {
  background: linear-gradient(150deg, var(--glass-light-hi), var(--glass-light));
  -webkit-backdrop-filter: var(--g-blur); backdrop-filter: var(--g-blur);
  border: 1px solid rgba(255,255,255,.55);
  box-shadow: 0 10px 34px rgba(69,52,33,.18), var(--spec-light);
}
.glass-dark {
  background: linear-gradient(150deg, var(--glass-dark-hi), var(--glass-dark));
  -webkit-backdrop-filter: var(--g-blur); backdrop-filter: var(--g-blur);
  border: 1px solid var(--glass-dark-edge);
  box-shadow: 0 14px 44px rgba(0,0,0,.32), var(--spec-dark);
  transition: background .3s var(--ease-hover),
              backdrop-filter .3s var(--ease-hover),
              box-shadow .3s var(--ease-hover),
              transform .2s ease-in-out;
}
/* Hers transitions backdrop-filter on hover — glass-aware interaction */
.glass-dark:hover {
  background: linear-gradient(150deg, rgba(69,52,33,.42), rgba(46,35,22,.28));
  -webkit-backdrop-filter: var(--g-blur-strong); backdrop-filter: var(--g-blur-strong);
}

/* Sticky bar — content runs edge-to-edge underneath (Apple rule 3), so the
   backdrop is unpredictable. The bar carries ink text at 14:1 on white, which
   would fail once it floats over a dark section.
   Apple's answer is a vibrancy material, not raw transparency: keep enough
   white in the base that the surface always resolves light, and let the blur
   carry the colour. At .58/.48 the refraction is still clearly visible
   (colour from the content below bleeds through) but legibility is guaranteed
   over any backdrop. Rule 6 beats rule 3 when they conflict. */
.sticky-bar {
  background: linear-gradient(180deg, rgba(255,255,255,.58), rgba(255,255,255,.48));
  -webkit-backdrop-filter: var(--g-blur-strong); backdrop-filter: var(--g-blur-strong);
  border-top: 1px solid rgba(255,255,255,.62);
  box-shadow: 0 -10px 40px rgba(69,52,33,.18), var(--spec-light);
}

/* Upsell progress chrome.
   This bar carries white and amber type and is sticky over a LIGHT page, so a
   low-alpha dark glass resolves light against the backdrop and the text dies.
   Same conflict the sticky bar has, resolved the same way: a vibrancy material
   rather than raw transparency. Keep enough dark in the base that the surface
   always resolves dark, and let the blur carry the colour movement. Rule 6
   (legibility) beats rule 3 (edge-to-edge) when they conflict. */
.chrome {
  background: linear-gradient(180deg, rgba(69,52,33,.90), rgba(46,35,22,.86));
  -webkit-backdrop-filter: var(--g-blur-strong); backdrop-filter: var(--g-blur-strong);
  border-bottom: 1px solid var(--glass-dark-edge);
  box-shadow: 0 8px 28px rgba(69,52,33,.20), var(--spec-dark);
}

/* floating play controls — small, bright, high specular */
.vsl .play, .testi .play, .vid .play {
  background: linear-gradient(150deg, rgba(255,255,255,.42), rgba(255,255,255,.24));
  -webkit-backdrop-filter: var(--g-blur-strong); backdrop-filter: var(--g-blur-strong);
  border: 1px solid rgba(255,255,255,.65);
  box-shadow: 0 8px 26px rgba(0,0,0,.30), var(--spec-light);
  color: #fff;
  transition: transform .2s ease-in-out, backdrop-filter .3s var(--ease-hover),
              background .3s var(--ease-hover);
}
.vsl:hover .play, .testi:hover .play, .vid:hover .play { transform: scale(1.07); }
.vsl .play:active, .vid .play:active { transform: scale(.96); }

/* badge + appointment card */
.badge, .appt {
  background: linear-gradient(150deg, var(--glass-dark-hi), var(--glass-dark));
  -webkit-backdrop-filter: var(--g-blur); backdrop-filter: var(--g-blur);
  border: 1px solid var(--glass-dark-edge);
  box-shadow: 0 14px 44px rgba(0,0,0,.30), var(--spec-dark);
}

/* ==========================================================================
   3. MOTION — Hers vocabulary
   ========================================================================== */

/* Scroll reveal: opacity+transform 600ms cubic-bezier(.72,0,.45,1).

   The hidden state is gated behind .js-motion, which wb-motion.js puts on
   <html> only once it has confirmed it can also REMOVE it. Never hide content
   from CSS alone — if the observer never fires (JS blocked, script 404s,
   IntersectionObserver unavailable, page restored from bfcache) the visitor
   gets a blank sales page and you'd never know. Fail visible. */
.js-motion [data-reveal] {
  opacity: 0; transform: translate3d(0, 22px, 0);
  transition: opacity .6s var(--ease-reveal), transform .6s var(--ease-reveal);
}
.js-motion [data-reveal].in { opacity: 1; transform: none; }

/* stagger children */
.js-motion [data-stagger] > * { opacity: 0; transform: translate3d(0,18px,0);
  transition: opacity .6s var(--ease-reveal), transform .6s var(--ease-reveal); }
.js-motion [data-stagger].in > * { opacity: 1; transform: none; }
[data-stagger].in > *:nth-child(1) { transition-delay: 0ms; }
[data-stagger].in > *:nth-child(2) { transition-delay: 70ms; }
[data-stagger].in > *:nth-child(3) { transition-delay: 140ms; }
[data-stagger].in > *:nth-child(4) { transition-delay: 210ms; }
[data-stagger].in > *:nth-child(5) { transition-delay: 280ms; }
[data-stagger].in > *:nth-child(6) { transition-delay: 350ms; }

/* settle: Hers' entrance with 8% overshoot then −2% */
@keyframes settle {
  0%   { opacity: 0; transform: translate3d(0, 26px, 0); }
  30%  { opacity: 1; transform: translate3d(0, -6px, 0); }
  100% { opacity: 1; transform: translate3d(0, 0, 0); }
}
.settle { animation: settle .67s var(--ease-settle) both; }
.settle-1 { animation-delay: .06s; }
.settle-2 { animation-delay: .14s; }
.settle-3 { animation-delay: .22s; }

/* ambient float */
@keyframes floaty {
  0%,100% { transform: translateY(0); }
  50%     { transform: translateY(-15px); }
}
.floaty { animation: floaty 7s ease-in-out infinite; }

/* micro-interactions. */
.btn, .qopt { -webkit-font-smoothing: antialiased; }
.btn { transition: background .3s var(--ease-hover), color .3s var(--ease-hover),
                   box-shadow .3s var(--ease-hover), transform .2s ease-in-out; }
.btn:hover { transform: translateY(-2px) translateZ(0); }
.btn:active { transform: translateY(0) scale(.99) translateZ(0); }
.card, .quote, .offer {
  transition: transform .2s ease-in-out, box-shadow .3s var(--ease-hover),
              border-color .15s linear;
}
.card:hover, .quote:hover { transform: translateY(-3px); box-shadow: var(--e-2); }
.faq summary { transition: color .15s linear; }
.field input, .field select { transition: border-color .15s linear, box-shadow .15s linear; }

/* ==========================================================================
   4. LOGO PLACEHOLDER — Institute of Health · Women's
   ========================================================================== */
.ioh-logo {
  display: inline-flex; flex-direction: column; align-items: center; gap: 2px;
  line-height: 1; text-decoration: none; color: inherit;
}
.ioh-logo .mark {
  font-family: var(--f-body); font-weight: 600; font-size: .62em;
  letter-spacing: .26em; text-transform: uppercase; opacity: .92;
}
.ioh-logo .womens {
  font-family: Georgia, 'Times New Roman', serif; font-style: italic;
  font-weight: 400; font-size: 1.28em; letter-spacing: -.01em;
  color: var(--amber);
}
.sec-dark .ioh-logo, .glass-dark .ioh-logo, footer.site .ioh-logo { color: #fff; }
.ioh-logo.on-light .mark   { color: var(--navy); }
.ioh-logo.on-light .womens { color: var(--navy); }
/* The not-final-artwork flag lives in ims-brand.css as .ioh-logo .ph, so the
   inherited ::after is removed here to stop it rendering twice. */

/* ==========================================================================
   4b. SPECIFICITY LIFT
   Several pages declare .chrome / .appt / .badge / .vid .play inline in their
   own <style> block, which loads after this file. Match on `body` so the
   gradient + specular treatment wins without touching six files.
   ========================================================================== */
/* Must match the vibrancy base above, not the old low-alpha value: this rule is
   the one that actually wins, so a lighter value here silently undoes it. */
body .chrome {
  background: linear-gradient(180deg, rgba(69,52,33,.90), rgba(46,35,22,.86));
  -webkit-backdrop-filter: var(--g-blur-strong); backdrop-filter: var(--g-blur-strong);
  box-shadow: 0 8px 28px rgba(69,52,33,.20), var(--spec-dark);
}
body .appt, body .badge {
  background: linear-gradient(150deg, var(--glass-dark-hi), var(--glass-dark));
  -webkit-backdrop-filter: var(--g-blur); backdrop-filter: var(--g-blur);
  box-shadow: 0 14px 44px rgba(0,0,0,.30), var(--spec-dark);
}
body .vid .play, body .vsl .play, body .testi .play {
  background: linear-gradient(150deg, rgba(255,255,255,.42), rgba(255,255,255,.24));
  -webkit-backdrop-filter: var(--g-blur-strong); backdrop-filter: var(--g-blur-strong);
  border: 1px solid rgba(255,255,255,.65);
  color: #fff;
}
body .checkout .head {
  background: linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,.28));
  -webkit-backdrop-filter: var(--g-blur); backdrop-filter: var(--g-blur);
  box-shadow: var(--spec-light);
}

/* the older .reveal hook in wb-v2.css picks up the Hers curve too — same
   fail-visible gate */
.js-motion .reveal { opacity: 0; transform: translate3d(0,22px,0);
          transition: opacity .6s var(--ease-reveal), transform .6s var(--ease-reveal); }
.js-motion .reveal.in { opacity: 1; transform: none; }
html:not(.js-motion) .reveal { opacity: 1 !important; transform: none !important; }

/* ==========================================================================
   5. ACCESSIBILITY GATES
   ========================================================================== */

/* Reduce Transparency — glass becomes opaque, ambient field removed */
@media (prefers-reduced-transparency: reduce) {
  .glass, .sticky-bar, .vsl .play, .testi .play, .vid .play {
    background: #fff !important;
    -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
    border-color: var(--hairline) !important; color: var(--navy) !important;
  }
  .glass-dark, .chrome, .badge, .appt {
    background: var(--navy) !important;
    -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
  }
  .sec-dark::before, .hero-confirmed::before, .sec-tint::before { display: none !important; }
}

@media (prefers-contrast: more) {
  .glass, .glass-dark, .sticky-bar, .chrome, .badge, .appt {
    backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
  }
  .sec-dark::before, .hero-confirmed::before { display: none !important; }
}

/* Reduced motion — everything resolves to its end state, nothing loops */
@media (prefers-reduced-motion: reduce) {
  .sec-dark::before, .hero-confirmed::before { animation: none !important; }
  .floaty, .settle { animation: none !important; }
  [data-reveal], [data-stagger] > * { opacity: 1 !important; transform: none !important;
                                      transition: none !important; }
  .btn:hover, .card:hover, .quote:hover { transform: none !important; }
}

@media (forced-colors: active) {
  .glass, .glass-dark, .sticky-bar, .chrome { border: 1px solid CanvasText; }
  .sec-dark::before, .hero-confirmed::before { display: none; }
}

/* backdrop-filter unsupported (older Firefox) — fall back to solid */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass, .sticky-bar { background: rgba(255,255,255,.94); }
  .glass-dark, .chrome, .badge, .appt { background: rgba(28,34,20,.94); }
}