/**
 * Homepage — "6 Years In" banner.
 *
 * Figma page "Banner Adaptation": 1920 (829:33229), 1440 (587:16580),
 * 1024 (829:33277), 768 (829:33373), 375 (829:33325).
 *
 * The banner box tracks `container-section-tablet` plus the neighbouring
 * sections' padding, so it lines up edge-to-edge with them:
 *   <1024 → 100vw   1024 → 890   1440 → 1280   1920 → 1680
 *
 * Two fonts stand in for Figma originals the theme does not license:
 *   "ABC Diatype Mono Trial" → Victor Mono (same 0.6em advance, already the
 *   section's mono elsewhere). "Everfit Denim INK AllOn" is the theme's
 *   "Everfit Denim AllOn".
 */

.six-years {
  /* Typography + geometry tokens; every breakpoint below only re-points these. */
  --sy-h-size: 36px;
  --sy-h-lh: 32px;
  --sy-h-tracking: -0.72px;
  --sy-indent-2: 63px;
  /* Where "us." starts on row 3, measured from the line's left edge — so it is
     the width of "MORE" plus the gap Figma writes as a run of literal spaces.
     Both halves come off EverfitDenimINKAllOn-Bold rather than being guessed:
       "MORE"  2.854em of advances, -0.02em letter-spacing x 4  = 2.774em
       space   0.192em advance, less the same -0.02em           = 0.172em
     Row 3 carries 4 spaces at 375 and 768, so 2.774 + 4 x 0.172 = 3.462em.

     In em, and stated as a sum, because the old px values had drifted badly:
     they reserved 2.12-2.16em for a word that is 2.774em wide, which left 3px
     of gap at 375/768 and a 4px overlap at 1024. Re-measure both terms from
     the font if the display face is ever swapped. */
  --sy-indent-3: 3.462em;
  --sy-cta-size: 54px;
  --sy-cta-arrow: 21px;
  --sy-cta-label: 16px;
  /* Horizontal centre of the card column inside the media panel. Everything in
     the media lockup — ground, wordmark, labels — is anchored to it. */
  --sy-anchor: 50%;
  /* The wordmark sits 28px left of the anchor so its "( )" gap frames the card. */
  --sy-wm-shift: -28px;

  max-width: 100%;
  margin: 0 auto 50px;
  padding: 0 20px;
}

.six-years__card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 8px;
}

.six-years__card:focus-visible {
  outline: 2px solid #000;
  outline-offset: 3px;
}

/* ---------- Left panel ---------- */

.six-years__panel {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 100%;
  min-height: 312px;
  padding: 16px;
  overflow: hidden;
  background: #d5f71e;
}

.six-years__top {
  display: flex;
  flex-direction: column;
  gap: 18px;
  width: 100%;
}

/* ---------- Heading ---------- */

.six-years__heading {
  display: flex;
  flex-direction: column;
  width: 100%;
  margin: 0;
  font-family: "Everfit Denim AllOn", Inter, sans-serif;
  font-size: var(--sy-h-size);
  font-weight: 700;
  line-height: var(--sy-h-lh);
  color: #000;
  text-transform: uppercase;
  letter-spacing: var(--sy-h-tracking);
}

/* Clip band for the roll-in. Leading is below 1 at every breakpoint, so the
   glyphs legitimately overflow their own line box: the band is padded and the
   padding pulled straight back out, otherwise `overflow: hidden` shaves the
   cap tops. In em so it tracks the type size. The heading is a flex column so
   these negative margins cannot collapse into each other. */
.six-years__hrow {
  display: block;
  padding-block: 0.2em;
  margin-block: -0.2em;
  overflow: hidden;
  white-space: nowrap;
}

.six-years__hrow-inner {
  display: block;
  will-change: transform;
}

.six-years__word {
  display: inline-block;
  white-space: pre;
}

/* Figma indents rows 2 and 3 with runs of spaces; fixed offsets survive font
   rasterisation and keep the hover scramble from shifting the layout. */
.six-years__hrow--indent {
  padding-left: var(--sy-indent-2);
}

.six-years__hrow--split .six-years__hrow-inner {
  display: flex;
}

.six-years__hrow--split .six-years__word:first-child {
  flex: 0 0 var(--sy-indent-3);
}

/* ---------- Body copy ---------- */

.six-years__body {
  width: 100%;
  margin: 0;
  font-family: "Victor Mono", monospace;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.7;
  color: #000;
  text-transform: uppercase;
  letter-spacing: -0.12px;
  text-box-edge: cap alphabetic;
  text-box-trim: trim-both;
}

/* ---------- CTA ---------- */

.six-years__cta {
  display: flex;
  align-items: center;
  width: 100%;
  text-decoration: none;
}

.six-years__cta-icon {
  display: flex;
  flex: 0 0 var(--sy-cta-size);
  align-items: center;
  justify-content: center;
  width: var(--sy-cta-size);
  height: var(--sy-cta-size);
  background: #000;
  border-radius: 50%;
  transition: background-color 0.2s ease;
}

.six-years__cta-icon img {
  width: var(--sy-cta-arrow);
  height: auto;
  transition: transform 0.25s ease;
}

.six-years__cta-bar {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  justify-content: space-between;
  min-width: 0;
  height: var(--sy-cta-size);
  background: rgba(0, 0, 0, 0.08);
  backdrop-filter: blur(10px);
  transition: background-color 0.2s ease;
}

/* The link is the whole card, so the button reacts to the whole card. */
.six-years__card:hover .six-years__cta-bar,
.six-years__card:focus-visible .six-years__cta-bar {
  background: rgba(0, 0, 0, 0.14);
}

.six-years__card:hover .six-years__cta-icon img {
  transform: translateX(3px);
}

.six-years__ticks {
  display: flex;
  flex: none;
  flex-direction: column;
  justify-content: space-between;
  width: 3px;
  height: 100%;
}

.six-years__ticks::before,
.six-years__ticks::after {
  width: 3px;
  height: 3px;
  content: "";
  background: #000;
}

.six-years__cta-label {
  min-width: 0;
  overflow: hidden;
  font-family: "Victor Mono", monospace;
  font-size: var(--sy-cta-label);
  font-weight: 700;
  color: #000;
  text-transform: uppercase;
  white-space: nowrap;
}

/* ---------- Right media ---------- */

.six-years__media {
  position: relative;
  width: 100%;
  height: 356px;
  overflow: hidden;
  background: #e7e6e0;
}

.six-years__labels {
  position: absolute;
  top: 35px;
  left: var(--sy-anchor);
  z-index: 3;
  display: none;
  justify-content: space-between;
  width: min(100% - 42px, 985px);
  margin: 0;
  font-family: "Victor Mono", monospace;
  font-size: 14px;
  line-height: 1;
  color: #000;
  text-transform: uppercase;
  white-space: nowrap;
  opacity: 0.5;
  transform: translateX(calc(-50% + var(--sy-wm-shift)));
}

/* Figma stretches the ground group to the media pane (829:33545: 1099 wide at
   1920) while the artwork inside keeps its natural 985 and is inset. Same split
   here: the band spans the pane, the art does not scale with it.

   ground.svg's own white rectangle is only 887 wide. It overhangs the pane at
   every breakpoint up to 1440, so the shortfall never showed — but at 1920 the
   pane is wider than the artwork and the backdrop showed through at both ends. */
.six-years__ground {
  position: absolute;
  top: 300px;
  right: 0;
  left: 0;
  height: 254.187px;
}

/* Figma's Rectangle 1321322625 sits 1.27px down inside the group. */
.six-years__ground::before {
  position: absolute;
  inset: 1.27px 0 0;
  content: "";
  background: #fff;
}

.six-years__ground-art {
  position: absolute;
  top: 0;
  left: var(--sy-anchor);
  width: 985px;
  height: 100%;
  max-width: none;
  transform: translateX(-50%);
}

.six-years__wordmark {
  position: absolute;
  top: 61px;
  left: var(--sy-anchor);
  width: 763.336px;
  height: 233.64px;
  transform: translateX(calc(-50% + var(--sy-wm-shift)));
}

.six-years__wm {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
}

/* The flash itself is driven from JS: it is a continuous square-ish pulse with
   the two halves half a cycle out of phase, which a keyframe pair cannot hold
   in sync once the section pauses and resumes. */

/* ---------- Card orbit ---------- */

.six-years__orbit {
  position: absolute;
  inset: 0;
  z-index: 2;
}

/* Slot 0 is Figma's 213.014 x 238.801 centre card; the smaller slots are the
   same box scaled, so one base box plus a per-slot transform covers all five. */
.six-years__cell {
  position: absolute;
  top: 177.4px;
  left: var(--sy-anchor);
  width: 213.014px;
  height: 238.801px;
  margin: -119.4px 0 0 -106.507px;
  overflow: hidden;
  background: #000;
  /* 0.7s to travel one station, leaving 0.3s parked before the next move. */
  transition:
    transform 0.7s cubic-bezier(0.86, 0.14, 0.14, 0.86),
    opacity 0.7s ease-out;
}

.six-years__cell img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* A recycled cell jumps from the top of the stack back to the bottom; the jump
   itself must not animate. */
.six-years__cell.is-jump {
  transition: none;
}

.six-years__cell[data-slot="0"] {
  z-index: 6;
  transform: translateY(0) scale(1);
}

.six-years__cell[data-slot="1"] {
  z-index: 5;
  transform: translateY(50.3px) scale(0.7993);
}

.six-years__cell[data-slot="2"] {
  z-index: 4;
  transform: translateY(106.3px) scale(0.5994);
}

.six-years__cell[data-slot="-1"] {
  z-index: 3;
  transform: translateY(-50.3px) scale(0.7993);
}

.six-years__cell[data-slot="-2"] {
  z-index: 2;
  transform: translateY(-106.3px) scale(0.5994);
}

.six-years__cell[data-slot="3"],
.six-years__cell[data-slot="-3"] {
  z-index: 1;
  opacity: 0;
}

.six-years__cell[data-slot="3"] {
  transform: translateY(162.3px) scale(0.3995);
}

.six-years__cell[data-slot="-3"] {
  transform: translateY(-162.3px) scale(0.3995);
}

/* ---------- Entrance ---------- */

/* `is-armed` is set the moment the script runs, long before the section is
   scrolled to, and parks the two things that arrive from below. Without it
   they would paint in their resting place and then jump down to start, since
   the scroll trigger fires well after first paint. The JS overwrites both with
   exact pixel values on its first frame.

   Only the copy pane animates in. The media pane has no entrance of its own —
   it is simply there, and the orbit and the wordmark flash carry it. */
.six-years.is-armed .six-years__hrow-inner {
  transform: translate3d(0, 125%, 0);
}

.six-years.is-armed .six-years__cta {
  opacity: 0;
  transform: translate3d(0, 135%, 0);
}

/* ---------- >= 640px ---------- */

@media (min-width: 640px) {
  .six-years {
    --sy-cta-label: 18px;

    margin-bottom: 60px;
    padding: 0 48px;
  }
}

/* ---------- >= 768px: panel and media side by side ---------- */

@media (min-width: 768px) {
  .six-years__card {
    flex-direction: row;
    height: 356px;
  }

  /* Hits Figma's panel width at every artboard: 336 @672, 381 @890,
     470 @1280, and clamps to the 1920 artboard's 551. */
  .six-years__panel {
    flex: 0 0 auto;
    width: clamp(336px, 22% + 188px, 551px);
    min-height: 356px;
    height: 100%;
    padding: 20px 16px;
  }

  .six-years__media {
    flex: 1 1 auto;
    width: auto;
    height: 100%;
  }
}

/* ---------- >= 1024px ---------- */

@media (min-width: 1024px) {
  .six-years {
    --sy-h-size: 42px;
    --sy-h-tracking: -0.84px;
    --sy-indent-2: 58px;
    --sy-indent-3: 3.290em;           /* 2.774 + 3 spaces, per the 1024 frame */
    --sy-cta-size: 60px;
    --sy-cta-arrow: 22.3px;

    max-width: 1024px;
    margin-bottom: 90px;
    padding: 0 67px;
  }

  .six-years__panel {
    padding: 24px 23px;
  }
}

/* ---------- >= 1440px ---------- */

@media (min-width: 1440px) {
  .six-years {
    --sy-h-size: 40px;
    --sy-h-tracking: -0.8px;
    --sy-indent-2: 97px;
    --sy-indent-3: 6.042em;           /* 2.774 + 19 spaces, per the 1440 frame */
    --sy-cta-size: 64px;
    --sy-cta-arrow: 26.24px;
    --sy-anchor: calc(50% + 26px);

    max-width: 1440px;
    margin-bottom: 150px;
    padding: 0 80px;
  }

  /* Only the two widest artboards carry the running heads. */
  .six-years__labels {
    display: flex;
  }
}

/* ---------- >= 1920px ---------- */

@media (min-width: 1920px) {
  .six-years {
    --sy-h-size: 48px;
    --sy-h-lh: 38px;
    --sy-h-tracking: -0.96px;
    --sy-indent-2: 117px;
    --sy-indent-3: 5.870em;           /* 2.774 + 18 spaces, per the 1920 frame */

    max-width: 1920px;
    margin-bottom: 120px;
    padding: 0 120px;
  }
}

/* ---------- Reduced motion ---------- */

/* The script never arms the section under reduced motion, so nothing is parked
   off-stage; this only stops the orbit sliding if a slot is ever rewritten. */
@media (prefers-reduced-motion: reduce) {
  .six-years__cell {
    transition: none;
  }
}