/* Two Squared — Liv page-load intro. Drop-in overlay; reveals the REAL page underneath. The opaque dark "blind" is clipped away top-to-bottom (clip-path), exposing the real hero behind it. Only the mascot sprites are transparent. Blind + handle use the v2 brand tokens (graphite dark + Signal Blue). Compositor-only (clip-path/transform/opacity). */ /* Anti-flash shield: painted in before the overlay JS runs (see the head snippet). */ html.ts-intro-pending::before{ content:"";position:fixed;inset:0;z-index:9998; background:radial-gradient(120% 100% at 50% 0%,#1E1C16 0%,#14130F 70%); } html.ts-intro-lock{overflow:hidden} #ts-intro{position:fixed;inset:0;z-index:9999;overflow:hidden;pointer-events:auto} #ts-intro .backdrop{position:absolute;inset:0; background:radial-gradient(120% 100% at 50% 0%,#1E1C16 0%,#14130F 70%); clip-path:inset(0 0 0 0);will-change:clip-path} /* Brand mark printed on the blind: centred on the black, child of .backdrop so the same clip-path reveals/hides it with the fabric. It rides down with the pull (translateY set per-frame in JS) and slides off the bottom. Behind the bar/valance/mascot (they carry z-index; .backdrop does not). */ #ts-intro .logo{position:absolute;left:50%;top:50%;width:clamp(150px,30vmin,320px);height:auto; pointer-events:none;opacity:0;transform:translate(-50%,-50%);will-change:transform,opacity} #ts-intro .valance{position:absolute;top:0;left:0;right:0;height:10px;background:#0F0E0B;border-radius:0 0 6px 6px;z-index:3} #ts-intro .bar{position:absolute;top:0;left:0;right:0;height:14px;background:#17150F;z-index:2;will-change:transform; box-shadow:0 12px 30px rgba(0,0,0,.6);border-top:1px solid rgba(245,241,233,.08)} #ts-intro .bar .tex{position:absolute;left:0;right:0;bottom:100%;height:44px; background:linear-gradient(0deg,rgba(245,241,233,.05),transparent), repeating-linear-gradient(180deg,rgba(245,241,233,.03) 0 1px,transparent 1px 7px); -webkit-mask-image:linear-gradient(0deg,#000,transparent);mask-image:linear-gradient(0deg,#000,transparent)} #ts-intro .bar .handle{position:absolute;left:50%;top:-9px;transform:translateX(-50%); width:52px;height:16px;border-radius:8px;background:#4A64EC} #ts-intro .bar .cord{position:absolute;left:50%;top:-20px;transform:translateX(-50%);width:2px;height:12px;background:#7C8FF2} #ts-intro .mascot{position:absolute;left:50%;top:0;width:clamp(120px,22vh,240px);z-index:4; transform-origin:50% 29%;will-change:transform} #ts-intro .mascot img{position:absolute;left:0;top:0;width:100%;height:auto;display:block} #ts-intro.done{opacity:0;transition:opacity .18s;pointer-events:none}