/* ==========================================================================
   HERO PREMIUM — Evolve Up Fitness (Phase 2)
   ==========================================================================
   Isolated, additive enhancement to the existing, real Hero section —
   this does not replace or restructure it. To roll back: remove the
   <link>/<script> tags for this component and the small set of new
   elements added to the Hero's markup (tagline, guide-line, blueprint
   layer) — every pre-existing Hero element, class, and behavior is
   untouched and continues working exactly as before.

   Adaptation note: the design spec described an asymmetric, left-
   weighted composition. The real, existing Hero layout is centered
   (text-align: center, centered flex column) — a tested, locked
   layout. Restructuring it to asymmetric would be a much larger,
   riskier change than what was actually asked for, so this
   implementation works within the real centered layout instead — a
   center-running guide-line, which suits a centered composition
   naturally rather than fighting it.

   Reuses the site's existing --accent, --accent-glow, --ease tokens
   from main.css rather than redefining them — this is the same brand
   language, not a new one. --ease (cubic-bezier(0.19,1,0.22,1)) is
   already an expo-out curve closely related in character to the
   Membership Ring's cubic-bezier(0.22,1,0.36,1) — using the site's
   own existing token is the more consistent choice than introducing a
   near-duplicate value.
   ========================================================================== */

/* ------------------------------------------------------------- TAGLINE */
.hero__tagline {
  position: relative;
  margin-top: 18px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.8rem, 5vw, 3.2rem);
  letter-spacing: 0.04em;
  line-height: 1;
  /* Static gradient fill — this alone costs nothing ongoing; it was
     specifically *animating* background-position that triggered paint
     every frame (see the sweep overlay below for the actual motion). */
  background: linear-gradient(100deg, #fff 20%, var(--accent) 55%, #fff 85%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 24px var(--accent-glow));
  opacity: 0;
  transform: translateY(14px) scale(0.96);
  animation: hero-tagline-in 0.45s var(--ease) 0.16s forwards;
  overflow: hidden;
}
@keyframes hero-tagline-in {
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* The "shimmer" — a sweep highlight via a pseudo-element animating only
   transform/opacity, not the previous version's background-position
   (which triggers paint on every frame, the same class of issue found
   and fixed in the Membership Ring's box-shadow glow during its own
   audit — caught here in self-review before shipping instead of after). */
.hero__tagline::after {
  content: '';
  position: absolute;
  top: 0;
  left: -30%;
  width: 25%;
  height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.5), transparent);
  transform: translateX(0);
  opacity: 0;
  /* Was a 6s cycle — repeating every 6 seconds, forever, read as more
     attention-seeking than a restrained luxury brand would use.
     Lengthened to 14s so it registers as a rare, considered moment
     rather than a noticeable loop — same effect, softened frequency,
     per Phase B's "keep only if it improves perceived quality" review. */
  animation: hero-tagline-sweep 14s ease-in-out 1.2s infinite;
  pointer-events: none;
}
@keyframes hero-tagline-sweep {
  0%, 94%, 100% { transform: translateX(0); opacity: 0; }
  2% { opacity: 0.9; }
  9% { transform: translateX(420%); opacity: 0; }
}

/* ------------------------------------------------------- BLUEPRINT LAYER
   Faint schematic linework in the deep background — texture, not
   content. Pure CSS gradients, no SVG/image request needed. */
.hero__blueprint {
  position: absolute;
  /* inset:0 + scale rather than a -5% oversized box: layout-sized bleed
     contributes to document width; a transform does not. */
  inset: 0;
  transform: scale(1.1);
  opacity: 0.05;
  background-image:
    linear-gradient(rgba(42, 167, 155, 0.6) 1px, transparent 1px),
    linear-gradient(90deg, rgba(42, 167, 155, 0.6) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse at 50% 30%, #000 0%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse at 50% 30%, #000 0%, transparent 70%);
}

/* ---------------------------------------------------------- GUIDE-LINE
   The evolve-line's extended role: a slim, continuous light-guide
   running through the stacked content, marking five waypoints
   (headline, tagline, CTA, stats, scroll) with a soft glow-point at
   each. Percentage-based waypoint positions rather than JS-measured
   pixel positions — robust across real content-length variation and
   viewport sizes without needing fragile position calculation. */
.hero__guide-line {
  position: absolute;
  left: 50%;
  top: 8%;
  bottom: 6%;
  width: 1px;
  transform: translateX(-50%);
  background: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(42, 167, 155, 0.35) 8%,
    rgba(42, 167, 155, 0.15) 50%,
    rgba(42, 167, 155, 0.35) 92%,
    transparent 100%
  );
  z-index: -1;
  pointer-events: none;
  opacity: 0;
  animation: hero-guide-fade-in 1s var(--ease) 1.3s forwards;
}
@keyframes hero-guide-fade-in {
  to { opacity: 1; }
}

.hero__guide-point {
  position: absolute;
  left: 50%;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
  transform: translateX(-50%) scale(0);
  box-shadow: var(--glow-sm);
  animation: hero-guide-point-in 0.5s var(--ease) forwards, hero-guide-point-pulse 3.5s ease-in-out infinite;
}
@keyframes hero-guide-point-in {
  to { transform: translateX(-50%) scale(1); }
}
@keyframes hero-guide-point-pulse {
  0%, 100% { opacity: 0.6; }
  50% { opacity: 1; }
}
/* Five waypoints, approximate positions down the guide-line — tagline,
   CTA, stats, and scroll-proximity. (The headline waypoint is the
   existing evolve-line accent itself, at the line's origin — not
   duplicated here.) */
.hero__guide-point--tagline { top: 22%; animation-delay: 1.4s, 0s; }
.hero__guide-point--cta { top: 48%; animation-delay: 1.55s, 0.3s; }
.hero__guide-point--stats { top: 68%; animation-delay: 1.7s, 0.6s; }
.hero__guide-point--scroll { top: 90%; animation-delay: 1.85s, 0.9s; }

/* ----------------------------------------------------- CTA EXPERIENCE */
.btn--hero-primary {
  position: relative;
  overflow: hidden;
  transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
  box-shadow: var(--glow-md);
}
.btn--hero-primary::before {
  content: '';
  position: absolute;
  top: 0;
  left: -60%;
  width: 40%;
  height: 100%;
  background: linear-gradient(115deg, transparent, rgba(255, 255, 255, 0.25), transparent);
  transform: skewX(-20deg) translateX(0);
  transition: transform 0.6s var(--ease);
  pointer-events: none;
}
.btn--hero-primary:hover::before {
  transform: skewX(-20deg) translateX(480%);
}
.btn--hero-primary:hover,
.btn--hero-primary:focus-visible {
  box-shadow: var(--glow-lg);
}
.btn--hero-primary:active {
  transform: scale(0.97);
}

/* Note: .hero__contact-pill's hover transition is already fully and
   correctly handled by the existing rule in main.css (transform, color,
   border-color, background all covered) — deliberately not duplicated
   here. An earlier draft of this file did add a redundant, narrower
   transition rule for this selector, which — being loaded after
   main.css at the same specificity — would have silently replaced
   main.css's complete transition list rather than merging with it,
   breaking the existing color transition and the hover lift entirely.
   Caught in self-review before shipping; removed rather than fixed in
   place, since the correct behavior already existed and needed no
   changes at all.
   ------------------------------------------------------------------ */

/* --------------------------------------------------------------- MOBILE */
@media (max-width: 640px) {
  .hero__blueprint { opacity: 0.035; background-size: 48px 48px; }
  .hero__guide-line { display: none; } /* the stacked, narrower mobile layout doesn't have room for this without crowding real content */
  .hero__tagline { font-size: clamp(1.5rem, 8vw, 2.2rem); }
}

/* --------------------------------------------------- REDUCED MOTION */
@media (prefers-reduced-motion: reduce) {
  .hero__tagline { animation: none !important; opacity: 1; transform: none; }
  .hero__tagline::after { animation: none !important; opacity: 0 !important; }
  .hero__guide-line, .hero__guide-point { animation: none !important; opacity: 1; transform: translateX(-50%) scale(1); }
  .btn--hero-primary { transition: none !important; }
  .btn--hero-primary::before { transition: none !important; transform: skewX(-20deg) translateX(0) !important; }
}

/* =========================================================================
   SHORT-VIEWPORT COMPRESSION — gets the primary CTA above the fold
   =========================================================================
   Measured issue: the "Join Now" button sat at y=901px, which is below
   the fold on every common laptop height (1440x720, x800, x900). Users
   had to scroll before seeing the primary call to action.

   Root cause: the hero is min-height:100svh with generous top padding
   AND a tall content stack (eyebrow + 4-line title + tagline + subtitle
   + actions + stat row + trust line). At 100svh the section grows with
   the viewport, but the content block does not shrink, so on short
   viewports the CTA is pushed past the visible area.

   Fixed with height-based queries rather than width-based, because this
   is a vertical-space problem — a 1920x720 laptop has the same issue as
   a 1280x720 one. Tall screens are untouched.
   ========================================================================= */
@media (min-width: 861px) and (max-height: 940px) {
  .hero { padding-top: calc(var(--nav-h) + 28px); padding-bottom: 76px; }
  .hero__title { font-size: clamp(2.4rem, 5.2vw, 4.5rem); }
  .hero__subtitle { margin-top: 20px; }
  .hero__actions { margin-top: 30px; }
  .hero__stat-row { margin-top: 26px; }
  .hero__trust { margin-top: 16px; }
}
@media (min-width: 861px) and (max-height: 780px) {
  .hero { padding-top: calc(var(--nav-h) + 16px); padding-bottom: 60px; }
  .hero__title { font-size: clamp(2.2rem, 4.6vw, 3.6rem); }
  .hero__tagline { margin-top: 10px; }
  .hero__subtitle { margin-top: 14px; }
  .hero__actions { margin-top: 24px; }
  .hero__stat-row { margin-top: 20px; }
}

/* Small/short phones (e.g. 360x640). Same vertical-space problem as the
   laptop case above, but the width-based mobile rules don't help because
   the constraint is height. Measured: CTA bottom sat at 680px in a 640px
   viewport. */
@media (max-width: 860px) and (max-height: 700px) {
  .hero { padding-top: calc(var(--nav-h) + 18px); padding-bottom: 56px; }
  .hero__title { font-size: clamp(1.9rem, 8vw, 2.3rem); }
  .hero__eyebrow { margin-bottom: 10px; }
  .hero__tagline { margin-top: 8px; }
  .hero__subtitle { margin-top: 12px; font-size: 0.98rem; }
  .hero__actions { margin-top: 20px; }
  .hero__stat-row { margin-top: 16px; }
  .hero__trust { margin-top: 12px; }
}

/* Very small AND short screens (e.g. 320x568). Adding the hero logo pushed
   the primary CTA 38px below the fold here — measured, not estimated. The
   logo is the newest element so it gives way first, plus a small trim on the
   surrounding gaps. Nothing is hidden; the whole stack simply tightens. */
@media (max-width: 360px) and (max-height: 640px) {
  .hero__logo { width: 210px; margin-bottom: 10px; }
  .hero__eyebrow { margin-bottom: 6px; font-size: 0.66rem; letter-spacing: 0.14em; }
  .hero__subtitle { margin-top: 8px; font-size: 0.92rem; }
  .hero__actions { margin-top: 16px; }
}

/* ==========================================================================
   HERO SIMPLIFICATION
   ==========================================================================
   The hero carried nine competing elements: logo, eyebrow badge, four-line
   headline, tagline, subtitle, primary CTA, secondary CTA, stat row and
   address. Premium sites in this category show a headline, one supporting
   line, and one primary action — the eye needs somewhere to land.

   Nothing is deleted from the DOM: the stat row, trust line and tagline
   still exist for SEO and for anyone who scrolls, they simply no longer
   compete inside the first screen. The eyebrow badge is hidden outright —
   it restated what the headline already says.
   Revert by deleting this block. */

/* Eyebrow badge: pure repetition of the headline's message */
.hero__eyebrow { display: none; }

/* Tagline sat between the headline and subtitle saying much the same thing */
.hero__tagline { display: none; }

/* Stats and address move out of the hero's first screen. They remain in the
   document (and the dedicated Stats section below repeats them properly). */
.hero__stat-row,
.hero__trust { display: none; }

/* With four elements removed, the remaining three get room to breathe. */
.hero__logo { margin-bottom: 30px; }
.hero__title { margin-bottom: 4px; }
.hero__subtitle { margin-top: 22px; max-width: 46ch; }
.hero__actions { margin-top: 38px; }

@media (max-width: 620px) {
  .hero__logo { margin-bottom: 22px; }
  .hero__subtitle { margin-top: 16px; }
  .hero__actions { margin-top: 28px; }
}