/* ---- Landing page: the scenes, their paint and their motion ----------------
   Two jobs, one responsibility: everything about the drawn scenes that is not
   geometry. The SVG partials carry no colour of their own (`sc-*` classes are
   painted here, in tokens) and no timing of their own.

   **The page is authored finished.** Every default below is the END state of
   its animation, and every "from" state sits behind `html.lp-anim`, which
   `landing-reveal.js` adds only when the reader has not asked for reduced
   motion. Script absent, or reduced motion, and the reader sees the completed
   picture rather than an empty frame. Nothing here may be written the other
   way round.

   Almost every pixel length below is an SVG user-space coordinate: the
   geometry of the drawings in `public/partials/scenes/`, not an interface
   length, so those are not space steps and never become tokens. The two
   exceptions are the offsets a card rises through as it comes into view
   (`translateY(10px)` on the reveal, `translateY(8px)` in `hs-card-in`),
   which are CSS pixels on an HTML element and are the distance itself
   rather than a space between two things. Every colour is a token and every
   reveal takes the one easing and the three durations of style guide 5.5;
   the scene loops keep their own long cycles, which is what a drawing does
   rather than what an interface transition does. */

/* ---- Scene paint: the SVG's palette, in tokens ---------------------------- */

.sc-f-surface { fill: var(--surface); }
.sc-f-ink { fill: var(--ink); }
.sc-f-muted { fill: var(--slate); }
.sc-f-accent { fill: var(--accent); }
.sc-f-accentsoft { fill: var(--accent-soft); }
.sc-f-ok { fill: var(--ok); }
.sc-f-oksoft { fill: var(--ok-soft); }
.sc-f-onok { fill: var(--on-ok); }
.sc-f-warn { fill: var(--warn); }
.sc-f-warnsoft { fill: var(--warn-soft); }
.sc-f-crit { fill: var(--crit); }
.sc-f-critsoft { fill: var(--crit-soft); }
.sc-f-neutralsoft { fill: var(--neutral-soft); }
.sc-f-band { fill: var(--band); }
.sc-f-bandtext { fill: var(--band-text); }
.sc-f-bandaccent { fill: var(--accent-on-band); }
.sc-s-border { stroke: var(--line); }
.sc-s-rule { stroke: var(--rule); }
.sc-s-muted { stroke: var(--slate); }
.sc-s-accent { stroke: var(--accent); }
.sc-s-ok { stroke: var(--ok); }
.sc-s-crit { stroke: var(--crit); }
.sc-s-onok { stroke: var(--on-ok); }

.scene svg, .hero-scene { width: 100%; height: auto; display: block; }
.scene text, .hero-scene text { font-family: var(--font-mono); }

/* ---- Cards rising into view ----------------------------------------------- */

html.lp-anim .step[data-reveal],
html.lp-anim .claim[data-reveal] {
  opacity: 0;
  transform: translateY(10px);
}
html.lp-anim .step[data-reveal].in,
html.lp-anim .claim[data-reveal].in {
  opacity: 1;
  transform: none;
  transition: opacity var(--dur-3) var(--ease), transform var(--dur-3) var(--ease);
}

/* ---- The hero machine: one 13 s cycle, looping ---------------------------- */

.hs-chip { opacity: 0; }
.hs-cell { fill: var(--surface); stroke: var(--line); }
.hs-cell-0, .hs-cell-1, .hs-cell-2, .hs-cell-3 { fill: var(--ok); stroke: var(--ok); }
.hs-state { opacity: 0; }
.hs-state-3 { opacity: 1; }
.hs-seal { transform-box: fill-box; transform-origin: center; }
.hs-progress { width: 140px; }

html.lp-anim .hs-card { animation: hs-card-in var(--dur-3) var(--ease) both; }
@keyframes hs-card-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

html.lp-anim .hs-state-0 { animation: hs-state-0 13s linear infinite; }
@keyframes hs-state-0 { 0%,24% { opacity: 1; } 25%,96% { opacity: 0; } 97%,100% { opacity: 1; } }
html.lp-anim .hs-state-1 { animation: hs-state-1 13s linear infinite; }
@keyframes hs-state-1 { 0%,24% { opacity: 0; } 25%,49% { opacity: 1; } 50%,100% { opacity: 0; } }
html.lp-anim .hs-state-2 { animation: hs-state-2 13s linear infinite; }
@keyframes hs-state-2 { 0%,49% { opacity: 0; } 50%,74% { opacity: 1; } 75%,100% { opacity: 0; } }
html.lp-anim .hs-state-3 { animation: hs-state-3 13s linear infinite; }
@keyframes hs-state-3 { 0%,74% { opacity: 0; } 75%,96% { opacity: 1; } 97%,100% { opacity: 0; } }

html.lp-anim .hs-chip-0 { animation: hs-chip-0 13s ease-in-out infinite; }
@keyframes hs-chip-0 {
  0%,4.62% { transform: translate(40px, 110px); opacity: 0; }
  6.92% { transform: translate(40px, 110px); opacity: 1; }
  16.15%,19.23% { transform: translate(24px, 169px); opacity: 1; }
  21.54%,100% { transform: translate(24px, 169px); opacity: 0; }
}
html.lp-anim .hs-chip-1 { animation: hs-chip-1 13s ease-in-out infinite; }
@keyframes hs-chip-1 {
  0%,25.38% { transform: translate(40px, 110px); opacity: 0; }
  27.69% { transform: translate(40px, 110px); opacity: 1; }
  36.92%,40% { transform: translate(141px, 169px); opacity: 1; }
  42.31%,100% { transform: translate(141px, 169px); opacity: 0; }
}
html.lp-anim .hs-chip-2 { animation: hs-chip-2 13s ease-in-out infinite; }
@keyframes hs-chip-2 {
  0%,46.15% { transform: translate(40px, 110px); opacity: 0; }
  48.46% { transform: translate(40px, 110px); opacity: 1; }
  57.69%,60.77% { transform: translate(31px, 209px); opacity: 1; }
  63.08%,100% { transform: translate(31px, 209px); opacity: 0; }
}
html.lp-anim .hs-chip-3 { animation: hs-chip-3 13s ease-in-out infinite; }
@keyframes hs-chip-3 {
  0%,66.92% { transform: translate(40px, 110px); opacity: 0; }
  69.23% { transform: translate(40px, 110px); opacity: 1; }
  78.46%,81.54% { transform: translate(24px, 289px); opacity: 1; }
  83.85%,100% { transform: translate(24px, 289px); opacity: 0; }
}

html.lp-anim .hs-cell-0 { animation: hs-cell-0 13s linear infinite; }
@keyframes hs-cell-0 {
  0%,16.15% { fill: var(--surface); stroke: var(--line); }
  16.92%,96% { fill: var(--ok); stroke: var(--ok); }
  97%,100% { fill: var(--surface); stroke: var(--line); }
}
html.lp-anim .hs-cell-1 { animation: hs-cell-1 13s linear infinite; }
@keyframes hs-cell-1 {
  0%,36.92% { fill: var(--surface); stroke: var(--line); }
  37.69%,96% { fill: var(--ok); stroke: var(--ok); }
  97%,100% { fill: var(--surface); stroke: var(--line); }
}
html.lp-anim .hs-cell-2 { animation: hs-cell-2 13s linear infinite; }
@keyframes hs-cell-2 {
  0%,57.69% { fill: var(--surface); stroke: var(--line); }
  58.46%,96% { fill: var(--ok); stroke: var(--ok); }
  97%,100% { fill: var(--surface); stroke: var(--line); }
}
html.lp-anim .hs-cell-3 { animation: hs-cell-3 13s linear infinite; }
@keyframes hs-cell-3 {
  0%,78.46% { fill: var(--surface); stroke: var(--line); }
  79.23%,96% { fill: var(--ok); stroke: var(--ok); }
  97%,100% { fill: var(--surface); stroke: var(--line); }
}

html.lp-anim .hs-row-0 { animation: hs-row-0 13s linear infinite; }
@keyframes hs-row-0 { 0%,16.92% { opacity: 0; } 19.23%,96% { opacity: 1; } 97%,100% { opacity: 0; } }
html.lp-anim .hs-row-1 { animation: hs-row-1 13s linear infinite; }
@keyframes hs-row-1 { 0%,37.69% { opacity: 0; } 40%,96% { opacity: 1; } 97%,100% { opacity: 0; } }
html.lp-anim .hs-row-2 { animation: hs-row-2 13s linear infinite; }
@keyframes hs-row-2 { 0%,58.46% { opacity: 0; } 60.77%,96% { opacity: 1; } 97%,100% { opacity: 0; } }
html.lp-anim .hs-row-3 { animation: hs-row-3 13s linear infinite; }
@keyframes hs-row-3 { 0%,79.23% { opacity: 0; } 81.54%,96% { opacity: 1; } 97%,100% { opacity: 0; } }

html.lp-anim .hs-progress { animation: hs-progress 13s linear infinite; }
@keyframes hs-progress {
  0%,16.92% { width: 0px; }
  17.69% { width: 35px; }
  38.46% { width: 70px; }
  59.23% { width: 105px; }
  80%,96% { width: 140px; }
  97%,100% { width: 0px; }
}
html.lp-anim .hs-seal { animation: hs-seal 13s linear infinite; }
@keyframes hs-seal {
  0%,84.62% { opacity: 0; transform: scale(1.5); }
  86.92% { opacity: 1; transform: scale(1); animation-timing-function: cubic-bezier(0.3, 1.6, 0.5, 1); }
  96% { opacity: 1; transform: scale(1); }
  97%,100% { opacity: 0; transform: scale(1.15); }
}

/* ---- The four journey scenes: one 4 s run, on view and on hover -----------
   `landing-reveal.js` adds `.play` when the card enters view and re-adds it on
   every hover, which is what restarts the run. */

.pop { transform-box: fill-box; transform-origin: center; }
.drawn { stroke-dasharray: 1; stroke-dashoffset: 0; }
.j2-leaf { fill: var(--crit-soft); stroke: var(--crit); }
.j3-btn { fill: var(--accent); }
.j3-btntext { fill: var(--on-accent); }
.j3-lock, .j3-refuse { opacity: 0; }

html.lp-anim [data-anim] .pop { opacity: 0; transform: scale(0.6); }
html.lp-anim [data-anim] .drawn { stroke-dashoffset: 1; }
html.lp-anim [data-anim] .j1-form,
html.lp-anim [data-anim] .j3-evidence,
html.lp-anim [data-anim] .j4-f1,
html.lp-anim [data-anim] .j4-f2,
html.lp-anim [data-anim] .j4-f3,
html.lp-anim [data-anim] .j4-hash { opacity: 0; }
html.lp-anim [data-anim] .j2-leaf { fill: var(--surface); stroke: var(--line); }
html.lp-anim [data-anim] .j3-btn { fill: var(--neutral-soft); }
html.lp-anim [data-anim] .j3-btntext { fill: var(--slate); }
html.lp-anim [data-anim] .j3-lock { opacity: 1; }

html.lp-anim [data-anim].play .j1-form { animation: j-fade 4s ease both; }
html.lp-anim [data-anim].play .j1-arrow { animation: j1-arrow 4s ease both; }
html.lp-anim [data-anim].play .j1-card { animation: j1-card 4s ease both; }
html.lp-anim [data-anim].play .j1-check { animation: j1-check 4s ease both; }
html.lp-anim [data-anim].play .j2-branch { animation: j2-branch 4s ease both; }
html.lp-anim [data-anim].play .j2-hot { animation: j2-hot 4s ease both; }
html.lp-anim [data-anim].play .j2-leaf { animation: j2-leaf 4s ease both; }
html.lp-anim [data-anim].play .j2-badge { animation: j2-badge 4s ease both; }
html.lp-anim [data-anim].play .j3-refuse { animation: j3-refuse 4s ease both; }
html.lp-anim [data-anim].play .j3-evidence { animation: j3-evidence 4s ease both; }
html.lp-anim [data-anim].play .j3-btn { animation: j3-btn 4s ease both; }
html.lp-anim [data-anim].play .j3-btntext { animation: j3-btntext 4s ease both; }
html.lp-anim [data-anim].play .j3-lock { animation: j3-lock 4s ease both; }
html.lp-anim [data-anim].play .j3-open { animation: j3-open 4s ease both; }
html.lp-anim [data-anim].play .j4-f1 { animation: j4-f1 4s ease both; }
html.lp-anim [data-anim].play .j4-f2 { animation: j4-f2 4s ease both; }
html.lp-anim [data-anim].play .j4-f3 { animation: j4-f3 4s ease both; }
html.lp-anim [data-anim].play .j4-line { animation: j4-line 4s ease both; }
html.lp-anim [data-anim].play .j4-node { animation: j4-node 4s ease both; }
html.lp-anim [data-anim].play .j4-tick { animation: j4-tick 4s ease both; }
html.lp-anim [data-anim].play .j4-hash { animation: j4-hash 4s ease both; }

@keyframes j-fade { 0% { opacity: 0; } 10%,100% { opacity: 1; } }
@keyframes j1-arrow { 0%,15% { stroke-dashoffset: 1; } 25%,100% { stroke-dashoffset: 0; } }
@keyframes j1-card {
  0%,27.5% { opacity: 0; transform: scale(0.6); }
  37.5%,100% { opacity: 1; transform: scale(1); animation-timing-function: cubic-bezier(0.2, 1.4, 0.4, 1); }
}
@keyframes j1-check {
  0%,45% { opacity: 0; transform: scale(0.6); }
  52.5%,100% { opacity: 1; transform: scale(1); animation-timing-function: cubic-bezier(0.2, 1.4, 0.4, 1); }
}
@keyframes j2-branch { 0%,5% { stroke-dashoffset: 1; } 20%,100% { stroke-dashoffset: 0; } }
@keyframes j2-hot { 0%,25% { stroke-dashoffset: 1; } 35%,100% { stroke-dashoffset: 0; } }
@keyframes j2-leaf {
  0%,35% { fill: var(--surface); stroke: var(--line); }
  42.5%,100% { fill: var(--crit-soft); stroke: var(--crit); }
}
@keyframes j2-badge {
  0%,47.5% { opacity: 0; transform: scale(0.6); }
  55%,100% { opacity: 1; transform: scale(1); animation-timing-function: cubic-bezier(0.2, 1.4, 0.4, 1); }
}
@keyframes j3-refuse {
  0%,20% { opacity: 0; transform: scale(0.6); }
  27.5%,75% { opacity: 1; transform: scale(1); }
  82.5%,100% { opacity: 0; transform: scale(1); }
}
@keyframes j3-evidence {
  0%,60% { opacity: 0; transform: translateX(24px); }
  72.5%,100% { opacity: 1; transform: none; }
}
@keyframes j3-btn { 0%,82.5% { fill: var(--neutral-soft); } 90%,100% { fill: var(--accent); } }
@keyframes j3-btntext { 0%,82.5% { fill: var(--slate); } 90%,100% { fill: var(--on-accent); } }
@keyframes j3-lock { 0%,82.5% { opacity: 1; } 90%,100% { opacity: 0; } }
@keyframes j3-open {
  0%,87.5% { opacity: 0; transform: scale(0.6); }
  95%,100% { opacity: 1; transform: scale(1); animation-timing-function: cubic-bezier(0.2, 1.4, 0.4, 1); }
}
@keyframes j4-f1 { 0% { opacity: 0; } 7.5%,100% { opacity: 1; } }
@keyframes j4-f2 { 0%,7.5% { opacity: 0; } 15%,100% { opacity: 1; } }
@keyframes j4-f3 { 0%,15% { opacity: 0; } 22.5%,100% { opacity: 1; } }
@keyframes j4-line { 0%,25% { stroke-dashoffset: 1; } 45%,100% { stroke-dashoffset: 0; } }
@keyframes j4-node {
  0%,47.5% { opacity: 0; transform: scale(0.6); }
  55%,100% { opacity: 1; transform: scale(1); animation-timing-function: cubic-bezier(0.2, 1.4, 0.4, 1); }
}
@keyframes j4-tick { 0%,57.5% { stroke-dashoffset: 1; } 65%,100% { stroke-dashoffset: 0; } }
@keyframes j4-hash { 0%,62.5% { opacity: 0; } 70%,100% { opacity: 1; } }

/* ---- The catalog plate: the cells wave in, row by row --------------------- */

html.lp-anim .catalog-map[data-reveal] .id-cell { opacity: 0; }
html.lp-anim .catalog-map[data-reveal].in .id-cell { animation: cell-in var(--dur-3) var(--ease) both; }
@keyframes cell-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
html.lp-anim .catalog-map[data-reveal].in .id-cell:nth-child(1) { animation-delay: 0ms; }
html.lp-anim .catalog-map[data-reveal].in .id-cell:nth-child(2) { animation-delay: 30ms; }
html.lp-anim .catalog-map[data-reveal].in .id-cell:nth-child(3) { animation-delay: 60ms; }
html.lp-anim .catalog-map[data-reveal].in .id-cell:nth-child(4) { animation-delay: 90ms; }
html.lp-anim .catalog-map[data-reveal].in .id-cell:nth-child(5) { animation-delay: 120ms; }
html.lp-anim .catalog-map[data-reveal].in .id-cell:nth-child(6) { animation-delay: 150ms; }
html.lp-anim .catalog-map[data-reveal].in .id-cell:nth-child(7) { animation-delay: 180ms; }
html.lp-anim .catalog-map[data-reveal].in .id-cell:nth-child(8) { animation-delay: 210ms; }
html.lp-anim .catalog-map[data-reveal].in .id-cell:nth-child(9) { animation-delay: 240ms; }
html.lp-anim .catalog-map[data-reveal].in .id-cell:nth-child(n + 10) { animation-delay: 270ms; }

/* ---- The hero's plate: the sample product's cells light in sequence -------- */

html.lp-anim .hero-cell--lit {
  background: transparent;
  color: var(--band-muted);
  border-color: var(--band-line);
  animation: hero-cell-light 14s linear infinite;
}
@keyframes hero-cell-light {
  0% { background: transparent; color: var(--band-muted); border-color: var(--band-line); }
  3%,92% { background: var(--ok); color: var(--on-ok); border-color: var(--ok); }
  96%,100% { background: transparent; color: var(--band-muted); border-color: var(--band-line); }
}

/* One rule per place in `config.landing.HERO_LIT_IDS`: the lead is 0.5s and
   each further cell waits 0.8s longer. These used to be a `style` attribute
   the view computed per cell; they are timing, so they belong here, and the
   tenant accent is once again the only inline style in the project.

   They must stay BELOW the `animation` shorthand above: the shorthand sets
   `animation-delay` back to 0, so the same rules written earlier would be
   silently erased. A place the sequence does not reach matches no rule here
   and lights on the lead. */
html.lp-anim .hero-cell--lit-0 { animation-delay: 0.5s; }
html.lp-anim .hero-cell--lit-1 { animation-delay: 1.3s; }
html.lp-anim .hero-cell--lit-2 { animation-delay: 2.1s; }
html.lp-anim .hero-cell--lit-3 { animation-delay: 2.9s; }
html.lp-anim .hero-cell--lit-4 { animation-delay: 3.7s; }
html.lp-anim .hero-cell--lit-5 { animation-delay: 4.5s; }
html.lp-anim .hero-cell--lit-6 { animation-delay: 5.3s; }
html.lp-anim .hero-cell--lit-7 { animation-delay: 6.1s; }
html.lp-anim .hero-cell--lit-8 { animation-delay: 6.9s; }
html.lp-anim .hero-cell--lit-9 { animation-delay: 7.7s; }
html.lp-anim .hero-cell--lit-10 { animation-delay: 8.5s; }
html.lp-anim .hero-cell--lit-11 { animation-delay: 9.3s; }
html.lp-anim .hero-cell--lit-12 { animation-delay: 10.1s; }