/* ===== Intro / splash screen ===== */
html.intro-lock{overflow:hidden}
html.intro-lock .site-header,html.intro-lock main,html.intro-lock .site-footer,html.intro-lock .bg-layer{visibility:hidden}
.intro{position:fixed;inset:0;z-index:1000;display:grid;place-items:center;color:#f5f3ee;overflow:hidden;
 background:radial-gradient(circle at 50% 42%,#5a0f16 0%,#240a0d 45%,#0e0405 100%);transition:opacity .7s ease,transform .8s cubic-bezier(.2,.7,.2,1),filter .7s}
.intro::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 50%,transparent 40%,#0008 100%);pointer-events:none}
.intro.out{opacity:0;transform:scale(1.06);filter:blur(6px);pointer-events:none}
.intro-inner{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:26px;padding:24px}
.intro-brand{display:flex;align-items:center;gap:clamp(12px,3vw,22px)}
.intro-mark{display:block;height:clamp(84px,17vw,130px);aspect-ratio:169/235;
 background:#c9962e;
 -webkit-mask:var(--m) center/contain no-repeat;mask:var(--m) center/contain no-repeat;
 filter:drop-shadow(0 6px 22px #c9962e66);opacity:0;animation:introPop .9s cubic-bezier(.2,.8,.2,1) .15s forwards}
.intro-word{display:block;height:clamp(66px,13vw,100px);width:auto;opacity:0;filter:drop-shadow(0 4px 14px #0008);animation:introSlide .9s cubic-bezier(.2,.8,.2,1) .5s forwards}
.intro-tag{font-size:clamp(.72rem,2vw,.9rem);letter-spacing:.32em;text-transform:uppercase;color:#d9a63d;opacity:0;animation:introFade .8s ease 1s forwards}
[dir=rtl] .intro-tag{letter-spacing:.08em;font-size:clamp(.95rem,2.4vw,1.1rem)}
.intro-bar{width:min(240px,60vw);height:3px;border-radius:3px;background:#ffffff1f;overflow:hidden;opacity:0;animation:introFade .5s ease 1.1s forwards}
.intro-bar i{display:block;height:100%;width:100%;background:#c9962e;transform:scaleX(0);transform-origin:left;animation:introBar var(--dur,3s) cubic-bezier(.4,.1,.3,1) forwards}
[dir=rtl] .intro-bar i{transform-origin:right}
.intro-skip{position:absolute;z-index:2;bottom:28px;inset-inline-end:28px;padding:9px 20px;border-radius:999px;border:1.5px solid #c9962e99;background:#0003;color:#d9a63d;font-family:inherit;font-weight:600;font-size:.85rem;line-height:1;letter-spacing:.06em;cursor:pointer;opacity:0;animation:introFade .6s ease 1.2s forwards;transition:.2s}
.intro-skip:hover{background:#c9962e;color:#1a0508}
[dir=rtl] .intro-skip{font-family:"Cairo",system-ui,sans-serif;letter-spacing:0;font-size:.95rem}
@keyframes introPop{from{opacity:0;transform:translateY(22px) scale(.82)}to{opacity:1;transform:none}}
@keyframes introSlide{from{opacity:0;transform:translateX(-22px)}to{opacity:1;transform:none}}
[dir=rtl] .intro-word{animation-name:introSlideRtl}
@keyframes introSlideRtl{from{opacity:0;transform:translateX(22px)}to{opacity:1;transform:none}}
@keyframes introFade{to{opacity:1}}
@keyframes introBar{to{transform:scaleX(1)}}
/* construction splash: a building rises floor by floor beside a tower crane as progress climbs to 100% */
.intro-loader-mode .intro-inner{gap:18px}
.intro-site{position:relative;display:flex;align-items:flex-end;justify-content:center;gap:6px;height:170px;padding-bottom:6px;opacity:0;animation:introFade .5s ease .2s forwards}
.intro-crane{flex:none;margin-bottom:6px;filter:drop-shadow(0 4px 10px #0006)}
.intro-hook{transform-origin:92px 18px;animation:hookSwing 2.4s ease-in-out infinite}
@keyframes hookSwing{0%,100%{transform:rotate(-5deg)}50%{transform:rotate(5deg)}}
.intro-building{display:flex;flex-direction:column-reverse;gap:3px;width:84px;margin-bottom:6px}
.intro-floor{display:grid;grid-template-columns:repeat(4,1fr);gap:5px;height:20px;padding:4px 6px;border-radius:2px;background:linear-gradient(180deg,#8a0e16,#5a0c14);border:1.5px solid #c9962e;
 opacity:0;transform:translateY(-26px);transition:opacity .35s ease,transform .5s cubic-bezier(.2,.9,.3,1.2)}
.intro-floor.on{opacity:1;transform:none}
.intro-floor i{background:#f0c15a55;border-radius:1px;transition:background .6s .3s}
.intro-floor.on i{background:#f0c15a}
.intro-ground{position:absolute;left:-10px;right:-10px;bottom:0;height:4px;border-radius:2px;background:#c9962e}
.intro-pct{font-weight:800;font-size:clamp(1.1rem,2.6vw,1.4rem);color:#f0c15a;letter-spacing:.06em;
 text-shadow:0 2px 8px #0007;opacity:0;animation:introFade .5s ease .3s forwards}
/* landing page content rises in after the intro */
html.intro-reveal .site-header{animation:introDrop .8s cubic-bezier(.2,.8,.2,1) both}
@keyframes introDrop{from{opacity:0;transform:translateY(-100%)}}
@media(prefers-reduced-motion:reduce){
 .intro-mark,.intro-word,.intro-tag,.intro-bar,.intro-skip{animation-duration:.01s;animation-delay:0s}
 .intro-mark{animation-name:introFade}.intro-bar i{animation-duration:1s}
 .intro-hook{animation:none}
 html.intro-reveal .hero .wrap>*,html.intro-reveal .site-header{animation:none}
}