/* Amplify Reach — homepage motion layer: "Amplify the Signal".
   Amplification as a signal that assembles inside the authentic AR
   monogram, ignites on its orange accent, and expands into the page.
   Every moving part is one of the logo's three real source paths.

   PROGRESSIVE ENHANCEMENT CONTRACT
   Nothing essential is hidden here by default. Every pre-animation state
   lives behind [data-motion-ready] (set on <html> by main.js only once
   GSAP + ScrollTrigger are confirmed present and motion is allowed), and
   the intro overlay behind [data-intro="running"]. No JS, a failed GSAP
   load, or prefers-reduced-motion all render the finished hero. */

/* ---------- Hero ---------- */

.hero {
  min-height: 92vh;
  display: flex;
  align-items: center;
  padding-block: clamp(6rem, 12vw, 9rem) clamp(3rem, 8vw, 5rem);
  overflow: hidden;
  position: relative;
}

/* An oversized crop of the AUTHENTIC AR monogram, bleeding off the right
   edge of the hero — brand presence at architectural scale rather than a
   generic radial glow. It is the real asset, not a redraw, masked back so
   it sits under the headline as a watermark. */

.hero__glyph {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

.hero__glyph img {
  position: absolute;
  right: -14vw;
  top: 50%;
  translate: 0 -50%;
  width: min(78vw, 1080px);
  max-width: none;
  opacity: 0.1;
}

/* A single ignition rule anchored to the hero's left margin — the small
   directional accent, at the scale of a printer's rule. It runs from the
   edge and always stops 1rem short of the content column (whatever is
   left of .wrap plus its gutter), so it never crosses the hero copy;
   6rem at most on wide screens. */
.hero__glyph::after {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: min(6rem, max(0px, (100vw - var(--wrap-max)) / 2) + var(--wrap-gutter) - 1rem);
  height: 6px;
  background: var(--accent);
  translate: 0 -50%;
}

@media (max-width: 899px) {
  .hero__glyph img {
    right: -32vw;
    width: 128vw;
    opacity: 0.08;
  }

  .hero__glyph::after {
    display: none;
  }
}

.hero__inner {
  position: relative;
  z-index: 1;
}

.hero__lede {
  margin-top: 1.6rem;
}

.hero__actions {
  margin-top: 2.2rem;
}

/* Mobile hero density. The headline stays dominant; what tightens is the
   space above it and the size of the paragraph under it. */
@media (max-width: 899px) {
  .hero {
    min-height: 0;
    /* 76px header + 72px breathing room above the headline */
    padding-block: 148px 3.5rem;
    align-items: flex-start;
  }

  .hero h1 {
    font-size: 44px;
    line-height: 0.94;
  }

  .hero__lede {
    font-size: 18px;
    line-height: 1.55;
    margin-top: 1.15rem;
    max-width: 34ch;
  }

  .hero__actions {
    margin-top: 1.75rem;
    gap: 0.7rem;
  }

  .hero__actions .btn {
    padding: 0.95em 1.5em;
  }

  .scroll-cue {
    margin-top: 2rem;
  }
}

/* ---------- Scroll cue: a short introductory nudge, not a loop ---------- */

.scroll-cue {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  margin-top: 3rem;
  color: var(--ink-dim);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: opacity 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

.scroll-cue svg {
  width: 1em;
  height: 1em;
}

.scroll-cue.is-dismissed {
  opacity: 0;
}

/* Two nudges after the intro lands, then it stops for good. */
[data-intro="done"] .scroll-cue svg {
  animation: cue-nudge 1.5s cubic-bezier(0.16, 1, 0.3, 1) 2 both;
}

@keyframes cue-nudge {
  0%,
  55%,
  100% {
    transform: translateY(0);
  }
  30% {
    transform: translateY(4px);
  }
}

/* ---------- The opening sequence ---------- */

.signal-intro {
  display: none;
}

[data-intro="running"] .signal-intro {
  display: block;
  position: fixed;
  inset: 0;
  z-index: 150; /* above the header (100), below the skip link (200) */
  pointer-events: none; /* the visitor can scroll and click through it */
}

.signal-intro__veil {
  position: absolute;
  inset: 0;
  background: var(--hero-bg);
  overflow: hidden;
}

/* The ignition pulse: hard color-block bands on the monogram's own axis,
   running purple through magenta into the orange accent — stepped stops,
   not a soft blend, in keeping with the color-block system. */
.signal-intro__field {
  position: absolute;
  inset: -25%;
  background: linear-gradient(
    142deg,
    var(--brand-purple) 0%,
    var(--brand-purple) 34%,
    var(--brand-magenta) 34%,
    var(--brand-magenta) 62%,
    var(--brand-accent) 62%,
    var(--brand-accent) 74%,
    transparent 74%
  );
  opacity: 0;
}

.signal-intro__stage {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding-inline: clamp(1.25rem, 5vw, 4rem);
}

/* Both marks occupy the same grid cell so they overlap dead-centre —
   no positioning transforms, because GSAP owns transform on these. */
.signal-intro__word,
.signal-intro__mark {
  grid-area: 1 / 1;
  height: auto;
}

.signal-intro__word {
  width: min(80vw, 940px);
}

.signal-intro__mark {
  width: clamp(132px, 19vw, 292px);
  opacity: 0;
}

/* ---------- Campaign-card fan-out ---------- */

/* The carousel scrollbar sits on a saturated brand field, where the OS
   default reads as a black bar across the composition. */
.home .work-carousel {
  scrollbar-width: thin;
  scrollbar-color: color-mix(in oklab, currentColor 45%, transparent) transparent;
}

.home .work-carousel::-webkit-scrollbar {
  height: 6px;
}

.home .work-carousel::-webkit-scrollbar-track {
  background: transparent;
}

.home .work-carousel::-webkit-scrollbar-thumb {
  background: color-mix(in oklab, currentColor 45%, transparent);
  border-radius: 999px;
}

/* Room above the row for the stacked cards' upward diagonal, taken back
   out with a negative margin so the section's rhythm is unchanged. */.home .work-carousel {
  padding-top: 76px;
  margin-top: -76px;
  /* Snap positions must respect the .wrap gutter that pages.css's
     negative-margin/padding-inline pair exists to preserve — without
     this, scroll-snap parks card 1 flush against the viewport edge. */
  scroll-padding-inline: clamp(1.25rem, 4vw, 3rem);
}

/* While stacked, the row is a composition, not a scroller. */
.home .work-carousel.is-stacked {
  overflow-x: hidden;
  scroll-snap-type: none;
  cursor: default;
}

/* An opaque base under the card surface, so overlapping cards read as a
   real stack instead of blending into one mass. The tint itself comes from
   pages.css — do NOT paint the section color here, or every card turns
   into the field it sits on. */
.home .work-card {
  transform-origin: 50% 100%;
}

/* Mobile: no pinning, no choreography — the finished swipeable row,
   with the next card peeking to show the strip continues. */
@media (max-width: 899px) {
  .home .work-carousel {
    padding-top: 0;
    margin-top: 0;
    scroll-snap-type: x mandatory;
    overflow-x: auto;
  }
  .home .work-card {
    flex: 0 0 min(78vw, 300px);
  }
}

/* ---------- Section motion pre-states ---------- */

/* Applied only once JS confirms it can animate; GSAP overwrites these
   with inline styles as each section enters. */
[data-motion-ready] .home [data-motion="head"] h2 {
  clip-path: inset(0% 0% 104% 0%);
}

[data-motion-ready] .home [data-motion="head"] .lede {
  opacity: 0;
}

/* ---------- Button feedback: transform only, fast ---------- */

.home .btn {
  transition: transform 0.14s cubic-bezier(0.16, 1, 0.3, 1),
    background-color 0.15s ease, color 0.15s ease;
}

.home .btn:active {
  transform: translateY(0) scale(0.97);
}

/* ---------- Reduced motion: finished states, no choreography ---------- */

@media (prefers-reduced-motion: reduce) {
  .signal-intro {
    display: none !important;
  }

  .scroll-cue svg,
  [data-intro="done"] .scroll-cue svg {
    animation: none !important;
  }

  .home .work-carousel {
    padding-top: 0;
    margin-top: 0;
    overflow-x: auto;
  }

  .home .work-card {
    transform: none !important;
  }

  .signal-intro__mark,
  .signal-intro__word,
  [data-mark-signal],
  [data-mark-open],
  [data-word-reveal],
  [data-word-close] {
    transform: none !important;
    opacity: 1 !important;
  }

  .home [data-motion] h2,
  .home [data-motion] .lede {
    clip-path: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}