/* sec-type · /security v5 (2026-10-04): painted typography (the user chose it after three misses: v2 wireframes "sloppy and very eleven
   labs like", v3 a ledger "doesn't [look] product like", v4 console screens "a security page ... can't have product screenshots").
   Cover-art on our own paintings (gen_silk sec-z1..3, sec-f1..3, smooth fields under the crisp grain tile): one huge light numeral or one
   word per surface, a short caption, nothing else. Prefix .sec-. The markup is the final frame; motion only replays it. */

/* ---- hero: three zero cards ---- */
body.elv .sec-zeros{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;width:100%;margin:64px 0 0;padding:0;list-style:none;text-align:left}
body.elv .sec-zero{position:relative;display:flex;flex-direction:column;justify-content:flex-end;aspect-ratio:16/10;padding:22px 24px 24px;border-radius:20px;overflow:hidden;
  --cl-size:cover;box-shadow:inset 0 0 0 1px rgba(255,255,255,.07)}
body.elv .sec-zn{font-size:104px;line-height:.84;font-weight:300;letter-spacing:-.05em;color:#fff;margin-left:-4px}
body.elv .sec-zl{margin-top:14px;font-size:19px;line-height:26px;font-weight:300;letter-spacing:-.01em;color:#fff}
body.elv .sec-zs{margin-top:4px;font-size:14px;line-height:21px;color:rgba(255,255,255,.7)}
.js .sec-zeros.is-play .sec-zero{animation:secRise .7s var(--ease) both}
.js .sec-zeros.is-play .sec-zero:nth-child(2){animation-delay:.12s}
.js .sec-zeros.is-play .sec-zero:nth-child(3){animation-delay:.24s}
@keyframes secRise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

/* ---- the three failures: one painted cover per failure, filling the stage ---- */
body.elv .cl-stage>[data-panel].sec-cover{place-items:stretch;--cl-size:cover}
body.elv .sec-cv{display:flex;flex-direction:column;justify-content:center;height:100%;padding:44px 48px;color:#fff}
body.elv .sec-cv-k{margin:0;font:500 11px/16px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.62)}
body.elv .sec-inj{position:relative;align-self:flex-start;margin:18px 0 0;font-size:22px;line-height:30px;font-weight:300;color:rgba(255,255,255,.72)}
body.elv .sec-inj::after{content:"";position:absolute;left:-2px;right:-2px;top:52%;height:1.5px;background:#fff;transform-origin:0 50%}
body.elv .sec-word{margin:18px 0 0;font-size:76px;line-height:1;font-weight:300;letter-spacing:-.045em;color:#fff}
body.elv .sec-cv-s{margin:20px 0 0;max-width:290px;font-size:15px;line-height:23px;color:rgba(255,255,255,.72)}
body.elv .sec-seal{display:grid;place-items:center;width:200px;height:200px;margin:18px 0 0;position:relative}
body.elv .sec-seal svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
body.elv .sec-seal .ring{fill:none;stroke:rgba(255,255,255,.85);stroke-width:1.2}
body.elv .sec-seal .ring2{fill:none;stroke:rgba(255,255,255,.35);stroke-width:1}
body.elv .sec-seal text{font:500 9.5px var(--mono);letter-spacing:.1em;fill:rgba(255,255,255,.75)}
body.elv .sec-seal b{font-size:40px;line-height:1;font-weight:300;letter-spacing:-.03em}
body.elv .sec-rec{margin:16px 0 0;font:400 12px/18px var(--mono);color:rgba(255,255,255,.7)}

/* replay when cl-many opens a cover */
body.elv .cl-many.is-run [data-panel].is-on .sec-inj::after{animation:secStrike .6s var(--ease) .5s both}
body.elv .cl-many.is-run [data-panel].is-on .sec-word{animation:secRise .6s var(--ease) 1.1s both}
body.elv .cl-many.is-run [data-panel].is-on .sec-w2{animation:secRise .7s var(--ease) .35s both}
body.elv .cl-many.is-run [data-panel].is-on .sec-seal .ring{stroke-dasharray:540;animation:secDraw 1.2s var(--ease) .3s both}
body.elv .cl-many.is-run [data-panel].is-on .sec-seal b,body.elv .cl-many.is-run [data-panel].is-on .sec-rec{animation:secRise .5s var(--ease) 1.3s both}
@keyframes secStrike{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes secDraw{from{stroke-dashoffset:540}to{stroke-dashoffset:0}}
@media (prefers-reduced-motion:reduce){.js .sec-zeros.is-play .sec-zero,body.elv .cl-many.is-run [data-panel].is-on *,body.elv .cl-many.is-run [data-panel].is-on *::after{animation:none!important}}

@media (max-width:1100px){body.elv .sec-zn{font-size:88px}}
@media (max-width:760px){
  body.elv .sec-zeros{grid-template-columns:minmax(0,1fr);gap:12px;margin-top:44px}
  body.elv .sec-zero{aspect-ratio:auto;min-height:190px}
  body.elv .sec-zn{font-size:80px}
  body.elv .sec-cv{padding:28px 24px}
  body.elv .sec-word{font-size:52px}
  body.elv .sec-inj{font-size:18px;line-height:26px}
  body.elv .sec-seal{width:150px;height:150px}
}

/* v6 (2026-10-04): the zero cards hold a live Hairline figure instead of a painted numeral (user: "Lets try to use the hairline
   illustration in the security page, instead of that 0,0 cards we have?"). Each card is the elevated dark surface; the figure's plates take
   the card colour, so they hide what is drawn behind them; the zero sits small and inline with its label (the v5 zeros were "a bit too big"). */
body.elv .sec-zeros--hl .sec-zero{aspect-ratio:auto;justify-content:flex-start;padding:8px 8px 24px;background:#262628;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 0 0 1px rgba(255,255,255,.05),0 30px 60px -30px rgba(0,0,0,.75)}
body.elv .sec-fig{--hairline-plate:#262628;--hairline-hi:#ffffff;--hairline-edge:rgba(255,255,255,.6);--hairline-mid:rgba(255,255,255,.3);--hairline-lo:rgba(255,255,255,.13);
  position:relative;width:100%;aspect-ratio:5/4;border-radius:14px;overflow:hidden}
body.elv .sec-fig>img{display:block;width:100%;height:auto}
body.elv .sec-ztx{display:flex;flex-direction:column;margin:0;padding:4px 18px 0}
body.elv .sec-zeros--hl .sec-zl{display:flex;align-items:baseline;gap:10px;margin-top:0;font-size:19px;line-height:26px}
body.elv .sec-zeros--hl .sec-zn{margin-left:0;font-size:40px;line-height:1;letter-spacing:-.04em}
body.elv .sec-zeros--hl .sec-zs{margin-top:6px}
@media (max-width:1100px){body.elv .sec-zeros--hl .sec-zn{font-size:34px}}
@media (max-width:760px){
  body.elv .sec-zeros--hl .sec-zero{min-height:0;padding:6px 6px 20px}
  body.elv .sec-ztx{padding:2px 14px 0}
}