/* ===== The day-clock =====
   The homepage is one day, scrolled. Each section is a "scene" pinned to an
   hour, and the whole page's palette moves with it: 02:07 indigo, 07:30
   sunrise, 13:20 paper, 18:45 dusk, 22:30 lamplight, then back to night.

   How it works: landing-day.css defines the tokens once, on :root. This file
   re-declares the same token names on `.landing[data-time="..."]`, so every
   component built on those tokens re-skins itself with no per-component work.
   A single IntersectionObserver sets data-time. Nothing else touches colour.

   Loaded after landing-day.css. */

.landing {
  position: relative;
  transition: background-color 900ms ease, color 900ms ease;
}

/* Everything inside inherits the scene's colour rather than hard-coding it,
   so one attribute flip re-paints the page. */
.landing *,
.landing *::before,
.landing *::after {
  transition-property: background-color, color, border-color, box-shadow, opacity, transform;
  transition-duration: 900ms;
  transition-timing-function: ease;
}
/* ...except the things that were already animating fast. */
.landing .n-btn,
.landing .n-hour,
.landing .n-msg,
.landing .n-typing i { transition-duration: 200ms; }
.landing .n-msg { transition-duration: 350ms; }

/* ===== Scenes ===== */

/* 02:07 - the hour the product exists for. */
.landing[data-time="night"] {
  --n-paper: #0F1320;
  --n-paper-alt: #131829;
  --n-surface: #171C2C;
  --n-surface-2: #1D2334;
  --n-line: rgba(255, 255, 255, 0.13);
  --n-lamplight: #E9A44C;
  --n-lamplight-soft: rgba(233, 164, 76, 0.14);
  --n-ink: #EFEAE1;
  --n-dusk: #99A0B3;
  --n-leaf: #6FBF97;
  background-color: #0F1320;
}

/* 07:30 - first light. Warmest, most optimistic scene on the page. */
.landing[data-time="dawn"] {
  --n-paper: #FDF1E3;
  --n-paper-alt: #FBE7D2;
  --n-surface: #FFFDF9;
  --n-surface-2: #F8E6D0;
  --n-line: rgba(42, 30, 20, 0.13);
  --n-lamplight: #C05C18;
  --n-lamplight-soft: rgba(192, 92, 24, 0.10);
  --n-ink: #2A1E14;
  --n-dusk: #6E5A48;
  --n-leaf: #4E8A5E;
  background-color: #FDF1E3;
}

/* 13:20 - flat daylight. This is the site's default paper. */
.landing[data-time="day"] {
  --n-paper: #FFFFFF;
  --n-paper-alt: #F7F5EF;
  --n-surface: #FFFFFF;
  --n-surface-2: #F3F1E9;
  --n-line: rgba(23, 27, 38, 0.10);
  --n-lamplight: #C97A1F;
  --n-lamplight-soft: rgba(201, 122, 31, 0.10);
  --n-ink: #171B26;
  --n-dusk: #5B6272;
  --n-leaf: #3E8C6A;
  background-color: #FFFFFF;
}

/* 18:45 - the commute home. Cool, violet, the light going. */
.landing[data-time="dusk"] {
  --n-paper: #EBE8F1;
  --n-paper-alt: #E3DFEC;
  --n-surface: #F7F5FB;
  --n-surface-2: #E1DDEB;
  --n-line: rgba(34, 30, 46, 0.13);
  --n-lamplight: #B0651F;
  --n-lamplight-soft: rgba(176, 101, 31, 0.10);
  --n-ink: #221E2E;
  --n-dusk: #5D5870;
  --n-leaf: #45806A;
  background-color: #EBE8F1;
}

/* 22:30 - one lamp on in a dark room. The brand's namesake state. */
.landing[data-time="lamp"] {
  --n-paper: #17110C;
  --n-paper-alt: #1C150E;
  --n-surface: #211913;
  --n-surface-2: #2A2018;
  --n-line: rgba(255, 255, 255, 0.13);
  --n-lamplight: #F0A94F;
  --n-lamplight-soft: rgba(240, 169, 79, 0.15);
  --n-ink: #F3E9DC;
  --n-dusk: #A9998A;
  --n-leaf: #7FC49E;
  background-color: #17110C;
}

/* ===== Sky =====
   One fixed ambient wash behind everything, repositioned per scene. It is what
   stops the dark scenes from reading as a flat swatch. */
.n-sky {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  transition: background 900ms ease, opacity 900ms ease;
}
.landing > *:not(.n-sky) { position: relative; z-index: 1; }

.landing[data-time="night"] .n-sky {
  background:
    radial-gradient(ellipse 60% 40% at 78% 6%, rgba(233, 164, 76, 0.16), transparent 62%),
    radial-gradient(ellipse 70% 50% at 12% 96%, rgba(76, 92, 158, 0.28), transparent 66%);
}
.landing[data-time="dawn"] .n-sky {
  background:
    radial-gradient(ellipse 90% 46% at 50% 0%, rgba(240, 160, 70, 0.30), transparent 70%),
    radial-gradient(ellipse 60% 40% at 88% 92%, rgba(233, 120, 90, 0.12), transparent 64%);
}
.landing[data-time="day"] .n-sky {
  background:
    radial-gradient(ellipse 55% 45% at 78% 12%, rgba(201, 122, 31, 0.08), transparent 65%),
    radial-gradient(ellipse 40% 50% at 8% 85%, rgba(62, 140, 106, 0.06), transparent 60%);
}
.landing[data-time="dusk"] .n-sky {
  background:
    radial-gradient(ellipse 90% 40% at 50% 100%, rgba(224, 138, 84, 0.22), transparent 66%),
    radial-gradient(ellipse 70% 55% at 20% 4%, rgba(92, 82, 150, 0.20), transparent 66%);
}
.landing[data-time="lamp"] .n-sky {
  background:
    radial-gradient(circle 46vw at 26% 34%, rgba(240, 169, 79, 0.20), transparent 60%),
    radial-gradient(ellipse 80% 50% at 80% 100%, rgba(120, 62, 20, 0.20), transparent 68%);
}

/* Scenes carry no background of their own - the page body is the sky. */
.landing .n-hero,
.landing .n-section,
.landing .n-section-alt,
.landing .n-final { background: none; }

/* ===== The rail =====
   A clock down the left margin. Each stop is a real hour from the copy, so the
   rail is the table of contents and the time signature at once. */
.n-rail {
  position: fixed;
  left: 34px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 40;
  display: none;
  flex-direction: column;
  gap: 2px;
}
.n-rail-stop {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 0;
  border: none;
  background: none;
  cursor: pointer;
  font-family: var(--n-font-body);
  color: var(--n-dusk);
  opacity: 0.5;
  transition: opacity 400ms ease, color 900ms ease;
}
.n-rail-stop:hover { opacity: 0.85; }
.n-rail-tick {
  width: 14px;
  height: 1px;
  background: currentColor;
  transition: width 400ms ease, background 900ms ease;
}
.n-rail-time {
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  font-variant-numeric: tabular-nums;
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity 400ms ease, transform 400ms ease;
  white-space: nowrap;
}
.n-rail-stop:hover .n-rail-time,
.n-rail-stop.is-now .n-rail-time { opacity: 1; transform: translateX(0); }
.n-rail-stop.is-now {
  opacity: 1;
  color: var(--n-lamplight);
}
.n-rail-stop.is-now .n-rail-tick { width: 30px; }
.n-rail-stop:focus-visible { outline: 2px solid var(--n-lamplight); outline-offset: 4px; border-radius: 4px; }

@media (min-width: 1240px) { .n-rail { display: flex; } }

/* ===== Scene heading =====
   The hour, set large in the display face, standing in for the eyebrow on
   clock sections. The number does the work the label used to. */
.n-scene-time {
  font-family: var(--n-font-display);
  font-size: clamp(2.6rem, 7vw, 4.4rem);
  font-weight: 400;
  line-height: 1;
  color: var(--n-lamplight);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  margin-bottom: 6px;
}
.n-scene-time span { font-size: 0.34em; letter-spacing: 0.14em; margin-left: 10px; vertical-align: 0.9em; }
.n-scene-label {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--n-dusk);
  margin-bottom: 20px;
}

/* ===== Scene bodies ===== */
.n-scene-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}
.n-scene-grid .n-lead { margin-top: 16px; }

/* A short exchange, used to show a moment instead of describing it. */
.n-exchange { display: flex; flex-direction: column; gap: 12px; max-width: 30rem; }
.n-exchange .n-msg { opacity: 1; transform: none; }
.n-exchange-note {
  font-size: 0.78rem;
  color: var(--n-dusk);
  letter-spacing: 0.04em;
  padding-left: 4px;
}

/* Cards that must stay readable in all five scenes. */
.landing .n-hour,
.landing .n-plan,
.landing .n-chat,
.landing .n-chip,
.landing .n-memory-reply { background-color: var(--n-surface); }
.landing .n-chat-top { background-color: var(--n-surface-2); }
.landing .n-msg-user { background-color: var(--n-surface-2); }
.landing .n-msg-ai,
.landing .n-typing,
.landing .n-memory-reply { background-color: var(--n-lamplight-soft); }
.landing .n-chat-input input { background-color: var(--n-paper-alt); }

/* Shadows read as dirt on the dark scenes. */
.landing[data-time="night"] .n-chat,
.landing[data-time="lamp"] .n-chat { box-shadow: 0 30px 70px rgba(0, 0, 0, 0.45); }
.landing[data-time="night"] .n-hour:hover,
.landing[data-time="lamp"] .n-hour:hover { box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35); }
.landing[data-time="night"] .n-plan-featured,
.landing[data-time="lamp"] .n-plan-featured { box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35); }

/* ===== Chrome follows the clock =====
   The navbar and footer sit outside .landing, so they read the scene through
   :has(). Without this the sticky white bar sits on top of a midnight page. */
body:has(.landing) .navbar,
body:has(.landing) .footer {
  transition: background-color 900ms ease, border-color 900ms ease;
}
body:has(.landing[data-time="night"]) .navbar { background: rgba(15, 19, 32, 0.82); }
body:has(.landing[data-time="dawn"]) .navbar { background: rgba(253, 241, 227, 0.84); }
body:has(.landing[data-time="dusk"]) .navbar { background: rgba(235, 232, 241, 0.84); }
body:has(.landing[data-time="lamp"]) .navbar { background: rgba(23, 17, 12, 0.82); }

body:has(.landing[data-time="night"]) .navbar,
body:has(.landing[data-time="lamp"]) .navbar { border-bottom-color: rgba(255, 255, 255, 0.13); }
body:has(.landing[data-time="night"]) .brand-text,
body:has(.landing[data-time="lamp"]) .brand-text { color: #F3EDE4; }
body:has(.landing[data-time="night"]) .nav-link,
body:has(.landing[data-time="lamp"]) .nav-link { color: #B9B2A8; }
body:has(.landing[data-time="night"]) .nav-link:hover,
body:has(.landing[data-time="lamp"]) .nav-link:hover { color: #FFFFFF; }
body:has(.landing[data-time="night"]) .brand-dot { color: #E9A44C; }
body:has(.landing[data-time="lamp"]) .brand-dot { color: #F0A94F; }

/* The page ends at night, and the footer is directly under that last scene. */
body:has(.landing[data-time="night"]) .footer {
  background: #0B0E19;
  border-top-color: rgba(255, 255, 255, 0.10);
  margin-top: 0;
}
body:has(.landing[data-time="night"]) .footer .brand-text { color: #F3EDE4; }
body:has(.landing[data-time="night"]) .footer-tagline,
body:has(.landing[data-time="night"]) .footer-section a,
body:has(.landing[data-time="night"]) .footer-bottom p { color: #8D93A5; }
body:has(.landing[data-time="night"]) .footer-section h2 { color: #E9A44C; }
body:has(.landing[data-time="night"]) .footer-bottom { border-top-color: rgba(255, 255, 255, 0.10); }
body:has(.landing) .footer { margin-top: 0; }

/* ===== Responsive ===== */
@media (max-width: 960px) {
  .n-scene-grid { grid-template-columns: 1fr; gap: 36px; }
}

/* ===== Reduced motion =====
   The scenes still change - the colour IS the content here - but nothing
   animates its way there, and the sky stops moving. */
@media (prefers-reduced-motion: reduce) {
  .landing,
  .landing *,
  .landing *::before,
  .landing *::after,
  .n-sky,
  body:has(.landing) .navbar,
  body:has(.landing) .footer {
    transition: none !important;
  }
}

/* ===== Rotating headline =====
   The phrases stack in one grid cell so the line never reflows as they swap -
   the tallest phrase reserves the space once, and the others fade through it. */
.n-rotator {
  display: inline-grid;
  vertical-align: bottom;
}
.n-rotator em {
  grid-area: 1 / 1;
  font-style: italic;
  color: var(--n-lamplight);
  opacity: 0;
  transform: translateY(0.14em);
  transition: opacity 600ms ease, transform 600ms ease;
}
.n-rotator em.is-on { opacity: 1; transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
  /* No cycling: the first phrase stands alone, the rest are removed from flow. */
  .n-rotator { display: inline; }
  .n-rotator em { opacity: 0; position: absolute; }
  .n-rotator em.is-on { opacity: 1; position: static; transform: none; }
}

/* ===== Memory as a portrait =====
   Replaces a row of pills. Grouping is the point: the same facts read as a
   person once they are sorted into what you're working on / who's in your life
   / what you're like. */
.n-portrait {
  display: grid;
  gap: 22px;
  margin-bottom: 26px;
}
.n-portrait-group {
  border-left: 2px solid var(--n-lamplight);
  padding-left: 18px;
}
.n-portrait-label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--n-lamplight);
  margin-bottom: 8px;
}
.n-portrait-group ul { list-style: none; margin: 0; padding: 0; }
.n-portrait-group li {
  color: var(--n-dusk);
  font-size: 0.95rem;
  line-height: 1.55;
  padding: 3px 0;
}
.n-portrait-group li strong { color: var(--n-ink); font-weight: 600; }

/* Pricing tagline, added when the plans moved into config. */
.n-plan-tagline {
  color: var(--n-dusk);
  font-size: 0.9rem;
  margin: 0 0 18px;
}