/* The daylight encounter becomes the night portal around one continuous feather. */
#gate[data-prelude="peacock"]{
  --prelude-day-opacity:1;--prelude-world-scale:1;--prelude-world-x:0px;--prelude-world-y:0px;--prelude-focus-x:50vw;--prelude-focus-y:86svh;
  --prelude-feather-x:50vw;--prelude-feather-y:78svh;--prelude-feather-width:120px;--prelude-feather-height:180px;
  --prelude-feather-turn:75deg;--prelude-feather-tip:65deg;--prelude-feather-opacity:0;
  --prelude-feather-scale-x:.25;--prelude-feather-scale-y:.25;
  --prelude-shadow-opacity:0;--prelude-night-progress:0;--prelude-overhead-opacity:0;
  --prelude-camera-x:0px;--prelude-camera-y:0px;--prelude-camera-scale:1;--prelude-camera-tip:56deg;--prelude-camera-distance:8000px;--prelude-camera-turn:0deg;
  --prelude-shadow-x:50vw;--prelude-shadow-y:78svh;--prelude-shadow-width:120px;--prelude-shadow-height:180px;
  --prelude-shadow-tip:56deg;--prelude-shadow-turn:-22deg;
}
#peacock-prelude{position:absolute;inset:0;z-index:7;overflow:clip;pointer-events:none}
#peacock-prelude::before{content:"";position:absolute;inset:0;background:#d7d2bd url("assets/peacock-departed-v15.webp") center/cover no-repeat;opacity:var(--prelude-day-opacity);pointer-events:none}
#prelude-world{position:absolute;inset:0;overflow:hidden;opacity:var(--prelude-day-opacity);transform:translate(var(--prelude-world-x),var(--prelude-world-y)) scale(var(--prelude-world-scale));transform-origin:var(--prelude-focus-x) var(--prelude-focus-y);will-change:transform,opacity;background:#d7d2bd}
.prelude-garden{display:block;position:absolute;inset:0}
.prelude-garden img,.prelude-movie{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;object-position:50% 50%}
#prelude-ambient,#prelude-idle,#prelude-flight,#prelude-empty{opacity:0}
#gate.prelude-ambient-playing #prelude-ambient{opacity:1}
#gate[data-prelude-phase="feeding"] #prelude-idle{transition:opacity 180ms ease}
#gate.prelude-idle-playing #prelude-idle{opacity:1}
#gate.prelude-flight-playing #prelude-flight{opacity:1}
#gate.prelude-empty #prelude-empty{opacity:1}
#prelude-camera{position:absolute;inset:0;z-index:5;transform-origin:var(--prelude-focus-x) var(--prelude-focus-y);transform:translate3d(var(--prelude-camera-x),var(--prelude-camera-y),0) perspective(var(--prelude-camera-distance)) rotateX(var(--prelude-camera-tip)) rotate(var(--prelude-camera-turn)) scale(var(--prelude-camera-scale));transform-style:preserve-3d;will-change:transform;pointer-events:none}
#prelude-overhead{position:absolute;left:calc(var(--prelude-focus-x) - 100vmax);top:calc(var(--prelude-focus-y) - 200svh);width:200vmax;height:400svh;opacity:var(--prelude-overhead-opacity);transform:translateZ(-1px);will-change:opacity;pointer-events:none;background:#c9bdaa url("assets/feather-floor-overhead-v26.webp") center/120vmax 80vmax repeat}
/* Overscan supplies coverage; the independent texture size retains real stone
   detail instead of magnifying a tiny crop of a viewport-sized photograph. */
#prelude-overhead img{display:block;width:100%;height:100%;object-fit:cover;visibility:hidden}
.prelude-introduction{position:absolute;z-index:2;top:17svh;left:6%;width:88%;text-align:center;color:#214653;pointer-events:none;text-shadow:0 1px 14px #fff9df,0 0 30px #fff9df}
.prelude-introduction p{margin:0;font:italic 400 clamp(28px,4.2svh,42px)/1.2 var(--font-display)}
#prelude-peacock{position:absolute;left:8%;top:44%;width:77%;height:39%;z-index:3;pointer-events:auto;cursor:pointer;border:0;border-radius:42%;background:none;padding:0;-webkit-tap-highlight-color:transparent}
#prelude-peacock:focus-visible{outline:2px solid #fff1bc;outline-offset:7px;box-shadow:0 0 0 4px #25464d5e}
#prelude-peacock:disabled{pointer-events:none;cursor:default}
#prelude-instruction{position:absolute;z-index:2;bottom:7svh;left:5%;width:90%;text-align:center;pointer-events:none;color:#214653;text-shadow:0 1px 6px #fff9ef,0 0 18px #fff9ef,0 0 36px #fff9ef}
#prelude-instruction>span{font:italic 400 clamp(26px,3.6svh,34px)/1.15 var(--font-display)}
#prelude-instruction p{margin:6px 0 0;font:400 16px/1.3 var(--font-body)}
.prelude-introduction,#prelude-instruction{transition:opacity 450ms ease}
#gate:not([data-prelude-phase="watching"]) .prelude-introduction,#gate:not([data-prelude-phase="watching"]) #prelude-instruction{opacity:0}
#prelude-feather{position:absolute;left:0;top:0;width:480px;height:720px;transform-origin:0 0;transform:translate3d(var(--prelude-local-x),var(--prelude-local-y),.6px) rotateX(var(--prelude-feather-local-tip)) rotate(var(--prelude-feather-local-turn)) scale(var(--prelude-feather-scale-x),var(--prelude-feather-scale-y)) translate(-53.6%,-27.5%);opacity:var(--prelude-feather-opacity);will-change:transform,opacity;pointer-events:none}
#prelude-feather img{display:block;width:100%;height:100%;object-fit:contain;opacity:1;user-select:none}
#prelude-shadow{position:absolute;left:0;top:0;width:480px;height:720px;transform-origin:0 0;transform:translate3d(var(--prelude-shadow-local-x),var(--prelude-shadow-local-y),0) rotate(var(--prelude-feather-local-turn)) scale(var(--prelude-shadow-scale-x),var(--prelude-shadow-scale-y)) translate(-53.6%,-27.5%);opacity:calc(var(--prelude-shadow-opacity)*.30);will-change:transform,opacity;pointer-events:none}
#prelude-shadow img{display:block;width:100%;height:100%;object-fit:fill;filter:brightness(0) blur(var(--prelude-shadow-blur,3.2px))}
#gate[data-prelude="peacock"]:not([data-prelude-phase="portal"]):not([data-prelude-phase="complete"]) .portal-feather-stage,
#gate[data-prelude="peacock"]:not([data-prelude-phase="portal"]):not([data-prelude-phase="complete"]) #feather-effects{visibility:hidden}
#gate[data-prelude="peacock"]:not([data-prelude-phase="portal"]):not([data-prelude-phase="complete"]) .portal-introduction,
#gate[data-prelude="peacock"]:not([data-prelude-phase="portal"]):not([data-prelude-phase="complete"]) .portal-instruction{opacity:var(--prelude-night-progress)}
#gate[data-prelude="peacock"]:not([data-prelude-phase="portal"]):not([data-prelude-phase="complete"]) .portal-reflection{opacity:calc(.17 * var(--prelude-night-progress))}
#gate[data-prelude-phase="portal"] #peacock-prelude,#gate[data-prelude-phase="complete"] #peacock-prelude{display:none}
#gate[data-prelude="peacock"]:not([data-prelude-phase="portal"]):not([data-prelude-phase="complete"]) #skip-opening{color:#25454b;background:#fbf6e2c4;border-bottom-color:#41584645;backdrop-filter:blur(5px)}
#gate[data-prelude="peacock"][data-prelude-shot="night"]:not([data-prelude-phase="complete"]) #skip-opening{color:#e7dac0;background:transparent;border-bottom-color:#ddc89c45}
#gate[data-prelude-phase="approaching"] #skip-opening{opacity:.65}
@media(min-aspect-ratio:4/3){
  .prelude-movie{left:50%;right:auto;width:77svh;transform:translateX(-50%);mask-image:linear-gradient(90deg,transparent,#000 18% 82%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 18% 82%,transparent)}
  .prelude-introduction{top:12svh}
  #prelude-instruction{top:23svh;bottom:auto}
}
@media(max-height:650px) and (orientation:portrait){
  .prelude-introduction{top:16svh}.prelude-introduction p{font-size:30px}
  #prelude-instruction{bottom:4svh}#prelude-instruction>span{font-size:26px}#prelude-instruction p{font-size:14px}
}
@media(max-height:500px) and (orientation:landscape){
  .prelude-introduction{top:28%;left:4%;width:27%;text-align:left}.prelude-introduction p{font-size:30px}
  #prelude-instruction{top:auto;bottom:25%;left:auto;right:4%;width:27%;text-align:right}#prelude-instruction>span{font-size:26px}
}
@media(prefers-reduced-motion:reduce){#peacock-prelude *{transition:none!important;will-change:auto!important}}
