/* ========================================================================== FREE MY BOYS — cell doors ------------------------------------------------------------------------ FAIL-OPEN. Read this before touching anything below. ------------------------------------------------------------------------ The doors must NEVER be able to trap the page. Three independent layers guarantee it, and a change that breaks one still leaves two standing: 1. The resting state of .door is OPEN (translated off-screen). This is what renders if no script runs and no animation fires. 2. The opening is a pure CSS animation with `animation-fill-mode: both`. JS is never required to open the doors — doors.js only tidies up afterwards. `both` matters: it holds the closed `from` state during the delay, then keeps the open `to` state forever after. 3. .doors is pointer-events:none at all times, so even a door frozen mid-slide cannot swallow a click or a scroll. The ONLY thing that closes the doors is the inline script adding .doors-closed. If it throws, nothing is added and the page renders open. Panels animate with transform only — compositor-only, no layout thrash. ========================================================================== */ .doors { position: fixed; inset: 0; z-index: 90; pointer-events: none; /* layer 3 — never negotiable */ overflow: hidden; } /* Scrim: dims the room while the door is shut. Rests fully transparent so it is invisible unless the closed state is explicitly switched on. */ .doors::after { content: ''; position: absolute; inset: 0; background: radial-gradient(70% 55% at 50% 45%, rgba(8,8,10,.62), rgba(8,8,10,.9)); opacity: 0; } .door { position: absolute; top: -2%; bottom: -2%; width: 51%; /* >50% so the two panels overlap at the seam, no hairline gap */ /* A cell door is bars and air. The gaps are transparent on purpose: the hero is already painted underneath, so you read it through the bars before they part. */ background-repeat: no-repeat, no-repeat, repeat; background-image: /* top rail */ linear-gradient(180deg, var(--concrete-500) 0 100%), /* bottom rail */ linear-gradient(180deg, var(--concrete-500) 0 100%), /* the bars: steel highlight down the left of each, shadow down the right */ repeating-linear-gradient( 90deg, transparent 0 42px, #16161a 42px 44px, var(--concrete-500) 44px 48px, var(--concrete-600) 48px 56px, #0b0b0d 56px 59px, transparent 59px 62px ); background-size: 100% 22px, 100% 22px, auto 100%; background-position: 0 3%, 0 97%, 0 0; } /* RESTING STATE = OPEN. Layer 1. Do not give these a translateX(0) default. */ .door--l { left: 0; transform: translate3d(-101%, 0, 0); } .door--r { right: 0; transform: translate3d(101%, 0, 0); } /* The lock stile down the leading edge of each panel. */ .door--l::after, .door--r::after { content: ''; position: absolute; top: 0; bottom: 0; width: 10px; background: linear-gradient(90deg, #0a0a0c, var(--concrete-500) 45%, var(--concrete-600) 55%, #0a0a0c); } .door--l::after { right: 0; } .door--r::after { left: 0; } /* -------------------------------------------------------------------------- CLOSED STATE — added by the inline script, only once per session. Everything here is additive; removing this block leaves the doors open. -------------------------------------------------------------------------- */ html.doors-closed .door--l { animation: door-open-l 880ms cubic-bezier(.7, 0, .18, 1) 300ms both; } html.doors-closed .door--r { animation: door-open-r 880ms cubic-bezier(.7, 0, .18, 1) 300ms both; } html.doors-closed .doors::after { animation: scrim-lift 700ms ease-out 380ms both; } @keyframes door-open-l { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-101%, 0, 0); } } @keyframes door-open-r { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(101%, 0, 0); } } @keyframes scrim-lift { from { opacity: 1; } to { opacity: 0; } } /* Once doors.js has seen the slide finish it sets this, and the overlay stops costing anything. Purely an optimisation — never load-bearing. */ .doors[data-spent] { display: none; } /* -------------------------------------------------------------------------- Reduced motion: the doors do not exist. Absent, not merely faster. -------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { .doors { display: none; } html.doors-closed .door--l, html.doors-closed .door--r, html.doors-closed .doors::after { animation: none; } }