:root{color-scheme:dark;--noir:#0c0e11;--velvet:#25282d;--text:#eeece9;--red:#a33e3e;--red-light:#c96662;--ease:cubic-bezier(.2,.85,.25,1);--mx:50%;--my:42%;--rx:0deg;--ry:0deg}
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{background:var(--noir);color:var(--text);overflow:hidden}

.stage{position:relative;min-height:100svh;display:grid;place-items:center;padding:24px;isolation:isolate;perspective:1400px;cursor:default}
/* Soft light that follows the pointer */
.stage:before{content:'';position:absolute;inset:0;z-index:-1;background:radial-gradient(850px circle at var(--mx) var(--my),#2a2d33aa,transparent 60%),radial-gradient(ellipse at 90% 3%,#25282d55,transparent 40%);transition:background .2s}
/* 45-degree line field echoing the X, revealed only near the light */
.field{position:absolute;inset:0;z-index:-1;background:repeating-linear-gradient(45deg,#ffffff0d 0 1px,transparent 1px 34px),repeating-linear-gradient(-45deg,#ffffff07 0 1px,transparent 1px 34px);-webkit-mask:radial-gradient(600px circle at var(--mx) var(--my),#000,transparent 70%);mask:radial-gradient(600px circle at var(--mx) var(--my),#000,transparent 70%);opacity:0;animation:fade 1.6s .9s var(--ease) forwards}

.mark-wrap{width:min(560px,78vw);display:grid;grid-template-columns:minmax(0,1fr);justify-items:center;transform:rotateX(var(--rx)) rotateY(var(--ry));transform-style:preserve-3d;transition:transform .5s var(--ease)}
.mark{width:100%;height:auto;overflow:visible;filter:drop-shadow(0 18px 40px #0009)}

/* Outline draws in red, then fills */
.g{fill:var(--text);fill-opacity:0;stroke:var(--red-light);stroke-width:5;stroke-linejoin:miter;stroke-dasharray:1;stroke-dashoffset:1;animation:draw 1.5s var(--ease) forwards,fill .9s 1.25s ease forwards}
.g-p{animation-delay:.25s,1.4s}
/* The detached leg of the X arrives last and locks into place */
.g-leg{transform:translate(150px,150px);opacity:0;stroke-dashoffset:0;animation:leg 1s 1.7s var(--ease) forwards,fill .6s 2.2s ease forwards}

.gleam{transform:translateX(0);animation:gleam 1.3s 2.6s cubic-bezier(.5,0,.3,1) forwards}

.wordmark{width:95.5%;aspect-ratio:1796/181;margin-top:2.4%;background:url(assets/xp-wordmark.png) no-repeat center/100% 100%;opacity:0;transform:translateY(8px);clip-path:inset(0 50% 0 50%);animation:word 1.1s 2.3s var(--ease) forwards}
.horizon{display:block;height:1px;width:0;margin-top:calc(9% - 25px);background:linear-gradient(90deg,transparent,var(--red-light),transparent);animation:horizon 1.4s 2.9s var(--ease) forwards}

.stage.replay .g,.stage.replay .g-leg,.stage.replay .gleam,.stage.replay .wordmark,.stage.replay .horizon,.stage.replay .field{animation:none}

@keyframes draw{to{stroke-dashoffset:0}}
@keyframes fill{to{fill-opacity:1;stroke-opacity:0}}
@keyframes leg{to{transform:translate(0,0);opacity:1}}
@keyframes gleam{to{transform:translateX(2600px)}}
@keyframes word{to{opacity:.88;transform:none;clip-path:inset(0 0 0 0)}}
@keyframes horizon{to{width:calc(62% + 100px)}}
@keyframes fade{to{opacity:1}}

@media (prefers-reduced-motion:reduce){
  .g,.g-leg{animation:none;fill-opacity:1;stroke-opacity:0;transform:none;opacity:1}
  .gleam{animation:none;display:none}
  .wordmark{animation:none;opacity:.88;transform:none;clip-path:none}
  .horizon{animation:none;width:calc(62% + 100px)}
  .field{animation:none;opacity:1}
  .mark-wrap{transition:none;transform:none}
}