.mike-film{font-family:"JetBrains Mono","Roboto Mono",monospace;color:#f7f8fa;--ease-out:cubic-bezier(.23,1,.32,1);--ease-cinema:cubic-bezier(.77,0,.175,1);position:fixed;z-index:1000;inset:0;height:100vh;background:#000}.mike-film *{box-sizing:border-box}.mike-film button{font:inherit}body.mike-opening-active{overflow:hidden}.film{position:absolute;inset:0;overflow:hidden;isolation:isolate;background:#000}
.mike-film:not(.is-ready) .film *{animation-play-state:paused!important}
.cinematic-scene{position:absolute;z-index:1;inset:0;overflow:hidden;background:#010101;transform:scale(1.055) translate3d(-.35%,.45%,0);transform-origin:50% 58%;animation:cameraDrift 5.25s .05s var(--ease-cinema) forwards}
.scene-image{position:absolute;inset:-3%;background-image:url('./assets/mike-opening/mike-light-gate-cinematic.png');background-position:50% 50%;background-size:cover;background-repeat:no-repeat;will-change:transform,opacity,filter}
.scene-image-base{opacity:0;filter:brightness(.18) contrast(1.23) saturate(.62);transform:scale(1.05);animation:sceneReveal 2.3s .05s var(--ease-out) forwards,sceneSettle 2.7s 2.3s var(--ease-cinema) forwards}
.scene-image-light{opacity:0;filter:brightness(1.08) contrast(1.04) saturate(.5);mix-blend-mode:screen;clip-path:polygon(27% 0,73% 0,67% 100%,34% 100%);transform:scale(1.02);animation:lightPlate 3.35s .65s var(--ease-cinema) forwards}
.scene-depth{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 59%,transparent 0 25%,rgba(0,0,0,.08) 45%,rgba(0,0,0,.64) 91%),linear-gradient(180deg,rgba(0,0,0,.34),transparent 30%,transparent 72%,rgba(0,0,0,.3));animation:depthBreathe 4.8s .15s var(--ease-cinema) forwards}
.matched-lights{position:absolute;inset:-18%;z-index:3;pointer-events:none}.matched-beam{position:absolute;top:-26%;width:10%;height:150%;opacity:0;transform-origin:50% 80%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.025) 18%,rgba(255,255,255,.27) 49%,rgba(255,255,255,.025) 80%,transparent);filter:blur(18px);mix-blend-mode:screen;will-change:transform,opacity}.matched-beam-left{left:15%;transform:rotate(51deg);animation:matchedLeft 3.7s .4s var(--ease-cinema) forwards}.matched-beam-right{right:15%;transform:rotate(-51deg);animation:matchedRight 3.95s .62s var(--ease-cinema) forwards}.matched-beam-center{left:46%;width:7%;filter:blur(24px);transform:rotate(0) scaleX(.7);animation:matchedCenter 3.5s 1.05s var(--ease-cinema) forwards}
.floor-glint{position:absolute;z-index:4;left:50%;bottom:-5%;width:24%;height:54%;transform:translateX(-50%) perspective(350px) rotateX(66deg);transform-origin:50% 100%;opacity:0;background:linear-gradient(180deg,rgba(255,255,255,.28),rgba(255,255,255,.035) 38%,transparent 75%);clip-path:polygon(43% 0,57% 0,100% 100%,0 100%);filter:blur(11px);animation:floorGlint 2.5s 1.25s var(--ease-out) forwards}
.scene-vignette{position:absolute;z-index:5;inset:0;box-shadow:inset 0 0 14vw 4vw #000;pointer-events:none;opacity:.75;animation:vignetteEase 4.6s .2s var(--ease-cinema) forwards}
.prelude{position:absolute;z-index:7;inset:0;overflow:hidden;pointer-events:none}.prelude-wing{position:absolute;top:0;width:50.5%;height:100%;background:linear-gradient(90deg,#000 0,#000 86%,rgba(0,0,0,.985) 100%);will-change:transform}.prelude-wing-left{left:0;transform-origin:left;animation:preludeLeft 1.55s .32s var(--ease-cinema) forwards}.prelude-wing-right{right:0;transform:scaleX(-1);transform-origin:right;animation:preludeRight 1.55s .32s var(--ease-cinema) forwards}.prelude-slit{position:absolute;left:50%;top:0;width:2px;height:100%;transform:translateX(-50%) scaleY(.62);opacity:0;background:linear-gradient(180deg,transparent 8%,rgba(255,255,255,.86) 31%,#fff 56%,rgba(255,255,255,.38) 83%,transparent);box-shadow:0 0 18px 4px rgba(255,255,255,.52),0 0 70px 15px rgba(206,220,244,.17);animation:slitIgnite .85s .06s var(--ease-out) forwards,slitRelease .72s 1.02s var(--ease-cinema) forwards}.prelude-floor{position:absolute;left:50%;bottom:-8%;width:12%;height:54%;transform:translateX(-50%) perspective(330px) rotateX(66deg) scaleY(.2);transform-origin:50% 0;opacity:0;background:linear-gradient(180deg,rgba(255,255,255,.58),rgba(255,255,255,.08) 42%,transparent 78%);clip-path:polygon(47% 0,53% 0,100% 100%,0 100%);filter:blur(8px);animation:preludeFloor 1.35s .28s var(--ease-out) forwards}
.title-lockup{position:absolute;z-index:10;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;pointer-events:none;transform:translateY(2vh)}
.title-lockup h1{position:relative;margin:0;font-family:"Noto Serif SC",Georgia,serif;font-size:clamp(92px,17vw,252px);font-weight:500;line-height:.9;letter-spacing:-.08em;text-shadow:0 0 36px rgba(255,255,255,.2)}
.title-lockup h1 span{display:inline-block;opacity:0;filter:blur(13px);transform:translate3d(0,18px,0) scale(1.025);animation:letterDevelop 1.15s var(--ease-out) forwards}.title-lockup h1 span:nth-child(1){animation-delay:3.52s}.title-lockup h1 span:nth-child(2){animation-delay:3.59s}.title-lockup h1 span:nth-child(3){animation-delay:3.66s}.title-lockup h1 span:nth-child(4){animation-delay:3.73s}
.title-lockup h1:after{content:"";position:absolute;inset:-12% -9%;opacity:0;background:linear-gradient(104deg,transparent 36%,rgba(255,255,255,.72) 49%,transparent 60%);mix-blend-mode:screen;transform:translate3d(-70%,0,0);animation:titleSheen .95s 4.42s var(--ease-cinema) forwards}
.title-rule{width:min(560px,55vw);height:1px;margin:27px 0 21px;background:rgba(213,222,235,.28);overflow:hidden;opacity:0;animation:titleRise .42s 4.08s var(--ease-out) forwards}.title-rule i{display:block;width:100%;height:100%;background:#fff;transform:translateX(-101%);animation:rule .9s 4.18s var(--ease-cinema) forwards}
.title-lockup h2{margin:0;font-family:"Noto Serif SC",serif;font-size:clamp(17px,1.6vw,25px);font-weight:500;line-height:1.7;letter-spacing:.15em;color:#f0f2f5;opacity:0;filter:blur(4px);transform:translateY(8px);animation:titleCopy .7s 4.36s var(--ease-out) forwards}
.title-bloom{position:absolute;z-index:8;left:50%;top:51%;width:9vmax;aspect-ratio:1;border-radius:50%;transform:translate(-50%,-50%) scale(.1);opacity:0;background:#fff;filter:blur(25px);mix-blend-mode:screen;animation:titleBloom 1.1s 3.12s var(--ease-out) forwards}
.exit-white{position:absolute;z-index:17;inset:0;opacity:0;background:radial-gradient(circle at 50% 50%,#fff 0,#fff 34%,#f1f3f6 76%,#dfe4ea 100%);transform:scale(.94);animation:exitWhite .65s 6.08s var(--ease-out) forwards}.curtain{position:absolute;z-index:18;left:0;width:100%;height:50.5%;background:#000;transform:scaleY(0);will-change:transform}.curtain-top{top:0;transform-origin:top;animation:curtainClose .58s 5.5s var(--ease-cinema) forwards,curtainOpen .68s 6.28s var(--ease-cinema) forwards}.curtain-bottom{bottom:0;transform-origin:bottom;animation:curtainClose .58s 5.5s var(--ease-cinema) forwards,curtainOpen .68s 6.28s var(--ease-cinema) forwards}.curtain-seam{position:absolute;z-index:19;left:0;right:0;top:50%;height:2px;opacity:0;background:linear-gradient(90deg,transparent 8%,#fff 50%,transparent 92%);box-shadow:0 0 20px 5px rgba(255,255,255,.7);transform:scaleX(1);animation:seamContract .46s 5.97s var(--ease-cinema) forwards}
.skip{position:absolute;z-index:25;right:3.5vw;bottom:2.2vh;color:rgba(255,255,255,.5);border:0;background:transparent;font-size:9px;letter-spacing:.22em;cursor:pointer;padding:12px;transition:color .2s var(--ease-out)}.mike-film.is-leaving .film{opacity:0;transition:opacity .28s var(--ease-out)}
@keyframes cameraDrift{0%{transform:scale(1.055) translate3d(-.35%,.45%,0)}48%{transform:scale(1.068) translate3d(.12%,.12%,0)}100%{transform:scale(1.085) translate3d(0,-.12%,0)}}
@keyframes sceneReveal{0%{opacity:0;filter:brightness(.08) contrast(1.34) saturate(.5);transform:scale(1.065)}36%{opacity:.48}100%{opacity:1;filter:brightness(.68) contrast(1.14) saturate(.7);transform:scale(1.018)}}@keyframes sceneSettle{to{filter:brightness(.38) contrast(1.2) saturate(.55);transform:scale(1)}}
@keyframes preludeLeft{0%{transform:translate3d(0,0,0)}100%{transform:translate3d(-101%,0,0)}}@keyframes preludeRight{0%{transform:translate3d(0,0,0) scaleX(-1)}100%{transform:translate3d(101%,0,0) scaleX(-1)}}@keyframes slitIgnite{0%{opacity:0;transform:translateX(-50%) scaleY(.3)}100%{opacity:1;transform:translateX(-50%) scaleY(1)}}@keyframes slitRelease{0%{opacity:1;filter:blur(0);transform:translateX(-50%) scaleX(1)}100%{opacity:0;filter:blur(9px);transform:translateX(-50%) scaleX(25)}}@keyframes preludeFloor{0%{opacity:0;transform:translateX(-50%) perspective(330px) rotateX(66deg) scaleY(.2)}55%{opacity:.5}100%{opacity:0;transform:translateX(-50%) perspective(330px) rotateX(66deg) scaleY(1)}}
@keyframes lightPlate{0%{opacity:0;filter:brightness(.65) contrast(1.1) blur(4px)}36%{opacity:.62}70%{opacity:.3}100%{opacity:0;filter:brightness(1.22) contrast(1) blur(0)}}@keyframes depthBreathe{0%{opacity:1}55%{opacity:.42}100%{opacity:.8}}
@keyframes matchedLeft{0%{opacity:0;transform:rotate(51deg) translate3d(-8%,0,0)}30%{opacity:.56}75%{opacity:.24}100%{opacity:0;transform:rotate(44deg) translate3d(12%,0,0)}}@keyframes matchedRight{0%{opacity:0;transform:rotate(-51deg) translate3d(8%,0,0)}28%{opacity:.58}72%{opacity:.22}100%{opacity:0;transform:rotate(-43deg) translate3d(-12%,0,0)}}@keyframes matchedCenter{0%{opacity:0;transform:rotate(0) scaleX(.7)}36%{opacity:.46}72%{opacity:.2}100%{opacity:0;transform:rotate(5deg) scaleX(1.1)}}
@keyframes floorGlint{0%{opacity:0;transform:translateX(-50%) perspective(350px) rotateX(66deg) scaleY(.55)}55%{opacity:.46}100%{opacity:.08;transform:translateX(-50%) perspective(350px) rotateX(66deg) scaleY(1)}}@keyframes vignetteEase{0%{opacity:.88}54%{opacity:.52}100%{opacity:.8}}
@keyframes titleBloom{0%{opacity:0;transform:translate(-50%,-50%) scale(.1)}42%{opacity:.72}100%{opacity:0;transform:translate(-50%,-50%) scale(4.8)}}@keyframes letterDevelop{to{opacity:1;filter:blur(0);transform:none}}@keyframes titleSheen{0%{opacity:0;transform:translate3d(-70%,0,0)}30%{opacity:.42}100%{opacity:0;transform:translate3d(70%,0,0)}}@keyframes titleRise{to{opacity:1;transform:translateY(0)}}@keyframes titleCopy{to{opacity:1;filter:blur(0);transform:translateY(0)}}@keyframes rule{to{transform:none}}
@keyframes curtainClose{0%{transform:scaleY(0)}100%{transform:scaleY(1)}}@keyframes curtainOpen{0%{transform:scaleY(1)}100%{transform:scaleY(0)}}@keyframes seamContract{0%{opacity:0;transform:scaleX(1)}25%{opacity:1}100%{opacity:0;transform:scaleX(.035)}}@keyframes exitWhite{0%{opacity:0;transform:scale(.94)}100%{opacity:1;transform:scale(1)}}
@media (hover:hover) and (pointer:fine){.skip:hover{color:#fff}}
@media(max-width:700px){.cinematic-scene{transform-origin:50% 58%;animation-name:cameraDriftMobile}.scene-image{inset:-2% -45%;background-size:auto 100%;background-position:50% 50%}.scene-vignette{box-shadow:inset 0 0 26vw 8vw #000}.prelude-slit{width:1px}.prelude-floor{width:22%}.matched-beam-left{left:-3%;width:14%}.matched-beam-right{right:-3%;width:14%}.matched-beam-center{left:44%;width:10%}.title-lockup h1{font-size:24vw}.title-lockup h2{font-size:15px}.title-rule{width:72vw}.skip{right:2vw}@keyframes cameraDriftMobile{0%{transform:scale(1.025) translate3d(0,.35%,0)}52%{transform:scale(1.04) translate3d(0,.08%,0)}100%{transform:scale(1.055) translate3d(0,-.12%,0)}}}
@media(prefers-reduced-motion:reduce){.cinematic-scene{animation:none;transform:none}.prelude,.matched-lights,.floor-glint{display:none}.scene-image-base{animation:sceneReveal .6s var(--ease-out) forwards}.scene-image-light{display:none}.title-bloom{animation:none}.title-lockup h1 span{animation-delay:1.1s}.title-rule{animation-delay:1.45s}.title-rule i{animation-delay:1.5s}.title-lockup h2{animation-delay:1.65s}.curtain-top,.curtain-bottom{animation:none}.exit-white{animation:exitWhite .3s 6.55s var(--ease-out) forwards}.curtain-seam{display:none}}

/* Keep the two opening panels geometrically independent and symmetric. */
.prelude-wing-left{background:linear-gradient(90deg,#000 0,#000 86%,rgba(0,0,0,.985) 100%)}
.prelude-wing-right{background:linear-gradient(270deg,#000 0,#000 86%,rgba(0,0,0,.985) 100%);transform:none}
@keyframes preludeRight{0%{transform:translate3d(0,0,0)}100%{transform:translate3d(101%,0,0)}}