/* MCPL login hero: cinematic sequence (presentation only).
   Scope: #login only. No original rule, script, id or handler is changed.
   The artwork is the project's own login image; the title and the lines
   beneath it were lifted out of it as transparent layers and the static
   copies were removed from assets/mcpl-login-art-clean.png. At their home
   positions the layers recompose the original image (mean error < 0.02/255).

   Coordinates are in artwork pixels (1672 x 941). --u converts them to CSS px:
   desktop follows the artwork's height (background-size:auto 100%),
   mobile uses a fixed column width. */

html.mcplh-js #login.login::before{background-image:url('mcpl-login-art-clean.png')!important}

#login{
 --t-title:1.15s;        /* first reveal of the title           */
 --t-lines:1.05s;        /* first line starts                   */
 --stagger:.11s;
 --d-line:.78s;
 --t-feat:1.27s;         /* first 2 s cycle of STRONGER MEMBERS..footer */
 --t-card:2.55s;         /* after the last line has resolved    */
 --loop:7.6s;            /* title hold + glide, repeats forever */
}
#login .mcplh-stage{
 /* Follows the artwork's scale; capped on tall, narrow screens so the title
    window always ends before the page midpoint (the clean artwork no longer
    carries the text, so the layers may scale on their own there). */
 --ox:0;--oy:0;--u:min(100cqh / 941, 100cqw / 510);
 position:absolute;top:0;bottom:0;left:0;width:53.6%;z-index:1;
 overflow:hidden;container-type:size;pointer-events:none;
 -webkit-user-select:none;user-select:none;
}
#login .mcplh-el{
 position:absolute;margin:0;
 left:calc((var(--x) - var(--ox)) * var(--u));top:calc((var(--y) - var(--oy)) * var(--u));
 width:calc(var(--w) * var(--u));height:calc(var(--h) * var(--u));
}
#login .mcplh-stage img{display:block;max-width:none!important;height:100%;-webkit-user-drag:none}

/* 1. Title: fixed clipping window just wider than the wordmark, feathered edges.
   Two copies sit exactly one window-width apart, so the title leaving the
   right edge is the same title entering on the left. 0% and 100% of the loop
   are identical frames: no reset, no jump, never two titles on top of each other. */
#login .mcplh-win{
 overflow:hidden;contain:paint;
 -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 4.5%,#000 95.5%,transparent 100%);
 mask-image:linear-gradient(90deg,transparent 0,#000 4.5%,#000 95.5%,transparent 100%);
}
#login .mcplh-track{
 position:absolute;inset:0;will-change:transform;
 animation:mcplh-title-in var(--t-title) cubic-bezier(.22,.61,.36,1) both,
           mcplh-title-loop var(--loop) var(--t-title) linear infinite;
}
#login .mcplh-track img{position:absolute;top:0;left:2.7248%;width:95.3678%}
#login .mcplh-track img+img{left:calc(2.7248% - 100%)}

/* 2. Lines: each rises out of its own clip, opacity and a faint blur resolve. */
#login .mcplh-line{overflow:hidden}
#login .mcplh-line img{
 width:100%;will-change:transform,opacity;
 animation:mcplh-line-in var(--d-line) cubic-bezier(.16,1,.3,1) both;
 animation-delay:calc(var(--t-lines) + var(--i) * var(--stagger));
}

/* 2b. "STRONGER MEMBERS" and every item beneath it (5 items, existing order)
   share ONE 2000 ms cycle: staggered reveal, readable hold, staggered exit
   upward, all inside the 2 s. Each item resets only while fully hidden
   (98.5-100%), and the next cycle starts exactly 2000 ms after the last one.
   One infinite CSS animation per item on the same timeline, so there is no
   drift, overlap or accumulated delay. */
#login .mcplh-feature img{
 animation-duration:2000ms;animation-iteration-count:infinite;animation-timing-function:linear;
 animation-fill-mode:both;animation-delay:var(--t-feat);
}
#login .mcplh-stage>.mcplh-feature:nth-child(4) img{animation-name:mcplh-feat-0}
#login .mcplh-stage>.mcplh-feature:nth-child(5) img{animation-name:mcplh-feat-1}
#login .mcplh-stage>.mcplh-feature:nth-child(6) img{animation-name:mcplh-feat-2}
#login .mcplh-stage>.mcplh-feature:nth-child(7) img{animation-name:mcplh-feat-3}
#login .mcplh-stage>.mcplh-feature:nth-child(8) img{animation-name:mcplh-feat-4}

/* 3. Card: transparent surface, restrained blue edge; one controlled entrance
   from the left. Uses the individual translate/scale properties, so the
   card's own transform (vertical centring) is left untouched. Only the card
   surface is transparent: no whole-card opacity once the entrance is done. */
html.mcplh-js #login .login-card{
 background:transparent!important;background-image:none!important;
 border:1px solid rgba(96,172,255,.55)!important;
 box-shadow:none!important;
 -webkit-backdrop-filter:none!important;backdrop-filter:none!important;
 animation:mcplh-card-in 1.45s var(--t-card) both;
}
html.mcplh-js #login .login-card::before,html.mcplh-js #login .login-card::after{background:none!important;box-shadow:none!important}
/* Card text was navy on white; it is now light so it stays readable on the
   blue background. Inputs, tabs and buttons keep their own fills. */
html.mcplh-js #login .login-card::before{color:#ffffff!important}
html.mcplh-js #login .login-card .logo,html.mcplh-js #login .login-card .mcpl-spin{color:#eef6ff!important}
html.mcplh-js #login .login-card .sub{color:#c3d6ea!important}
html.mcplh-js #login .login-card label{color:#dbe9f7!important}
html.mcplh-js #login #loginHelp{color:#a9bfd4!important}
html.mcplh-js #login #loginErr{color:#ff9aa6!important}

@keyframes mcplh-title-in{from{transform:translateX(-100%)}to{transform:translateX(0)}}
@keyframes mcplh-title-loop{
 0%{transform:translateX(0)}
 56%{transform:translateX(0);animation-timing-function:cubic-bezier(.62,0,.38,1)}
 100%{transform:translateX(100%)}
}
@keyframes mcplh-line-in{
 from{transform:translateY(100%);opacity:0;filter:blur(3px)}
 60%{opacity:1}
 to{transform:none;opacity:1;filter:blur(0)}
}
@keyframes mcplh-feat-0{
 0%,0%{transform:translateY(100%);opacity:0;filter:blur(3px);animation-timing-function:cubic-bezier(.16,1,.3,1)}
 22.5%,67.5%{transform:none;opacity:1;filter:blur(0);animation-timing-function:cubic-bezier(.55,0,.8,.35)}
 82.5%,99.99%{transform:translateY(-100%);opacity:0;filter:blur(2px)}
 100%{transform:translateY(100%);opacity:0;filter:blur(3px)}
}
@keyframes mcplh-feat-1{
 0%,5.5%{transform:translateY(100%);opacity:0;filter:blur(3px);animation-timing-function:cubic-bezier(.16,1,.3,1)}
 28%,71.5%{transform:none;opacity:1;filter:blur(0);animation-timing-function:cubic-bezier(.55,0,.8,.35)}
 86.5%,99.99%{transform:translateY(-100%);opacity:0;filter:blur(2px)}
 100%{transform:translateY(100%);opacity:0;filter:blur(3px)}
}
@keyframes mcplh-feat-2{
 0%,11%{transform:translateY(100%);opacity:0;filter:blur(3px);animation-timing-function:cubic-bezier(.16,1,.3,1)}
 33.5%,75.5%{transform:none;opacity:1;filter:blur(0);animation-timing-function:cubic-bezier(.55,0,.8,.35)}
 90.5%,99.99%{transform:translateY(-100%);opacity:0;filter:blur(2px)}
 100%{transform:translateY(100%);opacity:0;filter:blur(3px)}
}
@keyframes mcplh-feat-3{
 0%,16.5%{transform:translateY(100%);opacity:0;filter:blur(3px);animation-timing-function:cubic-bezier(.16,1,.3,1)}
 39%,79.5%{transform:none;opacity:1;filter:blur(0);animation-timing-function:cubic-bezier(.55,0,.8,.35)}
 94.5%,99.99%{transform:translateY(-100%);opacity:0;filter:blur(2px)}
 100%{transform:translateY(100%);opacity:0;filter:blur(3px)}
}
@keyframes mcplh-feat-4{
 0%,22%{transform:translateY(100%);opacity:0;filter:blur(3px);animation-timing-function:cubic-bezier(.16,1,.3,1)}
 44.5%,83.5%{transform:none;opacity:1;filter:blur(0);animation-timing-function:cubic-bezier(.55,0,.8,.35)}
 98.5%,99.99%{transform:translateY(-100%);opacity:0;filter:blur(2px)}
 100%{transform:translateY(100%);opacity:0;filter:blur(3px)}
}
@keyframes mcplh-card-in{
 0%{opacity:0;translate:-72px 0;scale:1;animation-timing-function:cubic-bezier(.16,1,.3,1)}
 56%{opacity:1;translate:0 0;scale:1;animation-timing-function:cubic-bezier(.45,0,.55,1)}
 74%{opacity:1;translate:0 0;scale:1.02;animation-timing-function:cubic-bezier(.45,0,.55,1)}
 100%{opacity:1;translate:0 0;scale:1}
}

/* Same artwork breakpoint as the original (.login::before width 51.2%). */
@media(max-width:1100px){#login .mcplh-stage{width:51.2%}}

/* Mobile: the original hides the artwork below 800px; the title and the two
   lines under it are shown above the card on the existing gradient. */
@media(max-width:800px){
 #login.login:not([hidden]){flex-direction:column;justify-content:flex-start;gap:14px}
 #login .mcplh-stage{
  --ox:80;--oy:36;--u:calc(min(360px,100vw - 48px) / 367);
  position:relative;top:auto;bottom:auto;left:auto;flex:none;
  width:calc(367 * var(--u));height:calc(158 * var(--u));
  container-type:normal;margin-top:auto;
 }
 #login .mcplh-stage .mcplh-feature{display:none}
 html.mcplh-js #login .login-card{margin-bottom:auto!important;flex:none}
}

/* Reduced motion: the finished layout, immediately. */
@media(prefers-reduced-motion:reduce){
 #login .mcplh-track,#login .mcplh-line img,#login .mcplh-feature img,html.mcplh-js #login .login-card{animation:none!important}
}