/* CONCEPT 02 / Optical ignition. All geometry uses a square stage.
   0–.85s ignition; .85–2.45s brand; 2.45–3.55s release to the film.
   Scope is deliberately independent of the original opening. */
.sf-opening{display:none}
.js .sf-opening{position:fixed;inset:0;z-index:100;display:grid;place-items:center;overflow:hidden;isolation:isolate;background:#02060c;color:#effaff;animation:sf-exit .9s cubic-bezier(.45,0,.35,1) 2.65s forwards;pointer-events:auto;contain:paint}
.sf-atmosphere{position:absolute;inset:0;background:radial-gradient(circle at 50% 50%,#15394e 0%,#0a1b2d 26%,#030811 58%,#020409 85%);animation:sf-atmosphere 3.5s ease both}
.sf-atmosphere:after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,transparent 0 3px,#a5dfff04 3px 4px);opacity:.42}
.sf-optics{position:absolute;width:min(88vmin,860px);aspect-ratio:1;left:50%;top:50%;transform:translate(-50%,-50%)}
.sf-aperture{position:absolute;inset:0;animation:sf-aperture 3.5s cubic-bezier(.22,1,.36,1) both;will-change:transform,opacity}
.sf-instrument{display:block;width:100%;height:100%;overflow:visible}
.sf-calibration{transform-origin:500px 500px;animation:sf-calibrate 3.5s cubic-bezier(.2,.65,.3,1) both}
.sf-orbit{transform-origin:500px 500px}
.sf-orbit-a{animation:sf-orbit-a 3.5s cubic-bezier(.2,.6,.35,1) both}
.sf-orbit-b{animation:sf-orbit-b 3.5s cubic-bezier(.22,.7,.3,1) both}
.sf-orbit-c{animation:sf-orbit-c 3.5s ease-out both}
.sf-halo{position:absolute;border-radius:50%;border:1px solid #a8e1ff26;inset:6%;box-shadow:0 0 30px #67c9ff0c,inset 0 0 38px #62c9ff0a;animation:sf-depth 3.5s cubic-bezier(.16,.65,.3,1) both}
.sf-halo-back{inset:0;animation-delay:.08s}
.sf-halo-front{inset:16%;animation-delay:.23s;border-color:#bae6ff38}
.sf-wave{position:absolute;inset:9%;border:1.5px solid #c9f5ff;border-radius:50%;box-shadow:0 0 8px #d1f8ff55,0 0 35px #69c9ff29,inset 0 0 32px #6bcbff1a;opacity:0;will-change:transform,opacity}
.sf-wave-one{animation:sf-wave 1.05s cubic-bezier(.32,.04,.45,1) 2.28s both}
.sf-wave-two{inset:14%;border-width:1px;border-color:#799aff;animation:sf-wave .92s cubic-bezier(.32,.04,.45,1) 2.48s both}
.sf-beam{position:absolute;left:50%;top:50%;width:min(92vw,1100px);height:1px;background:linear-gradient(90deg,transparent,#76b6d933,#dcf8ffbb,#76b6d933,transparent);box-shadow:0 0 16px #7fd9ff45;transform-origin:center;animation:sf-beam 3.35s ease both}
.sf-brand{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;width:90%;text-align:center;animation:sf-brand 3.45s cubic-bezier(.2,.7,.3,1) both}
.sf-wordmark{font-family:Arial,Helvetica,sans-serif;font-size:clamp(2.2rem,8.1vmin,5.35rem);line-height:1.1;font-weight:400;letter-spacing:.16em;text-indent:.16em;white-space:nowrap;text-shadow:0 0 24px #8fceff35,0 2px 15px #02070e}
.sf-wordmark>span{display:block;font-size:.25em;letter-spacing:.18em;text-indent:.18em;margin-top:16px;font-weight:400;color:#bbd0de}
.sf-divider{width:46px;height:1px;background:linear-gradient(90deg,transparent,#caeaff,transparent);margin:24px 0 19px;box-shadow:0 0 12px #a6deff4d}
.sf-caption{font-family:inherit;font-size:clamp(.75rem,1.65vmin,.875rem);line-height:1.7;letter-spacing:.2em;padding-left:.2em;color:#b9cbd9;white-space:nowrap}
.concept-controls{position:fixed;right:max(18px,env(safe-area-inset-right));bottom:max(18px,env(safe-area-inset-bottom));z-index:45;display:flex;align-items:center;gap:0;padding:6px;border:1px solid #b9dafa47;background:#071420ee;box-shadow:0 8px 30px #0003;color:#e9f7ff;font-size:.875rem;line-height:1.4;border-radius:6px;transition:opacity .2s}
.concept-controls>span{padding:0 12px;color:#93bbd4;font-size:.75rem}
.concept-controls button,.concept-controls a{display:inline-flex;align-items:center;justify-content:center;min-height:42px;padding:8px 14px;white-space:nowrap}
.concept-controls button{background:#e4f4ff;color:#102537;border-radius:3px}
.concept-controls a:hover{color:#9adfff}
body.sf-playing .concept-controls{opacity:0;pointer-events:none}
body.menu-open .concept-controls{visibility:hidden}
@keyframes sf-atmosphere{0%{opacity:.25}24%{opacity:.95}68%{opacity:1}100%{opacity:.28}}
@keyframes sf-calibrate{0%{opacity:0;transform:rotate(-26deg)}24%{opacity:.8}76%{opacity:.65;transform:rotate(6deg)}100%{opacity:0;transform:rotate(8deg)}}
@keyframes sf-aperture{0%{opacity:0;transform:scale(.5) rotate(-12deg)}25%{opacity:1;transform:scale(.97) rotate(0)}67%{opacity:1;transform:scale(1.02) rotate(3deg)}100%{opacity:0;transform:scale(1.85) rotate(9deg)}}
@keyframes sf-orbit-a{0%{transform:rotate(-100deg)}38%{transform:rotate(8deg)}73%{transform:rotate(34deg)}100%{transform:rotate(83deg)}}
@keyframes sf-orbit-b{0%{transform:rotate(124deg)}38%{transform:rotate(-8deg)}73%{transform:rotate(-50deg)}100%{transform:rotate(-96deg)}}
@keyframes sf-orbit-c{from{transform:rotate(-38deg)}to{transform:rotate(92deg)}}
@keyframes sf-depth{0%{opacity:0;transform:scale(.3)}30%{opacity:.8;transform:scale(.9)}65%{opacity:.55;transform:scale(1.06)}100%{opacity:0;transform:scale(2.2)}}
@keyframes sf-wave{0%{opacity:0;transform:scale(.87)}12%{opacity:.75}60%{opacity:.48}100%{opacity:0;transform:scale(var(--sf-release,5))}}
@keyframes sf-beam{0%,8%{opacity:0;transform:translate(-50%,-50%) scaleX(.02)}19%{opacity:.9;transform:translate(-50%,-50%) scaleX(.55)}34%{opacity:0;transform:translate(-50%,-50%) scaleX(1)}74%,100%{opacity:0;transform:translate(-50%,-50%) scaleX(1)}}
@keyframes sf-brand{0%,15%{opacity:0;transform:translateY(9px) scale(.96)}34%,73%{opacity:1;transform:translateY(0) scale(1)}92%,100%{opacity:0;transform:translateY(-3px) scale(1.025)}}
@keyframes sf-exit{to{opacity:0;visibility:hidden}}
@media(max-width:560px){.sf-optics{width:94vmin}.sf-wordmark{font-size:clamp(2rem,8.8vmin,3.1rem);letter-spacing:.13em;text-indent:.13em}.sf-wordmark>span{font-size:.3em;margin-top:13px}.sf-divider{margin:20px 0 16px}.sf-caption{font-size:.75rem;letter-spacing:.14em}.concept-controls{right:10px;bottom:max(10px,env(safe-area-inset-bottom));padding:4px}.concept-controls>span{padding:0 10px}.concept-controls button,.concept-controls a{padding:8px 11px;font-size:.8125rem}}
@media(max-height:480px) and (orientation:landscape){.sf-wordmark{font-size:8.5vmin}.sf-divider{margin:13px 0 10px}.sf-wordmark>span{margin-top:9px}.sf-caption{font-size:.75rem}}
@media(prefers-reduced-motion:reduce){.js .sf-opening{display:none!important}.concept-controls{transition:none}}
@media print{.sf-opening,.concept-controls{display:none!important}}