/* Film grain. The texture drifts in steps rather than sliding, which reads as projected grain and keeps the work off the compositor's critical path. */ #grain { position: absolute; inset: 0; height: 100svh; z-index: 1; opacity: .05; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath d='M0 0h160v160H0z' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E"); animation: grain-shift .7s steps(1) infinite; } @keyframes grain-shift { 0% { background-position: 0 0; } 20% { background-position: -18px 8px; } 40% { background-position: 12px -22px; } 60% { background-position: -9px 17px; } 80% { background-position: 21px 5px; } 100% { background-position: 0 0; } } @keyframes dialog-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } /* ===================================================================== BOOT CURTAIN Shown only when the inline flag in runs, so a visitor without JavaScript never meets a curtain that nothing would lift. ===================================================================== */ #boot { display: none; } [data-boot="on"] #boot { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; background: #0a0b0a; } #boot::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at 50% 46%, rgba(149, 163, 144, .09), transparent 55%); } #boot::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(to bottom, rgba(255, 255, 255, .028) 0 1px, transparent 1px 3px); } #boot.is-done { animation: boot-lift .9s cubic-bezier(.16, 1, .3, 1) forwards; pointer-events: none; } @keyframes boot-lift { to { transform: translateY(-101%); } } .boot-mark { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) translateY(-38px); animation: boot-pulse 2.6s ease-in-out infinite; } .boot-mark img { width: 84px; height: 84px; filter: drop-shadow(0 0 26px rgba(149, 163, 144, .28)); } @keyframes boot-pulse { 0%, 100% { opacity: .85; transform: translate(-50%, -50%) translateY(-38px) scale(1); } 50% { opacity: 1; transform: translate(-50%, -50%) translateY(-38px) scale(1.04); } } .boot-readout { position: absolute; left: 50%; bottom: 15vh; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 12px; width: min(320px, 70vw); } .boot-label { font: 500 10px var(--font-mono); letter-spacing: .5em; text-indent: .5em; color: var(--sage); text-transform: uppercase; transition: letter-spacing .8s cubic-bezier(.16, 1, .3, 1), color .5s; } #boot.is-ready .boot-label { color: var(--text-main); letter-spacing: .78em; text-indent: .78em; } .boot-bar { width: 100%; height: 1px; background: rgba(149, 163, 144, .18); overflow: hidden; } .boot-bar span { display: block; height: 100%; width: 0%; background: var(--sage-bright); box-shadow: 0 0 10px rgba(197, 207, 190, .6); transition: width .35s cubic-bezier(.16, 1, .3, 1); } .boot-pct { font: 10px var(--font-mono); letter-spacing: .2em; color: var(--text-muted); font-variant-numeric: tabular-nums; } .boot-lines { position: absolute; left: var(--pad); top: clamp(20px, 5vh, 60px); display: flex; flex-direction: column; gap: 5px; max-width: 60vw; font: 9px var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: rgba(149, 163, 144, .42); } .boot-lines span { animation: boot-line .5s cubic-bezier(.16, 1, .3, 1) both; } @keyframes boot-line { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } @media (max-width: 700px) { .boot-lines { font-size: 8px; } .boot-mark img { width: 62px; height: 62px; } } /* ===================================================================== CUSTOM CURSOR Enabled from script only on a fine pointer with motion allowed, and parked while a modal is open, because a dialog paints in the top layer above any z-index this element could claim. ===================================================================== */ #cursor-ring, #cursor-dot { position: fixed; top: 0; left: 0; z-index: 150; border-radius: 50%; pointer-events: none; opacity: 0; transition: opacity .25s; will-change: transform; } .cursor-on #cursor-ring, .cursor-on #cursor-dot { opacity: 1; } #cursor-ring { width: 34px; height: 34px; margin: -17px 0 0 -17px; border: 1px solid rgba(197, 207, 190, .55); display: grid; place-items: center; transition: width .32s cubic-bezier(.16, 1, .3, 1), height .32s cubic-bezier(.16, 1, .3, 1), margin .32s cubic-bezier(.16, 1, .3, 1), background-color .3s, border-color .3s, opacity .25s; } #cursor-dot { width: 4px; height: 4px; margin: -2px 0 0 -2px; background: var(--sage-bright); } #cursor-label { font: 700 9px var(--font-mono); letter-spacing: .18em; color: var(--bg); opacity: 0; transform: scale(.7); white-space: nowrap; transition: opacity .25s, transform .25s cubic-bezier(.34, 1.56, .64, 1); } .cursor-link #cursor-ring { width: 58px; height: 58px; margin: -29px 0 0 -29px; border-color: var(--sage); } .cursor-link #cursor-dot { opacity: 0; } .cursor-view #cursor-ring { width: 86px; height: 86px; margin: -43px 0 0 -43px; background: var(--sage-bright); border-color: var(--sage-bright); } .cursor-view #cursor-label { opacity: 1; transform: scale(1); } .cursor-view #cursor-dot { opacity: 0; } /* Native pointer returns inside modals and whenever the pointer leaves the page. */ .cursor-on.is-locked #cursor-ring, .cursor-on.is-locked #cursor-dot, .cursor-away #cursor-ring, .cursor-away #cursor-dot { opacity: 0; } .cursor-on:not(.is-locked), .cursor-on:not(.is-locked) a, .cursor-on:not(.is-locked) button { cursor: none; } /* ===================================================================== MOTION PREFERENCE ===================================================================== */ @media (prefers-reduced-motion: reduce) { #grain { display: none; } .boot-mark, .boot-lines span { animation: none; } #boot.is-done { animation: none; opacity: 0; visibility: hidden; } #cursor-ring, #cursor-dot { display: none; } }