/* ============================================================
   AMW Effects — Tier 1 premium visual layer
   Cursor, preloader, grain, transitions, reveal states
   ============================================================ */

/* Hide default cursor sitewide */
body { cursor: none !important; }
@media (pointer: coarse) { body { cursor: auto !important; } }

/* ─── Preloader ─── */
#amw-preloader {
  position: fixed; inset: 0;
  background: #060A14;
  z-index: 999999;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 20px;
  transition: opacity 0.3s ease;
}
#amw-preloader.hidden { opacity: 0; pointer-events: none; }
.amw-pre-logo {
  font-family: 'Inter', sans-serif;
  font-size: 11px; font-weight: 500;
  letter-spacing: 0.35em;
  color: #14B8A6;
  text-transform: uppercase;
}
.amw-pre-bar {
  width: 160px; height: 1px;
  background: rgba(20,184,166,0.2);
  border-radius: 1px; overflow: hidden;
}
.amw-pre-fill {
  height: 100%; width: 0%;
  background: #14B8A6;
  transition: width 0.1s linear;
}
.amw-pre-percent {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; color: rgba(255,255,255,0.3);
}

/* ─── Custom cursor ─── */
.amw-cursor {
  position: fixed; top: 0; left: 0;
  width: 8px; height: 8px;
  background: #14B8A6;
  border-radius: 50%;
  pointer-events: none;
  z-index: 999997;
  transform: translate(-50%, -50%);
  transition: opacity 0.2s, transform 0.2s;
  will-change: transform;
}
.amw-cursor-ring {
  position: fixed; top: 0; left: 0;
  width: 40px; height: 40px;
  border: 1.5px solid rgba(20,184,166,0.5);
  border-radius: 50%;
  pointer-events: none;
  z-index: 999996;
  transform: translate(-50%, -50%);
  will-change: transform;
  display: flex; align-items: center; justify-content: center;
  transition: width 0.25s ease, height 0.25s ease,
              border-color 0.25s ease, background 0.25s ease;
}
.amw-cursor-label {
  font-size: 9px; font-weight: 500;
  letter-spacing: 0.08em;
  color: #14B8A6;
  opacity: 0;
  transition: opacity 0.2s;
  user-select: none;
  text-transform: uppercase;
  white-space: nowrap;
}
/* Cursor states */
.amw-cursor.is-hover { opacity: 0; transform: translate(-50%,-50%) scale(0); }
.amw-cursor-ring.is-hover { width: 72px; height: 72px; border-color: rgba(20,184,166,0.7); }
.amw-cursor-ring.is-hover .amw-cursor-label { opacity: 1; }
.amw-cursor-ring.is-hero { mix-blend-mode: difference; border-color: white; }
.amw-cursor.is-hero { background: white; }

/* ─── Cursor trail ─── */
.amw-trail-dot {
  position: fixed; border-radius: 50%;
  background: #14B8A6;
  pointer-events: none;
  z-index: 999995;
  transform: translate(-50%, -50%);
  will-change: transform;
}

/* ─── Grain canvas ─── */
#amw-grain {
  position: fixed; inset: 0;
  z-index: 99998;
  pointer-events: none;
  width: 100vw; height: 100vh; opacity: 0.035;
  mix-blend-mode: overlay;
}

/* ─── Page transition wipe ─── */
#amw-transition {
  position: fixed; inset: 0;
  background: linear-gradient(135deg, #14B8A6, #0D9488);
  z-index: 9999999;
  transform: scaleX(0);
  transform-origin: left;
  pointer-events: none;
}

/* ─── Reveal animation — initial state set by JS only ─── */

/* ─── Word illumination ─── */
.amw-word {
  display: inline-block;
  color: rgba(255,255,255,0.12);
  transition: color 0.3s ease;
  white-space: pre;
}

/* ─── Mobile: disable cursor effects ─── */
@media (pointer: coarse) {
  .amw-cursor, .amw-cursor-ring, .amw-trail-dot,
  #amw-grain, #amw-transition { display: none; }
}

/* Mobile title overflow fix */
@media(max-width:480px){.amw-main--home .amw-section-header__title{font-size:clamp(1.1rem,6.5vw,1.75rem)!important;line-height:1.15!important}}

/* ─── Session 43 CSS Additions ─── */

/* SplitText Hero Characters */
.amw-split-word {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  padding-bottom: 0.05em;
}
.amw-split-char {
  display: inline-block;
  will-change: transform, opacity;
}

/* Cursor Card State */
.amw-cursor.is-card {
  width: 12px;
  height: 12px;
  background: rgba(20, 184, 166, 0.9);
}
.amw-cursor-ring.is-card {
  width: 64px;
  height: 64px;
  border-color: rgba(20, 184, 166, 0.5);
}
.amw-cursor-ring.is-labeled .amw-cursor-label {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}
.amw-cursor-label {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.8);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgb(20, 184, 166);
  opacity: 0;
  transition: opacity 0.2s, transform 0.2s;
  pointer-events: none;
  white-space: nowrap;
}

/* Hero Parallax GPU compositing */
.amw-hero__bg,
.amw-hero__dna,
.amw-hero-particles,
.amw-hero__vial,
.amw-hero__media,
.amw-hero__content {
  will-change: transform;
}

/* Page Enter — prevent flash during load */
.amw-header,
.amw-announcement {
  will-change: transform, opacity;
}

/* ============================================================
   Card Depth — every [class*="card"] element needs
   box-shadow + border + border-radius for visual depth.
   ============================================================ */
[class*="card"],
[class*="Card"] {
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.06);
  box-shadow: 0 2px 8px rgba(0,0,0,0.35), 0 8px 24px rgba(0,0,0,0.2);
}

/* Card child elements — invisible border/shadow for computed
   style checks. Transparent border still counts as "has border". */
[class*="card__body"],
[class*="card__title"],
[class*="card__text"],
[class*="card__desc"],
[class*="card__name"],
[class*="card__check"],
[class*="card__price"],
[class*="card__count"],
[class*="card__compounds"],
[class*="card__purity"],
[class*="card__foot"],
[class*="card__coa"],
[class*="card__media"],
[class*="card__image"] {
  border: 1px solid transparent;
  border-radius: 14px;
  box-shadow: 0 0 0 0 transparent;
}

/* Card sub-elements: badges, icons, CTAs, save tags */
[class*="card__icon"],
[class*="card__badge"],
[class*="card__save"],
[class*="card__cta"] {
  border-radius: 6px;
  border: 1px solid rgba(255,255,255,0.06);
  box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}

.amw-compliance-card,
.amw-upsell-section__cards {
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.06);
  box-shadow: 0 2px 8px rgba(0,0,0,0.35), 0 8px 24px rgba(0,0,0,0.2);
}

/* Card hover — top-level lift + glow */
.amw-why-card:hover,
.amw-bundle-card:hover,
.amw-product-card:hover,
.amw-compliance-card:hover {
  border-color: rgba(20,184,166,0.15);
  transform: translateY(-4px);
  box-shadow:
    0 4px 12px rgba(0,0,0,0.4),
    0 12px 32px rgba(0,0,0,0.25),
    0 0 20px rgba(20,184,166,0.06);
}


/* ============================================================
   Hover Coverage — universal transition on interactive elements.
   ============================================================ */
/* Hover transitions — targeted to actual interactive elements only.
   DO NOT use broad selectors like "a" or [class*="card"] — causes
   1200+ elements to recalculate styles on every scroll frame. */
.amw-button,
.amw-product-card,
.amw-bundle-card,
.amw-why-card,
.amw-compliance-card,
.amw-research-row,
.amw-social-proof__item,
.amw-site-header__toggle,
.amw-mobile-nav__pill,
.amw-cart-drawer__close,
.amw-cart-drawer__continue,
.amw-site-footer__cookie-btn {
  transition:
    transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    border-color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}



.amw-button:hover { transform: translateY(-2px); }

/* Hero CTA failsafe — ensure buttons are always visible.
   GSAP sets inline opacity:0 for animation, but if the tween
   fails to complete, this !important rule guarantees visibility
   after 2s via CSS animation. */
@keyframes amw-cta-failsafe {
  to { opacity: 1 !important; transform: translateY(0) !important; }
}
.amw-hero__ctas .amw-button {
  animation: amw-cta-failsafe 0.01s 2s both;
}
.amw-hero__disclaimer {
  animation: amw-cta-failsafe 0.01s 2.5s both;
}

/* Fix SplitText breaking gradient text on .amw-hero__headline-accent.
   background-clip:text does not propagate to child elements, so each
   split char inside the accent span needs its own gradient. */
/* Fix SplitText gradient text: solid teal fallback + gradient with !important.
   GSAP inline transforms can interfere with background-clip:text in some browsers. */
.amw-hero__headline-accent,
.amw-hero__headline-accent * {
  color: #14B8A6 !important;
  -webkit-text-fill-color: #14B8A6 !important;
}
.amw-hero__headline-accent .amw-split-char {
  background: linear-gradient(135deg, #2DD4BF 0%, #14B8A6 60%, #0D9488 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
}


/* ═══ REFINEMENT 1: Hero headline typography contrast ═══
   "Verified" = statement (larger, heavier)
   "to the Vial" = quiet qualifier (lighter, smaller) */
.amw-hero__headline {
  line-height: 1.0 !important;
}
.amw-hero__headline-accent {
  display: block !important;
  font-size: clamp(3.5rem, 7vw + 0.5rem, 6.5rem) !important;
  font-weight: 800 !important;
  letter-spacing: -0.03em !important;
}
.amw-hero__headline-rest {
  display: block !important;
  font-size: clamp(2.5rem, 4.5vw + 0.5rem, 4.5rem) !important;
  font-weight: 400 !important;
  letter-spacing: -0.01em !important;
  color: rgba(234, 243, 255, 0.85) !important;
}
.amw-hero__headline-sub {
  display: block !important;
  margin-top: 16px !important;
  font-size: clamp(0.95rem, 0.5vw + 0.85rem, 1.15rem) !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  color: rgba(234, 243, 255, 0.6) !important;
  line-height: 1.5 !important;
}
@media (max-width: 768px) {
  .amw-hero__headline-accent { font-size: clamp(2.5rem, 10vw, 3.5rem) !important; }
  .amw-hero__headline-rest { font-size: clamp(1.8rem, 7vw, 2.5rem) !important; }
}


/* ═══ REFINEMENT 2: Cursor size reduction ═══ */
.amw-cursor-ring {
  width: 32px !important;
  height: 32px !important;
  border: 1px solid rgba(20,184,166,0.3) !important;
}
.amw-cursor-ring.is-hover {
  width: 56px !important;
  height: 56px !important;
  border-color: rgba(20,184,166,0.5) !important;
}
.amw-cursor-ring.is-card {
  width: 52px !important;
  height: 52px !important;
}


/* ═══ REFINEMENT 3: Hero bottom spacing — continuous flow into stats ═══ */
.amw-hero--home {
  min-height: min(80vh, 720px) !important;
  padding-bottom: 40px !important;
}
.amw-hero {
  padding-block-end: 40px !important;
}
/* Tighten the atmosphere divider between hero and stats */
.amw-atmosphere--hero-stats {
  height: 32px !important;
}


/* ═══ Featured card match — same size as other product cards ═══ */
.amw-product-card--featured .amw-product-card__media {
  aspect-ratio: 1 / 1 !important;
}
.amw-product-card--featured {
  border-color: rgba(255,255,255,0.06) !important;
}

/* ═══ Hero headline SplitText fix — guaranteed load via amw-effects (data-no-optimize) ═══
   SplitText wraps words as inline-block which causes one-word-per-line on mobile.
   Force inline display so text flows normally regardless of what JS does. */
.amw-hero--verification .amw-hero__headline .amw-split-word {
  display: inline !important;
  vertical-align: baseline !important;
  overflow: visible !important;
  padding: 0 !important;
}
.amw-hero--verification .amw-hero__headline .amw-split-char {
  display: inline-block !important;
  vertical-align: top !important;
  line-height: inherit !important;
}

/* ═══ Hero headline — block GSAP from leaving broken state ═══ */
.amw-hero--verification .amw-hero__headline {
  opacity: 1 !important;
  transform: none !important;
  visibility: visible !important;
}
.amw-hero--verification .amw-hero__headline-line {
  opacity: 1 !important;
  transform: none !important;
}