/* ============================================================
   21 TEAS — "One Day at Table 21" · Direction B (Quiet Heritage)
   One world seen from the tea-house counter; scrolling moves time.
   Three objects, two hills, the brand wave once at full scale,
   hairline outlines, lots of air. JS writes the day's state into
   CSS variables on .day (see js/home.js).
   ============================================================ */

.day {
  --hdr: 102px;
  --read: calc(var(--hdr) + 84px);
  --counter-h: 26vh;
  --clu: 30vh;
  --ink: #273A30;
  --sky-a: #EDAE86; --sky-b: #F7E4CC;
  --sun-x: 10%; --sun-y: 54%; --sun-c: #F2C27C; --sun-r: 9vmin;
  --stars: 0; --lit: 0; --steam: .9; --clear: 0;
  --shadow-x: 20px; --shadow-sx: 1.6; --shadow-o: .16;
  --tilt: 0deg; --fill: 0; --pour: 0; --pourlen: 0; --q2: 0; --q3: 0; --wind: 0deg;
  --mood: #fff; --mood-a: 0; --hr: 180deg; --mn: 0deg;
  position: relative;
  display: grid;
  margin-top: calc(-1 * var(--hdr));
  background: var(--sky-b);
  color: var(--ink);
}
.stage { grid-area: 1 / 1; position: sticky; top: 0; height: 100vh; overflow: hidden; z-index: 1; }
.chapters { grid-area: 1 / 1; position: relative; z-index: 2; pointer-events: none; }

/* ---------- sky ---------- */
.sky { position: absolute; inset: 0; background: linear-gradient(180deg, var(--sky-a) 0%, var(--sky-b) 72%); }
.sky-mood { position: absolute; inset: 0; background: var(--mood); opacity: var(--mood-a); mix-blend-mode: multiply; transition: opacity .6s ease, background .6s ease; }
.stars { position: absolute; left: 0; top: 0; width: 100%; height: 60vh; opacity: var(--stars); }
.stars .tw { animation: twinkle 3.4s ease-in-out infinite; }
.stars .tw-2 { animation-delay: 1.1s; animation-duration: 4.1s; }
.stars .tw-3 { animation-delay: 2.2s; animation-duration: 2.9s; }
.sun {
  position: absolute; left: var(--sun-x); top: var(--sun-y);
  width: var(--sun-r); height: var(--sun-r); border-radius: 50%;
  background: var(--sun-c); transform: translate(-50%, -50%);
  box-shadow: 0 0 90px 44px color-mix(in srgb, var(--sun-c) 32%, transparent);
}

/* ---------- hills ---------- */
.far { position: absolute; left: 0; bottom: var(--counter-h); width: 100%; height: 26vh; }
.hill-far  { fill: color-mix(in srgb, #A9B99F 78%, var(--sky-b)); }
.hill-near { fill: color-mix(in srgb, #C4CFB6 82%, var(--sky-b)); }

/* ---------- counter ---------- */
.counter { position: absolute; left: 0; right: 0; bottom: 0; height: var(--counter-h); }
.c-top { position: absolute; left: 0; right: 0; top: 0; height: 26px; background: #3F5A48; border-top: 4px solid var(--ink); }
.c-front { position: absolute; left: 0; right: 0; top: 30px; bottom: 0; background: #522C2E; overflow: hidden; }
.c-wave { position: absolute; left: 0; right: 0; top: 0; width: 100%; height: 100%; }

/* ---------- still life (fixed clusters, one scale, hairlines) ---------- */
.obj { position: absolute; }
.obj.cupset, .obj.kettleset { bottom: calc(var(--counter-h) + 2px); width: auto; }
.kettleset { right: 3%; height: var(--clu); }
.cupset { left: calc(39% - var(--clu) * .3); height: calc(var(--clu) * .68); }
.day { --rack-l: calc(39% + var(--clu) * .3 + 1.2vw); --rack-r: calc(3% + var(--clu) * 1.3 + 1vw); }
.rack {
  position: absolute; bottom: calc(var(--counter-h) + 2px);
  left: var(--rack-l); width: calc(100% - var(--rack-l) - var(--rack-r));
  height: var(--rack-h, 8vh);
}
.obj path, .obj ellipse, .obj circle, .rack path { vector-effect: non-scaling-stroke; }
.shadow { fill: rgba(39, 58, 48, var(--shadow-o)); transform-box: fill-box; transform-origin: 50% 50%; transform: translateX(var(--shadow-x)) scaleX(var(--shadow-sx)); }

.k-body { transform: rotate(var(--tilt)); transform-origin: 300px 236px; }
.pourglass .stream { pathLength: 1; stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--pourlen)); opacity: calc(var(--pour) * 1.4); }
.pourglass .stream-hi { opacity: calc(var(--pour) * .8); }
.pourglass .fill, .pourglass .splash { transform: translateY(calc(var(--fill) * -100px)); }
.pourglass .splash { opacity: calc(var(--pour) * .9); }

.steam path { stroke-dasharray: 60; stroke-dashoffset: 60; animation: hsteam 2.8s ease-in-out infinite; opacity: 0; }
.steam path:nth-child(2) { animation-delay: .8s; }
.k-steam { opacity: var(--steam); transform: skewX(var(--wind)); transform-box: fill-box; transform-origin: 50% 100%; transition: transform .4s ease; }
.c-steam { opacity: calc(var(--steam) * .8); }
.c-steam path { animation-delay: .3s; }

/* the ten blends */
.rack .glass {
  --gv: clamp(0, calc((var(--q2) - var(--d, 0)) * 6), 1);
  opacity: calc(var(--gv) * (1 - var(--clear, 0)));
  cursor: pointer;
}
.rack .grev { transform: translateY(calc((1 - var(--gv)) * 20px)); }
.rack .gl { transition: transform .28s cubic-bezier(.3, 1.4, .5, 1); transform-box: fill-box; transform-origin: 50% 100%; }
.rack .glass:hover .gl, .rack .glass.active .gl { transform: translateY(-7px) rotate(-4deg); }
.rack .g-steam path { stroke-dasharray: 40; stroke-dashoffset: 40; animation: hsteam 2.8s ease-in-out infinite; opacity: 0; }
.rack .glass:nth-child(2n) .g-steam path { animation-delay: .5s; }
.rack .glass:nth-child(3n) .g-steam path { animation-delay: 1.3s; }

/* ---------- trim + clock ---------- */
.trim { position: absolute; left: 0; right: 0; top: var(--hdr); height: 14px; background: #C96F45; z-index: 3; }
.trim::after {
  content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 14px;
  background:
    radial-gradient(circle at 50% 0, #F3E7D2 0 11.5px, transparent 12.5px) 0 0 / 26px 14px repeat-x,
    radial-gradient(circle at 50% 0, rgba(39,58,48,.55) 0 12.8px, transparent 13.8px) 0 0 / 26px 14px repeat-x;
}
.clock { right: 14%; top: calc(var(--hdr) + 14px); width: clamp(54px, 5.4vw, 80px); z-index: 4; }
.clock .h-hour { transform: rotate(var(--hr)); transform-origin: 40px 60px; }
.clock .h-min  { transform: rotate(var(--mn)); transform-origin: 40px 60px; }
.clock .c-day { opacity: calc(.85 * (1 - var(--stars))); }
.clock .c-night { opacity: calc(.85 * var(--stars)); }

/* ---------- chapters ---------- */
.ch { min-height: 125vh; display: flex; align-items: flex-start; padding: 0 var(--pad); }
.ch-inner {
  position: sticky; top: var(--read);
  pointer-events: auto; max-width: 620px;
  opacity: var(--vis, 1);
  transform: translateY(calc((1 - var(--vis, 1)) * 32px));
  will-change: opacity, transform;
}
.ch-inner.center { text-align: center; margin: 0 auto; max-width: 760px; }
.ch-1 .ch-inner { top: calc(var(--hdr) + 96px); max-width: 780px; }
.ch-2, .ch-3 { min-height: 130vh; }
.ch-4 { min-height: 100vh; }
.ch-4 .ch-inner { top: calc(var(--hdr) + 110px); }

.hero-text { text-align: left; }
.eyebrow { font-family: var(--font-mono); font-size: .7rem; letter-spacing: .22em; text-transform: uppercase; color: var(--terra-deep); }
.hero-title { font-family: var(--font-display); font-weight: 500; font-size: clamp(2.5rem, 5vw, 4.5rem); line-height: 1; letter-spacing: -.015em; margin: 12px 0 14px; color: var(--ink); }
.hero-title .swap-word { display: inline-block; font-style: italic; font-weight: 470; color: var(--terra); }
.lead { font-size: clamp(1rem, 1.2vw, 1.15rem); line-height: 1.5; color: var(--ink-soft); max-width: 40em; }
.ctas { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 20px; }
.ch-inner.center .ctas { justify-content: center; }
.scrollhint { margin: 16px 0 0; font-family: var(--font-mono); font-size: .62rem; letter-spacing: .18em; text-transform: uppercase; color: var(--ink); opacity: .5; }
.scrollhint .arrow { display: inline-block; animation: bob 1.3s ease-in-out infinite alternate; }

.ch-title { font-family: var(--font-display); font-weight: 500; font-size: clamp(2.3rem, 5vw, 4.6rem); line-height: 1.02; letter-spacing: -.015em; margin: 14px 0 16px; color: var(--ink); }
.ch-title em { font-style: italic; font-weight: 470; color: var(--terra-deep); }
.ch-3 .ch-inner { max-width: 680px; }
.timer { display: flex; align-items: center; gap: 16px; margin: 14px 0 6px; }
.timer svg { width: 72px; flex-shrink: 0; }
.timer .lead { font-family: var(--font-display); font-style: italic; }
.badges { display: flex; gap: 8px; flex-wrap: wrap; margin: 10px 0 4px; }
.badge { font-family: var(--font-mono); font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; padding: .55em 1.1em; border-radius: 999px; border: 1px solid rgba(39,58,48,.45); color: var(--ink); }

.bill { color: var(--cream); }
.bill-logo { height: clamp(72px, 7vw, 96px); margin: 0 auto; }
.bill-mono { width: min(460px, 88vw); margin: 14px auto 0; font-family: var(--font-mono); font-size: .74rem; color: color-mix(in srgb, var(--cream) 80%, transparent); }
.bill-mono .wr-rule { border-top-color: color-mix(in srgb, var(--cream) 30%, transparent); }
.bill .we-row .r-dots { border-bottom-color: color-mix(in srgb, var(--cream) 35%, transparent); }
.bill .we-thanks { margin-top: 18px; font-size: clamp(1.2rem, 2.2vw, 1.7rem); }
.bill .we-links { margin-top: 18px; }
.bill .we-copy { margin-top: 8px; }
.bill .btn.ghost { color: var(--cream); border-color: var(--cream); }
.ch-4 .eyebrow { color: #D9A47C; }

/* ---------- motion ---------- */
@keyframes hsteam { 0% { stroke-dashoffset: 60; opacity: 0; } 30% { opacity: .95; } 75%, 100% { stroke-dashoffset: -20; opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .stars .tw, .steam path, .rack .g-steam path, .scrollhint .arrow { animation: none !important; }
}

/* ---------- mobile ---------- */
@media (max-width: 760px) {
  .day { --counter-h: 21vh; --clu: 19vh; --read: calc(var(--hdr) + 96px); }
  .far { height: 22vh; }
  .kettleset { right: 2%; }
  .cupset { left: 3%; height: calc(var(--clu) * .6); }
  .day { --rack-l: calc(3% + var(--clu) * .53 + 2vw); --rack-r: calc(2% + var(--clu) * 1.3 + 2vw); }
  .trim { height: 10px; }
  .trim::after { height: 11px; background:
    radial-gradient(circle at 50% 0, #F3E7D2 0 8.5px, transparent 9.5px) 0 0 / 20px 11px repeat-x,
    radial-gradient(circle at 50% 0, rgba(39,58,48,.55) 0 9.8px, transparent 10.8px) 0 0 / 20px 11px repeat-x; }
  .clock { right: 5%; top: calc(var(--hdr) + 10px); width: 46px; }
  .ch { min-height: 120vh; padding-left: 18px; padding-right: 18px; }
  .ch-1 .ch-inner { top: var(--read); }
  .ch-2, .ch-3 { min-height: 125vh; }
  .ch-4 { min-height: 100vh; }
  .ch-4 .ch-inner { top: calc(var(--hdr) + 84px); }
  .hero-title { font-size: 2.5rem; margin: 10px 0 12px; }
  .lead { font-size: 1rem; }
  .ctas { gap: 8px; margin-top: 16px; }
  .ch .ctas .btn { padding: .78em 1.1em; font-size: .68rem; letter-spacing: .08em; }
  .scrollhint { display: none; }
  .ch-title { font-size: 2.1rem; }
  .badges { display: none; }
  .timer { gap: 12px; margin: 8px 0 2px; }
  .timer svg { width: 56px; }
  .timer .lead { font-size: .9rem; }
  .bill-logo { height: 64px; }
  .bill-mono { font-size: .62rem; margin-top: 8px; }
  .bill .we-thanks { font-size: 1.1rem; margin-top: 10px; }
  .bill .we-visit { font-size: .62rem; }
  .bill .we-links { font-size: .74rem; gap: 8px; margin-top: 10px; }
  .bill .we-copy { font-size: .6rem; margin-top: 6px; }
}