/* Scene styling and keyframes for the hero animation of /features/share-code.html,
   "Sofia meets Marcus". 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. */

.sc-ink { color: var(--anim-ink); }
.sc-muted { color: var(--anim-muted); }
.sc-friend { color: var(--brand-2); }
.sc-brand { color: var(--brand-1); }
.sc-warm { color: var(--anim-warm); }
.sc-love { color: var(--anim-love); }
.sc-alert { color: var(--anim-alert); }
.sc-line { fill: var(--anim-muted); opacity: 0.7; }
.sc-new { fill: var(--brand-1); }
.sc-old { fill: var(--anim-muted); }
.sc-wrong { fill: var(--anim-alert); }
.sc-drop { fill: var(--brand-2); }
.sc-glow-soft { fill: var(--anim-warm-soft); }
.sc-screen-glow { fill: var(--anim-warm-soft); }
.sc-flash { fill: var(--anim-warm); opacity: 0; }
.sc-wood { fill: var(--anim-wood); }
.sc-leg { fill: var(--anim-wood); opacity: 0.75; }
.sc-floor { fill: var(--anim-muted); opacity: 0.35; }
.sc-slides { fill: var(--anim-warm-soft); stroke: var(--anim-muted); stroke-width: 3; }
.sc-stand { fill: none; stroke: var(--anim-muted); stroke-width: 3; stroke-linecap: round; }
.sc-lanyard { fill: none; stroke: var(--brand-1); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sc-panel { fill: var(--anim-surface); stroke: var(--anim-ink); stroke-width: 2.5; }
.sc-beam, .sc-halo, .sc-link { fill: none; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 0; }
.sc-halo { stroke: var(--anim-warm-soft); stroke-width: 12; }
.sc-beam { stroke: var(--anim-warm); stroke-width: 3; }
.sc-link { stroke: var(--brand-1); stroke-width: 3; }
.sc-face-out { opacity: 0; }
.sc-pop, .sc-grow, .sc-move { transform-box: fill-box; transform-origin: center; }
.sc-grow { transform-origin: 0 50%; }
.sc-body { transform-box: fill-box; transform-origin: 50% 100%; }

@keyframes sc-fade-in { from { opacity: 0; } }
@keyframes sc-fade-out { from { opacity: 1; } }
@keyframes sc-pop { from { transform: scale(0); opacity: 0; } 50% { opacity: 1; } }
@keyframes sc-grow { from { transform: scaleX(0); } }
@keyframes sc-draw { from { stroke-dashoffset: 100; } }
@keyframes sc-hop { 0%, 100% { transform: none; } 40% { transform: translateY(-9px); } 70% { transform: translateY(2px); } }
@keyframes sc-giggle { 0%, 40%, 80%, 100% { transform: none; } 20% { transform: translateY(-6px) rotate(-2deg); } 60% { transform: translateY(-5px) rotate(2deg); } }
@keyframes sc-shake { 0%, 100% { transform: none; } 20% { transform: rotate(-4deg); } 40% { transform: rotate(4deg); } 60% { transform: rotate(-3deg); } 80% { transform: rotate(2deg); } }
@keyframes sc-flash { 0%, 100% { opacity: 0; } 35% { opacity: 0.8; } }
@keyframes sc-card-drop { from { transform: translate(-70px, -170px) rotate(-50deg); } 70% { transform: translate(0, 6px) rotate(24deg); } }
@keyframes sc-request { from { transform: translate(120px, 90px) scale(0.3); opacity: 0; } 30% { opacity: 1; } }

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

/* Scene 1, the moment: Sofia and Marcus meet at a design conference, talk and smile. */
.sc-s1-b1 { --sc-at: 0.4s; }
.sc-s1-b2 { --sc-at: 0.75s; }
.sc-s1-sofia-face { --sc-at: 1s; }
.sc-s1-marcus-face { --sc-at: 1.15s; }
.is-active .sc-s1-sofia { animation: sc-hop 0.5s ease-out 1s both; }
.is-active .sc-s1-marcus { animation: sc-hop 0.5s ease-out 1.15s both; }
.sc-s1-k1 { --sc-at: 1.3s; }
.sc-s1-k2 { --sc-at: 1.4s; }

/* Scene 2, the old way: Marcus types her number with a wrong digit, her business card lands
   in a coffee cup, and his face falls. */
.sc-s2-right { opacity: 0; }
.is-active .sc-s2-right { animation: sc-fade-out 0.25s ease 0.7s both; }
.is-active .sc-s2-wrong { animation: sc-fade-in 0.25s ease 0.7s both; }
.sc-s2-no { --sc-at: 0.85s; }
.sc-s2-card { transform: rotate(18deg); }
.is-active .sc-s2-card { animation: sc-card-drop 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) 1.1s both; }
.sc-s2-d1 { --sc-at: 1.7s; }
.sc-s2-d2 { --sc-at: 1.78s; }
.sc-s2-face { --sc-at: 1.9s; }
.is-active .sc-s2-marcus { animation: sc-shake 0.4s ease 1.9s both; }
.sc-s2-ask { --sc-at: 2.2s; }

/* Scene 3, allme: Sofia shows her code as a QR, Marcus scans it, his request reaches her and
   she picks what he gets: her phone number yes, her home address no. */
.sc-s3-qr { --sc-at: 0.2s; }
.is-active .sc-s3-halo, .is-active .sc-s3-beam { animation: sc-draw 0.45s ease-in-out 0.5s both; }
.is-active .sc-s3-code { animation: sc-grow 0.35s ease-out 0.95s both; }
.sc-s3-check { --sc-at: 1.25s; }
.is-active .sc-s3-req { animation: sc-request 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 1.45s both; }
.sc-s3-panel { --sc-at: 2s; }
.sc-s3-yes { --sc-at: 2.3s; }
.sc-s3-no { --sc-at: 2.55s; }
.sc-s3-face { --sc-at: 2.7s; }
.is-active .sc-s3-sofia { animation: sc-hop 0.5s ease-out 2.7s both; }

/* Scene 4, the payoff: both phones light up connected, they laugh and wave; later a changed
   value arrives on Marcus's phone by itself. */
.is-active .sc-s4-halo, .is-active .sc-s4-link { animation: sc-draw 0.5s ease-in-out 0.2s both; }
.is-active .sc-s4-lit1 { animation: sc-fade-in 0.3s ease 0.65s both; }
.is-active .sc-s4-lit2 { animation: sc-fade-in 0.3s ease 0.72s both; }
.sc-s4-c1 { --sc-at: 0.7s; }
.sc-s4-c2 { --sc-at: 0.78s; }
.sc-s4-sofia-face { --sc-at: 1s; }
.sc-s4-marcus-face { --sc-at: 1.1s; }
.is-active .sc-s4-sofia { animation: sc-giggle 0.6s ease 1s both; }
.is-active .sc-s4-marcus { animation: sc-giggle 0.6s ease 1.1s both; }
.sc-s4-heart { --sc-at: 1.3s; }
.sc-s4-k1 { --sc-at: 1.45s; }
.sc-s4-k2 { --sc-at: 1.55s; }
.sc-s4-old { opacity: 0; }
.is-active .sc-s4-old { animation: sc-fade-out 0.25s ease 2.3s both; }
.is-active .sc-s4-new { animation: sc-grow 0.35s ease-out 2.35s both; }
.is-active .sc-s4-flash { animation: sc-flash 0.45s ease 2.3s both; }
.sc-s4-k3 { --sc-at: 2.6s; }