/* ==========================================================================
   Winda — Homepage composition.
   Section order is fixed by wireframe P1:
     hero · industry-voice strip · capability monitor · role selector
   ========================================================================== */

/* ==========================================================================
   1. Hero — full-bleed still, left-weighted text
   Motion Spec v3 §1.1, approved variant C. See js/home.js.
   ========================================================================== */

.hero-home {
  position: relative;
  padding: 0;
  height: 740px;
  overflow: hidden;
  border-bottom: 1px solid var(--w-line);
}

/* Carries either the still or the promo loop when the footage lands:
   <video autoplay muted loop playsinline poster="assets/hero-control-room.png">
   The class carries the framing, so nothing else changes. */
.hero-home__media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Horizontal scrim protects the headline; vertical scrim seats the section
   on the page ground. */
.hero-home__scrim {
  position: absolute;
  inset: 0;
  /* Overlay between the video and the copy: a top band seats the transparent
     nav, the left band protects the headline, the bottom band grounds the
     section, and a faint flat veil keeps the whole frame from competing with
     the type. */
  background:
    linear-gradient(180deg, rgba(4, 6, 8, 0.72) 0%, rgba(4, 6, 8, 0.22) 26%, transparent 48%),
    linear-gradient(90deg, rgba(4, 6, 8, 0.86) 0%, rgba(4, 6, 8, 0.52) 44%, rgba(4, 6, 8, 0.05) 76%),
    linear-gradient(0deg, rgba(4, 6, 8, 0.88) 0%, transparent 34%),
    rgba(4, 6, 8, 0.18);
}

/* Driven by scroll: text fades out over darkening footage. */
.hero-home__dark {
  position: absolute;
  inset: 0;
  background: #040608;
  opacity: 0;
}

.hero-home__frame {
  position: absolute;
  inset: 22px;
  border: 1px solid var(--w-line-green);
  pointer-events: none;
}

.hero-home__body {
  position: relative;
  z-index: 2;
  padding: 150px 72px;
  max-width: 900px;
}

.hero-home__h1 {
  font-size: 88px;
}

.hero-home__lede {
  margin: 24px 0 0;
  max-width: 56ch;
  color: rgba(244, 246, 242, 0.82);
}

.hero-home__cta {
  display: flex;
  gap: 14px;
  margin-top: 38px;
}

/* ==========================================================================
   2. Industry voice — horizontal marquee, pauses on hover
   Motion Spec v3 §1.6. Quotes are role + company-type only, never named.
   ========================================================================== */

.voice {
  border-top: 1px solid var(--w-line-green);
  border-bottom: 1px solid var(--w-line-green);
  background: #04070a;
  overflow: hidden;
  padding: 46px 0;
}

.voice__track {
  display: flex;
  gap: 0;
  width: max-content;
  animation: w-tick 62s linear infinite;
}

.voice:hover .voice__track,
.voice:focus-within .voice__track {
  animation-play-state: paused;
}

/* No marquee for reduced-motion users — the strip becomes a static grid so
   every quote is still readable. js/home.js skips the clone in this mode. */
@media (prefers-reduced-motion: reduce) {
  .voice__track {
    animation: none;
    width: auto;
    flex-wrap: wrap;
    gap: 28px 0;
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 var(--gutter);
  }

  .vq {
    width: 50%;
  }

  .vq:nth-child(even) {
    border-right: 0;
  }
}

.vq {
  position: relative;
  flex-shrink: 0;
  width: 600px;
  padding: 0 54px;
  border-right: 1px solid var(--w-line);
}

/* Oversized opening-quote glyph, seated above the first line. */
.vq::before {
  content: "\201C";
  position: absolute;
  top: -24px;
  left: 34px;
  font-family: var(--font-body);
  font-style: italic;
  font-size: 70px;
  line-height: 1;
  color: var(--w-green);
  opacity: 0.4;
}

.vq p {
  font: italic 500 23px/1.5 var(--font-body);
  color: rgba(244, 246, 242, 0.92);
  text-align: justify;
  text-justify: inter-word;
}

.vq figcaption {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--w-green);
  margin-top: 16px;
  font-style: normal;
}

/* ==========================================================================
   3. Capability — the section reads as a monitor. Holographic pipeline is the
   layout; the three capability plates are fixed to it, not floating over it.
   ========================================================================== */

.cap {
  position: relative;
  overflow: hidden;
  background: #050607;
  padding: 0;
}

/* --- monitor chrome --- */

.cap__corner {
  position: absolute;
  width: var(--hud-corner);
  height: var(--hud-corner);
  z-index: 4;
}

.cap__corner--tl {
  top: 18px;
  left: 18px;
  border-top: 1px solid rgba(181, 208, 88, 0.8);
  border-left: 1px solid rgba(181, 208, 88, 0.8);
}

.cap__corner--tr {
  top: 18px;
  right: 18px;
  border-top: 1px solid rgba(181, 208, 88, 0.8);
  border-right: 1px solid rgba(181, 208, 88, 0.8);
}

.cap__corner--bl {
  bottom: 18px;
  left: 18px;
  border-bottom: 1px solid rgba(181, 208, 88, 0.8);
  border-left: 1px solid rgba(181, 208, 88, 0.8);
}

.cap__corner--br {
  bottom: 18px;
  right: 18px;
  border-bottom: 1px solid rgba(181, 208, 88, 0.8);
  border-right: 1px solid rgba(181, 208, 88, 0.8);
}

.cap__rec {
  position: absolute;
  top: 26px;
  right: 60px;
  font-size: 9.5px;
  letter-spacing: 0.16em;
  color: var(--w-green);
  z-index: 4;
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

/* Scanlines sit above the pipeline and below the plates — the readout is on
   the glass, the annotations are in front of it. */
.cap__scanlines {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  background: repeating-linear-gradient(180deg, rgba(255, 255, 255, 0.02) 0 1px, transparent 1px 3px);
}

/* --- heading --- */

.cap__head {
  padding-top: 96px;
  padding-bottom: 30px;   /* a little breathing room above the pipeline stage */
  position: relative;
  z-index: 3;
}

/* Title and subline share a baseline row, wrapping on narrow widths. */
.cap__title-row {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
}

.cap__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(34px, 3.8vw, 48px);
  line-height: 1;
  letter-spacing: -0.012em;
  color: var(--w-white);
}

.cap__title em {
  font-style: normal;
  color: var(--w-green);
}

.cap__sub {
  max-width: none;          /* one line: not constrained to 62ch beside the title */
  font: 400 16px/1.6 var(--font-body);
  color: var(--w-grey);
}

/* Closing statement below the pipe. Closes the section against the 96px
   the heading opens it with. */
.cap__foot {
  position: relative;
  z-index: 3;
  padding-bottom: 96px;
}

.cap__close {
  max-width: 62ch;
  text-align: left;
  /* Match the How We Engage "You self-position…" line: display face, 800, 24px. */
  font: 800 24px/1.3 var(--font-display);
  color: var(--w-white);
}

/* --- pipeline stage --- */

.cap__stage {
  position: relative;
  height: 480px;
}

.cap__pipe {
  position: absolute;
  left: -3%;
  width: 106%;
  max-width: none;
  height: auto; /* intrinsic ratio, not the width/height attributes */
  top: 47%;
  transform: translateY(-50%);
  pointer-events: none;
}

.cap__sheen {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 200px;
  background: linear-gradient(90deg, transparent, rgba(181, 208, 88, 0.14), transparent);
  animation: psheen 10s linear infinite;
  pointer-events: none;
}

.cap__scrim {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgba(5, 6, 7, 0.12),
    rgba(5, 6, 7, 0.5) 38%,
    rgba(5, 6, 7, 0.5) 62%,
    rgba(5, 6, 7, 0.12)
  );
}

@keyframes psheen {
  from { left: -14%; }
  to { left: 106%; }
}

/* Signal packets travelling the pipe axis. Abstract dots — never a readout,
   never a number (no fabricated telemetry). */
.cap__packets {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.cap__packet {
  position: absolute;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #dff0a8;
  box-shadow: 0 0 10px rgba(181, 208, 88, 0.95), 0 0 22px rgba(181, 208, 88, 0.5);
  animation: pdrift linear infinite;
}

.cap__packet:nth-child(1) { top: calc(52% - 5px); animation-duration: 11s;   animation-delay: 0s; }
.cap__packet:nth-child(2) { top: calc(52% + 4px); animation-duration: 9.4s;  animation-delay: 2.1s; }
.cap__packet:nth-child(3) { top: calc(52% - 1px); animation-duration: 12.6s; animation-delay: 4.4s; }
.cap__packet:nth-child(4) { top: calc(52% + 7px); animation-duration: 8.6s;  animation-delay: 6.2s; }
.cap__packet:nth-child(5) { top: calc(52% + 2px); animation-duration: 11.8s; animation-delay: 8.7s; }

@keyframes pdrift {
  0% { left: -3%; opacity: 0; }
  6% { opacity: 1; }
  94% { opacity: 1; }
  100% { left: 102%; opacity: 0; }
}

.cap__monitor {
  position: absolute;
  left: 56px;
  bottom: 26px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--w-green);
}

.dot-live {
  flex: 0 0 auto;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--w-green);
  animation: hpulse 2.4s ease-in-out infinite;
}

@keyframes hpulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

/* --- capability plates: bolted to the pipe wall --- */

.plate {
  display: flex;
  flex-direction: column;
  color: inherit;
  background: rgba(6, 9, 7, 0.68);
  backdrop-filter: blur(3px);
  border: 1px solid rgba(181, 208, 88, 0.45);
  border-top: 2px solid var(--w-green);
  box-shadow: 0 10px 34px rgba(0, 0, 0, 0.45), 0 0 22px rgba(181, 208, 88, 0.14);
  padding: 24px 26px;
  transition: all 280ms var(--ease-engage);
}

.plate:hover,
.plate:focus-visible {
  transform: translateY(-5px);
  border-color: var(--w-green);
  background: rgba(6, 9, 7, 0.88);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.6), 0 0 30px rgba(181, 208, 88, 0.28);
  color: inherit;
}

/* Title stays on one line — the plate is fixed-width and must not wrap. */
.ptitle {
  display: block;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 24px;
  color: var(--w-white);
  white-space: nowrap;
}

/* The one deliberately round element in a 0px-radius system: a badge that
   fills green and slides its arrow on hover. */
.parrow {
  align-self: flex-end;
  margin-top: 16px;
  width: 36px;
  height: 36px;
  border: 1px solid var(--w-line-green);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 280ms var(--ease-engage);
}

.parrow svg {
  width: 16px;
  height: 16px;
  stroke: var(--w-green);
  fill: none;
  stroke-width: 1.8;
  transition: transform 280ms var(--ease-engage);
}

.plate:hover .parrow,
.plate:focus-visible .parrow {
  background: var(--w-green);
  border-color: var(--w-green);
}

.plate:hover .parrow svg,
.plate:focus-visible .parrow svg {
  stroke: var(--w-black);
  transform: translateX(3px);
}

/* Description is the hover payload — collapsed at rest so the plate reads as
   a label, not a half-empty card. */
.plate .sdesc {
  display: block;
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  margin-top: 0;
  transform: translateY(6px);
  transition: all 320ms var(--ease-engage);
  pointer-events: none;
  font: 400 12.5px/1.5 var(--font-body);
  color: #c9cec7;
}

.plate:hover .sdesc,
.plate:focus-visible .sdesc {
  opacity: 1;
  max-height: 90px;
  margin-top: 6px;
  transform: none;
}

.cap__plate {
  position: absolute;
  top: 190px;
  width: 280px;
  z-index: 3;
}

.cap__plate--hardware { left: 6%; }
.cap__plate--software { left: 38%; }
.cap__plate--services { left: 70%; }

/* Nothing in the monitor moves for reduced-motion users. */
@media (prefers-reduced-motion: reduce) {
  .cap * {
    animation: none !important;
  }
}

/* ==========================================================================
   4. Role selector — the only filter entry point into Scenarios.
   Motion Spec v3 §1.5.
   ========================================================================== */

.roles {
  border-bottom: 0;
}

.roles__grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 64px;
  align-items: center;
}

.roles__grid .h2 {
  margin-bottom: 16px;
}

.roles__col {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

/* "I work in…" lead-in, sat above the rolling window. */
.roles__prompt {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(30px, 3.4vw, 44px);
  line-height: 1;
  color: var(--w-white);
}

/* The .roleroll-* component (the 72px rolling window) now lives in base.css so
   the scenarios page can reuse it. .roles__* layout stays here. */

/* ==========================================================================
   Homepage — narrow viewports.
   The desktop composition above is authoritative at >= 1100px; below that it
   degrades in place. Absolute positioning on the pipeline stage is the first
   thing to go.
   ========================================================================== */

@media (max-width: 1180px) {
  .hero-home__h1 {
    font-size: clamp(52px, 7.4vw, 88px);
  }

  .hero-home__body {
    padding: 130px 56px;
  }
}

@media (max-width: 1100px) {
  .cap__stage {
    height: auto;
    padding: 40px 0 64px;
  }

  .cap__pipe {
    position: relative;
    left: -3%;
    top: auto;
    transform: none;
  }

  .cap__scrim,
  .cap__sheen,
  .cap__packets {
    display: none;
  }

  /* Plates leave the pipe wall and become a row beneath it. */
  .cap__plate {
    position: static;
    width: auto;
  }

  .cap__plates {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    padding: 32px var(--gutter) 0;
    max-width: var(--container);
    margin: 0 auto;
    position: relative;
    z-index: 3;
  }

  /* No hover on touch — show the descriptions. */
  .plate .sdesc {
    opacity: 1;
    max-height: none;
    margin-top: 6px;
    transform: none;
  }

  .cap__monitor {
    position: static;
    margin: 28px var(--gutter) 0;
  }

  .roles__grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
}

@media (max-width: 760px) {
  .hero-home {
    height: auto;
    min-height: 620px;
  }

  .hero-home__body {
    padding: 110px 40px 90px;
  }

  .hero-home__cta {
    flex-wrap: wrap;
  }

  .vq {
    width: 380px;
    padding: 0 28px;
  }

  .cap__plates {
    grid-template-columns: 1fr;
  }

  .cap__head {
    padding-top: 72px;
  }
}

@media (max-width: 640px) {
  .hero-home__body {
    padding: 90px 20px 72px;
  }

  .hero-home__h1 {
    font-size: 44px;
  }

  .roleroll-item {
    font-size: 22px;
    padding: 16px 18px;
  }
}