/* KALAYAN — warp page transitions The page lives inside a "cadre" (brand motif). On navigation we zoom OUT of the framed box into a starfield void, travel, then zoom INTO the next page's box. Driven by warp.js (dependency-free rAF). Reduced-motion: disabled entirely. */ /* Void behind the boxed page. Setting a background on also stops the body background from propagating to the canvas — required for clip-path to reveal it. */ html.warping, html.warp-in{ background:#050408 radial-gradient(1.5px 1.5px at 12% 22%,rgba(255,255,255,.75),transparent 60%), radial-gradient(1px 1px at 28% 68%,rgba(255,255,255,.5),transparent 60%), radial-gradient(1.5px 1.5px at 41% 12%,rgba(140,207,226,.7),transparent 60%), radial-gradient(1px 1px at 55% 84%,rgba(255,255,255,.55),transparent 60%), radial-gradient(1.5px 1.5px at 66% 38%,rgba(249,59,165,.6),transparent 60%), radial-gradient(1px 1px at 74% 74%,rgba(255,255,255,.5),transparent 60%), radial-gradient(1.5px 1.5px at 84% 18%,rgba(250,182,55,.65),transparent 60%), radial-gradient(1px 1px at 91% 56%,rgba(255,255,255,.6),transparent 60%), radial-gradient(1px 1px at 8% 88%,rgba(255,255,255,.45),transparent 60%), radial-gradient(1.5px 1.5px at 47% 52%,rgba(255,255,255,.4),transparent 60%), radial-gradient(120% 90% at 50% 42%,#0d0a18 0%,#050408 62%); scrollbar-width:none; } html.warping::-webkit-scrollbar, html.warp-in::-webkit-scrollbar{display:none} /* No loader when arriving through a warp — the zoom-in IS the entrance. */ html.warp-in .loader{display:none!important} /* Pre-paint entry state (inline head guard adds .warp-in before first paint; warp.js takes over per-frame immediately after). */ html.warp-in body{ transform:translate(var(--warp-tx,180vw),var(--warp-ty,55vh)) rotate(var(--warp-rot,10deg)) scale(.58); transform-origin:50% 50vh; clip-path:inset(0 0 max(0px,calc(100% - 100vh)) 0 round 28px); } /* While warping, scroll-reveals fire in bulk as the tiny page crosses the viewport — make them instant so dozens of CSS transitions don't fight the travel animation. (Elements revealed after the warp animate normally.) */ html.warp-in [data-anim], html.warp-in [data-anim] .word, html.warping [data-anim], html.warping [data-anim] .word{transition-duration:0s!important;transition-delay:0s!important} /* Promote the layers before the animation starts (avoids mid-flight rasterization). */ html.warping body, html.warp-in body{will-change:transform} .warp-frame{will-change:transform,opacity} /* Starfield canvas — behind the body content, above the void background. */ .warp-stars{position:fixed;inset:0;z-index:-1;pointer-events:none} /* The travelling "cadre": colored border + glow, scaled in sync with the page box. Carries the brand offset white square on its edge. */ .warp-frame{ position:fixed;inset:-3px;z-index:140;pointer-events:none;opacity:0; border:3px solid var(--warp-c,#F93BA5);border-radius:28px; box-shadow:0 0 70px -14px var(--warp-c,#F93BA5),inset 0 0 26px -10px var(--warp-c,#F93BA5); } .warp-frame__sq{position:absolute;top:-12px;right:9vw;width:20px;height:20px;background:#fff;display:block} @media (prefers-reduced-motion:reduce){ .warp-stars,.warp-frame{display:none} html.warp-in body{transform:none;clip-path:none;opacity:1} }