/* Scene styling and keyframes for the hero animation of /features/contact-sync.html,
   "Yuki's phone book". 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. */

.sy-ink { color: var(--anim-ink); }
.sy-friend { color: var(--brand-2); }
.sy-brand { color: var(--brand-1); }
.sy-warm { color: var(--anim-warm); }
.sy-love { color: var(--anim-love); }
.sy-alert { color: var(--anim-alert); }
.sy-wood { fill: var(--anim-wood); }
.sy-wood-dark { fill: var(--anim-wood); opacity: 0.75; }
.sy-line { fill: var(--anim-muted); opacity: 0.7; }
.sy-avatar { fill: var(--anim-muted); opacity: 0.55; }
.sy-old { fill: var(--anim-muted); opacity: 0.45; }
.sy-new { fill: var(--brand-1); }
.sy-hl { fill: var(--anim-warm-soft); }
.sy-flash { fill: var(--anim-warm); opacity: 0; }
.sy-track { fill: var(--brand-1); }
.sy-knob { fill: var(--anim-surface); }
.sy-strike, .sy-beam, .sy-halo { fill: none; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 0; }
.sy-strike { stroke: var(--anim-alert); stroke-width: 3; }
.sy-halo { stroke: var(--anim-warm-soft); stroke-width: 12; }
.sy-beam { stroke: var(--anim-warm); stroke-width: 3; }
.sy-face-out { opacity: 0; }
.sy-pop, .sy-grow, .sy-knob { transform-box: fill-box; transform-origin: center; }
.sy-grow { transform-origin: 0 50%; }
.sy-body { transform-box: fill-box; transform-origin: 50% 100%; }

@keyframes sy-fade-in { from { opacity: 0; } }
@keyframes sy-fade-out { from { opacity: 1; } }
@keyframes sy-old-out { from { opacity: 0.45; } }
@keyframes sy-pop { from { transform: scale(0); opacity: 0; } 50% { opacity: 1; } }
@keyframes sy-grow { from { transform: scaleX(0); } }
@keyframes sy-draw { from { stroke-dashoffset: 100; } }
@keyframes sy-hop { 0%, 100% { transform: none; } 40% { transform: translateY(-9px); } 70% { transform: translateY(2px); } }
@keyframes sy-giggle { 0%, 40%, 80%, 100% { transform: none; } 20% { transform: translateY(-6px) rotate(-2deg); } 60% { transform: translateY(-5px) rotate(2deg); } }
@keyframes sy-shake { 0%, 100% { transform: none; } 20% { transform: rotate(-4deg); } 40% { transform: rotate(4deg); } 60% { transform: rotate(-3deg); } 80% { transform: rotate(2deg); } }
@keyframes sy-flash { 0%, 100% { opacity: 0; } 35% { opacity: 0.8; } }
@keyframes sy-switch-track { from { fill: var(--anim-muted); } }
@keyframes sy-switch-knob { from { transform: translateX(-14px); } }

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

/* Scene 1, the moment: Yuki in her armchair, tea beside her, scrolling her own phone book. */
.sy-s1-r1 { --sy-at: 0.4s; } .sy-s1-r2 { --sy-at: 0.55s; } .sy-s1-r3 { --sy-at: 0.7s; }
.sy-s1-r4 { --sy-at: 0.85s; } .sy-s1-r5 { --sy-at: 1s; }
.sy-s1-face { --sy-at: 1.6s; }
.is-active .sy-s1-yuki { animation: sy-giggle 0.6s ease 1.6s both; }
.sy-s1-heart { --sy-at: 1.9s; }
.sy-s1-k1 { --sy-at: 2.1s; }

/* Scene 2, the old way: she calls a contact, the old number does not connect, two entries
   are out of date, and her face falls. */
.is-active .sy-s2-hl { animation: sy-fade-in 0.25s ease 0.4s both; }
.sy-s2-ring { --sy-at: 0.7s; }
.sy-s2-no { --sy-at: 1.4s; }
.is-active .sy-s2-x1 { animation: sy-draw 0.35s ease-in-out 1.6s both; }
.is-active .sy-s2-x2 { animation: sy-draw 0.35s ease-in-out 1.9s both; }
.sy-s2-face { --sy-at: 2.2s; }
.is-active .sy-s2-yuki { animation: sy-shake 0.4s ease 2.2s both; }
.sy-s2-ask { --sy-at: 2.5s; }

/* Scene 3, allme: sync switches on, and her allme people fill her phone book, faces and all. */
.is-active .sy-s3-track { animation: sy-switch-track 0.3s ease 0.4s both; }
.is-active .sy-s3-knob { animation: sy-switch-knob 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) 0.4s both; }
.sy-s3-ring { --sy-at: 0.7s; }
.sy-s3-h1 { --sy-at: 1s; } .sy-s3-l1 { --sy-at: 1.05s; }
.sy-s3-h2 { --sy-at: 1.2s; } .sy-s3-l2 { --sy-at: 1.25s; }
.sy-s3-h3 { --sy-at: 1.4s; } .sy-s3-l3 { --sy-at: 1.45s; }
.sy-s3-h4 { --sy-at: 1.6s; } .sy-s3-l4 { --sy-at: 1.65s; }
.sy-s3-check { --sy-at: 2s; }
.sy-s3-face { --sy-at: 2.3s; }
.is-active .sy-s3-yuki { animation: sy-hop 0.5s ease-out 2.3s both; }
.sy-s3-k1 { --sy-at: 2.5s; }
.sy-s3-k2 { --sy-at: 2.6s; }

/* Scene 4, the payoff: Sofia changes her number, Yuki's phone book updates by itself while
   she relaxes; she calls from her usual app, Sofia picks up and both laugh. */
.sy-s4-sold { opacity: 0; }
.is-active .sy-s4-sold { animation: sy-fade-out 0.25s ease 0.3s both; }
.sy-s4-snew { --sy-at: 0.35s; }
.is-active .sy-s4-halo, .is-active .sy-s4-beam { animation: sy-draw 0.5s ease-in-out 0.8s both; }
.sy-s4-old { opacity: 0; }
.is-active .sy-s4-old { animation: sy-old-out 0.25s ease 1.4s both; }
.sy-s4-new { --sy-at: 1.45s; }
.is-active .sy-s4-flash { animation: sy-flash 0.45s ease 1.4s both; }
.sy-s4-check { --sy-at: 1.7s; }
.sy-s4-ring { --sy-at: 2.2s; }
.sy-s4-pick { --sy-at: 2.6s; }
.sy-s4-sface { --sy-at: 2.7s; }
.is-active .sy-s4-sofia { animation: sy-giggle 0.6s ease 2.7s both; }
.sy-s4-yface { --sy-at: 2.8s; }
.is-active .sy-s4-yuki { animation: sy-giggle 0.6s ease 2.8s both; }
.sy-s4-heart { --sy-at: 3s; }
.sy-s4-k1 { --sy-at: 3.1s; }
.sy-s4-k2 { --sy-at: 3.2s; }