/* Original EYEKON eye entrance, contained in the viewport. */
body.intro-locked{overflow:hidden}
#portal{
  position:fixed;inset:0;z-index:5000;isolation:isolate;overflow:hidden;
  display:grid;place-items:center;max-width:100%;
  padding:calc(20px + env(safe-area-inset-top)) calc(20px + env(safe-area-inset-right)) calc(64px + env(safe-area-inset-bottom)) calc(20px + env(safe-area-inset-left));
  background:var(--ink) url('/assets/wordmark-texture.webp');background-size:760px auto;
  color:var(--paper);cursor:pointer;
}
#portal[hidden]{display:none!important}
#portal::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at center,rgba(241,240,236,.05),transparent 60%)}
#portal .intro-centre{display:grid;place-items:center;gap:clamp(20px,5vh,48px);max-width:100%;position:relative}
#portal .eye-stage{
  position:relative;width:min(82vmin,560px,calc(100vw - 48px),max(96px,calc(100svh - 176px)));
  aspect-ratio:1;cursor:pointer;background:none;border:0;padding:0;color:inherit;
  display:grid;place-items:center;touch-action:manipulation;
}
#portal .eye-stage svg{width:100%;height:100%;overflow:visible;display:block}
#portal .eye-stage:focus{outline:none}
#portal.keyboard-focus .eye-stage:focus-visible svg{filter:drop-shadow(0 0 10px rgba(241,240,236,.45))}
#portal .enter-hint{display:flex;align-items:center;justify-content:center;gap:.8em;text-align:center;animation:intro-pulse 2.4s ease-in-out infinite}
#portal .enter-hint .dot{width:6px;height:6px;flex:none;border-radius:50%;background:var(--paper)}
#portal .intro-skip{
  position:absolute;right:calc(20px + env(safe-area-inset-right));bottom:calc(16px + env(safe-area-inset-bottom));
  min-height:44px;padding:10px 14px;border:1px solid var(--line);background:var(--ink);
  color:var(--fog);cursor:pointer;touch-action:manipulation;
}
#portal .intro-skip:hover,#portal .intro-skip:focus-visible{color:var(--paper);border-color:var(--paper)}
#portal .ring,#portal .nova,#portal .breathe{transform-origin:200px 200px}
#portal .ring-spin{animation:intro-spin 60s linear infinite}
#portal .ring-spin-r{animation:intro-spin 42s linear infinite reverse}
#portal .breathe{animation:intro-breathe 6s ease-in-out infinite}
#portal .fr{transition:none}
#portal #fSquint,#portal #fOpen{display:none}
#portal.f1 #fClosed{display:none}
#portal.f1 #fSquint{display:block}
#portal.f2 #fClosed,#portal.f2 #fSquint{display:none}
#portal.f2 #fOpen{display:block}
#portal .nova{transform:scale(0)}
#portal.lit .nova{animation:intro-novapop .4s steps(4) forwards}
#portal.f0 .eye-stage svg{animation:intro-jolt .12s steps(2)}
#portal #fClosed{transform-origin:200px 200px;transition:transform .45s cubic-bezier(.3,1.4,.4,1)}
#portal .eye-stage:hover #fClosed{transform:translateY(-7px)}
#portal .flash{position:absolute;inset:0;background:var(--paper);opacity:0;pointer-events:none}
#portal.go .eye-stage{animation:intro-dive 1.3s cubic-bezier(.85,0,.18,1) forwards}
#portal.go #enterHint,#portal.go .intro-skip{opacity:0;transition:opacity .35s ease}
#portal.go .flash{animation:intro-flash 1.3s ease-in forwards}
#portal.gone{opacity:0;visibility:hidden;pointer-events:none;transition:opacity .5s ease,visibility .5s ease}
@keyframes intro-pulse{0%,100%{opacity:.45}50%{opacity:1}}
@keyframes intro-spin{to{transform:rotate(360deg)}}
@keyframes intro-breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.025)}}
@keyframes intro-novapop{0%{transform:scale(.15)}55%{transform:scale(1.18)}100%{transform:scale(1)}}
@keyframes intro-jolt{50%{transform:rotate(-1.6deg) scale(1.015)}}
@keyframes intro-dive{0%{transform:scale(1);opacity:1}45%{transform:scale(2.4)}80%{opacity:1}100%{transform:scale(38);opacity:0}}
@keyframes intro-flash{0%{opacity:0}74%{opacity:0}88%{opacity:1}100%{opacity:0}}
@media(prefers-reduced-motion:reduce){
  #portal *,#portal::before{animation:none!important;transition:none!important}
  #portal .eye-stage:hover #fClosed{transform:none}
}