/* Cade landing v3, the hero (2026-10-02, pass 5: the burst comes back, contained). Loaded after comic.css.
   Owner on pass 4: "e mai clean totusi acum ... dar nu imi plac shape-urile alea ... si erau mai mari lucrurile in dreapta".
   Earlier: /archive/landing-v3-splash1-2026-10-02/ (full-bleed explosion), /archive/landing-v3-clean-2026-10-02/ (duel plates).

   1 the grid: 12 columns. The copy takes 5, the product object takes 7 and bleeds a little into the right gutter
     (about 570px of card at 1440).
   2 the art: one painted burst (assets/art/hero-burst*), contained to the object's column, centred behind the object
     so the card sits at its heart. It never reaches the header band (top 96px stays dark) or the copy column: a
     wrapper (.hx-art) fades it out on its top, left and bottom edges, and the burst itself dissolves into a halftone
     mask (a solid core, then dots, then the ground). No plates behind the card any more.
   3 the object: the category tabs sit flush on the card's top edge, the card stands straight, the entries panel is
     attached to its right at the same height (under it below 1181px).
   4 the rival pair (their battle hexagon via CadeCategory.medallion, the kit's speech bubble) docked small on the
     object's top right corner. Never near the header.
   5 motion (splash.js): transform and opacity only, nothing changes a box. html.slam hides only what is about to land.
     The burst breathes very slowly (scale only); reduced motion and ?static hold it still.
   Shapes: their battle hexagon, their bubble polygon, plain rectangles, a painted image. Nothing drawn here by hand. */

/* ── the ground ───────────────────────────────────────────────────────────────────────────────── */
.lp main>.hero:first-child{padding-top:132px;padding-bottom:120px;isolation:isolate}
.hero>.w{z-index:1}
@media (min-width:1181px){.lp .hero>.w{max-width:1360px}}
.hx-ground{position:absolute;z-index:0;inset:0;pointer-events:none;overflow:hidden}
/* fine halftone, faded out before the header zone and before the next band */
.hx-ground::before{content:"";position:absolute;inset:0;background:radial-gradient(circle,rgba(240,234,217,.075) 1.1px,transparent 1.6px) 0 0/10px 10px;
  -webkit-mask:linear-gradient(180deg,transparent 0,transparent 100px,#000 260px,#000 72%,transparent 100%);mask:linear-gradient(180deg,transparent 0,transparent 100px,#000 260px,#000 72%,transparent 100%)}

/* ── the grid: 5 + 7 ──────────────────────────────────────────────────────────────────────────── */
.lp .hero .hgrid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;row-gap:56px;align-items:start}
.lp .hero .copy{grid-column:1/span 5;position:relative;z-index:2;min-width:0}
.lp .hero .hm{grid-column:6/-1;width:auto;max-width:none;justify-self:stretch;padding-top:56px;container-type:normal}
/* the bleed: 16px into the gutter at 1280, 56px at 1440 and wider (the object ends 24px from the screen edge at 1440) */
@media (min-width:1181px){.lp .hero .hm{margin-right:calc(-1 * clamp(16px, (100vw - 1280px) / 4 + 16px, 56px))}}

/* ── the art: the burst behind the object ─────────────────────────────────────────────────────── */
/* the wrapper spans the object's column from the header band (page y 96) to the hero's foot, from the column gap to
   past the screen edge (the hero clips it). Its mask fades the art out before each of those edges, so no edge shows */
.hx-art{--fx:-12px;--fr:220px;position:absolute;z-index:0;top:-36px;bottom:-120px;left:var(--fx);right:calc(var(--fr) * -1);pointer-events:none;overflow:hidden;
  -webkit-mask:linear-gradient(180deg,transparent 0,#000 84px),linear-gradient(0deg,transparent 0,#000 120px),linear-gradient(90deg,transparent 0,rgba(0,0,0,.35) 90px,#000 260px);
  -webkit-mask-composite:source-in,source-in;
  mask:linear-gradient(180deg,transparent 0,#000 84px),linear-gradient(0deg,transparent 0,#000 120px),linear-gradient(90deg,transparent 0,rgba(0,0,0,.35) 90px,#000 260px);
  mask-composite:intersect}
/* the burst: centred on the object (x: the column's middle; y: a little under the object's middle). The halftone
   dissolve: a solid core, ORed with a dot screen that only lives inside a wider ellipse */
.hx-burst{--bs:1700px;position:absolute;left:calc((100% - var(--fx) * -1 - var(--fr)) / 2 + var(--fx) * -1);top:calc(36px + 56px + 400px);width:var(--bs);height:var(--bs);margin:calc(var(--bs) / -2) 0 0 calc(var(--bs) / -2);
  display:block;animation:hxBreathe 11s ease-in-out infinite alternate;
  -webkit-mask:radial-gradient(closest-side,#000 56%,transparent 76%),radial-gradient(circle,#000 1.7px,transparent 2.5px) 0 0/7px 7px,radial-gradient(closest-side,#000 70%,transparent 97%);
  -webkit-mask-composite:source-over,source-in;
  mask:radial-gradient(closest-side,#000 56%,transparent 76%),radial-gradient(circle,#000 1.7px,transparent 2.5px) 0 0/7px 7px,radial-gradient(closest-side,#000 70%,transparent 97%);
  mask-composite:add,intersect}
.hx-burst img{display:block;width:100%;height:100%;object-fit:cover}
@keyframes hxBreathe{from{transform:scale(1)}to{transform:scale(1.035)}}
@media (prefers-reduced-motion:reduce){.hx-burst{animation:none}}
html.static .hx-burst{animation:none}

/* the copy as comic shout type. Each word owns a fixed line box; the slam moves it inside that box (transform only) */
.lp .hero h1{position:relative;margin-top:22px}
@media (min-width:761px){.lp .hero h1{font-size:clamp(70px,7.8vw,112px);line-height:.88}}
.lp .hero h1>span{display:block;width:fit-content;-webkit-text-stroke:4px #0B0B0B;paint-order:stroke fill;text-shadow:6px 6px 0 #000;transform-origin:0 85%}
.lp .hero h1 .o{color:var(--orange)}

/* ── the object ───────────────────────────────────────────────────────────────────────────────── */
.hx-obj{--ew:clamp(200px,16vw,232px);position:relative;z-index:1;
  display:grid;grid-template-columns:minmax(0,1fr) var(--ew);grid-template-rows:auto auto;align-items:stretch}
/* the tabs: the card's own tabs, flush on its top edge, over the card's width */
.lp .hx-obj .hm-tabs{position:relative;z-index:1;grid-row:1;grid-column:1;margin:0 0 -2px;gap:8px}
.lp .hx-obj .hm-tab{filter:none}
.lp .hx-obj .hm-tab b{border-bottom:0}
.lp .hm-tab:not([aria-selected=true]) b{background:#0E0D0C}

/* the card + the entries: one body */
.lp .hx-obj .hm-card{position:relative;z-index:2;grid-row:2;grid-column:1;min-width:0;container-type:inline-size}
.lp .hx-obj .ent{position:relative;z-index:1;grid-row:2;grid-column:2;margin:0;display:flex;flex-direction:column;min-width:0;padding:46px 12px 14px 14px;
  background:#0E0D0C;border:2px solid #0B0B0B;border-left:0;outline:0;box-shadow:8px 8px 0 #000}
.lp .hx-obj .ent-l{flex:none}
.lp .hx-obj .ent-f{margin-top:auto;padding-top:12px}
@media (min-width:1181px){.lp .hx-obj .ent{--step:clamp(54px,4.3vw,62px);padding-top:50px}.lp .hx-obj .ent-r{height:calc(var(--step) - 8px)}
  .lp .hx-obj .ent-n{font-size:clamp(17px,1.35vw,19px)}.lp .hx-obj .ent-a{font-size:14px}.lp .hx-obj .ent-pot b{font-size:clamp(30px,2.5vw,36px)}}

/* the note under the object */
.lp .hero .hm-cap{position:relative;z-index:1;justify-self:start;width:fit-content;max-width:none;margin:26px 0 0;padding:7px 10px 6px;background:#0E0D0C;border:0;box-shadow:none}

/* ── the pair, docked on the object's top right corner ─────────────────────────────────────────── */
.duo{position:absolute;z-index:4;right:-6px;top:-40px;width:calc(var(--ew) + 24px);height:96px;margin:0;pointer-events:none}
.hch{position:absolute;bottom:0;width:84px;aspect-ratio:232/234}
.hch.a{left:4px}
.hch.b{right:0}
.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(-2px) rotate(-1.5deg)}to{transform:translateY(3px) rotate(1.5deg)}}
.ch-k{position:absolute;z-index:2;left:50%;bottom:-8px;transform:translateX(-50%) rotate(-3deg);padding:3px 8px 2px;border:2px solid #0B0B0B;box-shadow:2px 2px 0 #000;
  font-family:var(--shout);font-style:italic;font-weight:800;font-size:13px;line-height:1;letter-spacing:.06em;text-transform:uppercase;color:#0B0B0B;background:var(--yes);white-space:nowrap}
.hch.b .ch-k{background:var(--no);color:#fff;text-shadow:1px 1px 0 #000;transform:translateX(-50%) rotate(3deg)}
.duo-vs{position:absolute;z-index:3;left:50%;top:56%;transform:translate(-50%,-50%) rotate(-6deg);margin:0;
  font-family:var(--shout);font-style:italic;font-weight:900;font-size:36px;line-height:1;color:#FAF424;-webkit-text-stroke:2.5px #0B0B0B;paint-order:stroke fill;text-shadow:3px 3px 0 #000}
.duo .cm-tag{--cm-fs:15px;bottom:calc(100% - 4px);padding:.28em .55em .5em;z-index:5;white-space:nowrap}
.duo .hch.a .cm-tag{left:40%}
.duo .hch.b .cm-tag{left:58%}
.duo .cm-tag[data-tone=cream]{--cm-face:#EFE9D8}
.hch.swap .ch-p{animation:chIn 340ms cubic-bezier(.34,1.56,.64,1) both,chBob 4.6s ease-in-out 340ms infinite alternate}
@keyframes chIn{from{opacity:0;transform:scale(.4) rotate(-14deg)}}

/* ── the opening: what waits for its beat (only while html.slam; splash.js lifts it, 2.4s at most). Opacity only ── */
html.slam .hero h1>span,html.slam .hx-obj,html.slam .hch,html.slam .duo-vs,html.slam .hx-art{opacity:0}
.sp-wait{opacity:0}
@media (prefers-reduced-motion:reduce){.ch-p,.hch.swap .ch-p{animation:none}}
html.static .ch-p,html.static .hch.swap .ch-p{animation:none}

/* ── responsive ───────────────────────────────────────────────────────────────────────────────── */
/* 1180 and under: the entries go under the chart, attached to the card's foot; the pair docks above the tabs */
@media (max-width:1180px){
  .lp .hero .hm{padding-top:96px}
  .hx-obj{grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto auto}
  .lp .hx-obj .ent{grid-row:3;grid-column:1;margin-top:-2px;padding:14px 14px 12px;border-left:2px solid #0B0B0B;border-top:0}
  .duo{top:auto;bottom:calc(100% + 10px);right:-6px;width:230px}
  /* the object is taller here (the entries under the card): the burst centres lower */
  .hx-burst{top:calc(36px + 96px + 560px)}
}
@media (max-width:1180px) and (min-width:961px){
  /* the copy column is narrow here: the email field takes the line, the button goes under it */
  .lp .hsign .brow{flex-wrap:wrap;gap:14px}
  .lp .hsign .bfield{flex:1 1 100%}
}
/* one column (a tablet): the copy, then the object */
@media (max-width:959px){
  .lp .hero .hgrid{grid-template-columns:minmax(0,1fr);row-gap:24px}
  /* the copy sits above the object here: the art starts inside the object's own top padding */
  .hx-art{top:28px}
  .lp .hero .copy,.lp .hero .hm{grid-column:1/-1}
  .lp .hero .hm{max-width:620px}
}
@media (max-width:760px){
  .lp main>.hero:first-child{padding-top:96px;padding-bottom:56px}
  .lp .hero h1{margin-top:18px}
  .lp .hero h1>span{-webkit-text-stroke:3px #0B0B0B;text-shadow:4px 4px 0 #000}
  .lp .hero .hm{padding-top:92px}
  .hx-art{--fx:-18px;--fr:18px;top:28px;bottom:-56px;
    -webkit-mask:linear-gradient(180deg,transparent 0,#000 110px),linear-gradient(0deg,transparent 0,#000 120px);-webkit-mask-composite:source-in;
    mask:linear-gradient(180deg,transparent 0,#000 110px),linear-gradient(0deg,transparent 0,#000 120px);mask-composite:intersect}
  .hx-burst{--bs:860px;top:calc(-28px + 92px + 290px)}
  .lp .hx-obj .hm-tabs{gap:6px}
  .lp .hx-obj .ent{box-shadow:5px 5px 0 #000;padding:12px 10px 10px}
  .duo{right:-4px;width:172px;height:70px;bottom:calc(100% + 6px)}
  .hch{width:62px}
  .ch-k{font-size:11px;padding:3px 6px 2px;bottom:-6px}
  .duo-vs{font-size:26px;-webkit-text-stroke:2px #0B0B0B}
  .duo .cm-tag{--cm-fs:13px}
  .lp .hero .hm-cap{margin:22px 0 0}
}
@media (max-width:374px){
  .duo{width:150px}
  .hch{width:56px}
}

/* ══ 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}
}
html.static .ospin,html.static .fr i{animation:none}