/* Scene styling and keyframes for the hero animation of /features/parental-controls.html,
   "Liam's first phone". 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 --pc-at (its start) and, for a flight, the
   --pc-dx / --pc-dy offset it flies in from. */

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

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

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

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

/* Scene 1, the moment: Liam unwraps his first phone, the lid flies off and he laughs. */
.pc-s1-lid { --pc-at: 0.4s; }
.pc-s1-ph { --pc-at: 1s; --pc-dx: 0px; --pc-dy: 90px; }
.pc-s1-lit { --pc-at: 1.8s; }
.pc-s1-liam, .pc-s1-liamf { --pc-at: 2s; }
.pc-s1-k1 { --pc-at: 2.2s; }
.pc-s1-k2 { --pc-at: 2.4s; }
.pc-s1-k3 { --pc-at: 2.6s; }
.pc-s1-heart { --pc-at: 2.8s; }

/* Scene 2, the old way: Liam cheerfully hands his address, his card, his email and his birthday to strangers. */
.pc-s2-liam { --pc-at: 0.3s; }
.pc-s2-i1 { --pc-at: 0.6s; --pc-dx: -300px; --pc-dy: 120px; }
.pc-s2-i2 { --pc-at: 1.1s; --pc-dx: -380px; --pc-dy: 20px; }
.pc-s2-i3 { --pc-at: 1.6s; --pc-dx: -290px; --pc-dy: -70px; }
.pc-s2-i4 { --pc-at: 2.1s; --pc-dx: -300px; --pc-dy: 30px; }
.pc-s2-a1 { --pc-at: 2.6s; }
.pc-s2-a2 { --pc-at: 2.9s; }

/* Scene 3, allme: requests from Yuki and from a stranger stop and wait; Sofia, Liam's guardian, is asked. */
.pc-s3-c1 { --pc-at: 0.4s; --pc-dx: 320px; --pc-dy: -60px; }
.pc-s3-c2 { --pc-at: 0.8s; --pc-dx: 330px; --pc-dy: 40px; }
.pc-s3-a1 { --pc-at: 1.2s; }
.pc-s3-a2 { --pc-at: 1.4s; }
.pc-s3-l1 { --pc-at: 1.8s; }
.pc-s3-l2 { --pc-at: 2s; }
.pc-s3-lit { --pc-at: 2.3s; }
.pc-s3-a3 { --pc-at: 2.5s; }
.pc-s3-sofia, .pc-s3-sofiaf { --pc-at: 2.8s; }

/* Scene 4, the payoff: grandma Yuki is approved, the stranger stays out, and Liam and Sofia high-five. */
.pc-s4-ok { --pc-at: 0.5s; }
.pc-s4-yuki, .pc-s4-yukif { --pc-at: 0.7s; }
.pc-s4-no { --pc-at: 1.1s; }
.pc-s4-sofia, .pc-s4-sofiaf, .pc-s4-liam, .pc-s4-liamf { --pc-at: 1.8s; }
.pc-s4-k1 { --pc-at: 2s; }
.pc-s4-heart { --pc-at: 2.3s; }
.pc-s4-k2 { --pc-at: 2.5s; }