/* Cade landing v3, the hero (2026-10-02, pass 4: one composed object). Loaded after comic.css.
   Owner: "inca arata rau heroul si imaginea din spate. Cardul, chartul cum e pus ... un bounce aiurea la text".
   Earlier: /archive/landing-v3-splash1-2026-10-02/ (the full-bleed painted explosion and the tilted paper plate).

   As their homepage hero: a CALM dark ground (fine halftone, a soft glow, nothing under the header) and the comic art
   kept INSIDE a contained plate.
   1 the grid: 12 columns. The copy takes 5, the product object takes 7.
   2 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 (under it below 1181px). Behind it: their duel plates (hero-plate-orange / violet.svg, the
     CadeLandingCoinPlate art) as ONE contained plate, ink outline, one hard shadow, peeking out around the card.
   3 the rival pair (their battle hexagon via CadeCategory.medallion, the kit's speech bubble) docked on the plate's
     top right corner. Never near the header.
   4 motion (splash.js): transform and opacity only, nothing changes a box. html.slam hides only what is about to land.
   Shapes: their duel plates, their battle hexagon, their bubble polygon, plain rectangles. Nothing drawn here by hand. */

/* ── the ground ───────────────────────────────────────────────────────────────────────────────── */
.lp main>.hero:first-child{padding-top:132px;padding-bottom:84px;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;
  background:radial-gradient(ellipse 30% 40% at 66% 58%,rgba(255,168,0,.12),transparent 72%),radial-gradient(ellipse 26% 36% at 84% 66%,rgba(150,82,239,.13),transparent 72%)}
/* 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:100%;max-width:none;justify-self:stretch;padding-top:56px;container-type:normal}

/* 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:214px;--pl:28px;--pr:30px;--pt:30px;--pb:34px;position:relative;margin-left:var(--pl);
  display:grid;grid-template-columns:minmax(0,1fr) var(--ew);grid-template-rows:auto auto;align-items:stretch}
/* the plate: their two duel plates side by side, as one contained comic panel behind the card */
/* a grid item over the tabs and the card (and the entries beside them), grown past them by the peek */
.hx-plate{position:relative;z-index:0;grid-row:1/3;grid-column:1/-1;margin:calc(var(--pt) * -1) calc(var(--pr) * -1) calc(var(--pb) * -1) calc(var(--pl) * -1);pointer-events:none;
  filter:drop-shadow(8px 8px 0 #000)}
.hx-plate i{position:absolute;top:0;height:100%;background:center/100% 100% no-repeat}
.hx-plate .o{left:0;width:46.455%;background-image:url(/ds/assets/landing/hero-plate-orange.svg)}
.hx-plate .v{left:46.887%;width:53.113%;background-image:url(/ds/assets/landing/hero-plate-violet.svg)}

/* 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:54px}.lp .hx-obj .ent-r{height:46px}}

/* the note under the object, clear of the plate */
.lp .hero .hm-cap{justify-self:start;width:auto;max-width:none;margin:calc(var(--pb, 34px) + 20px) 0 0 28px;padding:0;background:none;border:0;box-shadow:none}

/* ── the pair, docked on the plate's top right corner ─────────────────────────────────────────── */
.duo{position:absolute;z-index:4;right:-10px;top:-38px;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{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}
  .hx-plate{grid-row:1/3}
  .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% + 2px);right:-6px;width:230px}
}
@media (max-width:1180px) and (min-width:961px){
  .hx-obj{--pr:20px}
  /* 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}
  .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-obj{--pl:10px;--pr:10px;--pt:14px;--pb:16px;margin-left:0}
  .hx-plate{filter:drop-shadow(5px 5px 0 #000)}
  .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:calc(16px + 16px) 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}