/* Neelangan / through the feather. One photographic object, one continuous iris. */
#gate[data-story="feather-portal"]{
  --portal-ink:#071b2c;--portal-teal:#0b353b;--portal-gold:#d2ac68;--portal-ivory:#f5e8cc;
  --portal-eye-x:50vw;--portal-eye-y:38svh;--portal-aperture:0px;--portal-charge:0;
  --portal-zoom:1;--portal-feather-opacity:1;--portal-curtain:1;--portal-reveal:0;
  --portal-drift-y:0px;--portal-tilt:0deg;
  --portal-feather-width:min(40svh,72vw);--portal-stage-eye-y:38.5svh;
  position:fixed;inset:0;z-index:110;height:100svh;overflow:hidden;isolation:isolate;
  color:var(--portal-ivory);background:transparent;touch-action:manipulation;
}
#gate[data-story="feather-portal"][hidden]{display:none}
.portal-aperture{position:absolute;inset:0;overflow:hidden;background:var(--portal-ink);
  -webkit-mask-image:radial-gradient(circle at var(--portal-eye-x) var(--portal-eye-y),transparent 0 var(--portal-aperture),#000 calc(var(--portal-aperture) + 1px));
  mask-image:radial-gradient(circle at var(--portal-eye-x) var(--portal-eye-y),transparent 0 var(--portal-aperture),#000 calc(var(--portal-aperture) + 1px));
}
.portal-night{position:absolute;inset:0;overflow:hidden;opacity:calc(1 - var(--portal-charge)*.20)}
.portal-night img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 47%;filter:saturate(.78) brightness(.8)}
.portal-shade{position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,#05162175 0%,#061e2826 32%,#03192212 54%,#031720ad 100%)}
.portal-introduction{position:absolute;z-index:2;top:max(65px,10svh);left:6%;width:88%;text-align:center;opacity:calc(1 - var(--portal-charge));pointer-events:none}
.portal-introduction p{margin:0 0 12px;font-family:var(--font-body);font-size:clamp(15px,2svh,18px);color:#e5d7b8;line-height:1.4}
#gate-title{display:flex;align-items:center;justify-content:center;gap:18px;margin:0;font-family:var(--font-script);font-size:clamp(38px,min(12vw,7.4svh),72px);font-weight:400;line-height:1.2;color:#fff0d3;text-shadow:0 2px 20px #061721}
#gate-title span{overflow-wrap:anywhere;min-width:0}
#gate-title em{font-family:var(--font-display);font-size:.56em;font-weight:400;line-height:1;flex:none;color:var(--portal-gold)}
#gate-enter.portal-feather-stage{position:absolute;z-index:4;left:50%;top:calc(var(--portal-stage-eye-y) - var(--portal-feather-width)*.4125);width:var(--portal-feather-width);height:auto;aspect-ratio:2/3;transform:translateX(-50%);margin:0;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none;cursor:pointer;overflow:visible;-webkit-tap-highlight-color:transparent;perspective:900px}
.portal-feather-motion{display:block;width:100%;height:100%;transform-origin:53.6% 27.5%;transform:translateY(var(--portal-drift-y)) rotate(var(--portal-tilt)) scale(var(--portal-zoom));opacity:var(--portal-feather-opacity);will-change:transform,opacity;pointer-events:none}
.portal-feather{display:block;width:100%;height:100%;object-fit:contain;opacity:1;user-select:none}
#portal-tap-cue{position:absolute;left:50%;top:46%;transform:translate(-50%,-50%);z-index:2;transition:opacity 160ms ease}
#gate-enter:disabled #portal-tap-cue,#gate:not([data-portal-phase="idle"]) #portal-tap-cue{visibility:hidden;opacity:0}
.portal-introduction,.portal-instruction{text-shadow:0 1px 3px #020f17d9,0 3px 14px #020f1799}
.portal-eye-light{position:absolute;left:53.6%;top:27.5%;width:12%;height:7.5%;border-radius:50%;transform:translate(-50%,-50%);background:radial-gradient(ellipse,#c7ffec05 0%,#68d6bd1a 30%,#e1c26a30 55%,transparent 73%);box-shadow:0 0 calc(7px + var(--portal-charge)*34px) calc(1px + var(--portal-charge)*12px) #bfdbab24;opacity:var(--portal-charge)}
#gate-enter.portal-feather-stage:focus-visible{outline:1px solid #e5c889a8;outline-offset:8px;border-radius:48% 48% 4% 4%}
#gate-enter.portal-feather-stage:focus-visible .portal-eye-light{box-shadow:0 0 25px 12px #c2edcf60}
#gate-enter.portal-feather-stage:disabled{cursor:default;opacity:1}
.portal-reflection{position:absolute;top:80%;left:50%;width:var(--portal-feather-width);height:auto;aspect-ratio:2/3;transform:translateX(-50%) scaleY(-1);transform-origin:center center;overflow:hidden;opacity:calc(.17*(1 - var(--portal-charge)));filter:blur(2px);pointer-events:none;mask-image:linear-gradient(transparent 2%,#000b 70%,#000);-webkit-mask-image:linear-gradient(transparent 2%,#000b 70%,#000)}
.portal-reflection img{position:absolute;width:100%;height:100%;inset:0;object-fit:contain}
.portal-instruction{position:absolute;z-index:5;bottom:max(22px,5svh);left:5%;width:90%;text-align:center;pointer-events:none;color:var(--portal-ivory);opacity:calc(1 - var(--portal-charge)*1.5)}
.portal-instruction>span{font-family:var(--font-display);font-size:clamp(24px,3.6svh,32px);line-height:1.1;font-style:italic}
.portal-instruction p{margin:6px 0 8px;font-family:var(--font-body);font-size:15px;line-height:1.3;color:#dacdb2}
.portal-instruction svg{display:block;margin:0 auto;color:#d7b679;opacity:.75}
#feather-effects{position:absolute;inset:0;width:100%;height:100%;z-index:6;pointer-events:none;opacity:var(--portal-effects-opacity,0)}
#gate[data-story="feather-portal"] #skip-opening{position:absolute;z-index:8;right:max(17px,env(safe-area-inset-right));top:max(16px,env(safe-area-inset-top));min-height:44px;padding:8px 10px;font-family:var(--font-body);font-size:14px;line-height:1.1;border:0;border-bottom:1px solid #ddc89c45;border-radius:0;background:transparent;box-shadow:none;color:#e7dac0;cursor:pointer;transition:opacity 400ms,color 900ms,background-color 900ms,border-color 900ms}
#gate[data-story="feather-portal"] #skip-opening:hover{color:#fff4dd;border-bottom-color:#d7b679}
#gate[data-story="feather-portal"] #skip-opening:focus-visible{outline:2px solid #e5c889;outline-offset:5px}
#gate[data-story="feather-portal"].is-opening #skip-opening{opacity:.6}
#gate[data-story="feather-portal"].is-leaving{opacity:0;transition:opacity 700ms ease}
#gate[data-story="feather-portal"].neel-motion-paused *{animation-play-state:paused!important}
@media(min-aspect-ratio:4/3){
  #gate[data-story="feather-portal"]{--portal-feather-width:41.333333svh;--portal-stage-eye-y:40.05svh}
  .portal-introduction{top:9svh}.portal-night img{object-position:50% 44%}
  .portal-reflection{top:84%}
  .portal-instruction{bottom:4svh}.portal-instruction svg{display:none}
}
@media(max-height:650px) and (orientation:portrait){
  #gate[data-story="feather-portal"]{--portal-feather-width:35.333333svh;--portal-stage-eye-y:38.575svh}
  .portal-introduction{top:11svh}.portal-introduction p{font-size:14px;margin-bottom:5px}
  #gate-title{font-size:41px;gap:12px}
  .portal-reflection{top:76%}
  .portal-instruction{bottom:4svh}.portal-instruction>span{font-size:25px}.portal-instruction p{margin-top:5px}.portal-instruction svg{display:none}
}
@media(max-height:500px) and (orientation:landscape){
  #gate[data-story="feather-portal"]{--portal-feather-width:52.666667svh;--portal-stage-eye-y:28.725svh}
  .portal-introduction{top:19%;left:4%;width:36%;text-align:left}.portal-introduction p{font-size:14px}
  #gate-title{justify-content:flex-start;flex-wrap:wrap;gap:12px;font-size:43px}
  #gate-enter.portal-feather-stage{left:64%}
  .portal-reflection{left:64%;top:85%}
  .portal-instruction{left:4%;width:36%;bottom:22%;text-align:left}.portal-instruction>span{font-size:24px}
}
@media(max-width:599px){
  .portal-introduction p{font-size:12px;margin-bottom:6px}
  #gate-title{font-size:clamp(28px,7.8vw,32px);gap:12px}
  .portal-instruction>span{font-size:clamp(18px,5vw,20px)}
  .portal-instruction p{font-size:12px}
}
@media(prefers-reduced-motion:reduce){#gate[data-story="feather-portal"] *{animation:none!important;transition:none!important}.portal-feather-motion{will-change:auto}}