/* The eye portal (home only): dive through the FRISTNOR eye into the hero. Pairs with js/portal.v1.js. */

.portal{
  position: fixed; inset: 0; z-index: 9500;
  background: var(--bg);
  overflow: hidden;
  transition: opacity .5s cubic-bezier(.23,1,.32,1);
}
.portal.is-leaving{ opacity: 0; pointer-events: none; }
.portal-art{ position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.portal-art{ cursor: pointer; }

/* a wordless scroll cue: a short line with a light running down it */
.portal-cue{
  position: absolute; left: 50%; width: 1px; height: 46px; margin-left: -.5px; overflow: hidden;
  background: rgba(255,255,255,.14); pointer-events: none;
}
.portal-cue i{
  position: absolute; left: 0; top: -40%; width: 1px; height: 40%;
  background: linear-gradient(180deg, transparent, #fff);
  animation: portal-cue 1.8s cubic-bezier(.65,0,.35,1) infinite;
}
@keyframes portal-cue{ to{ transform: translateY(350%); } }
.portal-skip:focus-visible{ outline: 2px solid rgba(186,208,255,.8); outline-offset: 3px; }
.portal-skip{
  position: absolute; right: 18px; bottom: calc(18px + env(safe-area-inset-bottom, 0px));
  min-height: 44px; padding: 0 16px; border-radius: 999px; cursor: pointer;
  font: inherit; font-size: 12.5px; color: var(--t3);
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12);
}
@media (hover: hover){ .portal-skip:hover{ color: #fff; } }

/* while the portal is up, the page waits underneath: no scrolling, no chrome */
html.is-portal, html.is-portal body{ overflow: hidden !important; }
html.is-portal .header, html.is-portal .scroll-progress, html.is-portal .video-control{ opacity: 0; pointer-events: none; }