/* Homepage: hero, logo marquee, advantage, quotes, LINK platform, guidance list, closing CTA. Shared chrome in site.css. */

/* Rotating headline word: the three phrases stack in one grid cell and flip on a card-like axis. */
.rotator { display: inline-grid; perspective: 600px; vertical-align: top; }
.rotator__word {
  grid-area: 1 / 1; display: inline-block; color: var(--text-accent); opacity: 0;
  transform-origin: center center -0.28em; backface-visibility: hidden;
}
/* The first word is visible before JS runs; home.js then always keeps one state class on it. */
.rotator__word:first-child { opacity: 1; }
.rotator__word.is-active { animation: fastener-word-flip-in 480ms var(--ease-route) both; }
.rotator__word.is-leaving { animation: fastener-word-flip-out 480ms var(--ease-route) both; }
@keyframes fastener-word-flip-in { 0% { opacity: 0; transform: rotateX(-90deg); } 100% { opacity: 1; transform: rotateX(0deg); } }
@keyframes fastener-word-flip-out { 0% { opacity: 1; transform: rotateX(0deg); } 100% { opacity: 0; transform: rotateX(90deg); } }
.rotator__br { display: none; }

/* ---------- Logo marquee ---------- */
.logos { border-top: 1px solid var(--border-subtle); background: var(--light-gray); }
.logos__inner { max-width: 1600px; margin: 0 auto; padding: 30px var(--gutter); }
.logos__stack { display: flex; flex-direction: column; gap: 20px; }
.logos__label {
  font: var(--type-eyebrow); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase;
  color: var(--text-tertiary); text-align: center;
}
.logo-marquee { position: relative; overflow: hidden; cursor: grab; touch-action: pan-y; user-select: none; }
.logo-marquee.is-dragging { cursor: grabbing; }
/* Edge fades as overlays: a mask over a 16,000px moving strip re-rasterizes every frame and stutters. */
.logo-marquee::before, .logo-marquee::after { content: ""; position: absolute; top: 0; bottom: 0; width: 7%; z-index: 1; pointer-events: none; }
.logo-marquee::before { left: 0; background: linear-gradient(90deg, var(--light-gray), rgba(242, 242, 239, 0)); }
.logo-marquee::after { right: 0; background: linear-gradient(270deg, var(--light-gray), rgba(242, 242, 239, 0)); }
/* Each track lists its logo set twice; home.js moves it and wraps at the halfway point. data-speed is px/s, negative runs right. */
.logo-track { display: flex; width: max-content; will-change: transform; transform: translate3d(0, 0, 0); }
.logo-track img {
  height: 28px; width: auto; max-width: 150px; object-fit: contain; flex: none;
  margin-right: 72px; align-self: center; pointer-events: none; user-select: none; -webkit-user-drag: none;
}

/* ---------- The Fastener Advantage ---------- */
.advantage__copy { display: flex; flex-direction: column; gap: 18px; }
.advantage__copy p { margin: 0; font: var(--type-body); color: var(--text-inverse-secondary); text-wrap: pretty; }

/* ---------- Quotes ---------- */
.quotes { background: var(--light-gray); }
.quotes__inner { max-width: var(--container-max); margin: 0 auto; padding: 80px var(--gutter) 48px; }
.quotes__stack { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 18px; }
/* Every figure sits in the same grid cell, so the block is as tall as the longest quote and never clips. */
.quotes__stage { position: relative; display: grid; width: 100%; min-height: 132px; }
.quote {
  grid-area: 1 / 1; margin: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px;
  opacity: 0; pointer-events: none; transition: opacity 420ms var(--ease-standard);
}
.quote.is-active { opacity: 1; pointer-events: auto; }
.quote__text {
  margin: 0; font: italic var(--weight-semibold) var(--text-h3) / 1.42 var(--font-display);
  letter-spacing: var(--tracking-heading); color: var(--text-primary); max-width: 60ch; text-wrap: pretty;
}
.quote__attr { font: var(--type-body-sm); color: var(--text-tertiary); }
.quotes__dots { display: flex; gap: 10px; margin-top: 2px; }
.quotes__dot {
  width: 9px; height: 9px; border-radius: 999px; padding: 0; cursor: pointer;
  border: 1.5px solid #BFC2BE; background: transparent;
  transition: background-color 220ms, border-color 220ms;
}
.quotes__dot.is-active { border-color: var(--green-500); background: var(--green-500); }

/* ---------- Powered by LINK ---------- */
.platform { background: var(--light-gray); }
.platform .band__inner { padding-bottom: 200px; }
.platform .split { margin-bottom: 44px; }
.platform__lede { margin: 0; font: var(--type-body); color: var(--text-secondary); text-wrap: pretty; }
.route-art--linkart { left: 0; right: 0; bottom: 0; height: 170px; opacity: .6; }

/* ---------- Beyond the introduction ---------- */
.beyond { background: var(--light-gray); border-top: 1px solid var(--border-subtle); }
.beyond__lede { margin: 18px 0 0; font: var(--type-body); color: var(--text-secondary); max-width: 40ch; text-wrap: pretty; }
.beyond__intro { margin: 0 0 18px; font: var(--type-body); color: var(--text-secondary); text-wrap: pretty; }
.signals { display: grid; grid-template-columns: repeat(2, 1fr); column-gap: 32px; margin: 0; padding: 0; list-style: none; }
.signals li { display: flex; align-items: center; gap: 12px; padding: 13px 0; border-top: 1px solid var(--border-subtle); font: var(--type-body-sm); color: var(--text-primary); }
.signals li:nth-child(-n+2) { padding: 2px 0 13px; border-top: 0; }
.signals__node { width: 8px; height: 8px; border-radius: 999px; background: var(--green-500); flex: none; }

/* ---------- Closing CTA ---------- */
.cta-band__text--32 { max-width: 32ch; }
.cta-band__copy--home { max-width: 44ch; }
.route-art--cta {
  left: 33%; right: 0; top: 0; bottom: 0; opacity: .85; isolation: isolate;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 34%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 34%);
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .rotator__word { animation: none !important; }
  .rotator__word.is-active { opacity: 1; }
  .fx-icon { transform: none !important; }
  .fx-icon * { animation: none !important; }
}

/* ---------- Mobile ---------- */
@media (max-width: 820px) {
  /* Every phrase breaks into two lines and the rotator has a fixed two-line height, so the headline,
     lede and button never move as the phrases change. */
  .rotator { display: inline-block; position: relative; width: 100%; height: calc(2 * var(--leading-display) * 1em); }
  .rotator__word { position: absolute; top: 0; left: 0; right: 0; }
  .rotator__br { display: inline; }
  .logos__inner { padding: 40px 20px; }
  .quotes__inner { padding: 56px 20px; }
  .signals { grid-template-columns: 1fr; }
  .signals li:nth-child(2) { padding: 13px 0; border-top: 1px solid var(--border-subtle); }
}