/* TAB Media — homepage logo intro
   Sequence: "tab" appears → "/" sweeps forwards past MEDIA, then slides back revealing "MEDIA"
   → the logo flies into the header logo while the navy curtain fades into the site. */
.intro{position:fixed;inset:0;z-index:1000;display:grid;place-items:center;background:#101D32;pointer-events:auto;cursor:pointer}
.intro::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 55% 60% at 50% 50%,#24365088,transparent 70%);pointer-events:none}
.intro-logo{position:relative;width:min(560px,72vw);height:auto;overflow:visible;transform-origin:0 0;will-change:transform}
.intro-logo path{transition:fill .55s ease}
.intro-tab{opacity:0;transform:translateY(6px);animation:intro-tab .55s cubic-bezier(.2,.7,.2,1) .15s forwards}
.intro-slash{opacity:0;transform:translateX(-112px);animation:intro-slash 1.2s linear .7s forwards}
/* light streak: rides with the slash, only on the left-to-right sweep */
.intro-streak{transform:translateX(-112px);animation:intro-slash 1.2s linear .7s forwards}
.intro-streak path{opacity:0}
.streak-fwd{animation:streak-fwd 1.2s linear .7s forwards}
@keyframes streak-fwd{0%{opacity:0}14%{opacity:.75}30%{opacity:.5}40%,100%{opacity:0}}
/* MEDIA is uncovered right-to-left, in sync with the slash sliding back */
.intro-media{clip-path:inset(-10% 0 -10% 100%);animation:intro-media .72s cubic-bezier(.65,0,.35,1) 1.18s forwards}

@keyframes intro-tab{to{opacity:1;transform:none}}
/* 1) sweep forwards across "tab" and past where MEDIA will be
   2) slide back into place, revealing MEDIA behind it (no overshoot) */
@keyframes intro-slash{
  0%{opacity:0;transform:translateX(-112px);animation-timing-function:cubic-bezier(.55,0,.25,1)}
  6%{opacity:1}
  40%{opacity:1;transform:translateX(126px);animation-timing-function:cubic-bezier(.65,0,.35,1)}
  100%{opacity:1;transform:translateX(0)}}
@keyframes intro-media{to{clip-path:inset(-10% 0 -10% 0)}}

/* exit: curtain fades, logo flies to the header (transform set by intro.js) */
.intro.is-leaving{background:transparent;transition:background-color .7s ease .1s;pointer-events:none}
.intro.is-leaving::before{opacity:0;transition:opacity .4s ease}
.intro.is-leaving .intro-logo{transition:transform .85s cubic-bezier(.7,0,.2,1)}
.intro.is-leaving .intro-tab path{fill:#243650}
.intro.is-leaving .intro-media path{fill:#101D32}
.intro.is-gone{display:none}
html.intro-running .header .wordmark{visibility:hidden}
html.intro-running body{overflow:hidden}

/* site content settles in under the curtain */
html.intro-running .hero>*{opacity:0;transform:translateY(14px)}
html.intro-done .hero>*{opacity:1;transform:none;transition:opacity .8s ease,transform .8s cubic-bezier(.2,.7,.2,1)}
html.intro-done .hero>*:nth-child(2){transition-delay:.08s}
html.intro-done .hero>*:nth-child(3){transition-delay:.16s}
html.intro-done .hero>*:nth-child(4){transition-delay:.24s}

@media(prefers-reduced-motion:reduce){.intro{display:none}html.intro-running .hero>*{opacity:1;transform:none}html.intro-running .header .wordmark{visibility:visible}html.intro-running body{overflow:auto}}