/* Amurko studio site — single stylesheet, no build step. Dark only. */
:root{
  --bg:#15121d;--panel:#221c30;--panel2:#2a2240;--ink:#f4effc;--muted:#a9a0c6;
  --accent:#ffb84d;--accent-ink:#2b1a00;--red:#ff5a6e;--green:#5fd79e;
  --n1:#8fd0ff;--n2:#ffd86b;--n3:#ff9a5c;--n4:#ff5a6e;
  --tile:#453c60;--tile-hi:rgba(255,255,255,.18);--tile-lo:rgba(0,0,0,.38);--floor:#1a1524;--line:rgba(255,255,255,.08);
  --font:'Rubik',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --gutter:16px;--max:1120px;
  color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;background:var(--bg);overflow-x:clip;scroll-behavior:smooth}
body{margin:0;font:500 17px/1.55 var(--font);color:var(--ink);background:var(--bg);overflow-x:clip;-webkit-font-smoothing:antialiased}
img,svg,canvas,video{display:block;max-width:100%}
.pixel{image-rendering:pixelated;image-rendering:crisp-edges}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:6px}
::selection{background:var(--accent);color:var(--accent-ink)}
.wrap{width:100%;max-width:var(--max);margin:0 auto;padding-left:var(--gutter);padding-right:var(--gutter)}
.sec{padding:clamp(64px,10vw,120px) 0;position:relative}
.sec--tight{padding:clamp(28px,5vw,56px) 0}
h1,h2,h3,h4{margin:0;line-height:1.05;letter-spacing:-.02em;font-weight:900}
h2{font-size:clamp(32px,5.2vw,56px)}
h3{font-size:clamp(22px,3vw,32px)}
p{margin:0}
.lead{font-size:clamp(18px,2.2vw,22px);color:var(--muted);max-width:38em;margin-top:16px}
.kicker{font-size:13px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);margin-bottom:14px}
.muted{color:var(--muted)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:16px;top:-60px;z-index:100;background:var(--accent);color:var(--accent-ink);padding:10px 14px;border-radius:10px;font-weight:700}
.skip:focus{top:12px}

/* ---------- nav ---------- */
.nav{position:fixed;top:0;left:0;right:0;z-index:50;height:64px;transition:background .3s,box-shadow .3s}
.nav.is-solid{background:rgba(21,18,29,.93);box-shadow:0 1px 0 var(--line)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;height:100%}
.nav-links{display:flex;gap:clamp(14px,3vw,30px);font-weight:700;font-size:15px}
.nav-links a{color:var(--ink)}
.nav-links a:hover{color:var(--accent);text-decoration:none}
@media (max-width:419px){.nav-links .opt{display:none}}
.logo{display:inline-flex;color:var(--ink);font-size:26px;text-decoration:none!important}
.logo .wm-f{filter:brightness(1.35)}

/* ---------- wordmark with the tile "o" ---------- */
.wm{display:inline-flex;align-items:baseline;font-weight:900;letter-spacing:-.02em;line-height:1;white-space:nowrap}
.wm-o{position:relative;display:inline-block;width:.548em;height:.548em;margin-left:.045em;perspective:3em}
.wm-o-in{position:absolute;inset:0;transform-style:preserve-3d;transition:transform .8s cubic-bezier(.3,.9,.3,1.08)}
.wm-f,.wm-b{position:absolute;inset:0;width:100%;height:100%;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.wm-b{transform:rotateY(180deg);background:var(--floor);border-radius:21.5%;box-shadow:inset 0 0 0 .06em #2d2540;display:grid;place-items:center}
.wm-b img{width:62%;height:62%;object-fit:contain}
.wm.is-flip .wm-o-in,.logo:hover .wm-o-in,.logo:focus-visible .wm-o-in{transform:rotateY(180deg)}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:50px;padding:0 22px;border-radius:12px;font:700 16px/1 var(--font);color:var(--accent-ink);background:var(--accent);border:0;cursor:pointer;text-align:center;line-height:1.15;padding-top:10px;padding-bottom:10px;text-decoration:none!important;box-shadow:inset 0 -3px 0 rgba(0,0,0,.22),0 10px 30px rgba(255,184,77,.18);transition:transform .15s,box-shadow .15s}
.btn:hover{transform:translateY(-2px);box-shadow:inset 0 -3px 0 rgba(0,0,0,.22),0 14px 34px rgba(255,184,77,.28)}
.btn:active{transform:translateY(1px)}
.btn--ghost{background:var(--panel2);color:var(--ink);box-shadow:inset 2px 2px 0 var(--tile-hi),inset -2px -2px 0 var(--tile-lo)}
.btn--ghost:hover{box-shadow:inset 2px 2px 0 var(--tile-hi),inset -2px -2px 0 var(--tile-lo),0 10px 24px rgba(0,0,0,.35)}
.btn--sm{min-height:42px;padding:0 16px;font-size:14px}
.btn svg{width:18px;height:18px;flex:none}

/* ---------- tile motif + numbers ---------- */
.tile{background:var(--tile);border-radius:8px;box-shadow:inset 2px 2px 0 var(--tile-hi),inset -2px -2px 0 var(--tile-lo)}
.num{font-weight:900;font-variant-numeric:tabular-nums;text-shadow:0 0 14px currentColor;letter-spacing:0}
.n1{color:var(--n1)}.n2{color:var(--n2)}.n3{color:var(--n3)}.n4{color:var(--n4)}

/* ---------- hero ---------- */
.hero{position:relative;min-height:100vh;min-height:100svh;display:grid;place-items:center;padding:100px 0 80px;overflow:hidden;background:var(--bg)}
.hero-c{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:2}
.hero-in{position:relative;z-index:1;text-align:center;padding:16px var(--gutter);opacity:0;transition:opacity .25s}
.js .hero.is-ready .hero-in,.no-js .hero-in{opacity:1}
.hero h1{font-size:clamp(66px,15vw,164px)}
.hero .tag{font-size:clamp(22px,3.6vw,40px);font-weight:700;margin-top:8px;letter-spacing:-.01em}
.hero .sub{color:var(--muted);font-size:clamp(16px,2vw,20px);margin:16px auto 0;max-width:30em}
.hero-cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:28px}
.hero-hint{position:absolute;bottom:20px;left:50%;transform:translateX(-50%);z-index:3;color:var(--muted);font-size:12px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;display:flex;flex-direction:column;align-items:center;gap:8px;opacity:0;transition:opacity .6s 1.9s;pointer-events:none}
.hero.is-ready .hero-hint{opacity:1}
.hero-hint i{width:12px;height:12px;border-right:3px solid var(--accent);border-bottom:3px solid var(--accent);transform:rotate(45deg);animation:nod 1.6s ease-in-out infinite}
@keyframes nod{0%,100%{transform:translateY(0) rotate(45deg)}50%{transform:translateY(6px) rotate(45deg)}}

/* ---------- what we make: tile covers revealed by scroll ---------- */
.make-grid{display:grid;gap:14px;margin-top:44px}
.rv{position:relative;background:var(--panel);border-radius:16px;overflow:hidden;box-shadow:inset 0 0 0 1px var(--line)}
.rv-body{display:grid;grid-template-columns:auto minmax(0,1fr);gap:18px;align-items:center;padding:22px 20px;min-height:132px}
.rv-n{font-size:46px;line-height:1;width:1.15em;text-align:center}
.rv-t{font-size:clamp(20px,2.6vw,24px);font-weight:900;letter-spacing:-.01em}
.rv-d{color:var(--muted);margin-top:4px;font-size:16px}
.rv-cover{position:absolute;inset:0;display:grid;grid-template-columns:repeat(6,1fr);grid-template-rows:repeat(2,1fr);pointer-events:none;--p:0}
.rv-cover i{display:block;background:var(--tile);box-shadow:inset 2px 2px 0 var(--tile-hi),inset -2px -2px 0 var(--tile-lo);border-radius:6px;--k:clamp(0,(var(--p) - var(--d)) / .42,1);transform:perspective(700px) rotateX(calc(var(--k) * -92deg));transform-origin:50% 0;opacity:calc(1 - var(--k) * var(--k));will-change:transform}
.rv-cover i:nth-child(n+13){display:none}
@media (min-width:720px){.rv-cover{grid-template-columns:repeat(16,1fr)}.rv-cover i:nth-child(n+13){display:block}}
.no-js .rv-cover{display:none}

/* ---------- counter strip ---------- */
.stats{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
@media (min-width:720px){.stats{grid-template-columns:repeat(4,1fr)}}
.stat{background:var(--panel);border-radius:16px;padding:24px 16px;text-align:center;box-shadow:inset 2px 2px 0 var(--tile-hi),inset -2px -2px 0 var(--tile-lo)}
.stat-n{font-size:clamp(44px,6vw,68px);font-weight:900;line-height:1;color:var(--accent);font-variant-numeric:tabular-nums;text-shadow:0 0 18px rgba(255,184,77,.45)}
.stat-l{color:var(--muted);font-weight:700;margin-top:8px;font-size:15px}

/* ---------- catalogue: game card with sticky phone ---------- */
.gicon{width:96px;height:96px;border-radius:24px;box-shadow:0 12px 30px rgba(0,0,0,.5)}
.game-cta{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.game-stage{display:grid;grid-template-columns:1fr;margin-top:8px;position:relative;z-index:1}
.phone-col{grid-area:1/1;pointer-events:none;position:relative;z-index:2}
.caps-col{grid-area:1/1;padding-top:46vh;padding-top:46svh}
@media (min-width:900px){.game-stage{grid-template-columns:5fr 6fr;gap:48px}.phone-col{grid-area:auto;pointer-events:auto}.caps-col{grid-area:auto;padding-top:0}}
.phone-stick{position:sticky;top:64px;height:42vh;height:42svh;display:grid;place-items:center}
@media (min-width:900px){.phone-stick{top:72px;height:calc(100vh - 72px);height:calc(100svh - 72px)}}
.phone{position:relative;height:90%;aspect-ratio:9/18.6;max-width:100%;background:#0c0a14;border-radius:clamp(22px,9%,44px);padding:3%;box-shadow:0 30px 80px rgba(0,0,0,.6),inset 0 0 0 2px #2d2642,inset 0 0 0 5px #0c0a14;will-change:transform;transform:perspective(1200px) rotateX(0deg)}
.phone::after{content:"";position:absolute;top:2.2%;left:50%;width:4%;height:2%;transform:translateX(-50%);background:#1a1626;border-radius:50%;z-index:3}
.phone-s{position:relative;width:100%;height:100%;border-radius:clamp(16px,7%,34px);overflow:hidden;background:var(--bg)}
.phone-s img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .45s ease;transform:translateZ(0)}
.phone-s img.is-on{opacity:1}
.caps{display:grid;padding-bottom:8vh}
.cap{min-height:52vh;min-height:52svh;display:flex;align-items:center;padding:12px 0}
@media (min-width:900px){.cap{min-height:76vh;min-height:76svh}}
.cap-in{opacity:.28;transform:translateY(10px);transition:opacity .35s,transform .35s;max-width:30em}
.cap.is-on .cap-in{opacity:1;transform:none}
.cap .num{font-size:52px;line-height:1}
.cap h3{margin-top:10px;font-size:clamp(22px,3vw,30px)}
.cap p{color:var(--muted);margin-top:10px}

/* ---------- catalogue: equal game cards, scales to N games ---------- */
.games{display:grid;gap:16px;margin-top:28px;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));position:relative;z-index:1}
.gcard{display:flex;flex-direction:column;background:var(--panel);border-radius:18px;overflow:hidden;box-shadow:inset 0 0 0 1px var(--line);min-width:0}
.gcard-art{display:block;aspect-ratio:1024/500;background:var(--floor);overflow:hidden}
.gcard-art img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.gcard:hover .gcard-art img{transform:scale(1.04)}
.gcard-art--soon{position:relative;display:grid;place-items:center;background-color:var(--floor);background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:32px 32px}
.gcard-sil{width:38%;height:auto;fill:var(--tile);filter:drop-shadow(0 8px 16px rgba(0,0,0,.5))}
.gcard-year{position:absolute;top:12px;right:12px;background:var(--accent);color:var(--accent-ink);font-size:12px;font-weight:900;letter-spacing:.12em;padding:4px 9px;border-radius:999px}
.gcard-body{display:flex;flex-direction:column;gap:12px;padding:18px 20px 20px;flex:1}
.gcard-top{display:flex;gap:14px;align-items:center}
.gcard-icon{width:56px;height:56px;border-radius:14px;flex:none}
.gcard h3{font-size:clamp(22px,2.6vw,26px)}
.gcard-status{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);margin-bottom:4px}
.gcard--soon .gcard-status{color:var(--muted)}
.gcard-one{color:var(--muted);font-size:16px;flex:1}
.gcard .game-cta{margin-top:4px}


/* ---------- per-game worlds: each card (and game page) brings its own background, buttons, cursor ---------- */
[data-game=monstro],[data-game=monstro] *{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32' shape-rendering='crispEdges'%3E%3Cg stroke='%2315121d' stroke-width='1.6' stroke-linejoin='round'%3E%3Cpolygon points='2,2 9,3 23,17 17,23 3,9' fill='%23efeaf9'/%3E%3Cpolygon points='13,25 25,13 28,16 16,28' fill='%23ffb84d'/%3E%3Cpolygon points='20,24 24,20 30,26 26,30' fill='%238a5530'/%3E%3C/g%3E%3Cpolyline points='4,4 19,19' stroke='%23b9b0d6' stroke-width='1.4' fill='none'/%3E%3C/svg%3E") 2 2,auto}
[data-game=fish],[data-game=fish] *{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath d='M21 1v20a7.5 7.5 0 0 1-15 0v-4l-3 3' fill='none' stroke='%2306141c' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M21 1v20a7.5 7.5 0 0 1-15 0v-4l-3 3' fill='none' stroke='%23dff7f3' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3Ccircle cx='21' cy='3' r='2.6' fill='%23ff6b5e' stroke='%2306141c' stroke-width='1.2'/%3E%3C/svg%3E") 3 20,auto}
[data-game=logic],[data-game=logic] *{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cg stroke='%230b1220' stroke-width='1.5' stroke-linejoin='round'%3E%3Cpolygon points='9,19 23,5 27,9 13,23' fill='%23ffd86b'/%3E%3Cpolygon points='23,5 25.5,2.5 29.5,6.5 27,9' fill='%23ff9aa8'/%3E%3Cpolygon points='2,30 9,19 13,23' fill='%23f3d6a8'/%3E%3C/g%3E%3Cpolygon points='2,30 4.6,26 6,27.4' fill='%230b1220'/%3E%3C/svg%3E") 2 30,auto}
.gcard[data-game=monstro]{background-color:#1d1729;background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);background-size:24px 24px}

/* fishing: night lake */
.gcard[data-game=fish]{background:linear-gradient(180deg,#0f2a36 0%,#0b1d27 100%);box-shadow:inset 0 0 0 1px rgba(127,214,200,.14)}
.gcard[data-game=fish] .gcard-status{color:#7fd6c8}
.gcard[data-game=fish] .gcard-one{color:#9fbfc4}
.gcard[data-game=fish] .gcard-year{background:#7fd6c8;color:#06231f}
.gcard[data-game=fish] .btn{border-radius:999px;background:#7fd6c8;color:#06231f;box-shadow:0 10px 24px rgba(127,214,200,.22)}
.gcard[data-game=fish] .btn--ghost{background:transparent;color:#7fd6c8;box-shadow:inset 0 0 0 2px #7fd6c8}
.gcard[data-game=fish] .btn--ghost:hover{background:rgba(127,214,200,.12)}
.fish-art{position:relative;overflow:hidden;background:linear-gradient(180deg,#132f45 0%,#1c4258 46%,#0e2a3a 47%,#081a25 100%)}
.fish-art .moon{position:absolute;top:16%;left:14%;width:34px;height:34px;border-radius:50%;background:#f4efdc;box-shadow:0 0 30px rgba(244,239,220,.45)}
.fish-art .moon-r{position:absolute;top:50%;left:calc(14% + 4px);width:26px;height:40%;background:linear-gradient(180deg,rgba(244,239,220,.35),transparent);filter:blur(3px)}
.fish-art .wave{position:absolute;left:0;width:calc(100% + 120px);height:28px;background-repeat:repeat-x;animation:wave 5s linear infinite;will-change:transform}
.fish-art .w1{top:calc(46% - 14px);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='28' viewBox='0 0 120 28'%3E%3Cpath d='M0 12 Q30 2 60 12 T120 12 V28 H0Z' fill='rgba%2870,140,160,.55%29'/%3E%3C/svg%3E");animation-duration:7s}
.fish-art .w2{top:calc(46% - 6px);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='28' viewBox='0 0 120 28'%3E%3Cpath d='M0 12 Q30 2 60 12 T120 12 V28 H0Z' fill='rgba%2830,90,115,.8%29'/%3E%3C/svg%3E");animation-duration:5s;animation-direction:reverse}
.fish-art .w3{top:calc(46% + 4px);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='28' viewBox='0 0 120 28'%3E%3Cpath d='M0 12 Q30 2 60 12 T120 12 V28 H0Z' fill='%230e2a3a'/%3E%3C/svg%3E");animation-duration:9s}
@keyframes wave{to{transform:translate3d(-120px,0,0)}}
.fish-art .line{position:absolute;right:30%;top:-10%;width:1px;height:calc(56% - 6px);background:rgba(223,247,243,.45);transform-origin:50% 0;animation:sway 3.2s ease-in-out infinite}
.fish-art .bobber{position:absolute;right:calc(30% - 7px);top:calc(46% - 16px);width:15px;height:22px;animation:bob 3.2s ease-in-out infinite;will-change:transform}
@keyframes bob{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(0,4px,0)}}
@keyframes sway{0%,100%{transform:rotate(0)}50%{transform:rotate(.6deg)}}
.fish-art .swim{position:absolute;left:0;top:66%;width:22%;fill:#05131b;opacity:.75;animation:swim 14s linear infinite;will-change:transform}
@keyframes swim{from{transform:translate3d(-120%,0,0)}to{transform:translate3d(520%,0,0)}}
.gcard[data-game=fish]:hover .bobber{animation-duration:.9s}

/* classic logic: graph-paper notebook with a nonogram */
.gcard[data-game=logic]{background-color:#111a29;background-image:linear-gradient(rgba(143,208,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(143,208,255,.06) 1px,transparent 1px);background-size:16px 16px;box-shadow:inset 0 0 0 1px rgba(143,208,255,.14)}
.gcard[data-game=logic] .gcard-status{color:#8fd0ff}
.gcard[data-game=logic] .gcard-one{color:#a4b4cc}
.gcard[data-game=logic] .gcard-year{background:#8fd0ff;color:#08182a;border-radius:3px}
.gcard[data-game=logic] .btn{border-radius:4px;background:#8fd0ff;color:#08182a;box-shadow:none}
.gcard[data-game=logic] .btn--ghost{background:transparent;color:#8fd0ff;box-shadow:inset 0 0 0 2px #8fd0ff}
.gcard[data-game=logic] .btn--ghost:hover{background:#8fd0ff;color:#08182a}
.logic-art{position:relative;display:grid;place-items:center;background:transparent}
.nono{display:grid;grid-template-columns:auto repeat(5,22px);grid-auto-rows:22px;gap:3px;font:700 11px/22px var(--font);color:#a4b4cc;text-align:center}
.nono b{font-weight:700;white-space:pre;word-spacing:3px;padding-right:6px;text-align:right}
.nono i{display:block;border-radius:3px;box-shadow:inset 0 0 0 1.5px rgba(143,208,255,.35)}
.nono i.f{background:#8fd0ff;box-shadow:0 0 10px rgba(143,208,255,.35)}
@media (hover:hover){.nono i.h{background:transparent;box-shadow:inset 0 0 0 1.5px rgba(143,208,255,.35)}.gcard[data-game=logic]:hover .nono i.h{background:#8fd0ff;box-shadow:0 0 10px rgba(143,208,255,.35);transition:background .2s calc(var(--i) * 70ms)}}
.nono i.h{background:#8fd0ff}

/* ---------- about ---------- */
.about{display:grid;gap:28px;position:relative;z-index:1}
@media (min-width:900px){.about{grid-template-columns:3fr 2fr;gap:64px;align-items:start}}
.about p+p{margin-top:14px}
.facts{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px 18px;margin:0;font-size:15px;background:var(--panel);padding:20px;border-radius:16px;box-shadow:inset 0 0 0 1px var(--line)}
.facts dt{color:var(--muted);font-weight:700}
.facts dd{margin:0;overflow-wrap:anywhere}

/* ---------- studio block ---------- */
.studio{display:grid;gap:24px}
@media (min-width:900px){.studio{grid-template-columns:3fr 2fr;gap:64px;align-items:end}}
.contact-list{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.contact-list li{display:flex;justify-content:space-between;gap:16px;padding:14px 0;box-shadow:inset 0 -1px 0 var(--line);font-weight:700}
.contact-list span{color:var(--muted);font-weight:500}

/* ---------- parallax depth ---------- */
.depth{position:relative}
.px-layer{position:absolute;inset:0;pointer-events:none;z-index:0;overflow:visible}
.px{position:absolute;image-rendering:pixelated;will-change:transform;opacity:var(--o,.5);width:var(--w,64px);height:auto}
@media (max-width:719px){.px{opacity:calc(var(--o,.5) * .4)}.px-big{opacity:.28!important}}
.px-big{position:absolute;top:34%;left:0;width:min(256px,52vw);height:auto;image-rendering:pixelated;opacity:.5;pointer-events:none;will-change:transform;z-index:0;transform:translate3d(-120%,0,0)}

/* ---------- footer: tiles that fall away ---------- */
.foot{position:relative;min-height:72vh;min-height:72svh;display:grid;place-items:center;overflow:hidden;padding:80px 0;background:var(--bg)}
.foot-c{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:2}
.foot-in{position:relative;z-index:1;text-align:center}
.foot .wm{font-size:clamp(44px,9vw,96px)}
.foot-line{margin-top:16px;font-size:clamp(17px,2.4vw,22px);font-weight:700}
.foot-links{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 22px;margin-top:22px;font-weight:700;font-size:15px}
.foot-links a{color:var(--ink)}
.foot-small{margin-top:28px;color:var(--muted);font-size:13px;max-width:36em;margin-left:auto;margin-right:auto}
.foot--flat{min-height:0;padding:56px 0 40px;box-shadow:inset 0 1px 0 var(--line)}

/* ---------- cursor trail canvas ---------- */
#fx{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:45}

/* ---------- sub pages ---------- */
.page-top{padding-top:120px}
.ghero{position:relative;padding:112px 0 40px}
.ghero-grid{display:grid;gap:28px;align-items:center}
@media (min-width:900px){.ghero-grid{grid-template-columns:7fr 5fr;gap:48px}}
.ghero-art{border-radius:18px;overflow:hidden;box-shadow:0 24px 60px rgba(0,0,0,.5),inset 0 0 0 1px var(--line);background:var(--panel)}
.ghero-art img{width:100%;height:auto}
.ghero-row{display:flex;gap:18px;align-items:center;flex-wrap:wrap}
.ghero h1{font-size:clamp(32px,5vw,64px);overflow-wrap:anywhere}
.ghero .one{font-size:clamp(18px,2.4vw,24px);color:var(--muted);margin-top:10px;max-width:30em}
.badges{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px;align-items:center}
.badge{display:inline-flex;align-items:center;gap:10px;min-height:54px;padding:0 18px 0 12px;border-radius:12px;background:#000;color:#fff;border:1px solid #6d6485;font-weight:700;line-height:1.05;text-decoration:none!important;position:relative}
.badge small{display:block;font-size:10px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;opacity:.8}
.badge span{font-size:18px}
.badge svg{width:26px;height:26px;flex:none}
.badge[aria-disabled=true]{opacity:.6;cursor:default}
.badge[aria-disabled=true]::after{content:"soon";position:absolute;top:-9px;right:-8px;background:var(--accent);color:var(--accent-ink);font-size:10px;font-weight:900;padding:2px 7px;border-radius:999px;letter-spacing:.08em;text-transform:uppercase}
.gal{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;padding:8px var(--gutter) 22px;margin:28px calc(-1 * var(--gutter)) 0;scrollbar-width:thin;-webkit-overflow-scrolling:touch}
.gal img{flex:0 0 auto;width:min(240px,64vw);aspect-ratio:9/16;height:auto;border-radius:18px;scroll-snap-align:center;box-shadow:0 14px 36px rgba(0,0,0,.45);background:var(--panel)}
.steps{display:grid;gap:14px;margin-top:28px}
@media (min-width:720px){.steps{grid-template-columns:repeat(3,1fr)}}
.step{background:var(--panel);border-radius:16px;padding:22px;box-shadow:inset 0 0 0 1px var(--line)}
.step .num{font-size:42px;line-height:1}
.step h3{font-size:21px;margin-top:10px}
.step p{color:var(--muted);margin-top:8px;font-size:15px}
.rules{list-style:none;padding:0;margin:22px 0 0;display:grid;gap:10px;max-width:40em}
.rules li{position:relative;padding-left:30px;color:var(--muted)}
.rules li::before{content:"";position:absolute;left:0;top:6px;width:16px;height:16px;border-radius:4px;background:var(--tile);box-shadow:inset 1px 1px 0 var(--tile-hi),inset -1px -1px 0 var(--tile-lo)}
.rules b{color:var(--ink)}
.best{display:grid;grid-template-columns:repeat(auto-fill,minmax(148px,1fr));gap:12px;margin-top:28px}
.mon{background:var(--panel);border-radius:14px;padding:18px 12px 16px;text-align:center;box-shadow:inset 2px 2px 0 var(--tile-hi),inset -2px -2px 0 var(--tile-lo);display:grid;justify-items:center;align-content:end;min-height:170px}
.mon img{height:72px;width:auto;image-rendering:pixelated}
.mon b{display:block;margin-top:10px;font-size:15px}
.mon .num{font-size:28px;line-height:1;margin-top:4px}
.credit{color:var(--muted);font-size:14px;margin-top:22px}
.prose{max-width:46em}
.prose h1{font-size:clamp(34px,6vw,60px)}
.prose h2{font-size:24px;margin-top:36px;letter-spacing:-.01em}
.prose p{margin-top:14px;color:var(--muted)}
.prose p strong,.prose li strong{color:var(--ink)}
.prose a{text-decoration:underline}
.prose ul{color:var(--muted);padding-left:22px;margin:12px 0 0}
.prose li+li{margin-top:6px}
.press-grid{display:grid;gap:28px;margin-top:36px}
@media (min-width:900px){.press-grid{grid-template-columns:1fr 1fr;gap:48px;align-items:start}}
.dl-list{list-style:none;padding:0;margin:18px 0 0;display:grid;gap:10px}
.dl-list li{display:flex;justify-content:space-between;align-items:center;gap:12px;background:var(--panel);padding:12px 16px;border-radius:12px;font-weight:700;box-shadow:inset 0 0 0 1px var(--line)}
.dl-list span{color:var(--muted);font-weight:500;font-size:14px;white-space:nowrap}
.logo-box{background:var(--bg);border-radius:16px;padding:32px;box-shadow:inset 0 0 0 2px var(--line);display:grid;place-items:center;gap:24px}
.logo-box img{width:min(100%,520px)}
.shots-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:18px}
.shots-grid img{width:100%;height:auto;aspect-ratio:9/16;border-radius:12px;background:var(--panel)}
.quote{background:var(--panel);border-radius:16px;padding:20px 22px;box-shadow:inset 0 0 0 1px var(--line);margin-top:16px}
.quote p{margin:0;color:var(--muted)}
.quote p strong{color:var(--ink)}
.center{min-height:100vh;min-height:100svh;display:grid;place-items:center;text-align:center;padding:100px 0 60px}
.big404{font-size:clamp(96px,30vw,220px);line-height:1}

/* ---------- reduced motion: simple fades instead of flips ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important}
  .wm-o-in{transition-duration:.25s!important}
  .rv-cover{opacity:calc(1 - clamp(0,var(--p) * 1.6,1));transition:none}
  .rv-cover i{transform:none!important;opacity:1!important}
  .phone{transform:none!important}
  .px,.px-big{transform:none!important}
  .px-big{display:none}
  .fish-art .wave,.fish-art .bobber,.fish-art .line,.fish-art .swim{animation:none!important}
  .fish-art .swim{transform:translate3d(180%,0,0)!important}
  .hero-hint{transition-delay:.3s}
}