/* landing.css — PAGE agent (SPEC §6.5–6.8, §7, §8, §9). Loaded after base.css on
   every page. base.css owns §4/§5, §6.1–6.4, the body[data-phase] sky engine,
   press/focus, and the reduced-motion *base* block (which resets `.reveal`,
   `.rays`, `.img-placeholder`, `[class*="star"]`). This file only adds what the
   remaining sections need — including the reduced-motion resets base.css cannot
   reach (staggered copy children + the is-loaded hero). */

/* ============================================================
   §8.1 scroll reveals + §8.2 hero entrance
   ============================================================ */

/* Initial hidden states are `.js`-scoped: without JavaScript nothing is ever
   hidden, so the page stays fully readable. */
.js .reveal {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}

.reveal.is-in {
  opacity: 1;
  transform: none;
}

/* The copy column reveals its children in a gentle stagger rather than as one
   block, so it opts out of the block fade and animates its direct children. */
.js .section-copy.reveal {
  opacity: 1;
  transform: none;
  transition: none;
}

.js .section-copy.reveal > * {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}

.section-copy.reveal.is-in > * {
  opacity: 1;
  transform: none;
}

.section-copy.reveal.is-in > :nth-child(2) { transition-delay: 60ms; }
.section-copy.reveal.is-in > :nth-child(3) { transition-delay: 120ms; }
.section-copy.reveal.is-in > :nth-child(n + 4) { transition-delay: 180ms; }

/* §8.2 hero entrance — gated on body.is-loaded (JS adds it on DOMContentLoaded).
   The hero is above the fold, so it uses is-loaded instead of the scroll
   observer; its elements carry no `.reveal` class. */
.js .hero-copy > * {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}

/* Opacity-only so the phone keeps its --tilt-r rotation. */
.js .hero-phone {
  opacity: 0;
  transition: opacity var(--dur-base) var(--ease-out);
}

body.is-loaded .hero-copy > * {
  opacity: 1;
  transform: none;
}

body.is-loaded .hero-phone {
  opacity: 1;
}

body.is-loaded .hero-copy > :nth-child(2) { transition-delay: 80ms; }
body.is-loaded .hero-copy > :nth-child(3) { transition-delay: 160ms; }
body.is-loaded .hero-phone { transition-delay: 240ms; }

/* ============================================================
   §8.3 blink · §8.2 rays · §8.5 twinkle · §8.6 the one bounce
   ============================================================ */

.rays {
  transform-box: fill-box;
  transform-origin: 50% 50%;
  animation: rays-rotate 45s linear infinite;
}

@keyframes rays-rotate {
  to { transform: rotate(360deg); }
}

.eyes {
  transform-box: fill-box;
  transform-origin: center 40%;
  transition: transform 70ms ease-out;
}

.blink .eyes {
  transform: scaleY(0.12);
}

.mascot {
  transform-box: fill-box;
  transform-origin: center bottom;
}

.mascot.hello {
  animation: mascot-hello var(--dur-slow) var(--ease-bounce);
}

@keyframes mascot-hello {
  40% { transform: scale(1.07) translateY(-6px); }
}

/* ============================================================
   §6.5 category chips
   ============================================================ */

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: clamp(20px, 3vw, 28px);
}

.chip {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: var(--r-pill);
  background: var(--bg-card);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-1);
  font: 600 15px var(--font-body);
  color: var(--fg);
}

.chip-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex: none;
}

@media (hover: hover) {
  .chip {
    transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
  }

  .chip:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-2);
  }
}

/* ============================================================
   §6.6 feeling pills
   ============================================================ */

.feelings {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: clamp(20px, 3vw, 28px);
}

.feel {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 10px 16px;
  border-radius: var(--r-pill);
  background: var(--bg-card);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-1);
  font: 600 15px var(--font-body);
  color: var(--fg);
}

.feel-gloss {
  font-size: 12px;
  font-weight: 500;
  color: var(--fg-3);
}

.feel-gloss:empty {
  display: none;
}

.feel--best {
  border-color: var(--sun-200);
  background: var(--sun-50);
}

/* ============================================================
   §6.7 Live Activity vignette + Siri chip + star dots
   ============================================================ */

.la-card {
  width: min(340px, 86%);
  border-radius: 28px;
  background: var(--night-card);
  border: 1px solid var(--night-line);
  box-shadow: var(--glow-sun);
  padding: 18px 20px;
  display: flex;
  align-items: center;
  gap: 14px;
}

.la-icon {
  width: 36px;
  height: 36px;
  flex: none;
  border-radius: 50%;
  background: rgba(255, 214, 107, 0.14);
  display: grid;
  place-items: center;
}

.la-text {
  flex: 1 1 auto;
  min-width: 0;
}

.la-text strong {
  font: 600 15px var(--font-body);
  color: var(--night-fg);
}

.la-time {
  font-family: var(--font-display);
  font-variant-numeric: tabular-nums;
  font-size: 26px;
  font-weight: 700;
  color: var(--night-fg);
  display: block;
}

.la-stop {
  width: 40px;
  height: 40px;
  flex: none;
  border-radius: 50%;
  background: #FF6E54;
  position: relative;
}

.la-stop::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 12px;
  height: 12px;
  border-radius: 3px;
  background: #fff;
}

.siri-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 18px;
  padding: 10px 16px;
  border-radius: var(--r-pill);
  background: var(--night-card);
  color: var(--night-fg-2);
  font: 500 14px var(--font-body);
  border: 1px solid var(--night-line);
}

.siri-mic {
  flex: none;
}

.star {
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--sun-200);
  opacity: 0.5;
  animation: twinkle 3.2s ease-in-out infinite;
}

.star:nth-child(1) { animation-delay: 0s; }
.star:nth-child(2) { animation-delay: 0.6s; }
.star:nth-child(3) { animation-delay: 1.2s; }
.star:nth-child(4) { animation-delay: 1.8s; }
.star:nth-child(5) { animation-delay: 2.4s; }

@keyframes twinkle {
  50% { opacity: 0.15; }
}

/* ============================================================
   §6.8 image-generation placeholder
   ============================================================ */

.img-placeholder {
  width: 100%;
  border-radius: var(--r-xl);
  background: repeating-linear-gradient(-45deg, var(--sun-50), var(--sun-50) 14px, var(--sun-100) 14px, var(--sun-100) 28px);
  border: 1px dashed var(--sun-200);
  display: grid;
  place-items: center;
  color: var(--sun-500);
  font: 500 13px var(--font-body);
}

/* ============================================================
   §7.1 hero
   ============================================================ */

.hero {
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding-block: clamp(112px, 16vh, 176px) clamp(56px, 9vh, 112px);
  overflow-x: clip;
}

.hero-inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(36px, 6vw, 64px);
  align-items: center;
  width: 100%;
}

.hero-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(20px, 3vw, 28px);
}

.hero-visual {
  display: flex;
  justify-content: center;
  align-items: flex-end;
}

.hero-phone {
  margin: 0;
}

@media (min-width: 900px) {
  .hero-inner {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  }

  .hero-phone.phone--tilt-r {
    transform: rotate(1.5deg);
  }
}

/* ============================================================
   §7.4 diary — two overlapping phones (desktop), single phone (mobile)
   ============================================================ */

.diary {
  overflow-x: clip;
}

.diary-visual {
  display: flex;
  justify-content: center;
  align-items: center;
}

.diary-back {
  display: none;
}

@media (min-width: 900px) {
  .diary-visual .phone {
    width: clamp(190px, 20vw, 240px);
  }

  .diary-back {
    display: block;
    position: relative;
    z-index: 1;
    margin-right: clamp(-64px, -4.5vw, -44px);
    transform: scale(0.94) rotate(-3deg);
  }

  .diary-front {
    position: relative;
    z-index: 2;
  }
}

/* ============================================================
   §7.5 rhythm — centered copy + 3-phone gallery
   ============================================================ */

.rhythm-copy {
  max-width: 560px;
  margin-inline: auto;
  text-align: left;
}

.rhythm-gallery {
  display: flex;
  gap: 16px;
  margin-top: clamp(40px, 6vw, 64px);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  padding-block: 8px;
}

.rhythm-gallery::-webkit-scrollbar {
  display: none;
}

.rhythm-gallery > .phone {
  flex: 0 0 72%;
  scroll-snap-align: center;
}

@media (min-width: 900px) {
  .rhythm-gallery {
    overflow: visible;
    justify-content: center;
    align-items: center;
    scroll-snap-type: none;
    gap: clamp(16px, 3vw, 40px);
  }

  .rhythm-gallery > .phone {
    flex: 0 0 auto;
  }

  .rhythm-gallery > .rhythm-mid {
    transform: translateY(-16px);
  }
}

/* ============================================================
   §7.7 AI (dusk) + §7.8 night (dark surfaces)
   ============================================================ */

/* Glowing phone in the dusk (adds glow to the base phone shadow stack). */
.phone--glow img {
  box-shadow: var(--glow-sun), var(--shadow-3), inset 0 1px 0 rgba(255, 255, 255, 0.09);
}

.small-print {
  font-size: 13px;
  color: var(--night-fg-2);
  margin-top: 20px;
  max-width: 560px;
}

/* Captions inside dark sections read on the night surface (§8.4 note). */
.ai figcaption,
.night figcaption {
  color: var(--night-fg-2);
}

.night {
  position: relative;
  /* The night passage owns the viewport centre for a beat longer, giving the
     sky its darkest moment room to breathe. */
  padding-block: clamp(120px, 20vh, 220px);
}

.night-visual {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* ============================================================
   §7.9 sunrise close — centered single column
   ============================================================ */

.soon-copy {
  max-width: 560px;
  margin-inline: auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(18px, 3vw, 24px);
}

.mascot-wrap {
  display: flex;
  justify-content: center;
}

.mascot {
  width: 120px;
  height: 120px;
}

.soon-mail {
  font: 500 15px var(--font-body);
  color: var(--fg-2);
  text-decoration: underline;
  margin-top: 12px;
}

/* ============================================================
   §8.8 reduced motion — supplement to the base.css block.
   base.css already neutralises `.reveal`, `.rays`, `.img-placeholder`, and
   `[class*="star"]`. These selectors are the ones it cannot reach: the copy
   column's staggered children and the is-loaded hero elements (none of which
   are `.reveal`), plus the JS-driven blink/bounce.
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  .section-copy.reveal > *,
  .hero-copy > * {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .hero-phone {
    opacity: 1 !important;
    transition: none !important;
  }

  .eyes {
    transition: none !important;
  }

  .mascot.hello {
    animation: none !important;
  }
}