/**
 * HealthN.E.S.S. — Phase 3 premium experience pass
 * Unifies motion, lighting, spacing, and microinteractions.
 * Does not add sections or change narrative structure.
 */

/* --------------------------------------------------------------------------
 * Shared interaction language
 * ------------------------------------------------------------------------ */
.story-stage a,
.story-stage button,
.story-stage .proof-action,
.story-stage .hero__cta,
.story-stage .gs-stage-btn,
.story-stage .gs-panel__action,
.story-stage .ascend-reveal__cta,
.story-stage .ascend-reveal__secondary,
.story-stage .proof-explore__link,
.story-stage .conv-checkpoint__link {
  transition:
    color var(--duration-base) var(--ease-standard),
    background-color var(--duration-base) var(--ease-standard),
    border-color var(--duration-base) var(--ease-standard),
    opacity var(--duration-base) var(--ease-standard),
    transform var(--duration-base) var(--ease-soft),
    box-shadow var(--duration-base) var(--ease-standard);
}

.story-stage :focus-visible {
  outline: 2px solid rgba(242, 202, 80, 0.65);
  outline-offset: 3px;
}

.story-stage a:focus:not(:focus-visible),
.story-stage button:focus:not(:focus-visible) {
  outline: none;
}

/* --------------------------------------------------------------------------
 * Chapter lighting & boundaries — restrained atmosphere
 * ------------------------------------------------------------------------ */
.chapter {
  --chapter-pad-y: clamp(4.75rem, 11vw, 9.5rem);
}

@media (min-width: 768px) {
  .chapter {
    --chapter-pad-y: clamp(5.75rem, 13vw, 10.5rem);
  }
}

.chapter[data-chapter]::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(ellipse 55% 35% at 50% 0%, rgba(242, 202, 80, 0.035), transparent 70%),
    radial-gradient(ellipse 40% 30% at 100% 60%, rgba(211, 197, 173, 0.03), transparent 65%);
  opacity: 0.85;
}

.hero.chapter[data-chapter]::after,
.chapter--flush-top[data-chapter]::after {
  display: none;
}

.chapter > * {
  position: relative;
  z-index: 1;
}

.ambient-deep {
  background-image:
    radial-gradient(ellipse 70% 40% at 20% 0%, rgba(242, 202, 80, 0.03), transparent 55%);
}

.ambient-base {
  background-image:
    radial-gradient(ellipse 50% 30% at 80% 100%, rgba(211, 197, 173, 0.025), transparent 50%);
}

.ambient-lit {
  background-image:
    radial-gradient(ellipse 80% 55% at 50% 0%, rgba(242, 202, 80, 0.055), transparent 55%),
    radial-gradient(ellipse 60% 40% at 80% 100%, rgba(211, 197, 173, 0.035), transparent 50%),
    linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.12) 100%);
}

.ambient-action {
  background-image:
    radial-gradient(ellipse 70% 50% at 50% 40%, rgba(242, 202, 80, 0.07), transparent 60%),
    radial-gradient(ellipse 40% 30% at 0% 100%, rgba(0, 0, 0, 0.25), transparent 55%);
}

/* Phase E.3 — calm educational next-step before Audit CTAs */
.edu-path {
  margin: 0 0 1.35rem;
  max-width: 38rem;
  font-family: var(--font-body);
  font-size: 0.95rem;
  line-height: 1.65;
  color: var(--color-on-surface-variant);
}

.edu-path--center {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.edu-path a {
  color: var(--color-primary);
  text-decoration: none;
  border-bottom: 1px solid rgba(242, 202, 80, 0.35);
}

.edu-path a:hover,
.edu-path a:focus-visible {
  color: var(--color-champagne-gold, #e9c349);
  border-color: var(--color-champagne-gold, #e9c349);
  outline: none;
}

.faq-preview__more {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem 1.25rem;
  justify-content: center;
  align-items: center;
}

/* Soft vignette on immersive/proof chapters */
.chapter[data-rhythm="immersive"],
.chapter[data-rhythm="proof"] {
  box-shadow: inset 0 0 8rem 1.5rem rgba(0, 0, 0, 0.18);
}

.chapter[data-rhythm="calm"] {
  --chapter-pad-y: clamp(3.75rem, 8vw, 6rem);
}

.chapter[data-rhythm="action"] {
  --chapter-pad-y: clamp(5rem, 11vw, 9rem);
}

/* --------------------------------------------------------------------------
 * Reveal system — one language, tighter travel
 * ------------------------------------------------------------------------ */
.js-ready .reveal {
  transform: translate3d(0, var(--reveal-distance), 0);
  transition:
    opacity var(--duration-reveal) var(--ease-out-expo),
    transform var(--duration-reveal) var(--ease-out-expo);
}

.js-ready .reveal--type {
  transform: translate3d(0, calc(var(--reveal-distance) + 0.35rem), 0);
  transition:
    opacity var(--duration-reveal) var(--ease-out-expo),
    transform var(--duration-reveal) var(--ease-out-expo),
    letter-spacing 1s var(--ease-out-expo);
}

.js-ready .reveal--soft {
  transform: translate3d(0, calc(var(--reveal-distance) * 0.65), 0);
}

.js-ready .reveal--image {
  transition:
    opacity var(--duration-media) var(--ease-out-expo),
    transform var(--duration-media) var(--ease-out-expo),
    clip-path var(--duration-media) var(--ease-out-expo);
}

.js-ready .reveal-media img,
.js-ready .reveal-media .cinematic-img {
  transition: transform var(--duration-media) var(--ease-out-expo);
}

.js-ready .reveal-d1 { transition-delay: calc(var(--stagger-step) * 1); }
.js-ready .reveal-d2 { transition-delay: calc(var(--stagger-step) * 2); }
.js-ready .reveal-d3 { transition-delay: calc(var(--stagger-step) * 3); }
.js-ready .reveal-d4 { transition-delay: calc(var(--stagger-step) * 4); }
.js-ready .reveal-d5 { transition-delay: calc(var(--stagger-step) * 5); }

.js-ready .chapter--potential .reveal,
.js-ready .chapter--potential .reveal--type,
.js-ready .chapter--potential .reveal--image,
.js-ready .chapter--potential .reveal-media {
  transition-duration: var(--duration-reveal);
}

/* --------------------------------------------------------------------------
 * Navigation & chrome
 * ------------------------------------------------------------------------ */
#mainNav a,
.mobile-nav-panel__inner a {
  transition:
    color var(--duration-base) var(--ease-standard),
    opacity var(--duration-base) var(--ease-standard),
    border-color var(--duration-base) var(--ease-standard);
}

#mainNav a:hover,
#mainNav a:focus-visible {
  color: var(--color-primary);
}

#mainNav.is-scrolled {
  border-color: rgba(153, 144, 124, 0.28);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.28);
}

.story-progress {
  height: 1.5px;
  opacity: 0.9;
}

/* --------------------------------------------------------------------------
 * Buttons & CTAs — shared microinteraction
 * ------------------------------------------------------------------------ */
.hero__cta:hover,
.hero__cta:focus-visible,
.ascend-reveal__cta:hover,
.ascend-reveal__cta:focus-visible,
.proof-explore__link:hover,
.proof-explore__link:focus-visible,
.proof-action--btn:hover,
.proof-action--btn:focus-visible,
.proof-action--solid:hover,
.proof-action--solid:focus-visible,
.hover-gold:hover {
  transform: translate3d(0, var(--hover-lift), 0);
}

.hero__cta--primary:active,
.ascend-reveal__cta:active,
.proof-explore__link:active {
  transform: translate3d(0, 0, 0);
}

/* --------------------------------------------------------------------------
 * Forms — quieter, more precise
 * ------------------------------------------------------------------------ */
.inquiry-form input,
.inquiry-form select,
.inquiry-form textarea {
  transition:
    border-color var(--duration-base) var(--ease-standard),
    box-shadow var(--duration-base) var(--ease-standard);
}

.inquiry-form input:focus,
.inquiry-form select:focus,
.inquiry-form textarea:focus {
  border-bottom-color: var(--color-primary);
  box-shadow: 0 1px 0 0 rgba(242, 202, 80, 0.35);
}

.inquiry-form button[type="submit"]:hover,
.inquiry-form button[type="submit"]:focus-visible {
  transform: translate3d(0, var(--hover-lift), 0);
}

/* --------------------------------------------------------------------------
 * Media performance & stability
 * ------------------------------------------------------------------------ */
.proof-media,
.ascend-reveal__device--primary,
.gs-visual,
.gs-mobile__visual,
.proof-media--video {
  content-visibility: auto;
  contain-intrinsic-size: auto 420px;
}

.proof-media img,
.gs-visual__media,
.hero-media__stage img,
.ascend-reveal__screen img,
.gs-mobile__visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cinematic-img {
  filter: contrast(1.07) saturate(0.9);
}

/* --------------------------------------------------------------------------
 * Section-specific rhythm polish
 * ------------------------------------------------------------------------ */
.proof-showcase .proof-intro {
  margin-bottom: clamp(2.75rem, 6vw, 4.5rem);
}

.proof-feature {
  margin-bottom: clamp(3.5rem, 8vw, 6.5rem);
}

.growth-system__intro {
  margin-bottom: clamp(2.25rem, 4.5vw, 3.25rem);
}

.growth-system__close {
  margin-top: clamp(2.75rem, 5.5vw, 4rem);
}

.story-bridge {
  margin-top: clamp(2.25rem, 4.5vw, 3rem);
}

.conv-checkpoint {
  margin-top: clamp(2.25rem, 4.5vw, 3.25rem);
}

.ascend-reveal {
  margin-top: clamp(1.25rem, 3vw, 2.25rem);
  margin-bottom: clamp(2.25rem, 5vw, 3.5rem);
}

/* Problem cards — quieter hover, less “template card” bounce */
#problem .border:hover {
  transform: none;
  border-color: rgba(242, 202, 80, 0.35);
  background-color: rgba(30, 32, 31, 0.92);
}

#problem .border {
  transition:
    border-color var(--duration-base) var(--ease-standard),
    background-color var(--duration-base) var(--ease-standard);
}

/* Process steps */
#process .border {
  transition:
    border-color var(--duration-base) var(--ease-standard),
    background-color var(--duration-base) var(--ease-standard);
}

#process .border:hover {
  border-color: rgba(242, 202, 80, 0.4);
}

/* --------------------------------------------------------------------------
 * Mobile refinements
 * ------------------------------------------------------------------------ */
@media (max-width: 767px) {
  .chapter {
    --chapter-pad-y: clamp(3.5rem, 11vw, 5.25rem);
    --reveal-distance: 0.9rem;
    box-shadow: none;
  }

  .js-ready .reveal-d4,
  .js-ready .reveal-d5 {
    transition-delay: calc(var(--stagger-step) * 2.5);
  }

  .proof-feature,
  .proof-support-grid,
  .proof-video-block {
    margin-bottom: clamp(2.5rem, 8vw, 3.5rem);
  }

  .mobile-inquiry a {
    transition:
      background-color var(--duration-base) var(--ease-standard),
      transform var(--duration-fast) var(--ease-soft);
  }

  .mobile-inquiry a:active {
    transform: scale(0.985);
  }
}

/* --------------------------------------------------------------------------
 * Reduced motion — preserve hierarchy, kill travel
 * ------------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .story-stage a,
  .story-stage button,
  .story-stage .proof-action,
  .story-stage .hero__cta,
  .story-stage .gs-stage-btn,
  .story-stage .ascend-reveal__cta,
  .story-stage .proof-explore__link {
    transition:
      color var(--duration-fast) linear,
      background-color var(--duration-fast) linear,
      border-color var(--duration-fast) linear !important;
    transform: none !important;
  }

  .js-ready .reveal,
  .js-ready .reveal--type,
  .js-ready .reveal--soft,
  .js-ready .reveal--image,
  .js-ready .reveal-media img,
  .js-ready .reveal-media .cinematic-img {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
    transition: none !important;
    filter: none !important;
  }

  .chapter[data-chapter]::after,
  .ascend-reveal__glow,
  .hero-media__light {
    animation: none !important;
  }

  .proof-media,
  .hero-media__stage,
  .ascend-reveal__device,
  .gs-visual {
    content-visibility: visible;
  }
}