/* SataMASHO Games — ig.satamasho.games */
:root{
  --bg:#0B0F0C; --bg-2:#0F1712; --panel:#121C15;
  --green:#B7FF3C; --green-deep:#123A22; --magenta:#FF3EA5;
  --text:#E9F0E4; --muted:#8FA394;
  --hair:rgba(183,255,60,.18); --hair-strong:rgba(183,255,60,.45);
  --display:'Anton',Impact,'Arial Narrow',sans-serif;
  --marker:'Permanent Marker','Comic Sans MS',cursive;
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --sans:'Instrument Sans',system-ui,-apple-system,sans-serif;
  --pad:clamp(20px,5vw,64px);
}
*{box-sizing:border-box;}
html{color-scheme:dark; scroll-behavior:smooth;}
body{margin:0; background:var(--bg); color:var(--text); font-family:var(--sans); font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:hidden;}
a{color:inherit; text-decoration:none;}
.eyebrow{font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; font-weight:700; color:var(--green); margin:0;}
.tag{font-family:var(--marker); color:var(--green); margin:0; line-height:1;}
.tag.small{font-size:clamp(1.3rem,2.6vw,2rem); color:var(--text); opacity:.9;}
.tag.big{font-size:clamp(3rem,9vw,7rem); transform:rotate(-3deg); display:inline-block; text-shadow:0 0 24px rgba(183,255,60,.45);}

/* nav */
.nav{position:absolute; top:0; left:0; right:0; z-index:20; display:flex; align-items:center; justify-content:space-between; gap:24px; padding:26px var(--pad);}
.brand{display:flex; align-items:center; gap:14px;}
.brand .mark{display:block; height:40px; width:auto;}
.brand-name{font-family:var(--mono); font-size:15px; font-weight:700; letter-spacing:-.01em; display:block; line-height:1.1;}
.brand-name em{font-style:italic; color:var(--green);}
.brand-sub{display:block; font-family:var(--mono); font-size:9px; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); margin-top:3px;}
.links{display:flex; gap:34px;}
.links a{font-family:var(--mono); font-size:11px; letter-spacing:.14em; font-weight:700; text-transform:uppercase; position:relative; padding:6px 0;}
.links a::after{content:""; position:absolute; left:0; bottom:0; height:1px; width:100%; background:var(--green); transform:scaleX(0); transform-origin:left; transition:transform .5s cubic-bezier(.65,0,.35,1);}
.links a:hover::after{transform:scaleX(1);}
.links a.ext{color:var(--green);}
.pill{font-family:var(--mono); font-size:11px; letter-spacing:.14em; font-weight:700; text-transform:uppercase; color:var(--green); border:1px solid var(--green); border-radius:999px; padding:12px 24px; transition:background .3s,color .3s,box-shadow .3s;}
.pill:hover{background:var(--green); color:var(--bg); box-shadow:0 0 28px rgba(183,255,60,.45);}
@media (max-width:760px){.links{display:none;}}

/* hero */
.hero{padding:96px var(--pad) 0; min-height:100vh; display:flex; align-items:stretch;}
.screen{position:relative; flex:1; border:1px solid var(--hair); border-radius:22px; overflow:hidden; min-height:calc(100vh - 96px - 24px); margin-bottom:24px;
  background:radial-gradient(120% 90% at 85% 40%, #10251A 0%, var(--bg) 55%), var(--bg);}
.screen::before{content:""; position:absolute; inset:0; pointer-events:none; background:repeating-linear-gradient(0deg, rgba(255,255,255,.02) 0 1px, transparent 1px 4px); mix-blend-mode:overlay;}
.ghost{position:absolute; left:50%; top:46%; transform:translate(-50%,-50%); font-family:var(--display); font-size:22vw; line-height:1; letter-spacing:.02em; color:transparent; -webkit-text-stroke:1px rgba(183,255,60,.22); pointer-events:none; user-select:none; white-space:nowrap;}
.glow-m{position:absolute; right:-8%; top:10%; width:46vw; height:46vw; max-width:640px; max-height:640px; border-radius:50%; background:radial-gradient(circle, rgba(255,62,165,.28) 0%, rgba(255,62,165,0) 62%); pointer-events:none; filter:blur(8px);}
.stroke{position:absolute; right:12%; top:-4%; width:min(58vw,760px); height:auto; transform:rotate(-10deg); opacity:1; pointer-events:none; will-change:transform,opacity;}
.hero-text{position:relative; z-index:2; max-width:640px; padding:clamp(48px,8vh,110px) clamp(24px,5vw,72px) 120px;}
.hero h1{font-family:var(--display); font-weight:400; font-size:clamp(4.4rem,13vw,11rem); line-height:.86; letter-spacing:.01em; margin:22px 0 18px; text-transform:uppercase;}
.hero h1 .mask{display:block; overflow:hidden; padding-bottom:.06em; margin-bottom:-.06em;}
.hero h1 .line{display:block;}
.hero h1 .green{color:var(--green); text-shadow:0 0 30px rgba(183,255,60,.35);}
.hero .tag{font-size:clamp(1.6rem,3.6vw,2.7rem); transform:rotate(-3deg); display:inline-block; margin:6px 0 22px 6px; text-shadow:0 0 20px rgba(183,255,60,.5);}
.lede{font-size:17px; line-height:1.7; color:var(--muted); max-width:44ch; margin:0 0 34px;}
.ctas{display:flex; align-items:center; gap:18px; flex-wrap:wrap;}
.btn-solid{background:var(--green); color:var(--bg); font-family:var(--mono); font-size:12px; letter-spacing:.14em; font-weight:700; text-transform:uppercase; padding:20px 30px; display:inline-block; box-shadow:0 0 0 rgba(183,255,60,0); transition:box-shadow .35s, transform .35s;}
.btn-solid:hover{box-shadow:0 0 34px rgba(183,255,60,.55); transform:translateY(-2px); animation:flicker 1.2s steps(1) 1;}
.btn-line{font-family:var(--mono); font-size:12px; letter-spacing:.14em; font-weight:700; text-transform:uppercase; padding:19px 28px; border:1px solid var(--hair-strong); display:inline-block; transition:border-color .3s, color .3s;}
.btn-line:hover{border-color:var(--green); color:var(--green);}
@keyframes flicker{0%,100%{opacity:1} 8%{opacity:.55} 12%{opacity:1} 30%{opacity:.7} 34%{opacity:1}}
.courier{position:absolute; right:clamp(0px,4vw,60px); bottom:0; margin:0; z-index:1; height:min(92%,880px); will-change:transform;}
.courier img{display:block; height:100%; width:auto; filter:drop-shadow(0 0 40px rgba(183,255,60,.18)) drop-shadow(0 30px 40px rgba(0,0,0,.6));}
.strip{position:absolute; left:0; right:0; bottom:0; z-index:3; margin:0; padding:18px clamp(24px,5vw,72px); list-style:none; display:flex; flex-wrap:wrap; gap:8px 34px; font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); border-top:1px solid var(--hair); background:linear-gradient(0deg, rgba(11,15,12,.92), rgba(11,15,12,.6));}
.strip b{color:var(--green); font-weight:700; margin-right:8px;}
.strip i{font-style:normal; color:var(--text); opacity:.55; margin-left:8px;}
@media (max-width:900px){
  .hero{padding-top:84px; min-height:auto;}
  .screen{min-height:auto; border-radius:16px;}
  .hero-text{padding:36px 22px 0; max-width:none;}
  .ghost{font-size:34vw; top:70%;}
  .courier{position:relative; right:auto; bottom:auto; height:auto; display:flex; justify-content:flex-end; margin:10px 0 0; padding-right:4%;}
  .courier img{height:auto; width:min(76vw,420px);}
  .stroke{right:-6%; top:auto; bottom:14%; width:70vw;}
  .glow-m{right:-20%; top:auto; bottom:6%;}
  .strip{position:static; background:var(--bg-2);}
}

/* sections */
.games,.ops{padding:clamp(80px,10vw,140px) var(--pad) 0;}
.head{display:flex; flex-direction:column; gap:14px; margin-bottom:44px;}
.grid{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:22px;}
.card{position:relative; display:block; background:var(--panel); border:1px solid var(--hair); padding:16px 16px 22px; transition:border-color .3s, transform .3s;}
.card:hover{border-color:var(--hair-strong); transform:translateY(-4px);}
.poster{aspect-ratio:4/5; overflow:hidden; background:var(--bg-2); display:grid; place-items:center; position:relative;}
.poster img{width:100%; height:100%; object-fit:cover; display:block; transition:transform .6s cubic-bezier(.2,.7,.2,1);}
.card.live:hover .poster img{transform:scale(1.04);}
.poster .initial{font-family:var(--display); font-size:clamp(6rem,12vw,10rem); line-height:1; color:transparent; -webkit-text-stroke:1px rgba(183,255,60,.35); transition:color .4s;}
.card.soon:hover .initial{color:rgba(183,255,60,.12);}
.badge{position:absolute; top:26px; left:26px; font-family:var(--marker); font-size:15px; color:var(--bg); background:var(--green); padding:4px 10px; transform:rotate(-4deg); box-shadow:0 0 18px rgba(183,255,60,.4);}
.badge.dim{color:var(--green); background:var(--bg); border:1px solid var(--hair-strong); box-shadow:none;}
.card h3{font-family:var(--display); font-weight:400; font-size:2rem; letter-spacing:.02em; margin:18px 0 4px; text-transform:uppercase;}
.card .world{font-family:var(--mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--green); margin:0 0 10px;}
.card p{font-size:14px; line-height:1.6; color:var(--muted); margin:0;}
.card .go{display:inline-block; margin-top:16px; font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; font-weight:700; color:var(--green);}
@media (max-width:1000px){.grid{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media (max-width:560px){.grid{grid-template-columns:1fr;}}

.steps{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px;}
.steps li{border-top:1px solid var(--hair-strong); padding-top:22px;}
.steps .num{font-family:var(--display); font-size:3.4rem; line-height:1; color:var(--green); display:block; text-shadow:0 0 18px rgba(183,255,60,.35);}
.steps h3{font-family:var(--mono); font-size:15px; font-weight:700; letter-spacing:.02em; margin:14px 0 8px;}
.steps p{font-size:15px; line-height:1.65; color:var(--muted); margin:0;}
@media (max-width:760px){.steps{grid-template-columns:1fr;}}

.cta{padding:clamp(110px,14vw,180px) var(--pad); text-align:center;}
.cta .lede{margin:22px auto 34px;}
footer{padding:28px var(--pad) 40px; border-top:1px solid var(--hair); display:flex; justify-content:space-between; gap:12px 32px; flex-wrap:wrap; font-family:var(--mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted);}
footer a{color:var(--text);}
footer .note{opacity:.7;}

/* motion: hidden initial states only while the intro is armed */
.js .hero [data-intro]{opacity:0;}
.js .hero h1 .line{transform:translateY(110%);}
@media (prefers-reduced-motion:reduce){.js .hero [data-intro]{opacity:1;} .js .hero h1 .line{transform:none;} html{scroll-behavior:auto;}}