/* MAJLIS opening sequence, "Dock". Timeline (seconds): type spreads in 0.2 to 2.0;
   the wine shade lifts 2.64 to 4.0 while the wordmark glides up into the header;
   header and hero copy fade in; the overlay is gone by 4.2.
   The mark is set in exactly the header's wordmark size and spacing (--wm-size, --wm-ls from
   majlis.css) and only scaled up for the opening, so it lands on the header wordmark
   at scale 1 with nothing left to move. Only active under html.intro-on. */
.intro{display:none}
html.intro-on .intro{display:block;position:fixed;inset:0;z-index:300;color:#fbf6ec;--S:3;--ls0:.6em;--dx:0px;--dy:calc(28px - 50vh);animation:intro-gone .01s linear 4.2s forwards}
html.intro-on:not(.intro-done){overflow:hidden}
html.intro-done .intro{display:none}
.intro-panel{position:absolute;inset:0;background:#530c00;animation:intro-lift 1.36s cubic-bezier(.75,0,.2,1) 2.64s forwards}
.intro-mark{position:absolute;left:50%;top:50%;margin:0;font-weight:900;font-size:var(--wm-size);line-height:1;text-transform:uppercase;text-decoration:none;white-space:nowrap;opacity:0;
  letter-spacing:var(--wm-ls);transform:translate(-50%,-50%) scale(var(--S));
  animation:intro-spread 1.76s cubic-bezier(.2,.7,.2,1) .2s forwards,intro-dock 1.28s cubic-bezier(.75,0,.2,1) 2.64s forwards,intro-markgone 0s linear 3.92s forwards}
.intro-ar{position:absolute;left:50%;bottom:calc(50% + var(--wm-size) * var(--S) * .5 + 12px);font-size:calc(var(--wm-size) * var(--S) * .9);font-weight:900;line-height:1.05;text-transform:none;white-space:nowrap;opacity:0;transform:translateX(-50%);animation:intro-rise 1.04s ease .2s both,intro-out .64s ease 2.64s forwards}
.intro-tag{position:absolute;left:50%;top:calc(50% + var(--wm-size) * var(--S) * .5 + 20px);font-size:12px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;white-space:nowrap;opacity:0;transform:translateX(-50%);animation:intro-tagin .96s ease .88s forwards,intro-out .64s ease 2.64s forwards}
@keyframes intro-lift{to{transform:translateY(-101%)}}
@keyframes intro-markgone{to{opacity:0}}
@keyframes intro-gone{to{visibility:hidden;pointer-events:none}}
@keyframes intro-rise{from{opacity:0;transform:translate(-50%,12px)}to{opacity:1;transform:translate(-50%,0)}}
@keyframes intro-tagin{to{opacity:.9}}
@keyframes intro-out{to{opacity:0}}
@keyframes intro-spread{0%{opacity:0;letter-spacing:var(--ls0)}25%{opacity:1}100%{opacity:1;letter-spacing:var(--wm-ls)}}
@keyframes intro-dock{from{transform:translate(-50%,-50%) scale(var(--S))}to{transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy))) scale(1)}}
@media (max-width:700px){html.intro-on .intro{--S:2;--ls0:.25em}.intro-tag{font-size:11px}}
/* header, hero copy and background settle in behind the lift */
html.intro-on:not(.intro-done) .site-header .wordmark{animation:intro-hold 0s linear 3.92s backwards}
html.intro-on:not(.intro-done) .site-header .nav,html.intro-on:not(.intro-done) .site-header .nav-end,html.intro-on:not(.intro-done) .site-header .menu-toggle,html.intro-on:not(.intro-done) .site-header .header-account{animation:intro-fade .8s ease 3.4s backwards}
html.intro-on:not(.intro-done) .hero-copy,html.intro-on:not(.intro-done) .motion-toggle{animation:intro-fade 1s ease 3.6s backwards}
@keyframes intro-hold{from{opacity:0}to{opacity:0}}
@keyframes intro-fade{from{opacity:0}to{opacity:1}}

/* clean handoff: no transitions or halo on the header while the intro runs, and the overlay mark is removed the instant the real wordmark appears */
html.intro-on:not(.intro-done) .site-header [data-tone],html.intro-on:not(.intro-done) .site-header .wordmark{transition:none!important}
html.intro-on:not(.intro-done) .site-header .wordmark{text-shadow:none!important}