/* ============================================================
   GREEN GAMING STUDIOS — Design System
   Vibe: premium-indie, cozy & handcrafted. Warm paper + espresso
   ink, single amber accent, monospace signature voice.
   ============================================================ */

:root {
  /* ---- Surfaces (warm) ---- */
  --paper:      #f2ead9;   /* warm cream */
  --paper-2:    #eadfca;   /* deeper cream panel */
  --paper-3:    #e3d5bb;   /* card edge */
  --espresso:   #1c1813;   /* near-black, warm */
  --espresso-2: #262019;   /* raised dark panel */
  --espresso-3: #322a20;

  /* ---- Ink ---- */
  --ink:        #221d16;
  --ink-soft:   #5a5043;
  --ink-faint:  #8a7f6d;
  --on-dark:    #f3ecdd;
  --on-dark-soft:#bdb29c;
  --on-dark-faint:#7d735f;

  /* ---- Accent (amber). Tweakable. ---- */
  --accent:     #d98a3d;
  --accent-deep:#bd6f28;
  --accent-soft:#e9b074;

  /* ---- Type ---- */
  --display: "Bricolage Grotesque", "Arial Black", sans-serif;
  --mono: "Space Mono", "Courier New", monospace;
  --body: "Hanken Grotesk", system-ui, sans-serif;

  /* ---- Rhythm ---- */
  --maxw: 1280px;
  --gutter: clamp(20px, 5vw, 72px);
  --r: 18px;     /* card radius */
  --r-lg: 28px;
  --r-pill: 999px;

  --shadow-soft: 0 1px 2px rgba(34,29,22,.06), 0 8px 28px rgba(34,29,22,.08);
  --shadow-pop:  0 2px 6px rgba(34,29,22,.10), 0 24px 60px rgba(34,29,22,.16);
  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
}

* { box-sizing: border-box; }
html { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
body {
  margin: 0;
  font-family: var(--body);
  background: var(--paper);
  color: var(--ink);
  line-height: 1.5;
  overflow-x: hidden;
}
::selection { background: var(--accent); color: #1c1813; }

/* Paper grain overlay — handcrafted texture, sits above everything, ignores clicks */
.grain {
  position: fixed; inset: 0; z-index: 9000; pointer-events: none;
  opacity: .5; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.42'/%3E%3C/svg%3E");
}

/* ---------- Type scale ---------- */
.eyebrow {
  font-family: var(--mono);
  font-size: clamp(11px, .82vw, 13px);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--accent-deep);
  display: inline-flex; align-items: center; gap: .6em;
  margin: 0;
}
.eyebrow::before {
  content: ""; width: 26px; height: 2px; background: currentColor; opacity: .6;
  display: inline-block;
}
.eyebrow.no-rule::before { display: none; }

h1, h2, h3 { font-family: var(--display); font-weight: 800; margin: 0; line-height: .98; letter-spacing: -.02em; }
.display-xl { font-size: clamp(44px, 9vw, 132px); line-height: .9; letter-spacing: -.035em; }
.display-l  { font-size: clamp(34px, 5.4vw, 76px); line-height: .96; letter-spacing: -.03em; }
.display-m  { font-size: clamp(26px, 3.4vw, 44px); line-height: 1.0; letter-spacing: -.02em; }
.lede { font-size: clamp(17px, 1.5vw, 21px); color: var(--ink-soft); line-height: 1.55; max-width: 56ch; }
.mono-label { font-family: var(--mono); font-size: 12.5px; letter-spacing: .08em; color: var(--ink-faint); }

/* ---------- Layout ---------- */
.wrap { max-width: var(--maxw); margin: 0 auto; padding-inline: var(--gutter); }
.section { padding-block: clamp(72px, 11vw, 160px); position: relative; }
.section.tight { padding-block: clamp(48px, 7vw, 96px); }

/* ---------- Buttons ---------- */
.btn {
  font-family: var(--mono); font-size: 13px; letter-spacing: .04em;
  border: none; cursor: pointer; border-radius: var(--r-pill);
  padding: 15px 26px; display: inline-flex; align-items: center; gap: .7em;
  text-decoration: none; transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .2s;
  font-weight: 700;
}
.btn:active { transform: translateY(1px) scale(.99); }
.btn-primary { background: var(--ink); color: var(--paper); box-shadow: var(--shadow-soft); }
.btn-primary:hover { transform: translateY(-2px); box-shadow: var(--shadow-pop); }
.btn-accent { background: var(--accent); color: #1c1813; box-shadow: 0 6px 18px rgba(217,138,61,.4); }
.btn-accent:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(217,138,61,.5); }
.btn-ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px rgba(34,29,22,.22); }
.btn-ghost:hover { box-shadow: inset 0 0 0 1.5px var(--ink); transform: translateY(-2px); }
.btn .arrow { transition: transform .3s var(--ease); }
.btn:hover .arrow { transform: translate(3px,-3px); }
/* dark-surface variants */
.on-dark .btn-ghost { color: var(--on-dark); box-shadow: inset 0 0 0 1.5px rgba(243,236,221,.25); }
.on-dark .btn-ghost:hover { box-shadow: inset 0 0 0 1.5px var(--on-dark); }
.on-dark .btn-primary { background: var(--paper); color: var(--ink); }

/* ---------- Image placeholders (handcrafted striped) ---------- */
.ph {
  position: relative; overflow: hidden; border-radius: var(--r);
  background-color: var(--paper-2);
  background-image: repeating-linear-gradient(135deg,
     rgba(34,29,22,.05) 0 2px, transparent 2px 11px);
  display: grid; place-items: center;
  box-shadow: inset 0 0 0 1px rgba(34,29,22,.08);
  isolation: isolate;
}
.ph.dark { background-color: var(--espresso-2);
  background-image: repeating-linear-gradient(135deg, rgba(243,236,221,.06) 0 2px, transparent 2px 11px);
  box-shadow: inset 0 0 0 1px rgba(243,236,221,.08); }
.ph-tag {
  font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-faint); padding: 6px 12px; border-radius: var(--r-pill);
  background: rgba(242,234,217,.8); box-shadow: inset 0 0 0 1px rgba(34,29,22,.1);
}
.ph.dark .ph-tag { color: var(--on-dark-faint); background: rgba(28,24,19,.7); box-shadow: inset 0 0 0 1px rgba(243,236,221,.12); }

/* ---------- Tag / chip ---------- */
.chip {
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .06em;
  padding: 6px 12px; border-radius: var(--r-pill);
  background: rgba(34,29,22,.06); color: var(--ink-soft);
  display: inline-flex; align-items: center; gap: .5em;
}
.on-dark .chip { background: rgba(243,236,221,.1); color: var(--on-dark-soft); }

/* ---------- Reveal-on-scroll ---------- */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .8s var(--ease-out), transform .8s var(--ease-out); }
.reveal.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; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1 !important; transform: none !important; }
}

/* ---------- Dark section base ---------- */
.on-dark { background: var(--espresso); color: var(--on-dark); }
.on-dark .lede { color: var(--on-dark-soft); }
.on-dark .mono-label { color: var(--on-dark-faint); }
.on-dark .eyebrow { color: var(--accent-soft); }

/* ---------- Hairline divider ---------- */
.hr { height: 1px; background: rgba(34,29,22,.12); border: 0; }
.on-dark .hr { background: rgba(243,236,221,.12); }