:root{
  --paper:#ffffff;
  --ink:#0d0d0d;
  --stage-scale:1;
  --camera-scale:1;
  --camera-y:0px;
  --camera-blur:0px;
  --menu-font:"Cinzel", Georgia, serif;
  --serif:"Cormorant Garamond", Georgia, serif;
  --fa:"Vazirmatn", Tahoma, sans-serif;
  --paper-ease:cubic-bezier(.16,.84,.24,1);
}
*{box-sizing:border-box}
html,body{width:100%;height:100%;margin:0;overflow:hidden;background:#fff;color:var(--ink)}
body{font-family:var(--serif);overscroll-behavior:none;touch-action:none;-webkit-font-smoothing:antialiased;text-rendering:geometricPrecision}
body[data-lang="fa"]{font-family:var(--fa)}
img{display:block;max-width:none;user-select:none;-webkit-user-drag:none}
button,a{font:inherit;color:inherit}
button{-webkit-tap-highlight-color:transparent}

.intro-viewport{position:fixed;inset:0;overflow:hidden;background:#fff;isolation:isolate}
.intro-stage{
  position:absolute;left:50%;top:50%;width:1672px;height:941px;
  transform:translate(-50%,-50%) translate3d(0,var(--camera-y),0) scale(calc(var(--stage-scale) * var(--camera-scale)));
  transform-origin:50% 50%;overflow:visible;perspective:2400px;transform-style:preserve-3d;
  filter:blur(var(--camera-blur));will-change:transform,filter;
}
.piece{
  position:absolute;left:var(--x);top:var(--y);width:var(--w);z-index:var(--z);pointer-events:none;transform-origin:50% 50%;
  transform:translate3d(calc(var(--pointer-x,0px) + var(--exit-x,0px)),calc(var(--depth-y,0px) + var(--pointer-y,0px)),0);
  will-change:transform;
}
.piece>.motion{position:relative;width:100%;transform-origin:50% 50%;will-change:transform}
.piece img{width:100%;height:auto}
html.has-js .piece>.motion{visibility:hidden}

.piece--background>.motion,.piece--moon>.motion,.tower>.motion{mix-blend-mode:multiply}
.piece--moon>.motion{transform-origin:50% 50%}
.piece--floor>.motion{transform-origin:50% 0%}
.gate>.motion{transform-origin:50% 100%}
.window--left>.motion{transform-origin:100% 100%}
.window--right>.motion{transform-origin:0% 100%}
.side-character>.motion{transform-origin:50% 100%}

/* Very light depth dust. No coloured or grey wash: the page remains pure white. */
.atmo-particles{position:absolute;inset:0;z-index:2;pointer-events:none;overflow:hidden}
.atmo-particles span{position:absolute;width:1.4px;height:1.4px;border-radius:50%;background:rgba(0,0,0,.17);filter:blur(.2px);opacity:.24}
.atmo-particles span.is-near{width:2.4px;height:2.4px;opacity:.09;filter:blur(.55px)}

/* Guardians */
.guardian{height:150px}
.guardian__assembly{height:150px;position:relative;transform-origin:50% 100%}
.guardian__body{position:absolute!important;left:0;top:0;width:100%!important}
.guardian__lamp{position:absolute!important;left:-6%;top:49%;width:53%!important;transform-origin:77% 3%;filter:drop-shadow(0 .5px 0 rgba(0,0,0,.16))}
.guardian__assembly--mirror{transform:scaleX(-1)}
.guardian.is-alive .guardian__assembly{animation:guardianBreath 9.5s ease-in-out infinite}
.guardian.is-alive .guardian__lamp{animation:lampSwing 5.8s ease-in-out infinite}
.guardian--right.is-alive .guardian__assembly{animation-delay:-3.8s}
@keyframes guardianBreath{0%,100%{translate:0 0;rotate:0deg}50%{translate:0 -1.5px;rotate:.14deg}}
@keyframes lampSwing{0%,100%{rotate:-1.9deg}50%{rotate:8.1deg}}

/* Living eye: iris is clipped by an eye-shaped mask and can never escape the frame. */
.eye-piece{aspect-ratio:1/1}
.eye{position:relative;width:100%;aspect-ratio:1/1;transform-origin:center}
.eye__frame{position:absolute!important;left:0;top:0;width:100%!important;z-index:4}
.eye__mask{position:absolute;z-index:2;left:22%;top:15%;width:56%;height:55%;overflow:hidden;clip-path:ellipse(38% 26% at 50% 50%)}
.eye__iris{position:absolute!important;left:0;top:0;width:100%!important;transform-origin:50% 50%;transition:filter .22s ease,scale .22s ease,translate .16s ease,rotate .18s ease}
.eye__lid{position:absolute;z-index:3;left:23%;top:45%;width:54%;height:11%;border-radius:50%;background:#080808;transform:scaleY(.02);transform-origin:50% 50%;opacity:0;transition:transform .18s ease,opacity .18s ease}
.eye.is-closing .eye__iris{filter:brightness(0);scale:1.03 .18}
.eye.is-closing .eye__lid{transform:scaleY(1.5);opacity:1}

/* Camels: cargo is deliberately smaller than V3 and physically attached to the back. */
.camel{height:560px}
.camel__assembly{height:560px;position:relative;transform-origin:50% 100%}
.camel__body{position:absolute!important;left:0;top:0;width:100%!important;z-index:1}
.camel__cargo{position:absolute;left:10%;top:13%;width:60%;height:35%;z-index:3;transform-origin:50% 82%}
.camel--right .camel__cargo{left:40%;top:8%;width:60%}
.camel__cage{position:absolute!important;left:0;top:0;width:100%!important}
.camel__cage-bottom{position:absolute!important;left:8%;top:70%;width:90%!important;z-index:2}
.camel.is-alive .camel__assembly{animation:camelIdle 11.6s ease-in-out infinite}
.camel.is-alive .camel__cargo{animation:cargoIdle 6.6s ease-in-out infinite}
.camel--right.is-alive .camel__assembly{animation-delay:-4.4s}
.camel--right.is-alive .camel__cargo{animation-delay:-1.7s}
@keyframes camelIdle{0%,100%{translate:0 0;rotate:0deg}18%{translate:1px -1px;rotate:.10deg}28%{translate:0 0;rotate:-.08deg}78%{translate:0 0;rotate:0deg}88%{translate:-1px -1px;rotate:-.11deg}}
@keyframes cargoIdle{0%,100%{rotate:0deg;translate:0 0}35%{rotate:.9deg;translate:0 -1px}70%{rotate:-.7deg;translate:0 1px}}

/* Peacocks */
.peacock>.motion{transform-origin:50% 100%}
.peacock-right__assembly{position:relative;width:100%;height:238px;transform-origin:50% 100%}
.peacock-right__body{position:absolute!important;left:0;top:0;width:55%!important;z-index:3}
.peacock-right__tail{position:absolute!important;left:37%;top:41%;width:68%!important;z-index:1;transform-origin:4% 15%}
.peacock--left.is-alive>.motion{animation:peacockLeftIdle 10.8s ease-in-out infinite}
.peacock--right.is-alive .peacock-right__body{animation:peacockBodyIdle 9.8s ease-in-out infinite}
.peacock--right.is-alive .peacock-right__tail{animation:tailBreath 6.2s ease-in-out infinite}
@keyframes peacockLeftIdle{0%,100%{rotate:0deg;translate:0 0}44%{rotate:.24deg;translate:0 -1.6px}58%{rotate:-.10deg;translate:0 0}}
@keyframes peacockBodyIdle{0%,100%{rotate:0deg;translate:0 0}50%{rotate:-.24deg;translate:0 -1.3px}}
@keyframes tailBreath{0%,100%{rotate:-10.5deg}50%{rotate:-50.15deg}}

/* Bird 7 */
.bird7{aspect-ratio:1/1}
.bird7__assembly{position:relative;width:100%;aspect-ratio:1/1;transform-origin:50% 50%}
.bird7__body{position:absolute!important;left:16%;top:17%;width:68%!important;z-index:3}
.bird7__wing{position:absolute!important;left:10%;top:0;width:85%!important;z-index:1;transform-origin:50% 59%}
.bird7.is-alive .bird7__wing{animation:bird7Wing 1.15s ease-in-out infinite alternate}
.bird7.is-alive .bird7__assembly{animation:bird7Hover 7.6s ease-in-out infinite}
@keyframes bird7Wing{from{rotate:-5.5deg;scale:1 .93}to{rotate:6.5deg;scale:1 1.035}}
@keyframes bird7Hover{0%,100%{translate:0 0;rotate:-.25deg}50%{translate:4px -4px;rotate:.65deg}}

/* Minimal enter marker */
.enter-mark{border:0;background:transparent;padding:0;cursor:pointer;pointer-events:auto;aspect-ratio:1/1;color:var(--ink)}
.enter-mark__motion{display:block!important;position:relative;width:100%;aspect-ratio:1/1;transform-origin:50% 50%}
.enter-mark img{width:100%!important}
.enter-mark__word{position:absolute;left:50%;top:66%;transform:translate(-50%,-50%);font-family:var(--menu-font);font-size:5.6px;letter-spacing:.36em;text-transform:uppercase;background:rgba(255,255,255,.92);padding:0 2px 0 4px;white-space:nowrap}
body[data-lang="fa"] .enter-mark__word{font-family:var(--fa);font-size:7px;letter-spacing:0;padding:0 3px}
.enter-mark.is-alive .enter-mark__motion{animation:enterDrift 4.9s ease-in-out infinite}
@keyframes enterDrift{0%,100%{translate:0 0;scale:1}50%{translate:0 1.7px;scale:1.012}}
.scroll-whisper{position:absolute;z-index:91;left:50%;top:850px;transform:translateX(-50%);font-family:var(--menu-font);font-size:5.5px;letter-spacing:.44em;text-transform:uppercase;opacity:0;pointer-events:none;white-space:nowrap}
body[data-lang="fa"] .scroll-whisper{font-family:var(--fa);letter-spacing:.03em;font-size:7px}
.scroll-whisper span{position:relative;padding-left:.44em}
.scroll-whisper span:before{content:"";position:absolute;left:50%;bottom:12px;width:1px;height:13px;background:currentColor;transform-origin:50% 100%;animation:whisperLine 3.6s ease-in-out infinite}
@keyframes whisperLine{0%,100%{scale:1 .3;opacity:.26}50%{scale:1 1;opacity:.68}}

/* Top-right logo menu only. */
.story-menu{position:fixed;z-index:1000;top:max(18px,env(safe-area-inset-top));right:max(18px,env(safe-area-inset-right));height:40px;direction:ltr;pointer-events:none}
.story-menu__toggle{position:absolute;right:0;top:0;width:38px;height:38px;border:1px solid rgba(12,12,11,.22);border-radius:50%;background:#fff;padding:4px;display:grid;place-items:center;cursor:pointer;pointer-events:auto;transition:transform .72s var(--paper-ease),border-color .3s ease;z-index:3;overflow:hidden}
.story-menu__toggle:hover{border-color:rgba(12,12,11,.58)}
.story-menu__toggle img{width:100%;height:100%;object-fit:contain;transition:transform .72s var(--paper-ease)}
.story-menu__chevron{position:absolute;right:2px;bottom:2px;width:7px;height:7px;border-right:1px solid #111;border-bottom:1px solid #111;transform:rotate(45deg) scale(.6);opacity:.55;transition:transform .6s var(--paper-ease)}
.story-menu__rail{position:absolute;right:0;top:1px;height:36px;width:462px;padding:0 50px 0 16px;display:flex;align-items:center;justify-content:flex-end;gap:14px;background:#fff;border-top:1px solid rgba(12,12,11,.18);border-bottom:1px solid rgba(12,12,11,.18);box-shadow:0 2px 16px rgba(0,0,0,.025);clip-path:inset(0 0 0 100%);transform:translateX(20px);opacity:.001;transition:clip-path .7s var(--paper-ease),transform .7s var(--paper-ease),opacity .2s ease;pointer-events:none;white-space:nowrap}
.story-menu__rail a{font-family:var(--menu-font);font-size:10px;letter-spacing:.18em;text-decoration:none;position:relative;line-height:1.1}
body[data-lang="fa"] .story-menu__rail a{font-family:var(--fa);letter-spacing:0;font-size:11px}
.story-menu__rail a:after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:1px;background:currentColor;transform:scaleX(0);transition:transform .26s ease}
.story-menu__rail a:hover:after{transform:scaleX(1)}
.story-menu__dot{font-size:7px;opacity:.46}
.story-menu.is-open .story-menu__rail{clip-path:inset(0 0 0 0);transform:translateX(0);opacity:1;pointer-events:auto}
.story-menu.is-open .story-menu__toggle{transform:translateX(-412px)}
.story-menu.is-open .story-menu__toggle img{transform:rotate(-6deg)}
.story-menu.is-open .story-menu__chevron{transform:rotate(225deg) scale(.6)}

/* transition-paper is intentionally inert: white is already the page background. */
.transition-paper{position:absolute;inset:0;background:#fff;transform:scaleY(0);z-index:140;pointer-events:none}

/* Tuning mode */
body[data-tune="1"] .story-menu,body[data-tune="1"] .scroll-whisper{display:none!important}
body[data-tune="1"] .piece{pointer-events:none}
body[data-tune="1"] .piece.tune-selected{outline:1px dashed rgba(190,0,0,.9);outline-offset:4px;pointer-events:auto;cursor:move}
body[data-tune="1"] .piece.tune-selected:after{content:attr(data-piece);position:absolute;left:0;top:-22px;font:11px/1.2 monospace;background:#fff;border:1px solid #111;padding:2px 5px;white-space:nowrap;z-index:999}
.tune-reference{position:absolute;inset:0;width:1672px;height:941px;object-fit:fill;z-index:150;pointer-events:none;opacity:.28;mix-blend-mode:multiply}
.tune-panel{position:fixed;left:14px;top:14px;z-index:5000;width:290px;background:rgba(255,255,255,.97);border:1px solid #111;padding:12px;font:12px/1.35 monospace;box-shadow:0 8px 30px rgba(0,0,0,.10);touch-action:auto}
.tune-panel h3{font:600 13px/1.2 var(--menu-font);letter-spacing:.08em;margin:0 0 10px}
.tune-panel label{display:grid;grid-template-columns:34px 1fr;align-items:center;gap:6px;margin:5px 0}
.tune-panel select,.tune-panel input,.tune-panel button{font:12px/1.2 monospace;background:#fff;border:1px solid #aaa;padding:5px 6px;color:#111}
.tune-panel select{width:100%;margin-bottom:7px}
.tune-panel__row{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:7px}
.tune-panel__wide{display:grid;grid-template-columns:1fr;gap:6px;margin-top:7px}
.tune-panel button{cursor:pointer}.tune-panel button:hover{border-color:#111}
.tune-panel small{display:block;margin-top:8px;opacity:.7}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.intro-stage{filter:none!important}}
@media (max-width:980px){
  .story-menu{top:max(14px,env(safe-area-inset-top));right:max(14px,env(safe-area-inset-right))}
  .story-menu__rail{width:330px;padding:0 46px 0 12px;gap:10px}
  .story-menu__rail a{font-size:9px;letter-spacing:.13em}
  .story-menu.is-open .story-menu__toggle{transform:translateX(-284px)}
  .tune-panel{width:260px;max-height:calc(100vh - 28px);overflow:auto}
}