/* Ready Check landing. The hero and the closing band are the game's own title
   painting (moonlit castle, indigo and warm windows). Everything between is
   daylight in the key-art palette: sky blue, grey battlement stone, royal blue
   and gold, turquoise water. Heroes and bosses are spotlight carousels on
   saturated stages. Full-bleed sections; only media gets a frame.
   Order: tokens, base, shared pieces, sections top to bottom, states, responsive. */
:root{
  --night:#14102e; --navy:#0d1430; --navy-2:#0a0f24;
  --sky-1:#4aa9f0; --sky-2:#a9defc; --sky-3:#d8f1ff; --sea-1:#2cc4d6; --sea-2:#1292b8;
  --royal-1:#2f5fe0; --royal-2:#18297f;
  --stone-1:#d3d8e1; --stone-2:#aab0bd; --stone-3:#858c9c;
  --ink:#12264d; --paper:#f6f0e0; --soft:#d9d4e6;
  --gold-hi:#ffe9a6; --gold:#f2c24a; --gold-lo:#9a6b1e;
  --ready:#5be36b; --wait:#ffd34d;
  --c:12px;
  --chamfer:polygon(var(--c) 0,calc(100% - var(--c)) 0,100% var(--c),100% calc(100% - var(--c)),calc(100% - var(--c)) 100%,var(--c) 100%,0 calc(100% - var(--c)),0 var(--c));
  --battlement:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='34'%3E%3Cpath d='M0 34V0h34v16h26V0h34v16h26v18z'/%3E%3C/svg%3E");
  --out:cubic-bezier(.16,1,.3,1); --back:cubic-bezier(.34,1.56,.64,1); --in:cubic-bezier(.7,0,.84,0);
  --display:"Lilita One","Arial Black",Impact,sans-serif;
  --body:"Barlow",system-ui,-apple-system,"Segoe UI",sans-serif;
  --label:"Barlow Condensed","Arial Narrow",var(--body);
  --gap:clamp(80px,9vw,136px);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:76px;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--navy-2);color:var(--paper);font:500 18px/1.55 var(--body);overflow-x:hidden}
img,svg{display:block}
img{max-width:100%;height:auto}
a{color:inherit}
h1,h2{font-family:var(--display);font-weight:400;line-height:1;margin:0;letter-spacing:.01em;text-wrap:balance}
p,ul,ol,figure{margin:0}
ul,ol{padding:0;list-style:none}
section{position:relative}
[hidden]{display:none!important}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.skip{position:fixed;left:16px;top:-60px;z-index:100;background:var(--paper);color:var(--ink);padding:10px 16px;border-radius:6px;font-weight:700}
.skip:focus{top:12px}
.wrap{width:min(1240px,100% - 40px);margin-inline:auto;position:relative;z-index:6}
:focus-visible{outline:3px solid var(--gold-hi);outline-offset:4px;border-radius:4px}

/* one big line per section; the shade colour comes from the section */
.big{font-size:clamp(44px,7.2vw,100px);line-height:.94;color:#fff;
  text-shadow:0 .055em 0 var(--shade,#0a0820),.03em .03em 0 var(--shade,#0a0820),-.03em .03em 0 var(--shade,#0a0820),0 -.02em 0 var(--shade,#0a0820),0 .16em .4em #0005}

/* ---------- buttons: the game's forged frame ---------- */
.btn{display:inline-block;position:relative;border:0;padding:0;background:none;color:#fff;font:400 22px/1 var(--display);letter-spacing:.04em;text-decoration:none;cursor:pointer;
  filter:drop-shadow(0 6px 0 #0008) drop-shadow(0 14px 18px #0005);transition:transform .12s var(--out),filter .12s var(--out);-webkit-tap-highlight-color:transparent}
.btn::before{content:"";position:absolute;inset:0;clip-path:var(--chamfer);background:linear-gradient(170deg,var(--gold-hi),var(--gold) 40%,var(--gold-lo))}
.btn-face{position:relative;display:flex;align-items:center;justify-content:center;gap:12px;margin:4px;padding:16px 30px 17px;--c:9px;clip-path:var(--chamfer);text-shadow:0 2px 0 #0008;white-space:nowrap;overflow:hidden}
.btn-face::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 35%,#fff5 50%,transparent 65%);transform:translateX(-120%);transition:transform .6s var(--out)}
.btn:hover .btn-face::after,.btn:focus-visible .btn-face::after{transform:translateX(120%)}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(4px);filter:drop-shadow(0 2px 0 #0008) drop-shadow(0 4px 6px #0005)}
.btn-ready .btn-face{background:linear-gradient(#57d96a,#2ba046 52%,#1f8138 53%,#1a6f30)}
.btn-slate .btn-face{background:linear-gradient(#3a4f86,#273a6c 52%,#1f2f5a 53%,#17244a)}
.btn-discord{font-size:clamp(22px,2.6vw,28px)}
.btn-discord .btn-face{padding:20px 38px 21px;gap:16px;background:linear-gradient(#8f9dff,#5865f2 52%,#4a55d6 53%,#3b46b9)}
.disc{width:1.45em;height:1.45em;flex:none;fill:currentColor}
.btn-sm{font-size:17px}
.btn-sm .btn-face{padding:11px 18px 12px;gap:9px}
.tick{display:inline-block;width:.9em;height:.9em;flex:none;background:currentColor;clip-path:polygon(8% 52%,22% 38%,40% 58%,78% 12%,94% 26%,41% 88%)}
.play{width:0;height:0;border-left:.7em solid currentColor;border-block:.45em solid transparent;flex:none}
.pause-glyph{width:.62em;height:.74em;flex:none;border-inline:.2em solid currentColor}
.is-paused .pause-glyph{width:0;height:0;border:0;border-left:.62em solid currentColor;border-block:.37em solid transparent}

/* ---------- screens: the only framed things, gold-trimmed like the HUD ---------- */
.screen{position:relative;display:block;aspect-ratio:16/9;border:3px solid var(--gold);border-radius:12px;background:var(--navy);overflow:hidden;box-shadow:0 0 0 3px #0a1226,0 26px 44px -20px #0a1a4acc}
.screen video,.screen iframe,.screen>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border:0}
.slot{position:absolute;inset:0;display:grid;place-items:center;background:repeating-linear-gradient(135deg,#ffffff08 0 14px,transparent 14px 28px),radial-gradient(90% 100% at 50% 40%,#22356e,#0d1430 80%)}
.slot-tag{position:absolute;top:14px;left:14px;font:700 14px/1 var(--label);letter-spacing:.14em;text-transform:uppercase;color:var(--navy);background:var(--gold);padding:6px 9px;border-radius:3px}
.slot-play{width:74px;height:74px;border-radius:50%;border:4px solid var(--gold);display:grid;place-items:center;background:#0d143099}
.slot-play::before{content:"";margin-left:6px;border-left:23px solid var(--gold-hi);border-block:15px solid transparent}
.slot-shot{position:absolute;left:16px;right:16px;bottom:13px;font:600 16px/1.3 var(--label);letter-spacing:.04em;color:#c7d0ee}

/* ---------- decor: low-poly clouds, trees and rocks ---------- */
.decor{position:absolute;pointer-events:none;transform:translateY(var(--ty,0));will-change:transform}
.cloud{animation:drift 60s linear infinite alternate}
@keyframes drift{to{translate:60px 0}}
.c1{left:3%;top:150px;width:270px;height:101px}
.c2{right:5%;top:230px;width:350px;height:131px;animation-duration:80s}
.c3{left:40%;top:96px;width:180px;height:68px;opacity:.75;animation-duration:100s}
.c4{left:7%;top:70px;width:300px;height:112px}

/* ---------- nav ---------- */
.nav{position:fixed;inset:0 0 auto;z-index:50;display:flex;align-items:center;gap:28px;padding:14px clamp(16px,3vw,40px);transition:background .3s,box-shadow .3s,padding .3s}
.nav.is-stuck{background:#0d1430ee;backdrop-filter:blur(10px);box-shadow:0 2px 0 var(--gold),0 12px 30px #0007;padding-block:8px}
.nav nav{display:flex;gap:30px;margin-left:auto}
.nav nav a{font:700 18px/1 var(--label);letter-spacing:.12em;text-transform:uppercase;text-decoration:none;color:#f1ebff;padding:8px 2px;position:relative;text-shadow:0 1px 6px #000a}
.nav nav a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform .3s var(--out)}
.nav nav a:hover::after,.nav nav a:focus-visible::after,.nav nav a[aria-current=true]::after{transform:scaleX(1)}
.nav nav a[aria-current=true]{color:var(--gold-hi)}
.nav-mark{display:flex;align-items:center;gap:10px;font:400 22px/1 var(--display);letter-spacing:.06em;text-transform:uppercase;text-decoration:none;color:var(--paper);text-shadow:0 2px 6px #000a}
.nav-mark .tick{color:var(--ready);font-size:20px}
.nav .btn{opacity:0;pointer-events:none;transform:translateY(-8px);transition:opacity .3s,transform .3s var(--out)}
.nav.is-stuck .btn{opacity:1;pointer-events:auto;transform:none}

/* ---------- hero: the title painting ---------- */
.hero{min-height:clamp(720px,100svh,1080px);display:grid;align-items:center;overflow:hidden;background:var(--night);--px:0;--py:0;--sy:0}
.hero-art{position:absolute;inset:-3%;width:106%;height:106%;max-width:none;object-fit:cover;object-position:74% 50%;
  transform:translate3d(calc(var(--px)*-14px),calc(var(--py)*-8px + var(--sy)*.16px),0);will-change:transform}
.sky{position:absolute;inset:0;width:100%;height:100%;mix-blend-mode:screen;opacity:0;transition:opacity 1.4s ease;pointer-events:none}
.sky.is-on{opacity:1}
.hero::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,#0b0822d9 0,#0b08228c 30%,transparent 60%),linear-gradient(0deg,var(--navy) 0,transparent 20%)}
.hero-ui{position:relative;z-index:3;width:min(600px,100% - 40px);margin-left:clamp(20px,8vw,150px);padding:100px 0 64px;display:flex;flex-direction:column;align-items:flex-start;
  transform:translate3d(calc(var(--px)*5px),calc(var(--sy)*-.1px),0)}
.wordmark{width:min(520px,88vw);margin:0 0 10px -12px;filter:drop-shadow(0 18px 30px #000a)}
.wordmark svg{width:100%;height:auto;overflow:visible}
.wm-plate,.wm-l1,.wm-l2,.wm-gem{transform-box:fill-box;transform-origin:center;opacity:0}
.is-live .wm-plate{animation:drop .7s var(--out) .1s both}
.is-live .wm-l1{animation:slam .55s var(--back) .3s both}
.is-live .wm-l2{animation:slam .6s var(--back) .42s both}
.is-live .wm-gem{animation:stamp .5s var(--back) .95s both}
.wm-check{stroke-dasharray:1;stroke-dashoffset:1}
.is-live .wm-check{animation:draw .35s var(--out) 1.25s forwards}
@keyframes drop{from{opacity:0;transform:translateY(-30px) scaleX(.6)}to{opacity:1;transform:none}}
@keyframes slam{from{opacity:0;transform:scale(1.7)}to{opacity:1;transform:none}}
@keyframes stamp{from{opacity:0;transform:scale(2.4) rotate(-40deg)}to{opacity:1;transform:rotate(8deg)}}
@keyframes draw{to{stroke-dashoffset:0}}
.pitch{font:600 clamp(19px,1.9vw,25px)/1.35 var(--body);max-width:24ch;text-shadow:0 2px 12px #000c;margin:0 0 26px}
.pitch em{font-style:normal;color:var(--gold-hi)}
.cta-row{display:flex;flex-wrap:wrap;gap:16px}
.pitch,.cta-row,.raid{opacity:0;transform:translateY(18px)}
.is-live .pitch{animation:rise .7s var(--out) .75s forwards}
.is-live .cta-row{animation:rise .7s var(--out) .9s forwards}
.is-live .raid{animation:rise .7s var(--out) 1.05s forwards}
@keyframes rise{to{opacity:1;transform:none}}

/* raid frames: the ready check itself */
.raid{display:flex;gap:clamp(8px,1.2vw,14px);margin:44px 0 0}
.frame{--c:9px;position:relative;width:clamp(50px,6.4vw,84px);aspect-ratio:1/1.12;font:700 14px/1 var(--label);letter-spacing:.12em;text-transform:uppercase;color:#ece6ff}
.frame::before{content:"";position:absolute;inset:0;clip-path:var(--chamfer);background:linear-gradient(160deg,var(--gold-hi),var(--gold) 40%,var(--gold-lo))}
.frame::after{content:"";position:absolute;inset:3px;--c:7px;clip-path:var(--chamfer);background:radial-gradient(90% 80% at 50% 100%,color-mix(in srgb,var(--a) 55%,#17204a),#17204a 75%)}
.frame img{position:absolute;z-index:1;left:50%;bottom:3px;width:112%;max-width:none;height:128%;object-fit:contain;object-position:50% 100%;transform:translateX(-50%);
  clip-path:polygon(0 -40%,100% -40%,100% calc(100% - 7px),calc(100% - 12px) 100%,12px 100%,0 calc(100% - 7px));filter:drop-shadow(0 4px 6px #0008)}
.frame b{position:absolute;top:calc(100% + 9px);left:50%;transform:translateX(-50%);white-space:nowrap;text-shadow:0 1px 6px #000c}
.state{position:absolute;z-index:2;right:-7px;bottom:-7px;width:34%;aspect-ratio:1;border-radius:50%;background:var(--wait);box-shadow:0 0 0 3px #0d1430,0 0 14px #ffd34d88;display:grid;place-items:center;animation:wait 1.2s ease-in-out infinite}
.state::before{content:"";width:22%;aspect-ratio:1;border-radius:50%;background:#5a4300;box-shadow:-180% 0 #5a4300,180% 0 #5a4300}
@keyframes wait{50%{transform:scale(.86);opacity:.8}}
.frame.is-ready .state{background:var(--ready);box-shadow:0 0 0 3px #0d1430,0 0 18px #5be36bcc;animation:pop .45s var(--back)}
.frame.is-ready .state::before{width:62%;border-radius:0;background:#06310f;box-shadow:none;clip-path:polygon(8% 52%,22% 38%,40% 58%,78% 12%,94% 26%,41% 88%)}
@keyframes pop{0%{transform:scale(.2)}60%{transform:scale(1.35)}100%{transform:scale(1)}}
.frame.you a{position:absolute;inset:0;z-index:1}
.you-glyph{position:absolute;inset:0;z-index:1;display:grid;place-items:center;font:400 clamp(26px,3.6vw,46px)/1 var(--display);color:var(--wait);text-shadow:0 3px 0 #0009;animation:wait 1.2s ease-in-out infinite}
.frame.you.is-ready .you-glyph{color:var(--ready);animation:none}
.raid.all-ready .frame::before{animation:flash .9s ease-out}
@keyframes flash{30%{filter:brightness(1.8) drop-shadow(0 0 12px var(--ready))}}

/* ---------- roster: one slim band ---------- */
.roster{background:var(--navy);border-top:3px solid var(--gold);padding:34px 0}
.roster-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px 40px}
.roster h2{font-size:clamp(28px,3vw,40px)}
.roster p{color:var(--soft);font-weight:600}
.signup{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.signup input{flex:1 1 300px;min-width:0;width:320px;font:600 19px/1 var(--body);color:var(--paper);background:#070c20;border:2px solid #44528a;border-radius:8px;padding:0 18px;height:62px;transition:border-color .2s,box-shadow .2s}
.signup input::placeholder{color:#7783ae}
.signup input:focus{outline:0;border-color:var(--gold);box-shadow:0 0 0 4px #f2c24a33}
.signup input[aria-invalid=true]{border-color:#ff7d5c}
.form-note{flex-basis:100%;font-weight:600;color:var(--gold-hi);display:none}
.form-note.is-on{display:block}
.form-note.is-ok{color:var(--ready)}
.form-note.is-err{color:#ff9d84}
.steam-slot{margin-top:22px}
.steam-slot iframe{width:100%;height:190px;border:0;border-radius:6px}

/* ---------- gameplay: dawn into daylight ---------- */
.plays{--shade:#140f31;background:linear-gradient(var(--navy) 0,#1b1442 28%,#2a1d5c 68%,#3a2470 100%);padding:calc(var(--gap) + 40px) 0 var(--gap);overflow:hidden;position:relative}
.plays::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(120% 70% at 50% 0,#6a3fb833 0,transparent 60%),radial-gradient(60% 40% at 82% 18%,#ffd9812e 0,transparent 70%)}
.plays .wrap{position:relative;z-index:1}
/* The captions were inked for a daylight band and go invisible on the night one. */
.plays .clips figcaption{color:var(--paper)}
.plays .ghost{color:var(--paper);border-color:#ffffff4d}
/* Daylight clouds belong to a sky this page no longer has. */
.plays .cloud{display:none}
.clip[data-clip=trinity]{--still:url("media/stills/trinity.webp")}
.clip[data-clip=pause]{--still:url("media/stills/pause.webp")}
.clip[data-clip=boss]{--still:url("media/stills/boss.webp")}
.clip .slot{background:linear-gradient(#0b082266,#0b0822b3),var(--still,none) center/cover no-repeat,radial-gradient(90% 100% at 50% 40%,#22356e,#0d1430 80%)}
.clips{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,2vw,30px);margin-top:clamp(36px,5vw,64px)}
.clips figcaption{margin-top:16px;font:400 clamp(22px,2.3vw,32px)/1.1 var(--display);color:var(--ink)}
.telegraph{position:absolute;left:50%;top:54%;width:46%;aspect-ratio:2.2;transform:translate(-50%,-50%)}
.telegraph i{position:absolute;inset:0;border-radius:50%;opacity:0;border:3px solid #ff5a3c;background:radial-gradient(#ff5a3c33,#ff5a3c08 70%);animation:tele 3.2s infinite}
.telegraph i+i{border:0;background:#ff7a4a;animation-name:fill}
@keyframes tele{0%{opacity:0;transform:scale(.9)}8%,70%{opacity:1;transform:scale(1)}74%{opacity:1;transform:scale(1.06);filter:brightness(3)}100%{opacity:0;transform:scale(1.1)}}
@keyframes fill{0%{opacity:0;transform:scale(0)}8%{opacity:.35;transform:scale(0);animation-timing-function:cubic-bezier(.5,0,.9,.4)}70%{opacity:.5;transform:scale(1)}74%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(1)}}
.ghost{display:inline-flex;align-items:center;gap:10px;margin-top:30px;padding:6px 2px;border:0;border-bottom:2px dashed #12264d88;background:none;color:var(--ink);font:700 18px/1 var(--label);letter-spacing:.12em;text-transform:uppercase;cursor:pointer}
.ghost:hover{border-bottom-style:solid}

/* ---------- spotlight carousels: heroes, then bosses ----------
   One character under the light at a time. The track is a native horizontal
   scroller with snap, so touch, trackpad and keyboard work untouched; the
   script only measures each slide's distance from centre (--p signed, --d
   absolute) and the track's progress (--sx), and everything that moves is
   derived from those three numbers at different rates. */
@property --stage{syntax:"<color>";inherits:true;initial-value:#2f5fe0}
.spot{--w:min(58vw,780px);--base:#101642;--stage:#2f5fe0;--sx:0;padding:clamp(56px,6vw,84px) 0 clamp(36px,4vw,56px);overflow:clip;transition:--stage .7s ease;
  background:radial-gradient(64% 72% at 50% 62%,color-mix(in srgb,var(--stage) 62%,var(--base)) 0,var(--base) 72%)}
.spot::before{content:"";position:absolute;z-index:7;left:0;right:0;bottom:100%;height:34px;background:var(--base);-webkit-mask:var(--battlement) repeat-x bottom/120px 34px;mask:var(--battlement) repeat-x bottom/120px 34px}
.spot .big{font-size:clamp(34px,4.6vw,66px)}
.spot-heroes{--shade:#070b2c;--w:min(74vw,1020px)}
/* A class painting is 16:9 and cinematic; the rail shows the whole plate,
   framed like everything else on the page, and it opens full size. */
.spot-heroes .spot-art{height:auto;width:100%;aspect-ratio:16/9;object-fit:cover;margin-bottom:9%;border:3px solid var(--gold);border-radius:14px;box-shadow:0 0 0 3px #0a1226,0 34px 56px -22px #000e,0 0 70px #6a3fb840;cursor:zoom-in}
.spot-heroes .spot-slide{align-items:center;height:auto;padding-block:clamp(8px,1.6vw,22px)}
.spot-heroes .spot-art{margin-bottom:0}
.spot-heroes .spot-name{bottom:2%}
.spot-bosses{--base:#0b0d2a;--shade:#05061c;border-top:3px solid var(--gold)}
.spot-bosses::before{display:none}
.spot-decor{position:absolute;inset:0;pointer-events:none;transform:translateX(calc((var(--sx) - .5)*-220px));transition:transform .2s linear}
.spot-decor svg{position:absolute;opacity:.16}
.d1{left:6%;top:30%;width:170px;height:128px}.d2{right:9%;top:22%;width:110px;height:83px}
.d3{left:58%;top:12%;width:300px;height:112px;opacity:.08!important}.d4{left:30%;top:64%;width:90px;height:68px}
.spot-stage{position:relative;margin-top:clamp(10px,2vw,30px)}
.spot-track{position:relative;display:flex;margin:0;padding:0 calc(50% - var(--w)/2);overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none;cursor:grab;outline-offset:-4px}
.spot-track::-webkit-scrollbar{display:none}
.spot-track.is-dragging{scroll-snap-type:none;cursor:grabbing;scroll-behavior:auto}
.spot-slide{--p:0;--d:0;position:relative;flex:0 0 var(--w);height:clamp(380px,min(54svh,50vw),600px);scroll-snap-align:center;display:grid;justify-items:center;align-items:end;user-select:none}
.spot-slide::after{content:"";position:absolute;z-index:2;inset:auto 0 0;height:36%;background:linear-gradient(transparent,var(--base) 80%);pointer-events:none;-webkit-mask-image:linear-gradient(90deg,transparent,#000 22%,#000 78%,transparent);mask-image:linear-gradient(90deg,transparent,#000 22%,#000 78%,transparent)}
.spot-bosses .spot-slide::after{height:17%}
.spot-ghost{position:absolute;left:50%;top:4%;z-index:0;font:400 clamp(84px,15vw,230px)/1 var(--display);letter-spacing:.02em;text-transform:uppercase;white-space:nowrap;color:transparent;-webkit-text-stroke:2px color-mix(in srgb,var(--a) 70%,transparent);
  opacity:calc(.9 - var(--d)*.9);transform:translateX(calc(-50% + var(--p)*46%))}
.spot-light{position:absolute;z-index:1;left:50%;top:-6%;width:120%;height:100%;translate:-50% 0;mix-blend-mode:screen;opacity:max(0,calc(1 - var(--d)*1.6));
  background:conic-gradient(from 158deg at 50% 0,transparent 0deg,color-mix(in srgb,var(--a) 35%,#ffffff8c) 9deg,color-mix(in srgb,var(--a) 35%,#ffffff8c) 35deg,transparent 44deg);
  -webkit-mask-image:linear-gradient(#000 10%,transparent 90%);mask-image:linear-gradient(#000 10%,transparent 90%)}
.spot-floor{position:absolute;z-index:1;left:50%;bottom:11%;width:78%;aspect-ratio:5;translate:-50% 0;border-radius:50%;background:radial-gradient(closest-side,color-mix(in srgb,var(--a) 80%,#fff) 0,color-mix(in srgb,var(--a) 45%,transparent) 50%,transparent);opacity:max(.12,calc(1 - var(--d)*1.3))}
.is-active .spot-light{animation:lamp .7s ease-out both}
@keyframes lamp{0%{filter:brightness(0)}18%{filter:brightness(1.8)}30%{filter:brightness(.5)}100%{filter:brightness(1)}}
.spot-art{position:relative;z-index:1;height:84%;width:auto;max-width:none;margin-bottom:12%;transform-origin:50% 100%;pointer-events:none;
  transform:translateX(calc(var(--p)*-16%)) scale(calc(1 - var(--d)*.26));filter:brightness(calc(1 - var(--d)*.6)) saturate(calc(1 - var(--d)*.5)) drop-shadow(0 18px 18px #0009)}
.spot-name{position:absolute;z-index:3;left:0;right:0;bottom:0;display:grid;justify-items:center;gap:6px;text-align:center;opacity:max(0,calc(1 - var(--d)*1.6));transform:translateX(calc(var(--p)*22%))}
.spot-name b{font:400 clamp(30px,3.6vw,52px)/1 var(--display);letter-spacing:.02em;color:#fff;text-shadow:0 4px 0 var(--shade)}
.spot-name small{font:700 17px/1 var(--label);letter-spacing:.24em;text-transform:uppercase;color:var(--a)}
.spot-arrow{position:absolute;z-index:8;top:46%;width:58px;height:58px;display:grid;place-items:center;border:0;padding:0;color:#1a1206;cursor:pointer;--c:10px;clip-path:var(--chamfer);background:linear-gradient(170deg,var(--gold-hi),var(--gold) 45%,var(--gold-lo));transition:transform .15s var(--out),filter .15s}
.spot-arrow.prev{left:max(16px,calc(50% - var(--w)/2 - 92px));rotate:180deg}
.spot-arrow.next{right:max(16px,calc(50% - var(--w)/2 - 92px))}
.spot-arrow:hover{filter:brightness(1.15);transform:scale(1.08)}
.spot-arrow:active{transform:scale(.94)}
.spot-thumbs{position:relative;z-index:6;display:flex;justify-content:center;gap:clamp(8px,1vw,14px);margin-top:26px;padding-inline:16px}
.spot-thumbs button{--c:8px;position:relative;width:clamp(46px,5vw,64px);aspect-ratio:1;border:0;padding:0;background:none;cursor:pointer;opacity:.55;transition:opacity .25s,transform .3s var(--out)}
.spot-thumbs button::before{content:"";position:absolute;inset:0;clip-path:var(--chamfer);background:linear-gradient(160deg,#9aa6d8,#4a5690)}
.spot-thumbs button::after{content:"";position:absolute;inset:3px;--c:6px;clip-path:var(--chamfer);background:#141b4a}
.spot-thumbs img{position:absolute;z-index:1;inset:5px;width:calc(100% - 10px);height:calc(100% - 10px);object-fit:cover;object-position:50% 8%;--c:5px;clip-path:var(--chamfer)}
.spot-bosses .spot-thumbs img{object-fit:contain;object-position:50% 50%}
.spot-thumbs button:hover{opacity:.9}
.spot-thumbs button[aria-current=true]{opacity:1;transform:translateY(-6px) scale(1.12)}
.spot-thumbs button[aria-current=true]::before{background:linear-gradient(160deg,var(--gold-hi),var(--gold) 40%,var(--gold-lo))}

/* ---------- demo: the fortress lair under the title sky ---------- */
.demo{--shade:#0a0820;min-height:clamp(440px,42vw,600px);display:grid;align-items:center;overflow:hidden;
  background:linear-gradient(90deg,#0b0822f2 0,#0b0822cc 42%,#0b082266 100%),linear-gradient(#150f36 0,#241a52 60%,#0f0b26 100%),url("media/title/castle.webp") 68% 42%/cover}
.demo .wrap{display:flex;flex-direction:column;align-items:flex-start;gap:18px;padding-block:60px}
.demo p{display:flex;align-items:center;gap:12px;font:700 clamp(17px,1.5vw,21px)/1.2 var(--label);letter-spacing:.14em;text-transform:uppercase;color:var(--gold-hi);text-shadow:0 2px 6px #0b0822}
.demo p i{width:6px;height:6px;background:var(--gold);rotate:45deg}
.demo-stage{position:absolute;right:max(3vw,calc(50% - 640px));bottom:-6%;width:clamp(280px,36vw,540px);aspect-ratio:1;transform:translateY(var(--ty,0))}
.demo-island{display:none}
.demo-stage img{position:absolute;left:50%;bottom:8%;height:88%;width:auto;max-width:none;transform:translateX(-50%);border:3px solid var(--gold);border-radius:12px;box-shadow:0 0 0 3px #0a1226,0 30px 50px -18px #000c,0 0 60px #6a3fb84d;filter:none;animation:bob 6s ease-in-out infinite}
@keyframes bob{50%{translate:0 -6px}}

/* ---------- media ---------- */
.media{--shade:#050918;background:linear-gradient(var(--navy),var(--navy-2));padding:var(--gap) 0}
/* Until a trailer exists this tile is the only empty frame on the page, so it
   wears the title painting rather than a striped void. */
#trailer .slot{background:linear-gradient(#0b0822a6,#0b0822d9),url("media/title/castle.webp") 50% 38%/cover}
.media-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(12px,1.6vw,22px);margin-top:clamp(30px,4vw,54px)}
.trailer{grid-column:span 2;grid-row:span 2;aspect-ratio:auto;cursor:pointer}
.shot{transition:transform .35s var(--out)}
.shot:has(img){cursor:zoom-in}
.shot:has(img):hover{transform:scale(1.03)}
.lightbox{border:0;padding:0;background:none;max-width:94vw;max-height:94vh;overflow:visible}
.lightbox::backdrop{background:#03061aee}
.lightbox img{max-width:94vw;max-height:86vh;border-radius:8px;box-shadow:0 30px 80px #000}
.lightbox button{display:block;margin:14px auto 0;font:700 16px/1 var(--label);letter-spacing:.14em;text-transform:uppercase;color:var(--paper);background:var(--navy);border:2px solid var(--gold);border-radius:8px;padding:10px 18px;cursor:pointer}

/* ---------- final: back under the painting's sky ---------- */
.final{--shade:#0a0820;padding:var(--gap) 0;text-align:center;background:linear-gradient(var(--navy-2) 0,#14102ed9 30%,#14102e8c 100%),url("media/title/castle.webp") 22% 70%/cover}
.final .wrap{display:grid;justify-items:center;gap:26px}
.raid-mini{margin:0;justify-content:center}
.raid-mini .frame{width:clamp(44px,5.4vw,68px)}
.final .signup{justify-content:center;width:min(620px,100%)}
.facts-line,.follow{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px 14px;font:700 17px/1 var(--label);letter-spacing:.2em;text-transform:uppercase;color:var(--gold-hi)}
.facts-line i{width:6px;height:6px;background:var(--gold);rotate:45deg}
.follow a{letter-spacing:.14em;color:var(--paper)}
.btn-discord+.follow{margin-top:-8px}

/* ---------- footer: one row ---------- */
.foot{display:flex;flex-wrap:wrap;align-items:center;gap:14px 30px;padding:26px clamp(20px,4vw,60px);background:#070a1c;border-top:2px solid #f2c24a55;font-size:15px;color:#9aa3c7}
.foot nav{display:flex;gap:22px}
.foot nav a{font:700 16px/1 var(--label);letter-spacing:.12em;text-transform:uppercase;text-decoration:none;color:#dfe4ff}
.foot nav a:hover{color:var(--gold-hi)}
.foot p{margin-left:auto}

/* ---------- scroll reveal: only hidden once the script has taken charge ---------- */
.js .reveal{opacity:0;transform:translateY(30px);transition:opacity .8s var(--out) var(--d,0s),transform .9s var(--out) var(--d,0s)}
.js .reveal.is-in{opacity:1;transform:none}

/* ---------- tactical pause, the page's own demo of the mechanic ---------- */
.paused-banner{position:fixed;inset:0;z-index:60;pointer-events:none;display:grid;place-items:center;opacity:0;transition:opacity .15s var(--in)}
.paused-banner::before,.paused-banner::after{content:"";position:absolute;left:0;right:0;height:9vh;background:#000;transform:scaleY(0);transition:transform .2s var(--in)}
.paused-banner::before{top:0;transform-origin:top}.paused-banner::after{bottom:0;transform-origin:bottom}
.paused-banner span{font:400 clamp(44px,9vw,120px)/1 var(--display);letter-spacing:.2em;text-transform:uppercase;color:#fff;text-shadow:0 6px 0 #000a,0 0 40px #000;transform:scale(1.25);transition:transform .2s var(--in)}
.is-paused .paused-banner{opacity:1;transition:opacity .25s var(--out)}
.is-paused .paused-banner::before,.is-paused .paused-banner::after{transform:none;transition:transform .45s var(--out)}
.is-paused .paused-banner span{transform:none;transition:transform .45s var(--back)}
main{transition:filter .2s}
.is-paused main{filter:saturate(.3) brightness(.8);transition:filter .3s}
.is-paused *,.is-paused *::before,.is-paused *::after{animation-play-state:paused!important}

.preview-chip{position:fixed;left:12px;bottom:12px;z-index:80;font:700 14px/1 var(--label);letter-spacing:.1em;text-transform:uppercase;color:#1a1206;background:var(--wait);padding:8px 11px;border-radius:6px;box-shadow:0 8px 20px #0008;cursor:pointer}

/* ---------- capture modes ---------- */
.is-og .nav,.is-og .cta-row,.is-og .preview-chip{display:none}
.is-og .hero{min-height:630px;height:630px}
.is-og .hero-ui{padding:40px 0 30px;margin-left:70px}
.is-og .wordmark{width:500px}
.is-og .raid{margin-top:20px}
.is-still *,.is-still *::before,.is-still *::after{animation-duration:.01ms!important;animation-delay:0s!important;animation-iteration-count:1!important;transition-duration:.01ms!important;transition-delay:0s!important}
.is-still .reveal{opacity:1;transform:none}

/* ---------- responsive ---------- */
@media (max-width:980px){
  .nav nav{display:none}
  .nav .btn{margin-left:auto}
  .clips{grid-template-columns:1fr;max-width:620px}
  .media-grid{grid-template-columns:repeat(2,1fr)}
  .trailer{grid-row:auto;aspect-ratio:16/9}
  .c2{display:none}
}
@media (max-width:760px){
  .spot{--w:82vw}
  .spot-arrow{display:none}
  .spot-slide{height:clamp(380px,104vw,500px)}
  .hero{align-items:end}
  .hero-art{object-position:80% 50%}
  .hero::after{background:linear-gradient(#0b0822b3 0,#0b082233 38%,#0b0822cc 70%,var(--navy) 100%)}
  .hero-ui{margin-inline:auto;align-items:center;text-align:center;padding:96px 0 56px}
  .wordmark{margin-left:0}
  .cta-row,.raid{justify-content:center}
  .roster-row{justify-content:center;text-align:center}
  .demo{display:flex;flex-direction:column}
  .demo-stage{order:2}
  .demo .wrap{padding-bottom:0}
  .demo-stage{position:relative;right:auto;bottom:auto;margin:10px auto -8%;width:min(86vw,420px)}
  .foot p{margin-left:0;flex-basis:100%}
}
@media (max-width:560px){
  body{font-size:17px}
  .btn{font-size:20px}
  .btn-face{padding:15px 22px 16px}
  .frame b{font-size:11px;letter-spacing:.06em}
  .signup{width:100%}
  .signup input{width:100%}
  .signup .btn{flex:1 1 100%}
  .media-grid{grid-template-columns:1fr}
  .trailer{grid-column:auto}
  .slot-play{width:58px;height:58px}
  .slot-play::before{border-left-width:18px;border-block-width:12px;margin-left:5px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-delay:0s!important;animation-iteration-count:1!important;transition-duration:.01ms!important;transition-delay:0s!important}
  .hero-art,.hero-ui,.decor,.demo-stage,.spot-decor{transform:none!important}
  .spot-ghost{transform:translateX(-50%)!important}
  .js .reveal{opacity:1;transform:none}
}