/* SipLogger homepage scenes, page-local. The scroll-craft engine
   (scrollcraft.css/js) stays untouched; it is themed here from the Indigo
   tokens so light and dark mode follow the site's theme file. */
:root,
html[data-theme] {
  --sc-canvas: var(--paper);
  --sc-surface: var(--surface);
  --sc-ink: var(--ink);
  --sc-ink-soft: var(--muted);
  --sc-accent: var(--accent);
  --sc-accent-ink: var(--cta-ink);
  --sc-font-display: var(--font-display);
  --sc-font-text: var(--font-body);
  --sc-shadow-color: 250 50% 12%;
}
html { scroll-behavior: auto; }

/* The site header is sticky: a pinned stage sits BELOW it (landing.js
   publishes --hdr on :root), and slides up under it when its act ends. */
.sc-act--pinned .sc-stage { top: var(--hdr, 0px); height: calc(100vh - var(--hdr, 0px)); height: calc(100svh - var(--hdr, 0px)); }
/* The act's scroll length, reserved before the engine sets the same
   span * 100vh, so nothing below it jumps when the scripts arrive (CLS). */
.day-act { height: 360vh; }

/* ------------------------------------------------------------- the phone --
   Apple's iPhone 17 bezel (Black), used as is: never moved, tilted, scaled,
   shadowed or cropped. Only real 1206x2622 screens go in the slot.
   --sx/--sy/--sw/--sh place the screen inside the device box as fractions,
   --sr is the screen corner radius as a fraction of the device width:
   screen 1206x2622 at 72,69 in the 1350x2760 bezel. */
.phone {
  position: relative; width: 100%; aspect-ratio: 0.4891; --pw: 15rem;
  --sx: 0.05333; --sy: 0.025; --sw: 0.89333; --sh: 0.95; --sr: 0.139;
}
.phone__screen {
  position: absolute; overflow: hidden; background: #000;
  /* bleed 2px under the bezel's black ring: an exact fit leaves a hairline of
     page showing where both curved edges are antialiased */
  --bleed: 2px;
  left: calc(var(--sx) * 100% - var(--bleed)); top: calc(var(--sy) * 100% - var(--bleed));
  width: calc(var(--sw) * 100% + 2 * var(--bleed)); height: calc(var(--sh) * 100% + 2 * var(--bleed));
  border-radius: calc(var(--sr) * var(--pw) + var(--bleed));
}
.phone__screen img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: fill; }
img.phone__frame { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; pointer-events: none; }

/* ------------------------------------------------------------- the hero -- */
.hero-grid { align-items: center; }
.hero-visual { height: auto; display: flex; justify-content: center; padding: clamp(2rem, 1rem + 3vw, 4rem) 0; }
.hero-phone { width: auto; height: min(74vh, 640px); --pw: calc(min(74vh, 640px) * 0.4891); }
/* styles.css centres and shadows the old hero picture (.hero-visual img);
   the bezel and its screen keep their own box, and no shadow (Apple's rules) */
.hero-visual .phone img { left: 0; top: 0; transform: none; filter: none; width: 100%; }

/* ------------------------------------- the evening, as a curve (#how) --
   A large example estimated curve draws as you scroll, inside its +-20% band;
   the three drinks land as markers, then the peak, then the way back to
   baseline. The phone beside it never moves; its screen follows the evening
   (no session, adding a drink, the Live Activity, the history). Opacity and a
   clip only: nothing slides, nothing parallaxes. */
.day-act { height: 600vh; }
.day-intro { padding: var(--section) 0 0; }
.day-intro .section-head { margin-bottom: 0; }
.day-stage { display: flex; align-items: center; }
.day-stage__grid { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto; gap: 2.25rem 4.5rem; align-items: center; width: 100%; }
.curve-wrap { grid-column: 1; grid-row: 1; margin: 0; min-width: 0; }
.curve { display: block; width: 100%; height: auto; overflow: visible; }
.curve__base { stroke: var(--line); stroke-width: 2; vector-effect: non-scaling-stroke; }
.curve__tick { fill: var(--muted); font: 500 20px var(--font-body); text-anchor: middle; }
.curve__band { fill: var(--accent); opacity: .2; }
.curve__line { fill: none; stroke: var(--accent-ink); stroke-width: 5; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.curve__drink line { stroke: var(--muted); stroke-width: 1.5; stroke-dasharray: 3 5; vector-effect: non-scaling-stroke; opacity: .6; }
.curve__drink circle { fill: var(--ink); }
.curve__tag, .curve__mark text { fill: var(--ink); font: 650 22px var(--font-body); }
.curve__tag { text-anchor: start; }
.curve__mark text { font-weight: 600; text-anchor: start; }
.curve__zero text { text-anchor: end; }
.curve__mark .curve__time { font-size: 30px; font-weight: 700; font-variant-numeric: tabular-nums; }
.curve__mark circle { fill: var(--paper); stroke: var(--accent-ink); stroke-width: 4; vector-effect: non-scaling-stroke; }
.curve__drink, .curve__mark { opacity: 0; transition: opacity 320ms var(--sc-ease-out); }
.curve__drink.is-on, .curve__mark.is-on { opacity: 1; }
.curve__now { fill: var(--accent-ink); stroke: var(--paper); stroke-width: 3; vector-effect: non-scaling-stroke; }
/* the evening's clock, running with the drawing (the Live Activity's big type) */
.curve__clock { margin: 0 0 -3.2rem; text-align: right; font: 700 clamp(3rem, 2rem + 4vw, 5.5rem)/1 var(--font-display); letter-spacing: -0.04em; font-variant-numeric: tabular-nums; color: var(--ink); position: relative; z-index: 1; pointer-events: none; }
.day-act:not(.sc-act--pinned) .curve__clock { display: none; }
.curve__note { margin-top: .6rem; font-size: .875rem; color: var(--muted); }
/* without the engine the drawing is complete */
.day-act:not(.sc-act--pinned) .curve__drink, .day-act:not(.sc-act--pinned) .curve__mark { opacity: 1; }
.day-act:not(.sc-act--pinned) .curve__now { display: none; }

.day-steps { grid-column: 1; grid-row: 2; list-style: none; margin: 0; padding: 0; display: grid; gap: 1.5rem; max-width: 40rem; }
.day-step { max-width: none; }
.day-step h3 { font-size: clamp(1.2rem, 1rem + .8vw, 1.6rem); letter-spacing: -0.025em; transition: color 260ms var(--sc-ease-out); }
.day-step p { margin-top: .5rem; color: var(--muted); font-size: 1rem; transition: opacity 260ms var(--sc-ease-out); }
/* pinned: the three headings in one row, the paragraphs stacked in one cell
   sized to the longest and switched by opacity, so nothing changes height */
.sc-act--pinned .day-steps { grid-template-columns: repeat(3, auto); justify-content: start; gap: .6rem 1.75rem; }
.sc-act--pinned .day-step { display: contents; }
.sc-act--pinned .day-step h3 { grid-row: 1; }
.sc-act--pinned .day-step p { grid-row: 2; grid-column: 1 / -1; margin-top: 0; }
.sc-act--pinned .day-step:not(.is-on) h3 { color: var(--muted); }
.sc-act--pinned .day-step:not(.is-on) p { opacity: 0; visibility: hidden; }

.day-phone { grid-column: 2; grid-row: 1 / 3; width: auto; height: min(76vh, 640px); --pw: calc(min(76vh, 640px) * 0.4891); }
.day-screen { opacity: 0; }
.day-screen:first-child { opacity: 1; }
.day-act + .section { border-top: 1px solid var(--line); }

@media (max-width: 760px) {
  .hero-visual { padding: .5rem 0 2.5rem; }
  .hero-phone { height: auto; width: min(62vw, 280px); --pw: min(62vw, 280px); }
  /* phones: the curve across the top, then the phone with the captions beside it */
  .day-stage { align-items: flex-start; }
  .day-stage__grid { grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto; gap: 1rem 1rem; padding-top: .75rem; align-items: start; }
  .curve-wrap { grid-column: 1 / -1; }
  .curve__tick { font-size: 26px; }
  .curve__tag, .curve__mark text { font-size: 30px; }
  .curve__note { font-size: .8rem; margin-top: .3rem; }
  .curve__clock { font-size: 2.4rem; margin-bottom: -1.6rem; }
  .day-phone { grid-column: 1; grid-row: 2; --ph: min(40svh, 320px, calc(100svh - var(--hdr, 0px) - 64vw - 2.5rem)); height: var(--ph); --pw: calc(var(--ph) * 0.4891); }
  .day-steps { grid-column: 2; grid-row: 2; gap: .6rem; }
  .sc-act--pinned .day-steps { grid-template-columns: 1fr; gap: .25rem; }
  .sc-act--pinned .day-step h3 { grid-row: auto; font-size: 1.05rem; }
  .sc-act--pinned .day-step p { grid-row: 4; grid-column: 1; margin-top: .45rem; font-size: .86rem; line-height: 1.42; }
}
/* short phone screens (SE-class Safari with its bars): no room for curve, phone
   and caption together; the curve and the caption carry the scene */
@media (max-width: 760px) and (max-height: 620px) {
  .day-phone { display: none; }
  .day-steps { grid-column: 1 / -1; }
  .sc-act--pinned .day-steps { grid-template-columns: repeat(3, auto); justify-content: start; gap: .3rem 1.1rem; }
  .sc-act--pinned .day-step h3 { grid-row: 1; }
  .sc-act--pinned .day-step p { grid-row: 2; grid-column: 1 / -1; }
}

/* the carousel shows bare screens: round them like the display (corner radius
   15.6% of the screen width), not like the old App Store artwork */
.marquee img { aspect-ratio: 804 / 1748; border-radius: 15.6% / 7.2%; background: #000; }