/* ============================================================
   Journey: sticky phone, 3D screen-to-screen scroll
   (index-3d.html only; layers on top of style.css)
   ============================================================ */

.hero-center { text-align: center; }
.hero-inner-center {
  grid-template-columns: 1fr;
  padding: 88px 24px 72px;
  justify-items: center;
}
.hero-inner-center .hero-sub { margin-left: auto; margin-right: auto; max-width: 560px; }
.hero-inner-center .cta-form { margin: 0 auto; }

/* ---------- layout ---------- */
.journey-track { height: 460vh; }
.journey-sticky {
  position: sticky; top: 0; height: 100vh;
  display: flex; align-items: center; overflow: hidden;
}
.journey-grid {
  max-width: 1040px; width: 100%; margin: 0 auto; padding: 0 24px;
  display: grid; grid-template-columns: 1fr auto 56px;
  gap: 48px; align-items: center;
}

/* copy panels crossfade in place */
.journey-copy { position: relative; min-height: 300px; }
.j-panel {
  position: absolute; top: 50%; left: 0; right: 0;
  transform: translateY(-50%);
  opacity: 0;
  will-change: opacity, transform;
}
.j-panel .demo-body { max-width: 400px; }

/* phone: fixed design size at true handset proportions. JS scales the whole
   thing to fit the viewport, so the screen content is identical at every
   window size instead of reflowing. */
.journey-phone { perspective: 1400px; }
.phone-fit { position: relative; }
.phone-3d {
  --tabbar-h: 56px;
  position: absolute; top: 50%; left: 50%;
  width: 392px;
  transform-style: preserve-3d;
  transform-origin: 50% 50%;
  will-change: transform;
}
.phone-3d .phone-screen {
  min-height: 0;
  aspect-ratio: 9 / 18.7;   /* real handset ratio, not a tablet */
}
.phone-3d .focus-phrase { font-size: 17px; }
.phone-3d .app-date { font-size: 24px; }
.phone-3d .chat-bubble { font-size: 13.5px; line-height: 1.45; padding: 9px 13px; }
.j-viewport {
  position: relative; perspective: 1000px; transform-style: preserve-3d;
  padding: 0; overflow: hidden;
}
.j-screen {
  position: absolute; inset: 0;
  padding: 48px 15px calc(var(--tabbar-h) + 4px);
  background: var(--bg);
  backface-visibility: hidden;
  will-change: transform, opacity;
  opacity: 0;
  pointer-events: none;
  overflow: hidden;
}
.j-screen[data-jscreen="0"] { opacity: 1; }

/* tighter inner content so each screen fits the frame */
.chat-demo-tight { display: flex; flex-direction: column; gap: 8px; }
.j-screen .memory-demo { display: flex; flex-direction: column; gap: 8px; }

/* chat screen: input bar sits directly on top of the tab bar, no gap */
.j-screen-chat { display: flex; flex-direction: column; }
.j-screen-chat .app-header { margin-bottom: 10px; }
.j-screen-chat .app-profile-row { margin-bottom: 10px; }
.j-screen-chat .chat-demo { flex: 1; min-height: 0; justify-content: flex-end; }
.j-screen-chat .filler-input { margin: 10px 0 0; }

/* ideas screen fills the frame */
.j-screen-ideas { display: flex; flex-direction: column; }
.j-screen .deck-fan { flex: 1; min-height: 0; }
.phone-3d .idea-card { padding: 15px; }
.phone-3d .idea-badge { margin-bottom: 9px; }
.phone-3d .idea-title { font-size: 17px; margin-bottom: 6px; }
.phone-3d .idea-overview { font-size: 12.5px; line-height: 1.5; margin-bottom: 11px; }
.phone-3d .idea-why { padding: 8px 11px; margin-bottom: 11px; }
.phone-3d .idea-why p { font-size: 11.5px; }
.phone-3d .idea-steps { margin-bottom: 11px; }
.phone-3d .idea-step { margin-bottom: 5px; }
.phone-3d .idea-step span { font-size: 11.5px; }

/* the deck screen animates on its own here (no scroll-reveal ancestor) */
.j-screen .idea-card-top { animation: ideaSwipe 5.5s var(--ease) 1.2s infinite; }
.j-screen .idea-stamp { animation: stampIn 5.5s var(--ease) 1.2s infinite; }

/* rail */
.journey-rail {
  display: flex; flex-direction: column; gap: 22px; align-items: flex-start;
}
.j-dot {
  display: flex; align-items: center; gap: 10px;
  background: none; border: none; cursor: pointer; padding: 0;
  font-family: var(--font); font-size: 12px; font-weight: 500;
  color: var(--ink-3); letter-spacing: 0.3px;
  transition: color 0.3s;
}
.j-dot span {
  width: 8px; height: 8px; border-radius: 4px;
  background: var(--border); transition: background 0.3s, transform 0.3s;
}
.j-dot.active { color: var(--champagne-mid); }
.j-dot.active span { background: var(--champagne); transform: scale(1.35); }

/* ---------- reduced motion: simple crossfade, no 3D ---------- */
@media (prefers-reduced-motion: reduce) {
  .j-screen, .j-panel { transition: opacity 0.4s ease; transform: none !important; }
  .phone-3d { transform: none !important; }
}

/* ---------- responsive ---------- */
@media (max-width: 900px) {
  .journey-track { height: 420vh; }
  /* phones: much less scrolling between stages (desktop is untouched) */
}
@media (max-width: 700px) {
  .journey-track { height: 300vh; }
}
@media (max-width: 900px) {
  .journey-grid {
    grid-template-columns: 1fr;
    gap: 20px; justify-items: center;
    align-content: center;
  }
  .journey-phone { order: 1; }
  .j-screen { padding: 20px 14px 22px; }
  .journey-copy { order: 2; width: 100%; max-width: 420px; min-height: 190px; }
  .j-panel { text-align: center; }
  .j-panel .demo-body, .j-panel .demo-headline { max-width: none; }
  .j-panel .demo-headline { font-size: 21px; }
  .j-panel .demo-body { font-size: 14px; }
  .journey-rail { order: 3; flex-direction: row; gap: 16px; }
  .j-dot { font-size: 0; gap: 0; }  /* dots only on small screens */
  .j-dot span { width: 8px; height: 8px; }
  .idea-overview { font-size: 12px; }
}