/* Breathing break (js/scenes/calm.js): under the sea. One breath is --breath seconds: the jellyfish grows for four
   tenths of it, rests, and gets small again; the words follow. Only transform and opacity animate (and the slow sway of
   kelp, arms and tentacles, which SMIL draws in the SVG). */
.sc-calm { --js: min(62cqh, 44cqw); --jr: max(4cqh, 3cqw); --jt: 6cqh; --breath: 10s;
  --w1: #A8ECE4; --w2: #4CC0C8; --w3: #1E8FA8; --w4: #0D5874; --light: rgba(255,255,236,.6);
  --fa1: #2A93A2; --fa2: #1F7C8E; --ne1: #17687A; --ne2: #0F4F60; --sa1: #EED9AE; --sa2: #CFB37F;
  --kelp: #2E7D5B; --kelp-far: #3FA08E; --fan: #F58FA6; --brain: #F6B46C; --brain-l: #D98A45; --anem: #FF8FA3; --anem2: #FFC1CC;
  --fish: #FFC15E; --turtle: #2A8494; --rays: 1;
  --b0: #FFF4F9; --b1: #F7B8DA; --b2: #C68DF0; --tent: #FAD0E8; --arm: #F3A8D4; --arm-in: #FFE3F2; --face: #6A2D5E; --cheek: #FF7FB0;
  --h0: rgba(255,220,242,.7); --h1: rgba(255,220,242,.2);
  --title: #FFFFFF; --card: rgba(255,255,255,.93); --card-ink: #0F3F55; --accent: #FFC6E2; --ink: #0F3F55; --chip: rgba(255,255,255,.18); --chip-line: rgba(255,255,255,.4);
  background: var(--w3);
}
.sc-calm[data-variant="deep"] {
  --w1: #22457F; --w2: #142C62; --w3: #0B1B45; --w4: #050B22; --light: rgba(150,196,255,.3);
  --fa1: #102856; --fa2: #0B1D42; --ne1: #0A1734; --ne2: #060F25; --sa1: #2C3760; --sa2: #1B2345;
  --kelp: #14385A; --kelp-far: #1C4C70; --fan: #6E5AA8; --brain: #4D5E9E; --brain-l: #3A4A84; --anem: #7D5FC0; --anem2: #A58CF0;
  --fish: #8DEBFF; --turtle: #3F6FB0; --rays: .3;
  --b0: #F0FCFF; --b1: #93E9FF; --b2: #7F80FF; --tent: #A9F3FF; --arm: #8FD9FF; --arm-in: #E3FBFF; --face: #1F2D6E; --cheek: #8FC8FF;
  --h0: rgba(140,236,255,.75); --h1: rgba(120,200,255,.22);
  --card: rgba(236,246,255,.93); --card-ink: #12224A; --accent: #94EBFF; --ink: #0B1A42;
}
.cl-sea .w1 { stop-color: var(--w1); } .cl-sea .w2 { stop-color: var(--w2); } .cl-sea .w3 { stop-color: var(--w3); } .cl-sea .w4 { stop-color: var(--w4); }
.cl-sea .l0 { stop-color: var(--light); } .cl-sea .l1 { stop-color: var(--light); stop-opacity: 0; }
.cl-sea .fa1 { stop-color: var(--fa1); } .cl-sea .fa2 { stop-color: var(--fa2); } .cl-sea .ne1 { stop-color: var(--ne1); } .cl-sea .ne2 { stop-color: var(--ne2); }
.cl-sea .sa1 { stop-color: var(--sa1); } .cl-sea .sa2 { stop-color: var(--sa2); }

/* the water */
.cl-surface path { fill: none; stroke: #FFFFFF; stroke-width: 3; stroke-linecap: round; opacity: calc(.45 * var(--rays)); animation: clWave 9s linear infinite; }
.cl-surface .s2 { stroke-width: 2; opacity: calc(.3 * var(--rays)); animation-duration: 15s; animation-direction: reverse; }
@keyframes clWave { to { transform: translateX(-200px); } }
.cl-rays { opacity: var(--rays); }
.cl-ray { fill: url(#clRay); opacity: .3; transform-box: fill-box; transform-origin: 50% 0; animation: clRay var(--t) ease-in-out infinite alternate; animation-delay: var(--d); }
@keyframes clRay { from { opacity: .22; transform: rotate(-2.2deg); } to { opacity: .72; transform: rotate(2.2deg); } }
.cl-glowdots { display: none; }
.sc-calm[data-variant="deep"] .cl-glowdots { display: inline; }
.cl-glowdots circle { fill: #A9F7FF; }
.cl-glowdots g { opacity: .2; animation: clTwinkle var(--t) ease-in-out infinite; animation-delay: var(--d); }
@keyframes clTwinkle { 50% { opacity: .95; } }
.cl-snow circle { fill: #FFFFFF; opacity: .45; }
.cl-snow g { animation: clSnow var(--t) ease-in-out infinite alternate; animation-delay: var(--d); }
@keyframes clSnow { from { transform: translate(-10px, -26px); } to { transform: translate(14px, 26px); } }

/* the life far away: a turtle and a school of fish */
.cl-turtle { animation: clTurtle 160s linear infinite; animation-delay: -40s; }
@keyframes clTurtle { from { transform: translate(1900px, 250px) scale(.8); } to { transform: translate(-300px, 330px) scale(.8); } }
.cl-turtle-in { fill: var(--turtle); opacity: .55; animation: clBob 9s ease-in-out infinite alternate; }
@keyframes clBob { from { transform: translateY(-10px) rotate(-1.5deg); } to { transform: translateY(10px) rotate(1.5deg); } }
.cl-flip { transform-box: fill-box; animation: clPaddle 3.4s ease-in-out infinite alternate; }
.cl-flip.f1, .cl-flip.f2 { transform-origin: 100% 50%; } .cl-flip.f3, .cl-flip.f4 { transform-origin: 0 50%; animation-delay: -1.7s; }
.cl-flip.f2, .cl-flip.f4 { animation-direction: alternate-reverse; }
@keyframes clPaddle { from { transform: rotate(-12deg); } to { transform: rotate(12deg); } }
.cl-shell { fill: var(--turtle); } .cl-shell-l { fill: none; stroke: rgba(255,255,255,.35); stroke-width: 3; stroke-linejoin: round; }
.cl-turtle .cl-eye { fill: rgba(0,0,0,.4); }
.cl-school { animation: clSchool 95s linear infinite; animation-delay: -30s; }
@keyframes clSchool { from { transform: translate(1750px, 430px); } to { transform: translate(-320px, 380px); } }
.cl-school-in { animation: clBob 6s ease-in-out infinite alternate; }
.cl-fish { fill: var(--fish); opacity: .85; animation: clBob 2.6s ease-in-out infinite alternate; animation-delay: var(--d); }
.cl-tail { transform-box: fill-box; transform-origin: 0 50%; animation: clTail .7s ease-in-out infinite alternate; animation-delay: var(--d); }
@keyframes clTail { from { transform: rotate(-14deg); } to { transform: rotate(14deg); } }
.cl-fish .cl-eye { fill: #12324A; }

/* the reef */
.cl-kelp { fill: var(--kelp); } .cl-kelp.far { fill: var(--kelp-far); opacity: .6; }
.cl-fan { fill: none; stroke: var(--fan); stroke-width: 6; stroke-linecap: round; opacity: .9; }
.cl-brain { fill: var(--brain); } .cl-brain-l { fill: none; stroke: var(--brain-l); stroke-width: 3; stroke-linecap: round; }
.cl-anem { fill: var(--anem); } .cl-anem-arm { fill: none; stroke: var(--anem2); stroke-width: 7; stroke-linecap: round; }
.cl-ripple { fill: none; stroke: rgba(80,50,10,.12); stroke-width: 3; stroke-linecap: round; }
.cl-star { fill: #F2895E; } .cl-star-d { fill: #FFD0A8; }
.cl-shellf { fill: #F8E6D4; } .cl-shellf-l { fill: none; stroke: #D9B99A; stroke-width: 2; stroke-linecap: round; }
.sc-calm[data-variant="deep"] :is(.cl-star, .cl-shellf) { opacity: .45; }
.cl-bub { opacity: .85; animation: clRise var(--t) linear var(--d) infinite, clWob var(--w) ease-in-out infinite alternate; }   /* a sheet of bubbles: one band up, then again without a seam */
@keyframes clRise { from { transform: translateY(0); } to { transform: translateY(-960px); } }
@keyframes clWob { from { translate: -9px 0; } to { translate: 9px 0; } }
.cl-bub circle { fill: rgba(255,255,255,.12); stroke: rgba(255,255,255,.65); stroke-width: 1.6; }
.cl-bub .cl-shine { fill: rgba(255,255,255,.85); stroke: none; }

/* the jellyfish, in the same box as the timer's ring */
.cl-jelly { position: absolute; z-index: 2; right: var(--jr); top: var(--jt); width: var(--js); height: var(--js); pointer-events: none; }
.jf-svg { width: 100%; height: 100%; overflow: visible; }
.jf-svg .h0 { stop-color: var(--h0); } .jf-svg .h1 { stop-color: var(--h1); } .jf-svg .h2 { stop-color: var(--h1); stop-opacity: 0; }
.jf-svg .b0 { stop-color: var(--b0); } .jf-svg .b1 { stop-color: var(--b1); } .jf-svg .b2 { stop-color: var(--b2); }
.jf-halo { transform-box: fill-box; transform-origin: center; animation: jfHalo var(--breath) infinite; }
@keyframes jfHalo { 0% { transform: scale(.82); opacity: .45; animation-timing-function: cubic-bezier(.4,0,.4,1); } 40%, 48% { transform: scale(1.22); opacity: 1; animation-timing-function: cubic-bezier(.4,0,.5,1); } 100% { transform: scale(.82); opacity: .45; } }
.jf-breath { transform-box: view-box; transform-origin: 300px 240px; animation: jfBreath var(--breath) infinite; }
@keyframes jfBreath { 0% { transform: translateY(16px) scale(.92); animation-timing-function: cubic-bezier(.4,0,.4,1); } 40% { transform: translateY(-16px) scale(1.1); } 48% { transform: translateY(-18px) scale(1.1); animation-timing-function: cubic-bezier(.4,0,.5,1); } 100% { transform: translateY(16px) scale(.92); } }
.jf-bell { transform-box: view-box; transform-origin: 300px 258px; animation: jfBell var(--breath) infinite; }
@keyframes jfBell { 0% { transform: scale(.97, 1.03); animation-timing-function: cubic-bezier(.4,0,.4,1); } 40%, 48% { transform: scale(1.05, .97); animation-timing-function: cubic-bezier(.4,0,.5,1); } 100% { transform: scale(.97, 1.03); } }
.jf-tents { transform-box: view-box; transform-origin: 300px 258px; animation: jfTrail var(--breath) infinite; animation-delay: calc(var(--breath) * -.94); }
@keyframes jfTrail { 0%, 100% { transform: scaleY(.96); } 45% { transform: scaleY(1.08); } }
.jf-tent { fill: none; stroke: var(--tent); stroke-width: 3.5; stroke-linecap: round; opacity: .8; }
.jf-arm { fill: none; stroke: var(--arm); stroke-width: 15; stroke-linecap: round; opacity: .5; }
.jf-frill { fill: none; stroke: #FFFFFF; stroke-width: 21; stroke-linecap: round; stroke-dasharray: 2 11; opacity: .22; }
.jf-arm-in { fill: none; stroke: var(--arm-in); stroke-width: 5; stroke-linecap: round; opacity: .85; }
.jf-dome { opacity: .93; }
.jf-inner { fill: rgba(255,255,255,.26); }
.jf-shine { fill: #FFFFFF; opacity: .5; }
.jf-rim { fill: none; stroke: rgba(255,255,255,.7); stroke-width: 2.5; stroke-linejoin: round; }
.jf-dots circle { fill: #FFFFFF; opacity: .55; animation: clTwinkle 3.2s ease-in-out infinite; animation-delay: var(--d); }
.jf-face path { fill: none; stroke: var(--face); stroke-width: 5.5; stroke-linecap: round; }
.jf-cheek { fill: var(--cheek); opacity: .55; }
.jf-joy circle { fill: rgba(255,255,255,.15); stroke: rgba(255,255,255,.75); stroke-width: 2; opacity: 0; }
.cl-words { position: absolute; left: 0; right: 0; bottom: 8.5%; display: grid; justify-items: center; margin: 0; font-family: var(--serif); font-style: italic; font-weight: 700; font-size: calc(var(--js) * .1); line-height: 1; color: #FFFFFF; text-shadow: 0 4px 24px rgba(0,30,60,.45); }
.cl-words span { grid-area: 1 / 1; opacity: 0; animation: clIn var(--breath) infinite; }
.cl-words .cl-out { animation-name: clOut; }
@keyframes clIn { 0% { opacity: 0; transform: translateY(8px); } 6%, 38% { opacity: 1; transform: none; } 46%, 100% { opacity: 0; transform: translateY(-8px); } }
@keyframes clOut { 0%, 48% { opacity: 0; transform: translateY(8px); } 55%, 92% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(-8px); } }
.sc-calm[data-figure="off"] .jf-svg { visibility: hidden; }
.sc-calm.is-done .jf-breath, .sc-calm.is-done .jf-halo, .sc-calm.is-done .jf-bell { animation: jfJoy 1.6s cubic-bezier(.3,1.4,.5,1) 2; }
@keyframes jfJoy { 50% { transform: translateY(-26px) scale(1.06); } }
.sc-calm.is-done .jf-joy circle { animation: jfBubble 2.4s ease-out both; }
.sc-calm.is-done .jf-joy circle:nth-child(2) { animation-delay: .25s; } .sc-calm.is-done .jf-joy circle:nth-child(3) { animation-delay: .5s; } .sc-calm.is-done .jf-joy circle:nth-child(4) { animation-delay: .7s; }
@keyframes jfBubble { 0% { opacity: 0; transform: translateY(30px); } 30% { opacity: 1; } 100% { opacity: 0; transform: translateY(-80px); } }
.sc-calm.is-done .cl-words { visibility: hidden; }

/* the timer's ring round the jellyfish, the time and the buttons under it */
.sc-calm .sc-timer { right: var(--jr); top: var(--jt); bottom: auto; width: var(--js); gap: 0; }
.sc-calm .sc-ring { width: var(--js); height: var(--js); }
.sc-calm .sc-ring .sc-track { fill: none; stroke: rgba(255,255,255,.2); stroke-width: .8; }
.sc-calm .sc-ring .sc-arc { stroke-width: 1.3; }
.sc-calm .sc-read { position: absolute; top: calc(100% + 1.2cqh); left: 50%; translate: -50% 0; flex-direction: row; align-items: baseline; gap: 1.4cqh; }
.sc-calm .sc-time { font-size: clamp(24px, 6cqh, 64px); }
.sc-calm .sc-ctrl { margin-top: calc(8cqh + 14px); }

@container (max-aspect-ratio: 1.15) {
  .sc-calm :is(.cl-jelly, .sc-timer, .sc-done) { --js: min(44cqh, 74cqw); --jr: calc(50cqw - var(--js) / 2); --jt: calc(100cqh - var(--js) - 19cqh); }
  .sc-calm .sc-timer { left: auto; width: var(--js); }
  .sc-calm .sc-card { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .sc-calm :is(.jf-breath, .jf-halo, .jf-bell, .jf-tents, .cl-words span) { animation-duration: var(--breath) !important; animation-iteration-count: infinite !important; }
}
/* "time is up" takes the place of the breathing words, inside the ring */
.sc-calm .sc-done { left: auto; right: calc(var(--jr) + var(--js) / 2); top: calc(var(--jt) + var(--js) * .84); translate: 50% -50%; max-width: calc(var(--js) * .9); padding: 1.6cqh 3cqh; font-size: clamp(18px, 3.6cqh, 40px); }