/* ============================================================
   PIKA — shared design core
   Palette: TCG *energy types* as an abstract spectrum.
   HARD RULE: no character, no rodent, no bolt glyph, no ball motif.
   Colour is the only reference and colour alone is not trade dress.
   ============================================================ */
:root{
  /* energy spectrum — the original v1 palette, restored verbatim */
  --fire:#FF5A36; --fire-d:#C22D0E;
  --water:#2E9BFF; --water-d:#0B5BA8;
  --grass:#31D98A; --grass-d:#0E8F55;
  --psychic:#A855F7; --psychic-d:#6B21A8;
  --lightning:#FFC53D; --lightning-d:#C08A00;
  --fairy:#FF6FB5;

  /* ground — warm near-black, never #000 (Part II canon) */
  /* Ground. v1 sat at #0C0B10; this drops the base toward vantablack and keeps
     the two lifted greys for panels, so the gap between ground and surface
     WIDENS — that separation is what reads as depth, not the hue itself. */
  --ink:#050409; --ink-2:#100E1A; --ink-3:#1B1929;
  --void:#000000;                      /* the true black used only at the edges */
  --paper:#F8F6F2; --paper-2:#EDE9E2;
  --text:#F2EFEA; --text-2:#A8A2B8; --text-3:#797291;   /* 4.50:1 on #050409 — was #6E6884 at 3.87:1, below AA */
  --line:rgba(255,255,255,.09); --line-2:rgba(255,255,255,.16);

  --accent:var(--lightning);
  --shell:min(1240px,92vw);
  --ease:cubic-bezier(.16,1,.3,1);
  --ease-io:cubic-bezier(.65,0,.35,1);

  --f-display:"Space Grotesk",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-body:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--ink);color:var(--text);
  font-family:var(--f-body);font-size:17px;line-height:1.6;
  -webkit-font-smoothing:antialiased;overflow-x:hidden}
img,svg,canvas{max-width:100%;display:block}
a{color:inherit}
button,input,select,textarea{font:inherit;color:inherit}
::selection{background:var(--lightning);color:var(--ink)}
:focus-visible{outline:2px solid var(--lightning);outline-offset:3px;border-radius:4px}

/* ---------- type ---------- */
.h-xl{font-family:var(--f-display);font-weight:700;letter-spacing:-.04em;line-height:.92;
  font-size:clamp(2.9rem,9vw,7.5rem)}
.h-l{font-family:var(--f-display);font-weight:700;letter-spacing:-.03em;line-height:1;
  font-size:clamp(2rem,5vw,3.6rem)}
.h-m{font-family:var(--f-display);font-weight:600;letter-spacing:-.02em;line-height:1.1;
  font-size:clamp(1.35rem,2.6vw,2rem)}
.eyebrow{font-family:var(--f-mono);font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--text-3)}
.lede{font-size:clamp(1.05rem,1.7vw,1.3rem);color:var(--text-2);max-width:60ch}
.mono{font-family:var(--f-mono);font-variant-numeric:tabular-nums}

/* ---------- holo foil: the one earned flourish ---------- */
.holo{position:relative;isolation:isolate;overflow:hidden}
.holo::before{content:"";position:absolute;inset:-40%;z-index:1;pointer-events:none;
  background:
    /* the fine line-screen of real holofoil */
    repeating-linear-gradient(97deg, rgba(255,255,255,.13) 0 1px, transparent 1px 4px),
    /* the original energy spectrum, in repeating refraction bands */
    repeating-linear-gradient(115deg,
      rgba(255,255,255,0) 0 3%,
      rgba(255,255,255,.55) 5%,
      var(--fire) 7.5%, var(--lightning) 10%, var(--grass) 12.5%,
      var(--water) 15%, var(--psychic) 17.5%,
      rgba(255,255,255,0) 21% 34%),
    /* the ground. Dark enough to keep the blacks deep, but never fully
       transparent — a transparent ground under the old color-dodge build is
       what left a hard-edged black wedge across the card face. */
    linear-gradient(200deg, #16121F, #0A0810 55%, #191426);
  background-size:auto, 190% 100%, 100% 100%;
  /* the band is driven by the pointer AND by scroll position, so the colour
     keeps shifting across the face as you read down the page */
  background-position:0 0, calc((var(--hx,.5) + var(--sh,0)) * 100%) 0, 0 0;
  /* screen, never color-dodge: dodge over a near-black card drives everything
     that is not near-white toward black. Same hues, no dead zone. */
  mix-blend-mode:screen;opacity:.55;
  transform:translate3d(calc(var(--hx,.5)*-5%),calc(var(--hy,.5)*-5%),0);
  transition:opacity .5s var(--ease)}
.holo:hover::before{opacity:.72}
.holo>*{position:relative;z-index:2}

/* ---------- energy sheen sweep (odSheen lineage) ---------- */
@keyframes sheen{0%{transform:translateX(-120%)}100%{transform:translateX(220%)}}
.sheen{position:relative;overflow:hidden}
.sheen::after{content:"";position:absolute;top:0;bottom:0;width:38%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.16),transparent);
  animation:sheen 5.5s var(--ease-io) infinite;pointer-events:none}

/* ---------- spectrum rule ---------- */
.rule{height:2px;border:0;margin:0;
  background:linear-gradient(90deg,var(--fire),var(--lightning),var(--grass),var(--water),var(--psychic));
  opacity:.75}

/* ---------- reveal on scroll ---------- */
.rv{opacity:0;transform:translate3d(0,26px,0);
  transition:opacity .85s var(--ease),transform .85s var(--ease)}
.rv.in{opacity:1;transform:none}
.rv-d1{transition-delay:.09s}.rv-d2{transition-delay:.18s}.rv-d3{transition-delay:.27s}
.rv-d4{transition-delay:.36s}.rv-d5{transition-delay:.45s}
@media (prefers-reduced-motion:reduce){
  .rv{opacity:1;transform:none;transition:none}
  .sheen::after{animation:none;opacity:0}
}

/* ---------- split-letter hero reveal ---------- */
.split .ch{display:inline-block;opacity:0;transform:translate3d(0,.7em,0) rotate(4deg);
  transition:opacity .7s var(--ease),transform .7s var(--ease)}
.split.in .ch{opacity:1;transform:none}

/* ---------- buttons ---------- */
.btn{--bg:var(--lightning);--fg:var(--ink);
  display:inline-flex;align-items:center;gap:.6em;justify-content:center;
  min-height:52px;padding:0 1.55rem;border:0;border-radius:999px;
  background:var(--bg);color:var(--fg);font-weight:650;letter-spacing:-.01em;
  cursor:pointer;position:relative;overflow:hidden;text-decoration:none;
  transition:transform .35s var(--ease),box-shadow .35s var(--ease),filter .25s}
.btn:hover{transform:translateY(-2px);box-shadow:0 12px 34px -12px var(--bg);filter:saturate(1.1)}
.btn:active{transform:translateY(0)}
.btn--ghost{--bg:transparent;--fg:var(--text);box-shadow:inset 0 0 0 1.5px var(--line-2)}
.btn--ghost:hover{box-shadow:inset 0 0 0 1.5px var(--lightning);transform:translateY(-2px)}
.btn[disabled]{opacity:.42;pointer-events:none}

/* ---------- surfaces ---------- */
.card{background:linear-gradient(180deg,var(--ink-2),var(--ink));
  border:1px solid var(--line);border-radius:20px;padding:1.6rem}
.shell{width:var(--shell);margin-inline:auto}
section{padding:clamp(4.5rem,11vw,9rem) 0;position:relative}

/* ---------- preloader ---------- */
#pre{position:fixed;inset:0;z-index:999;background:var(--ink);
  display:grid;place-items:center;transition:opacity .8s var(--ease),visibility .8s}
#pre.done{opacity:0;visibility:hidden}
#pre .ring{width:190px;height:190px;position:relative;animation:spin 11s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
#pre .pct{position:absolute;inset:0;display:grid;place-items:center;
  font-family:var(--f-mono);font-size:1.5rem;letter-spacing:-.02em;
  background:linear-gradient(90deg,var(--fire),var(--lightning),var(--grass),var(--water),var(--psychic));
  -webkit-background-clip:text;background-clip:text;color:transparent}
#pre .bar{position:absolute;left:0;right:0;bottom:0;height:2px;transform-origin:0 50%;
  transform:scaleX(0);background:linear-gradient(90deg,var(--fire),var(--lightning),var(--grass),var(--water),var(--psychic))}

/* ---------- utility ---------- */
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}
.grid{display:grid;gap:1.15rem}
@media(min-width:760px){.g-2{grid-template-columns:repeat(2,1fr)}.g-3{grid-template-columns:repeat(3,1fr)}
  .g-4{grid-template-columns:repeat(4,1fr)}}
.stack{display:flex;flex-direction:column}
.row{display:flex;align-items:center;gap:1rem;flex-wrap:wrap}


/* ============ SITE SWITCHER (the only addition to v1) ============ */
:root{--bar-h:42px}
.brandbar{position:fixed;top:0;left:0;right:0;z-index:95;height:var(--bar-h);
  background:linear-gradient(180deg,#07060B,#0C0B10);
  border-bottom:1px solid rgba(255,255,255,.06)}
.brandbar__in{display:flex;align-items:flex-end;height:100%;
  width:var(--shell);margin-inline:auto}
.brandbar a{position:relative;display:inline-flex;align-items:center;gap:.5rem;
  height:calc(var(--bar-h) - 6px);padding:0 1.15rem;text-decoration:none;
  font-family:var(--f-display);font-size:.8rem;font-weight:600;letter-spacing:-.005em;
  color:var(--text-3);border-radius:9px 9px 0 0;white-space:nowrap;
  transition:color .3s var(--ease),background .3s var(--ease)}
.brandbar a::before{content:"";width:5px;height:5px;border-radius:50%;
  background:var(--text-3);transition:background .3s,box-shadow .3s;flex:0 0 auto}
.brandbar a:hover{color:var(--text)}
.brandbar a:hover::before{background:var(--lightning);box-shadow:0 0 9px var(--lightning)}
.brandbar a[aria-current=page]{color:var(--ink);
  background:linear-gradient(180deg,var(--lightning),#E8A82A)}
.brandbar a[aria-current=page]::before{background:var(--ink);box-shadow:none}
@media(max-width:520px){.brandbar a{padding:0 .8rem;font-size:.74rem}}

/* Touch targets. The switcher tabs were 36px and the wordmark 27px on a phone,
   under the 44px minimum. Taller bar on small screens and a padded hit area on
   the wordmark — neither changes how anything looks on the desktop layout. */
@media(max-width:640px){
  :root{--bar-h:50px}
  .brandbar a{height:calc(var(--bar-h) - 6px)}
  .brand{display:inline-flex;align-items:center;min-height:44px}
}

/* A word is one unbreakable unit; the per-letter stagger lives inside it. */
.split .wd{display:inline-block;white-space:nowrap}


/* ---------- vantablack floor ----------
   The ellipse must be sized SMALLER than the viewport, or its dark stops land
   off-screen and the whole effect is invisible (125%/115% did exactly that).
   At 78%/82% the falloff lands inside the frame: the centre keeps the warm
   near-black ground and the outer edges reach true black. */
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(ellipse 78% 82% at 50% 45%,
    transparent 0 46%,
    rgba(0,0,0,.30) 72%,
    rgba(0,0,0,.66) 100%);
}


/* ---------- pointer specular ----------
   A bright highlight that tracks the cursor across the foil, sitting on top of
   the refraction band so the card visibly catches the light as the mouse moves.
   --hx/--hy are already clamped to the card face by the pointermove handler, so
   the highlight can never wander off the card. Replaces an earlier fixed
   highlight pinned at 78% 12%, which did not respond to the pointer at all. */
.holo::after{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;
  border-radius:inherit;
  background:
    radial-gradient(42% 32% at calc(var(--hx,.5)*100%) calc(var(--hy,.5)*100%),
      rgba(255,255,255,.34), rgba(255,255,255,.10) 44%, transparent 70%),
    linear-gradient(160deg, rgba(255,255,255,.13), transparent 34%);
  mix-blend-mode:screen;opacity:.9}
.holo:hover::after{opacity:1}