/* =========================================================== OLD MILL — shared "ride" chrome Unified Continue / Back controls + fade-through-black. Loaded by every slide so navigation looks & feels identical. =========================================================== */ /* The black curtain that wipes between slides. Implemented as a CSS pseudo-element so the screen is BLACK from the very first paint — before any slide content (flickering lamps, etc.) can flash. ride.js adds .om-ready to once loaded, fading the curtain away; it removes it again on navigate to fade back to black. */ html::before{ content:""; position:fixed; inset:0; background:#000; z-index:2147483000; pointer-events:none; opacity:1; transition:opacity .5s ease; } html.om-ready::before{ opacity:0; } /* legacy element fallback (no longer injected, kept harmless) */ #om-fade{ position:fixed; inset:0; background:#000; z-index:2147483000; opacity:0; pointer-events:none; } /* Bottom-right navigation cluster — identical on every slide. */ #om-nav{ position:fixed; right:max(34px,4.2vw); bottom:max(30px,5.2vh); z-index:9000; display:flex; align-items:center; gap:14px; pointer-events:none; font-family:'Cinzel', Georgia, serif; /* gentle rise-in once the slide settles */ opacity:0; transform:translateY(18px); animation:om-rise 1.5s cubic-bezier(.2,.7,.2,1) forwards .9s; } @keyframes om-rise{ to{ opacity:1; transform:none; } } .om-btn{ pointer-events:auto; cursor:pointer; display:inline-flex; align-items:center; gap:.65em; font-family:'Cinzel', Georgia, serif; font-weight:500; font-size:clamp(11px,1.02vw,14px); letter-spacing:.32em; text-transform:uppercase; text-decoration:none; color:#c79a4b; background:rgba(10,8,6,.32); border:1px solid rgba(199,154,75,.4); border-radius:999px; padding:.82em 1.6em; -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); transition:color .35s, border-color .35s, letter-spacing .35s, background .35s, opacity .4s; user-select:none; white-space:nowrap; } .om-btn:hover{ color:#0c0a08; background:#c79a4b; border-color:#c79a4b; letter-spacing:.38em; } .om-btn:active{ transform:translateY(1px); } /* Back is quieter than Continue */ .om-btn--back{ color:#8c7f64; background:rgba(10,8,6,.22); border-color:rgba(140,127,100,.35); padding:.82em 1.25em; letter-spacing:.26em; } .om-btn--back:hover{ color:#0c0a08; background:#b3a684; border-color:#b3a684; letter-spacing:.3em; } .om-btn .om-arw{ font-size:1.05em; line-height:1; } .om-btn[hidden]{ display:none !important; } /* Hide any slide's original ad-hoc continue control so there's only ever one set of controls. (Jack is exempted via JS.) */ body[data-om-managed] a.cta, body[data-om-managed] .copy .cont, body[data-om-managed] .cont2{ display:none !important; } /* Audio disabled for now — old sound toggles hidden (soundtrack rebuild pending) */ body[data-om-managed] #soundBtn, body[data-om-managed] .sound{ display:none !important; } /* Top-right utility icons: fullscreen + sound */ #om-controls{ position:fixed; top:max(24px,4vh); right:max(24px,3vw); z-index:9999; display:flex; flex-direction:column; gap:12px; opacity:0; transition:opacity 1.2s ease; } #om-controls.om-show{ opacity:1; } .om-ico{ pointer-events:auto; cursor:pointer; width:34px; height:34px; border-radius:50%; background:rgba(10,8,6,.42); border:1px solid rgba(199,154,75,.3); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); display:flex; align-items:center; justify-content:center; transition:background .3s, border-color .3s; padding:0; color:#c79a4b; } .om-ico:hover{ background:rgba(199,154,75,.18); border-color:rgba(199,154,75,.6); } .om-ico svg{ width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; } @media (prefers-reduced-motion: reduce){ #om-nav{ animation:none; opacity:1; transform:none; } #om-fade{ transition:opacity .4s ease; } #om-controls{ transition:none; } #om-controls.om-show{ opacity:1; } }