/* ==========================================================================
   kd6-auth-panel.css — the blue side panel of the account pages and of the set-up overlay: decision S252 (Daniel,
   7 Oct), "The mark, alive" with "Follows you", from the panel study's chosen option. Drawn by
   /pages/auth-panel.js (KDAuthPanel); loaded after kd6-auth.css and kd6-auth-motion.css (the account pages link
   it; setup.js loads it with the rest of the kit).

   WHAT IS ON THE PANEL (all of it aria-hidden, no words)
     .ap                    the drawing, behind the lockup and the headline (z-index -1 in the isolated .au-side)
       .ap-st × 4           one stroke of the mark: placed, sized and leaned by auth-panel.js (inline transform)
       .ap-st.ap-st--x × 2  the step rail's fifth and sixth strokes: seen only in the loop at rest
         .ap-lift           the orange stroke's landing lift; the first-paint rise
           b.t b.k b.w b.o  its colours, stacked: tonal (the poster; its tone on .t::before, so the opacity of .t is a
                            plain multiplier the loop can animate in either theme), sky (the rail), white and orange
                            (the mark on blue)
       .ap-env              the letter's place and scale (inline transform)
         .ap-env__in        the letter itself: .is-in, .is-ok (an address), .is-sink, .is-sent
     STATES   .ap-st.is-low  a stroke not built yet: resting lower (inline) at half its tone
              .ap.is-mark   the strokes gathered into the mark: white, the second one orange
              .ap.is-hand   a hand-over between the loop and Follows you: slower, eased both ways, so the strokes glide
              .ap.is-now    a re-layout (resize, fonts): no transition
              .ap.is-still  calm (reduced motion): the same picture for every step, nothing moves
     .au-side.ap-on > .au-poster is hidden: the static poster stays in the page as the state it carries
     (data-built, data-lit) and as the picture without script; the drawing takes its place, at its exact geometry.

   RULES (Daniel's verdicts, S252): flat colour, crisp edges; no glow, blur, gradient or text-shadow. At rest the
   strokes play the 14 s loop (S252 replaces SPEC §4's "no ambient loop" for this panel only): Web Animations that
   auth-panel.js starts, pauses and stops, so there are no keyframes here and nothing here repeats. Every other move
   is a transition the script starts on a step change, on typing into the letter's field, or on a hand-over.
   ========================================================================== */
:root {
  /* the letter: paper on the blue, the same in both themes */
  --ap-paper: #ffffff;
  --ap-paper-blue: #006bcb;
  --ap-paper-pale: #dcebf8;
  --ap-env-back: #c4dbf1;
  --ap-env-front: #e8f1fa;
  --ap-env-fold: #d2e3f4;
  /* the step rail's unlit strokes in the loop (the study's sky-200, the same in both themes) */
  --ap-rail: #bfe3ff;
  --ap-ease: cubic-bezier(.2,.8,.2,1);
  --ap-ease-io: cubic-bezier(.65,0,.35,1);
  --ap-ease-slam: cubic-bezier(.3,1.45,.45,1);
  --ap-t-move: 680ms;
}

.au-side.ap-on > .au-poster { display: none; }

.ap {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}

/* ---- the four strokes ------------------------------------------------------- */
.ap-st {
  --o: .16;
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  transform-origin: 50% 50%;
  transition: transform var(--ap-t-move) var(--ap-ease);
}
.ap-st:nth-child(2) { --o: .22; }
.ap-st:nth-child(3) { --o: .13; }
.ap-st:nth-child(4) { --o: .18; }
.ap-lift { position: absolute; inset: 0; display: block; }
.ap-st b {
  position: absolute;
  inset: 0;
  display: block;
  border-radius: 999px;
  transition: opacity 360ms var(--ap-ease);
}
.ap-st .t { opacity: 1; }
.ap-st .t::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-color: var(--au-poster);
  opacity: calc(var(--o) * var(--au-poster-k));
}
.ap-st.is-low .t { opacity: .5; }
.ap-st .k { background-color: var(--ap-rail); opacity: 0; }
.ap-st .w { background-color: #ffffff; opacity: 0; }
.ap-st .o { background-color: var(--au-orange); opacity: 0; }
/* gathered: the mark on blue, as the lockup draws it (white, the second stroke orange, landing a beat later) */
.ap.is-mark .ap-st .t { opacity: 0; }
.ap.is-mark .ap-st .w { opacity: 1; }
.ap.is-mark .ap-st:nth-child(2) .o { opacity: 1; transition-delay: 380ms; }
/* the rail's two extra strokes: unseen outside the loop (whose animations draw them over this) */
.ap .ap-st.ap-st--x .ap-lift b { opacity: 0; }
/* a hand-over between the loop and Follows you (the study's tr-slow) */
.ap.is-hand .ap-st { transition: transform 1100ms var(--ap-ease-io); }
.ap.is-hand .ap-st b { transition: opacity 700ms var(--ap-ease); }

/* ---- the letter ---------------------------------------------------------------- */
.ap-env {
  position: absolute;
  left: 0;
  top: 0;
  width: 300px;
  height: 214px;
  transform-origin: 0 0;
}
.ap-env__in {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: translate(60px, 44px) rotate(4deg);
  transition: transform 560ms var(--ap-ease), opacity 320ms var(--ap-ease);
}
.ap-env__in.is-in { opacity: 1; transform: translate(0, 0) rotate(-4deg); }
/* sent: the sheet sinks into the envelope, and the envelope leaves to the top right */
.ap-env__in.is-in.is-sent {
  opacity: 0;
  transform: translate(420px, -170px) rotate(-14deg) scale(.7);
  transition: transform 640ms cubic-bezier(.5,0,.75,.2), opacity 300ms linear 320ms;
}
.ap-env__back {
  position: absolute;
  left: 0;
  top: 64px;
  width: 300px;
  height: 150px;
  border-radius: 14px;
  background-color: var(--ap-env-back);
}
.ap-env__sheet {
  position: absolute;
  left: 22px;
  top: 4px;
  width: 256px;
  height: 186px;
  border-radius: 10px;
  background-color: var(--ap-paper);
  transition: transform 260ms var(--ap-ease-io);
}
.ap-env__in.is-sink .ap-env__sheet { transform: translateY(72px); }
.ap-env__mark { position: absolute; left: 24px; top: 14px; width: 24px; height: 22px; overflow: visible; }
.ap-env__mark path { fill: none; stroke: var(--ap-paper-blue); stroke-width: 7; stroke-linecap: round; }
.ap-env__mark .ap-o { stroke: var(--au-orange); }
.ap-env__l1, .ap-env__l2, .ap-env__l3 { position: absolute; left: 28px; display: block; border-radius: 5px; }
/* the address line: auth-panel.js sets its scaleX from what is typed */
.ap-env__l1 {
  top: 48px;
  width: 172px;
  height: 10px;
  background-color: var(--ap-paper-blue);
  transform-origin: 0 50%;
  transform: scaleX(.04);
  transition: transform 180ms var(--ap-ease);
}
.ap-env__l2 { top: 70px; width: 128px; height: 8px; background-color: var(--ap-paper-pale); }
.ap-env__l3 { top: 86px; width: 92px; height: 8px; background-color: var(--ap-paper-pale); }
.ap-env__tick {
  position: absolute;
  left: 208px;
  top: 43px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: var(--ap-paper-blue);
  opacity: 0;
  transform: scale(.4);
  transition: transform 360ms var(--ap-ease-slam), opacity 200ms var(--ap-ease);
}
.ap-env__tick svg { position: absolute; left: 4px; top: 4px; width: 12px; height: 12px; overflow: visible; }
.ap-env__tick path { fill: none; stroke: #ffffff; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.ap-env__in.is-ok .ap-env__tick { opacity: 1; transform: scale(1); }
.ap-env__front { position: absolute; left: 0; top: 0; width: 300px; height: 214px; overflow: visible; }
.ap-env__front .ap-f { fill: var(--ap-env-front); }
.ap-env__front .ap-l { fill: none; stroke: var(--ap-env-fold); stroke-width: 2; stroke-linecap: round; }

/* ---- first paint (html.au-js.au-enter, kd6-auth-motion.css's keyframes): the strokes rise into place ---- */
.au-js.au-enter .ap-lift { animation: au-poster-rise var(--au-t-poster) var(--au-ease) 120ms both; }
.au-js.au-enter .ap-st:nth-child(2) .ap-lift { animation-delay: 190ms; }
.au-js.au-enter .ap-st:nth-child(3) .ap-lift { animation-delay: 260ms; }
.au-js.au-enter .ap-st:nth-child(4) .ap-lift { animation-delay: 330ms; }

/* ---- a re-layout, and calm: no transition, no animation ---- */
.ap.is-now .ap-st, .ap.is-now .ap-st *, .ap.is-now .ap-env__in, .ap.is-now .ap-env__in * { transition: none !important; }
.ap.is-still *, .ap-env__in.is-quiet, .ap-env__in.is-quiet * { transition: none !important; animation: none !important; }
@media (prefers-reduced-motion: reduce) {
  .ap *, .ap-env__in { transition: none !important; animation: none !important; }
}