/*
 * The public start page (resources/views/home.blade.php, docs/home.md). On top of app.css's
 * colour tokens, so it follows light/dark. Scenes are HTML drawn in their end state; their
 * animations run only inside .play, which public/js/home.js sets while a scene is on screen
 * (never with reduced motion). Sizes inside a scene are in cqw, so it scales as one picture.
 */
@font-face {
    font-family: "Michroma";
    src: url("/fonts/Michroma-Regular.woff") format("woff");
    font-display: swap;
}
.home {
    --display: "Michroma", var(--font);
    --ok-soft: color-mix(in srgb, var(--ok) 16%, var(--surface));
    --ink: #1b1f24; /* things that stay dark in both themes: phones, the printer, codes */
}
.home main {
    overflow-x: clip; /* the scenes' glow and phones may reach past the edge */
    background: radial-gradient(circle, var(--grid-line) 1.3px, transparent 1.6px) 0 0 / 22px 22px;
}
.home h1, .home h2 {
    font-family: var(--display); font-weight: 400; font-synthesis: none;
    letter-spacing: -.01em; line-height: 1.18; text-wrap: balance;
}
.home h1 { font-size: clamp(1.55rem, .9rem + 2.9vw, 3rem); }
.home h2 { font-size: clamp(1.25rem, .95rem + 1.4vw, 2rem); margin: 0; }
.home h1 .accent { display: block; color: var(--accent); }
.home .lead { font-size: 1.1rem; color: var(--muted); max-width: 34rem; margin: 1rem 0 0; }
.kicker {
    display: flex; align-items: center; gap: .5rem; margin: 0 0 .8rem;
    font-size: .78rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--accent);
}
.kicker .step {
    display: inline-grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: 6px;
    background: var(--accent); color: var(--accent-text); letter-spacing: 0;
}
.btn-big { padding: .7rem 1.25rem; font-size: 1rem; border-radius: 8px; }
.home .btn-row { margin-top: 1.6rem; gap: .6rem; }
.hero-free { margin: .8rem 0 0; color: var(--muted); font-size: .92rem; }

/* ---- header ---- */
.home-top {
    position: sticky; top: 0; z-index: 10; display: flex; align-items: center; gap: 1.25rem;
    height: 60px; padding: 0 16px;
    background: color-mix(in srgb, var(--surface) 86%, transparent); backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--border);
}
.home-top .brand-mark { height: 26px; }
.home-top .brand-name { height: 17px; }
.home-nav { display: flex; gap: 1.25rem; margin-left: auto; }
.home-nav a { color: var(--muted); text-decoration: none; font-weight: 600; font-size: .92rem; }
.home-nav a:hover { color: var(--text); }
.home-login, .home-signup { padding: .4rem .9rem; }
@media (max-width: 720px) {
    .home-nav { display: none; }
    .home-top .lang { margin-left: auto; }
    .home-top { gap: .75rem; }
}
/* A phone: "Start free" stays in the pricing and the end; the header keeps "Log in". */
@media (max-width: 440px) { .home-signup { display: none; } }

/* ---- sections ---- */
.hero, .chapter, .end { max-width: 1100px; margin: 0 auto; padding-left: 16px; padding-right: 16px; }
.hero {
    display: grid; grid-template-columns: 1.05fr 1fr; gap: 3rem; align-items: center;
    padding-top: clamp(2.5rem, 7vw, 5.5rem); padding-bottom: 3rem; min-height: min(86vh, 760px);
}
.chapter {
    display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: center;
    padding-top: clamp(3rem, 7vw, 5rem); padding-bottom: clamp(3rem, 7vw, 5rem);
}
.band, .team { background: var(--surface); border-block: 1px solid var(--border); }
@media (max-width: 760px) {
    .hero, .chapter { grid-template-columns: minmax(0, 1fr); }
    .hero { min-height: 0; }
}

/* Sections slide in once (home.js adds .in). Hidden only when JS runs and motion is welcome;
   reveal-late shows them anyway if home.js never arrives. */
@media (scripting: enabled) and (prefers-reduced-motion: no-preference) {
    .reveal:not(.in) { opacity: 0; transform: translateY(28px); animation: reveal-late 0s 2.5s forwards; }
    .reveal { transition: opacity .7s ease, transform .7s cubic-bezier(.2, .7, .2, 1); }
}
@keyframes reveal-late { to { opacity: 1; transform: none; } }

/* ---- scenes: shared parts ---- */
.scene { position: relative; container-type: inline-size; width: 100%; max-width: 520px; justify-self: center; }
.phone {
    position: absolute; container-type: inline-size; aspect-ratio: 9 / 18;
    padding: 4cqw; border-radius: 14cqw; background: var(--ink);
    box-shadow: 0 18px 40px rgba(10, 20, 40, .28), inset 0 0 0 1.5px rgba(255, 255, 255, .16);
}
.phone-screen {
    position: relative; height: 100%; overflow: hidden; border-radius: 10cqw;
    background: var(--surface); color: var(--text); font-size: 6.6cqw; line-height: 1.35;
}
.phone-screen::before { /* the camera notch */
    content: ""; position: absolute; z-index: 3; top: 3cqw; left: 50%; translate: -50% 0;
    width: 26cqw; height: 6cqw; border-radius: 9cqw; background: var(--ink);
}
.phone p { margin: 0; }
.rec-title { font-weight: 800; font-size: 8cqw; line-height: 1.2; display: flex; gap: 3cqw; align-items: center; flex-wrap: wrap; }
.rec-row {
    display: flex; justify-content: space-between; gap: 3cqw; padding: 3cqw 0;
    border-bottom: 1px solid var(--border); color: var(--muted);
}
.rec-row b { color: var(--text); }
.ok, .chip-s, .chip-warn-s {
    display: inline-block; padding: .5cqw 3cqw; border-radius: 9cqw; font-size: 5.6cqw; font-weight: 700;
}
.ok { background: var(--ok-soft); color: var(--ok) !important; }
.chip-s { background: var(--accent-soft); color: var(--accent); }
.chip-warn-s { background: var(--warn-soft); color: var(--warn); }
.sticker, .lbl {
    position: absolute; background: #fff; border-radius: 1.2cqw; padding: 1.1cqw 1.1cqw .6cqw;
    box-shadow: 0 3px 10px rgba(0, 0, 0, .18); text-align: center;
}
.sticker img, .lbl img { display: block; width: 100%; }
.sticker span, .lbl span { display: block; color: var(--ink); font: 700 2.3cqw/1.3 var(--font); }

/* ---- hero: a phone scans the machine's sticker, and the record opens ---- */
.scene-hero { aspect-ratio: 10 / 9; }
.scene-hero::before {
    content: ""; position: absolute; inset: -10% -10% 0;
    background: radial-gradient(closest-side, var(--accent-soft), transparent); z-index: -1;
}
.machine {
    position: absolute; left: 2cqw; top: 20cqw; width: 54cqw; height: 58cqw; border-radius: 3cqw;
    background: linear-gradient(160deg, color-mix(in srgb, var(--accent) 10%, var(--surface-2)), color-mix(in srgb, var(--text) 14%, var(--surface-2)));
    border: 1px solid var(--border); box-shadow: var(--shadow);
}
.machine-panel {
    position: absolute; left: 4cqw; right: 4cqw; top: 4cqw; height: 12cqw; border-radius: 2cqw;
    background: var(--surface); border: 1px solid var(--border); display: flex; align-items: center; gap: 2.5cqw; padding: 0 3cqw;
}
.gauge {
    position: relative; width: 8cqw; height: 8cqw; border-radius: 50%; border: .7cqw solid var(--muted); background: var(--surface-2);
}
.needle {
    position: absolute; left: 50%; bottom: 50%; width: .6cqw; height: 3.2cqw; margin-left: -.3cqw;
    background: var(--danger); border-radius: 1cqw; transform-origin: bottom center; rotate: 30deg;
    animation: needle 3.2s ease-in-out infinite alternate;
}
@keyframes needle { from { rotate: -40deg; } to { rotate: 45deg; } }
.led { width: 2.2cqw; height: 2.2cqw; border-radius: 50%; background: var(--ok); margin-left: auto; }
.led-2 { margin-left: 0; background: var(--warn); animation: blink 1.4s steps(2, jump-none) infinite; }
@keyframes blink { 50% { opacity: .25; } }
.machine-vents {
    position: absolute; right: 4cqw; bottom: 6cqw; width: 18cqw; height: 22cqw;
    background: repeating-linear-gradient(to bottom, color-mix(in srgb, var(--text) 30%, transparent) 0 .7cqw, transparent .7cqw 2.6cqw);
    border-radius: 1cqw; opacity: .6;
}
.machine-feet::before, .machine-feet::after {
    content: ""; position: absolute; bottom: -3cqw; width: 8cqw; height: 3cqw; border-radius: 0 0 1cqw 1cqw;
    background: color-mix(in srgb, var(--text) 45%, var(--surface-2));
}
.machine-feet::before { left: 5cqw; }
.machine-feet::after { right: 5cqw; }
.scene-hero .sticker { left: 9cqw; top: 41cqw; width: 19cqw; }
.hero-phone { width: 38cqw; right: 3cqw; top: 6cqw; rotate: 6deg; }
.vf { position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; background: #0d1117; opacity: 0; }
.vf-code { width: 52cqw; background: #fff; padding: 2cqw; border-radius: 2cqw; opacity: .9; }
.vf-corners {
    position: absolute; left: 50%; top: 50%; width: 70cqw; height: 70cqw; translate: -50% -50%; color: #fff;
    --c: linear-gradient(currentColor, currentColor);
    background:
        var(--c) top left / 14cqw 1.4cqw, var(--c) top left / 1.4cqw 14cqw,
        var(--c) top right / 14cqw 1.4cqw, var(--c) top right / 1.4cqw 14cqw,
        var(--c) bottom left / 14cqw 1.4cqw, var(--c) bottom left / 1.4cqw 14cqw,
        var(--c) bottom right / 14cqw 1.4cqw, var(--c) bottom right / 1.4cqw 14cqw;
    background-repeat: no-repeat;
}
.vf-line {
    position: absolute; left: 18cqw; right: 18cqw; top: 50%; height: 1cqw; border-radius: 1cqw;
    background: #4d9bff; box-shadow: 0 0 4cqw 1cqw rgba(77, 155, 255, .6); opacity: 0;
}
.scene-hero .rec { position: absolute; inset: 0; padding: 16cqw 7cqw 7cqw; display: grid; align-content: start; gap: 1cqw; }
.rec-tag {
    justify-self: start; font-size: 5cqw; font-weight: 700; color: var(--accent);
    background: var(--accent-soft); border-radius: 9cqw; padding: .5cqw 3cqw; margin-bottom: 2cqw !important;
}

/* The 9 s loop: arrive (10–22 %), scan (22–44 %), found (44–50 %), back with the record. */
.scene-hero.play .hero-phone { animation: hero-phone 9s ease-in-out infinite; }
.scene-hero.play .vf { animation: hero-vf 9s infinite; }
.scene-hero.play .vf-code { animation: hero-vf-code 9s infinite; }
.scene-hero.play .vf-line { animation: hero-vf-line 9s ease-in-out infinite; }
.scene-hero.play .vf-corners { animation: hero-vf-found 9s infinite; }
.scene-hero.play .sticker { animation: hero-sticker 9s infinite; }
.scene-hero.play .rec > * { animation: hero-row 9s infinite backwards; }
.scene-hero.play .rec > :nth-child(2) { animation-delay: .15s; }
.scene-hero.play .rec > :nth-child(3) { animation-delay: .3s; }
.scene-hero.play .rec > :nth-child(4) { animation-delay: .45s; }
.scene-hero.play .rec > :nth-child(5) { animation-delay: .6s; }
@keyframes hero-phone {
    0%, 8% { translate: 0 0; rotate: 6deg; }
    22%, 46% { translate: -33cqw 9cqw; rotate: -3deg; }
    58%, 100% { translate: 0 0; rotate: 6deg; }
}
@keyframes hero-vf { 0%, 50% { opacity: 1; } 54%, 100% { opacity: 0; } }
@keyframes hero-vf-code { 0%, 14% { opacity: 0; scale: .7; } 22%, 50% { opacity: .9; scale: 1; } }
@keyframes hero-vf-line {
    0%, 22% { opacity: 0; translate: 0 -24cqw; }
    24% { opacity: 1; }
    33% { translate: 0 24cqw; }
    42% { opacity: 1; translate: 0 -24cqw; }
    44%, 100% { opacity: 0; }
}
@keyframes hero-vf-found { 0%, 43% { color: #fff; scale: 1; } 45%, 50% { color: #3ddc84; scale: .92; } }
@keyframes hero-sticker {
    0%, 42%, 52%, 100% { box-shadow: 0 3px 10px rgba(0, 0, 0, .18); }
    46% { box-shadow: 0 0 0 1.4cqw rgba(61, 220, 132, .55); }
}
@keyframes hero-row {
    0%, 54% { opacity: 0; translate: 0 4cqw; }
    60%, 92% { opacity: 1; translate: 0 0; }
    98%, 100% { opacity: 0; }
}

/* ---- how it works: one 12 s scene in three acts, the steps beside it on the same clock ----
   0–30 % the mess today (papers float, question marks), 30–56 % the papers fly into a form
   whose fields drop in and it is saved, 56–96 % a label is printed and stuck on a crate.
   Without .play (reduced motion, no JS): the end state, form + labelled crate, all steps lit. */
.how-steps { list-style: none; margin: 1.6rem 0 0; padding: 0; display: grid; gap: .5rem; }
.how-step {
    position: relative; overflow: hidden; display: grid; grid-template-columns: auto 1fr; gap: .85rem; align-items: start;
    padding: .85rem 1rem; border-radius: 10px; border: 1px solid transparent;
}
.how-step .step {
    display: inline-grid; place-items: center; width: 1.7rem; height: 1.7rem; border-radius: 6px; font-weight: 700;
    background: var(--accent); color: var(--accent-text);
}
.how-step-text { display: grid; gap: .2rem; }
.how-step-text b { font-size: 1.05rem; }
.how-step-text span { color: var(--muted); }
.how-bar { position: absolute; left: 0; bottom: 0; height: 3px; width: 0; background: var(--accent); }
.how.play .how-step-1 { animation: how-1 12s infinite; }
.how.play .how-step-2 { animation: how-2 12s infinite; }
.how.play .how-step-3 { animation: how-3 12s infinite; }
.how.play .how-step-1 .how-bar { animation: how-bar-1 12s linear infinite; }
.how.play .how-step-2 .how-bar { animation: how-bar-2 12s linear infinite; }
.how.play .how-step-3 .how-bar { animation: how-bar-3 12s linear infinite; }
/* The step being played is a card with a progress bar; the others keep their full text colour
   (dimming them left grey text too light to read, usability test [7]). */
@keyframes how-1 { 0%, 30% { background: var(--surface); border-color: var(--border); } 33%, 100% { background: transparent; border-color: transparent; } }
@keyframes how-2 { 0%, 30% { background: transparent; border-color: transparent; } 33%, 56% { background: var(--surface); border-color: var(--border); } 59%, 100% { background: transparent; border-color: transparent; } }
@keyframes how-3 { 0%, 56% { background: transparent; border-color: transparent; } 59%, 97% { background: var(--surface); border-color: var(--border); } 100% { background: transparent; border-color: transparent; } }
@keyframes how-bar-1 { 0% { width: 0; } 31% { width: 100%; } 32%, 100% { width: 0; } }
@keyframes how-bar-2 { 0%, 32% { width: 0; } 57% { width: 100%; } 58%, 100% { width: 0; } }
@keyframes how-bar-3 { 0%, 58% { width: 0; } 97% { width: 100%; } 98%, 100% { width: 0; } }

.scene-how { aspect-ratio: 10 / 8; }
.scene-how::before {
    content: ""; position: absolute; inset: 5% 0 0; z-index: -1;
    background: radial-gradient(closest-side, var(--accent-soft), transparent);
}
/* Act 1: the papers (hidden in the end state) */
.paper {
    position: absolute; padding: 2cqw 2.4cqw; border-radius: 1.4cqw; font-size: 2.5cqw; color: var(--muted);
    background: var(--surface); border: 1px solid var(--border); box-shadow: 0 6px 18px rgba(10, 20, 40, .12);
    rotate: var(--r); opacity: 0;
}
.paper::after {
    content: ""; position: absolute; inset: 8cqw 2.4cqw 2.4cqw;
    background: repeating-linear-gradient(to bottom, transparent 0 2.8cqw, var(--border) 2.8cqw 3.1cqw);
}
.paper-head { display: block; font-weight: 700; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.paper-sheet { --r: -7deg; --fx: 6cqw; --fy: 4cqw; left: 2cqw; top: 6cqw; width: 46cqw; height: 30cqw; padding: 0; overflow: hidden; }
.paper-sheet .paper-head { background: #1d7a3a; color: #fff; padding: 1.4cqw 2.4cqw; }
.paper-sheet::after {
    inset: 6cqw 0 0;
    background:
        repeating-linear-gradient(to right, transparent 0 9.6cqw, var(--border) 9.6cqw 9.9cqw),
        repeating-linear-gradient(to bottom, transparent 0 3.6cqw, var(--border) 3.6cqw 3.9cqw);
}
.paper-binder {
    --r: 6deg; --fx: -50cqw; --fy: 2cqw; left: 68cqw; top: 4cqw; width: 26cqw; height: 38cqw; padding: 5cqw 3cqw;
    background: linear-gradient(90deg, rgba(0, 0, 0, .2) 0 3cqw, transparent 3cqw), #3d5a86; border-color: #2c4366;
}
.paper-binder .paper-head { background: #fff; color: var(--ink); padding: 1.2cqw; border-radius: .8cqw; white-space: normal; text-align: center; }
.paper-binder::after { inset: auto auto 6cqw 50%; width: 4cqw; height: 4cqw; border-radius: 50%; background: rgba(255, 255, 255, .5); translate: -50% 0; }
.paper-doc { --r: 4deg; --fx: -5cqw; --fy: -31cqw; left: 16cqw; top: 42cqw; width: 40cqw; height: 28cqw; }
.paper-note {
    --r: -9deg; --fx: -46cqw; --fy: -34cqw; left: 66cqw; top: 50cqw; width: 22cqw; height: 18cqw; padding: 2.4cqw;
    background: #ffe27a; border-color: #e9c84a; color: #4a3b00; font: italic 600 2.9cqw/1.3 var(--font);
}
.paper-note::after { display: none; }
.huh { position: absolute; font: 7cqw/1 var(--display); color: var(--accent); opacity: 0; }
.huh-1 { left: 54cqw; top: 2cqw; }
.huh-2 { left: 3cqw; top: 42cqw; }
.huh-3 { left: 58cqw; top: 40cqw; }
.how.play .paper { animation: paper 12s ease-in-out infinite; }
.how.play .paper-binder { animation-delay: .1s; }
.how.play .paper-doc { animation-delay: .2s; }
.how.play .paper-note { animation-delay: .3s; }
.how.play .huh { animation: huh 12s ease-out infinite backwards; }
.how.play .huh-1 { animation-delay: .8s; }
.how.play .huh-2 { animation-delay: 1.6s; }
.how.play .huh-3 { animation-delay: 2.4s; }
@keyframes paper {
    0% { opacity: 0; translate: 0 3cqw; rotate: var(--r); scale: 1; }
    3% { opacity: 1; translate: 0 0; }
    12% { translate: 0 -1.4cqw; rotate: calc(var(--r) + 3deg); }
    20% { translate: 0 .6cqw; rotate: calc(var(--r) - 2deg); }
    28% { opacity: 1; translate: 0 0; rotate: var(--r); scale: 1; }
    35%, 100% { opacity: 0; translate: var(--fx) var(--fy); rotate: 0deg; scale: .2; }
}
@keyframes huh { 0% { opacity: 0; scale: .4; } 4% { opacity: 1; scale: 1.1; } 9% { opacity: 1; scale: 1; } 13%, 100% { opacity: 0; translate: 0 -4cqw; } }

/* Act 2: the form */
.form-card {
    position: absolute; z-index: 1; left: 3cqw; top: 3cqw; width: 56cqw; padding: 3.4cqw; border-radius: 2.4cqw; font-size: 2.9cqw;
    background: var(--surface); border: 1px solid var(--border); box-shadow: 0 12px 34px rgba(10, 20, 40, .14);
}
.form-head { margin: 0 0 1cqw; font-weight: 800; font-size: 3.8cqw; display: flex; align-items: center; gap: 2cqw; }
.ver { font-size: 2.4cqw; padding: .3cqw 1.6cqw; border-radius: 9cqw; background: var(--accent-soft); color: var(--accent); }
.form-row { display: grid; grid-template-columns: 6cqw 19cqw 1fr; align-items: center; gap: 1.6cqw; margin-top: 2.2cqw; }
.form-ico {
    display: grid; place-items: center; height: 5.4cqw; border-radius: 1cqw; font-weight: 700; font-size: 2.6cqw;
    background: var(--accent-soft); color: var(--accent);
}
.form-label { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.form-input { height: 5.4cqw; border-radius: 1cqw; border: 1px solid var(--border); background: var(--bg); }
.form-saved { margin: 2.6cqw 0 0; text-align: right; font-weight: 700; color: var(--ok); }
.how.play .form-card { animation: form-card 12s infinite; }
.how.play .form-row:nth-of-type(1) { animation: row-1 12s infinite; }
.how.play .form-row:nth-of-type(2) { animation: row-2 12s infinite; }
.how.play .form-row:nth-of-type(3) { animation: row-3 12s infinite; }
.how.play .form-row:nth-of-type(4) { animation: row-4 12s infinite; }
.how.play :is(.form-saved, .ver) { animation: form-saved 12s infinite; }
@keyframes form-card { 0%, 30% { opacity: 0; scale: .9; } 35%, 95% { opacity: 1; scale: 1; } 99%, 100% { opacity: 0; } }
@keyframes row-1 { 0%, 36% { opacity: 0; translate: -6cqw -2cqw; } 39%, 100% { opacity: 1; translate: 0 0; } }
@keyframes row-2 { 0%, 39% { opacity: 0; translate: -6cqw -2cqw; } 42%, 100% { opacity: 1; translate: 0 0; } }
@keyframes row-3 { 0%, 42% { opacity: 0; translate: -6cqw -2cqw; } 45%, 100% { opacity: 1; translate: 0 0; } }
@keyframes row-4 { 0%, 45% { opacity: 0; translate: -6cqw -2cqw; } 48%, 100% { opacity: 1; translate: 0 0; } }
@keyframes form-saved { 0%, 50% { opacity: 0; scale: .7; } 53%, 100% { opacity: 1; scale: 1; } }

/* Act 3: the label printer and the crate */
.printer {
    position: absolute; z-index: 2; left: 8cqw; bottom: 2cqw; width: 34cqw; height: 20cqw; border-radius: 3cqw;
    background: linear-gradient(#3a414b, #23272e); box-shadow: 0 12px 26px rgba(10, 20, 40, .25);
}
.printer-slot { position: absolute; left: 6cqw; right: 6cqw; top: 3cqw; height: 1.2cqw; border-radius: 1cqw; background: #0b0d10; }
.printer-light { position: absolute; right: 4cqw; bottom: 4cqw; width: 2.4cqw; height: 2.4cqw; border-radius: 50%; background: #3ddc84; }
.crate {
    position: absolute; left: 60cqw; bottom: 2cqw; width: 36cqw; height: 30cqw; border-radius: 1.2cqw;
    background: linear-gradient(#d3ad78, #b98f58); border: .5cqw solid #9c7744;
}
.crate-tape { position: absolute; left: 0; right: 0; top: 0; height: 6cqw; background: rgba(255, 245, 220, .45); border-bottom: .3cqw solid rgba(0, 0, 0, .08); }
.scene-how .lbl { z-index: 3; left: 70cqw; bottom: 9cqw; width: 15cqw; rotate: -3deg; }
.how.play :is(.printer, .crate) { animation: appear 12s infinite; }
.how.play .printer-light { animation: blink .5s steps(2, jump-none) infinite; }
.how.play .scene-how .lbl { animation: label 12s ease-in-out infinite; }
@keyframes appear { 0%, 54% { opacity: 0; translate: 0 4cqw; } 58%, 95% { opacity: 1; translate: 0 0; } 99%, 100% { opacity: 0; } }
@keyframes label {
    0%, 59% { opacity: 0; z-index: 1; translate: -52.5cqw 7cqw; rotate: 0deg; }
    60% { opacity: 1; }
    70%, 74% { z-index: 1; translate: -52.5cqw -14cqw; rotate: 0deg; }
    75% { z-index: 3; }
    82% { translate: -24cqw -24cqw; rotate: -12deg; scale: 1.08; }
    88% { translate: 0 0; rotate: -3deg; scale: 1; }
    90% { scale: .93; }
    92%, 95% { scale: 1; opacity: 1; translate: 0 0; rotate: -3deg; }
    99%, 100% { opacity: 0; translate: 0 0; rotate: -3deg; }
}

/* ---- the showreel: one phone, short examples from simple to advanced ---- */
.reel { display: grid; gap: 1rem; justify-items: center; }
.scene-reel { display: grid; place-items: center; }
.reel-phone { position: relative; width: min(100%, 280px); aspect-ratio: 9 / 16; }
.slide {
    position: absolute; inset: 0; padding: 16cqw 7cqw 7cqw; display: grid; align-content: start; gap: 3cqw;
    opacity: 0; visibility: hidden; translate: 8cqw 0; transition: opacity .35s, translate .35s, visibility .35s;
}
.slide.is-on { opacity: 1; visibility: visible; translate: 0 0; }
.slide-sub { color: var(--muted); font-size: 5.6cqw; }
/* Manual */
.doc {
    display: flex; gap: 3cqw; align-items: center; padding: 3cqw; border-radius: 4cqw;
    border: 1px solid var(--border); background: var(--bg);
}
.doc b, .doc small { display: block; }
.doc small { color: var(--muted); font-size: 5cqw; }
.doc-ico {
    display: grid; place-items: center; width: 13cqw; height: 16cqw; border-radius: 2cqw; flex: none;
    background: #c62828; color: #fff; /* a fixed red: the dark theme's lighter one left the white letters unreadable */ font-size: 4.2cqw; font-weight: 800;
}
.doc-page {
    height: 52cqw; border-radius: 3cqw; padding: 5cqw; display: grid; align-content: start; gap: 3cqw;
    background: #fff; border: 1px solid var(--border); transform-origin: top;
}
.doc-page i { display: block; height: 2cqw; border-radius: 1cqw; background: #d8dce2; }
.doc-page i:first-child { width: 60%; height: 3.2cqw; background: #9aa3af; }
.doc-page i:nth-child(3) { width: 85%; }
.doc-page i:nth-child(5) { width: 70%; }
.doc-open {
    position: relative; justify-self: stretch; text-align: center; padding: 2.6cqw; border-radius: 3cqw;
    background: var(--accent); color: var(--accent-text); font-weight: 700;
}
/* Service protocol */
.checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 2.6cqw; }
.checks li { display: flex; gap: 3cqw; align-items: center; }
.box {
    display: grid; place-items: center; width: 7cqw; height: 7cqw; border-radius: 2cqw; flex: none;
    background: var(--ok); color: #fff; font-size: 5cqw; font-weight: 800;
}
.box::after { content: "✓"; }
.toast {
    margin-top: 3cqw !important; padding: 2.6cqw 3.4cqw; border-radius: 3cqw; font-weight: 700;
    background: var(--ok-soft); color: var(--ok);
}
/* Fault history (also its own list style) */
.hist { list-style: none; margin: 0; padding: 0; display: grid; }
.hist li {
    display: flex; justify-content: space-between; gap: 2cqw; padding: 2.6cqw 0 2.6cqw 4.4cqw;
    border-left: .8cqw solid var(--border); position: relative; overflow: hidden;
}
.hist li::before {
    content: ""; position: absolute; left: -.8cqw; top: 4cqw; width: 3.2cqw; height: 3.2cqw; margin-left: -1.2cqw;
    border-radius: 50%; background: var(--muted);
}
.hist li span { color: var(--muted); font-size: 5.4cqw; white-space: nowrap; }
.hist .hist-new { border-left-color: var(--danger); }
.hist .hist-new::before { background: var(--danger); }
/* Inventory */
.qty { display: grid; font: 26cqw/1 var(--display); color: var(--text); }
.qty span { grid-area: 1 / 1; }
.qty-a { opacity: 0; }
.meter { display: block; height: 4cqw; border-radius: 4cqw; background: var(--surface-2); overflow: hidden; }
.meter-fill { display: block; height: 100%; width: 50%; border-radius: inherit; background: var(--warn); }
.stock-chips { display: flex; gap: 2cqw; flex-wrap: wrap; }
/* Production line, linked to a PLC */
.line-state { display: grid; }
.line-state span { grid-area: 1 / 1; justify-self: start; padding: 1cqw 3.4cqw; border-radius: 9cqw; font-weight: 800; }
.st-run { background: var(--ok-soft); color: var(--ok); opacity: 0; }
.st-stop { background: var(--danger-soft); color: var(--danger); }
.belt {
    position: relative; height: 15cqw; border-radius: 8cqw; border: 1.2cqw solid var(--muted); overflow: hidden;
    background: repeating-linear-gradient(90deg, var(--surface-2) 0 4cqw, var(--bg) 4cqw 8cqw);
}
.belt i { position: absolute; top: 2.4cqw; width: 9cqw; height: 7cqw; border-radius: 1.4cqw; background: #c9a06a; }
.belt i:nth-child(1) { left: 6cqw; }
.belt i:nth-child(2) { left: 26cqw; }
.belt i:nth-child(3) { left: 46cqw; }
.belt i:nth-child(4) { left: 66cqw; }
.belt i:nth-child(2) { background: var(--danger); } /* the jam */
@property --sec { syntax: "<integer>"; inherits: false; initial-value: 42; }
.timer { font-variant-numeric: tabular-nums; color: var(--danger) !important; counter-reset: sec var(--sec); }
.timer::after { content: counter(sec, decimal-leading-zero); }
.pick {
    padding: 2.4cqw 3cqw; border-radius: 2.6cqw; border: 1px solid var(--accent); background: var(--accent-soft); font-weight: 700;
    position: relative;
}
.plc { font-size: 5.2cqw; color: var(--accent); font-weight: 700; display: flex; gap: 2cqw; align-items: baseline; }
.plc::before { /* the live link to the PLC */
    content: ""; flex: none; width: 2.6cqw; height: 2.6cqw; border-radius: 50%; background: var(--ok);
    box-shadow: 0 0 0 1.2cqw var(--ok-soft); animation: blink 1.2s steps(2, jump-none) infinite;
}

/* Each example plays once while it is shown (it starts again when it comes back). */
.reel.play .slide-manual.is-on .doc { animation: pop-up .5s .2s backwards; }
.reel.play .slide-manual.is-on .doc-open { animation: tap .5s 1.1s backwards; }
.reel.play .slide-manual.is-on .doc-page { animation: unfold .6s 1.5s cubic-bezier(.2, .7, .2, 1) backwards; }
.reel.play .slide-service.is-on .box { animation: tick .4s backwards; }
.reel.play .slide-service.is-on li:nth-child(1) .box { animation-delay: .4s; }
.reel.play .slide-service.is-on li:nth-child(2) .box { animation-delay: .9s; }
.reel.play .slide-service.is-on li:nth-child(3) .box { animation-delay: 1.4s; }
.reel.play .slide-service.is-on li:nth-child(4) .box { animation-delay: 1.9s; }
.reel.play .slide-service.is-on .toast { animation: pop-up .4s 2.5s backwards; }
.reel.play .slide-faults.is-on .hist-new { animation: grow-in .6s .7s backwards, flash 1.4s 1.2s; }
.reel.play .slide-faults.is-on .chip-warn-s { animation: tap .4s 1.4s backwards; }
.reel.play .slide-stock.is-on .qty-a { animation: count-out .4s 1s backwards; }
.reel.play .slide-stock.is-on .qty-b { animation: count-in .4s 1s backwards; }
.reel.play .slide-stock.is-on .meter-fill { animation: shrink .5s 1s backwards; }
.reel.play .slide-stock.is-on .chip-s { animation: pop-up .35s .9s backwards; }
.reel.play .slide-stock.is-on .chip-warn-s { animation: pop-up .35s 1.7s backwards; }
.reel.play .slide-line.is-on .st-run { animation: fade-out .3s .9s backwards; }
.reel.play .slide-line.is-on .st-stop { animation: pop-up .3s .9s backwards; }
.reel.play .slide-line.is-on .belt i { animation: belt 1s linear 0s 1 backwards; }
.reel.play .slide-line.is-on .timer { animation: count 3s .9s linear backwards; }
.reel.play .slide-line.is-on .pick { animation: pop-up .4s 2.3s backwards; }
.reel.play .slide-line.is-on .plc { animation: pop-up .4s 1.4s backwards; }
@keyframes pop-up { from { opacity: 0; translate: 0 4cqw; scale: .9; } }
@keyframes tap { 40% { scale: .9; filter: brightness(1.2); } }
@keyframes unfold { from { opacity: 0; transform: scaleY(.2); } }
@keyframes tick { from { background: transparent; color: transparent; box-shadow: inset 0 0 0 .8cqw var(--border); } 60% { scale: 1.25; } }
@keyframes grow-in { from { max-height: 0; padding-block: 0; opacity: 0; } to { max-height: 20cqw; } }
@keyframes flash { 0%, 60% { background: var(--danger-soft); } }
@keyframes count-out { from { opacity: 1; translate: 0 0; } to { opacity: 0; translate: 0 -8cqw; } }
@keyframes count-in { from { opacity: 0; translate: 0 8cqw; } }
@keyframes shrink { from { width: 60%; background: var(--ok); } }
@keyframes fade-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes belt { from { translate: -20cqw 0; } }
@keyframes count { from { --sec: 0; } }

.reel-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem; max-width: 30rem; }
.reel-tab {
    position: relative; overflow: hidden; display: inline-flex; align-items: center; gap: .35rem;
    font: inherit; font-size: .85rem; font-weight: 600; padding: .35rem .8rem; border-radius: 99px; cursor: pointer;
    border: 1px solid var(--border); background: var(--surface); color: var(--muted);
}
.reel-tab[aria-pressed="true"] { border-color: var(--accent); color: var(--accent); }
.reel-bar { position: absolute; inset: 0 auto 0 0; width: 0; background: var(--accent-soft); z-index: -1; }
.reel-tab { isolation: isolate; }
.reel-tab[aria-pressed="true"] .reel-bar { width: 100%; }
.reel.play .reel-tab[aria-pressed="true"] .reel-bar { animation: reel-bar 4.6s linear forwards; }
.reel.play .reel-tab[data-slide="line"][aria-pressed="true"] .reel-bar { animation-duration: 6s; }
@keyframes reel-bar { from { width: 0; } }
.reel-badge {
    font-size: .68rem; font-weight: 700; padding: .05rem .4rem; border-radius: 99px;
    background: var(--warn-soft); color: var(--warn);
}
.points-head { font-weight: 700; margin: 1.6rem 0 .5rem; }
.points { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }
.points li { display: flex; gap: .55rem; align-items: baseline; }
.points li::before {
    content: "✓"; flex: none; display: inline-grid; place-items: center; width: 1.3rem; height: 1.3rem;
    border-radius: 50%; background: var(--ok-soft); color: var(--ok); font-size: .75rem; font-weight: 800;
}

/* ---- pricing: one line and the free tier (docs/plans.md; no animation) ---- */
.price-head { max-width: 1100px; margin: 0 auto; padding: clamp(3rem, 7vw, 5rem) 16px; text-align: center; }
.price-head .kicker, .price-head .btn-row { justify-content: center; }
.price-head .lead { margin-left: auto; margin-right: auto; }
.free-note {
    display: inline-flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: .3rem .6rem;
    margin: 1.4rem 0 0; padding: .6rem 1rem; border-radius: 12px; border: 1px dashed var(--border); color: var(--muted);
}
.free-note b { color: var(--text); }
.tier-badge {
    font-size: .72rem; font-weight: 700; padding: .2rem .6rem; border-radius: 99px;
    background: var(--warn-soft); color: var(--warn);
}

/* ---- working with us: four steps and the pilot (no animation) ---- */
.work { align-items: start; }
.work-steps { margin: 0; gap: .6rem; }
.work-steps .how-step { background: var(--bg); border-color: var(--border); }
.pilot {
    margin-top: 1.6rem; padding: 1rem 1.2rem; border-radius: 10px; max-width: 34rem;
    background: var(--accent-soft); border-left: 4px solid var(--accent);
}
.pilot p { margin: 0; }
.pilot-title { font-weight: 700; margin-bottom: .3rem !important; }
.pilot .btn-row { margin-top: .9rem; }

/* ---- for the IT department: the heading above, what they ask in up to four columns ---- */
.chapter.trust { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
.trust-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); gap: 1.4rem 1.8rem; }
.trust-list li { display: grid; align-content: start; gap: .25rem; padding-left: .9rem; border-left: 3px solid var(--accent); }
.trust-list b { font-size: 1rem; }
.trust-list span { color: var(--muted); font-size: .95rem; }

/* ---- the company: who, and what you get ---- */
.track-head { font-weight: 700; margin: 0 0 .7rem; }
.track-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: .55rem 1.2rem; }
.track-list li { display: flex; gap: .55rem; align-items: baseline; }
.track-list li::before {
    content: "✓"; flex: none; display: inline-grid; place-items: center; width: 1.3rem; height: 1.3rem;
    border-radius: 50%; font-size: .75rem; font-weight: 800; background: var(--ok-soft); color: var(--ok);
}
@media (scripting: enabled) and (prefers-reduced-motion: no-preference) {
    .track-list li { transition: opacity .4s, translate .4s; }
    .chapter.reveal:not(.in) .track-list li { opacity: 0; translate: -10px 0; }
    .chapter.reveal.in .track-list li:nth-child(2) { transition-delay: .28s; }
    .chapter.reveal.in .track-list li:nth-child(3) { transition-delay: .36s; }
    .chapter.reveal.in .track-list li:nth-child(4) { transition-delay: .44s; }
    .chapter.reveal.in .track-list li:nth-child(5) { transition-delay: .52s; }
    .chapter.reveal.in .track-list li:nth-child(6) { transition-delay: .60s; }
    .chapter.reveal.in .track-list li:nth-child(7) { transition-delay: .68s; }
    .chapter.reveal.in .track-list li:nth-child(8) { transition-delay: .76s; }
    .chapter.reveal.in .track-list li:nth-child(9) { transition-delay: .84s; }
}
@media (max-width: 480px) { .track-list { grid-template-columns: minmax(0, 1fr); } }

/* ---- the production line (docs/signals.md): a sensor counts boxes; runs, a microstop and a stop on
   a timeline; the stop gets its cause; the run time box turns orange. One 14 s clock:
   run 0–4 s · microstop 4–5.5 · run 5.5–8 · stop 8–12.5 (cause asked at 9, picked at 11.5) · run 12.5–14.
   Drawn in its end state: everything on the timeline, the cause picked, 88 % orange. ---- */
.line-chapter .kicker .reel-badge { vertical-align: .1em; margin-left: .3rem; }
.line-chapter .lead { margin-bottom: 1.2rem; }
.scene-line { aspect-ratio: 10 / 9; display: grid; grid-template-rows: auto 1fr; gap: 4cqw; align-content: center; }
.ln-conveyor { position: relative; height: 22cqw; }
.ln-belt {
    position: absolute; left: 0; right: 0; bottom: 3cqw; height: 4cqw; border-radius: 2cqw;
    background: repeating-linear-gradient(90deg, var(--ink) 0 3cqw, color-mix(in srgb, var(--ink) 75%, #fff) 3cqw 6cqw);
}
.ln-load { position: absolute; left: -36cqw; right: 0; bottom: 7cqw; height: 9cqw; display: flex; gap: 2cqw; padding-left: 2cqw; overflow: visible; }
.ln-conveyor { overflow: hidden; border-radius: 2cqw; }
.ln-load i { flex: none; width: 7cqw; height: 7cqw; margin-top: 2cqw; border-radius: .8cqw; background: #c8955a; box-shadow: inset 0 -1.2cqw 0 rgba(0, 0, 0, .12); }
.ln-load i:nth-child(odd) { width: 6cqw; height: 6cqw; margin-top: 3cqw; }
.ln-gate { position: absolute; left: 62cqw; top: 0; bottom: 3cqw; width: 2cqw; }
.ln-gate::before { content: ""; position: absolute; inset: 0 0 auto; height: 4cqw; border-radius: 1cqw; background: var(--ink); }
.ln-beam { position: absolute; left: .7cqw; top: 4cqw; bottom: 0; width: .6cqw; background: color-mix(in srgb, var(--danger) 70%, transparent); box-shadow: 0 0 1.5cqw var(--danger); }
.ln-led { position: absolute; z-index: 1; left: .4cqw; top: 1cqw; width: 1.2cqw; height: 1.2cqw; border-radius: 50%; background: var(--opt-green); }
.ln-gate-label { position: absolute; left: 3cqw; top: -.3cqw; font: 700 3cqw/1 var(--font); color: var(--muted); white-space: nowrap; }

.ln-card { display: grid; gap: 3cqw; font-size: 3.4cqw; }
.ln-box {
    --c: var(--warn);
    background: color-mix(in srgb, var(--c) 12%, var(--surface)); border: .5cqw solid color-mix(in srgb, var(--c) 55%, var(--border));
    border-radius: 2.4cqw; padding: 3cqw 4cqw; display: grid; gap: 1.2cqw; box-shadow: 0 8px 24px rgba(10, 20, 40, .12);
}
.ln-box p { margin: 0; }
.ln-name { font-weight: 800; }
.ln-name small { font-weight: 500; color: var(--muted); margin-left: 1.5cqw; }
.ln-status { position: relative; height: 4.6cqw; font-weight: 700; }
.ln-st { position: absolute; left: 0; display: inline-flex; align-items: center; gap: 1.4cqw; opacity: 0; }
.ln-st::before { content: ""; width: 2.4cqw; height: 2.4cqw; border-radius: 50%; }
.ln-st-run { opacity: 1; }
.ln-st-run::before { background: var(--opt-green); }
.ln-st-micro::before { background: var(--opt-yellow); }
.ln-st-stop { color: var(--danger); }
.ln-st-stop::before { background: var(--opt-red); }
@property --lsec { syntax: "<integer>"; inherits: false; initial-value: 45; }
.ln-timer { font-variant-numeric: tabular-nums; counter-reset: lsec var(--lsec); }
.ln-timer::after { content: counter(lsec, decimal-leading-zero); }
.ln-figs { display: flex; gap: 6cqw; align-items: flex-end; }
.ln-fig { display: grid; }
.ln-fig small { font-weight: 700; color: var(--text); }
.ln-n { position: relative; font: 800 11cqw/1.05 var(--font); color: var(--c); font-variant-numeric: tabular-nums; }
.ln-fig-2 .ln-n { font-size: 7.5cqw; }
.ln-n-a { position: absolute; left: 0; opacity: 0; color: var(--ok); }

.ln-tl { background: var(--surface); border: 1px solid var(--border); border-radius: 2.4cqw; padding: 3cqw 4cqw; display: grid; gap: 2cqw; box-shadow: 0 8px 24px rgba(10, 20, 40, .12); }
.ln-track { position: relative; height: 7cqw; border-radius: 1.2cqw; overflow: hidden; background: color-mix(in srgb, var(--opt-gray) 25%, var(--surface)); }
.ln-seg { position: absolute; top: 0; bottom: 0; transform-origin: left; }
.ln-g1 { left: 0; width: 40%; } .ln-y { left: 40%; width: 6%; } .ln-g2 { left: 46%; width: 18%; } .ln-r { left: 64%; width: 24%; } .ln-g3 { left: 88%; width: 12%; }
.ln-g1, .ln-g2, .ln-g3 { background: var(--opt-green); }
.ln-y { background: var(--opt-yellow); }
.ln-r { background: var(--opt-red); }
.ln-stripes { position: absolute; inset: 0; opacity: 0; background: repeating-linear-gradient(135deg, transparent 0 1.2cqw, color-mix(in srgb, #fff 55%, transparent) 1.2cqw 2.4cqw); }
.ln-cause { position: relative; margin: 0; height: 6cqw; }
.ln-q, .ln-pick { position: absolute; left: 50%; translate: -15% 0; padding: .8cqw 2.6cqw; border-radius: 9cqw; font-weight: 700; white-space: nowrap; }
.ln-q { opacity: 0; background: var(--opt-red-bg); color: var(--opt-red-fg); }
.ln-pick { background: var(--accent-soft); color: var(--accent); border: 1px solid var(--accent); }

.scene-line.play .ln-load { animation: ln-load 14s linear infinite; }
.scene-line.play .ln-led { animation: ln-led 14s steps(1) infinite; }
.scene-line.play .ln-beam { animation: ln-beam 14s steps(1) infinite; }
.scene-line.play .ln-st-run { animation: ln-st-run 14s steps(1) infinite; }
.scene-line.play .ln-st-micro { animation: ln-st-micro 14s steps(1) infinite; }
.scene-line.play .ln-st-stop { animation: ln-st-stop 14s steps(1) infinite; }
.scene-line.play .ln-timer { animation: ln-timer 14s linear infinite; }
.scene-line.play .ln-box { animation: ln-box 14s infinite; }
.scene-line.play .ln-n-a { animation: ln-n-a 14s infinite; }
.scene-line.play .ln-n-b { animation: ln-n-b 14s infinite; }
.scene-line.play .ln-g1 { animation: ln-g1 14s linear infinite; }
.scene-line.play .ln-y { animation: ln-y 14s linear infinite; }
.scene-line.play .ln-g2 { animation: ln-g2 14s linear infinite; }
.scene-line.play .ln-r { animation: ln-r 14s linear infinite; }
.scene-line.play .ln-g3 { animation: ln-g3 14s linear infinite; }
.scene-line.play .ln-stripes { animation: ln-stripes 14s steps(1) infinite; }
.scene-line.play .ln-q { animation: ln-q 14s infinite; }
.scene-line.play .ln-pick { animation: ln-pick 14s infinite; }
/* The boxes move only while the line runs; 36cqw is six boxes, so the loop doesn't jump. */
@keyframes ln-load { 0% { translate: 0 0; } 28.6%, 39.3% { translate: 18cqw 0; } 57.1%, 89.3% { translate: 30cqw 0; } 100% { translate: 36cqw 0; } }
@keyframes ln-led { 0%, 39.3%, 89.3% { background: var(--opt-green); } 28.6%, 57.1% { background: var(--opt-gray); } }
@keyframes ln-beam { 0%, 39.3%, 89.3% { opacity: 1; } 28.6%, 57.1% { opacity: .35; } }
@keyframes ln-st-run { 0%, 39.3%, 89.3% { opacity: 1; } 28.6%, 57.1% { opacity: 0; } }
@keyframes ln-st-micro { 0%, 39.3% { opacity: 0; } 28.6% { opacity: 1; } }
@keyframes ln-st-stop { 0%, 89.3% { opacity: 0; } 57.1% { opacity: 1; } }
@keyframes ln-timer { 0%, 57.1% { --lsec: 0; } 89.3%, 100% { --lsec: 45; } }
@keyframes ln-box { 0%, 70% { --c: var(--ok); } 72%, 100% { --c: var(--warn); } }
@keyframes ln-n-a { 0%, 70% { opacity: 1; } 72%, 100% { opacity: 0; } }
@keyframes ln-n-b { 0%, 70% { opacity: 0; } 72%, 100% { opacity: 1; } }
@keyframes ln-g1 { 0% { transform: scaleX(0); } 28.6%, 100% { transform: scaleX(1); } }
@keyframes ln-y { 0%, 28.6% { transform: scaleX(0); } 39.3%, 100% { transform: scaleX(1); } }
@keyframes ln-g2 { 0%, 39.3% { transform: scaleX(0); } 57.1%, 100% { transform: scaleX(1); } }
@keyframes ln-r { 0%, 57.1% { transform: scaleX(0); } 89.3%, 100% { transform: scaleX(1); } }
@keyframes ln-g3 { 0%, 89.3% { transform: scaleX(0); } 100% { transform: scaleX(1); } }
@keyframes ln-stripes { 0%, 82.1% { opacity: 0; } 57.1% { opacity: 1; } }
@keyframes ln-q { 0%, 64.3%, 82.1%, 100% { opacity: 0; } 66%, 80% { opacity: 1; } }
@keyframes ln-pick { 0%, 82.1% { opacity: 0; scale: .9; } 84%, 100% { opacity: 1; scale: 1; } }

/* ---- the end: the logo is a working code ---- */
.end { text-align: center; padding-top: clamp(3.5rem, 8vw, 6rem); padding-bottom: clamp(3.5rem, 8vw, 6rem); }
.end .lead, .end-ask { margin-left: auto; margin-right: auto; }
.end-ask { font-weight: 600; margin-top: 1.4rem; }
.end-partner { margin: 1.6rem 0 0; font-size: .92rem; }
.end .btn-row { justify-content: center; }
.end-code { position: relative; display: inline-block; margin-bottom: 1.8rem; container-type: inline-size; width: min(340px, 80vw); }
.end-code img { display: block; width: 100%; height: auto; }
.end-line { /* sweeps the code part of the logo: its left 38 % */
    position: absolute; left: 0; width: 38%; top: 0; height: 2px; border-radius: 2px; opacity: 0;
    background: var(--accent); box-shadow: 0 0 12px 3px color-mix(in srgb, var(--accent) 60%, transparent);
}
.end.in .end-line { animation: sweep 3.2s ease-in-out infinite; }
@keyframes sweep { 0% { opacity: 0; top: 4%; } 10%, 90% { opacity: 1; } 50% { top: 92%; } 100% { opacity: 0; top: 4%; } }
@media (prefers-reduced-motion: reduce) { .end.in .end-line, .needle, .led-2, .plc::before { animation: none; } }
.home-foot { text-align: center; padding: 1.5rem 16px 2rem; border-top: 1px solid var(--border); background: var(--surface); }