*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:#000;color:#eee}body{font-family:Arial,Helvetica,sans-serif}.ident{min-height:100vh;min-height:100svh;display:flex;align-items:center;justify-content:center;flex-direction:column;padding:32px 24px;gap:34px}.ident-logo{display:grid;place-items:center;width:min(640px,84vw);height:clamp(160px,26vw,230px);position:relative;color:inherit;text-decoration:none;transition:transform .35s ease;outline-offset:10px}.ident-logo>span{grid-area:1/1;width:100%;pointer-events:none}.ident-logo svg{display:block;width:100%;height:auto;overflow:hidden}.ident-logo .mono{width:clamp(190px,34vw,310px);max-width:100%;opacity:0;animation:mono-reveal 3.3s linear both}.ident-logo .word{opacity:0;animation:word-resolve .45s 2.85s forwards}.ident-enter{display:grid;place-items:center;min-height:48px;min-width:132px;padding:12px 18px;color:#aaa;font-size:12px;line-height:1.5;letter-spacing:.28em;text-indent:.28em;text-decoration:none;transition:color .2s ease}.ident-enter:hover{color:#fff}a:focus-visible{outline:1px solid #aaa;outline-offset:6px}@media(hover:hover){.ident-logo:hover{transform:scale(1.012)}}.opening .ident-enter{color:#eee;letter-spacing:.12em}.bypassing .mono,.bypassing .glitch-strip{display:none!important}.bypassing .word{animation:none;opacity:1}@keyframes mono-reveal{0%,6%{opacity:0;transform:translateX(0)}60%,83%{opacity:1;transform:translateX(0);clip-path:inset(0)}87%{opacity:.8;transform:translateX(-5px);clip-path:inset(12% 0 35%)}90%{opacity:1;transform:translateX(7px) scaleX(1.06);clip-path:inset(43% 0 12%)}94%{opacity:.6;transform:translateX(-3px);clip-path:inset(8% 0 60%)}100%{opacity:0;transform:translateX(0);clip-path:inset(0)}}/* Brief stepped distortion only; the final mark and original timing stay intact. */
.ident-logo .word{position:relative;animation-timing-function:steps(1,end)}
.ident-logo .word .glitch-strip{position:absolute;inset:0;opacity:0;pointer-events:none;animation:strip-tear .45s 2.85s steps(1,end) both;mix-blend-mode:screen}
.ident-logo .strip-0{--tear:7%;clip-path:inset(13% 0 65%);filter:drop-shadow(-2px 0 0 #b40919)}
.ident-logo .strip-1{--tear:-9%;clip-path:inset(43% 0 42%)}
.ident-logo .strip-2{--tear:4%;clip-path:inset(69% 0 13%);filter:drop-shadow(1px 0 0 #a5bdc4)}
@keyframes strip-tear{0%{opacity:0;transform:translateX(0)}12%{opacity:.8;transform:translateX(var(--tear)) scaleX(1.08)}26%{opacity:.45;transform:translateX(calc(var(--tear) * -.65))}42%{opacity:.9;transform:translateX(calc(var(--tear) * 1.3)) scaleX(1.16)}56%{opacity:.3;transform:translateX(calc(var(--tear) * -.4))}72%{opacity:.65;transform:translateX(calc(var(--tear) * .35))}86%,100%{opacity:0;transform:translateX(0)}}
@keyframes word-resolve{0%{opacity:0;transform:translateX(-8px) scaleX(1.09);clip-path:inset(30% 0 33%)}12%{opacity:.75;transform:translateX(5px) skewX(-5deg);clip-path:inset(0)}26%{opacity:.5;transform:translateX(-4px) scaleX(.985);clip-path:inset(8% 0 15%)}42%{opacity:.9;transform:translateX(3px) skewX(3deg);clip-path:inset(0)}56%{opacity:.75;transform:translateX(-2px);clip-path:inset(0)}72%{opacity:1;transform:translateX(1px);clip-path:inset(0)}86%,100%{opacity:1;transform:none;clip-path:inset(0)}}
@media(prefers-reduced-motion:reduce){.ident-logo .word .glitch-strip{display:none;animation:none}.ident-logo .mono{animation:none;opacity:0}.ident-logo .word{animation:none;opacity:1}.ident-logo,.leaving .ident{transition:none;transform:none}}@media(max-height:450px){.ident{gap:12px;padding:16px}.ident-logo{height:150px}.ident-logo .mono{width:220px}}