/* Shared styles for garrackgaming.com. Page specific rules live in each page's own <style>. */
:root{
  --bg:#050708; --bg2:#0a0f13; --panel:#0d151b; --line:#173039;
  --aqua:#5fe1ff; --aqua-d:#1f9fc0; --ink:#dbe8ee; --muted:#8fa6b0;
  --glow:0 0 24px rgba(95,225,255,.35);
  --head:"Orbitron","Segoe UI",system-ui,sans-serif;
  --body:"Inter","Segoe UI",system-ui,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--body);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased}
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
  background-image:radial-gradient(rgba(95,225,255,.10) 1px,transparent 1px);background-size:34px 34px;opacity:.55}
a{color:var(--aqua)}
img{max-width:100%;height:auto;display:block}
h1,h2,h3{font-family:var(--head);letter-spacing:.04em;line-height:1.15;margin:0 0 .5em}
h2{font-size:clamp(1.5rem,3.2vw,2.3rem);text-transform:uppercase}
h3{font-size:1.05rem;text-transform:uppercase;color:#fff}
p{margin:0 0 1em}
.wrap{position:relative;z-index:1;max-width:1180px;margin:0 auto;padding:0 24px}
.eyebrow{font-family:var(--head);font-size:.72rem;letter-spacing:.32em;text-transform:uppercase;color:var(--aqua);display:flex;align-items:center;gap:12px;margin-bottom:14px}
.eyebrow::before{content:"";width:34px;height:1px;background:var(--aqua);box-shadow:var(--glow)}
.eyebrow::after{content:"";width:6px;height:6px;border-radius:50%;background:var(--aqua);box-shadow:var(--glow);margin-left:-8px}
section{padding:96px 0;position:relative;z-index:1}
section.alt{background:linear-gradient(180deg,var(--bg2),var(--bg))}
.lead{font-size:1.15rem;color:#c5d6dd;max-width:64ch}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:10px;font-family:var(--head);font-weight:700;font-size:.85rem;letter-spacing:.12em;text-transform:uppercase;text-decoration:none;padding:15px 26px;border:1px solid var(--aqua);color:var(--aqua);
  clip-path:polygon(12px 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%,0 12px);transition:.2s;background:rgba(95,225,255,.04)}
.btn:hover{background:rgba(95,225,255,.14);box-shadow:var(--glow)}
.btn-aqua{background:var(--aqua);color:#04161c}
.btn-aqua:hover{background:#8dedff;color:#04161c}
.btn-ghost{border-color:var(--line);color:var(--ink)}
.btns{display:flex;flex-wrap:wrap;gap:14px;margin-top:26px}

/* nav */
nav{position:sticky;top:0;z-index:20;background:rgba(5,7,8,.82);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
nav .wrap{display:flex;align-items:center;justify-content:space-between;height:66px}
nav .brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:#fff;font-family:var(--head);font-size:.8rem;letter-spacing:.2em;text-transform:uppercase}
nav .brand img{height:34px;width:auto}
nav ul{list-style:none;margin:0;padding:0;display:flex;gap:26px}
nav li a{color:var(--muted);text-decoration:none;font-size:.9rem;font-weight:500}
nav li a:hover{color:var(--aqua)}
nav .cta{display:inline-block;font-family:var(--head);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:#04161c;background:var(--aqua);padding:10px 16px;text-decoration:none;clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px)}
@media (max-width:820px){nav ul{display:none}nav .brand span{display:none}nav .cta{font-size:.62rem;padding:9px 12px;white-space:nowrap}nav .wrap{height:58px}}

/* hero */
.hero{position:relative;min-height:74vh;display:flex;align-items:center;overflow:hidden;padding:72px 0 56px}
.hero-bg{position:absolute;inset:0;z-index:0}
.hero-bg img{width:100%;height:100%;object-fit:cover;object-position:60% 40%;opacity:.55}
.hero-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(5,7,8,.95) 0%,rgba(5,7,8,.75) 45%,rgba(5,7,8,.25) 100%),linear-gradient(180deg,transparent 60%,var(--bg) 100%)}
.hero .wrap{z-index:1}
.hero-logo{width:min(520px,80vw);filter:drop-shadow(0 0 30px rgba(95,225,255,.35))}
.hero h1{font-size:clamp(1.3rem,2.6vw,1.9rem);font-weight:500;color:#fff;margin:26px 0 12px;text-transform:none;letter-spacing:.02em}
.badges{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.badge{font-family:var(--head);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--aqua);border:1px solid rgba(95,225,255,.45);padding:7px 12px;border-radius:999px;background:rgba(5,7,8,.5)}

/* v3 hero: layered art, canvas bubbles, parallax */
.hero{min-height:82vh;padding:64px 0 72px}
.hero-bg img{opacity:.85;object-position:55% 45%;transform:scale(1.08);will-change:transform;animation:drift 38s ease-in-out infinite alternate}
@keyframes drift{from{transform:scale(1.08) translate(0,0)}to{transform:scale(1.14) translate(-1.5%,1.2%)}}
.hero-bg::after{background:linear-gradient(90deg,rgba(5,7,8,.88) 0%,rgba(5,7,8,.55) 42%,rgba(5,7,8,.12) 100%),linear-gradient(180deg,rgba(5,7,8,.25) 0%,transparent 35%,var(--bg) 100%)}
.rays{position:absolute;inset:-20% -10% 0 -10%;z-index:0;pointer-events:none;mix-blend-mode:screen;opacity:.55;
  background:repeating-linear-gradient(112deg,transparent 0 60px,rgba(255,225,150,.10) 60px 74px,transparent 74px 150px,rgba(255,240,190,.07) 150px 158px,transparent 158px 260px);
  filter:blur(14px);transform-origin:100% 0;animation:sway 14s ease-in-out infinite alternate}
@keyframes sway{from{transform:rotate(-1.5deg) translateX(0)}to{transform:rotate(1.5deg) translateX(-40px)}}
#fx{position:absolute;inset:0;z-index:1;pointer-events:none}
.hero .wrap{z-index:2}
.hero-logo{width:min(560px,84vw);filter:drop-shadow(0 6px 26px rgba(0,0,0,.55)) drop-shadow(0 0 22px rgba(95,225,255,.28));position:relative;z-index:2;will-change:transform}
.hero h1{font-family:var(--body);font-size:clamp(1.25rem,2.4vw,1.75rem);font-weight:600;color:#fff;margin:22px 0 10px;letter-spacing:0}
.hero .lead{text-shadow:0 2px 12px rgba(0,0,0,.6)}
.para{will-change:transform}
/* section banner strips (Steam page banners) */
.strip{display:block;width:100%;margin:0 0 34px;border-radius:14px;box-shadow:0 0 34px rgba(95,225,255,.12);overflow:hidden}
.strip img{width:100%;height:auto;display:block}
/* scroll reveal */
.rv{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s ease}
.rv.in{opacity:1;transform:none}
.rv.d1{transition-delay:.12s}.rv.d2{transition-delay:.24s}.rv.d3{transition-delay:.36s}
/* wishlist band */
.band{position:relative;z-index:1;padding:40px 0 80px}
.band .oct{padding:0;background:#000}
.band .inner{position:relative}
.band .inner img{width:100%;display:block;opacity:.95}
.band .btns{justify-content:center;margin:22px 0 0}
/* key art tile in gallery */
.gal a.wide{grid-column:span 2}
@media (max-width:520px){.gal a.wide{grid-column:span 1}}
@media (prefers-reduced-motion:reduce){.hero-bg img,.rays{animation:none}.rv{opacity:1;transform:none;transition:none}#fx{display:none}}

/* octagon frame cards (logo motif) */
.oct{position:relative;background:var(--panel);border:1px solid var(--line);
  clip-path:polygon(22px 0,calc(100% - 22px) 0,100% 22px,100% calc(100% - 22px),calc(100% - 22px) 100%,22px 100%,0 calc(100% - 22px),0 22px)}
.oct::before{content:"";position:absolute;left:0;top:22px;width:1px;height:calc(100% - 44px);background:linear-gradient(180deg,transparent,var(--aqua),transparent);opacity:.7}
.oct .node{position:absolute;width:8px;height:8px;border-radius:50%;background:var(--aqua);box-shadow:var(--glow);right:14px;top:14px}

/* trailer */
.trailer-frame{position:relative;aspect-ratio:16/9;background:#000;border:1px solid var(--line)}
.trailer-frame iframe,.trailer-frame video{position:absolute;inset:0;width:100%;height:100%;border:0;background:#000}

/* three actions */
.actions{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:40px}
.action{padding:0 0 22px;overflow:hidden}
.action img{aspect-ratio:16/9;object-fit:cover;width:100%}
.action .body{padding:22px 24px 0}
.action .k{font-family:var(--head);font-size:.66rem;letter-spacing:.3em;color:var(--aqua);text-transform:uppercase;margin-bottom:8px}
.action p{color:var(--muted);font-size:.98rem;margin:0}
@media (max-width:900px){.actions{grid-template-columns:1fr}}

/* controller / deck feature */
.split{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center}
@media (max-width:900px){.split{grid-template-columns:1fr}}
.specs{list-style:none;padding:0;margin:20px 0 0;display:grid;gap:12px}
.specs li{display:flex;gap:14px;align-items:flex-start;color:#c5d6dd}
.specs li::before{content:"";flex:0 0 10px;height:10px;margin-top:9px;background:var(--aqua);clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);box-shadow:var(--glow)}
.pad{width:100%;max-width:520px;margin:0 auto;display:block}

/* features grid */
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:40px}
.grid .oct{padding:28px 26px 26px}
.grid h3{margin-top:6px}
.grid p{color:var(--muted);font-size:.97rem;margin:0}
.ico{font-family:var(--head);font-size:1.4rem;color:var(--aqua);line-height:1}
@media (max-width:900px){.grid{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.grid{grid-template-columns:1fr}}

/* gallery */
.gal{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:36px}
.gal a{display:block;border:1px solid var(--line);overflow:hidden;background:#000}
.gal img{aspect-ratio:16/9;object-fit:cover;transition:transform .35s,opacity .35s;opacity:.92}
.gal a:hover img{transform:scale(1.04);opacity:1}
@media (max-width:820px){.gal{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.gal{grid-template-columns:1fr}}

/* languages */
.langs{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.langs span{border:1px solid var(--line);padding:8px 14px;font-size:.95rem;background:rgba(13,21,27,.7)}

/* studio */
.studio-logo{width:min(420px,70vw);opacity:.95}

/* faq */
details{border:1px solid var(--line);background:var(--panel);margin-bottom:10px}
summary{cursor:pointer;padding:18px 22px;font-weight:600;color:#fff;list-style:none;display:flex;justify-content:space-between;gap:16px}
summary::after{content:"+";color:var(--aqua);font-family:var(--head)}
details[open] summary::after{content:"–"}
details p{padding:0 22px 18px;color:#c5d6dd;margin:0}

/* footer */
footer{position:relative;z-index:1;border-top:1px solid var(--line);padding:48px 0 40px;color:var(--muted);font-size:.92rem}
footer .row{display:flex;flex-wrap:wrap;justify-content:space-between;gap:24px;align-items:center}
footer .links{display:flex;flex-wrap:wrap;gap:20px}
footer a{color:var(--ink);text-decoration:none}
footer a:hover{color:var(--aqua)}
.small{font-size:.82rem;color:#6d838c;margin-top:22px}

/* Lightbox for gallery screenshots (click / Esc / x to close; no-JS falls back to the plain link) */
.lb{position:fixed;inset:0;z-index:1000;display:none;align-items:center;justify-content:center;background:rgba(2,5,8,.94);padding:24px;cursor:zoom-out}
.lb.open{display:flex}
.lb img{max-width:min(96vw,1600px);max-height:88vh;width:auto;height:auto;border:1px solid rgba(95,225,255,.35);box-shadow:0 0 60px rgba(95,225,255,.18);cursor:default}
.lb .lb-x{position:absolute;top:14px;right:18px;width:48px;height:48px;border:1px solid rgba(95,225,255,.5);background:rgba(5,7,8,.7);color:#5fe1ff;font:28px/46px Inter,system-ui,sans-serif;text-align:center;border-radius:50%;cursor:pointer}
.lb .lb-x:hover{background:#5fe1ff;color:#050708}
.lb .lb-cap{position:absolute;left:0;right:0;bottom:16px;text-align:center;color:#9fd9e6;font:15px Inter,system-ui,sans-serif;padding:0 24px}
.lb .lb-hint{position:absolute;left:0;right:0;top:20px;text-align:center;color:rgba(159,217,230,.7);font:13px Inter,system-ui,sans-serif}