/* Cade landing v3, the splash page pass (2026-10-02, third pass). Loaded after comic.css.
   Owner: "Hero ajustat, mai bine ... incearca motion, incearca wownesss ... inca suntem departe cu prima sectiune".
   Scotty: "a bit better backgrounds and graphics perhaps, more 'comic book' feel like the original site".
   Earlier: /archive/landing-v3-comic2-2026-10-02/ (the framed panel hero).

   1 the hero is a comic SPLASH PAGE: no framed box any more; one painted explosion (hero-splash, generated 2026-10-02 in
     their palette) runs full bleed under the header, its core behind the card, the left kept ink for the copy.
   2 the card lands as a comic panel on a tilted paper plate (a plain rectangle, a hard shadow); the card itself stays
     straight, so nothing interactive is rotated.
   3 the duo: the two sides' characters in their battle hexagon (CadeCategory.medallion, their CoinMedallion port) with
     the kit's speech bubble (CadeMotion.tag, their buttonTime polygon). One pair per category: helmets (sports),
     bull vs bear (stocks), DOGE vs PEPE (memecoins). They sit over the entries on a desktop, over the card below 1180.
   4 the opening sequence lives in splash.js; html.slam hides only what is about to slam in (max 3.2s, any input ends it).
   Shapes: their battle hexagon, their bubble polygon, their starburst, plain rectangles. Nothing drawn here by hand. */

/* ── 1 the splash ─────────────────────────────────────────────────────────────────────────────── */
.lp main>.hero:first-child{padding-top:150px;padding-bottom:110px;isolation:isolate}
.hsplash{position:absolute;z-index:0;inset:0;pointer-events:none;overflow:hidden}
.hsp-art{position:absolute;inset:0}
.hsp-art picture,.hsp-art img{position:absolute;inset:0;display:block;width:100%;height:100%}
.hsp-art img{object-fit:cover;object-position:68% 46%;transform-origin:70% 46%}
/* the copy's ground: solid ink under the words, the explosion takes over from the card's left edge */
.hsp-shade{position:absolute;inset:0;
  background:linear-gradient(90deg,#0E0D0C 0,#0E0D0C calc(50% - 300px),rgba(14,13,12,.82) calc(50% - 190px),rgba(14,13,12,0) calc(50% - 40px)),
    linear-gradient(180deg,rgba(14,13,12,.8) 0,rgba(14,13,12,.35) 80px,rgba(14,13,12,0) 160px)}
/* the foot: the explosion goes out in halftone into the page (no hairline, no box) */
.hsp-foot{position:absolute;left:0;right:0;bottom:0;height:220px;
  background:radial-gradient(circle,#0E0D0C 2.4px,transparent 2.9px) 0 0/9px 9px,linear-gradient(180deg,rgba(14,13,12,0) 0,rgba(14,13,12,.6) 55%,#0E0D0C 100%);
  -webkit-mask:linear-gradient(180deg,transparent 0,#000 45%);mask:linear-gradient(180deg,transparent 0,#000 45%)}
.hsplash .hcoin{z-index:1}
/* the breath: the explosion swells very slowly (transform only) */
.hsp-art img{animation:spBreathe 14s ease-in-out infinite alternate}
@keyframes spBreathe{from{transform:scale(1)}to{transform:scale(1.05) rotate(.5deg)}}

/* ── the copy, as comic shout type ────────────────────────────────────────────────────────────── */
.lp .hero h1{position:relative}
@media (min-width:761px){.lp .hero h1{font-size:clamp(70px,7.8vw,118px)}}
.lp .hero h1>span{position:relative;display:block;width:fit-content;-webkit-text-stroke:4px #0B0B0B;paint-order:stroke fill;text-shadow:6px 6px 0 #000}
.lp .hero h1 .o{color:var(--orange)}
.lp .hero .copy{position:relative;z-index:2}
/* the streaks a slammed word leaves behind (splash.js) */
.sp-streak{position:absolute;z-index:3;height:4px;border-radius:2px;background:#EFE9D8;pointer-events:none;transform-origin:100% 50%}
.sp-streak.o{background:var(--orange)}

/* ── 2 the card as a comic panel ──────────────────────────────────────────────────────────────── */
.lp .hm-card{position:relative;isolation:isolate}
/* the paper plate under the panel: a plain rectangle, tilted, ink keyline, one hard shadow */
.hm-back{position:absolute;z-index:-1;left:-24px;right:-16px;top:50px;bottom:-22px;background:#EFE9D8;border:3px solid #0B0B0B;box-shadow:10px 10px 0 #000;
  transform:rotate(-2.2deg);transform-origin:50% 60%;pointer-events:none}
.hm-back::after{content:"";position:absolute;inset:0;background:radial-gradient(circle,rgba(11,11,11,.16) 1.4px,transparent 1.9px) 0 0/8px 8px}
/* the impact: their starburst behind the panel, only at the landing (splash.js) */
.sp-impact{position:absolute;z-index:-2;left:50%;top:55%;width:150%;aspect-ratio:1.2;pointer-events:none;background:#FAF424;opacity:0;
  clip-path:polygon(76.96% 15.82%,68.58% 0.65%,57.99% 18.01%,48.92% 0%,39.78% 21.01%,33.76% 5.83%,25.42% 21.43%,4.99% 17.72%,12.17% 38.54%,0% 51.54%,10.43% 61.88%,4.58% 76.64%,22.61% 80.52%,31% 100%,41.48% 83.43%,47.48% 99.65%,55.78% 81.8%,65.96% 97.17%,73.75% 78.49%,92.45% 84.33%,85.47% 67.52%,99.18% 65.05%,91.2% 53.02%,100% 37.99%,84.74% 30.57%,91.29% 13.45%);
  transform:translate(-50%,-50%)}
.lp .hm-tabs{position:relative;z-index:1}

/* ── 3 the duo ────────────────────────────────────────────────────────────────────────────────── */
.lp .hm-row{grid-template-columns:minmax(0,480px) 238px;grid-template-areas:"card duo" "card ent";grid-template-rows:auto 1fr;row-gap:0}
.lp .hm-card{grid-area:card}
.lp .ent{grid-area:ent;align-self:start}
.duo{grid-area:duo;position:relative;height:214px;margin:-30px -74px 0 -14px;pointer-events:none}
.hch{position:absolute;bottom:4px;width:158px;aspect-ratio:232/234}
.hch.a{left:0}
.hch.b{right:0;bottom:30px}
.ch-p{position:absolute;inset:0;display:block;animation:chBob 4.6s ease-in-out infinite alternate}
.hch.b .ch-p{animation-duration:5.4s;animation-delay:-2s}
.ch-p svg{display:block;width:100%;height:auto;overflow:visible}
@keyframes chBob{from{transform:translateY(-3px) rotate(-1.5deg)}to{transform:translateY(4px) rotate(1.5deg)}}
/* the side under each character: the label voice on the pick colour (word + colour, never colour alone) */
.ch-k{position:absolute;z-index:2;left:50%;bottom:-6px;transform:translateX(-50%) rotate(-3deg);padding:4px 10px 3px;border:2px solid #0B0B0B;box-shadow:3px 3px 0 #000;
  font-family:var(--shout);font-style:italic;font-weight:800;font-size:16px;line-height:1;letter-spacing:.06em;text-transform:uppercase;color:#0B0B0B;background:var(--yes)}
.hch.b .ch-k{background:var(--no);color:#fff;text-shadow:1.5px 1.5px 0 #000;transform:translateX(-50%) rotate(3deg)}
.duo-vs{position:absolute;z-index:3;left:50%;top:58%;transform:translate(-50%,-50%) rotate(-6deg);margin:0;
  font-family:var(--shout);font-style:italic;font-weight:900;font-size:54px;line-height:1;color:#FAF424;-webkit-text-stroke:3px #0B0B0B;paint-order:stroke fill;text-shadow:4px 4px 0 #000}
/* the speech bubble: the kit's tag, bigger, above its character */
.duo .cm-tag{--cm-fs:19px;bottom:calc(100% - 8px);padding:.3em .62em .55em;z-index:4}
.duo .hch.a .cm-tag{left:42%}
.duo .hch.b .cm-tag{left:60%}
.duo .cm-tag[data-tone=cream]{--cm-face:#EFE9D8}
/* a character swap on a tab change */
.hch.swap .ch-p{animation:chIn 380ms cubic-bezier(.34,1.56,.64,1) both,chBob 4.6s ease-in-out 380ms infinite alternate}
@keyframes chIn{from{opacity:0;transform:scale(.4) rotate(-14deg)}}
/* the chips that arc into the sides at the end of the opening (splash.js) */
.sp-chip{position:fixed;z-index:30;left:0;top:0;width:24px;height:24px;margin:-12px 0 0 -12px;pointer-events:none}
.sp-chip>b{position:absolute;inset:0;border-radius:50%;background:#FFA800;border:2px solid #0B0B0B;box-shadow:inset 0 0 0 3px #FAF424,2px 2px 0 #0B0B0B}
.sp-chip.n>b{background:#EA2A46;box-shadow:inset 0 0 0 3px #F0EAD9,2px 2px 0 #0B0B0B}

/* ── 4 the opening: what waits for its beat (only while html.slam; splash.js lifts it, 3.2s at most) ── */
html.slam .hero h1>span,html.slam .hm-card,html.slam .hch,html.slam .duo-vs,html.slam .lp .ent{opacity:0}
html.slam .lp .ent{opacity:0}

@media (prefers-reduced-motion:reduce){.hsp-art img,.ch-p,.hch.swap .ch-p{animation:none}}
html.static .hsp-art img,html.static .ch-p,html.static .hch.swap .ch-p{animation:none}

/* ── responsive ───────────────────────────────────────────────────────────────────────────────── */
/* 1180 and under: the entries go under the card (landing.css), the duo goes over it as one row */
@media (max-width:1180px){
  .lp .hm-row{grid-template-columns:minmax(0,1fr);grid-template-areas:"duo" "card" "ent";grid-template-rows:auto}
  .duo{height:150px;margin:0 0 6px}
  .hch{width:112px}
  .hch.a{left:6%}.hch.b{right:6%;bottom:8px}
  .hsp-shade{background:linear-gradient(90deg,#0E0D0C 0,#0E0D0C 36%,rgba(14,13,12,.8) 44%,rgba(14,13,12,0) 56%),linear-gradient(180deg,rgba(14,13,12,.55) 0,rgba(14,13,12,0) 150px)}
}
/* one column (a tablet): the copy runs full width over ink, the explosion sits behind the card below it */
@media (max-width:959px) and (min-width:761px){
  .hsp-art{top:auto;height:70%}
  .hsp-art img{object-position:66% 50%}
  .hsp-shade{background:linear-gradient(180deg,#0E0D0C 0,#0E0D0C 32%,rgba(14,13,12,.4) 40%,rgba(14,13,12,0) 48%)}
  .hsplash .hcoin{display:none}
}
@media (max-width:760px){
  .lp main>.hero:first-child{padding-top:96px;padding-bottom:64px}
  /* a phone: the explosion twice from one file. At the top it bursts behind the headline's tickets (the words keep the
     ink on the left); lower down it runs behind the duo and the card */
  .hsp-art{top:auto;height:58%;-webkit-mask:linear-gradient(180deg,transparent 0,#000 14%);mask:linear-gradient(180deg,transparent 0,#000 14%)}
  .hsp-art img{object-position:50% 40%}
  .hsplash::before{content:"";position:absolute;left:0;right:0;top:0;height:350px;background:url(/archive/landing-v3-splash1-2026-10-02/assets/art/hero-splash-sm.webp) 22% 46%/auto 150% no-repeat;
    -webkit-mask:linear-gradient(180deg,#000 0,#000 66%,transparent 96%);mask:linear-gradient(180deg,#000 0,#000 66%,transparent 96%)}
  .hsp-shade{background:linear-gradient(90deg,#0E0D0C 0,rgba(14,13,12,.94) 38%,rgba(14,13,12,.35) 70%,rgba(14,13,12,.2) 100%) 0 0/100% 350px no-repeat,
    linear-gradient(180deg,rgba(14,13,12,.8) 0,rgba(14,13,12,0) 90px,rgba(14,13,12,0) 240px,#0E0D0C 340px,#0E0D0C 42%,rgba(14,13,12,.25) 54%,rgba(14,13,12,.45) 100%)}
  .hsp-foot{height:120px}
  .hsplash .hcoin{display:none}
  .lp .hero h1>span{-webkit-text-stroke:3px #0B0B0B;text-shadow:4px 4px 0 #000}
  .duo{height:118px;margin:2px 0 4px}
  .hch{width:84px}
  .hch.a{left:2px}.hch.b{right:2px;bottom:4px}
  .ch-k{font-size:13px;padding:3px 8px 2px}
  .duo-vs{font-size:34px;top:62%}
  .duo .cm-tag{--cm-fs:14px}
  .hm-back{left:-8px;right:-6px;top:46px;bottom:-10px;box-shadow:6px 6px 0 #000;transform:rotate(-1.6deg)}
}
@media (max-width:374px){
  .hch{width:74px}
  .duo{height:108px}
  .duo .cm-tag{--cm-fs:13px}
}
.sp-wait{opacity:0}

/* ══ the rest of the page, lifted in the same spirit ═════════════════════════════════════════════ */
/* ── crew: the friends are characters (their battle hexagon carrying a painted avatar), a handle tag under each;
      a fee coin travels to YOU and YOU answers with the kit's bubble (splash.js) ── */
.crew .orbit{max-width:420px}
.crew .fr{width:25cqw;height:25cqw;margin:-12.5cqw 0 0 -12.5cqw;filter:none}
.crew .fr i::before,.crew .fr i::after{display:none}
.crew .fr i{display:block;font-size:0}
.frp{position:absolute;inset:0;display:block}
.frp svg{display:block;width:100%;height:auto;overflow:visible}
.frh{position:absolute;left:50%;bottom:-4%;transform:translateX(-50%) rotate(-3deg);padding:3px 7px 2px;background:#EFE9D8;border:2px solid #0B0B0B;box-shadow:2px 2px 0 #000;
  font-family:var(--data);font-style:normal;font-weight:800;font-size:11px;line-height:1;color:#0B0B0B;white-space:nowrap}
.crew .fr.send .frh{background:var(--yellow)}
.crew .oyou{z-index:4}
.oyou .cm-tag{--cm-fs:15px;z-index:6}

/* ── numbers: the count lands with a stamp (splash.js): the burst pops, the figure knocks, rings go out ── */
.nfig>div{--pop:1}
.nfig .cm-ring{border-width:3px}

/* ── how it works: each step opens with a comic narration box and a character who reacts when the step plays ── */
.cpanel{--kap-tilt:-2deg}
.kap{position:absolute;z-index:4;left:-6px;top:-30px;margin:0;padding:5px 10px 4px;background:var(--yellow);border:2px solid #0B0B0B;box-shadow:3px 3px 0 #000;transform:rotate(var(--kap-tilt));
  font-family:var(--shout);font-style:italic;font-weight:800;font-size:14px;line-height:1;letter-spacing:.08em;text-transform:uppercase;color:#0B0B0B;pointer-events:none}
.cpanel:nth-child(2) .kap{--kap-tilt:1.5deg;background:#EFE9D8}
.cpanel:nth-child(3) .kap{--kap-tilt:-1deg;background:var(--orange)}
.react{position:absolute;z-index:4;right:2px;top:-18px;width:76px;aspect-ratio:232/234;pointer-events:none}
.react>span{display:block;animation:chBob 5s ease-in-out infinite alternate}
.cpanel:nth-child(2) .react>span{animation-delay:-1.6s}.cpanel:nth-child(3) .react>span{animation-delay:-3.2s}
.react svg{display:block;width:100%;height:auto;overflow:visible}
.react .cm-tag{--cm-fs:14px;left:20%}
.strip{padding-top:30px}
@media (prefers-reduced-motion:reduce){.react>span{animation:none}}
html.static .react>span{animation:none}

/* ── compare: a comic VERSUS. Our column is stamped CADE on their starburst; a VS slams on the seam ── */
.lp .ctag{left:auto;right:-46px;top:-78px;width:168px;height:126px;padding:0;display:grid;place-items:center;background:none;clip-path:none;
  transform:rotate(-8deg);filter:drop-shadow(5px 5px 0 #000);z-index:3}
.lp .ctag::before{content:"";position:absolute;inset:0;background:var(--yellow);clip-path:var(--clip-burst)}
.lp .ctag::after{content:"";position:absolute;inset:6px;background:var(--orange);clip-path:var(--clip-burst)}
.lp .ctag img{position:relative;z-index:1;height:38px;width:auto}
.cvsb{position:absolute;z-index:3;top:-58px;left:calc(220px + (100% - 220px)*2/3);transform:translate(-50%,0) rotate(-8deg);margin:0;pointer-events:none;
  font-family:var(--shout);font-style:italic;font-weight:900;font-size:64px;line-height:1;color:#FAF424;-webkit-text-stroke:3px #0B0B0B;paint-order:stroke fill;text-shadow:5px 5px 0 #000}
@media (max-width:760px){
  .cvsb{display:none}
  .cvs-k{font-family:var(--shout)!important;font-style:italic;font-weight:900!important;font-size:24px!important;letter-spacing:.02em!important;color:var(--yellow)!important;text-shadow:2px 2px 0 #000}
  .kap{font-size:13px;top:-26px}
  .react{width:64px;top:-14px;right:44px}
}
@media (max-width:1180px) and (min-width:960px){.lp .hgrid{align-items:start}.lp .hero .copy{padding-top:40px}}
html.static .ospin,html.static .fr i{animation:none}