/* Scene styling and keyframes for the hero animation of /features/sign-in-with-allme.html,
   "Mei buys concert tickets". Every animated element's resting style IS its final pose; the
   keyframes only animate towards it (fill-mode both), so a scene shown without animation
   (reduced motion) is complete. Keyframes run only while their scene carries .is-active.
   Timing: an element's timing class sets --si-at (its start) and, for a flight, the
   --si-dx / --si-dy offset it flies in from. */

.si-ink { color: var(--anim-ink); }
.si-friend { color: var(--brand-2); }
.si-brand { color: var(--brand-1); }
.si-warm { color: var(--anim-warm); }
.si-love { color: var(--anim-love); }
.si-alert { color: var(--anim-alert); }
.si-muted { color: var(--anim-muted); }
.si-line { fill: var(--anim-muted); opacity: 0.7; }
.si-line-ink { fill: var(--anim-ink); }
.si-glow-soft { fill: var(--anim-warm-soft); }
.si-floor { fill: var(--anim-muted); opacity: 0.35; }
.si-beam, .si-halo { fill: none; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 0; }
.si-halo { stroke: var(--anim-warm-soft); stroke-width: 12; }
.si-beam { stroke: var(--anim-warm); stroke-width: 3; }
.si-beam-alert { stroke: var(--anim-alert); }
.si-face-out, .si-face-mid, .si-gone, .si-ringing, .si-into, .si-mid { opacity: 0; }
.si-pop, .si-fly, .si-gone, .si-drop, .si-into, .si-grow { transform-box: fill-box; transform-origin: center; }
.si-grow { transform-origin: 0 50%; }
.si-body { transform-box: fill-box; transform-origin: 50% 100%; }
.si-buzz { transform-box: fill-box; transform-origin: 50% 50%; }

@keyframes si-fade-in { from { opacity: 0; } }
@keyframes si-fade-out { from { opacity: 1; } }
/* Shown only between two moments: in at the start, out at the end. */
@keyframes si-mid { 0% { opacity: 0; } 14%, 86% { opacity: 1; } 100% { opacity: 0; } }
/* Gone for a while, then back: out at the start, in again at the end. */
@keyframes si-away { 0% { opacity: 1; } 14%, 86% { opacity: 0; } 100% { opacity: 1; } }
@keyframes si-pop { from { transform: scale(0); opacity: 0; } 50% { opacity: 1; } }
/* A thing flying to where it lands; each element names its own start offset. */
@keyframes si-fly { from { transform: translate(var(--si-dx, 0), var(--si-dy, 0)) scale(0.4); opacity: 0; } 20% { opacity: 1; } }
/* A thing flying into a container and disappearing inside it. */
@keyframes si-into { 0% { transform: translate(var(--si-dx, 0), var(--si-dy, 0)); opacity: 0; } 15% { opacity: 1; } 80% { transform: none; opacity: 1; } 100% { transform: translateY(14px) scale(0.6); opacity: 0; } }
/* Leaving: shrinks and fades to nothing. */
@keyframes si-gone { from { transform: none; opacity: 1; } to { transform: scale(0.3); opacity: 0; } }
@keyframes si-drop { from { transform: translateY(-70px); opacity: 0; } 30% { opacity: 1; } }
@keyframes si-grow { from { transform: scaleX(0); } }
@keyframes si-draw { from { stroke-dashoffset: 100; } }
@keyframes si-hop { 0%, 100% { transform: none; } 40% { transform: translateY(-9px); } 70% { transform: translateY(2px); } }
@keyframes si-giggle { 0%, 40%, 80%, 100% { transform: none; } 20% { transform: translateY(-6px) rotate(-2deg); } 60% { transform: translateY(-5px) rotate(2deg); } }
@keyframes si-shake { 0%, 100% { transform: none; } 20% { transform: rotate(-4deg); } 40% { transform: rotate(4deg); } 60% { transform: rotate(-3deg); } 80% { transform: rotate(2deg); } }
@keyframes si-buzz { 0%, 100% { transform: none; } 10%, 30%, 50%, 70%, 90% { transform: rotate(-6deg); } 20%, 40%, 60%, 80% { transform: rotate(6deg); } }
@keyframes si-ring { 0% { opacity: 0; } 20%, 80% { opacity: 1; } 100% { opacity: 0; } }

/* Springy entrances overshoot through the easing, not through extra keyframes. */
.is-active .si-pop { animation: si-pop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) var(--si-at, 0s) both; }
.is-active .si-fly { animation: si-fly 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) var(--si-at, 0s) both; }
.is-active .si-drop { animation: si-drop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) var(--si-at, 0s) both; }
.is-active .si-grow { animation: si-grow 0.4s ease var(--si-at, 0s) both; }
.is-active .si-into { animation: si-into 1.1s ease-in-out var(--si-at, 0s) both; }
.is-active .si-gone { animation: si-gone 0.5s ease-in var(--si-at, 1s) both; }
.is-active .si-ringing { animation: si-ring 1s ease var(--si-at, 0.3s) both; }
.is-active .si-buzzing { animation: si-buzz 0.9s ease var(--si-at, 0.3s) both; }
/* A face swap: the earlier face fades out as the later one fades in, at the pair's --si-at. */
.is-active .si-face-out { animation: si-fade-out 0.2s ease var(--si-at, 1s) both; }
.is-active .si-face-in { animation: si-fade-in 0.2s ease var(--si-at, 1s) both; }
.is-active .si-face-mid, .is-active .si-mid { animation: si-mid var(--si-dur, 1.4s) linear var(--si-at, 1s) both; }
.is-active .si-away { animation: si-away var(--si-dur, 1.4s) linear var(--si-at, 1s) both; }
.is-active .si-hop { animation: si-hop 0.5s ease-out var(--si-at, 1s) both; }
.is-active .si-giggle { animation: si-giggle 0.6s ease var(--si-at, 1s) both; }
.is-active .si-shake { animation: si-shake 0.4s ease var(--si-at, 1s) both; }
.is-active .si-beam, .is-active .si-halo { animation: si-draw 0.5s ease-in-out var(--si-at, 1s) both; }
.si-sheet { fill: var(--anim-surface); stroke: var(--anim-ink); stroke-width: 3; }

/* Scene 1, the moment: a ticket website appears on a laptop and grows a form that asks for more. */
.si-s1-mei { --si-at: 0.3s; }
.si-s1-ticket { --si-at: 0.3s; }
.si-s1-note { --si-at: 0.5s; }
.si-s1-l1 { --si-at: 0.9s; }
.si-s1-l2 { --si-at: 1.1s; }
.si-s1-l3 { --si-at: 1.3s; }
.si-s1-ask { --si-at: 1.8s; }
.si-s1-face { --si-at: 2.4s; }

/* Scene 2, the old way: a long form fills in line by line and one more password key joins the pile. */
.si-s2-l1 { --si-at: 0.3s; }
.si-s2-l2 { --si-at: 0.55s; }
.si-s2-l3 { --si-at: 0.8s; }
.si-s2-l4 { --si-at: 1.05s; }
.si-s2-l5 { --si-at: 1.3s; }
.si-s2-l6 { --si-at: 1.55s; }
.si-s2-l7 { --si-at: 1.8s; }
.si-s2-key { --si-at: 2.2s; }
.si-s2-no { --si-at: 2.5s; }
.si-s2-face, .si-s2-mei { --si-at: 2.8s; }

/* Scene 3, allme: her phone lists what the site asks; the email is ticked, the name is not, and only the email travels. */
.si-s3-r1 { --si-at: 0.3s; }
.si-s3-c1 { --si-at: 0.5s; }
.si-s3-r2 { --si-at: 0.8s; }
.si-s3-c2 { --si-at: 1s; }
.si-s3-beam { --si-at: 1.5s; }
.si-s3-send { --si-at: 2.1s; --si-dx: -294px; --si-dy: -22px; }
.si-s3-face, .si-s3-mei { --si-at: 2.6s; }

/* Scene 4, the payoff: the site ticks her in, the ticket flies to her and she dances among music notes. */
.si-s4-check { --si-at: 0.3s; }
.si-s4-ticket { --si-at: 0.8s; --si-dx: 254px; --si-dy: -34px; }
.si-s4-face, .si-s4-mei { --si-at: 1.6s; }
.si-s4-n1 { --si-at: 1.8s; }
.si-s4-n2 { --si-at: 2s; }
.si-s4-n3 { --si-at: 2.2s; }
.si-s4-k1 { --si-at: 2.4s; }
.si-s4-k2 { --si-at: 2.5s; }