/* The opening is a quiet white sheet; all color comes from the visitor. */
html.sf-paint-pending,html.sf-paint-pending body{background:#fff!important;overflow:hidden}
html.sf-paint-pending #sf-intro-cover{background:#fff}
html.sf-paint-pending body> :not(#paint-splash):not(script):not(#sf-intro-cover){visibility:hidden}
html.sf-paint-active,html.sf-paint-active body{overflow:hidden!important}
html.sf-paint-active #cinema-cursor{visibility:hidden!important}
#paint-splash{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;border:0;border-radius:0!important;background:#fff;color:#111;overflow:hidden;touch-action:none;overscroll-behavior:none;user-select:none;isolation:isolate;cursor:crosshair!important}
#paint-splash[open]{display:block}
#paint-splash:focus{outline:none}
#paint-splash::backdrop{background:white}
#paint-splash *{box-sizing:border-box}
#paint-splash canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
#paint-fluid{z-index:0}
#paint-whiteout{position:absolute;inset:0;z-index:2;background:#fff;opacity:0;pointer-events:none;transition:none}
#paint-splash.is-resetting #paint-whiteout{opacity:1;transition:opacity 3s cubic-bezier(.25,.1,.25,1)}
#paint-effects{z-index:3}
#paint-blackout{position:absolute;inset:0;z-index:10;background:#000;opacity:0;pointer-events:none;transition:opacity .7s ease}
.paint-title-wrap{position:absolute;z-index:4;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none}
#paint-title{appearance:none;position:relative;display:block;width:max-content;max-width:94vw;margin:0;padding:20px 0;border:0;border-radius:0;background:transparent!important;color:#0a0a0a;box-shadow:none!important;font-family:Impact,'Haettenschweiler','Arial Narrow','Avenir Next Condensed',sans-serif;font-size:clamp(34px,8.8vw,142px);font-weight:900;line-height:1;letter-spacing:-.025em;white-space:nowrap;text-transform:uppercase;transform:scaleX(.86);transition:none;pointer-events:auto;cursor:pointer!important;-webkit-tap-highlight-color:transparent}
#paint-title:active{transform:scaleX(.86)}
#paint-title:focus-visible{outline:2px solid #ad7a1c;outline-offset:12px}
.paint-meta,.paint-footer{position:absolute;z-index:5;left:clamp(22px,3.8vw,64px);right:clamp(22px,3.8vw,64px);display:flex;align-items:center;justify-content:space-between;gap:20px;font:10px/1.7 'SF Noto',Arial,sans-serif;letter-spacing:.17em;text-transform:uppercase;color:#555;pointer-events:none}
.paint-meta{top:max(28px,env(safe-area-inset-top));opacity:.65}
.paint-meta span:first-child:before{content:'';display:inline-block;width:6px;height:6px;margin-right:10px;border:1px solid currentColor;border-radius:50%}
.paint-footer{bottom:max(26px,env(safe-area-inset-bottom));align-items:flex-end;letter-spacing:.04em;text-transform:none;font-size:11px;line-height:1.8}
.paint-hint{margin:0;text-shadow:0 1px 10px #fff}
.paint-hint strong{font-weight:400;color:#222}
.paint-hint span{display:block;color:#686868}
#paint-access{appearance:none;pointer-events:auto;border:0;border-bottom:1px solid #b0b0b0;border-radius:0;padding:10px 0 5px;background:transparent;color:#333;font:10px/1.5 'SF Noto',Arial,sans-serif;letter-spacing:.12em;text-transform:uppercase;cursor:pointer!important;box-shadow:none;white-space:nowrap}
#paint-access:focus-visible{outline:2px solid #a67417;outline-offset:8px}
#paint-portal{position:absolute;z-index:6;left:50%;top:calc(50% + clamp(110px,18vh,180px));width:clamp(140px,18vmin,190px);aspect-ratio:1;margin:0;padding:0;border:0;border-radius:50%;transform:translate(-50%,-50%);color:#fff8d9;background:transparent;box-shadow:none;cursor:pointer!important;animation:paint-portal-arrive 1.8s ease both}
#paint-portal[hidden]{display:none}
#paint-portal .paint-portal-art{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;pointer-events:none;filter:drop-shadow(0 0 16px #d5a84388);animation:paint-orbit 18s linear infinite}
#paint-portal span{position:relative;z-index:1;display:block;font:9px/1.8 'SF Noto',Arial,sans-serif;letter-spacing:.22em;text-transform:uppercase;text-shadow:0 0 15px #ffcf77}
#paint-portal:focus-visible{outline:2px solid #a97412;outline-offset:27px}
#paint-portal:active{transform:translate(-50%,-50%) scale(.96)}
#paint-splash.is-entering> :not(#paint-blackout){opacity:0;transition:opacity .45s ease}
#paint-splash.is-entering #paint-blackout{opacity:1}
#paint-splash.is-entering #paint-portal{transform:translate(-50%,-50%) scale(7);transition:transform .7s ease}
.paint-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@keyframes paint-orbit{to{transform:rotate(360deg)}}
@keyframes paint-portal-arrive{from{opacity:0;scale:.25;filter:blur(12px)}to{opacity:1;scale:1;filter:blur(0)}}
@media(max-width:600px){#paint-title{font-size:9.1vw;letter-spacing:-.04em}.paint-meta{font-size:8px;letter-spacing:.12em}.paint-footer{gap:12px;font-size:10px}.paint-hint{max-width:65%}.paint-hint span{max-width:220px}#paint-access{font-size:8px;letter-spacing:.06em}#paint-portal{top:calc(50% + 120px)}}
@media(prefers-reduced-motion:reduce){#paint-portal,#paint-portal .paint-portal-art{animation:none}#paint-blackout{transition:opacity .15s}#paint-splash.is-entering> :not(#paint-blackout){transition:opacity .15s}#paint-splash.is-entering #paint-portal{transform:translate(-50%,-50%);transition:none}}
