/* ========================================================================== transit.css — page transition "Triển khai" (loading screen between pages) Pure CSS transitions driven by classes on (set by the bootstrap and assets/js/transit.js). No GSAP dependency. States (on ): (none) overlay hidden .transit-out LEAVE: panels slam shut from top/bottom (300 ms, accelerating ease-in); card stays HIDDEN .transit-sealed LEAVE, added by transit.js on the top panel's transitionend (fallback 340 ms) = panels fully closed → only now the opaque card fades in (90 ms), so old-page pixels can never show through it .transit-in ARRIVE, before first paint: overlay already closed, card filled, no transition .transit-open panels part (520 ms expo.inOut), card fades out → then class removed Rule order matters: out < sealed < in < open (open always wins, e.g. on bfcache restore). Progress bar: --p (0…1) on .transit (inline style), transform:scaleX. ========================================================================== */ .transit{position:fixed;inset:0;z-index:var(--z-transit);pointer-events:none;visibility:hidden;overflow:hidden;--p:0} html.no-js .transit{display:none} html.transit-in .transit,html.transit-out .transit,html.transit-open .transit{visibility:visible} html.transit-in .transit,html.transit-out .transit{pointer-events:auto;cursor:progress} /* ── panels ── */ .transit__panel{position:absolute;left:0;right:0;height:50.5%;overflow:hidden;will-change:transform; background: linear-gradient(90deg, rgb(111 211 232 / .05) 1px, transparent 1px) 0 0 / 48px 48px, linear-gradient(rgb(111 211 232 / .05) 1px, transparent 1px) 0 0 / 48px 48px, var(--bg-1)} .transit__panel--top{top:0;z-index:1;transform:translate3d(0,-101%,0); background: radial-gradient(70% 90% at 72% 100%, rgb(255 159 28 / .13), transparent 62%), linear-gradient(90deg, rgb(111 211 232 / .05) 1px, transparent 1px) 0 0 / 48px 48px, linear-gradient(rgb(111 211 232 / .05) 1px, transparent 1px) 0 0 / 48px 48px, var(--bg-1)} .transit__panel--bot{bottom:0;transform:translate3d(0,101%,0); background: radial-gradient(70% 90% at 28% 0%, rgb(111 211 232 / .08), transparent 62%), linear-gradient(90deg, rgb(111 211 232 / .05) 1px, transparent 1px) 0 0 / 48px 48px, linear-gradient(rgb(111 211 232 / .05) 1px, transparent 1px) 0 0 / 48px 48px, var(--bg-0)} /* hazard-stripe edges where the panels meet + HUD ticks */ .transit__panel--top::after,.transit__panel--bot::before{content:"";position:absolute;left:0;right:0;height:8px; background:repeating-linear-gradient(-45deg, var(--accent) 0 9px, #0B0D0C 9px 18px)} .transit__panel--top::after{bottom:0} .transit__panel--bot::before{top:0;opacity:.55} .transit__panel--top::before,.transit__panel--bot::after{content:"";position:absolute;left:0;right:0;height:14px; background: repeating-linear-gradient(90deg, rgb(233 231 223 / .42) 0 1px, transparent 1px 24px), repeating-linear-gradient(90deg, rgb(233 231 223 / .7) 0 1px, transparent 1px 120px); background-size:auto 7px, auto 14px;background-repeat:repeat-x;background-position:0 100%, 0 100%} .transit__panel--top::before{bottom:8px} .transit__panel--bot::after{top:8px;transform:scaleY(-1)} .transit__hud{position:absolute;left:0;right:0;display:flex;justify-content:space-between;gap:16px;padding-inline:var(--gutter); font:500 var(--fs-micro)/1.4 var(--ff-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--text-3);white-space:nowrap} .transit__hud b{color:var(--text-2);font-weight:500} .transit__panel--top .transit__hud{top:calc(var(--header-h) / 2 - .7em)} .transit__panel--bot .transit__hud{bottom:calc(20px + env(safe-area-inset-bottom,0px))} .transit__hud span:last-child{text-align:right} @media (max-width:639px){ .transit__hud span + span{display:none} } /* ── card ── */ .transit__card{position:absolute;left:50%;top:50%;z-index:2;inline-size:min(calc(100vw - 2 * var(--gutter)), 780px); translate:-50% -50%;padding:clamp(20px, 3vw, 36px) clamp(20px, 3.4vw, 44px) clamp(22px, 3vw, 34px); background:#0B0D0C;border:1px solid var(--line-strong);box-shadow:0 40px 90px -30px rgb(0 0 0 / .95);opacity:0} .transit__card::before{content:"";position:absolute;inset:-7px;pointer-events:none;--c:var(--accent);--arm:18px; background: linear-gradient(var(--c),var(--c)) top left / var(--arm) 2px, linear-gradient(var(--c),var(--c)) top left / 2px var(--arm), linear-gradient(var(--c),var(--c)) top right / var(--arm) 2px, linear-gradient(var(--c),var(--c)) top right / 2px var(--arm), linear-gradient(var(--c),var(--c)) bottom left / var(--arm) 2px, linear-gradient(var(--c),var(--c)) bottom left / 2px var(--arm), linear-gradient(var(--c),var(--c)) bottom right / var(--arm) 2px, linear-gradient(var(--c),var(--c)) bottom right / 2px var(--arm); background-repeat:no-repeat} .transit__meta{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 16px; font:500 var(--fs-label)/1.3 var(--ff-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--text-2)} .transit__code{color:var(--accent);font-weight:700;letter-spacing:.08em;font-variant-numeric:tabular-nums slashed-zero;white-space:pre} .transit__label{display:inline-flex;align-items:center;gap:10px} .transit__label::before{content:"";width:8px;height:8px;background:var(--accent)} .transit__name{margin-top:clamp(10px, 1.4vw, 18px);font:800 clamp(2.75rem, 1.6rem + 5.4vw, 6.75rem)/.95 var(--ff-display);font-stretch:75%; letter-spacing:-.005em;text-transform:uppercase;color:var(--text);overflow-wrap:anywhere} .transit__bar{position:relative;margin-top:clamp(18px, 2.4vw, 28px);height:4px;background:var(--surface-2);overflow:hidden} .transit__bar > i{position:absolute;inset:0;background:var(--accent);transform-origin:0 50%;transform:scaleX(var(--p,0)); transition:transform 380ms var(--ease-out)} .transit__bar > i::after{content:"";position:absolute;right:0;top:0;bottom:0;width:48px;background:linear-gradient(90deg, transparent, rgb(255 255 255 / .55))} /* squad slots "A1 · A2 · BẠN" beside the bar (decorative, aria-hidden): each fills once --p ≥ its --at. The row is 18 px tall instead of the bar's 4 px; the margins give back the 14 px so the card never grows. */ .transit__row{display:flex;align-items:center;gap:14px;margin-top:calc(clamp(18px, 2.4vw, 28px) - 7px)} .transit__row > .transit__bar{flex:1 1 auto;min-width:48px;margin-top:0} .transit__row + .transit__tip{margin-top:7px} .transit__squad{flex:none;display:flex;align-items:center;gap:6px;margin:0; font:700 var(--fs-micro)/1 var(--ff-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--text-3)} .transit__squad-label{margin-inline-end:4px;font-weight:500;letter-spacing:.12em} .transit__slot{--f:clamp(0, (var(--p, 0) - var(--at) + .001) * 1000, 1); position:relative;isolation:isolate;display:inline-grid;place-items:center;min-width:30px;height:18px;padding:0 6px; color:color-mix(in srgb, var(--text) calc(var(--f) * 100%), var(--text-3));border:1px dashed var(--line-strong)} .transit__slot::before{content:"";position:absolute;inset:-1px;z-index:-1;background:var(--surface-3);border:1px solid var(--text-3); opacity:var(--f);transition:opacity 160ms var(--ease-out)} .transit__slot--you{color:color-mix(in srgb, var(--on-accent) calc(var(--f) * 100%), var(--text-3))} .transit__slot--you::before{background:var(--accent);border-color:var(--accent)} /* leave: the card is hidden until sealed (~330 ms) — hold the A1/A2 fills until it is on screen */ html.transit-out .transit__slot::before{transition-delay:calc(330ms + var(--d, 0ms))} @media (max-width:639px){ .transit__squad-label{display:none} } .transit__tip{display:flex;gap:10px;margin-top:14px;font:500 clamp(.9375rem, .9rem + .2vw, 1.0625rem)/1.5 var(--ff-body);color:var(--text-2)} .transit__tip b{flex:none;font:700 var(--fs-micro)/1.9 var(--ff-mono);letter-spacing:.12em;color:var(--accent)} /* ── state: LEAVE ── */ html.transit-out .transit__panel{transform:none;transition:transform 300ms cubic-bezier(.55,0,.85,.4)} /* accelerate into impact */ html.transit-out .transit__card{opacity:0;transition:none} /* ── state: SEALED (panels closed; set by transit.js) ── */ html.transit-sealed .transit__card{opacity:1;transition:opacity 90ms linear} /* ── state: ARRIVE (first paint — no transitions) ── */ html.transit-in .transit__panel{transform:none} html.transit-in .transit__card{opacity:1} /* ── state: OPEN (panels part while the page intro starts) ── */ html.transit-open .transit__panel{transition:transform 520ms var(--ease-expo-inout)} html.transit-open .transit__card{opacity:0;scale:.985;transition:opacity 170ms var(--ease-in),scale 220ms var(--ease-in)} /* never under reduced motion / toggle off (JS also bypasses) */ html.motion-off .transit{display:none} @media (prefers-reduced-motion: reduce){ .transit{display:none} } @media print{ .transit{display:none !important} }