@font-face{font-family:'Chakra Petch';font-weight:400;font-display:swap;
  src:url('vendor/fonts/chakra-400.woff2') format('woff2')}
@font-face{font-family:'Chakra Petch';font-weight:600;font-display:swap;
  src:url('vendor/fonts/chakra-600.woff2') format('woff2')}
@font-face{font-family:'Chakra Petch';font-weight:700;font-display:swap;
  src:url('vendor/fonts/chakra-700.woff2') format('woff2')}

:root{
  --ink:#0B0E14; --bone:#EDEBE6; --ember:#FF5C2A; --lagoon:#35D0BA; --line:#232936;
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
body{
  background:var(--ink); color:var(--bone); overflow:hidden;
  font-family:'Chakra Petch',system-ui,sans-serif;
  -webkit-tap-highlight-color:transparent; user-select:none;
}

/* boot fade */
#boot{position:fixed;inset:0;background:var(--ink);z-index:100;pointer-events:none;
  animation:bootFade .7s ease .1s forwards}
@keyframes bootFade{to{opacity:0}}

/* ---------- header / footer ---------- */
.top{position:fixed;top:0;left:0;right:0;z-index:20;display:flex;align-items:flex-start;
  justify-content:center;padding:calc(14px + env(safe-area-inset-top)) 18px 0}
.brand{text-align:center;pointer-events:none}
.brand h1{font-size:clamp(22px,3.4vw,34px);font-weight:700;letter-spacing:.42em;text-indent:.42em}
.brand p{font-size:11px;letter-spacing:.3em;text-indent:.3em;color:#8a93a4;margin-top:4px;text-transform:uppercase}
.gear{position:fixed;top:calc(14px + env(safe-area-inset-top));right:16px;width:42px;height:42px;
  border-radius:50%;background:#161a23cc;border:1px solid var(--line);color:var(--bone);
  cursor:pointer;display:grid;place-items:center;transition:.2s;z-index:21}
.gear:hover{transform:rotate(40deg);border-color:#3a4356}
.foot{position:fixed;bottom:calc(10px + env(safe-area-inset-bottom));left:0;right:0;
  text-align:center;font-size:9.5px;letter-spacing:.24em;color:#5b6373;z-index:20;pointer-events:none}

/* ---------- stage & panels ---------- */
.stage{position:fixed;inset:0}
.panel{position:absolute;inset:0;display:block;text-decoration:none;color:var(--bone);outline:none}
.panel .art{position:absolute;inset:0;width:100%;height:100%;
  transition:transform .6s cubic-bezier(.2,.8,.3,1)}
.panel:hover .art,.panel:focus-visible .art{transform:scale(1.045)}
.panel .veil{position:absolute;inset:0;background:linear-gradient(to top,#05070bd9 0%,#05070b33 40%,transparent 70%);
  transition:opacity .4s}
.panel:hover .veil{opacity:.82}
.panel:focus-visible::after{content:"";position:absolute;inset:8px;border:2px solid var(--bone);border-radius:14px;opacity:.6}

.slicer{clip-path:polygon(0 0,55.5% 0,45.5% 100%,0 100%)}
.runner{clip-path:polygon(56.5% 0,100% 0,100% 100%,46.5% 100%)}

.meta{position:absolute;bottom:clamp(48px,9vh,84px);display:flex;flex-direction:column;gap:8px;z-index:3}
.slicer .meta{left:clamp(20px,5vw,64px);align-items:flex-start}
.runner .meta{right:clamp(20px,5vw,64px);align-items:flex-end;text-align:right}
.gname{font-size:clamp(30px,5.2vw,56px);font-weight:700;letter-spacing:.14em;line-height:1;
  text-shadow:0 4px 30px #000c}
.slicer .gname{color:#ffe9dd}
.runner .gname{color:#eafff9}
.gtag{font-size:clamp(11px,1.3vw,14px);letter-spacing:.2em;text-transform:uppercase;color:#c8cedb}
.chips{display:flex;gap:8px;margin-top:6px}
.chip{display:flex;flex-direction:column;gap:2px;background:#0b0e14b3;border:1px solid #ffffff22;
  border-radius:10px;padding:7px 12px;backdrop-filter:blur(4px)}
.chip i{font-style:normal;font-size:9px;letter-spacing:.22em;color:#8a93a4}
.chip b{font-size:15px;font-weight:700;letter-spacing:.05em}
.slicer .chip b{color:#FFC24B}
.runner .chip b{color:#49E6C2}
.cta{margin-top:10px;padding:11px 34px;border-radius:999px;font-weight:700;font-size:14px;
  letter-spacing:.3em;text-indent:.3em;color:var(--ink);transition:.25s;box-shadow:0 6px 24px #0008}
.slicer .cta{background:var(--ember)}
.runner .cta{background:var(--lagoon)}
.panel:hover .cta{transform:translateY(-2px) scale(1.05);filter:brightness(1.1)}

/* seam */
.seam{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:4}
.seamBase{stroke:#ffffff14;stroke-width:.35;vector-effect:non-scaling-stroke;stroke-width:1.5px}
.seamGlow{stroke:#fff;stroke-width:2.5px;vector-effect:non-scaling-stroke;stroke-linecap:round;
  stroke-dasharray:12 130;animation:seamRun 5.5s linear infinite;opacity:.75;
  filter:drop-shadow(0 0 6px #fff)}
@keyframes seamRun{from{stroke-dashoffset:142}to{stroke-dashoffset:0}}

/* key-art motion */
.drift1{animation:drift 6s ease-in-out infinite alternate}
.drift2{animation:drift 7.5s ease-in-out .8s infinite alternate}
@keyframes drift{from{transform:translateY(0)}to{transform:translateY(-14px)}}
.bob{animation:bobY 1.1s ease-in-out infinite alternate}
@keyframes bobY{from{transform:translate(573px,455px)}to{transform:translate(573px,447px)}}
.sparks circle{animation:tw 2.6s ease-in-out infinite alternate}
.sparks circle:nth-child(2n){animation-delay:.9s}
.sparks circle:nth-child(3n){animation-delay:1.6s}
@keyframes tw{from{opacity:.25}to{opacity:1}}
.tflick{animation:tw 3.2s ease-in-out infinite alternate}

/* portrait: stacked diagonal */
@media (max-aspect-ratio: 1/1){
  .slicer{clip-path:polygon(0 0,100% 0,100% 48.5%,0 52.5%)}
  .runner{clip-path:polygon(0 53.5%,100% 49.5%,100% 100%,0 100%)}
  .slicer .meta{left:clamp(18px,6vw,40px);bottom:auto;top:clamp(96px,16vh,150px);}
  .runner .meta{right:clamp(18px,6vw,40px);bottom:clamp(40px,7vh,70px)}
  .gname{font-size:clamp(26px,8vw,44px)}
  .brand h1{font-size:20px}
}

/* page wipe transition */
#wipe{position:fixed;inset:0;z-index:95;pointer-events:none;background:var(--wipecol,#FF5C2A);
  clip-path:circle(0% at var(--wx,50%) var(--wy,50%));transition:clip-path .45s cubic-bezier(.3,0,.6,1)}
#wipe.go{clip-path:circle(150% at var(--wx,50%) var(--wy,50%))}

@media (prefers-reduced-motion: reduce){
  .drift1,.drift2,.bob,.sparks circle,.tflick,.seamGlow{animation:none}
  .panel .art{transition:none}
}