/* "La clé" page: builds on auth.css (full-screen sections, shared anims). */
.sd-logo { height: 24px; width: auto; }
.sd-key { width: 100%; max-width: 380px; overflow: visible; }
.shine { opacity: 0; }
.in .shine { animation: shine 1.6s .4s ease-in-out forwards; }
.big-shine .shine { animation-iteration-count: 2 !important; }
@keyframes shine { 0% { opacity: 0; transform: translateX(0); } 20% { opacity: 1; } 80% { opacity: 1; } 100% { opacity: 0; transform: translateX(170px); } }

/* 01 stream of blocks into the key */
.stream { position: relative; width: 100%; max-width: 360px; height: 120px; border-radius: 16px; background: #fff; border: 1px solid var(--line); overflow: hidden; }
.stream span { position: absolute; top: 44px; left: -40px; width: 32px; height: 32px; border-radius: 6px; background: var(--ink); opacity: 0; }
.stream b { position: absolute; right: 18px; bottom: 12px; font-size: 14px; color: var(--ink-2); }
.in .stream span { animation: stream 1.4s linear infinite; }
.in .stream span:nth-child(2) { animation-delay: .23s; } .in .stream span:nth-child(3) { animation-delay: .46s; } .in .stream span:nth-child(4) { animation-delay: .7s; } .in .stream span:nth-child(5) { animation-delay: .93s; } .in .stream span:nth-child(6) { animation-delay: 1.16s; }
@keyframes stream { 0% { left: -40px; opacity: 1; } 100% { left: 110%; opacity: 1; } }

/* 02 race bars, 12 fake capacity, 13 read/write */
.race, .fake, .rw { width: 100%; max-width: 400px; display: grid; gap: 14px; }
.rc, .fk, .rwb { display: grid; grid-template-columns: 1fr; gap: 6px; font-size: 14px; }
.rc { grid-template-columns: 1fr auto; } .rc i, .fk i, .rwb i { grid-column: 1 / -1; }
.rc em, .fk em { font-style: normal; font-size: 12px; color: var(--ink-3); margin-left: 6px; }
.rc code, .fk code { font: 600 14px ui-monospace, Consolas, monospace; }
.rc i, .fk i, .rwb i { display: block; height: 12px; border-radius: 6px; background: var(--line); overflow: hidden; }
.rc i b, .fk i b, .rwb i b { display: block; height: 100%; width: 0; border-radius: 6px; background: var(--ink-3); }
.rc.best i b, .fk.ok i b { background: var(--ok); }
.fk.bad i b { background: var(--bad); } .fk.bad code { color: var(--bad); }
.rc.best span { font-weight: 600; }
.in .rc i b, .in .fk i b, .in .rwb i b { animation: grow 2.2s cubic-bezier(.3, .6, .2, 1) forwards; }
.in .fk:nth-child(2) i b { animation-delay: .6s; } .in .fk:nth-child(3) i b { animation-delay: 1.2s; }
.rwb i b { background: var(--ink); } .rwb.w i b { background: var(--ink-3); }
@keyframes grow { to { width: var(--w); } }
.fk { grid-template-columns: 1fr auto; }

/* 03 timers */
.timers { width: 100%; max-width: 360px; display: grid; gap: 10px; }
.tm { display: flex; justify-content: space-between; align-items: center; background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 16px 18px; }
.tm b { font: 700 22px var(--font); font-variant-numeric: tabular-nums; }
.tm.best { border-color: var(--ok); } .tm.best b { color: var(--ok); }
.tm-note { font-size: 12.5px; color: var(--ink-3); text-align: center; margin-top: 4px; }

/* 04/14 capacity columns */
.caps { display: flex; align-items: flex-end; gap: 14px; height: 220px; width: 100%; max-width: 380px; }
.cp { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 6px; height: 100%; }
.cp i { display: block; width: 100%; height: 0; background: var(--ink); border-radius: 8px 8px 3px 3px; }
.cp b { font-size: 15px; } .cp span { font-size: 12.5px; color: var(--ink-2); }
.caps .cp:first-child i { background: var(--ink-3); }
.grow .cp i { background: var(--ink); }
.in .cp i { animation: rise 1.2s cubic-bezier(.3, .6, .2, 1) forwards; }
.in .cp:nth-child(2) i { animation-delay: .15s; } .in .cp:nth-child(3) i { animation-delay: .3s; } .in .cp:nth-child(4) i { animation-delay: .45s; } .in .cp:nth-child(5) i { animation-delay: .6s; }
@keyframes rise { to { height: calc(var(--h) * .72); } }

/* 05 plugs sliding out */
.pivot { width: 100%; max-width: 380px; overflow: visible; }
.plugA, .plugC { opacity: 0; }
.in .plugA { animation: slideA .7s .3s forwards; } .in .plugC { animation: slideC .7s .9s forwards; }
@keyframes slideA { from { opacity: 0; transform: translateX(-30px); } to { opacity: 1; transform: none; } }
@keyframes slideC { from { opacity: 0; transform: translateX(30px); } to { opacity: 1; transform: none; } }

/* 06 devices */
.devices { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; width: 100%; max-width: 380px; }
.devices div { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 18px; display: grid; gap: 4px; opacity: 0; transform: scale(.94); }
.devices b { font-weight: 600; } .devices span { font-size: 13px; color: var(--ok); } .devices span::before { content: "✓ "; }
.in .devices div { animation: popin .4s forwards; }
.in .devices div:nth-child(2) { animation-delay: .25s; } .in .devices div:nth-child(3) { animation-delay: .5s; } .in .devices div:nth-child(4) { animation-delay: .75s; }
@keyframes popin { to { opacity: 1; transform: none; } }

/* 08 swivel */
.swivel { width: 220px; }
.arm { transform-origin: 100px 100px; }
.in .arm { animation: swivel 2.4s ease-in-out forwards; }
@keyframes swivel { 0% { transform: rotate(0); } 60% { transform: rotate(200deg); } 100% { transform: rotate(180deg); } }

/* 09 heat */
.heat { position: relative; width: 220px; height: 200px; }
.hk { position: absolute; left: 40px; right: 40px; bottom: 30px; height: 60px; border-radius: 12px; background: linear-gradient(118deg, #f6f7f9, #d9dce0 45%, #9ea2a8 55%, #c9ccd1); border: 1px solid #6f7378; }
.heat span { position: absolute; bottom: 96px; width: 4px; height: 50px; border-radius: 2px; background: linear-gradient(transparent, #f59e0b); opacity: 0; }
.heat span:nth-child(1) { left: 70px; } .heat span:nth-child(2) { left: 108px; } .heat span:nth-child(3) { left: 146px; }
.in .heat span { animation: waft 1.8s ease-out infinite; }
.in .heat span:nth-child(2) { animation-delay: .5s; } .in .heat span:nth-child(3) { animation-delay: 1s; }
@keyframes waft { 0% { opacity: 0; transform: translateY(20px); } 40% { opacity: .9; } 100% { opacity: 0; transform: translateY(-30px); } }

/* 11 chip */
.chip { position: relative; width: 170px; height: 170px; border-radius: 16px; background: #1b1b1e; box-shadow: 0 24px 60px -30px rgba(0, 0, 0, .6); }
.die { position: absolute; inset: 40px; border-radius: 8px; background: linear-gradient(135deg, #3a3a40, #26262a); box-shadow: inset 0 0 0 1px #4a4a50; }
.in .die { animation: diepulse 1.6s .3s ease-in-out 2; }
@keyframes diepulse { 50% { box-shadow: inset 0 0 0 1px #4a4a50, 0 0 24px 4px rgba(26, 127, 55, .55); } }
.chip i { position: absolute; width: 10px; height: 26px; background: #9ea2a8; border-radius: 2px; }
.chip i:nth-child(2) { left: 30px; top: -20px; } .chip i:nth-child(3) { left: 80px; top: -20px; } .chip i:nth-child(4) { left: 130px; top: -20px; }
.chip i:nth-child(5) { left: 30px; bottom: -20px; } .chip i:nth-child(6) { left: 80px; bottom: -20px; } .chip i:nth-child(7) { left: 130px; bottom: -20px; }
.chip i:nth-child(8) { left: -20px; top: 72px; width: 26px; height: 10px; } .chip i:nth-child(9) { right: -20px; top: 72px; width: 26px; height: 10px; }

/* 15 colour swatches */
.swrow { display: flex; gap: 26px; }
.swrow span { width: 88px; height: 88px; border-radius: 50%; background: var(--sw); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12); position: relative; opacity: 0; transform: translateY(14px) scale(.9); }
.swrow em { position: absolute; top: 100px; left: 50%; transform: translateX(-50%); white-space: nowrap; font-style: normal; font-size: 14px; color: var(--ink-2); }
.in .swrow span { animation: popin .5s forwards; }
.in .swrow span:nth-child(2) { animation-delay: .3s; } .in .swrow span:nth-child(3) { animation-delay: .6s; }

/* 16 comparison table */
.cmp { margin-top: 36px; display: grid; gap: 0; border-radius: 18px; overflow: hidden; border: 1px solid var(--line); background: #fff; }
.cmp-row { display: grid; grid-template-columns: 1.1fr 1fr 1fr 1.2fr; border-top: 1px solid var(--line); opacity: 0; transform: translateY(8px); }
.cmp-row:first-child { border-top: 0; }
.cmp-row > * { padding: 14px 16px; font-size: 14.5px; font-style: normal; }
.cmp-row span { color: var(--ink-2); }
.cmp-row small { color: var(--ink-3); font-size: 11.5px; }
.cmp-row .us { background: #f1f8f3; font-weight: 600; color: var(--ink); }
.cmp-row.head b { font-weight: 600; font-size: 14px; } .cmp-row.head .us { color: var(--ok); }
.in .cmp-row { animation: up .4s forwards; }
.in .cmp-row:nth-child(2) { animation-delay: .15s; } .in .cmp-row:nth-child(3) { animation-delay: .3s; } .in .cmp-row:nth-child(4) { animation-delay: .45s; } .in .cmp-row:nth-child(5) { animation-delay: .6s; } .in .cmp-row:nth-child(6) { animation-delay: .75s; } .in .cmp-row:nth-child(7) { animation-delay: .9s; }
@media (max-width: 720px) { .cmp-row { grid-template-columns: 1fr 1fr 1fr 1fr; } .cmp-row > * { padding: 10px 8px; font-size: 12px; } }

/* 17 balance */
.balance { width: 100%; max-width: 360px; display: grid; gap: 14px; }
.balance div { display: grid; grid-template-columns: 90px 1fr; gap: 12px; align-items: center; font-size: 14px; }
.balance i { display: block; height: 10px; border-radius: 5px; background: var(--line); overflow: hidden; }
.balance em { display: block; height: 100%; width: 0; background: var(--ink); border-radius: 5px; }
.in .balance em { animation: grow 1.6s cubic-bezier(.3, .6, .2, 1) forwards; }
.in .balance div:nth-child(2) em { animation-delay: .2s; } .in .balance div:nth-child(3) em { animation-delay: .4s; } .in .balance div:nth-child(4) em { animation-delay: .6s; }

/* end: logo + non-affiliation */
.sd-end { margin: 64px auto 0; max-width: 620px; display: grid; justify-items: center; gap: 14px; }
.sd-end img { height: 15px; width: auto; opacity: .85; }
.sd-end p { font-size: 12.5px; color: var(--ink-3); line-height: 1.55; }

@media (prefers-reduced-motion: reduce) {
  .plugA, .plugC, .devices div, .swrow span, .cmp-row { opacity: 1 !important; transform: none !important; animation: none !important; }
  .rc i b, .fk i b, .rwb i b, .balance em { width: var(--w) !important; animation: none !important; }
  .cp i { height: calc(var(--h) * .72) !important; animation: none !important; }
  .stream span, .heat span, .shine { display: none; }
}

/* ---- Scroll-driven opening: giant logo → a key rises, swivels, shines ---- */
.scrolly { position: relative; height: 320vh; --a: 0; --k: 0; --s: 0; --l: 0; --t: 0; --h: 1; }
.stage { position: sticky; top: 0; height: 100vh; overflow: hidden; background: #fff; }
.glow { position: absolute; left: 50%; top: 48%; width: 120vmax; height: 120vmax; transform: translate(-50%, -50%); background: radial-gradient(closest-side, rgba(225, 6, 0, calc(.07 * (1 - var(--k)))), transparent 70%), radial-gradient(closest-side, rgba(160, 165, 172, calc(.22 * var(--k))), transparent 60%); pointer-events: none; }
.mega-logo { position: absolute; left: 50%; top: 50%; width: min(88vw, 1500px); height: auto; transform: translate(-50%, -50%) translateY(calc(var(--a) * -35vh)) scale(calc(1 - var(--a) * .76)); will-change: transform; }
.keywrap { position: absolute; left: 50%; top: calc(47% - var(--t) * 8%); width: min(64vw, 700px); transform: translate(-50%, -50%) translateY(calc((1 - var(--k)) * 75vh)) rotate(calc(-24deg + var(--k) * 20deg)) scale(calc(.7 + var(--k) * .3)); opacity: min(1, calc(var(--k) * 2)); will-change: transform; }
.bigkey { width: 100%; height: auto; overflow: visible; filter: drop-shadow(0 2px 1px rgba(0, 0, 0, .12)); }
.kshadow { position: absolute; left: 12%; right: 8%; bottom: -8%; height: 26px; border-radius: 50%; background: radial-gradient(closest-side, rgba(0, 0, 0, .28), transparent); filter: blur(6px); opacity: var(--k); transform: scaleX(calc(.6 + var(--k) * .4)); }
.bigkey .ring { transform-box: view-box; transform-origin: 332px 120px; transform: rotate(calc(var(--s) * -180deg)); }
.bigkey .usbA { transform: translateX(calc((1 - var(--s)) * -18px)); }
.bigkey .klight { transform: skewX(-18deg) translateX(calc(var(--l) * 620px)); }
.scrolly-text { position: absolute; left: 0; right: 0; bottom: 5vh; text-align: center; padding: 0 24px; opacity: var(--t); transform: translateY(calc((1 - var(--t)) * 40px)); }
.scrolly-text .giant { font-size: clamp(40px, 5.4vw, 80px); }
.scrolly-text .intro { margin: 18px auto 0; }
.scrolly .scroll-hint { opacity: var(--h); }
@media (max-width: 720px) { .keywrap { width: 88vw; top: 44%; } .scrolly-text { bottom: 5vh; } }
@media (prefers-reduced-motion: reduce) {
  .scrolly { height: auto; --a: 1; --k: 1; --s: 1; --l: 0; --t: 1; --h: 0; }
  .stage { position: relative; height: 100vh; }
}
/* The opening sequence is one tall snap area (320vh): browsers scroll
   freely inside a snap area taller than the screen, then each following
   section snaps one wheel notch at a time. */
html.snap .scrolly.snap-pt { scroll-margin-top: 0; }
.scrolly .scroll-hint { animation: none; opacity: var(--h); }

/* Real key photo in two layers: the swivel cover turns around its rivet. */
.photokey { position: relative; width: 100%; aspect-ratio: 1100 / 879; }
.photokey img { position: absolute; inset: 0; width: 100%; height: 100%; }
.pk-cover { transform-origin: 57.3% 49.2%; transform: rotate(calc((1 - var(--s)) * 75deg)); will-change: transform; }
.pk-light { position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .55) 50%, transparent 65%) no-repeat;
  background-size: 60% 100%; background-position: calc(-60% + var(--l) * 220%) 0;
  -webkit-mask: url(cle-silhouette.webp) center / contain no-repeat; mask: url(cle-silhouette.webp) center / contain no-repeat;
  opacity: calc(var(--l) * (1 - var(--l)) * 4); mix-blend-mode: soft-light; }
.keywrap { width: min(58vw, 640px); }
@media (max-width: 720px) { .keywrap { width: 84vw; } }
/* photo key: a little smaller, and it makes room for the title at the end */
.keywrap { width: min(40vw, 480px); top: calc(49% - var(--t) * 8%); }
.photokey { transform: scale(calc(1 - var(--t) * .18)); transform-origin: 50% 40%; }
@media (max-width: 720px) { .keywrap { width: 74vw; top: calc(46% - var(--t) * 8%); } }
.keywrap { top: calc(49% - var(--t) * 13%); }
.photokey { transform: scale(calc(1 - var(--t) * .26)); }