/* ========================================================================== Shivry — cinematic full-screen loading transition Self-contained overlay. Typography reuses the site's already-loaded 'Instrument Serif' (italic 400) so no extra fonts are requested. Timing values live in loader.js (see CONFIG); --sl-exit is set from there. ========================================================================== */ :root { --sl-bg: #0a0a0c; /* very dark, near-black */ --sl-fg: #e7e4dd; /* off-white / warm light-gray, not pure white */ --sl-track: rgba(231, 228, 221, 0.10); --sl-line: rgba(231, 228, 221, 0.72); --sl-word-shift: 0.5em; /* vertical travel of word transitions */ --sl-word-dur: 640ms; --sl-word-ease: cubic-bezier(0.22, 0.61, 0.36, 1); --sl-exit: 950ms; /* overwritten by loader.js */ --sl-exit-ease: cubic-bezier(0.76, 0, 0.24, 1); } /* Scroll lock while the loader is active (toggled on by loader.js) */ html.sl-lock, html.sl-lock body { overflow: hidden !important; touch-action: none; } #site-loader { position: fixed; inset: 0; /* Modern viewport unit with a safe fallback so it fully covers mobile. */ height: 100vh; height: 100dvh; width: 100vw; width: 100dvw; z-index: 2147483000; /* above all site content */ background: var(--sl-bg); color: var(--sl-fg); overflow: hidden; transform: translateY(0); transition: transform var(--sl-exit) var(--sl-exit-ease); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* The final upward wipe */ #site-loader.is-exiting { transform: translateY(-100%); } /* --- Centered word ------------------------------------------------------- */ .sl-stage { position: absolute; inset: 0; display: grid; place-items: center; padding: 6vmin; } .sl-words { position: relative; display: grid; place-items: center; } .sl-word { grid-area: 1 / 1; /* stack all words on top of each other */ margin: 0; font-family: 'Instrument Serif', Georgia, 'Times New Roman', serif; font-style: italic; font-weight: 400; line-height: 1; letter-spacing: -0.005em; /* The 5vw middle term only reaches the 3.25rem (52px) design size at ~1040px wide, so every phone used to land on the old 1.6rem (25.6px) floor - half the desktop size on a screen held twice as close, which read as tiny. Raising only the FLOOR to 3rem (48px) leaves desktop byte-identical (5vw still wins from 960px up) and avoids a media query, so there is no jump at any breakpoint. Safe at every width: "Inspire" is the longest word at 2.474em, i.e. 118.8px at 48px - well inside the ~281px a 320px phone has after .sl-stage's 6vmin padding. */ font-size: clamp(3rem, 5vw, 3.25rem); color: var(--sl-fg); white-space: nowrap; user-select: none; opacity: 0; transform: translateY(var(--sl-word-shift)); /* waiting below */ filter: blur(10px); will-change: transform, opacity, filter; transition: opacity var(--sl-word-dur) var(--sl-word-ease), transform var(--sl-word-dur) var(--sl-word-ease), filter var(--sl-word-dur) var(--sl-word-ease); } .sl-word.is-active { opacity: 1; transform: translateY(0); filter: blur(0); } .sl-word.is-out { /* left upward */ opacity: 0; transform: translateY(calc(-1 * var(--sl-word-shift))); filter: blur(10px); } /* --- Counter (bottom-right) ---------------------------------------------- */ .sl-counter { position: absolute; right: clamp(1.25rem, 4vw, 4.5rem); bottom: clamp(1rem, 3.5vw, 3.25rem); bottom: max(clamp(1rem, 3.5vw, 3.25rem), env(safe-area-inset-bottom)); margin: 0; font-family: 'Instrument Serif', Georgia, 'Times New Roman', serif; font-style: italic; font-weight: 400; line-height: 0.9; /* Floor raised with the word above (2.75rem -> 4rem) purely to keep the hierarchy: on desktop the counter is 2x the word, so leaving it at 44px while the word grew to 48px would have made the counter the smaller of the two on phones. 9vw still wins from 711px up, so desktop is unchanged. */ font-size: clamp(4rem, 9vw, 6.5rem); letter-spacing: -0.005em; color: var(--sl-fg); user-select: none; font-variant-numeric: tabular-nums; } /* --- Thin progress line (bottom edge) ------------------------------------ */ .sl-progress { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--sl-track); } .sl-progress__bar { position: absolute; inset: 0; transform: scaleX(0); transform-origin: left center; background: var(--sl-line); will-change: transform; } /* --- Reduced motion -------------------------------------------------------- Deliberately NOT overridden. There used to be a reduced-motion media query here (prefers-reduced-motion / reduce) that stripped the word blur/travel and replaced the upward wipe with a plain opacity fade. On phones that setting is on for a large share of users (iOS "Reduce Motion", Android "Remove animations"), so the intro looked flat/instant instead of playing the real sequence. The loader is a slow fade + counter, not a parallax or spin, so the full version runs everywhere. Matching change in loader.js (timing is no longer shortened either). -------------------------------------------------------------------------- */