/* Scene styling and keyframes for the hero animation of /features/always-up-to-date.html,
   "Sofia's new number". 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. */

.utd-ink { color: var(--anim-ink); }
.utd-muted { color: var(--anim-muted); }
.utd-friend { color: var(--brand-2); }
.utd-brand { color: var(--brand-1); }
.utd-warm { color: var(--anim-warm); }
.utd-love { color: var(--anim-love); }
.utd-alert { color: var(--anim-alert); }
.utd-old { fill: var(--anim-muted); }
.utd-line { fill: var(--anim-muted); opacity: 0.7; }
.utd-new { fill: var(--brand-1); }
.utd-highlight { fill: var(--brand-1); opacity: 0.12; }
.utd-glow-soft { fill: var(--anim-warm-soft); }
.utd-screen-glow { fill: var(--anim-warm-soft); }
.utd-flash { fill: var(--anim-warm); opacity: 0; }
.utd-wood { fill: var(--anim-wood); }
.utd-leg { fill: var(--anim-wood); opacity: 0.75; }
.utd-window { fill: var(--anim-warm-soft); stroke: var(--anim-muted); stroke-width: 3; }
.utd-window-bars { fill: none; stroke: var(--anim-surface); stroke-width: 4; }
.utd-sun { fill: var(--anim-warm); }
.utd-call, .utd-callok, .utd-halo, .utd-beam { fill: none; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 0; }
.utd-call { stroke: var(--brand-2); stroke-width: 2.5; opacity: 0.8; }
.utd-callok { stroke: var(--brand-1); stroke-width: 2.5; opacity: 0.8; }
.utd-halo { stroke: var(--anim-warm-soft); stroke-width: 12; }
.utd-beam { stroke: var(--anim-warm); stroke-width: 3; }
.utd-beep { fill: none; stroke: var(--anim-alert); stroke-width: 2.5; stroke-linecap: round; }
.utd-tap { fill: none; stroke: var(--brand-1); stroke-width: 2.5; opacity: 0; }
.utd-s4-ring { opacity: 0; }
.utd-face-out { opacity: 0; }
.utd-pop, .utd-grow, .utd-move { transform-box: fill-box; transform-origin: center; }
.utd-grow { transform-origin: 0 50%; }
.utd-body { transform-box: fill-box; transform-origin: 50% 100%; }

@keyframes utd-fade-in { from { opacity: 0; } }
@keyframes utd-fade-out { from { opacity: 1; } }
@keyframes utd-pop { from { transform: scale(0); opacity: 0; } 50% { opacity: 1; } }
@keyframes utd-pop-spin { from { transform: scale(0) rotate(-120deg); opacity: 0; } 50% { opacity: 1; } }
@keyframes utd-grow { from { transform: scaleX(0); } }
@keyframes utd-draw { from { stroke-dashoffset: 100; } }
@keyframes utd-rise { from { transform: translateY(40px); opacity: 0; } 35% { opacity: 1; } }
@keyframes utd-lid { from { transform: translate(-95px, -48px); } 45% { transform: translate(-40px, -96px) rotate(-30deg); } }
@keyframes utd-hop { 0%, 100% { transform: none; } 40% { transform: translateY(-9px); } 70% { transform: translateY(2px); } }
@keyframes utd-giggle { 0%, 40%, 80%, 100% { transform: none; } 20% { transform: translateY(-6px) rotate(-2deg); } 60% { transform: translateY(-5px) rotate(2deg); } }
@keyframes utd-shake { 0%, 100% { transform: none; } 20% { transform: rotate(-4deg); } 40% { transform: rotate(4deg); } 60% { transform: rotate(-3deg); } 80% { transform: rotate(2deg); } }
@keyframes utd-buzz { 0%, 100% { transform: none; } 10%, 30%, 50%, 70%, 90% { transform: rotate(-10deg); } 20%, 40%, 60%, 80% { transform: rotate(10deg); } }
@keyframes utd-pickup { from { transform: translate(18px, 62px) rotate(-14deg); } }
@keyframes utd-ring { from { opacity: 1; } 25% { opacity: 0.25; } 50% { opacity: 1; } 75% { opacity: 0.25; } to { opacity: 0; } }
@keyframes utd-tap { from { transform: scale(0.3); opacity: 0.9; } to { transform: scale(1.8); opacity: 0; } }
@keyframes utd-flash { 0%, 100% { opacity: 0; } 35% { opacity: 0.8; } }
@keyframes utd-beep { from { opacity: 0; } 20%, 60% { opacity: 1; } 40%, 80% { opacity: 0.15; } }

/* Springy entrances overshoot through the easing, not through extra keyframes. */
.is-active .utd-pop { animation: utd-pop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) var(--utd-at, 0s) both; }
/* A face swap: the earlier face fades out as the later one fades in, at the pair's --utd-at. */
.is-active .utd-face-out { animation: utd-fade-out 0.2s ease var(--utd-at, 1s) both; }
.is-active .utd-face-in { animation: utd-fade-in 0.2s ease var(--utd-at, 1s) both; }

/* Scene 1, the moment: Sofia unboxes a new phone, a new SIM card appears, and she smiles. */
.is-active .utd-s1-lid { animation: utd-lid 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) 0.2s both; }
.is-active .utd-s1-phone { animation: utd-rise 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 0.45s both; }
.utd-s1-k1 { --utd-at: 0.9s; }
.utd-s1-k2 { --utd-at: 1s; }
.utd-s1-k3 { --utd-at: 1.1s; }
.is-active .utd-s1-sim { animation: utd-pop-spin 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 1s both; }
.utd-s1-face { --utd-at: 0.95s; }
.is-active .utd-s1-sofia { animation: utd-hop 0.5s ease-out 1s both; }

/* Scene 2, the old way: questions pop up around Sofia; Yuki calls the old number, which is
   no longer in use, and her face falls. */
.utd-s2-sofia-face { --utd-at: 0.55s; }
.utd-s2-q1 { --utd-at: 0.15s; }
.utd-s2-q2 { --utd-at: 0.3s; }
.utd-s2-q3 { --utd-at: 0.45s; }
.utd-s2-q4 { --utd-at: 0.6s; }
.utd-s2-q5 { --utd-at: 0.75s; }
.is-active .utd-s2-call { animation: utd-draw 0.55s ease-in-out 0.8s both; }
.utd-s2-no { --utd-at: 1.35s; }
.is-active .utd-s2-beep { animation: utd-beep 0.5s ease 1.45s both; }
.utd-s2-yuki-face { --utd-at: 1.6s; }
.is-active .utd-s2-yuki { animation: utd-shake 0.4s ease 1.6s both; }

/* Scene 3, allme: one tap changes the number; a warm glow carries it to Yuki's, Amara's and
   Mateo's phones, which light up with a check. */
.is-active .utd-s3-tap { animation: utd-tap 0.5s ease-out 0.15s both; }
.utd-s3-old { opacity: 0; }
.is-active .utd-s3-old { animation: utd-fade-out 0.25s ease 0.4s both; }
.is-active .utd-s3-new { animation: utd-grow 0.35s ease-out 0.45s both; }
.utd-s3-check { --utd-at: 0.75s; }
.utd-s3-sofia-face { --utd-at: 0.75s; }
.is-active .utd-s3-p1 { animation: utd-draw 0.45s ease-in-out 0.8s both; }
.is-active .utd-s3-p2 { animation: utd-draw 0.45s ease-in-out 0.87s both; }
.is-active .utd-s3-p3 { animation: utd-draw 0.45s ease-in-out 0.94s both; }
.is-active .utd-s3-lit1 { animation: utd-fade-in 0.3s ease 1.25s both; }
.is-active .utd-s3-lit2 { animation: utd-fade-in 0.3s ease 1.32s both; }
.is-active .utd-s3-lit3 { animation: utd-fade-in 0.3s ease 1.39s both; }
.is-active .utd-s3-flash1 { animation: utd-flash 0.45s ease 1.25s both; }
.is-active .utd-s3-flash2 { animation: utd-flash 0.45s ease 1.32s both; }
.is-active .utd-s3-flash3 { animation: utd-flash 0.45s ease 1.39s both; }
.is-active .utd-s3-bar1 { animation: utd-fade-in 0.3s ease 1.3s both; }
.is-active .utd-s3-bar2 { animation: utd-fade-in 0.3s ease 1.37s both; }
.is-active .utd-s3-bar3 { animation: utd-fade-in 0.3s ease 1.44s both; }
.utd-s3-c1, .utd-s3-f1 { --utd-at: 1.35s; }
.utd-s3-c2, .utd-s3-f2 { --utd-at: 1.42s; }
.utd-s3-c3, .utd-s3-f3 { --utd-at: 1.49s; }
.is-active .utd-s3-hop1 { animation: utd-hop 0.4s ease-out 1.35s both; }
.is-active .utd-s3-hop2 { animation: utd-hop 0.4s ease-out 1.42s both; }
.is-active .utd-s3-hop3 { animation: utd-hop 0.4s ease-out 1.49s both; }

/* Scene 4, the payoff: Yuki calls the new number, Sofia's phone rings, she picks up and
   both laugh; a heart pops. */
.is-active .utd-s4-buzz { animation: utd-buzz 0.7s linear 0.55s both; }
.is-active .utd-s4-ring { animation: utd-ring 0.75s ease 0.55s both; }
.is-active .utd-s4-pickup { animation: utd-pickup 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) 1.15s both; }
.is-active .utd-s4-call { animation: utd-draw 0.45s ease-in-out 0.15s both; }
.utd-s4-sofia-face { --utd-at: 1.4s; }
.utd-s4-yuki-face { --utd-at: 1.5s; }
.is-active .utd-s4-sofia { animation: utd-giggle 0.6s ease 1.4s both; }
.is-active .utd-s4-yuki { animation: utd-giggle 0.6s ease 1.5s both; }
.is-active .utd-s4-glow { animation: utd-fade-in 0.4s ease 1.65s both; }
.utd-s4-heart { --utd-at: 1.65s; }
.utd-s4-k1 { --utd-at: 1.8s; }
.utd-s4-k2 { --utd-at: 1.9s; }