/* The loading screen as a short opening sequence (home only).
   In: the eye draws itself, the star pupil spins in, FRISTNOR rises letter by
   letter and the line fills. Out: the screen parts like two eyelids onto the
   hero, which starts its own entrance underneath. Loaded after site.v3.css,
   which keeps the base loader; loading.v3.js holds the timings. */

/* The dark fill moves from the screen onto two lids, so they can part. */
html.is-loading .site-loader, html.loader-exiting .site-loader{ background:transparent; }
.site-loader::before, .site-loader::after{
  content:''; position:absolute; left:0; right:0; z-index:-1;
  background:#080c10;
  transition:transform 1.1s cubic-bezier(.76,0,.24,1) .18s, box-shadow .3s ease;
}
.site-loader::before{ top:0; bottom:50%; }
.site-loader::after{ top:50%; bottom:0; }

/* in (paced for a 3-second first-visit hold) */
.loader-outline{ animation-duration:1.1s; }
.loader-iris{ animation-duration:1.1s; animation-delay:.3s; }
.loader-pupil{
  opacity:0;
  animation:loader-pupil-in 1s cubic-bezier(.34,1.56,.64,1) .8s forwards,
            loader-breathe 2.4s ease-in-out 1.8s infinite;
}
.loader-brand span{
  display:inline-block; opacity:0; transform:translateY(.7em); filter:blur(5px);
  animation:loader-letter .7s cubic-bezier(.22,1,.36,1) forwards;
  animation-delay:calc(1s + var(--i) * 70ms);
}
.loader-status{ opacity:0; animation:loader-fade .7s ease 1.7s forwards; }
.loader-line::after{
  width:100%; transform-origin:left; transform:scaleX(0);
  animation:loader-fill 3s cubic-bezier(.3,.7,.2,1) .2s forwards;
}

/* out: content dissolves forward, then the lids part with a lit edge */
.loader-mark, .loader-brand, .loader-status, .loader-line{
  transition:opacity .28s ease, transform .5s cubic-bezier(.22,1,.36,1), filter .35s ease;
}
html.loader-exiting .site-loader{ opacity:1; visibility:visible; transition:none; }
html.loader-exiting .loader-mark{ opacity:0; transform:scale(1.35); filter:blur(6px); }
html.loader-exiting .loader-brand, html.loader-exiting .loader-status{ opacity:0; transform:translateY(-6px); }
html.loader-exiting .loader-line{ opacity:0; }
html.loader-exiting .loader-status{ animation:none; }  /* else its fill holds opacity at 1 */
html.loader-exiting .loader-line::after{ animation:none; transform:scaleX(1); }
html.loader-exiting .site-loader::before{ transform:translateY(-100%); box-shadow:0 1px 0 rgba(186,208,255,.35), 0 0 48px rgba(186,208,255,.12); }
html.loader-exiting .site-loader::after{ transform:translateY(100%); box-shadow:0 -1px 0 rgba(186,208,255,.35), 0 0 48px rgba(186,208,255,.12); }

@keyframes loader-pupil-in{
  from{ opacity:0; transform:scale(0) rotate(-180deg); }
  to{ opacity:1; transform:scale(1) rotate(0); }
}
@keyframes loader-breathe{ 0%,100%{ opacity:1; transform:scale(1); } 50%{ opacity:.55; transform:scale(.88); } }
@keyframes loader-letter{ to{ opacity:1; transform:none; filter:none; } }
@keyframes loader-fade{ to{ opacity:1; } }
@keyframes loader-fill{ to{ transform:scaleX(.9); } }

@media(prefers-reduced-motion:reduce){
  .loader-pupil, .loader-brand span, .loader-status{ opacity:1; transform:none; filter:none; }
  .loader-line::after{ transform:none; }
  .site-loader::before, .site-loader::after{ transition:none; }
}

/* Speed: the page is drawn underneath the loader from the first frame, with
   the hero headline at full strength, so the browser (and Google's Largest
   Contentful Paint) counts it as shown straight away rather than after the
   opening sequence. Visitors still only see the loader: it is opaque until the
   lids part. When loading ends these rules drop away and the headline's own
   entrance plays under the parting lids, exactly as before. */
html.is-loading .header, html.is-loading #smooth-wrapper{ visibility: visible; }
html.is-loading .hero .headline-line{ animation: none; opacity: 1; transform: none; }
html.is-loading .hero h1 em{ animation: none; opacity: 1; filter: none; }
