/* Home hero, October 2026: the sun rising over a still lake.
   Markup: art_dawn() in lib/art.php. Light motes, stars and the optional sounds: assets/dawn.js.
   One gentle timeline: first light, the sun clears the hills (about 9 s), then the glow breathes
   in and out every 10 s (six breaths a minute, the pace slow-breathing exercises use).
   Every layer moves with transform, opacity or filter only, so phones stay cool and smooth.
   The resting style of each layer is its final morning look; the animations only add the way there,
   so reduced motion, old browsers and print simply show the morning. */

.home-hero{
  container-type:inline-size;
  --k:1;                                   /* time scale: shorter on a second visit in the same session */
  --land-h:max(300px,18.33cqw);            /* height of the 2400x440 landscape frame */
  --hz:calc(var(--land-h)*.568);           /* horizon, measured up from the bottom of the hero */
  --sun-y:calc(var(--land-h)*.691);        /* centre of the risen sun */
  --sun-d:calc(var(--land-h)*.25);         /* sun diameter */
  --sun-end:0px;--sun-warm-end:.16;
  --glow-end:1;--rays-end:.5;--cloud-end:1;--reflect-end:1;--mist-end:.42;--ripple:.6;
  --glow-1:rgba(255,244,224,.95);--glow-2:rgba(255,218,172,.58);--glow-3:rgba(252,206,170,.22);
  --ray:rgba(255,244,224,.55);
  --cloud:255,252,247;--cloud-warm:251,212,184;
  --mist:255,253,249;
  --bird:#58737c;
  --land-from:brightness(.82) saturate(.72) hue-rotate(16deg);
  --land-filter:none;
  background:#e9ece6;
}
@supports not (width:1cqw){.home-hero{--land-h:max(300px,18.33vw)}}
.home-hero.dawn-again{--k:.35}
.home-hero::after{height:clamp(56px,8%,110px)}
.home-hero-in{padding-bottom:calc(var(--land-h)*.86 + 6px)}
/* The hero spans the whole page (meta 'top' in render_page). On computers the headline sits on one line,
   so the sun is still in view on a laptop screen without scrolling. */
@media (min-width:1100px){
  .home-hero-in{padding-top:clamp(48px,8vh,100px)}
  .home-hero h1{max-width:none;font-size:clamp(56px,5.6vw,96px);text-wrap:balance}
}

.dawn{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.dawn>*,.dawn-water>*{position:absolute}

/* ---------- sky: day underneath, dawn and first light fade away on top ---------- */
.dawn-sky{inset:0}
.dawn-sky.is-day{background:linear-gradient(to top,#f4dcc7 0,#f6e3d1 var(--hz),#f5e9dd calc(var(--hz) + 130px),#e7eeea calc(var(--hz) + 400px),#d0e3eb 100%)}
.dawn-sky.is-dawn{background:linear-gradient(to top,#f5b88f 0,#f7c29c var(--hz),#efc3b4 calc(var(--hz) + 150px),#dcc2d2 calc(var(--hz) + 380px),#b3bedc 100%);
  opacity:0;animation:dawn-out calc(9s*var(--k)) ease-in-out calc(1.6s*var(--k)) both}
.dawn-sky.is-night{background:linear-gradient(to top,#eab7a0 0,#e7b4a2 var(--hz),#cdb6c9 calc(var(--hz) + 160px),#aeb3d0 calc(var(--hz) + 380px),#929fc6 100%);
  opacity:0;animation:dawn-out calc(5.5s*var(--k)) ease-in-out calc(.2s*var(--k)) both}
@keyframes dawn-out{from{opacity:1}}

/* ---------- the sun's warmth on the sky, breathing slowly once it is up ---------- */
.dawn-glow{left:50%;bottom:var(--sun-y);width:calc(var(--land-h)*3.3);height:calc(var(--land-h)*2.3);translate:-50% 50%;
  transform:translateY(var(--sun-end));opacity:var(--glow-end);
  animation:dawn-glow calc(9.5s*var(--k)) cubic-bezier(.33,.04,.3,1) calc(.4s*var(--k)) both}
.dawn-glow i{position:absolute;inset:0;border-radius:50%;
  background:radial-gradient(closest-side,var(--glow-1),var(--glow-2) 30%,var(--glow-3) 60%,transparent);
  animation:dawn-breathe 10s ease-in-out calc(9s*var(--k)) infinite}
@keyframes dawn-glow{from{transform:translateY(calc(var(--land-h)*.3)) scale(.45);opacity:.2}}
@keyframes dawn-breathe{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.06);opacity:.84}}

/* ---------- soft rays, turning about once every five minutes ---------- */
.dawn-rays{left:50%;bottom:var(--sun-y);width:calc(var(--land-h)*3.4);aspect-ratio:1;translate:-50% 50%;
  transform:translateY(var(--sun-end));opacity:var(--rays-end);
  -webkit-mask:radial-gradient(closest-side,#000 6%,rgba(0,0,0,.45) 34%,transparent 72%);
  mask:radial-gradient(closest-side,#000 6%,rgba(0,0,0,.45) 34%,transparent 72%);
  animation:dawn-rays-in calc(8s*var(--k)) ease-in-out calc(3.5s*var(--k)) both}
.dawn-rays i{position:absolute;inset:0;border-radius:50%;animation:dawn-turn 300s linear infinite;
  background:conic-gradient(from 0deg,transparent 0 6deg,var(--ray) 9deg,transparent 12deg 25deg,var(--ray) 27deg,transparent 30deg 48deg,
    var(--ray) 52deg,transparent 57deg 70deg,var(--ray) 72deg,transparent 74deg 95deg,var(--ray) 99deg,transparent 104deg 122deg,
    var(--ray) 125deg,transparent 128deg 150deg,var(--ray) 154deg,transparent 158deg 178deg,var(--ray) 181deg,transparent 185deg 203deg,
    var(--ray) 207deg,transparent 212deg 230deg,var(--ray) 232deg,transparent 235deg 258deg,var(--ray) 262deg,transparent 267deg 290deg,
    var(--ray) 293deg,transparent 296deg 318deg,var(--ray) 322deg,transparent 327deg 345deg,var(--ray) 348deg,transparent 352deg)}
@keyframes dawn-rays-in{from{opacity:0;transform:translateY(calc(var(--land-h)*.12))}}
@keyframes dawn-turn{to{transform:rotate(1turn)}}

/* ---------- clouds, drifting a little over minutes ---------- */
.dawn-clouds{inset:0;opacity:var(--cloud-end);animation:dawn-clouds-in calc(8s*var(--k)) ease-out calc(.6s*var(--k)) both}
.dawn-clouds i{position:absolute;display:block;border-radius:50%;
  background:radial-gradient(closest-side,rgba(var(--cloud),.92),rgba(var(--cloud),.5) 52%,rgba(var(--cloud),0)),
             radial-gradient(closest-side at 50% 72%,rgba(var(--cloud-warm),.6),rgba(var(--cloud-warm),0));
  animation:dawn-drift 110s ease-in-out infinite alternate}
.dawn-clouds i:nth-child(1){top:9%;left:-8%;width:46%;height:56px}
.dawn-clouds i:nth-child(2){top:17%;left:62%;width:48%;height:62px;animation-duration:140s;animation-direction:alternate-reverse}
.dawn-clouds i:nth-child(3){top:31%;left:74%;width:32%;height:40px;animation-duration:95s}
.dawn-clouds i:nth-child(4){top:40%;left:-6%;width:30%;height:38px;animation-duration:125s;animation-direction:alternate-reverse}
@keyframes dawn-clouds-in{from{opacity:.25}}
@keyframes dawn-drift{from{transform:translateX(-4cqw)}to{transform:translateX(5cqw)}}

/* ---------- a few birds crossing high up, now and then ---------- */
.dawn-birds{inset:0}
.dawn-bird{position:absolute;left:100%;width:20px;height:9px;color:var(--bird);opacity:0;animation:dawn-fly 80s linear calc(5s*var(--k)) infinite}
.dawn-bird svg{display:block;width:100%;height:100%;overflow:visible;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;
  animation:dawn-flap 3.4s ease-in-out infinite}
.dawn-bird.b1{top:9%}
.dawn-bird.b2{top:11.5%;width:15px;height:7px;animation-duration:86s;animation-delay:calc(7.5s*var(--k))}
.dawn-bird.b2 svg{animation-delay:-1.1s}
.dawn-bird.b3{top:6%;width:17px;height:8px;animation-duration:118s;animation-delay:38s}
@keyframes dawn-fly{0%{transform:translate(0,0);opacity:0}3%,60%{opacity:.7}100%{transform:translate(calc(-100cqw - 60px),-40px);opacity:0}}
@keyframes dawn-flap{0%,44%,100%{transform:scaleY(1)}8%,24%{transform:scaleY(.35)}16%,32%{transform:scaleY(1.05)}}

/* ---------- the sun: rises from behind the hills, warm orange cooling to pale gold ---------- */
.dawn-sun{left:50%;bottom:var(--sun-y);width:var(--sun-d);aspect-ratio:1;translate:-50% 50%;
  animation:dawn-climb 120s linear calc(9.6s*var(--k)) both}
.dawn-sun i{position:absolute;inset:0;border-radius:50%;
  background:radial-gradient(circle at 50% 50%,#fffef9 0,#fff6e4 38%,#ffe5bd 72%,#ffd096 100%);
  box-shadow:0 0 calc(var(--sun-d)*.3) calc(var(--sun-d)*.06) rgba(255,212,158,.85),0 0 calc(var(--sun-d)*1.1) calc(var(--sun-d)*.28) rgba(255,198,148,.42);
  transform:translateY(var(--sun-end));
  animation:dawn-rise calc(9.2s*var(--k)) cubic-bezier(.33,.04,.3,1) calc(.4s*var(--k)) both}
.dawn-sun i::after{content:"";position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle at 50% 42%,#ffd2a0,#f49a63);
  opacity:var(--sun-warm-end);animation:dawn-warm calc(8.5s*var(--k)) ease-out calc(.6s*var(--k)) both}
@keyframes dawn-rise{from{transform:translateY(calc(var(--land-h)*.3))}}
@keyframes dawn-warm{from{opacity:.95}}
@keyframes dawn-climb{to{transform:translateY(calc(var(--land-h)*-.03))}}

/* ---------- hills, lake and the near bank (still drawings, lit by a filter) ---------- */
.dawn-land,.dawn-front{left:0;bottom:0;width:100%;height:var(--land-h);display:block;overflow:visible;
  filter:var(--land-filter);animation:dawn-land calc(7s*var(--k)) ease-out calc(.2s*var(--k)) both}
@keyframes dawn-land{from{filter:var(--land-from)}}
.dawn-sway{transform-box:fill-box;transform-origin:50% 100%;animation:dawn-sway 7s ease-in-out var(--d,0s) infinite alternate}
@keyframes dawn-sway{from{transform:rotate(-2.5deg)}to{transform:rotate(2.5deg)}}

/* ---------- the water: the sun's path of light, ripples and morning mist ---------- */
.dawn-water{left:0;right:0;bottom:0;height:var(--hz)}
.dawn-reflect{left:50%;top:0;width:calc(var(--land-h)*.62);height:calc(var(--land-h)*.57);translate:-50% 0;opacity:var(--reflect-end);
  -webkit-mask:linear-gradient(#000 55%,transparent);mask:linear-gradient(#000 55%,transparent);
  animation:dawn-reflect-in calc(8s*var(--k)) ease-in-out calc(2.2s*var(--k)) both}
.dawn-reflect::before{content:"";position:absolute;inset:0 12%;background:radial-gradient(50% 70% at 50% 0,rgba(255,216,166,.6),rgba(255,216,166,0))}
.dawn-reflect svg{position:absolute;inset:0;width:100%;height:100%;fill:#ffe6c2}
.dawn-reflect .ra{animation:dawn-shimmer-a 3.4s ease-in-out infinite alternate}
.dawn-reflect .rb{animation:dawn-shimmer-b 4.6s ease-in-out infinite alternate}
@keyframes dawn-reflect-in{from{opacity:0;transform:scaleX(.4)}}
@keyframes dawn-shimmer-a{from{transform:scaleX(.88) translateX(-1.5%);opacity:.65}to{transform:scaleX(1.08) translateX(1.5%);opacity:1}}
@keyframes dawn-shimmer-b{from{transform:scaleX(1.06) translateX(1%);opacity:1}to{transform:scaleX(.9) translateX(-1%);opacity:.6}}
.dawn-ripples{inset:0;color:#fff;opacity:var(--ripple)}
.dawn-ripples svg{position:absolute;inset:0;width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round}
.dawn-ripples path{vector-effect:non-scaling-stroke}
.dawn-ripples .r1{animation:dawn-drift 24s ease-in-out infinite alternate}
.dawn-ripples .r2{opacity:.7;animation:dawn-drift 32s ease-in-out infinite alternate-reverse}
.dawn-mist{top:0;width:75%;height:calc(var(--land-h)*.16);translate:0 -55%;opacity:var(--mist-end);
  animation:dawn-mist-in calc(10s*var(--k)) ease-in-out calc(2.5s*var(--k)) both}
.dawn-mist.m1{left:-12%}
.dawn-mist.m2{right:-14%}
.dawn-mist i{position:absolute;inset:0;border-radius:50%;
  background:radial-gradient(closest-side,rgba(var(--mist),.85),rgba(var(--mist),.4) 50%,rgba(var(--mist),0));
  animation:dawn-drift 46s ease-in-out infinite alternate}
.dawn-mist.m2 i{animation-duration:58s;animation-direction:alternate-reverse}
@keyframes dawn-mist-in{from{opacity:1}}
/* rings on the water when the bowl is struck (added by dawn.js) */
.dawn-ring{left:50%;top:calc(var(--land-h)*.07);width:8px;height:2px;translate:-50% -50%;border-radius:50%;
  border:1.5px solid rgba(255,255,255,.85);opacity:0;animation:dawn-ring 5s cubic-bezier(.2,.6,.3,1) both}
@keyframes dawn-ring{0%{width:8px;height:2px;opacity:.9}100%{width:calc(var(--land-h)*1.3);height:calc(var(--land-h)*.13);opacity:0}}

.dawn-motes{inset:0;width:100%;height:100%}

/* ---------- the words arrive softly, as if out of the mist ---------- */
.home-hero-in>*{animation:dawn-text calc(1.2s*var(--k)) cubic-bezier(.2,.7,.2,1) both}
.home-hero-in>:nth-child(1){animation-delay:.05s}
.home-hero-in>:nth-child(2){animation-delay:.2s}
.home-hero-in>:nth-child(3){animation-delay:.4s}
.home-hero-in>:nth-child(4){animation-delay:.55s}
.home-hero-in>:nth-child(5){animation-delay:.7s}
.home-hero-in>:nth-child(6){animation-delay:.85s}
.home-hero-in>:nth-child(7){animation-delay:1s}
.home-hero h1{animation-name:dawn-text-soft}
@keyframes dawn-text{from{opacity:0;transform:translateY(14px)}}
@keyframes dawn-text-soft{from{opacity:0;transform:translateY(10px);filter:blur(8px)}}
/* the first sunlight passes once across "calm" */
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .home-hero h1 em{padding:0 .12em;margin:0 -.12em;
    background:linear-gradient(105deg,var(--accent) 0 38%,#e7a46f 46%,#f6cf9d 50%,#e7a46f 54%,var(--accent) 62% 100%) 100% 0/320% 100% no-repeat;
    -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;
    animation:dawn-calm calc(2.8s*var(--k)) ease-in-out calc(3s*var(--k)) both}
}
@keyframes dawn-calm{from{background-position:100% 0}to{background-position:0 0}}

/* ---------- "Play calm sounds" ---------- */
.dawn-sound{position:absolute;z-index:3;top:16px;right:16px;display:inline-flex;align-items:center;gap:10px;min-height:46px;padding:8px 18px 8px 8px;
  border:1px solid color-mix(in srgb,var(--ink) 12%,transparent);border-radius:999px;background:color-mix(in srgb,var(--surface) 72%,transparent);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);color:var(--ink);font:600 15.5px/1.1 var(--font);cursor:pointer;
  box-shadow:0 8px 24px -14px rgba(30,42,47,.45);transition:background .3s,box-shadow .3s,transform .15s}
.dawn-sound[hidden]{display:none}
.dawn-sound:hover{background:color-mix(in srgb,var(--surface) 94%,transparent);box-shadow:0 12px 28px -14px rgba(30,42,47,.5)}
.dawn-sound:active{transform:translateY(1px)}
.dawn-sound:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.dawn-sound-ic{position:relative;display:grid;place-items:center;width:30px;height:30px;flex:none;border-radius:50%;background:var(--accent);color:#fff}
.dawn-sound-ic svg{width:17px;height:17px}
.dawn-sound .eq{display:none;align-items:flex-end;gap:2px;height:13px}
.dawn-sound .eq b{display:block;width:3px;height:40%;border-radius:2px;background:currentColor;animation:dawn-eq 1.4s ease-in-out infinite alternate}
.dawn-sound .eq b:nth-child(2){animation-duration:1.1s;animation-delay:-.4s}
.dawn-sound .eq b:nth-child(3){animation-duration:1.7s;animation-delay:-.8s}
.dawn-sound[data-on="1"] .ic-play{display:none}
.dawn-sound[data-on="1"] .eq{display:flex}
@keyframes dawn-eq{from{height:30%}to{height:100%}}
/* a slow invitation ring, a few times, then it rests */
.dawn-sound:not([data-on="1"]) .dawn-sound-ic::after{content:"";position:absolute;inset:-5px;border-radius:50%;border:2px solid var(--accent);opacity:0;
  animation:dawn-invite 5s ease-out 4s 4}
@keyframes dawn-invite{0%{transform:scale(.8);opacity:.6}70%,100%{transform:scale(1.35);opacity:0}}
/* the same switch, kept at hand while the sounds play and the hero is scrolled away */
.dawn-sound.dawn-float{position:fixed;top:auto;right:auto;left:18px;bottom:18px;z-index:69;opacity:0;visibility:hidden;transform:translateY(10px);
  transition:opacity .4s,transform .4s,visibility 0s .4s}
.dawn-sound.dawn-float.on{opacity:1;visibility:visible;transform:none;transition:opacity .4s,transform .4s,visibility 0s}

@media (max-width:640px){
  .dawn-sound{top:12px;right:12px;font-size:15px;padding-right:15px}
  .dawn-clouds i:nth-child(n){height:40px}
}

/* ---------- evening theme: the sun only just lifts into a deep blue dawn ---------- */
:root[data-theme="dark"] .home-hero{
  --sun-end:calc(var(--land-h)*.1);--sun-warm-end:.75;
  --glow-end:.8;--rays-end:.14;--cloud-end:.28;--reflect-end:.55;--mist-end:.2;--ripple:.14;
  --glow-1:rgba(255,196,150,.55);--glow-2:rgba(220,140,110,.25);--glow-3:rgba(160,100,110,.1);
  --ray:rgba(255,214,170,.4);--cloud:150,164,190;--cloud-warm:190,140,140;--mist:170,180,200;--bird:#a3b6be;
  --land-from:brightness(.3) saturate(.7) hue-rotate(0deg);--land-filter:brightness(.42) saturate(.85) hue-rotate(-8deg);
  background:#101a22}
:root[data-theme="dark"] .dawn-sky.is-day{background:linear-gradient(to top,#3d3140 0,#4b3743 var(--hz),#383450 calc(var(--hz) + 140px),#212b3e calc(var(--hz) + 360px),#131d28 100%)}
:root[data-theme="dark"] .dawn-sky.is-dawn{background:linear-gradient(to top,#2f2a3b 0,#3a2f3f var(--hz),#2c2d45 calc(var(--hz) + 160px),#1a2333 calc(var(--hz) + 360px),#0f1821 100%)}
:root[data-theme="dark"] .dawn-sky.is-night{background:linear-gradient(to top,#1c2130 0,#212637 var(--hz),#171e2c calc(var(--hz) + 200px),#0e151d 100%)}
:root[data-theme="dark"] .dawn-sound-ic{color:#0f191d}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .home-hero{
    --sun-end:calc(var(--land-h)*.1);--sun-warm-end:.75;
    --glow-end:.8;--rays-end:.14;--cloud-end:.28;--reflect-end:.55;--mist-end:.2;--ripple:.14;
    --glow-1:rgba(255,196,150,.55);--glow-2:rgba(220,140,110,.25);--glow-3:rgba(160,100,110,.1);
    --ray:rgba(255,214,170,.4);--cloud:150,164,190;--cloud-warm:190,140,140;--mist:170,180,200;--bird:#a3b6be;
    --land-from:brightness(.3) saturate(.7) hue-rotate(0deg);--land-filter:brightness(.42) saturate(.85) hue-rotate(-8deg);
    background:#101a22}
  :root:not([data-theme="light"]) .dawn-sky.is-day{background:linear-gradient(to top,#3d3140 0,#4b3743 var(--hz),#383450 calc(var(--hz) + 140px),#212b3e calc(var(--hz) + 360px),#131d28 100%)}
  :root:not([data-theme="light"]) .dawn-sky.is-dawn{background:linear-gradient(to top,#2f2a3b 0,#3a2f3f var(--hz),#2c2d45 calc(var(--hz) + 160px),#1a2333 calc(var(--hz) + 360px),#0f1821 100%)}
  :root:not([data-theme="light"]) .dawn-sky.is-night{background:linear-gradient(to top,#1c2130 0,#212637 var(--hz),#171e2c calc(var(--hz) + 200px),#0e151d 100%)}
  :root:not([data-theme="light"]) .dawn-sound-ic{color:#0f191d}
}

/* ---------- off screen: everything rests ---------- */
.home-hero.dawn-paused .dawn *,.home-hero.dawn-paused .dawn *::after{animation-play-state:paused!important}

/* ---------- reduced motion: the morning, still ---------- */
@media (prefers-reduced-motion:reduce){
  .dawn *,.dawn *::after,.home-hero-in>*,.home-hero h1,.home-hero h1 em,.dawn-sound *,.dawn-sound *::after{animation:none!important}
  .dawn-birds,.dawn-motes{display:none}
}
@media print{.dawn,.dawn-sound{display:none}}