/* coming-soon.html only. Base styles are the final state, so reduced motion (site.css kills all animations) shows the page at rest. */
.cs{position:relative;min-height:var(--vh);display:grid;place-items:center;overflow:hidden;padding:calc(var(--nav) + 6vh) 24px 10vh;text-align:center;isolation:isolate}
.cs .aurora{z-index:-1}
.cs::after{content:"";position:absolute;inset:auto 0 0;height:30vh;background:linear-gradient(transparent,#000);z-index:-1;pointer-events:none}
.cs-in{max-width:880px}

/* viewfinder: four gold corners lock onto the icon, then a shutter flash */
.vf{position:relative;width:148px;height:148px;margin:0 auto 34px;display:grid;place-items:center}
.vf img{width:104px;height:104px;border-radius:24px;box-shadow:0 18px 60px rgba(255,170,0,.25)}
.vf i{position:absolute;width:26px;height:26px;border:2px solid var(--gold);--x:0px;--y:0px}
.vf i:nth-of-type(1){top:0;left:0;border-width:2px 0 0 2px;border-top-left-radius:8px;--x:-28px;--y:-28px}
.vf i:nth-of-type(2){top:0;right:0;border-width:2px 2px 0 0;border-top-right-radius:8px;--x:28px;--y:-28px}
.vf i:nth-of-type(3){bottom:0;left:0;border-width:0 0 2px 2px;border-bottom-left-radius:8px;--x:-28px;--y:28px}
.vf i:nth-of-type(4){bottom:0;right:0;border-width:0 2px 2px 0;border-bottom-right-radius:8px;--x:28px;--y:28px}
.vf::after{content:"";position:absolute;inset:-40vmax;background:radial-gradient(closest-side,rgba(255,240,200,.55),transparent);opacity:0;pointer-events:none}

.cs-eye{color:var(--gold);font-size:17px;font-weight:600;letter-spacing:.01em;margin-bottom:14px}
.cs h1{font-size:clamp(52px,8.4vw,112px);line-height:1;margin:0 0 26px}
.cs .ln{display:block;clip-path:inset(-.25em -.2em -.3em -.2em)}
.cs .ln>span{display:inline-block}
.cs .ln+.ln>span{color:var(--gold)}
html[lang=fa] .cs h1{line-height:1.35;letter-spacing:0}
.cs-p{font-size:21px;line-height:1.55;color:#d2d2d7;max-width:620px;margin:0 auto}
.cs-act{display:flex;flex-wrap:wrap;gap:16px 28px;justify-content:center;align-items:center;margin-top:40px}
.cs-mail{font-size:17px;padding:14px 26px;transition:background-color .3s var(--ease),box-shadow .3s var(--ease)}
.cs-mail bdi{direction:ltr}
.mag{translate:var(--mx,0) var(--my,0);transition:translate .5s var(--expo),background-color .3s var(--ease),box-shadow .3s var(--ease)}
.mag.near{transition:translate .15s linear,background-color .3s var(--ease),box-shadow .3s var(--ease)}

/* reveal sequence (starts once i18n has applied the language, so Persian never animates while hidden) */
html:not(.i18n-wait) .vf i{animation:lock 1s var(--expo) .15s both}
html:not(.i18n-wait) .vf picture{animation:pop 1.1s var(--expo) .1s both}
html:not(.i18n-wait) .vf::after{animation:flash 1s var(--soft) .85s both}
html:not(.i18n-wait) .cs .cs-rv{animation:up 1s var(--expo) both}
html:not(.i18n-wait) .cs .ln>span{animation:rise 1.2s var(--expo) both}
.r1{animation-delay:.75s!important}.r2{animation-delay:.9s!important}.r3{animation-delay:1.02s!important}.r4{animation-delay:1.25s!important}.r5{animation-delay:1.4s!important}
@keyframes lock{0%{opacity:0;transform:translate(var(--x),var(--y))}60%{opacity:1}100%{opacity:1;transform:none}}
@keyframes pop{from{opacity:0;transform:scale(.82);filter:blur(10px)}}
@keyframes flash{0%{opacity:0}12%{opacity:1}100%{opacity:0}}
@keyframes up{from{opacity:0;transform:translateY(22px)}}
@keyframes rise{from{transform:translateY(112%) rotate(3deg)}}
html[dir=rtl] .cs .ln>span{animation-name:rise-rtl}
@keyframes rise-rtl{from{transform:translateY(112%) rotate(-3deg)}}

/* the "eye on you" object (css/eye.css): above the text on narrow screens, where it stands in for the icon */
.cs-obj{order:-1;width:min(100%,560px);height:min(40vh,440px);margin:0 auto 10px}
@media (max-width:899px){.cs .vf{display:none}}
@media (min-width:900px){
  .cs{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:4vw;place-items:center stretch;text-align:start;padding-inline:max(5vw,calc((100vw - 1320px) / 2))}
  .cs-in{justify-self:end;width:100%;max-width:600px}
  .vf{margin:0 0 30px;margin-inline-start:-22px}
  .cs h1{font-size:clamp(52px,6.2vw,100px)}
  .cs-p{margin:0}
  .cs-act{justify-content:flex-start}
  .cs-obj{order:0;width:100%;height:min(76vh,740px);margin:0}
}

@media (max-width:734px){
  .cs{padding:calc(var(--nav) + 2vh) 22px 6vh}
  .cs-obj{height:38vh;margin-bottom:6px}
  .vf{width:116px;height:116px;margin-bottom:26px}
  .vf img{width:80px;height:80px;border-radius:18px}
  .vf i{width:20px;height:20px}
  .cs-eye{font-size:15px}
  .cs h1{font-size:46px;margin-bottom:20px}
  html[lang=fa] .cs h1{font-size:44px}
  .cs-p{font-size:17px}
  .cs-act{flex-direction:column;margin-top:32px}
  .cs-mail{font-size:15px;padding:13px 22px}
}
@media (prefers-reduced-motion:reduce){.mag{translate:none}}