/* ============================================================
   World of Penguins — base.css
   Design tokens, reset, fonts, typography, buttons, utilities
   Chart: Wildshots (sharp 0-radius, Clash Display + Satoshi, acid-green accent)
   ============================================================ */

/* ---------- Fonts (self-hosted, Fontshare) ---------- */
@font-face{font-family:'Clash Display';src:url('../assets/fonts/clashdisplay-400.woff2') format('woff2');font-weight:400;font-display:swap;font-style:normal}
@font-face{font-family:'Clash Display';src:url('../assets/fonts/clashdisplay-500.woff2') format('woff2');font-weight:500;font-display:swap;font-style:normal}
@font-face{font-family:'Clash Display';src:url('../assets/fonts/clashdisplay-600.woff2') format('woff2');font-weight:600;font-display:swap;font-style:normal}
@font-face{font-family:'Clash Display';src:url('../assets/fonts/clashdisplay-700.woff2') format('woff2');font-weight:700;font-display:swap;font-style:normal}
@font-face{font-family:'Satoshi';src:url('../assets/fonts/satoshi-400.woff2') format('woff2');font-weight:400;font-display:swap;font-style:normal}
@font-face{font-family:'Satoshi';src:url('../assets/fonts/satoshi-500.woff2') format('woff2');font-weight:500;font-display:swap;font-style:normal}
@font-face{font-family:'Satoshi';src:url('../assets/fonts/satoshi-700.woff2') format('woff2');font-weight:700;font-display:swap;font-style:normal}

/* ---------- Tokens ---------- */
:root{
  --bg:#ffffff;
  --ink:#1f1f1f;
  --ink-soft:#4a4a4a;
  --line:#e6e6e6;
  --panel:#f4f4f2;
  --dark:#141414;
  --dark-2:#1f1f1f;
  --accent:#4ef200;            /* acid green */
  --accent-deep:#1f7a00;       /* readable green for text on white (>=4.5:1) */
  --display:'Clash Display',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --body:'Satoshi',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --maxw:1240px;
  --gutter:clamp(20px,5vw,64px);
  --ease:cubic-bezier(.22,.61,.36,1);
  --reveal-ease:cubic-bezier(.16,.84,.44,1);
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:auto}
body{
  font-family:var(--body);
  font-size:18px;
  line-height:1.5;
  color:var(--ink);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none}
ul{list-style:none}
input,textarea,select{font-family:inherit;font-size:inherit}

/* ---------- Typography ---------- */
h1,h2,h3,h4,h5{font-family:var(--display);font-weight:700;text-transform:uppercase;line-height:1.04;letter-spacing:.005em}
h1{font-size:clamp(2.6rem,6.2vw,4.6rem)}
h2{font-size:clamp(2rem,4.6vw,3.1rem)}
h3{font-size:clamp(1.35rem,2.4vw,1.75rem);font-weight:500}
h4{font-size:1.15rem;font-weight:600}
.eyebrow{font-family:var(--display);text-transform:uppercase;letter-spacing:.14em;font-size:.82rem;font-weight:600;color:var(--ink);display:inline-flex;align-items:center;gap:.55rem}
.eyebrow::before{content:"";width:26px;height:3px;background:var(--accent);display:inline-block}
p{max-width:62ch}
.lead{font-size:clamp(1.05rem,1.6vw,1.22rem);color:var(--ink-soft);line-height:1.55}

/* ---------- Layout utilities ---------- */
.container{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}
.section{padding-block:clamp(64px,9vw,120px)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.accent{color:var(--accent-deep)}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  font-family:var(--display);font-weight:600;text-transform:uppercase;letter-spacing:.14em;
  font-size:.78rem;padding:14px 32px;border-radius:0;border:3px solid var(--ink);
  background:var(--ink);color:#fff;transition:background .25s var(--ease),color .25s var(--ease),border-color .25s var(--ease),transform .25s var(--ease);
  will-change:transform;
}
.btn:hover{background:#000;transform:translateY(-2px)}
.btn--ghost{background:transparent;color:var(--ink);border-color:var(--accent)}
.btn--ghost:hover{background:var(--accent);color:var(--ink);border-color:var(--accent)}
.btn--light{background:#fff;color:var(--ink);border-color:#fff}
.btn--light:hover{background:var(--accent);border-color:var(--accent)}
.btn--on-dark{background:transparent;color:#fff;border-color:var(--accent)}
.btn--on-dark:hover{background:var(--accent);color:var(--ink)}

/* ---------- Focus ---------- */
:focus-visible{outline:3px solid var(--accent-deep);outline-offset:3px}

/* ---------- Reveal (IX2 SCROLL_INTO_VIEW) ---------- */
.reveal{opacity:0;transform:translateY(34px);transition:opacity .7s var(--reveal-ease),transform .7s var(--reveal-ease)}
.reveal.is-in{opacity:1;transform:none}
.reveal[data-d="1"]{transition-delay:.08s}
.reveal[data-d="2"]{transition-delay:.16s}
.reveal[data-d="3"]{transition-delay:.24s}
.reveal[data-d="4"]{transition-delay:.32s}
html:not(.js) .reveal{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1!important;transform:none!important;transition:none!important}
  *{animation-duration:.001ms!important;animation-iteration-count:1!important}
}

/* Lenis smooth scroll */
html.lenis,html.lenis body{height:auto}.lenis.lenis-smooth{scroll-behavior:auto!important}.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain}.lenis.lenis-stopped{overflow:hidden}.lenis.lenis-smooth iframe{pointer-events:none}