/* Meranti Orman — silent cinematic opening experience */
.mo-intro{position:fixed;inset:0;z-index:200000;overflow:hidden;background:#0b120e;color:#fff;isolation:isolate;transition:opacity .72s cubic-bezier(.4,0,.2,1),visibility .72s ease}
.mo-intro[hidden]{display:none!important}
.mo-intro-bg,.mo-intro-overlay,.mo-intro-grain,.mo-intro-light{position:absolute;inset:0;pointer-events:none}
.mo-intro-bg{background-position:center;background-size:cover;will-change:transform,opacity,clip-path}
.mo-intro-deck{z-index:-4;background-image:url('/deck.jpg');opacity:1;clip-path:none;transform:scale(1.05);animation:moDeckMove 3.4s ease-out forwards}
.mo-intro-overlay{z-index:-3;background:radial-gradient(circle at 50% 44%,rgba(244,211,157,.13),transparent 34%),linear-gradient(115deg,rgba(5,14,9,.78),rgba(10,23,15,.48) 48%,rgba(34,24,13,.55)),linear-gradient(180deg,rgba(0,0,0,.04),rgba(0,0,0,.44))}
.mo-intro-light{z-index:-2;left:-45%;right:auto;width:34%;background:linear-gradient(100deg,transparent,rgba(255,226,180,.16),transparent);filter:blur(4px);transform:skewX(-12deg);animation:moLight 1.7s .45s ease-in-out forwards}
.mo-intro-grain{z-index:-1;opacity:.105;mix-blend-mode:screen;background-image:repeating-radial-gradient(ellipse at 30% 50%,transparent 0 16px,rgba(255,255,255,.085) 17px,transparent 19px 33px);background-size:180px 90px;animation:moGrain 9s linear infinite}
.mo-intro-inner{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:30px 20px}
.mo-intro-mark{position:relative;width:168px;max-width:52vw;padding:10px 12px;border-radius:14px;background:rgba(255,255,255,.97);box-shadow:0 22px 60px rgba(0,0,0,.32),0 0 0 1px rgba(255,255,255,.22);opacity:0;transform:translateY(12px);animation:moLogoIn .62s .12s ease-out forwards}
.mo-intro-mark::after{content:"";position:absolute;inset:-1px;border-radius:18px;background:linear-gradient(110deg,transparent 20%,rgba(255,255,255,.6) 48%,transparent 74%);transform:translateX(-130%);mix-blend-mode:screen;animation:moLogoSheen .82s .88s ease-out forwards;pointer-events:none}
.mo-intro-logo{display:block;width:168px;max-width:100%;height:auto;image-rendering:auto;filter:none;transform:none}
.mo-intro-line{width:0;height:2px;margin:25px auto 18px;border-radius:999px;background:linear-gradient(90deg,transparent,#caa36d,#fff0d5,#caa36d,transparent);box-shadow:0 0 24px rgba(238,196,133,.5);animation:moLine .9s .92s ease forwards}
.mo-intro-kicker{margin:0 0 8px;font-size:11px;font-weight:800;letter-spacing:.30em;text-transform:uppercase;color:#ead2a9;opacity:0;transform:translateY(10px);animation:moTextIn .54s 1.06s ease forwards}
.mo-intro-title{margin:0;max-width:720px;font-size:clamp(24px,4vw,41px);font-weight:600;line-height:1.16;letter-spacing:-.026em;text-shadow:0 10px 34px rgba(0,0,0,.5);opacity:0;transform:translateY(12px);animation:moTextIn .64s 1.18s ease forwards}
.mo-intro-exit{position:absolute;left:50%;bottom:6.2vh;width:min(170px,34vw);height:1px;transform:translateX(-50%);overflow:hidden;background:rgba(255,255,255,.16);opacity:0;animation:moFadeIn .24s 1.36s forwards}
.mo-intro-exit::after{content:"";display:block;width:100%;height:100%;background:rgba(234,210,169,.88);transform:translateX(-100%);animation:moProgress 1.42s 1.46s linear forwards}
.mo-intro-leaving{opacity:0;visibility:hidden;pointer-events:none}
.mo-intro-leaving .mo-intro-inner{opacity:.985;transition:opacity .72s ease}
body.mo-intro-lock{overflow:hidden}
@keyframes moDeckMove{to{transform:scale(1.015)}}
@keyframes moLight{0%{transform:translateX(0) skewX(-12deg);opacity:0}25%{opacity:1}100%{transform:translateX(540%) skewX(-12deg);opacity:0}}
@keyframes moLogoIn{to{opacity:1;transform:translateY(0)}}
@keyframes moLogoSheen{to{transform:translateX(130%)}}
@keyframes moLine{to{width:min(360px,72vw)}}
@keyframes moTextIn{to{opacity:1;transform:translateY(0)}}
@keyframes moFadeIn{to{opacity:1}}
@keyframes moProgress{to{transform:translateX(0)}}
@keyframes moGrain{to{background-position:180px 90px}}
@media(max-width:620px){.mo-intro-mark{width:148px;max-width:58vw;padding:9px 11px}.mo-intro-title{max-width:92vw;font-size:clamp(23px,7vw,34px)}.mo-intro-kicker{font-size:10px;letter-spacing:.23em}.mo-intro-deck{background-position:68% center}}
@media(prefers-reduced-motion:reduce){.mo-intro-bg,.mo-intro-light,.mo-intro-grain,.mo-intro-mark,.mo-intro-mark::after,.mo-intro-line,.mo-intro-kicker,.mo-intro-title,.mo-intro-exit,.mo-intro-exit::after{animation:none!important}.mo-intro-deck{opacity:1;clip-path:none;transform:none}.mo-intro-mark,.mo-intro-kicker,.mo-intro-title,.mo-intro-exit{opacity:1;transform:none;filter:none}.mo-intro-line{width:min(360px,72vw)}}

/* v44: concise opening, matching motion and exit timings */
.mo-intro{transition:opacity .28s ease,visibility .28s ease}
.mo-intro-deck{animation-duration:1.5s}
.mo-intro-light{animation-duration:.8s;animation-delay:.15s}
.mo-intro-mark{animation-duration:.35s;animation-delay:.05s}
.mo-intro-mark::after{animation-duration:.4s;animation-delay:.35s}
.mo-intro-line{animation-duration:.4s;animation-delay:.2s}
.mo-intro-kicker{animation-duration:.35s;animation-delay:.3s}
.mo-intro-title{animation-duration:.4s;animation-delay:.4s}
.mo-intro-exit{animation-delay:.45s}
.mo-intro-exit::after{animation-duration:.6s;animation-delay:.5s}
.mo-intro-leaving .mo-intro-inner{transition:opacity .28s ease}
@media(prefers-reduced-motion:reduce){.mo-intro{display:none!important}}
