/* ===== GameDen Studio — shared styles ===== */

:root{
  --ink:#0a0b10;
  --surface:#14151f;
  --surface-2:#1b1d2a;
  --border:#2a2c3c;
  --violet:#7c5cff;
  --violet-bright:#9d84ff;
  --magenta:#ff3d7f;
  --amber:#ffb84d;
  --paper:#eceaf5;
  --muted:#8d8ca8;
  color-scheme: dark;
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; }

body{
  margin:0;
  background:var(--ink);
  color:var(--paper);
  font-family:'Manrope',system-ui,-apple-system,sans-serif;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  opacity:0;
  animation:bodyFadeIn .5s ease forwards;
}
@keyframes bodyFadeIn{ to{ opacity:1; } }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; }
}

a{ color:inherit; }
h1,h2,h3{ font-family:'Unbounded',system-ui,sans-serif; margin:0; text-wrap:balance; }
p{ margin:0; line-height:1.65; }
img{ max-width:100%; }

.wrap{ max-width:1180px; margin:0 auto; padding-inline:24px; }
[hidden]{ display:none !important; }

::selection{ background:var(--violet); color:#fff; }

/* ---------- scroll progress bar ---------- */
.scroll-progress{
  position:fixed; top:0; left:0; height:3px; width:0%;
  background:linear-gradient(90deg,var(--violet),var(--magenta));
  z-index:100;
  transition:width .08s linear;
}

/* ---------- reveal-on-scroll ---------- */
.reveal{
  opacity:0;
  transform:translateY(28px);
  transition:opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1);
}
.reveal.in-view{ opacity:1; transform:translateY(0); }
.reveal-delay-1.in-view{ transition-delay:.08s; }
.reveal-delay-2.in-view{ transition-delay:.16s; }
.reveal-delay-3.in-view{ transition-delay:.24s; }
.reveal-delay-4.in-view{ transition-delay:.32s; }
.reveal-delay-5.in-view{ transition-delay:.4s; }

/* ---------- NAV ---------- */
.nav{
  position:sticky; top:0; z-index:50;
  background:rgba(10,11,16,0.82);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border);
}
.nav-inner{
  display:flex; align-items:center; justify-content:space-between;
  padding-block:16px; gap:16px;
}
.logo{
  display:flex; align-items:center; gap:10px;
  font-family:'Unbounded',sans-serif; font-weight:800; font-size:1.05rem;
  text-decoration:none; color:var(--paper); white-space:nowrap;
  transition:transform .2s ease;
}
.logo:hover{ transform:translateX(2px); }
.logo-mark{
  width:34px; height:34px; border-radius:9px;
  object-fit:cover; display:block; background:var(--ink);
  flex:none; position:relative;
  animation:markPulse 4s ease-in-out infinite;
}
@keyframes markPulse{
  0%,100%{ box-shadow:0 0 0 0 rgba(124,92,255,0.45); }
  50%{ box-shadow:0 0 0 7px rgba(124,92,255,0); }
}

.nav-links{ display:flex; gap:28px; list-style:none; margin:0; padding:0; font-size:0.92rem; font-weight:600; }
.nav-links a{
  position:relative;
  text-decoration:none; color:var(--muted); padding-block:4px;
  transition:color .15s ease;
}
.nav-links a::after{
  content:""; position:absolute; left:0; right:100%; bottom:-2px; height:2px;
  background:var(--violet-bright); transition:right .25s cubic-bezier(.2,.7,.2,1);
}
.nav-links a:hover{ color:var(--paper); }
.nav-links a:hover::after{ right:0; }
.nav-links a.active{ color:var(--paper); }
.nav-links a.active::after{ right:0; }

.nav-toggle{
  display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding:6px;
}
.nav-toggle span{ width:22px; height:2px; background:var(--paper); border-radius:2px; transition:transform .25s ease, opacity .25s ease; }
.nav-toggle.open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav-toggle.open span:nth-child(2){ opacity:0; }
.nav-toggle.open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

@media (max-width:760px){
  .nav-toggle{ display:flex; }
  .nav-links{
    position:absolute; top:100%; left:0; right:0;
    flex-direction:column; gap:0;
    background:var(--surface);
    border-bottom:1px solid var(--border);
    max-height:0; overflow:hidden;
    transition:max-height .3s ease;
  }
  .nav-links.open{ max-height:320px; }
  .nav-links li{ border-top:1px solid var(--border); }
  .nav-links a{ display:block; padding:16px 24px; }
  .nav-links a::after{ display:none; }
}

/* ---------- HERO ---------- */
.hero{ position:relative; border-bottom:1px solid var(--border); overflow:hidden; }
.hero canvas{ position:absolute; inset:0; width:100%; height:100%; opacity:0.55; }
.hero::before{
  content:"";
  position:absolute; inset:-20% -10% auto -10%; height:70%;
  background:radial-gradient(closest-side, rgba(124,92,255,0.22), transparent);
  filter:blur(40px);
  animation:blobDrift 14s ease-in-out infinite;
  pointer-events:none;
}
@keyframes blobDrift{
  0%,100%{ transform:translate(0,0) scale(1); }
  50%{ transform:translate(6%,4%) scale(1.08); }
}
.hero-inner{ position:relative; padding-block:96px 84px; display:grid; gap:28px; }
.eyebrow{
  font-family:'Space Mono',monospace; font-size:0.78rem; letter-spacing:0.14em; text-transform:uppercase;
  color:var(--violet-bright); display:flex; align-items:center; gap:10px;
}
.eyebrow::before{ content:""; width:28px; height:2px; background:var(--violet-bright); }
.hero h1{ font-size:clamp(2.4rem,6.2vw,4.6rem); font-weight:900; line-height:1.03; max-width:14ch; }
.hero h1 em{
  font-style:normal;
  background:linear-gradient(100deg,var(--violet-bright),var(--magenta));
  background-size:200% auto;
  -webkit-background-clip:text; background-clip:text; color:transparent;
  animation:gradientShift 6s ease-in-out infinite;
}
@keyframes gradientShift{
  0%,100%{ background-position:0% center; }
  50%{ background-position:100% center; }
}
.hero-sub{ max-width:52ch; font-size:1.08rem; color:var(--muted); }
.hero-cta{ display:flex; gap:14px; flex-wrap:wrap; margin-top:8px; }

.btn{
  font-family:'Manrope',sans-serif; font-weight:700; font-size:0.95rem;
  padding:13px 24px; border-radius:10px; text-decoration:none;
  display:inline-flex; align-items:center; gap:8px; border:1px solid transparent;
  cursor:pointer; position:relative; overflow:hidden;
  transition:transform .18s ease, border-color .15s ease, box-shadow .2s ease;
}
.btn-primary{ background:var(--paper); color:var(--ink); }
.btn-primary:hover{ transform:translateY(-2px); box-shadow:0 10px 24px rgba(124,92,255,0.25); }
.btn-ghost{ border-color:var(--border); color:var(--paper); background:transparent; }
.btn-ghost:hover{ border-color:var(--violet-bright); transform:translateY(-2px); }
.btn:active{ transform:translateY(0); }

/* ---------- SECTIONS ---------- */
.section{ padding-block:80px; border-bottom:1px solid var(--border); scroll-margin-top:84px; }
.section-head{ display:flex; justify-content:space-between; align-items:flex-end; gap:24px; margin-bottom:44px; flex-wrap:wrap; }
.section-head h2{ font-size:clamp(1.7rem,3.4vw,2.4rem); font-weight:800; }
.section-head p{ max-width:40ch; color:var(--muted); font-size:0.98rem; }
.tag{ font-family:'Space Mono',monospace; font-size:0.75rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--violet-bright); }

/* ---------- GAMES GRID ---------- */
.games-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:24px; perspective:1000px; }

.game-card{
  background:var(--surface); border:1px solid var(--border); border-radius:16px; overflow:hidden;
  display:flex; flex-direction:column;
  transition:border-color .25s ease, transform .25s ease, box-shadow .25s ease;
  transform-style:preserve-3d;
  will-change:transform;
}
.game-card:hover{ border-color:var(--violet); box-shadow:0 20px 40px -20px rgba(124,92,255,0.45); }
.cover{ aspect-ratio:4/3; position:relative; overflow:hidden; }
.cover svg{ width:100%; height:100%; display:block; transition:transform .4s ease; }
.game-card:hover .cover svg{ transform:scale(1.06); }
.game-body{ padding:20px 22px 24px; display:flex; flex-direction:column; gap:10px; flex:1; }
.game-genre{ font-family:'Space Mono',monospace; font-size:0.72rem; letter-spacing:0.08em; text-transform:uppercase; color:var(--amber); }
.game-card h3{ font-size:1.25rem; font-weight:700; }
.game-card p{ color:var(--muted); font-size:0.92rem; flex:1; }
.game-meta{ display:flex; justify-content:space-between; font-size:0.78rem; color:var(--muted); font-family:'Space Mono',monospace; padding-top:8px; border-top:1px solid var(--border); }

/* ---------- VALUES ---------- */
.values-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:1px;
  background:var(--border); border:1px solid var(--border); border-radius:16px; overflow:hidden;
}
@media (max-width:860px){ .values-grid{ grid-template-columns:1fr; } }
.value{ background:var(--surface); padding:30px 28px; display:flex; flex-direction:column; gap:10px; transition:background .25s ease; }
.value:hover{ background:var(--surface-2); }
.value .num{ font-family:'Space Mono',monospace; color:var(--violet-bright); font-size:0.85rem; }
.value h3{ font-size:1.1rem; font-weight:700; }
.value p{ color:var(--muted); font-size:0.92rem; }

/* ---------- CAREERS BANNER ---------- */
.banner{
  border-radius:20px;
  background:linear-gradient(120deg,var(--surface-2),var(--surface));
  border:1px solid var(--border);
  padding:48px;
  display:flex; justify-content:space-between; align-items:center; gap:28px; flex-wrap:wrap;
  position:relative; overflow:hidden;
}
.banner::after{
  content:""; position:absolute; width:260px; height:260px; border-radius:50%;
  background:radial-gradient(circle,rgba(124,92,255,0.25),transparent 70%);
  right:-80px; top:-80px;
  animation:blobDrift 10s ease-in-out infinite;
}
.banner h2{ font-size:clamp(1.5rem,3vw,2rem); max-width:18ch; }
.banner p{ color:var(--muted); max-width:42ch; margin-top:10px; }

/* ---------- FOOTER ---------- */
footer{ padding-block:40px; }
.footer-inner{ display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap; font-size:0.85rem; color:var(--muted); }
.footer-links{ display:flex; gap:22px; list-style:none; padding:0; margin:0; flex-wrap:wrap; }
.footer-links a{ text-decoration:none; color:var(--muted); transition:color .15s ease; }
.footer-links a:hover{ color:var(--paper); }

/* ---------- BACK TO TOP ---------- */
.to-top{
  position:fixed; right:20px; bottom:20px; z-index:60;
  width:44px; height:44px; border-radius:50%;
  background:var(--surface); border:1px solid var(--border); color:var(--paper);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; opacity:0; pointer-events:none;
  transform:translateY(10px);
  transition:opacity .25s ease, transform .25s ease, border-color .2s ease;
}
.to-top.visible{ opacity:1; pointer-events:auto; transform:translateY(0); }
.to-top:hover{ border-color:var(--violet-bright); }

/* ---------- PRIVACY PAGE ---------- */
.legal{ padding-block:64px 100px; }
.legal-head{ margin-bottom:44px; padding-bottom:28px; border-bottom:1px solid var(--border); }
.legal-head h1{ font-size:clamp(2rem,4.4vw,2.9rem); font-weight:900; margin-bottom:14px; }
.legal-head .updated{ font-family:'Space Mono',monospace; font-size:0.82rem; color:var(--muted); }
.legal-layout{ display:grid; grid-template-columns:220px 1fr; gap:48px; align-items:start; }
@media (max-width:800px){ .legal-layout{ grid-template-columns:1fr; } }
.legal-toc{
  position:sticky; top:96px; display:flex; flex-direction:column; gap:10px; font-size:0.86rem;
}
.legal-toc a{ text-decoration:none; color:var(--muted); padding-block:2px; transition:color .15s ease, padding-left .15s ease; }
.legal-toc a:hover{ color:var(--violet-bright); padding-left:4px; }
.legal-body{ max-width:68ch; display:flex; flex-direction:column; gap:40px; }
.legal-body section{ display:flex; flex-direction:column; gap:12px; scroll-margin-top:100px; }
.legal-body h2{ font-size:1.3rem; font-weight:700; display:flex; align-items:baseline; gap:10px; }
.legal-body h2 .n{ font-family:'Space Mono',monospace; color:var(--violet-bright); font-size:0.85rem; }
.legal-body p, .legal-body li{ color:var(--muted); font-size:0.98rem; }
.legal-body ul{ margin:0; padding-left:20px; display:flex; flex-direction:column; gap:8px; }
.legal-body strong{ color:var(--paper); }
.callout{
  background:var(--surface); border:1px solid var(--border); border-left:3px solid var(--amber);
  border-radius:10px; padding:16px 18px; font-size:0.92rem; color:var(--paper);
}

/* ---------- focus states ---------- */
a:focus-visible, button:focus-visible{
  outline:2px solid var(--violet-bright); outline-offset:3px; border-radius:4px;
}