/* ==========================================================================
   Skanimalz — home page
   Depends on skz.css for tokens and shared components.
   ========================================================================== */

/* Grid items must be allowed to shrink below their min-content width, or a
   single wide child stretches the whole column past a narrow viewport. */
.hero-grid > *, .get-grid > *, .hatch-grid > *, .fusion-grid > *,
.arena > *, .facts > *, .finds-rail > *, .matchups > *{ min-width:0; }

/* --------------------------------------------------------------- 1. HERO */
.hero{ padding-block:clamp(28px, 6vw, 60px) clamp(40px, 7vw, 76px); position:relative; overflow:hidden; }
.hero::before{
  content:""; position:absolute; inset:-30% -10% auto -10%; height:520px; pointer-events:none;
  background:
    radial-gradient(46% 60% at 22% 0%, rgba(41,214,255,.16), transparent 70%),
    radial-gradient(40% 55% at 82% 12%, rgba(155,63,255,.16), transparent 70%);
}
.hero .shell{ position:relative; }
.hero-grid{ display:grid; gap:clamp(26px, 5vw, 48px); }
@media (min-width:900px){ .hero-grid{ grid-template-columns:1fr 1.02fr; align-items:center; } }
/* Capped and centred on desktop. At full 1104px width the banner stood 461px
   tall and pushed the headline and buttons past the fold on a 900px screen —
   the key art was winning the hero at the cost of the thing it is there to
   sell. 820px keeps it commanding without taking the whole first screen. */
.hero-banner{ margin-bottom:clamp(6px, 2vw, 14px); }
@media (min-width:600px) and (max-width:899px){
  /* Tablets get the phone crop but not at full width — 712x512 filled most of
     the screen before the pitch had said anything. */
  .hero-banner{ max-width:520px; margin-inline:auto; }
}
@media (min-width:900px){
  .hero-banner{ max-width:820px; margin-inline:auto; }
}

/* The key art. It replaces the oversized logo lockup that used to sit here —
   that just repeated the header wordmark at ten times the size and pushed the
   actual pitch below the fold.

   The art is served in two different crops (see the <picture> in index.html):
   a tight 1.39:1 on phones and the full 2.4:1 banner on wide screens. A single
   2.4:1 image on a 390px phone renders about 163px tall, which turns every
   creature into a speck and makes the baked-in lettering unreadable. */
.hero-art{
  width:100%; height:auto; display:block;
  border-radius:var(--r-lg); overflow:hidden;
  margin-bottom:clamp(16px, 3.5vw, 24px);
  border:1px solid var(--edge);
  box-shadow:0 22px 60px -34px rgba(41,214,255,.55);
}
@media (min-width:900px){
  /* On desktop the banner spans the full hero width, above the two columns. */
  .hero-art{ margin-bottom:clamp(24px, 3vw, 38px); }
}

.hero h1{ margin-bottom:16px; }
.hero h1 .hl{
  background:linear-gradient(100deg, var(--volt) 5%, var(--surge) 95%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero-sub{ color:var(--ink-2); font-size:clamp(1rem, 2.9vw, 1.16rem); max-width:46ch; margin-bottom:22px; }
.hero .btn-row{ margin-bottom:22px; }

/* Stat strip — three facts, no animated counters */
.facts{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--edge); border:1px solid var(--edge); border-radius:var(--r); overflow:hidden; }
.fact{ background:var(--panel); padding:13px 12px; }
.fact b{ display:block; overflow-wrap:anywhere; font-family:var(--display); font-size:clamp(1.15rem,4.4vw,1.5rem); line-height:1.1; }
.fact span{ font-family:var(--mono); font-size:9.5px; letter-spacing:.13em; text-transform:uppercase; color:var(--ink-3); }

/* ------------------------------------------------------- 2. THE SCANNER */
.scanner{ width:100%; }
.reticle{
  position:relative; border-radius:var(--r-lg); overflow:hidden;
  background:linear-gradient(170deg, #0C0B18, #08070F 65%);
  border:1px solid var(--edge-2);
  box-shadow:0 30px 70px -40px rgba(41,214,255,.5), inset 0 1px 0 rgba(255,255,255,.05);
}
/* Corner brackets — a camera viewfinder, not a decorative frame */
.reticle::before,.reticle::after{
  content:""; position:absolute; width:34px; height:34px; pointer-events:none; z-index:4;
  border:2px solid var(--volt); opacity:.8;
}
.reticle::before{ top:12px; left:12px; border-right:0; border-bottom:0; border-radius:8px 0 0 0; }
.reticle::after{ bottom:12px; right:12px; border-left:0; border-top:0; border-radius:0 0 8px 0; }

.stage{
  position:relative; aspect-ratio:1/1; max-height:66vh; display:grid; place-items:center;
  padding:34px 26px;
}
@media (min-width:900px){ .stage{ aspect-ratio:4/3.4; } }

/* The barcode itself, drawn as real EAN-13 module bars from what you type */
.code-plate{
  width:min(300px, 82%); display:flex; flex-direction:column; align-items:center; gap:11px;
  transition:opacity .3s ease, transform .45s cubic-bezier(.3,.7,.2,1);
}
.code-plate svg{ width:100%; height:auto; }
.code-digits{ font-family:var(--mono); font-size:13px; letter-spacing:.24em; color:var(--ink-2); }
.stage.is-revealed .code-plate{ opacity:0; transform:scale(.9); }

.readout{
  position:absolute; left:0; right:0; bottom:16px; text-align:center; z-index:3;
  font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--volt);
  min-height:16px;
}

/* Creature reveal */
.catch{
  position:absolute; inset:0; display:grid; place-items:center; align-content:center; gap:2px;
  opacity:0; transform:scale(.82); pointer-events:none;
  transition:opacity .34s ease, transform .5s cubic-bezier(.2,.9,.25,1.1);
  padding:26px 20px 54px;
}
.stage.is-revealed .catch{ opacity:1; transform:none; }
.catch img{ width:min(230px, 62%); height:auto; filter:drop-shadow(0 0 26px var(--cc, var(--volt))); }
.catch-name{ font-family:var(--display); font-weight:800; font-size:clamp(1.35rem,5vw,1.9rem); margin-top:6px; }
.catch-tier{ font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--cc, var(--volt)); }

/* Sweep beam */
.sweep{
  position:absolute; left:0; right:0; top:0; height:3px; z-index:5; opacity:0;
  background:linear-gradient(90deg, transparent, var(--volt) 15%, #fff 50%, var(--volt) 85%, transparent);
  box-shadow:0 0 24px 5px rgba(41,214,255,.7);
}
.stage.is-busy .sweep{ animation:sweepRun 1.05s cubic-bezier(.5,0,.5,1) 1; }
@keyframes sweepRun{
  0%{ opacity:0; top:0; } 8%{ opacity:1; } 92%{ opacity:1; } 100%{ opacity:0; top:100%; }
}
.flashbulb{
  position:absolute; inset:0; z-index:6; background:#fff; opacity:0; pointer-events:none;
  transition:opacity .45s ease;
}
.flashbulb.pop{ opacity:.75; transition:opacity .06s ease; }

/* Scan controls */
.scan-controls{ display:flex; gap:9px; margin-top:14px; }
.scan-controls input{
  flex:1; min-width:0; min-height:50px; padding:0 16px; border-radius:14px;
  background:var(--panel); border:1px solid var(--edge-2); color:var(--ink);
  font-family:var(--mono); font-size:15px; letter-spacing:.08em;
}
.scan-controls input::placeholder{ color:var(--ink-3); letter-spacing:.08em; }
.scan-controls input:focus{ border-color:var(--volt); outline:none; box-shadow:0 0 0 3px rgba(41,214,255,.16); }
.scan-foot{ font-family:var(--mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); margin-top:11px; text-align:center; }

@media (prefers-reduced-motion: reduce){
  .sweep{ animation:none !important; }
  .catch,.code-plate{ transition:none; }
}

/* ------------------------------------------------- 3. HOW IT WORKS */
.step{
  background:var(--panel); border:1px solid var(--edge); border-radius:var(--r-lg);
  padding:20px 18px 22px; height:100%; position:relative; overflow:hidden;
}
.step::after{
  content:""; position:absolute; left:0; right:0; top:0; height:2px;
  background:linear-gradient(90deg, var(--sc, var(--volt)), transparent);
}
.step-n{
  font-family:var(--mono); font-size:11px; letter-spacing:.2em; color:var(--sc, var(--volt));
  display:block; margin-bottom:12px;
}
.step-ic{ font-size:30px; line-height:1; margin-bottom:12px; }
.step h3{ margin-bottom:6px; }
.step p{ color:var(--ink-2); font-size:14.5px; }

/* ---------------------------------------------------- 4. LEADERS RAIL */
.leader-mini{ background:var(--panel); border:1px solid var(--edge); border-radius:var(--r-lg); overflow:hidden; }
.leader-mini .scan{ border:none; border-radius:0; aspect-ratio:1/1; }
.leader-mini .mini-body{ padding:12px 14px 14px; border-left:3px solid var(--el, var(--volt)); }
.leader-mini h3{ font-size:1.05rem; }
.leader-mini span{ font-family:var(--mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3); }

/* --------------------------------------------------------- 5. THE DEX */
.dex-wrap{ background:var(--panel); border:1px solid var(--edge); border-radius:var(--r-lg); padding:16px var(--gutter) 22px; }
@media (min-width:720px){ .dex-wrap{ padding:20px 24px 26px; } }
.dex-wrap .deck-tabs{ padding-inline:var(--gutter); margin-inline:calc(var(--gutter) * -1); }
@media (min-width:720px){ .dex-wrap .deck-tabs{ padding-inline:24px; margin-inline:-24px; } }
.panel-lede{ color:var(--ink-2); font-size:14.5px; margin-bottom:16px; max-width:62ch; }

/* -- Rarity ladder -- */
.rarity-rail{
  display:grid; grid-auto-flow:column; grid-auto-columns:132px; gap:10px;
  overflow-x:auto; scrollbar-width:none; scroll-snap-type:x proximity;
  padding-bottom:6px; padding-inline:var(--gutter); margin-inline:calc(var(--gutter) * -1);
}
.rarity-rail::-webkit-scrollbar{ display:none; }
@media (min-width:720px){
  .rarity-rail{ grid-auto-flow:row; grid-template-columns:repeat(4,1fr); overflow:visible; padding-inline:0; margin-inline:0; gap:12px; }
}
.egg-card{
  scroll-snap-align:start; background:var(--panel-2); border:1px solid var(--edge);
  border-radius:var(--r); padding:14px 12px 15px; text-align:center;
  border-top:2px solid var(--rc);
}
.egg-card img{ width:60px; height:auto; margin:0 auto 10px; filter:drop-shadow(0 6px 16px color-mix(in srgb, var(--rc) 45%, transparent)); }
.egg-name{ font-family:var(--display); font-weight:800; font-size:14.5px; color:var(--rc); line-height:1.2; }
.egg-odds{ font-family:var(--mono); font-size:16px; margin-top:5px; }
.egg-time{ font-family:var(--mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); margin-top:3px; }

/* -- Hatching -- */
.hatch-grid{ display:grid; gap:20px; }
@media (min-width:760px){ .hatch-grid{ grid-template-columns:1fr 1fr; align-items:center; } }
.chamber{
  position:relative; aspect-ratio:1/1; max-width:340px; margin-inline:auto; width:100%;
  border-radius:var(--r-lg); background:radial-gradient(circle at 50% 45%, color-mix(in srgb, var(--rc,#9E9E9E) 16%, #0B0A14), #08070F 72%);
  border:1px solid var(--edge); display:grid; place-items:center; overflow:hidden;
}
.egg-wrap{ width:62%; transition:opacity .18s ease, transform .3s ease; }
.egg-wrap.gone{ opacity:0; transform:scale(.5); }
.wobble{ animation:wob 2.4s ease-in-out infinite; }
.wobble-fast{ animation:wob .38s ease-in-out infinite; }
@keyframes wob{ 0%,100%{ transform:rotate(-2.5deg); } 50%{ transform:rotate(2.5deg); } }
.helix{ position:absolute; width:70%; height:70%; opacity:0; transition:opacity .3s; pointer-events:none; }
.helix.on{ opacity:1; }
.hatched{
  position:absolute; width:64%; opacity:0; transform:scale(.6);
  transition:opacity .25s ease, transform .45s cubic-bezier(.2,.9,.25,1.2);
}
.hatched.on{ opacity:1; transform:none; }
.hatch-flash{ position:absolute; inset:0; background:#fff; opacity:0; pointer-events:none; }
.hatch-stage{ font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); text-align:center; margin-top:12px; min-height:18px; }
.hatch-result{ margin-top:14px; }
.hatch-result .r-tier{ font-family:var(--mono); font-size:11.5px; letter-spacing:.18em; text-transform:uppercase; }
.hatch-result .r-name{ font-family:var(--display); font-weight:800; font-size:clamp(1.3rem,4.6vw,1.7rem); }
.hatch-result .r-king{ color:var(--ink-2); font-size:14px; }

/* -- Battle -- */
.arena{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:14px; }
.fighter{ background:var(--panel-2); border:1px solid var(--edge); border-radius:var(--r); padding:13px 12px; text-align:center; }
.fighter-art{ height:96px; display:grid; place-items:center; margin-bottom:8px; }
.fighter-art img{ max-height:96px; width:auto; filter:drop-shadow(0 0 14px var(--fc)); transition:transform .18s; }
.fighter.hurt .fighter-art img{ animation:shake .3s ease; }
@keyframes shake{ 0%,100%{transform:none;} 25%{transform:translateX(-7px);} 75%{transform:translateX(7px);} }
.fighter b{ font-family:var(--display); font-size:15px; display:block; }
.fighter small{ font-family:var(--mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); }
.hp{ height:8px; border-radius:99px; background:rgba(255,255,255,.09); overflow:hidden; margin:9px 0 5px; }
.hp i{ display:block; height:100%; background:var(--fc); border-radius:99px; transition:width .35s cubic-bezier(.3,.8,.3,1); }
.hp-n{ font-family:var(--mono); font-size:11px; color:var(--ink-2); }
.moves{ display:grid; grid-template-columns:repeat(2,1fr); gap:9px; }
.move{
  background:var(--panel-2); border:1px solid var(--edge-2); border-radius:14px;
  padding:11px 12px; text-align:left; min-height:56px;
}
.move:hover:not([disabled]){ border-color:var(--volt); }
.move b{ font-family:var(--display); font-size:14.5px; display:block; }
.move small{ font-family:var(--mono); font-size:10px; color:var(--ink-3); letter-spacing:.06em; }
.move[disabled]{ opacity:.45; }
.battle-log{
  margin-top:12px; background:#08070F; border:1px solid var(--edge); border-radius:12px;
  padding:12px 14px; font-family:var(--mono); font-size:12.5px; color:var(--ink-2); min-height:58px; line-height:1.6;
}

/* -- Kingdoms -- */
.king-chips{ display:flex; flex-wrap:wrap; gap:7px; margin-bottom:16px; }
.king-chip{
  border:1px solid var(--edge-2); border-radius:999px; padding:8px 14px; min-height:40px;
  font-family:var(--display); font-weight:700; font-size:14px; color:var(--ink-2);
  display:inline-flex; align-items:center; gap:7px;
}
.king-chip::before{ content:""; width:9px; height:9px; border-radius:50%; background:var(--kc); flex:none; box-shadow:0 0 9px var(--kc); }
.king-chip[aria-pressed="true"]{ color:var(--ink); border-color:var(--kc); background:color-mix(in srgb, var(--kc) 12%, transparent); }
.king-detail{ background:var(--panel-2); border:1px solid var(--edge); border-left:3px solid var(--kc); border-radius:0 var(--r) var(--r) 0; padding:16px 18px; }
.king-detail h3{ color:var(--kc); }
.king-detail p{ color:var(--ink-2); font-size:14.5px; margin:8px 0 14px; }
.matchups{ display:grid; gap:12px; }
@media (min-width:560px){ .matchups{ grid-template-columns:1fr 1fr; } }
.matchups h4{ font-family:var(--mono); font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-3); margin-bottom:8px; }
.mrow.up h4{ color:var(--toxic); }
.mrow.down h4{ color:var(--ember); }

/* -- Fusion -- */
.fusion-grid{ display:grid; gap:18px; }
@media (min-width:760px){ .fusion-grid{ grid-template-columns:1fr 1fr; align-items:start; } }
.fus-label{ font-family:var(--mono); font-size:10.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-3); margin-bottom:9px; }
.fus-pills{ display:flex; flex-wrap:wrap; gap:7px; margin-bottom:20px; }
.fus-pill{ border:1px solid var(--edge-2); border-radius:999px; min-height:38px; padding:0 14px; font-size:14px; color:var(--ink-2); }
.fus-pill[aria-pressed="true"]{ color:#05121A; background:var(--pc); border-color:var(--pc); font-weight:700; }
input[type=range].fus-range{
  -webkit-appearance:none; appearance:none; width:100%; height:6px; border-radius:99px;
  background:linear-gradient(90deg, var(--rc) 0%, var(--rc) calc(var(--fill) * 1%), rgba(255,255,255,.1) calc(var(--fill) * 1%));
  margin:6px 0 8px;
}
input[type=range].fus-range::-webkit-slider-thumb{
  -webkit-appearance:none; width:24px; height:24px; border-radius:50%;
  background:var(--rc); border:3px solid #08070F; box-shadow:0 0 14px var(--rc); cursor:pointer;
}
input[type=range].fus-range::-moz-range-thumb{
  width:24px; height:24px; border-radius:50%; background:var(--rc); border:3px solid #08070F; box-shadow:0 0 14px var(--rc); cursor:pointer;
}
.fus-out{ background:var(--panel-2); border:1px solid var(--edge); border-radius:var(--r); padding:18px; text-align:center; }
.fus-tags{ display:flex; flex-wrap:wrap; gap:6px; justify-content:center; margin-bottom:10px; min-height:26px; }
.fus-tag{ font-family:var(--mono); font-size:10.5px; padding:4px 9px; border-radius:999px; border:1px solid; }
.fus-name{ font-family:var(--display); font-weight:800; font-size:clamp(1.3rem,4.8vw,1.75rem); line-height:1.15; }
.fus-desc{ color:var(--ink-2); font-size:13.5px; margin-top:8px; }

/* ------------------------------------------------------- 6. LIVE FINDS */
.finds-rail{ display:grid; gap:11px; }
@media (min-width:640px){ .finds-rail{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1000px){ .finds-rail{ grid-template-columns:repeat(4,1fr); } }
.find{
  background:var(--panel); border:1px solid var(--edge); border-radius:var(--r);
  padding:13px 14px; display:flex; gap:12px; align-items:flex-start;
  border-left:3px solid var(--kc, var(--volt));
}
.find-thumb{
  width:52px; height:52px; flex:none; border-radius:12px; background:var(--panel-2);
  display:grid; place-items:center; overflow:hidden;
}
.find-thumb img{ width:100%; height:100%; object-fit:cover; }
.find-main{ min-width:0; }
.find-creature{ font-family:var(--display); font-weight:700; font-size:15px; line-height:1.2; }
.find-who{ font-size:12.5px; color:var(--ink-2); margin-top:2px; overflow:hidden; text-overflow:ellipsis; }
.find-tier{ font-family:var(--mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; margin-top:5px; display:inline-block; }
.finds-empty{ color:var(--ink-3); font-size:14px; grid-column:1/-1; padding:18px; text-align:center; border:1px dashed var(--edge-2); border-radius:var(--r); }

/* ------------------------------------------------------------- 7. GET */
.get-grid{ display:grid; gap:22px; }
@media (min-width:820px){ .get-grid{ grid-template-columns:1.1fr 1fr; gap:40px; align-items:center; } }
.get-panel{ background:var(--panel); border:1px solid var(--edge); border-radius:var(--r-lg); padding:22px 20px 24px; }
.signup{ display:flex; flex-direction:column; gap:10px; margin-top:14px; }
@media (min-width:520px){ .signup{ flex-direction:row; } }
.signup input{
  flex:1; min-height:50px; padding:0 16px; border-radius:14px;
  background:#08070F; border:1px solid var(--edge-2); color:var(--ink); font-size:15.5px;
}
.signup input:focus{ border-color:var(--volt); outline:none; box-shadow:0 0 0 3px rgba(41,214,255,.16); }
.form-status{ font-family:var(--mono); font-size:12px; margin-top:10px; min-height:18px; }
.get-list{ display:flex; flex-direction:column; gap:11px; margin-top:16px; }
.get-list li{ list-style:none; display:flex; gap:10px; color:var(--ink-2); font-size:14.5px; }
.get-list li::before{ content:"✓"; color:var(--toxic); font-weight:700; flex:none; }

/* ------------------------------------------------------------- 8. FAQ */
.faq-list{ border-top:1px solid var(--edge); }
.faq-item{ border-bottom:1px solid var(--edge); }
.faq-q{
  width:100%; text-align:left; display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:17px 2px; font-family:var(--display); font-weight:700; font-size:clamp(1rem,3.3vw,1.12rem);
}
.faq-q::after{ content:"+"; color:var(--volt); font-size:22px; flex:none; transition:transform .25s; font-family:var(--mono); }
.faq-item.open .faq-q::after{ transform:rotate(45deg); }
.faq-a{ display:none; padding:0 2px 18px; color:var(--ink-2); font-size:14.5px; max-width:66ch; }
.faq-item.open .faq-a{ display:block; }