/* ================================================================= SKINATOR — glowtoxgames Palette and furniture pulled straight out of the game's own UI: rust, bone, blood red, injector green. ================================================================= */ @font-face{font-family:'PublicPixel';src:url('../assets/fonts/PublicPixel.woff2') format('woff2');font-weight:400;font-display:swap} @font-face{font-family:'Brushot';src:url('../assets/fonts/Brushot-Bold.ttf') format('truetype');font-weight:700;font-display:swap} @font-face{font-family:'LCD';src:url('../assets/fonts/LCDPHONE.ttf') format('truetype');font-weight:400;font-display:swap} :root{ --ink:#070405; --ink-2:#0d0809; --ink-3:#130d0e; --blood:#e01b16; --blood-hot:#ff2f1e; --blood-dim:#7d0f0c; --bone:#efe3c6; --bone-dim:#a2988a; --rust:#4a3f37; --rust-lit:#6f5f51; --gold:#e8c86a; --green:#5ce04a; --yellow:#f5d020; --violet:#8a4bd6; --f-pix:'PublicPixel',ui-monospace,monospace; --f-brush:'Brushot','PublicPixel',sans-serif; --f-lcd:'LCD',ui-monospace,monospace; --f-body:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif; --wrap:1220px; --ease:cubic-bezier(.16,1,.3,1); } *,*::before,*::after{box-sizing:border-box} /* `clip` rather than `hidden`: hidden on alone propagates to the viewport, which lets the full-bleed overlays widen the containing block and push the fixed nav off-screen on phones. */ html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;overflow-x:clip} @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}} body{ margin:0; background:var(--ink); color:var(--bone); font-family:var(--f-body); font-size:17px; line-height:1.65; overflow-x:clip; cursor:url('../assets/ui/cursor.png') 4 2,auto; } a{color:inherit} a,button{cursor:url('../assets/ui/cursor-click.png') 6 4,pointer} img{max-width:100%;display:block} h1,h2,h3{margin:0;line-height:1.02} p{margin:0 0 1em} .wrap{width:min(100% - 2.5rem,var(--wrap));margin-inline:auto} /* ---------- CRT OVERLAY ---------- */ .crt{position:fixed;inset:0;z-index:900;pointer-events:none;overflow:hidden} /* shared with the studio + Shape That Waits pages so every page reads the same */ .progress{ position:fixed;top:0;left:0;height:2px;width:100%;z-index:950;pointer-events:none; background:linear-gradient(90deg,var(--blood),var(--gold)); box-shadow:0 0 14px rgba(224,27,22,.8); transform:scaleX(0);transform-origin:0 50%; } @media (prefers-reduced-motion:reduce){.progress{display:none}} .crt-scan{ position:absolute;inset:0;opacity:.5; background:repeating-linear-gradient(to bottom,rgba(0,0,0,.32) 0 1px,transparent 1px 3px); mix-blend-mode:multiply; } .crt-grain{ position:absolute;inset:-50%;opacity:.05; 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='.8' numOctaves='4'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"); animation:grain 1s steps(4) infinite; } .crt-vignette{ position:absolute;inset:0; background:radial-gradient(130% 100% at 50% 45%,transparent 45%,rgba(0,0,0,.55) 88%,rgba(0,0,0,.9) 100%); } @keyframes grain{ 0%{transform:translate(0,0)}25%{transform:translate(-3%,2%)} 50%{transform:translate(2%,-3%)}75%{transform:translate(-2%,-2%)}100%{transform:translate(0,0)} } @media (prefers-reduced-motion:reduce){.crt-grain,.boot-static{animation:none}} /* ---------- NAV ---------- */ .nav{ position:fixed;top:0;left:0;right:0;z-index:800; display:flex;align-items:center;gap:1.5rem; padding:.85rem clamp(1rem,3vw,2rem); background:linear-gradient(to bottom,rgba(7,4,5,.95),rgba(7,4,5,0)); transition:background .35s ease,border-color .35s ease,padding .35s ease; border-bottom:1px solid transparent; } .nav.is-stuck{ background:rgba(9,6,7,.94);backdrop-filter:blur(10px); border-bottom-color:rgba(224,27,22,.28);padding-block:.6rem; } .nav-brand{ display:flex;align-items:center;gap:.6rem;text-decoration:none; font-family:var(--f-pix);font-size:.78rem;letter-spacing:.18em;color:var(--blood); text-shadow:0 0 14px rgba(224,27,22,.55); } .nav-brand img{image-rendering:pixelated;filter:drop-shadow(0 0 6px rgba(224,27,22,.5))} .nav-links{display:flex;gap:1.6rem;margin-left:auto} .nav-links a{ font-family:var(--f-pix);font-size:.6rem;letter-spacing:.14em;text-decoration:none; color:var(--bone-dim);position:relative;padding-block:.3rem;transition:color .2s; } .nav-links a::after{ content:'';position:absolute;left:0;right:100%;bottom:0;height:2px;background:var(--blood); transition:right .3s var(--ease); } .nav-links a:hover{color:var(--bone)} .nav-links a:hover::after{right:0} .nav-links a.is-active{color:var(--blood)} .nav-links-cta{display:none} .nav-back{ padding-right:1.6rem;margin-right:.2rem;border-right:1px solid rgba(224,27,22,.25); color:var(--bone-dim);opacity:.75; } .nav-back:hover{opacity:1} .nav-cta{margin-left:.5rem} .nav-burger{display:none;background:none;border:0;color:var(--bone);font-size:1.8rem;line-height:1;margin-left:auto} /* ---------- BUTTONS ---------- */ .btn{ display:inline-flex;align-items:center;gap:.6rem; font-family:var(--f-pix);font-size:.62rem;letter-spacing:.14em; padding:.85rem 1.3rem;text-decoration:none;border:1px solid transparent; position:relative;overflow:hidden;transition:transform .18s var(--ease),box-shadow .25s; } .btn img{image-rendering:auto} .btn-lg{font-size:.72rem;padding:1.1rem 1.7rem} .btn-red{ background:var(--blood);color:#fff; box-shadow:0 0 0 rgba(224,27,22,0),inset 0 -3px 0 rgba(0,0,0,.35); } .btn-red:hover{transform:translateY(-2px);box-shadow:0 10px 30px -8px rgba(224,27,22,.75),inset 0 -3px 0 rgba(0,0,0,.35)} .btn-red::before{ content:'';position:absolute;inset:0;background:linear-gradient(115deg,transparent 40%,rgba(255,255,255,.45) 50%,transparent 60%); transform:translateX(-120%); } .btn-red:hover::before{animation:sheen .7s ease} @keyframes sheen{to{transform:translateX(120%)}} .btn-ghost{border-color:var(--rust-lit);color:var(--bone);background:rgba(255,255,255,.02)} .btn-ghost:hover{border-color:var(--bone);transform:translateY(-2px);background:rgba(255,255,255,.06)} /* ---------- HERO ---------- The key art is a set of layers laid out exactly as in the source PSD. .stage-fit is a 16:9 box that always covers the viewport, so the whole composition scales as one piece and the percentages below stay true. */ .hero{ position:relative;min-height:100svh;overflow:hidden;isolation:isolate; display:grid;grid-template-rows:1fr auto;align-items:center; } .stage{position:absolute;inset:0;z-index:0} /* The backdrop covers the viewport, but the cast lives in a box that is always the full width and anchored to the floor — so no matter the aspect ratio, every creature stays on screen. */ .stage-fit{ position:absolute;bottom:0;left:0;width:100%;aspect-ratio:16/9; min-height:64svh; /* the exported layers are ungraded; this stands in for the PSD's curves */ filter:saturate(1.2) contrast(1.06) brightness(1.14); } .hl{ position:absolute;object-fit:contain;object-position:bottom center; will-change:transform,opacity; } .hl-bg{inset:0;width:100%;height:100%;object-fit:cover} /* left..width..top are read off the reference layout. The main creature is sized down from its native proportions so it clears the logo and isn't cropped at the top; the croc sits UNDER the snake in paint order (see markup) and overlaps it so it reads as tucked in behind it rather than as its own centred figure. */ .hl-crt {left:-4%; top:16%; width:38%} /* the four below are read directly off the PSD's own layer centers (5760x3240 canvas), converted to left/top corner via each layer's rendered aspect ratio — see scratchpad calc, not eyeballed */ .hl-croc {left:66.8%; top:62.8%; width:13%} .hl-snake {left:73.2%; top:54.7%; width:18%} .hl-shark {left:81.4%; top:41.3%; width:15%} .hl-astro {left:88.7%; top:25.8%; width:15%} /* the ground/mist pass is a full-frame overlay in the source art, so it covers the whole stage rather than living inside the cast box. Sized 5% past the box on every edge so it still fully covers the frame at the outer limits of the pointer parallax. */ /* the global `img{max-width:100%}` reset would otherwise clamp this straight back down to 100%, silently undoing the buffer */ .hl-ground{left:-2.5%;top:-2.5%;width:105%;height:105%;max-width:none;max-height:none;object-fit:cover;object-position:center bottom;opacity:.88} /* darkens the middle so the copy stays readable over the art */ .stage-scrim{ position:absolute;inset:0; background: radial-gradient(38% 24% at 50% 62%,rgba(7,4,5,.66),rgba(7,4,5,.3) 60%,transparent 80%), linear-gradient(to bottom,rgba(7,4,5,.5) 0%,transparent 13%,transparent 82%,rgba(7,4,5,.55) 94%,var(--ink) 100%); } /* the CRT power-on wipe that opens the intro */ .stage-power{ position:absolute;left:0;right:0;top:50%;height:2px;background:#fff; box-shadow:0 0 60px 12px rgba(255,255,255,.85);opacity:0; } .hero-content{ position:relative;z-index:2;text-align:center; width:min(100% - 2.5rem,var(--wrap));margin-inline:auto; padding:6rem 0 2rem; } .hero-logo{margin:0 0 1.4rem} .hero-logo img{ width:min(620px,72%);height:auto;margin-inline:auto; filter:drop-shadow(0 0 46px rgba(224,27,22,.55)) drop-shadow(0 8px 0 rgba(0,0,0,.55)); } .hero-logo.is-lit img{animation:logoFlicker 7s steps(1,end) 1.6s infinite} @keyframes logoFlicker{ 0%,88%,100%{opacity:1} 89%{opacity:.35}90%{opacity:1}92%{opacity:.5}93%{opacity:1} } .hero-tag{ font-family:var(--f-brush);font-size:clamp(1.9rem,4.8vw,3.4rem);line-height:1; margin:0 0 1.2rem;letter-spacing:.01em; text-shadow:0 3px 18px rgba(0,0,0,.9); } .hero-tag em{color:var(--blood);font-style:normal;text-shadow:0 0 26px rgba(224,27,22,.65),0 3px 18px rgba(0,0,0,.9)} .hero-sub{ /* brighter than the shared --bone-dim used elsewhere, since this sits directly over dark art and needs the extra contrast */ color:#c7bdae;font-size:1rem;line-height:1.7;max-width:62ch; margin:0 auto 2.2rem;text-shadow:0 2px 12px rgba(0,0,0,.95); } .hero-cta{display:flex;flex-wrap:wrap;gap:.9rem;justify-content:center} .btn-play{color:var(--blood);font-size:.85em;line-height:1} .btn-ghost{backdrop-filter:blur(4px);background:rgba(7,4,5,.45)} /* ---------- HERO INTRO ---------- Short and understated: the screen powers on, the cast fades up from the floor, the logo settles, then the copy and buttons arrive. */ .hero.is-intro .hl{opacity:0} .hero.is-intro .hero-logo, .hero.is-intro .hero-tag, .hero.is-intro .hero-sub, .hero.is-intro .hero-cta>*{opacity:0} .hero.is-live .stage-power{animation:powerOn .5s var(--ease) forwards} @keyframes powerOn{ 0%{opacity:1;transform:scaleX(.2) scaleY(1)} 45%{opacity:1;transform:scaleX(1) scaleY(1)} 100%{opacity:0;transform:scaleX(1) scaleY(320)} } .hero.is-live .hl{animation:layerIn .55s var(--ease) forwards} /* the ground/feet cover leads the sequence so the cast never appears to be standing on nothing, even for a frame */ .hero.is-live .hl-ground{animation-duration:.4s;animation-delay:0s} .hero.is-live .hl-bg{animation-duration:.45s;animation-delay:.08s} .hero.is-live .hl-crt{animation-delay:.28s} .hero.is-live .hl-croc{animation-delay:.40s} .hero.is-live .hl-snake{animation-delay:.34s} .hero.is-live .hl-shark{animation-delay:.28s} .hero.is-live .hl-astro{animation-delay:.22s} @keyframes layerIn{ from{opacity:0;transform:translateY(3.5%) scale(1.02)} to{opacity:1;transform:none} } .hero.is-live .hero-logo{animation:logoIn .6s var(--ease) .34s forwards} @keyframes logoIn{ 0%{opacity:0;transform:scale(1.07)} 60%{opacity:1} 100%{opacity:1;transform:none} } .hero.is-live .hero-tag{animation:copyIn .5s var(--ease) .72s forwards} .hero.is-live .hero-sub{animation:copyIn .5s var(--ease) .84s forwards} .hero.is-live .hero-cta>*:nth-child(1){animation:btnPop .42s var(--ease) .98s forwards} .hero.is-live .hero-cta>*:nth-child(2){animation:btnPop .42s var(--ease) 1.06s forwards} .hero.is-live .hero-cta>*:nth-child(3){animation:btnPop .42s var(--ease) 1.14s forwards} @keyframes copyIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}} @keyframes btnPop{ 0%{opacity:0;transform:translateY(12px) scale(.94)} 70%{opacity:1;transform:translateY(0) scale(1.03)} 100%{opacity:1;transform:none} } .hero-scroll{ position:relative;justify-self:center;margin-bottom:1.6rem;z-index:3; font-family:var(--f-pix);font-size:.5rem;letter-spacing:.35em;color:var(--bone-dim); display:flex;flex-direction:column;align-items:center;gap:.6rem; } .hero-scroll span{width:1px;height:36px;background:linear-gradient(to bottom,transparent,var(--blood));animation:scrollPulse 2s ease-in-out infinite} @keyframes scrollPulse{0%,100%{opacity:.2;transform:scaleY(.6)}50%{opacity:1;transform:scaleY(1)}} /* ---------- 360 ROTATOR ---------- */ .rot{ width:100%;aspect-ratio:250/444; background-repeat:no-repeat;background-size:800% 100%;background-position:0% 0; } /* .rot-big is only ever used inside .beast-viewer below, sized/positioned there */ /* ---------- SECTIONS ---------- */ .section{padding:clamp(4.5rem,9vw,8rem) 0;position:relative} .section-dark{background:var(--ink-2);border-block:1px solid rgba(224,27,22,.14)} .h2{ font-family:var(--f-brush);font-size:clamp(2.1rem,5.4vw,3.6rem); display:flex;align-items:baseline;gap:1rem;margin-bottom:.8rem; } .h2 em{color:var(--blood);font-style:normal;text-shadow:0 2px 0 rgba(0,0,0,.9),0 0 14px rgba(224,27,22,.6)} /* sized down from the default .h2 clamp so this longer line fits on one row at normal column widths instead of wrapping */ .h2-tight{font-size:clamp(1.15rem,2.1vw,1.8rem)} .h2-num{ font-family:var(--f-pix);font-size:.7rem;color:var(--blood);letter-spacing:.2em; border:1px solid rgba(224,27,22,.4);padding:.4rem .6rem;flex:none; } .lede{color:var(--bone-dim);font-size:1.1rem;max-width:62ch;margin-bottom:3rem} .lede b{color:var(--bone);font-weight:600} .lede em{color:var(--bone);font-style:italic} /* ---------- LOOP CARDS ---------- */ .loop-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.2rem} .loop-card{ border:1px solid var(--rust);background:linear-gradient(160deg,rgba(74,63,55,.22),rgba(7,4,5,.5)); padding:1.6rem 1.5rem 0;position:relative;overflow:hidden; transition:border-color .3s,transform .3s var(--ease); } .loop-card:hover{border-color:var(--blood);transform:translateY(-4px)} .loop-step{font-family:var(--f-pix);font-size:.52rem;letter-spacing:.25em;color:var(--blood);margin-bottom:.9rem} .loop-card h3{font-family:var(--f-brush);font-size:1.75rem;margin-bottom:.7rem} .loop-card p{color:var(--bone-dim);font-size:.96rem} .loop-art{height:160px;display:grid;place-items:center;position:relative;margin-top:.5rem;padding:1.6rem 0 1.2rem} .loop-art-parts{display:flex;justify-content:center;align-items:flex-end;gap:.5rem;padding-top:2.2rem} .part-slot{position:relative;display:flex;align-items:flex-end} .part-slot img{height:76px;width:auto;filter:drop-shadow(0 0 12px rgba(232,200,106,.25));transition:transform .3s var(--ease)} .part-slot:hover img{transform:translateY(-10px) scale(1.08)} .part-label{ position:absolute;bottom:100%;left:50%;translate:-50% 14px;margin-bottom:14px; font-family:var(--f-pix);font-size:.5rem;letter-spacing:.12em;color:var(--gold); white-space:nowrap;opacity:0;pointer-events:none; text-shadow:0 0 10px rgba(232,200,106,.7),0 2px 0 #000; transition:opacity .2s var(--ease),translate .2s var(--ease); } .part-slot:hover .part-label{opacity:1;translate:-50% -6px} /* card 2 — two fighters slide together the first time the card is seen */ .loop-art-fighters{display:flex;align-items:center;justify-content:center;gap:1.4rem;width:100%} .fighter{ height:150px;width:auto;flex:none; filter:drop-shadow(0 6px 10px rgba(0,0,0,.7)); transition:transform .7s var(--ease); } .fighter-l{transform:translateX(28px)} .fighter-r{transform:translateX(-28px)} .loop-card-fight.is-fighting .fighter-l{transform:translateX(0)} .loop-card-fight.is-fighting .fighter-r{transform:translateX(0)} .loop-vs{ font-family:var(--f-pix);font-size:.6rem;letter-spacing:.1em;color:var(--blood); text-shadow:0 0 12px rgba(224,27,22,.7); } /* card 3 — three real builds, dissolving into one another so the added parts stay readable mid-transition instead of a hard cut */ .loop-card-evolve{padding-bottom:1.6rem} .loop-art-evolve{position:relative;width:100%;height:240px} .evolve-frame{ position:absolute;inset:0;width:100%;height:100%; object-fit:contain;object-position:bottom center; filter:drop-shadow(0 6px 10px rgba(0,0,0,.7)); opacity:0;transition:opacity 1.1s ease; } .evolve-frame.is-on{opacity:1} @media (prefers-reduced-motion:reduce){ .evolve-frame{transition:none} .fighter-l,.fighter-r{transform:none} } /* ---------- STATLINE ---------- */ .statline{ display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1px; margin:3rem auto 0;background:var(--rust);border:1px solid var(--rust);max-width:520px; } .stat{ background:var(--ink);padding:1.5rem 1rem;text-align:center; text-decoration:none;display:block;transition:background .2s; } .stat:hover{background:rgba(224,27,22,.12)} .stat b{display:block;font-family:var(--f-lcd);font-size:2.9rem;line-height:1;color:var(--blood);text-shadow:0 0 20px rgba(224,27,22,.45)} .stat label{font-family:var(--f-pix);font-size:.5rem;letter-spacing:.2em;color:var(--bone-dim);display:block;margin-top:.7rem} /* ---------- PLAY IN BROWSER (real itch.io embed) ---------- */ .itch-frame{ border:1px solid var(--rust);background:#0b0708;padding:clamp(.5rem,1.4vw,1rem); box-shadow:0 40px 90px -50px rgba(224,27,22,.6); } .itch-frame iframe{ display:block;width:100%;aspect-ratio:980/640;border:0;background:#000; } .trailer-frame iframe{aspect-ratio:16/9} .itch-poster{ position:relative;width:100%;aspect-ratio:980/640;overflow:hidden; display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.6rem; cursor:pointer;background:#000; } .itch-poster-bg{ position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center; } .itch-poster::after{ content:'';position:absolute;inset:0; background:linear-gradient(to bottom,rgba(7,4,5,.05),rgba(7,4,5,.35) 60%,rgba(7,4,5,.75)); } .itch-poster-logo{ position:relative;z-index:1;max-width:50%;height:auto; filter:drop-shadow(0 10px 30px rgba(0,0,0,.85));pointer-events:none; } .itch-run{position:relative;z-index:1} .itch-link{ display:inline-block;margin-top:1.4rem; font-family:var(--f-pix);font-size:.58rem;letter-spacing:.14em;color:var(--blood); text-decoration:none;border-bottom:1px solid rgba(224,27,22,.4);padding-bottom:.2rem; transition:border-color .2s,color .2s; } .itch-link:hover{color:var(--bone);border-color:var(--bone)} /* ---------- SKINATE ---------- */ .section-skinate{background: radial-gradient(120% 80% at 80% 20%,rgba(125,15,12,.28),transparent 60%),var(--ink)} .skinate-wrap{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4.5rem);align-items:center} .skinate-copy p{color:var(--bone-dim)} .skinate-copy em{color:var(--bone);font-style:italic} .skinate-ask{ font-family:var(--f-brush);font-size:1.4rem;color:var(--bone); margin-top:1.6rem!important; } .skinate-list{list-style:none;margin:1.6rem 0;padding:0;display:grid;gap:.6rem} .skinate-list li{ border:1px solid var(--rust);padding:.7rem .9rem;color:var(--bone-dim);font-size:.94rem; transition:border-color .25s,background .25s; } .skinate-list li:hover{border-color:var(--blood);background:rgba(224,27,22,.06)} .skinate-list b{color:var(--blood);font-family:var(--f-pix);font-size:.55rem;letter-spacing:.14em;margin-right:.4rem} .quote{ font-family:var(--f-brush);font-size:1.5rem;line-height:1.25;color:var(--bone); border-left:3px solid var(--blood);padding-left:1.1rem;margin-top:2rem; } .quote cite{display:block;font-family:var(--f-pix);font-size:.5rem;letter-spacing:.18em;color:var(--bone-dim);font-style:normal;margin-top:.8rem} .skinate-art{position:relative} .swap{display:grid;grid-template-columns:1fr auto 1fr;gap:1rem;align-items:center} .swap-card{ border:1px solid var(--rust);background:linear-gradient(160deg,rgba(74,63,55,.3),rgba(10,7,8,.85)); padding:1.1rem .8rem;text-align:center;position:relative;transition:transform .35s var(--ease),border-color .3s; } .swap-card img{height:120px;width:auto;margin:1rem auto;filter:drop-shadow(0 0 14px rgba(0,0,0,.8))} .swap-tag{font-family:var(--f-pix);font-size:.45rem;letter-spacing:.16em;color:var(--bone-dim)} .swap-offer{border-color:var(--blood-dim)} .swap-offer .swap-tag{color:var(--blood)} .swap-mods{display:flex;justify-content:center;gap:.25rem} .swap-mods img{width:26px;height:26px;margin:0;filter:none} .swap-arrow{font-size:1.6rem;color:var(--blood);animation:swapPulse 2s ease-in-out infinite} @keyframes swapPulse{50%{transform:scale(1.25);text-shadow:0 0 18px rgba(224,27,22,.9)}} .skinate-art:hover .swap-offer{transform:translateY(-6px) scale(1.03);border-color:var(--blood)} .skinate-art:hover .swap-yours{transform:translateY(6px) scale(.97);opacity:.6} .stamp{ position:absolute;left:50%;top:50%;translate:-50% -50%;width:min(92%,360px); opacity:0;pointer-events:none; } .stamp.is-on{animation:stampHit 1.1s var(--ease)} /* ---------- EXTRACT SPAWN ---------- */ .section-spawn{background: radial-gradient(120% 80% at 20% 80%,rgba(125,15,12,.28),transparent 60%),var(--ink)} .spawn-wrap{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4.5rem);align-items:center} .spawn-copy p{color:var(--bone-dim)} .spawn-art{ border:1px solid var(--rust);background:linear-gradient(160deg,rgba(74,63,55,.3),rgba(10,7,8,.85)); padding:.6rem;overflow:hidden; } .spawn-media{display:block;width:100%;height:auto;background:#050405} @keyframes stampHit{ 0%{opacity:0;transform:scale(2.2) rotate(-14deg)} 22%{opacity:1;transform:scale(.92) rotate(-7deg)} 32%{transform:scale(1.02) rotate(-7deg)} 75%{opacity:1;transform:scale(1) rotate(-7deg)} 100%{opacity:0;transform:scale(1.05) rotate(-7deg)} } /* ---------- CODEX ---------- */ .codex-tabs{display:flex;gap:.5rem;margin-bottom:1.8rem;flex-wrap:wrap} .ctab{ background:none;border:1px solid var(--rust);color:var(--bone-dim); font-family:var(--f-pix);font-size:.56rem;letter-spacing:.15em;padding:.8rem 1.1rem; display:flex;align-items:center;gap:.6rem;transition:all .22s; } .ctab i{font-family:var(--f-lcd);font-size:.95rem;font-style:normal;opacity:.6} .ctab:hover{color:var(--bone);border-color:var(--bone-dim)} .ctab.is-on{background:var(--blood);border-color:var(--blood);color:#fff} .ctab.is-on i{opacity:.85} .filters{display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;align-items:center;margin-bottom:1.6rem} .chips{display:flex;flex-wrap:wrap;gap:.4rem} .chips[hidden]{display:none} .chip{ background:none;border:1px solid var(--rust);color:var(--bone-dim); font-family:var(--f-pix);font-size:.5rem;letter-spacing:.13em;padding:.55rem .8rem;transition:all .2s; } .chip:hover{color:var(--bone);border-color:var(--bone-dim)} .chip.is-on{background:rgba(224,27,22,.16);border-color:var(--blood);color:var(--blood)} .search{ display:flex;align-items:center;gap:.6rem;border:1px solid var(--rust);padding:.5rem .8rem; background:rgba(0,0,0,.35);transition:border-color .2s; } .search:focus-within{border-color:var(--blood)} .search span{color:var(--blood)} .search input{ background:none;border:0;outline:none;color:var(--bone);width:200px; font-family:var(--f-pix);font-size:.52rem;letter-spacing:.1em; } .search input::placeholder{color:var(--bone-dim);opacity:.6} .mod-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:.7rem} .mod{ display:flex;gap:.85rem;align-items:flex-start; border:1px solid var(--rust);background:linear-gradient(150deg,rgba(74,63,55,.18),rgba(10,7,8,.7)); padding:.85rem;position:relative;overflow:hidden; transition:border-color .22s,transform .25s var(--ease),background .22s; animation:modIn .35s var(--ease) both; } @keyframes modIn{from{opacity:0;transform:translateY(10px)}} .mod:hover{border-color:var(--blood);transform:translateY(-3px);background:linear-gradient(150deg,rgba(224,27,22,.1),rgba(10,7,8,.8))} .mod-icon{width:46px;height:46px;flex:none;image-rendering:auto;transition:transform .3s var(--ease)} .mod:hover .mod-icon{transform:scale(1.1) rotate(-4deg)} .mod-body{min-width:0} .mod-top{display:flex;align-items:center;gap:.5rem;margin-bottom:.35rem;flex-wrap:wrap} .mod-name{font-family:var(--f-pix);font-size:.58rem;letter-spacing:.1em;color:var(--bone)} .mod-grade{width:19px;height:19px;flex:none} .mod-desc{font-size:.85rem;line-height:1.5;color:var(--bone-dim);margin:0} .mod-meta{display:flex;gap:.5rem;margin-top:.5rem;flex-wrap:wrap} .mod-meta span{font-family:var(--f-pix);font-size:.4rem;letter-spacing:.12em;color:var(--bone-dim);border:1px solid var(--rust);padding:.22rem .4rem} .mod[data-cat="God Eye"]{border-left:3px solid var(--violet)} .mod[data-cat="Attack"]{border-left:3px solid var(--blood)} .mod[data-cat="Support"]{border-left:3px solid var(--yellow)} .mod[data-cat="Heart"]{border-left:3px solid #ff5fa8} .mod[data-cat="Offensive"]{border-left:3px solid var(--blood)} .mod[data-cat="Defensive"]{border-left:3px solid #4a9fe0} .mod[data-cat="Passive"]{border-left:3px solid var(--gold)} .empty{font-family:var(--f-pix);font-size:.6rem;color:var(--bone-dim);text-align:center;padding:3rem 0} /* ---------- BESTIARY (now "Enemies") ---------- The viewer sits inside the game's own character-bottle UI art (a fully opaque glass-jar texture, no alpha) — layered on TOP of the rotator with mix-blend-mode:screen so its dark cap regions don't erase the character while the glass highlights still read as a jar. */ .bestiary-layout{ display:grid;grid-template-columns:minmax(260px,380px) 1fr;gap:clamp(1.5rem,4vw,3rem); align-items:start;margin-bottom:1rem; } .beast-viewer{ position:relative;aspect-ratio:661/1348;width:100%;margin-inline:auto; display:grid;place-items:center; cursor:url('../assets/ui/cursor-click.png') 6 4,grab; touch-action:pan-y;user-select:none;overflow:hidden; } .beast-viewer.is-grabbing{cursor:url('../assets/ui/cursor-click.png') 6 4,grabbing} .beast-bottle{ position:absolute;inset:0;width:100%;height:100%; mix-blend-mode:screen;filter:brightness(.5) grayscale(1);pointer-events:none;z-index:2; } .rot-big{width:77%;aspect-ratio:250/444;position:relative;z-index:3} .beast-plinth{ position:absolute;bottom:14%;left:50%;translate:-50% 0;width:50%;height:10%; background:radial-gradient(50% 50% at 50% 50%,rgba(224,27,22,.35),transparent 70%); filter:blur(6px);z-index:1; } .beast-hint{ position:absolute;bottom:4%;left:50%;translate:-50% 0;z-index:3; font-family:var(--f-pix);font-size:.68rem;letter-spacing:.24em;color:var(--bone-dim);opacity:.55; animation:hintBreath 2.6s ease-in-out infinite; } @keyframes hintBreath{50%{opacity:1}} .beast-info-mini{ position:absolute;top:4%;left:0;right:0;text-align:center;z-index:3; } .beast-info-mini h3{font-family:var(--f-brush);font-size:clamp(1.5rem,3.4vw,2rem);margin:.2rem 0 0;color:var(--bone)} /* right side: a grid, not a strip, so all enemies are visible at once */ .beast-rail{ display:grid;grid-template-columns:repeat(6,1fr);gap:.5rem;align-content:start; height:min(66vh,620px);overflow-y:auto;padding-right:.4rem; scrollbar-width:thin;scrollbar-color:var(--rust) transparent; } .beast-rail::-webkit-scrollbar{width:6px} .beast-rail::-webkit-scrollbar-thumb{background:var(--rust)} .beast-thumb{ aspect-ratio:250/444;border:1px solid var(--rust);background-color:rgba(0,0,0,.4); background-repeat:no-repeat;background-size:800% 100%;background-position:0 0; background-origin:content-box;background-clip:content-box; padding:9% 7% 3%;box-sizing:border-box; box-shadow:inset 0 0 0 1px rgba(232,200,106,.12); transition:border-color .2s,transform .25s var(--ease),background-color .2s,box-shadow .2s; position:relative; } .beast-thumb:hover{border-color:var(--bone-dim);transform:translateY(-4px);box-shadow:inset 0 0 0 1px rgba(232,200,106,.3)} .beast-thumb.is-on{border-color:var(--blood);background-color:rgba(224,27,22,.1);box-shadow:inset 0 0 0 1px rgba(232,200,106,.3),0 0 22px -6px rgba(224,27,22,.8)} /* ---------- PARASITES ---------- */ .para-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1.1rem} .para{ display:flex;flex-direction:column; border:1px solid var(--rust);background:linear-gradient(170deg,rgba(74,63,55,.2),rgba(10,7,8,.75)); padding:1.4rem;text-align:center;transition:border-color .3s; } .para:hover{border-color:var(--blood)} .para-stage{height:190px;display:grid;place-items:center;position:relative;margin-bottom:1rem} .para-stage img{ max-height:180px;width:auto;filter:drop-shadow(0 0 20px rgba(0,0,0,.9)); animation:paraIn .4s var(--ease); transition:opacity .14s var(--ease),transform .14s var(--ease); } .para-stage img.is-swapping{opacity:0;transform:scale(.92)} @keyframes paraIn{from{opacity:0;transform:scale(.85)}to{opacity:1;transform:none}} .para h3{font-family:var(--f-brush);font-size:1.6rem;margin-bottom:.2rem} .para-stat{font-family:var(--f-pix);font-size:.48rem;letter-spacing:.18em;color:var(--blood);display:block;margin-bottom:.8rem} .para p{color:var(--bone-dim);font-size:.9rem;min-height:4.2em} /* margin-top:auto pins this row to the same bottom edge on every card in the row, regardless of how much text sits above it on any given card */ .para-tiers{display:flex;gap:.3rem;justify-content:center;margin-top:auto;padding-top:1rem} .para-tier{ flex:1;background:none;border:1px solid var(--rust);color:var(--bone-dim); font-family:var(--f-pix);font-size:.4rem;letter-spacing:.1em;padding:.45rem .2rem;transition:all .2s; } .para-tier:hover{color:var(--bone)} .para-tier.is-on{background:rgba(224,27,22,.18);border-color:var(--blood);color:var(--blood)} /* ---------- MAP / NPC ---------- */ .section-map{background: linear-gradient(rgba(7,4,5,.9),rgba(7,4,5,.97)),url('../assets/env/temple.webp') center/cover fixed} .npc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:1rem;align-items:start} .npc{ border:1px solid var(--rust);background:rgba(10,7,8,.8);backdrop-filter:blur(3px); overflow:hidden;position:relative;transition:border-color .3s,transform .35s var(--ease); } .npc:hover{border-color:var(--blood);transform:translateY(-5px)} .npc.is-expanded{border-color:var(--blood)} .npc-face{ all:unset;display:block;width:100%;height:180px;position:relative;overflow:hidden;cursor:pointer; background:radial-gradient(60% 60% at 50% 45%,rgba(224,27,22,.14),transparent 70%); transition:height .55s var(--ease); } .npc-face-img{ position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:center bottom; transition:opacity .3s var(--ease),transform .5s var(--ease),filter .4s;filter:grayscale(.35) contrast(1.05); } .npc:hover .npc-face-img{transform:scale(1.07);filter:grayscale(0) contrast(1.1)} .npc-rot{position:absolute;inset:0;opacity:0;transition:opacity .35s var(--ease);pointer-events:none} .npc.is-expanded .npc-face-img{opacity:0} .npc.is-expanded .npc-face{display:flex;justify-content:center;align-items:flex-start;padding-top:.8rem} .npc.is-expanded .npc-rot{position:relative;inset:auto;opacity:1} .npc-360-tag{ position:absolute;top:.6rem;right:.6rem;z-index:2; font-family:var(--f-pix);font-size:.56rem;letter-spacing:.14em;color:var(--bone); border:1px solid var(--rust);background:rgba(7,4,5,.8);padding:.4rem .55rem; opacity:1;transition:opacity .25s var(--ease),color .25s var(--ease);pointer-events:none; } .npc:hover .npc-360-tag{border-color:var(--blood)} .npc.is-expanded .npc-360-tag{color:var(--blood);border-color:var(--blood)} .npc-body{padding:1.1rem;display:flex;flex-direction:column} .npc-role{font-family:var(--f-pix);font-size:.44rem;letter-spacing:.16em;color:var(--blood)} .npc h3{font-family:var(--f-brush);font-size:1.5rem;margin:.3rem 0 .6rem} .npc-quote{font-style:italic;color:var(--bone);font-size:.92rem;border-left:2px solid var(--blood-dim);padding-left:.7rem;margin-bottom:.6rem} .npc p.npc-text{color:var(--bone-dim);font-size:.86rem;margin:0} @media (prefers-reduced-motion:reduce){ .npc-face{transition:none} .npc-face-img,.npc-rot{transition:none} } /* ---------- ACHIEVEMENTS ---------- */ .ach-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:.8rem} .ach{ border:1px solid var(--rust);background:rgba(10,7,8,.6);padding:1.1rem .8rem;text-align:center; transition:border-color .25s,transform .3s var(--ease);position:relative;overflow:hidden; } .ach:hover{border-color:var(--gold);transform:translateY(-4px)} .ach-icon{position:relative;width:64px;height:64px;margin:0 auto .8rem} .ach-icon img{position:absolute;inset:0;width:100%;height:100%;transition:opacity .45s ease,transform .45s var(--ease)} .ach-icon .unlocked{opacity:0;transform:scale(.85) rotate(-8deg)} .ach.is-unlocked .locked{opacity:0;transform:scale(1.1)} .ach.is-unlocked .unlocked{opacity:1;transform:none;filter:drop-shadow(0 0 14px rgba(232,200,106,.5))} .ach-name{font-family:var(--f-pix);font-size:.48rem;letter-spacing:.1em;color:var(--bone);display:block;margin-bottom:.5rem;line-height:1.6} .ach-desc{font-size:.76rem;color:var(--bone-dim);line-height:1.45;margin:0;opacity:.65;transition:opacity .25s} .ach:hover .ach-desc{opacity:1} /* ---------- WISHLIST ---------- */ .wishlist{text-align:center;position:relative;overflow:hidden;padding-block:clamp(5rem,12vw,9rem)} .wish-bg{ position:absolute;inset:0; background:url('../assets/env/gy-fg-small.webp') center bottom/cover no-repeat; opacity:.35;filter:brightness(.4) saturate(1.4); } .wishlist::after{ content:'';position:absolute;inset:0; background:radial-gradient(70% 60% at 50% 45%,rgba(224,27,22,.22),transparent 70%), linear-gradient(to bottom,var(--ink),transparent 25%,rgba(7,4,5,.7)); } .wish-wrap{position:relative;z-index:2} .wish-skull{ width:96px;margin:0 auto 1.6rem; filter:drop-shadow(0 0 30px rgba(232,200,106,.45)); animation:float 5s ease-in-out infinite; } @keyframes float{50%{transform:translateY(-12px)}} .wishlist h2{font-family:var(--f-brush);font-size:clamp(2.4rem,7vw,4.6rem);margin-bottom:1rem} .wish-lede{color:var(--bone-dim);max-width:52ch;margin:0 auto 2.2rem;font-size:1.08rem} .wish-cta{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap} .wish-note{font-family:var(--f-pix);font-size:.5rem;letter-spacing:.14em;color:var(--bone-dim);margin:2.4rem 0 0;opacity:.7} /* ---------- WALKER STRIP ---------- A little background life at the bottom of the page: the robotized skeleton crosses left-to-right on a loop and a wishlist nudge appears, fixed in place, right as it passes the middle of the screen. */ .walker-track{ position:relative;z-index:2;height:clamp(110px,16vw,150px);overflow:hidden; margin-top:1.6rem; } .walker-anim{ position:absolute;bottom:0;left:0; animation:walkAcross 14s linear infinite; } .walker-img{ display:block;height:clamp(90px,13vw,130px);width:auto; filter:drop-shadow(0 8px 10px rgba(0,0,0,.6)); } @keyframes walkAcross{ from{transform:translateX(-160px)} to{transform:translateX(calc(100vw + 160px))} } .walker-msg{ position:absolute;top:22%;left:50%;translate:-50% 0; font-family:var(--f-pix);font-size:clamp(.6rem,1.6vw,.85rem);letter-spacing:.14em; color:var(--blood);text-shadow:0 0 16px rgba(224,27,22,.7),0 2px 0 #000; white-space:nowrap;opacity:0;animation:walkerMsg 14s linear infinite; } @keyframes walkerMsg{ 0%,45%{opacity:0} 46%,50%{opacity:1} 57.14%,100%{opacity:0} } @media (prefers-reduced-motion:reduce){ .walker-anim{animation:none;left:calc(50% - 65px)} .walker-msg{animation:none;opacity:0} } /* ---------- FOOTER ---------- */ .foot{border-top:1px solid rgba(224,27,22,.2);padding:2.5rem 0 3rem;background:var(--ink-2)} .foot-wrap{display:flex;flex-wrap:wrap;gap:1.2rem 1.5rem;align-items:center;justify-content:space-between} .foot-wrap>div:first-child{display:flex;align-items:center;gap:.8rem} .foot-wrap b{font-family:var(--f-pix);font-size:.68rem;letter-spacing:.16em;color:var(--blood)} .foot-wrap span{font-size:.85rem;color:var(--bone-dim)} .foot-links{display:flex;gap:1.4rem} .foot-links a{font-family:var(--f-pix);font-size:.5rem;letter-spacing:.13em;color:var(--bone-dim);text-decoration:none} .foot-links a:hover{color:var(--blood)} .foot-note{width:100%;font-family:var(--f-pix);font-size:.44rem;letter-spacing:.14em;color:var(--bone-dim);opacity:.5;margin:0} /* ---------- REVEAL ---------- */ .reveal{opacity:0;transform:translateY(26px);transition:opacity .7s var(--ease),transform .7s var(--ease)} .reveal.is-in{opacity:1;transform:none} @media (prefers-reduced-motion:reduce){ .reveal{opacity:1;transform:none;transition:none} .wish-skull,.swap-arrow,.hero-logo img,.hero-scroll span{animation:none} } /* ---------- RESPONSIVE ---------- */ @media (max-width:1080px){ .skinate-wrap{grid-template-columns:1fr} .spawn-wrap{grid-template-columns:1fr} } @media (max-width:860px){ body{font-size:16px} .nav-links{ position:fixed;inset:56px 0 auto;flex-direction:column;gap:0; background:rgba(9,6,7,.98);border-bottom:1px solid var(--rust); padding:1rem 1.5rem;display:none; } .nav-links.is-open{display:flex} .nav-links a{padding:.9rem 0;font-size:.68rem} .nav-links-cta{display:block;color:var(--blood);margin-top:.6rem;border-top:1px solid var(--rust)} .nav-burger{display:block} .nav-cta{display:none} .hero-content{padding-top:4.5rem} .hero-sub{font-size:.95rem} .hero-logo img{width:88%} .hero-cta{flex-direction:column;align-items:stretch} .hero-cta .btn{justify-content:center} .search input{width:130px} } @media (max-width:520px){ .h2{flex-direction:column;gap:.6rem;align-items:flex-start} .ach-grid{grid-template-columns:repeat(auto-fill,minmax(128px,1fr))} }