/* Focus time (js/scenes/focus.js): a rocket journey that follows the timer. The rocket's place is set by the script
   (--p along the path); everything else drifts on its own: the nebula, the stars, a satellite, the moon turning. */
.sc-focus {
  --k1: #120C34; --k2: #2A1650; --k3: #4D2160; --n1: rgba(236,96,172,.38); --n2: rgba(124,92,236,.36); --n3: rgba(64,190,226,.2);
  --p1: #8DE6CF; --p2: #2E9B9A; --p3: #173F63; --at: #7FD3FF; --sea: #2C7FB8; --isle: #74CC90;
  --m1: #E9E3D4; --m2: #B6AD9D; --mg: rgba(255,238,206,.26); --r1: #FFC37E; --r2: #E0705A; --ring: #FFDDB0; --tr1: #FFC86B; --tr2: #FF7BAC; --rock: #5A4C80;
  --title: #FFFFFF; --card: rgba(255,251,255,.94); --card-ink: #2A1B4A; --accent: #FFC86B; --ink: #2A1B4A; --chip: rgba(255,255,255,.14); --chip-line: rgba(255,255,255,.34);
  background: var(--k1);
}
.sc-focus[data-variant="blue"] {
  --k1: #040E22; --k2: #0A2546; --k3: #0E3D60; --n1: rgba(47,184,204,.3); --n2: rgba(70,112,232,.32); --n3: rgba(126,224,255,.16);
  --p1: #FFD8A0; --p2: #E28A58; --p3: #6B3450; --at: #FFC59A; --sea: #B9603F; --isle: #F6BC80;
  --r1: #A6EAFF; --r2: #3B7FD0; --ring: #CFF4FF; --tr1: #7FE3FF; --tr2: #C8F6FF; --rock: #3D5A84;
  --card: rgba(240,250,255,.94); --card-ink: #0B2240; --accent: #7FE3FF; --ink: #0B2240;
}
.fo-space .k1 { stop-color: var(--k1); } .fo-space .k2 { stop-color: var(--k2); } .fo-space .k3 { stop-color: var(--k3); }
.fo-space .n1 { stop-color: var(--n1); } .fo-space .n2 { stop-color: var(--n2); } .fo-space .n3 { stop-color: var(--n3); }
.fo-space .p1 { stop-color: var(--p1); } .fo-space .p2 { stop-color: var(--p2); } .fo-space .p3 { stop-color: var(--p3); } .fo-space .at { stop-color: var(--at); }
.fo-space .m1 { stop-color: var(--m1); } .fo-space .m2 { stop-color: var(--m2); } .fo-space .mg { stop-color: var(--mg); }
.fo-space .r1 { stop-color: var(--r1); } .fo-space .r2 { stop-color: var(--r2); } .fo-space .tr1 { stop-color: var(--tr1); } .fo-space .tr2 { stop-color: var(--tr2); }

/* the sky */
.fo-nebula { opacity: .92; }
.fo-band { fill: #FFFFFF; opacity: .35; }
.fo-stars { fill: #FFF8E8; }
.fo-stars .tw { animation: foTwinkle var(--t) ease-in-out infinite; animation-delay: var(--d); }
@keyframes foTwinkle { 50% { opacity: .2; } }
.fo-spark { fill: #FFF6DA; transform-box: fill-box; transform-origin: center; animation: foSpark 6s ease-in-out infinite; animation-delay: var(--d); }
@keyframes foSpark { 0%, 100% { transform: scale(.35) rotate(0); opacity: .35; } 50% { transform: scale(1) rotate(45deg); opacity: 1; } }
.fo-shoot { fill: none; stroke: #FFFFFF; stroke-width: 3; stroke-linecap: round; opacity: 0; animation: foShoot 17s linear infinite; animation-delay: -5s; }
@keyframes foShoot { 0% { transform: translate(1500px, 30px); opacity: 0; } 1% { opacity: .9; } 5% { transform: translate(880px, 233px); opacity: 0; } 100% { transform: translate(880px, 233px); opacity: 0; } }
.fo-ringed { transform: translate(830px, 112px) rotate(-16deg) scale(.72); }
.fo-ringed-in { animation: foBob 11s ease-in-out infinite alternate; }
.fo-ring { fill: none; stroke: var(--ring); stroke-width: 7; opacity: .85; } .fo-ring.back { opacity: .45; }
.fo-ringed-band { fill: none; stroke: rgba(255,255,255,.25); stroke-width: 5; stroke-linecap: round; }
.fo-sat { animation: foSat 110s linear infinite; animation-delay: -35s; }
@keyframes foSat { from { transform: translate(-120px, 70px); } to { transform: translate(1720px, 230px); } }
.fo-sat-in { transform-box: fill-box; transform-origin: center; animation: foSpin 40s linear infinite; }
@keyframes foSpin { to { transform: rotate(360deg); } }
.fo-panel { fill: #3E6FB8; stroke: #9CC4F2; stroke-width: 1.5; } .fo-panel-l { stroke: #9CC4F2; stroke-width: 1.5; }
.fo-sat-body { fill: #E8E4EE; } .fo-sat-ant { stroke: #E8E4EE; stroke-width: 2; } .fo-sat-dot { fill: #FF6A6A; animation: foBlinkDot 1.6s steps(1) infinite; }
@keyframes foBlinkDot { 50% { opacity: .15; } }
.fo-rock { fill: var(--rock); transform-box: fill-box; transform-origin: center; animation: foSpin var(--t) linear infinite; }
.fo-crater { fill: rgba(0,0,0,.14); }
.fo-moonglow { transform-box: fill-box; transform-origin: center; animation: foGlow 8s ease-in-out infinite alternate; }
@keyframes foGlow { to { transform: scale(1.08); opacity: .7; } }
.fo-craters { animation: foCraters 90s linear infinite; }
@keyframes foCraters { to { transform: translateX(260px); } }
.fo-flag { transform-box: fill-box; transform-origin: 0 100%; }
.fo-flag > * { transform: scaleY(0); transform-box: fill-box; transform-origin: 0 100%; transition: transform .7s cubic-bezier(.3,1.5,.5,1); }
.fo-pole { stroke: #F4F1E8; stroke-width: 4; stroke-linecap: round; } .fo-cloth { fill: var(--tr2); }
.fo-sea { fill: var(--sea); opacity: .55; } .fo-isle { fill: var(--isle); opacity: .9; }
.fo-clouds { animation: foDrift 34s ease-in-out infinite alternate; }
@keyframes foDrift { from { transform: translateX(-50px); } to { transform: translateX(60px); } }
.fo-cloud { fill: none; stroke: rgba(255,255,255,.65); stroke-width: 9; stroke-linecap: round; }

/* the path and the rocket */
.fo-path { fill: none; stroke: rgba(255,255,255,.42); stroke-width: 3.5; stroke-linecap: round; stroke-dasharray: .5 15; }
.fo-trail { fill: none; stroke: url(#foTrail); stroke-width: 5.5; stroke-linecap: round; transition: stroke-dasharray 1s linear; }
.fo-rocket { transition: transform 1s linear; }
.fo-bob { animation: foBob 3.2s ease-in-out infinite alternate; }
@keyframes foBob { from { transform: translateY(-5px); } to { transform: translateY(5px); } }
.fo-body { fill: #FFF6EA; } .fo-body-shade { fill: #EADFCF; }
.fo-nose, .fo-fin { fill: #FF5D5D; } .fo-fin.mid { fill: #E04848; }
.fo-nozzle { fill: #8C8FA8; }
.fo-rim { fill: #B9BDD8; } .fo-glass { fill: #233A66; }
.fo-glare { fill: none; stroke: rgba(255,255,255,.65); stroke-width: 3.5; stroke-linecap: round; }
.fo-head { fill: #F39A3E; } .fo-ear { fill: #E07E2C; } .fo-ear-in { fill: #FFE1C2; } .fo-cheek { fill: #FFF6EA; }
.fo-eyes, .fo-nosetip { fill: #2A1A12; }
.fo-eyes ellipse { transform-box: fill-box; transform-origin: center; animation: foBlink 5.5s infinite; }
@keyframes foBlink { 0%, 94%, 100% { transform: scaleY(1); } 96.5% { transform: scaleY(.1); } }
.fo-fox { animation: foLook 9s ease-in-out infinite; }
@keyframes foLook { 0%, 35% { transform: translateX(0) rotate(0); } 45%, 60% { transform: translateX(2px) rotate(5deg); } 70%, 100% { transform: translateX(0) rotate(0); } }
.fo-flame { transform-box: fill-box; transform-origin: 50% 0; transform: scale(.7, .32); opacity: .75; transition: transform .6s, opacity .6s; }
.sc-focus.is-running .fo-flame { opacity: 1; animation: foFlame .14s ease-in-out infinite alternate; }
@keyframes foFlame { from { transform: scale(.92, .9); } to { transform: scale(1.04, 1.1); } }
.fo-exhaust circle { fill: rgba(255,255,255,.5); opacity: 0; }
.sc-focus.is-running .fo-exhaust circle { animation: foPuff 1.2s linear infinite; animation-delay: var(--d); }
@keyframes foPuff { 0% { transform: translateY(0) scale(.5); opacity: .55; } 100% { transform: translateY(80px) scale(1.9); opacity: 0; } }
.sc-focus[data-figure="off"] .fo-rocket { display: none; }
/* landed: the engine goes quiet, the flag goes up and the moon sparkles */
.sc-focus.is-done .fo-flame { transform: scale(.5, 0); opacity: 0; animation: none; }
.sc-focus.is-done .fo-flag > * { transform: scaleY(1); transition-delay: .9s; }
.fo-joy path { fill: #FFF4C8; opacity: 0; transform-box: fill-box; transform-origin: center; }
.sc-focus.is-done .fo-joy path { animation: foJoy 1.8s ease-out 2; animation-delay: calc(1.1s + var(--d)); }
@keyframes foJoy { 0% { opacity: 0; transform: scale(.2); } 30% { opacity: 1; transform: scale(1.2) rotate(30deg); } 100% { opacity: 0; transform: scale(.4) rotate(90deg); } }

/* the timer in the corner */
.sc-focus .sc-timer { right: 2.6cqw; bottom: 3.5cqh; width: 25cqh; }
.sc-focus .sc-ring { width: 25cqh; height: 25cqh; }
.sc-focus .sc-time { font-size: clamp(24px, 6.4cqh, 72px); }
.sc-focus .sc-label { font-size: clamp(10px, 1.6cqh, 16px); }
@container (max-aspect-ratio: 1.15) {   /* tall screens: the words on top, the journey in the lower part */
  .sc-focus .fo-space { top: auto; bottom: 0; height: 58cqh; width: calc(58cqh * 16 / 9); left: auto; right: -9cqh; -webkit-mask-image: linear-gradient(to bottom, transparent, #000 22%); mask-image: linear-gradient(to bottom, transparent, #000 22%); }
  .sc-focus .sc-timer { left: 5cqw; right: auto; width: 36cqw; align-items: flex-start; }
  .sc-focus .sc-ring { width: 36cqw; height: 36cqw; }
  .sc-focus .sc-time { font-size: clamp(20px, 9.4cqw, 64px); }
  .sc-focus .sc-label { font-size: clamp(9px, 2.4cqw, 16px); }
}