/* Scene styling and keyframes for the hero animation of /features/companies.html,
   "Sofia's new flat". 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 --co-at (its start) and, for a flight, the
   --co-dx / --co-dy offset it flies in from. */

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

@keyframes co-fade-in { from { opacity: 0; } }
@keyframes co-fade-out { from { opacity: 1; } }
/* Shown only between two moments: in at the start, out at the end. */
@keyframes co-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 co-away { 0% { opacity: 1; } 14%, 86% { opacity: 0; } 100% { opacity: 1; } }
@keyframes co-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 co-fly { from { transform: translate(var(--co-dx, 0), var(--co-dy, 0)) scale(0.4); opacity: 0; } 20% { opacity: 1; } }
/* A thing flying into a container and disappearing inside it. */
@keyframes co-into { 0% { transform: translate(var(--co-dx, 0), var(--co-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 co-gone { from { transform: none; opacity: 1; } to { transform: scale(0.3); opacity: 0; } }
@keyframes co-drop { from { transform: translateY(-70px); opacity: 0; } 30% { opacity: 1; } }
@keyframes co-grow { from { transform: scaleX(0); } }
@keyframes co-draw { from { stroke-dashoffset: 100; } }
@keyframes co-hop { 0%, 100% { transform: none; } 40% { transform: translateY(-9px); } 70% { transform: translateY(2px); } }
@keyframes co-giggle { 0%, 40%, 80%, 100% { transform: none; } 20% { transform: translateY(-6px) rotate(-2deg); } 60% { transform: translateY(-5px) rotate(2deg); } }
@keyframes co-shake { 0%, 100% { transform: none; } 20% { transform: rotate(-4deg); } 40% { transform: rotate(4deg); } 60% { transform: rotate(-3deg); } 80% { transform: rotate(2deg); } }
@keyframes co-buzz { 0%, 100% { transform: none; } 10%, 30%, 50%, 70%, 90% { transform: rotate(-6deg); } 20%, 40%, 60%, 80% { transform: rotate(6deg); } }
@keyframes co-ring { 0% { opacity: 0; } 20%, 80% { opacity: 1; } 100% { opacity: 0; } }

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

/* A phone screen that lights up and stays lit. */
.co-lit { fill: var(--anim-warm-soft); }
@keyframes co-show { from { opacity: 0; } }
.is-active .co-show { animation: co-show 0.35s ease var(--co-at, 1s) both; }
/* A thing that is thrown back where it came from: it flies in, stops, and falls away. */
.co-bounce { opacity: 0; transform-box: fill-box; transform-origin: center; }
@keyframes co-bounce { 0% { transform: translate(var(--co-dx, 0), var(--co-dy, 0)); opacity: 0; } 15% { opacity: 1; } 55% { transform: none; opacity: 1; } 70% { transform: translateX(10px) rotate(8deg); opacity: 1; } 100% { transform: translate(40px, 50px) rotate(30deg); opacity: 0; } }
.is-active .co-bounce { animation: co-bounce 1.6s ease-in-out var(--co-at, 1s) both; }
/* A lid tossed off a box. */
.co-toss { opacity: 0; transform-box: fill-box; transform-origin: center; }
@keyframes co-toss { 0% { transform: none; opacity: 1; } 100% { transform: translate(70px, -120px) rotate(40deg); opacity: 0; } }
.is-active .co-toss { animation: co-toss 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) var(--co-at, 1s) both; }

/* Scene 1, the moment: a new flat and its key, and the agency's documents pile up in front of Sofia. */
.co-s1-house { --co-at: 0.3s; }
.co-s1-key { --co-at: 0.6s; }
.co-s1-d1 { --co-at: 1s; --co-dx: 180px; --co-dy: 10px; }
.co-s1-d2 { --co-at: 1.4s; --co-dx: 150px; --co-dy: -20px; }
.co-s1-d3 { --co-at: 1.8s; --co-dx: 190px; --co-dy: -40px; }
.co-s1-d4 { --co-at: 2.2s; --co-dx: 150px; --co-dy: -80px; }
.co-s1-d5 { --co-at: 2.6s; --co-dx: 180px; --co-dy: -110px; }
.co-s1-sofia, .co-s1-sofiaf { --co-at: 3s; }

/* Scene 2, the old way: print, sign with a pen, scan, mail it off — and the agency asks again. */
.co-s2-doc { --co-at: 0.4s; }
.co-s2-pen { --co-at: 1s; }
.co-s2-doc2 { --co-at: 1.4s; }
.co-s2-mail { --co-at: 1.8s; --co-dx: -130px; --co-dy: 40px; }
.co-s2-ask { --co-at: 2.5s; }
.co-s2-mail2 { --co-at: 2.9s; --co-dx: -120px; --co-dy: -30px; }
.co-s2-sofia, .co-s2-sofiaf { --co-at: 3.2s; }

/* Scene 3, allme: on her phone the contract gets her verified details and her signature, and goes to the agency. */
.co-s3-lit { --co-at: 0.3s; }
.co-s3-doc { --co-at: 0.5s; }
.co-s3-ver { --co-at: 1.1s; }
.co-s3-pen { --co-at: 1.6s; }
.co-s3-beam { --co-at: 2.1s; }
.co-s3-ok { --co-at: 2.6s; }
.co-s3-sofia, .co-s3-sofiaf, .co-s3-k1 { --co-at: 2.9s; }
.co-s3-k2 { --co-at: 3.1s; }

/* Scene 4, the payoff: Sofia gets a new number; the agency's card of her updates by itself. */
.co-s4-sim { --co-at: 0.3s; }
.co-s4-lit { --co-at: 0.8s; }
.co-s4-beam { --co-at: 1.2s; }
.co-s4-card { --co-at: 1.8s; }
.co-s4-ok { --co-at: 2.2s; }
.co-s4-sofia, .co-s4-sofiaf { --co-at: 2.6s; }
.co-s4-heart { --co-at: 2.9s; }
.co-s4-k1 { --co-at: 3.1s; }