/* ==========================================================================
   Features page — scene choreography and page layout.
   Requires scenes.css (the shared 3D engine).
   ========================================================================== */

/* ==========================================================================
   Hero: format stack
   ========================================================================== */
.scene-hero .card3d {
  --x: 100px; --y: 70px; --w: 240px; --h: 160px;
  animation: bob 6s ease-in-out infinite;
}
.scene-hero .c1 { --z: 0px;  animation-delay: 0s; }
.scene-hero .c2 { --z: 28px; animation-delay: -.8s; }
.scene-hero .c3 { --z: 56px; animation-delay: -1.6s; }
.scene-hero .c4 { --z: 84px; animation-delay: -2.4s; }
.scene-hero .top {
  --z: 126px;
  --c: #b0201a;
  border-color: rgba(255, 140, 140, .35);
  box-shadow: 0 0 60px rgba(240, 72, 72, .45);
  animation: bob 6s ease-in-out infinite, glow 3s ease-in-out infinite;
  animation-delay: -3.2s, 0s;
}
.scene-hero .top .lines { filter: brightness(1.6); }
.scene-hero .top .ext { color: #fff; }


.scene-hero .hud-in  { top: 12%; left: 2%; }
.scene-hero .hud-out { bottom: 10%; right: 4%; }


/* ==========================================================================
   Scene: timing (ripple + playhead)
   ========================================================================== */
.s-timing .track { --x: 10px; --y: 112px; --w: 420px; --h: 76px; }
.s-timing .ev { --y: 124px; --h: 52px; --d: 26px; animation: ripple 7s cubic-bezier(.6, 0, .2, 1) infinite; }
.s-timing .e1 { --x: 28px;  --w: 74px; animation-delay: 0s; }
.s-timing .e2 { --x: 112px; --w: 92px; animation-delay: .08s; }
.s-timing .e3 { --x: 214px; --w: 60px; animation-delay: .16s; }
.s-timing .e4 { --x: 284px; --w: 70px; animation-delay: .24s; }
.s-timing .ticks {
  position: absolute;
  left: 10px; top: 196px; width: 420px; height: 14px;
  background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .28) 0 1px, transparent 1px 21px);
}
.s-timing .playhead { --x: 18px; --y: 104px; --w: 3px; --h: 92px; --d: 2px; --c: #f04848; box-shadow: 0 0 18px #f04848; animation: sweep 7s linear infinite; }
.s-timing .playhead::before { height: 2px; }
.s-timing .playhead { --sheet: 96px; }
.s-timing .hud-a { animation: show-mid 7s infinite; }

@keyframes ripple {
  0%, 18% { translate: 0 0 0; }
  32%, 70% { translate: 52px 0 0; }
  84%, 100% { translate: 0 0 0; }
}
@keyframes sweep { from { translate: 0 0 0; } to { translate: 400px 0 0; } }
@keyframes show-mid { 0%, 22% { opacity: 0; translate: 0 6px; } 32%, 70% { opacity: 1; translate: 0 0; } 80%, 100% { opacity: 0; translate: 0 6px; } }

/* ==========================================================================
   Scene: segmentation (three sources -> one output)
   ========================================================================== */
.s-seg .src { --x: 10px; --w: 420px; --h: 34px; }
.s-seg .src.a { --y: 10px; }
.s-seg .src.b { --y: 62px; }
.s-seg .src.c { --y: 114px; }
.s-seg .out { --x: 10px; --y: 222px; --w: 420px; --h: 44px; --c: #26262b; }
.s-seg .seg { --h: 22px; --d: 22px; }
.s-seg .seg.ya { --y: 16px; }
.s-seg .seg.yb { --y: 68px; }
.s-seg .seg.yc { --y: 120px; }
.s-seg .k1 { --x: 150px; --w: 120px; }
.s-seg .k2 { --x: 290px; --w: 100px; }
.s-seg .k3 { --x: 40px;  --w: 150px; }
.s-seg .k4 { --x: 330px; --w: 80px; }
.s-seg .k5 { --x: 40px;  --w: 90px; }
.s-seg .k6 { --x: 280px; --w: 120px; }
.s-seg .seg.pick {
  --c: #c4251b;
  animation: pick 9s cubic-bezier(.55, 0, .25, 1) infinite;
}
.s-seg .p1 { --x: 40px;  --w: 90px; --dx: 0px;   --dy: 217px; animation-delay: 0s; }
.s-seg .p2 { --x: 230px; --w: 80px; --dx: -94px; --dy: 165px; animation-delay: 1.2s; }
.s-seg .p3 { --x: 150px; --w: 100px; --dx: 76px; --dy: 113px; animation-delay: 2.4s; }
.s-seg .gapmark {
  position: absolute;
  top: 232px;
  width: 6px;
  height: 24px;
  background: repeating-linear-gradient(180deg, var(--ccc-red-bright) 0 3px, transparent 3px 6px);
  opacity: 0;
  animation: gapmark 9s infinite;
}
.s-seg .g1 { left: 131px; animation-delay: 1.2s; }
.s-seg .g2 { left: 219px; animation-delay: 2.4s; }

@keyframes pick {
  0%, 6% { translate: 0 0 0; opacity: 1; }
  14% { translate: 0 0 70px; }
  24% { translate: var(--dx) var(--dy) 70px; }
  32%, 78% { translate: var(--dx) var(--dy) 0; opacity: 1; }
  86% { translate: var(--dx) var(--dy) 0; opacity: 0; }
  87% { translate: 0 0 0; opacity: 0; }
  96%, 100% { translate: 0 0 0; opacity: 1; }
}
@keyframes gapmark { 0%, 30% { opacity: 0; } 36%, 78% { opacity: 1; } 86%, 100% { opacity: 0; } }

/* ==========================================================================
   Scene: frame gaps & overlaps
   ========================================================================== */
.s-gap .track { --x: 10px; --y: 110px; --w: 420px; --h: 80px; }
.s-gap .ev { --y: 124px; --h: 52px; --d: 26px; }
.s-gap .ea { --x: 40px; --w: 170px; --c: #8f1a13; }
.s-gap .eb { --x: 186px; --w: 170px; animation: separate 7s cubic-bezier(.6, 0, .2, 1) infinite; }
.s-gap .overlap {
  --x: 186px; --y: 118px; --w: 24px; --h: 64px; --d: 40px;
  --c: rgba(255, 70, 70, .45);
  background: rgba(255, 70, 70, .35);
  box-shadow: 0 0 30px rgba(255, 70, 70, .8);
  animation: overlap 7s infinite;
}
.s-gap .overlap::before, .s-gap .overlap::after { background: rgba(255, 70, 70, .3); }
.s-gap .post { --y: 120px; --w: 3px; --h: 60px; --d: 46px; --c: #f3f3f4; opacity: 0; animation: posts 7s infinite; }
.s-gap .post.l { --x: 210px; }
.s-gap .post.r { --x: 228px; }
.s-gap .hud-warn { animation: phase-a 7s infinite; }
.s-gap .hud-ok { animation: phase-b 7s infinite; }

@keyframes separate { 0%, 32% { translate: 0 0 0; } 46%, 84% { translate: 44px 0 0; } 96%, 100% { translate: 0 0 0; } }
@keyframes overlap { 0%, 30% { opacity: 1; } 40%, 86% { opacity: 0; } 96%, 100% { opacity: 1; } }
@keyframes posts { 0%, 44% { opacity: 0; } 52%, 84% { opacity: 1; } 92%, 100% { opacity: 0; } }
@keyframes phase-a { 0%, 32% { opacity: 1; } 40%, 88% { opacity: 0; } 96%, 100% { opacity: 1; } }
@keyframes phase-b { 0%, 46% { opacity: 0; } 54%, 84% { opacity: 1; } 92%, 100% { opacity: 0; } }

/* ==========================================================================
   Scene: QC scan
   ========================================================================== */
.s-qc .ev { --y: 70px; --w: 118px; --h: 150px; --d: 10px; --c: #232328; }
.s-qc .q1 { --x: 14px; }
.s-qc .q2 { --x: 160px; animation: flag-face 8s infinite; animation-delay: 0s; }
.s-qc .q3 { --x: 306px; animation: flag-face 8s infinite; animation-delay: 1.9s; }
.s-qc .ev .txt {
  position: absolute;
  inset: 20px 14px;
  background:
    linear-gradient(rgba(255, 255, 255, .3), rgba(255, 255, 255, .3)) 0 34px / 92% 10px no-repeat,
    linear-gradient(rgba(255, 255, 255, .3), rgba(255, 255, 255, .3)) 0 58px / 70% 10px no-repeat,
    linear-gradient(rgba(255, 255, 255, .12), rgba(255, 255, 255, .12)) 0 0 / 46% 8px no-repeat;
}
.s-qc .q2 .txt::after {          /* line that runs past the character limit */
  content: "";
  position: absolute;
  left: 0; top: 34px;
  width: 132%;
  height: 10px;
  background: linear-gradient(90deg, rgba(255, 255, 255, .3) 70%, var(--ccc-red-bright) 70%);
  border-radius: 2px;
}
.s-qc .beam {
  --x: 0px; --y: 52px; --w: 6px; --h: 186px; --d: 2px; --c: #f04848;
  box-shadow: 0 0 30px 6px rgba(240, 72, 72, .55);
  animation: scan 8s linear infinite;
}
.s-qc .beam::before { height: 2px; }
.s-qc .hud-f1 { top: 22%; left: 34%; animation: flag 8s infinite; }
.s-qc .hud-f2 { top: 14%; right: 6%; animation: flag 8s infinite; animation-delay: 1.9s; }
.s-qc .hud-sum { animation: summary 8s infinite; }

@keyframes scan { 0% { translate: 0 0 0; opacity: 0; } 4% { opacity: 1; } 62% { translate: 432px 0 0; opacity: 1; } 66%, 100% { translate: 432px 0 0; opacity: 0; } }
@keyframes flag-face { 0%, 24% { --c: #232328; } 28%, 86% { --c: #5a110d; } 92%, 100% { --c: #232328; } }
@keyframes flag { 0%, 24% { opacity: 0; translate: 0 8px; } 28%, 86% { opacity: 1; translate: 0 0; } 92%, 100% { opacity: 0; translate: 0 8px; } }
@keyframes summary { 0%, 64% { opacity: 0; } 70%, 92% { opacity: 1; } 98%, 100% { opacity: 0; } }

/* ==========================================================================
   Scene: connectors hub
   ========================================================================== */
.s-hub .hub {
  --x: 180px; --y: 110px; --w: 80px; --h: 80px; --d: 70px; --c: #c4251b;
  box-shadow: 0 0 50px rgba(240, 72, 72, .5);
  animation: hover 4s ease-in-out infinite;
}
.s-hub .hub .face-label { font-size: 22px; }
.s-hub .ring {
  position: absolute;
  left: 220px; top: 150px;
  width: 120px; height: 120px;
  margin: -60px 0 0 -60px;
  border-radius: 50%;
  border: 2px solid rgba(240, 72, 72, .6);
  animation: ring 3s ease-out infinite;
}
.s-hub .ring.r2 { animation-delay: 1.5s; }
.s-hub .node { --w: 74px; --h: 44px; --d: 14px; --c: #26262b; }
.s-hub .node .face-label { font-size: 12px; }
.s-hub .n1 { --x: 10px;  --y: 10px; }
.s-hub .n2 { --x: 183px; --y: -20px; }
.s-hub .n3 { --x: 356px; --y: 10px; }
.s-hub .n4 { --x: 10px;  --y: 246px; }
.s-hub .n5 { --x: 183px; --y: 276px; }
.s-hub .n6 { --x: 356px; --y: 246px; }
.s-hub .wire {
  position: absolute;
  left: 220px; top: 150px;
  height: 2px;
  width: var(--len);
  background: linear-gradient(90deg, rgba(240, 72, 72, .7), rgba(255, 255, 255, .12));
  transform-origin: 0 50%;
  transform: rotate(var(--a)) translateZ(1px);
}
.s-hub .wire::after {
  content: "";
  position: absolute;
  top: -3px; left: 0;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 12px 3px var(--ccc-red-bright);
  animation: packet 2.4s linear infinite;
  animation-delay: var(--delay, 0s);
}
.s-hub .w1 { --a: -146deg; --len: 168px; --delay: 0s; }
.s-hub .w2 { --a: -90deg;  --len: 126px; --delay: .4s; }
.s-hub .w3 { --a: -34deg;  --len: 168px; --delay: .8s; }
.s-hub .w4 { --a: 146deg;  --len: 168px; --delay: 1.2s; }
.s-hub .w5 { --a: 90deg;   --len: 126px; --delay: 1.6s; }
.s-hub .w6 { --a: 34deg;   --len: 168px; --delay: 2s; }


/* ==========================================================================
   Page layout pieces
   ========================================================================== */
.jump-nav { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 2rem; }
.jump-nav a {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .4rem .8rem;
  border-radius: 999px;
  border: 1px solid var(--ccc-border-strong);
  background: rgba(255, 255, 255, .04);
  color: #e4e4e7;
  font-size: .85rem;
  font-weight: 700;
}
.jump-nav a:hover { text-decoration: none; border-color: rgba(240, 72, 72, .6); color: #fff; }
.jump-nav .num { color: var(--ccc-red-bright); font-variant-numeric: tabular-nums; }

.feature-block + .feature-block { margin-top: clamp(4rem, 3rem + 4vw, 7rem); }
.feature-block .module {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  margin-bottom: 1rem;
}
.feature-block .module .icon-tile { margin: 0; }
.feature-block .module .eyebrow { margin: 0; }
.feature-block h2 { margin-bottom: 1rem; }
.feature-block p.desc { color: var(--ccc-text-muted); font-size: 1.05rem; }
.feature-block .check-list { margin-top: 1.25rem; }
.feature-block .check-list li { padding-block: .35rem; }

/* pipeline */
.pipeline { position: relative; counter-reset: step; }
.pipeline .step { position: relative; }
.pipeline .step .n {
  font-size: .8rem; font-weight: 700; letter-spacing: .12em;
  color: var(--ccc-red-bright);
}
.pipeline .step h3 { margin-top: .5rem; }
@media (min-width: 992px) {
  .pipeline .step:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 3.1rem;
    right: -1.5rem;
    width: 1.5rem;
    height: 2px;
    background: linear-gradient(90deg, var(--ccc-red-bright), transparent);
    background-size: 200% 100%;
    animation: flow 1.6s linear infinite;
  }
}
@keyframes flow { from { background-position: 100% 0; } to { background-position: -100% 0; } }

/* ---- Reduced motion: freeze in a representative, fully-labelled state -- */
@media (prefers-reduced-motion: reduce) {
  .scene *, .scene *::before, .scene *::after, .pipeline .step::after { animation: none !important; }
  .stage { transition: none; }
  .s-timing .ev { translate: 52px 0 0; }
  .s-timing .hud-a, .s-gap .hud-ok, .s-qc .hud-f1, .s-qc .hud-f2, .s-qc .hud-sum, .s-seg .gapmark, .s-gap .post { opacity: 1; }
  .s-gap .hud-warn, .s-gap .overlap { opacity: 0; }
  .s-gap .eb { translate: 44px 0 0; }
  .s-seg .p1, .s-seg .p2, .s-seg .p3 { translate: var(--dx) var(--dy) 0; }
  .s-qc .beam { opacity: 0; }
  .s-qc .q2, .s-qc .q3 { --c: #5a110d; }
}