/* Gorewood Games — deep-woods marketing front + portfolio */

:root{
  --void:#05070a;
  --ink:#090d10;
  --bark:#111815;
  --moss:#1c2a23;
  --line:#20302a;
  --fog:#71847b;
  --ash:#9daea4;
  --bone:#e7e4d9;
  --moon:#f4f2e7;
  --gore:#a4232b;
  --gore-lt:#d8474f;
  --wisp:#8fe3c0;

  --wrap:1180px;
  --r:14px;

  /* pointer, set by JS: -1..1 */
  --px:0; --py:0;
  --lx:50vw; --ly:40vh;

  --f-display:"Fraunces",Georgia,"Times New Roman",serif;
  --f-body:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,monospace;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--void);
  color:var(--bone);
  font:400 clamp(15px,.42vw + 13.6px,17px)/1.65 var(--f-body);
  overflow-x:hidden;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
svg{fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
a{color:inherit;text-decoration:none}
h1,h2,h3{
  font-family:var(--f-display);
  font-variation-settings:"SOFT" 60,"WONK" 1,"opsz" 144;
  font-weight:600;line-height:1.04;margin:0;
  letter-spacing:-.015em;
}
.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:clamp(20px,5vw,40px)}

.skip{
  position:fixed;left:12px;top:-100px;z-index:99;
  background:var(--gore);color:#fff;padding:10px 16px;border-radius:8px;
  transition:top .2s;
}
.skip:focus{top:12px}
:focus-visible{outline:2px solid var(--wisp);outline-offset:3px;border-radius:4px}

/* ── atmosphere ─────────────────────────────────────────── */

#motes{position:fixed;inset:0;width:100%;height:100%;z-index:1;pointer-events:none}

.fog{position:fixed;inset:0;overflow:hidden;z-index:0;pointer-events:none;filter:blur(70px);opacity:.6}
.fog i{position:absolute;display:block;border-radius:50%;mix-blend-mode:screen}
.fog i:nth-child(1){
  width:70vw;height:52vw;left:-14vw;top:6vh;
  background:radial-gradient(circle,rgba(52,94,78,.30),transparent 66%);
  animation:drift1 74s ease-in-out infinite;
}
.fog i:nth-child(2){
  width:62vw;height:46vw;right:-12vw;top:34vh;
  background:radial-gradient(circle,rgba(38,66,92,.28),transparent 66%);
  animation:drift2 96s ease-in-out infinite;
}
.fog i:nth-child(3){
  width:82vw;height:40vw;left:8vw;bottom:-8vh;
  background:radial-gradient(circle,rgba(70,60,50,.22),transparent 68%);
  animation:drift3 118s ease-in-out infinite;
}
@keyframes drift1{50%{transform:translate3d(14vw,-6vh,0) scale(1.16)}}
@keyframes drift2{50%{transform:translate3d(-16vw,7vh,0) scale(1.12)}}
@keyframes drift3{50%{transform:translate3d(10vw,-5vh,0) scale(1.2)}}

/* cursor lantern — lifts the dark slightly wherever you look */
.lantern{
  position:fixed;z-index:2;pointer-events:none;
  left:var(--lx);top:var(--ly);width:760px;height:760px;
  transform:translate(-50%,-50%);
  background:radial-gradient(circle,rgba(160,208,186,.10),rgba(120,170,150,.045) 34%,transparent 66%);
  mix-blend-mode:screen;opacity:0;transition:opacity .7s ease;
}
body.pointer .lantern{opacity:1}

.grain{
  position:fixed;inset:0;z-index:3;pointer-events:none;opacity:.22;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
  mix-blend-mode:overlay;
}

main,.bar,footer{position:relative;z-index:4}

/* ── header ─────────────────────────────────────────────── */

.bar{
  position:sticky;top:0;z-index:40;
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  max-width:var(--wrap);margin-inline:auto;
  padding:16px clamp(20px,5vw,40px);
  transition:background .35s,backdrop-filter .35s,border-color .35s;
  border-bottom:1px solid transparent;
}
.bar.scrolled{
  background:color-mix(in srgb,var(--void) 82%,transparent);
  backdrop-filter:blur(14px) saturate(1.2);
  border-bottom-color:color-mix(in srgb,var(--line) 70%,transparent);
  max-width:none;padding-inline:max(calc(50vw - var(--wrap)/2 + 20px),clamp(20px,5vw,40px));
}
.brand{display:flex;align-items:center;gap:11px}
.brand-mark{
  filter:invert(1) contrast(1.45) brightness(1.05) drop-shadow(0 0 9px rgba(190,220,205,.3));
  transition:transform .5s cubic-bezier(.2,.8,.2,1),filter .4s;
}
.brand:hover .brand-mark{transform:rotate(-4deg) scale(1.06);filter:invert(1) contrast(1.45) brightness(1.25) drop-shadow(0 0 16px rgba(190,220,205,.6))}
.brand-name{
  font-family:var(--f-display);font-weight:700;font-size:1.05rem;
  letter-spacing:.11em;text-transform:uppercase;line-height:1;
  display:flex;flex-direction:column;gap:2px;
}
.brand-name em{
  font-style:normal;font-size:.55em;letter-spacing:.42em;
  color:var(--fog);font-weight:500;
}
.bar nav{display:flex;align-items:center;gap:clamp(14px,2.4vw,30px);font-size:.9rem}
.bar nav a{
  color:var(--ash);position:relative;padding:6px 0;
  display:inline-flex;align-items:center;gap:6px;transition:color .25s;
}
.bar nav a::after{
  content:"";position:absolute;left:0;right:100%;bottom:0;height:1px;
  background:var(--gore-lt);transition:right .35s cubic-bezier(.2,.8,.2,1);
}
.bar nav a:hover{color:var(--moon)}
.bar nav a:hover::after{right:0}
.nav-games{color:var(--bone) !important;font-weight:500}
.pip{
  font:600 .68rem/1 var(--f-mono);
  background:color-mix(in srgb,var(--gore) 78%,#000);color:#ffd9db;
  padding:4px 6px;border-radius:5px;letter-spacing:.02em;
}
.ext{width:9px;height:9px;stroke-width:1.7;opacity:.65}

/* ── hero ───────────────────────────────────────────────── */

.hero{
  position:relative;
  min-height:100svh;
  display:grid;grid-template-rows:1fr auto;
  padding-bottom:clamp(90px,16vh,170px);
  isolation:isolate;
}

.sky{position:relative;display:grid;place-items:end center;min-height:0}

/* tree + moon lock up together; the moon centres on the crown, not the trunk */
.lockup{
  position:relative;
  width:clamp(260px,min(42vmin,46vh),470px);
  aspect-ratio:1000/959;
}
.moon{
  position:absolute;left:50%;top:37%;
  width:104%;aspect-ratio:1;border-radius:50%;
  transform:translate(-50%,-50%) translate3d(calc(var(--px) * -13px),calc(var(--py) * -9px),0);
  background:
    radial-gradient(circle at 42% 38%,#f0eee2 0%,#e2e0d2 40%,#c8c8ba 62%,#a5aa9e 78%,#7c857a 93%);
  box-shadow:
    0 0 40px 6px rgba(224,232,220,.18),
    0 0 130px 30px rgba(186,208,192,.14),
    0 0 300px 90px rgba(120,168,142,.10);
  animation:breathe 11s ease-in-out infinite;
}
.moon::after{
  content:"";position:absolute;inset:-2%;border-radius:50%;
  background:radial-gradient(circle at 62% 66%,transparent 52%,rgba(10,14,12,.22));
  mix-blend-mode:multiply;
}
@keyframes breathe{
  0%,100%{filter:brightness(1)}
  38%{filter:brightness(1.09)}
  44%{filter:brightness(.94)}
  50%{filter:brightness(1.06)}
}
.tree{
  position:relative;
  width:100%;height:auto;
  transform:translate3d(calc(var(--px) * 16px),calc(var(--py) * 6px),0);
  transform-origin:50% 100%;
  filter:drop-shadow(0 0 24px rgba(0,0,0,.9)) contrast(1.15);
  animation:sway 17s ease-in-out infinite;
}
@keyframes sway{
  0%,100%{rotate:-.5deg}
  50%{rotate:.5deg}
}

.hero-copy{
  position:relative;z-index:6;text-align:center;
  max-width:min(780px,92vw);margin-inline:auto;
  padding-top:clamp(10px,2vh,30px);
}
/* scrim keeps the headline legible over the treeline; insets stay at 0
   horizontally so it can never push the page wider than the viewport */
.hero-copy::before{
  content:"";position:absolute;inset:-40% 0 -60%;z-index:-1;
  background:radial-gradient(78% 58% at 50% 45%,rgba(5,7,10,.94),rgba(5,7,10,.72) 56%,transparent 80%);
}
.eyebrow{
  margin:0 0 clamp(10px,1.6vh,18px);
  font:500 .7rem/1 var(--f-mono);
  letter-spacing:.28em;text-transform:uppercase;color:var(--fog);
}
h1{
  display:flex;flex-direction:column;align-items:center;gap:clamp(2px,.6vh,8px);
  margin:0 0 clamp(14px,2.4vh,24px);
}
h1 .w1{
  font-size:clamp(2.6rem,min(10.5vw,10vh),5.8rem);font-weight:700;
  letter-spacing:-.02em;
  background:linear-gradient(176deg,#fffefa 8%,var(--bone) 42%,#a3b0a6 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  text-shadow:0 0 60px rgba(216,226,214,.16);
}
h1 .w2{
  font-size:clamp(.9rem,2.6vw,1.55rem);font-weight:500;
  letter-spacing:clamp(.3em,1.1vw,.62em);text-indent:clamp(.3em,1.1vw,.62em);
  color:var(--fog);text-transform:uppercase;
}
.tagline{
  margin:0 auto clamp(20px,3.2vh,30px);max-width:44ch;
  font-size:clamp(1rem,.5vw + .92rem,1.2rem);
  color:color-mix(in srgb,var(--bone) 74%,transparent);
  text-wrap:balance;
}
.actions{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
.hero-meta{
  margin:clamp(16px,2.6vh,26px) 0 0;
  font:400 .74rem/1.5 var(--f-mono);letter-spacing:.12em;
  text-transform:uppercase;color:color-mix(in srgb,var(--fog) 80%,transparent);
}

.btn{
  display:inline-flex;align-items:center;gap:9px;
  padding:13px 24px;border-radius:999px;
  border:1px solid var(--line);
  background:color-mix(in srgb,var(--bark) 60%,transparent);
  backdrop-filter:blur(6px);
  font-size:.92rem;font-weight:500;letter-spacing:.01em;
  transition:transform .25s cubic-bezier(.2,.8,.2,1),border-color .25s,background .25s,color .25s,box-shadow .35s;
}
.btn svg{width:15px;height:15px;transition:transform .3s}
.btn:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--fog) 55%,transparent);color:var(--moon)}
.btn-primary{
  border-color:transparent;color:#fff8f7;
  background:linear-gradient(168deg,#b8323a,var(--gore) 55%,#71161c);
  box-shadow:0 6px 22px -8px rgba(164,35,43,.85),inset 0 1px 0 rgba(255,255,255,.16);
}
.btn-primary:hover{
  box-shadow:0 10px 34px -8px rgba(196,52,60,.95),inset 0 1px 0 rgba(255,255,255,.24);
  color:#fff;
}
.btn-primary:hover svg{transform:translateY(3px)}
.studio .btn-primary:hover svg{transform:none}

.treeline{
  position:absolute;left:0;right:0;bottom:0;height:clamp(150px,26vh,290px);
  pointer-events:none;z-index:5;
  mask-image:linear-gradient(to bottom,transparent,#000 34%);
}
.tl{position:absolute;inset:auto 0 0 0;background-repeat:repeat-x;background-position:bottom center}
.tl-far{
  height:64%;
  background-image:url("/assets/treeline-far.svg");
  background-size:auto 100%;
  opacity:.5;
  transform:translate3d(calc(var(--px) * -9px),0,0);
}
.tl-near{
  height:100%;
  background-image:url("/assets/treeline-near.svg");
  background-size:auto 100%;
  opacity:.96;
  transform:translate3d(calc(var(--px) * -21px),0,0);
}
.hero::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:200px;z-index:6;
  background:linear-gradient(to bottom,transparent,var(--void));pointer-events:none;
}

/* ── sections ───────────────────────────────────────────── */

.sec-head{max-width:660px;margin:0 0 clamp(38px,6vh,62px)}
h2{font-size:clamp(2rem,4.4vw,3.15rem);margin:0 0 18px}
.lede{
  margin:0;font-size:clamp(1rem,.4vw + .95rem,1.12rem);
  color:color-mix(in srgb,var(--bone) 66%,transparent);text-wrap:pretty;
}
.lede code{
  font:.86em/1 var(--f-mono);color:var(--wisp);
  background:color-mix(in srgb,var(--moss) 55%,transparent);
  padding:3px 6px;border-radius:5px;
}

.games{padding:clamp(70px,12vh,130px) 0 clamp(60px,10vh,110px)}
.grid{
  display:grid;gap:clamp(14px,1.6vw,20px);
  grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
}

.game{
  position:relative;isolation:isolate;
  display:flex;flex-direction:column;
  padding:clamp(22px,2.4vw,30px);
  border-radius:var(--r);
  border:1px solid var(--line);
  background:
    linear-gradient(168deg,color-mix(in srgb,var(--bark) 92%,transparent),color-mix(in srgb,var(--ink) 96%,transparent));
  overflow:hidden;
  transition:transform .4s cubic-bezier(.2,.8,.2,1),border-color .4s,box-shadow .4s;
}
/* cursor spotlight, tinted per game */
.game::before{
  content:"";position:absolute;inset:0;z-index:-1;opacity:0;
  background:radial-gradient(340px circle at var(--mx,50%) var(--my,50%),
    color-mix(in srgb,var(--accent) 16%,transparent),transparent 68%);
  transition:opacity .45s;
}
/* top light seam */
.game::after{
  content:"";position:absolute;left:12%;right:12%;top:0;height:1px;z-index:1;
  background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--accent) 70%,transparent),transparent);
  opacity:0;transition:opacity .45s;
}
.game:hover,.game:focus-within{
  transform:translateY(-5px);
  border-color:color-mix(in srgb,var(--accent) 34%,var(--line));
  box-shadow:0 22px 50px -26px color-mix(in srgb,var(--accent) 55%,#000),0 2px 0 rgba(255,255,255,.02) inset;
}
.game:hover::before,.game:focus-within::before{opacity:1}
.game:hover::after,.game:focus-within::after{opacity:.85}

/* Key art panel. Each game's own og:image is hotlinked from its subdomain, so the
   card refreshes whenever that game reships its art. If the image 404s (subdomain
   not up yet) site.js flags the card .noshot and this collapses to the glyph row. */
.shot{
  position:relative;
  margin:calc(-1 * clamp(22px,2.4vw,30px)) calc(-1 * clamp(22px,2.4vw,30px)) 20px;
  aspect-ratio:1200/630;overflow:hidden;
  border-radius:var(--r) var(--r) 0 0;
  background:color-mix(in srgb,var(--accent) 8%,var(--ink));
}
.art{
  width:100%;height:100%;object-fit:cover;
  transition:transform .7s cubic-bezier(.2,.8,.2,1),opacity .5s;
}
.game:hover .art{transform:scale(1.045)}
/* fade the art into the card body so there's no hard seam */
.shot::after{
  content:"";position:absolute;inset:auto 0 0 0;height:42%;pointer-events:none;
  background:linear-gradient(to bottom,transparent,color-mix(in srgb,var(--ink) 88%,transparent));
}
/* bottom-right sits on the fade and clears the title lockup in every key art */
.shot .status{position:absolute;bottom:11px;right:11px;z-index:2}

.glyph{
  display:none;
  width:46px;height:46px;place-items:center;border-radius:11px;
  color:var(--accent);
  background:color-mix(in srgb,var(--accent) 11%,transparent);
  border:1px solid color-mix(in srgb,var(--accent) 24%,transparent);
  transition:box-shadow .45s,transform .45s cubic-bezier(.2,.8,.2,1),background .45s;
}
.glyph svg{width:24px;height:24px;stroke-width:1.5}

/* fallback: no art yet — keep the panel (so card heights still match across the
   row) and centre the game's glyph on a tinted plate instead */
.noshot .shot{
  display:grid;place-items:center;
  background:
    radial-gradient(120% 100% at 50% 0%,color-mix(in srgb,var(--accent) 14%,transparent),transparent 72%),
    linear-gradient(158deg,var(--bark),var(--ink));
}
.noshot .art{display:none}
.noshot .glyph{display:grid;width:62px;height:62px;border-radius:15px}
.noshot .glyph svg{width:31px;height:31px}
.noshot:hover .glyph{
  transform:translateY(-2px) scale(1.06);
  background:color-mix(in srgb,var(--accent) 18%,transparent);
  box-shadow:0 0 30px -4px color-mix(in srgb,var(--accent) 60%,transparent);
}

.status{
  font:500 .66rem/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;
  padding:6px 10px;border-radius:999px;white-space:nowrap;
  border:1px solid currentColor;
  background:rgba(6,9,12,.68);backdrop-filter:blur(8px) saturate(1.3);
}
.s-dev{color:#cbbc8e}
.s-live,.s-play{color:#8fdcaf}

.game h3{
  font-size:clamp(1.45rem,1.4vw + 1.1rem,1.8rem);
  margin:0 0 9px;letter-spacing:-.01em;
}
.game h3 a{transition:color .3s}
.game:hover h3 a{color:color-mix(in srgb,var(--accent) 55%,var(--moon))}
.stretch::after{content:"";position:absolute;inset:0;z-index:2}

.hook{
  margin:0 0 14px;font-family:var(--f-display);
  font-variation-settings:"SOFT" 80,"WONK" 1,"opsz" 20;
  font-style:italic;font-weight:400;
  font-size:1.02rem;line-height:1.4;
  color:color-mix(in srgb,var(--accent) 62%,var(--bone));
  text-wrap:balance;
}
.blurb{
  margin:0 0 20px;font-size:.925rem;line-height:1.62;
  color:color-mix(in srgb,var(--bone) 58%,transparent);
}

.tags{
  list-style:none;display:flex;flex-wrap:wrap;gap:6px;
  margin:0 0 22px;padding:0;
}
.tags li{
  font:400 .67rem/1 var(--f-mono);letter-spacing:.07em;text-transform:uppercase;
  color:var(--fog);
  padding:6px 9px;border-radius:6px;
  background:color-mix(in srgb,var(--moss) 42%,transparent);
  border:1px solid color-mix(in srgb,var(--line) 80%,transparent);
}

.game-foot{
  margin-top:auto;padding-top:16px;
  border-top:1px solid color-mix(in srgb,var(--line) 75%,transparent);
  display:flex;align-items:center;justify-content:space-between;gap:14px;
}
.cta{
  display:inline-flex;align-items:center;gap:8px;
  font-weight:500;font-size:.92rem;color:var(--accent);
}
.cta svg{width:15px;height:15px;transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.game:hover .cta svg{transform:translateX(5px)}
.itch{
  position:relative;z-index:3;
  display:inline-flex;align-items:center;gap:5px;
  font:400 .78rem/1 var(--f-mono);letter-spacing:.06em;
  color:var(--fog);padding:6px 2px;transition:color .25s;
}
.itch:hover{color:var(--moon)}

/* ── studio ─────────────────────────────────────────────── */

.studio{
  padding:clamp(70px,12vh,130px) 0 clamp(80px,13vh,140px);
  border-top:1px solid color-mix(in srgb,var(--line) 60%,transparent);
  background:radial-gradient(120% 90% at 50% 0%,rgba(28,42,35,.34),transparent 62%);
}
.studio-in{display:grid;gap:clamp(36px,5vw,72px);grid-template-columns:1fr;align-items:start}
@media(min-width:900px){.studio-in{grid-template-columns:1.35fr .65fr}}
.studio p{
  margin:0 0 16px;max-width:56ch;
  color:color-mix(in srgb,var(--bone) 66%,transparent);
}
.studio .actions{justify-content:flex-start;margin-top:30px}

.facts{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.facts li{
  display:flex;align-items:baseline;gap:14px;
  padding:18px 20px;border-radius:10px;
  background:color-mix(in srgb,var(--bark) 70%,transparent);
  border:1px solid color-mix(in srgb,var(--line) 70%,transparent);
}
.facts b{
  font-family:var(--f-display);font-size:1.7rem;font-weight:700;
  color:var(--moon);min-width:2.6ch;
}
.facts span{
  font:400 .73rem/1.3 var(--f-mono);letter-spacing:.1em;
  text-transform:uppercase;color:var(--fog);
}

/* ── footer ─────────────────────────────────────────────── */

footer{
  border-top:1px solid color-mix(in srgb,var(--line) 60%,transparent);
  padding:34px 0 44px;
}
.foot-in{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:20px 28px;
}
.foot-in nav{display:flex;gap:22px;font-size:.88rem}
.foot-in nav a{color:var(--fog);transition:color .25s}
.foot-in nav a:hover{color:var(--moon)}
.copy{margin:0;font:400 .76rem/1 var(--f-mono);letter-spacing:.08em;color:color-mix(in srgb,var(--fog) 75%,transparent)}

/* ── reveal on scroll ───────────────────────────────────── */

.reveal{opacity:0;transform:translateY(22px);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.8,.2,1)}
.reveal.in{opacity:1;transform:none}
.grid .reveal{transition-delay:calc(var(--i,0) * 70ms)}

/* ── small screens ──────────────────────────────────────── */

@media(max-width:620px){
  .bar{padding-block:12px}
  .bar nav a[href="#studio"]{display:none}
  .bar nav{gap:14px;font-size:.85rem}
  .brand-mark{width:28px;height:27px}
  .brand-name{font-size:.86rem;letter-spacing:.09em}
  .brand-name em{font-size:.5em;letter-spacing:.3em}
  .hero{padding-bottom:clamp(60px,10vh,100px)}
  .eyebrow{font-size:.62rem;letter-spacing:.16em}
  .hero-meta{font-size:.6rem;letter-spacing:.06em}
  .lantern{display:none}
  .game{padding:22px 20px}
  .foot-in{flex-direction:column;align-items:flex-start;gap:18px}
}

/* ── reduced motion ─────────────────────────────────────── */

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none !important;transition-duration:.01ms !important}
  .reveal{opacity:1;transform:none}
  .moon{transform:translate(-50%,-50%)}   /* keep the lockup, drop the parallax */
  .tree,.tl-far,.tl-near{transform:none}
  #motes,.lantern,.fog{display:none}
}