/* 19 Everyday — four footers, four ways for the day to end.
   --fp is scroll progress into the footer (0 as it enters, 1 once fully in view). */
.endings{position:relative;--fp:0;--mx:50%;--my:50%}
.ending[hidden]{display:none}
.ending{position:relative;overflow:hidden;isolation:isolate}
.ending-links{display:flex;flex-wrap:wrap;gap:12px 32px;font-size:15px}
.ending-links a{text-decoration:none;background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;padding-bottom:3px;transition:background-size .45s var(--ease)}
.ending-links a:hover,.ending-links a:focus-visible{background-size:100% 1px}
.ending-small{font-size:11px;opacity:.7}

/* ---------- Picker: quiet, inside the footer ---------- */
.ending-picker{position:relative;z-index:5;display:flex;flex-wrap:wrap;align-items:center;gap:4px 6px;padding:18px 0 120px;font-size:12px}
.ending-picker .mono{font-size:10px;opacity:.6;margin-right:8px}
.ending-picker button{border:0;background:transparent;padding:6px 10px;border-radius:999px;cursor:pointer;opacity:.62;transition:opacity .2s,background .2s}
.ending-picker button:hover{opacity:1}
.ending-picker button[aria-pressed=true]{opacity:1;background:color-mix(in srgb,currentColor 12%,transparent)}
.endings[data-footer=nightfall] .ending-picker,.endings[data-footer=dial] .ending-picker,.endings[data-footer=curtain] .ending-picker{color:var(--on-dark)}
.endings[data-footer=nightfall],.endings[data-footer=dial],.endings[data-footer=curtain]{background:var(--night)}
.endings[data-footer=signature]{background:var(--page)}

/* ---------- 1 Nightfall ---------- */
.nightfall{min-height:max(720px,100svh);background:var(--night);color:var(--on-dark);display:flex;flex-direction:column;justify-content:flex-start}
.nf-dusk{position:absolute;inset:0;z-index:-2;opacity:calc(1 - var(--fp) * .92);
  background:linear-gradient(180deg,var(--page) 0%,#f1d7c4 16%,#d7a0a8 34%,#7d5d8c 55%,#2b2440 74%,var(--night) 100%)}
.nf-moon{position:absolute;z-index:-1;right:14%;top:18%;width:clamp(70px,8vw,120px);aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle at 38% 38%,#fbf4e8,#e9dccb 55%,#cbbca8);box-shadow:0 0 80px 20px #f6ead633;
  opacity:var(--fp);transform:translateY(calc((1 - var(--fp)) * 90px))}
.nf-stars{position:absolute;inset:0 0 30% 0;z-index:-1;opacity:calc(var(--fp) * 1.2 - .2);transform:translate3d(calc(var(--px,0) * 10px),calc(var(--py,0) * 6px),0);transition:transform .8s var(--ease)}
.nf-stars i{position:absolute;width:var(--s);height:var(--s);border-radius:50%;background:#fbf4e8;opacity:.8;animation:twinkle var(--d) ease-in-out var(--delay) infinite alternate}
@keyframes twinkle{from{opacity:.15}to{opacity:.95}}
.nf-copy{padding-top:clamp(120px,16vh,200px);display:grid;gap:26px;justify-items:center;text-align:center;opacity:calc(var(--fp) * 1.6 - .3);transform:translateY(calc((1 - var(--fp)) * 40px))}
.nf-clock{display:flex;gap:12px;align-items:center;color:#f0e9dfcc}
.nf-clock .dot{width:7px;height:7px;border-radius:50%;background:var(--accent-soft);box-shadow:0 0 14px var(--accent-soft)}
.nf-line{font-size:clamp(24px,2.6vw,38px);letter-spacing:-.025em;line-height:1.2;max-width:24ch}
.nightfall .ending-links{justify-content:center;margin-top:10px;color:#f0e9dfd9}
.nf-horizon{position:relative;margin-top:auto;height:clamp(110px,16vw,240px);overflow:hidden;border-bottom:1px solid #f0e9df2e}
.nf-horizon:before{content:'';position:absolute;left:0;right:0;bottom:0;height:60%;background:radial-gradient(ellipse at 50% 100%,color-mix(in srgb,var(--accent-soft) 26%,transparent),transparent 70%);opacity:var(--fp)}
.nf-mark{position:absolute;left:var(--gutter);right:var(--gutter);bottom:-2%;height:100%;background:linear-gradient(180deg,#f9f2e8,#f9f2e8 55%,color-mix(in srgb,var(--accent-soft) 70%,#f9f2e8));
  -webkit-mask:url('../assets/site-img/enchant-wordmark-2026.svg') center bottom/contain no-repeat;mask:url('../assets/site-img/enchant-wordmark-2026.svg') center bottom/contain no-repeat;
  transform:translateY(calc((1 - var(--fp)) * 100%))}
.nightfall .ending-small{padding-top:16px;color:#f0e9df99}

/* ---------- 2 Signature ---------- */
.signature{background:var(--page);color:var(--ink);padding:clamp(80px,9vw,140px) 0 0}
.sig-top{display:flex;justify-content:space-between;align-items:end;gap:32px;flex-wrap:wrap}
.sig-line{font-size:clamp(28px,3.2vw,48px);letter-spacing:-.03em;line-height:1.1;max-width:18ch}
.sig-copy{display:grid;gap:6px;text-align:left;border:1px solid var(--line);background:var(--sand);border-radius:14px;padding:14px 18px;cursor:copy;transition:background .2s,border-color .2s,transform .2s var(--ease)}
.sig-copy:hover{background:var(--sand-deep);border-color:#33312c44}
.sig-copy:active{transform:scale(.98)}
.sig-copy .mono{font-size:10px;color:var(--muted)}
.sig-mail{font-size:20px;letter-spacing:-.01em}
.sig-copy.copied .mono{color:var(--accent)}
.sig-mark{margin-top:clamp(56px,7vw,100px);aspect-ratio:1254/200;width:100%;
  background:radial-gradient(circle at var(--mx) var(--my),var(--accent) 0,var(--accent) 9%,color-mix(in srgb,var(--accent) 45%,var(--ink)) 20%,var(--ink) 34%);
  -webkit-mask:url('../assets/site-img/enchant-wordmark-2026.svg') center/contain no-repeat;mask:url('../assets/site-img/enchant-wordmark-2026.svg') center/contain no-repeat;
  clip-path:inset(calc((1 - var(--fp)) * 100%) 0 0 0)}
.sig-foot{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;border-top:1px solid var(--line);margin-top:clamp(28px,3vw,44px);padding-top:24px}
.signature .ending-small{color:var(--muted);opacity:1}
.endings[data-footer=signature] .ending-picker{color:var(--ink)}

/* ---------- 3 Dial ---------- */
.dial{background:var(--night);color:var(--on-dark);padding:clamp(96px,10vw,150px) 0 0}
.dial-head{display:flex;justify-content:space-between;align-items:end;gap:28px;flex-wrap:wrap}
.dial-title{font-size:clamp(34px,4.2vw,64px);font-weight:400;letter-spacing:-.04em;line-height:1.02;max-width:16ch}
.dial-track{position:relative;margin-top:clamp(64px,8vw,110px);height:250px}
.dial-sky{position:absolute;left:0;right:0;top:0;width:100%;height:150px;overflow:visible}
.dial-arc{fill:none;stroke:#f0e9df33;stroke-width:1;stroke-dasharray:3 6;vector-effect:non-scaling-stroke}
.dial-body{fill:var(--accent-soft);filter:drop-shadow(0 0 14px var(--accent-soft));transition:cx 1s var(--ease),cy 1s var(--ease)}
.dial-body.moon{fill:#f0e9df}
.dial-line{position:absolute;left:0;right:0;top:150px;height:1px;background:linear-gradient(90deg,#f0e9df10,#f0e9df55 25%,#f0e9df55 80%,#f0e9df10);transform-origin:left;transform:scaleX(var(--fp))}
.dial-moments li{position:absolute;top:150px;left:calc(var(--at) * 100%);transform:translateX(-50%)}
.dial-moments button{position:relative;display:grid;justify-items:center;gap:3px;padding:14px 6px 6px;border:0;background:none;color:inherit;cursor:pointer;text-align:center;opacity:calc(var(--fp) * 1.4 - .2)}
.dial-moments button:before{content:'';position:absolute;top:-5px;left:50%;width:9px;height:9px;margin-left:-4.5px;border-radius:50%;background:var(--on-dark);box-shadow:0 0 0 4px var(--night);transition:transform .3s var(--ease)}
.dial-moments button:hover:before,.dial-moments button:focus-visible:before,.dial-moments .active button:before{transform:scale(1.6)}
.dial-moments .mono{font-size:10px;color:var(--dim-dark)}
.dial-moments b{font-weight:400;font-size:15px;white-space:nowrap}
.dial-moments button>span:last-child{font-size:13px;color:var(--dim-dark);white-space:nowrap;max-height:0;opacity:0;overflow:hidden;transition:max-height .35s var(--ease),opacity .35s}
.dial-moments button:hover>span:last-child,.dial-moments button:focus-visible>span:last-child,.dial-moments .active button>span:last-child,.dial-moments .open button>span:last-child{max-height:20px;opacity:1}
.dial-moments li:nth-child(even) button{padding:6px 6px 14px;transform:translateY(-100%);margin-top:-2px}
.dial-moments li:nth-child(even) button:before{top:auto;bottom:-6px}
.dial-moments .open b,.dial-moments .open button>span:last-child{color:var(--accent-soft)}
.dial-moments .open button:before{background:var(--accent-soft);animation:slot 2.4s ease-in-out infinite}
@keyframes slot{0%,100%{box-shadow:0 0 0 4px var(--night),0 0 0 6px color-mix(in srgb,var(--accent-soft) 0%,transparent)}50%{box-shadow:0 0 0 4px var(--night),0 0 0 12px color-mix(in srgb,var(--accent-soft) 35%,transparent)}}
.dial-hours{position:absolute;left:0;right:0;top:232px;display:flex;justify-content:space-between;font-size:10px;color:#f0e9df66}
.dial-now{position:absolute;top:118px;left:calc(var(--now,.5) * 100%);height:64px;width:1px;background:linear-gradient(transparent,var(--accent-soft),transparent);transition:left 1s var(--ease)}
.dial-now span{display:none}
.dial-caption{margin-top:10px;color:var(--dim-dark);font-size:17px}
.dial-foot{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;border-top:1px solid var(--line-dark);margin-top:clamp(56px,6vw,90px);padding-top:24px;color:#f0e9dfd9}

/* ---------- 4 Curtain ---------- */
.endings[data-footer=curtain]{position:sticky;bottom:0;z-index:0}
html:has(.endings[data-footer=curtain]) main{position:relative;z-index:1;background:var(--page);box-shadow:0 30px 60px -30px #0008}
.curtain{height:calc(100svh - 150px);min-height:520px;max-height:780px;color:#fff;display:flex;flex-direction:column;justify-content:space-between}
.ct-film{position:absolute;inset:0;z-index:-2;transform:scale(calc(1.12 - var(--fp) * .12))}
.ct-film img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1.8s ease}
.ct-film img.on{opacity:1}
.ct-shade{position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,#151515b3,#15151573 45%,#151515e6)}
.ct-copy{padding-top:clamp(56px,9vh,110px);display:grid;justify-items:start;gap:20px}
.ct-title{font-size:clamp(60px,10vw,160px)}
.ct-line{font-size:clamp(19px,1.7vw,24px);max-width:30ch;color:#f0e9dfe6}
.ct-magnet{display:inline-grid;place-items:center;margin-top:10px;width:clamp(150px,13vw,190px);aspect-ratio:1;border-radius:50%;background:var(--accent-soft);color:var(--night);text-decoration:none;font-weight:500;font-size:15px;text-align:center;padding:24px;
  transform:translate(var(--tx,0),var(--ty,0));transition:transform .5s cubic-bezier(.2,.9,.3,1.3),background .3s}
.ct-magnet span{transform:translate(calc(var(--tx,0) * .35),calc(var(--ty,0) * .35));transition:transform .5s cubic-bezier(.2,.9,.3,1.3)}
.ct-magnet:hover{background:#fff}
.ct-foot{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;padding-bottom:6px;color:#f0e9dfd9}
.ct-mark{width:130px;filter:brightness(0) invert(.93)}

@media(max-width:700px){
  .nf-horizon{height:96px}
  .sig-mail{font-size:17px}
  .dial-track{height:170px}
  .dial-sky{height:90px}
  .dial-line{top:90px}
  .dial-moments li{top:90px}
  .dial-now{top:60px}
  .dial-hours{top:150px}
  .dial-moments b,.dial-moments .mono{display:none}
  .dial-moments .active b,.dial-moments .active .mono,.dial-moments .open b,.dial-moments .open .mono{display:block}
  .dial-moments button>span:last-child{display:none}
  .dial-moments .active button>span:last-child{display:block}
  .ending-picker{padding-bottom:150px}
  .curtain{height:calc(100svh - 190px)}
}
@media(prefers-reduced-motion:reduce){
  .endings{--fp:1!important}
  .nf-stars i,.dial-moments .open button:before{animation:none}
}
.motion-paused .nf-stars i,.motion-paused .dial-moments .open button:before{animation-play-state:paused}

/* The fixed review bars sit over the picker's bottom padding; curtain keeps its picker compact so the pinned footer fits the screen. */
.endings[data-footer=curtain] .ending-picker{padding:14px 0 96px}

/* ---------- 5 Now: the Bay Area sky at this minute (Kasane Today palette) ---------- */
.endings[data-footer=now]{background:var(--now-bottom,#151515)}
.now{min-height:max(680px,92svh);display:flex;flex-direction:column;justify-content:space-between;color:var(--now-ink,#f0e9df);transition:color .8s var(--ease)}
.now-sky{position:absolute;inset:0;z-index:-3;background:linear-gradient(180deg,var(--now-top) 0%,var(--now-mid) 50%,var(--now-bottom) 100%);transition:background 1s}
.now-mesh{position:absolute;inset:-10%;background:
  radial-gradient(40% 35% at 22% 18%,color-mix(in srgb,var(--now-top) 70%,#fff),transparent 70%),
  radial-gradient(45% 40% at 80% 25%,color-mix(in srgb,var(--now-top) 80%,#ffb38a),transparent 70%),
  radial-gradient(50% 45% at 55% 60%,color-mix(in srgb,var(--now-mid) 80%,#c7a8ff),transparent 70%);
  opacity:.55;animation:now-drift 38s ease-in-out infinite alternate}
@keyframes now-drift{0%{transform:translate3d(-2%,0,0) scale(1)}50%{transform:translate3d(2%,-2%,0) scale(1.04)}100%{transform:translate3d(-1%,2%,0) scale(1.02)}}
.now-stars{position:absolute;inset:0 0 35% 0;z-index:-2;opacity:var(--now-night,0);transition:opacity 1s}
.now-stars i{position:absolute;width:var(--s);height:var(--s);border-radius:50%;background:#fbf4e8;animation:twinkle var(--d) ease-in-out var(--delay) infinite alternate}
.now-body{position:absolute;z-index:-1;width:clamp(90px,10vw,150px);aspect-ratio:1;border-radius:50%;left:calc(var(--bx,50) * 1%);top:calc(var(--by,30) * 1%);transform:translate(-50%,-50%);transition:left 1s,top 1s,background 1s,box-shadow 1s}
.now-body.sun{background:radial-gradient(circle at 50% 45%,#fff6e0,#ffd99a 45%,#f4a86a 72%,#f4a86a00 73%);box-shadow:0 0 140px 50px #f6b77a55}
.now-body.moon{background:radial-gradient(circle at 38% 38%,#fbf4e8,#e9dccb 55%,#cbbca8);box-shadow:0 0 90px 24px #f6ead633}
.now-copy{padding-top:clamp(110px,14vh,170px);display:grid;gap:22px;justify-items:start}
.now-clock{opacity:.75}
.now-line{font-size:clamp(34px,4.4vw,68px);letter-spacing:-.035em;line-height:1.06;max-width:18ch}
.now-act{display:flex;flex-wrap:wrap;align-items:center;gap:14px 26px;margin-top:10px}
.now-mail{font-size:16px;text-decoration:underline;text-underline-offset:4px}
.now.is-night .button{background:#f0e9df;color:#151515}
.now-foot{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;padding-top:clamp(56px,8vh,100px)}
.now-mark{width:120px;filter:brightness(0)}
.now.is-night .now-mark{filter:brightness(0) invert(.93)}
.endings[data-footer=now] .ending-picker{color:var(--now-ink,#f0e9df)}
@media(prefers-reduced-motion:reduce){.now-mesh,.now-stars i{animation:none}}

/* Nightfall's one call to action: a moonlit pill */
.nf-cta{margin-top:14px;display:inline-flex;align-items:center;gap:12px;min-height:52px;padding:12px 24px 12px 16px;border-radius:999px;border:1px solid #f0e9df40;background:#f0e9df12;backdrop-filter:blur(10px);color:#f0e9df;text-decoration:none;font-size:16px;letter-spacing:-.005em;
  box-shadow:0 0 0 0 #f6ead600;transition:background .45s var(--ease),color .45s var(--ease),border-color .45s,box-shadow .6s var(--ease),transform .45s var(--ease)}
.nf-cta .moon{width:22px;height:22px;border-radius:50%;background:radial-gradient(circle at 38% 38%,#fbf4e8,#e9dccb 55%,#cbbca8);box-shadow:0 0 14px 3px #f6ead655;transition:transform .6s cubic-bezier(.2,.9,.3,1.3)}
.nf-cta:hover,.nf-cta:focus-visible{background:#f3ead8;color:#151515;border-color:#f3ead8;box-shadow:0 0 60px 8px #f6ead640;transform:translateY(-2px)}
.nf-cta:hover .moon,.nf-cta:focus-visible .moon{transform:rotate(-20deg) scale(1.08);box-shadow:0 0 0 0 #0000}

/* ---------- Nightfall, merged with the invitation (2026-09-23) ----------
   One tall ending: the invitation on the light of dusk, then night with our "right now" line,
   then the wordmark rising over the horizon. The gradient is fixed to the footer's height so
   dark text stays on light sky and light text on night. */
.nightfall{min-height:0;justify-content:flex-start;padding-bottom:0}
.nf-dusk{opacity:1;background:linear-gradient(180deg,var(--page) 0%,var(--page) 22%,#f4dfcf 32%,#ebbfb2 41%,#c98f9f 50%,#7d5d8c 60%,#3a2f52 70%,#1e1a2a 80%,var(--night) 90%)}
.nf-invite{padding:clamp(120px,14vw,200px) 0 clamp(90px,10vw,150px);display:grid;gap:30px;justify-items:start;color:var(--ink)}
.nf-invite h2{font-size:clamp(46px,7vw,112px);max-width:16ch}
.nf-invite p{max-width:44ch;font-size:clamp(19px,1.6vw,22px);line-height:1.5}
.nf-invite .button{margin-top:6px;min-height:54px;padding:14px 28px;font-size:16px;background:var(--night);color:#fff}
.nf-invite .button:hover{background:#33312c;box-shadow:0 10px 30px -10px #1515158c}
.nf-stars{inset:52% 0 18% 0}
.nf-moon{top:60%;right:12%}
.nf-copy{padding-top:clamp(160px,22vw,300px);opacity:calc(var(--fp) * 1.5 - .2)}
.nf-line{max-width:26ch}
.nf-horizon{margin-top:clamp(90px,10vw,150px)}
@media(max-width:700px){.nf-moon{top:57%;right:8%}.nf-copy{padding-top:140px}}

/* With one ending, the footer ends at the horizon line and © (room kept for the fixed review switcher). */
.nightfall .ending-small{padding-bottom:110px}
.nf-cta .orb.sun{background:radial-gradient(circle at 50% 45%,#fff6e0,#ffd99a 45%,#f4a86a 80%);box-shadow:0 0 14px 3px #f6b77a66}

/* ---------- The footer sky follows the SF Bay Area clock (2026-09-24) ----------
   JS sets --sky-a/b/c (top → horizon), --sky-night (0 day … 1 night), --sky-ink, --mark-ink,
   and moves the orb along an arc from left to right: the sun by day, a crescent moon by night.
   ?at=HH:MM previews any time. */
.nightfall{background:var(--sky-c,var(--night))}
.nf-dusk{background:linear-gradient(180deg,var(--page) 0%,var(--page) 20%,var(--sky-a,#3a2f52) 40%,var(--sky-b,#1e1a2a) 64%,var(--sky-c,var(--night)) 92%)}
.nf-stars{opacity:calc((var(--fp) * 1.2 - .2) * var(--sky-night,1))}
.nf-copy{position:relative;color:var(--sky-ink,#f0e9df)}
.nf-clock{color:color-mix(in srgb,var(--sky-ink,#f0e9df) 80%,transparent)}
.nf-arc{position:absolute;left:0;right:0;top:clamp(24px,4vw,56px);height:calc(clamp(160px,22vw,300px) - clamp(64px,9vw,120px));pointer-events:none}
.nf-orb{position:absolute;left:var(--ox,80%);top:var(--oy,40%);width:clamp(44px,5vw,76px);aspect-ratio:1;margin:calc(clamp(44px,5vw,76px) / -2) 0 0 calc(clamp(44px,5vw,76px) / -2);border-radius:50%;transition:left 1.2s var(--ease),top 1.2s var(--ease)}
.nf-orb.sun{background:radial-gradient(circle at 50% 45%,#fffbe6 0%,#ffe27a 38%,#ffc93c 72%,#f6b22e 100%);box-shadow:0 0 60px 18px #ffd65a55,0 0 140px 50px #ffd65a22}
.nf-orb.sun.low{background:radial-gradient(circle at 50% 45%,#fff1d6 0%,#ffc27a 40%,#f59a55 78%,#ec7f45 100%);box-shadow:0 0 60px 20px #f7a35a55,0 0 150px 60px #f28a5a22}
.nf-orb.moon{background:radial-gradient(circle at 35% 35%,#fffdf6,#f1ede2 60%,#dcd6c8);box-shadow:0 0 50px 10px #f6f1e433;
  -webkit-mask:radial-gradient(circle at 72% 36%,transparent 43%,#000 45%);mask:radial-gradient(circle at 72% 36%,transparent 43%,#000 45%)}
.nf-mark{background:var(--mark-ink,#f9f2e8)}
.nf-horizon{border-bottom-color:color-mix(in srgb,var(--sky-ink,#f0e9df) 18%,transparent)}
.nightfall .ending-small{color:color-mix(in srgb,var(--sky-ink,#f0e9df) 60%,transparent);padding-bottom:calc(40px + env(safe-area-inset-bottom))}
.endings.is-day .nf-cta{border-color:#33312c40;background:#ffffff59;color:#33312c}
.endings.is-day .nf-cta:hover,.endings.is-day .nf-cta:focus-visible{background:#33312c;color:#f9f2e8;border-color:#33312c;box-shadow:0 10px 30px -12px #33312c80}
.endings.is-day .nf-clock .dot{background:#f6b22e;box-shadow:0 0 12px #f6b22e}
@media(max-width:700px){.nf-arc{top:20px;height:92px}}
@media(prefers-reduced-motion:reduce){.nf-orb{transition:none}}
.nf-clock,.nf-line{text-shadow:0 0 14px var(--sky-halo,transparent),0 0 2px var(--sky-halo,transparent)}
/* Crossover legibility (Codex, PR #11): the note button carries its own near-opaque backing, and © follows the horizon ink. */
.nf-cta{background:rgba(22,20,34,.72);border-color:#f0e9df33;color:#f0e9df}
.endings.is-day .nf-cta{background:rgba(255,250,242,.86);border-color:#33312c33;color:#33312c}
.nightfall .ending-small{opacity:1;color:var(--mark-ink,#f9f2e8);text-shadow:0 0 10px var(--mark-halo,transparent),0 0 2px var(--mark-halo,transparent)}