/* Ambient light is CSS-only: the journal artwork contains a complete glass
   and must not be enlarged into a scene background.
   Homepage scene materials. Product controls and scroll geometry stay in
   style.css/demo.css; every environmental effect is a non-interactive layer. */
.home-page {
  --coast-chalk: #eff0e6;
  --coast-roof: #ad6247;
  --coast-tide: #a9cecb;
  --coast-night: #102e34;
  --coast-lamp: #ffe7b3;
}
.home-page .hero-stage { background: radial-gradient(ellipse at 48% 40%, #f8fcf4, #deedeb 62%, #c6dfdf); }
.home-page .hero-stage::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse at 20% 12%, #ffffffa6, transparent 55%);
  opacity: .25; mask-image: linear-gradient(#000, #000b 52%, transparent);
}
.home-page .hero-stage::after { content: ''; position: absolute; left: -10%; right: -10%; bottom: -21%; height: 35%; border-radius: 50% 50% 0 0; background: #ffffff38; pointer-events: none; z-index: -1; }
.home-page .water-light { opacity: .24; }
.home-page .nav { border-bottom: 1px solid #315e6515; }
@media (min-width: 601px) and (max-width: 700px) {
  .home-page .nav { column-gap: 10px; }
  .home-page .home-menu-links { column-gap: 12px; }
}
.home-page .nav-download { gap: 10px; }

/* The counter line is measured from the phone, so its room extends into the
   surrounding page instead of floating above an unrelated solid colour. */
.home-page .story-stage {
  isolation: isolate; --scene-phone-x: 73%; --scene-phone-y: 50%;
  --scene-phone-top: 15%; --scene-phone-height: 70vh;
  --scene-counter-y: calc(var(--scene-phone-top) + var(--scene-phone-height) * .62);
  background: var(--coast-chalk); transition: background-color 600ms ease, color 600ms ease;
}
.home-page .story-atmosphere { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.home-page .story-atmosphere > div { position: absolute; pointer-events: none; }
.home-page .story-wall {
  inset: 0; background: radial-gradient(ellipse at 84% 18%, #91c4ca5c, transparent 48%), linear-gradient(100deg, #f3f2e9 10%, #e5e8db 65%, #bdd7d1);
  transition: opacity 600ms ease;
}
.home-page .story-window-light {
  inset: -20% -18% -20% 46%; transform: skewX(-23deg) rotate(-5deg);
  background: linear-gradient(90deg, transparent 14%, #fffdf3b0 14.3% 37%, #657e6c16 37.2% 39%, #fffdf36b 39.3% 66%, transparent 66.3%), linear-gradient(transparent 56%, #73857712 56.4% 57%, transparent 57.4%);
  mask-image: linear-gradient(transparent, #000 25%, #000a 60%, transparent 90%);
  opacity: .7; transition: opacity 600ms ease;
}
.home-page .story-surface {
  inset: var(--scene-counter-y) 0 0;
  background: linear-gradient(#ecede7cc, #e7ebe0d9), url('/assets/web-20261028/demo-bar-bg.webp') center bottom / 100% auto no-repeat;
  border-top: 1px solid #ffffffe0;
  box-shadow: 0 -16px 40px #fffcdf22, inset 0 30px 70px #6b89800c;
  transition: top 600ms ease, opacity 600ms ease;
}
.home-page .story-wet {
  inset: 0; opacity: 0;
  background: radial-gradient(ellipse 22% 9% at var(--scene-phone-x) 88%, #f2fbf0b3, #7bb6b250 50%, transparent 72%), radial-gradient(ellipse 34% 12% at var(--scene-phone-x) 78%, #b4ded83d, transparent 75%);
  mask-image: radial-gradient(ellipse 55% 65% at var(--scene-phone-x) var(--scene-phone-y), #000b, transparent 90%);
  transition: opacity 1.2s ease;
}
.home-page .story-stage.is-wet .story-wet { opacity: .8; transition-duration: 160ms; }
.home-page .story-stage[data-coast-chapter='1'] { --scene-counter-y: calc(var(--scene-phone-top) + var(--scene-phone-height) * .28); background: #f0ebdc; }
.home-page .story-stage[data-coast-chapter='1'] .story-wall { background: radial-gradient(ellipse at 84% 20%, #ecd7a16b, transparent 55%), linear-gradient(105deg, #f4f0e3, #e8e7d8 70%, #c8d7c5); }
.home-page .story-celebration-glow { inset: 0; opacity: 0; background: radial-gradient(ellipse 38% 65% at var(--scene-phone-x) var(--scene-phone-y), #ffe6a27a, transparent 80%); transition: opacity 900ms ease; }
.home-page .story-stage.is-celebrating .story-celebration-glow { opacity: 1; transition-duration: 140ms; }
/* Continue lifting the counter as the night scene arrives; falling back to
   chapter 0's height makes the outgoing surface move against the scroll. */
.home-page .story-stage[data-coast-chapter='2'] { --scene-counter-y: calc(var(--scene-phone-top) - var(--scene-phone-height) * .06); background: #24494e; color: #edf2e5; --muted: #b8ceca; --line: #d5e3d438; }
.home-page .story-stage[data-coast-chapter='2'] .story-wall {
  background: radial-gradient(ellipse at var(--scene-phone-x) var(--scene-phone-y), #618f8980, transparent 65%), repeating-linear-gradient(0deg, transparent 0 79px, #b1d2c506 80px), repeating-linear-gradient(90deg, transparent 0 79px, #b1d2c506 80px), linear-gradient(#315d60, #183c43);
}
.home-page .story-stage[data-coast-chapter='2'] :is(.story-window-light,.story-surface) { opacity: 0; }
.home-page .story-stage[data-coast-chapter='2'] .story-wet { opacity: 0; }
.home-page .story-harbor-signal { left: var(--scene-phone-x); top: var(--scene-phone-y); width: max(68vw, 580px); aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; opacity: 0; background: radial-gradient(ellipse, #bceef033 12%, #e7fff26b 30%, #99e4dc30 48%, transparent 70%); transition: opacity 700ms ease; }
.home-page .is-harbor-lit .story-harbor-signal { animation: harbor-bloom 1.6s ease-out both; }
@keyframes harbor-bloom { 0% { scale: .3; opacity: 0; } 22% { opacity: .95; } 100% { scale: 1.65; opacity: 0; } }
.home-page .story-harbor-signal::before, .home-page .story-harbor-signal::after { content: ''; position: absolute; inset: 15%; border: 1px solid #d1e1b85c; border-radius: 50%; opacity: 0; }
.home-page .is-harbor-lit .story-harbor-signal::before { animation: harbor-ring 1.6s ease-out both; }
.home-page .is-harbor-lit .story-harbor-signal::after { animation: harbor-ring 1.4s 150ms ease-out both; }
@keyframes harbor-ring { from { scale: .45; opacity: .8; } to { scale: 1.6; opacity: 0; } }
.home-page .story-effects { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 6; }
/* Continuous fine foam frames both sides of the phone. */
.home-page .story-foam { position: absolute; inset: 0; z-index: 6; overflow: hidden; pointer-events: none; }
.home-page .story-foam-spill { position: absolute; transform: translate(-50%, -100%); pointer-events: none; }
.home-page .phone-halo { display: none; }
.home-page .phone { box-shadow: 18px 40px 38px -28px #193b3b7a, 0 8px 14px #233e4514; }
.home-page .story-copy::before { content: ''; display: block; width: 40px; height: 3px; background: var(--coast-roof); margin-bottom: 28px; }
.home-page .story-step p { font-size: 15px; line-height: 1.95; }
.home-page .story-controls { width: max-content; max-width: 100%; padding: 4px; gap: 4px; border: 1px solid var(--line); border-radius: 30px; background: #fffef329; }
.home-page .story-controls > span { display: none; }
.home-page .story-controls button { min-height: 44px; min-width: 76px; padding: 9px 20px; border-radius: 24px; font-size: 12px; transition: color 160ms ease, background 160ms ease, scale var(--coastal-press); }
.home-page .story-controls button.is-active { background: #315e55; color: #fffbed; }
.home-page .story-stage[data-coast-chapter='2'] .story-controls button.is-active { background: #dfe7d7; color: #24474a; }
.home-page .story-controls button:focus-visible { outline-color: currentColor; outline-offset: 2px; }

/* One lamp, one paper coaster, a long directional shadow. Lighting layers are
   siblings of the 3D object so filters cannot flatten its front/back faces. */
.home-page .memory-section {
  --memory-reveal: 1; --muted: #b7c6bc;
  isolation: isolate; overflow: clip; color: #f0ecda;
  background: radial-gradient(ellipse at 78% 60%, #2f4942, transparent 56%), linear-gradient(145deg, #10272e, #142f33 56%, #081d24);
}
.home-page .memory-section::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse at 75% 20%, #c6e3d3, transparent 65%);
  opacity: .035; mask-image: linear-gradient(#000, transparent 70%);
}
.home-page .memory-heading { z-index: 2; }
.home-page .memory-heading::before { content: ''; display: block; width: 40px; height: 2px; margin-bottom: 28px; background: #d6b67e; }
.home-page .memory-heading h2 { color: #f3eddb; }
.home-page .memory-heading > p:last-child { color: #b7c6bc; }
.home-page .coaster-world { isolation: isolate; }
.home-page .coaster-light {
  position: absolute; z-index: -3; width: 220%; height: 230%; left: -110%; top: -130%; pointer-events: none;
  background: conic-gradient(from 127deg at 0 0, transparent 0deg, #ffeecf08 3deg, #ffe8b333 8deg, #ffe8b329 14deg, #ffeecf08 20deg, transparent 24deg);
  mask-image: linear-gradient(135deg, #000, #000 60%, transparent 95%);
  filter: blur(9px); opacity: calc(.2 + .8 * var(--memory-reveal));
}
.home-page .coaster-world::before {
  content: ''; position: absolute; pointer-events: none; z-index: -2; width: 150%; height: 125%; left: 50%; top: 52%; translate: -50% -50%;
  background: radial-gradient(ellipse, #e9c68a30, #b0985b0f 45%, transparent 72%);
  transform: rotate(-27deg); opacity: var(--memory-reveal);
}
.home-page .coaster-world::after {
  content: ''; position: absolute; z-index: -1; pointer-events: none; left: 53%; top: 69%; width: 93%; height: 31%; border-radius: 50%;
  background: #020c15bf; filter: blur(14px); transform: translate(-30%, 4%) rotate(-22deg); opacity: var(--memory-reveal);
  transition: width 850ms ease, opacity 850ms ease;
}
.home-page .coaster-world:has(.is-flipped)::after { width: 84%; opacity: .8; }
.home-page .coaster-front, .home-page .coaster-back {
  box-shadow: 3px 5px 0 #9b8a69, 5px 8px 0 #514c3b, inset 0 0 0 1px #d6caae, inset 0 0 0 12px #f5f0e2, inset 0 0 0 13px #ddd7c54d;
}
.home-page .coaster-front::after, .home-page .coaster-back::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: linear-gradient(135deg, #fff7d83d, transparent 42%, #5b4b2829); }
.home-page .coaster-back::after { background: linear-gradient(225deg, #fff7d84d, transparent 45%, #113b4529); }
.home-page .hand-note { color: #d8c99f; }
.home-page .flip-hint { color: #a9c1bb; }
.home-page .coaster-tap { filter: drop-shadow(0 2px 3px #0006); }

.home-page .maker-story { margin: 0; padding: clamp(64px, 8vw, 120px) 10vw; column-gap: 8vw; background: #f2f0e6; }
.home-page .maker-intro { position: sticky; top: 56px; }
.home-page .maker-intro::before { content: ''; display: block; width: 40px; height: 3px; background: var(--coast-roof); }
.home-page .maker-intro h2 { margin-top: 28px; }
.home-page .maker-letter { font-size: 15px; line-height: 2.1; }
.home-page .maker-signoff { border-top: 1px solid var(--line); padding-top: 24px; }
.home-page .closing { position: relative; isolation: isolate; overflow: hidden; margin: 0; padding: clamp(80px, 10vw, 140px) 24px; background: #183c43; color: #f3f3e8; }
.home-page .closing::before { content: ''; position: absolute; inset: 0; z-index: -1; background: radial-gradient(ellipse at 70% 100%, #a8cec3, transparent 70%); opacity: .075; mask-image: linear-gradient(transparent, #000); pointer-events: none; }
.home-page .closing h2 { margin-top: 0; }
.home-page .download-button { min-height: 56px; background: #f4f1e6; color: #234a52; border: 1px solid #ffffff88; border-radius: 16px; box-shadow: inset 0 1px #fff, 0 6px 18px -8px #14272d55; transition: transform 160ms ease, scale var(--coastal-press); }
.home-page .download-button:focus-visible { outline-color: #f4f1e6; }
.home-page > footer { background: #183c43; color: #d3e0db; border-top: 1px solid #c3d8d625; }
.home-page > footer > img { filter: brightness(0) invert(1) opacity(.85); }
.home-page > footer a:focus-visible { outline-color: #f4f1e6; }
.home-page .back-to-top { position: fixed; right: max(20px, env(safe-area-inset-right)); bottom: max(20px, env(safe-area-inset-bottom)); z-index: 35; display: grid; place-items: center; width: 48px; height: 48px; border: 1px solid #b5c6be; border-radius: 50%; color: #294c50; background: #f3f2e8; box-shadow: 0 4px 16px #102e3424; transition: background 160ms ease, scale 140ms ease; }
.home-page .back-to-top[hidden] { display: none; }
.home-page .back-to-top svg { width: 23px; height: 23px; }
.home-page .back-to-top:active { scale: .94; }
@media (min-width: 801px) { .home-page > footer { padding-right: max(5vw, 92px); } }
@media (hover: hover) {
  .home-page .back-to-top:hover { background: #dceae3; }
  .home-page .story-controls button:not(.is-active):hover { background: #d8e3d44d; }
}
@media (hover: none) { .home-page .download-button:hover { transform: none; } }
@media (max-width: 600px) {
  .home-page .story-stage { gap: 14px; padding: 24px 24px 28px; }
  .home-page .phone { --phone-width: min(250px, 62vw, calc((100svh - 365px) * .44)); }
  .home-page .story-controls { flex-shrink: 0; margin: 20px auto 0; z-index: 7; }
  .home-page .story-copy::before { margin: 0 auto 18px; width: 28px; }
  .home-page .story-step p { font-size: 11px; line-height: 1.75; }
  .home-page .story-controls { padding: 3px; }
  .home-page .story-controls button { padding: 6px 15px; min-width: 64px; font-size: 11px; }
  .home-page .story-window-light { left: 25%; opacity: .4; }
  .home-page .story-surface { background-size: auto, auto 300%; }
  .home-page .story-wet { background-size: auto 100%; background-position: center; mask-image: linear-gradient(transparent 22%, #0009 65%, #0004); }
  .home-page .memory-heading::before { margin: 0 auto 22px; width: 28px; }
  .home-page .coaster-light { left: -110%; top: -130%; width: 220%; height: 230%; }
  .home-page .coaster-world::before { width: 180%; height: 145%; }
  .home-page .coaster-world::after { width: 86%; height: 24%; top: 69%; filter: blur(10px); }
  .home-page .maker-story { padding: 56px 24px 48px; }
  .home-page .maker-intro { position: static; }
  .home-page .maker-letter { font-size: 14px; }
  .home-page .back-to-top { width: 44px; height: 44px; right: 16px; bottom: max(16px, env(safe-area-inset-bottom)); }
}
@media (prefers-color-scheme: dark) {
  .home-page { --coast-chalk: #203536; }
  .home-page .hero-stage { background: radial-gradient(ellipse at 48% 40%, #315353, #152c32 80%); }
  .home-page .hero-stage::before { opacity: .12; }
  .home-page .hero-stage::after { background: #ffffff06; }
  .home-page .story-wall { background: radial-gradient(ellipse at 84% 18%, #568d8b3d, transparent 55%), linear-gradient(100deg, #203536, #263f3b 70%, #214544); }
  .home-page .story-surface { background: linear-gradient(#233c38ef, #142c2bea), url('/assets/web-20261028/demo-bar-bg.webp') center bottom / 100% auto no-repeat; border-top-color: #779b8545; }
  .home-page .story-window-light { opacity: .1; }
  .home-page .story-stage[data-coast-chapter='1'] { background: #293933; }
  .home-page .story-stage[data-coast-chapter='1'] .story-wall { background: radial-gradient(ellipse at 84% 20%, #bd9b5130, transparent 65%), linear-gradient(105deg, #283731, #243a36); }
  .home-page .story-wet { filter: brightness(.6); }
  .home-page .story-controls button.is-active { background: #cbdbcb; color: #213e39; }
  .home-page .maker-story { background: #223233; }
}
@media (prefers-reduced-motion: reduce) {
  .home-page .story-atmosphere *, .home-page .coaster-world::after { transition: none; animation: none; }
  .home-page .story-effects, .home-page .story-foam { display: none; }
  .home-page .back-to-top:active { scale: 1; }
}
@media (forced-colors: active) {
  .home-page .story-atmosphere, .home-page .coaster-light, .home-page .memory-section::before, .home-page .coaster-world::before, .home-page .coaster-world::after, .home-page .closing::before { display: none; }
  .home-page .memory-section { color: CanvasText; background: Canvas; }
  .home-page .story-controls button.is-active { outline: 2px solid Highlight; }
}
@media print { .home-page .back-to-top, .home-page .story-atmosphere, .home-page .coaster-light { display: none; } .home-page :is(.memory-section,.closing), .home-page > footer { background: white; color: black; } }