/* ============================================================ AG LOADING CURTAIN — Liminal Means (homepage) Octopus emblem spins fast -> decelerates to rest -> swipe-reveals the Liminal Means wordmark -> curtain lifts. Play-once per session. Shown only when is set (pre-paint, by the inline head guard) so returning / reduced-motion visitors never see it. Pairs with ag-curtain.js. ============================================================ */ .ag-curtain { position: fixed; top: 0; left: 0; right: 0; height: 100vh; /* fallback for older mobile browsers */ height: 100dvh; /* cover EXACTLY the visible mobile viewport — no bottom gap */ min-height: 100svh; /* never shorter than the small viewport */ z-index: 2000; display: none; place-items: center; background: radial-gradient(120% 90% at 50% 42%, #17130f 0%, #0d0d0b 72%); overflow: hidden; transition: transform 0.9s cubic-bezier(0.7, 0, 0.2, 1); will-change: transform; } html.ag-loading .ag-curtain { display: grid; } /* Full scroll-lock while the curtain is up: lock html AND body (body defaults to overflow-y:auto, which alone lets mobile scroll), and kill touch-scroll + rubber-band so the page can't move and the address bar can't collapse and open a gap under the curtain — until the curtain lifts. */ html.ag-loading, html.ag-loading body { overflow: hidden; height: 100%; overscroll-behavior: none; touch-action: none; } .ag-curtain.is-lifting { transform: translateY(-100%); } .ag-curtain__stage { position: relative; display: grid; place-items: center; width: min(72vw, 360px); height: 190px; perspective: 1000px; } /* Grand radial gold light that blooms behind the emblem as it settles */ .ag-curtain__stage::before { content: ""; position: absolute; left: 50%; top: 50%; width: 380px; height: 380px; max-width: 82vw; transform: translate(-50%, -50%) scale(0.6); border-radius: 50%; background: radial-gradient(circle, rgba(200, 146, 74, 0.13) 0%, rgba(200, 146, 74, 0.05) 36%, transparent 68%); opacity: 0; pointer-events: none; transition: opacity 0.9s ease, transform 0.9s cubic-bezier(0.16, 1, 0.3, 1); } .ag-curtain.is-settled .ag-curtain__stage::before { opacity: 1; transform: translate(-50%, -50%) scale(1); } .ag-curtain__spinner { position: absolute; width: 152px; height: auto; display: block; filter: drop-shadow(0 0 26px rgba(200, 146, 74, 0.22)) drop-shadow(0 0 58px rgba(200, 146, 74, 0.10)); transform-style: preserve-3d; backface-visibility: visible; will-change: transform, opacity; } .ag-curtain__wordmark { position: absolute; width: min(70vw, 320px); height: auto; display: block; opacity: 0; clip-path: inset(0 100% 0 0); filter: brightness(0) invert(1) drop-shadow(0 0 16px rgba(200, 146, 74, 0.15)); will-change: clip-path, opacity; } .ag-curtain.is-revealed .ag-curtain__wordmark { opacity: 1; clip-path: inset(0 0 0 0); transition: clip-path 0.6s cubic-bezier(0.7, 0, 0.2, 1), opacity 0.14s linear; } .ag-curtain.is-revealed .ag-curtain__spinner { opacity: 0; transform: scale(0.6); transition: opacity 0.3s ease, transform 0.6s cubic-bezier(0.7, 0, 0.2, 1); } @media (prefers-reduced-motion: reduce) { html.ag-loading .ag-curtain { display: none; } html.ag-loading { overflow: visible; touch-action: auto; } html.ag-loading body { overflow-x: hidden; overflow-y: visible; height: auto; touch-action: auto; overscroll-behavior: auto; } }