/* mock.css — Phone mock sequence styles */
/* Built at 402px native (Figma dimensions). Scaled to 280px via transform. */
/* All transitions are bidirectional via data-direction="forward"|"backward". */
/* 6 states: loading → feed → feed-scrolled → expanded → crunching → success */

/* ── Tokens ── */
:root {
  --card-py: 18px;
  --card-px: 16px;
  --card-px-full: 20px;
  --card-radius: 16px;
  --centered-text-px: 80px;
  --mock-scale: 0.697;
  --reveal-duration: 0.3s;
  --reveal-ease: ease-out;
  --feed-scroll: 236px; /* hero travels 452 → 216; card 1 goes 224 → −12 */
}

/* ── Phone container ── */
.hero-mock {
  flex-shrink: 0;
  width: calc(402px * var(--mock-scale));
  height: calc(874px * var(--mock-scale));
  position: relative;
}
.phone-scale {
  position: absolute;
  top: 0; left: 0;
  width: 402px;
  height: 874px;
  transform: scale(var(--mock-scale));
  transform-origin: top left;
}
.phone-frame {
  background: transparent;
  border-radius: 48px;
  padding: 0;
  box-shadow: none;
  font-family: var(--mono);
  overflow: hidden;
  position: relative;
  width: 402px;
  height: 874px;
  transition: background 0.3s ease-out, box-shadow 0.3s ease-out;
}
.phone-frame:not([data-state="loading"]) {
  background: var(--mock-bg);
  box-shadow: var(--mock-shadow);
}

/* ── Status bar ── */
.mock-status {
  position: absolute; top: 0; left: 0; right: 0;
  padding: 10px 40px 10px;
  color: var(--mock-text-1);
  z-index: 3;
  opacity: 0;
  transition: color 0.2s ease-in, opacity 0.3s ease-out;
}
[data-state="feed"] .mock-status,
[data-state="feed-scrolled"] .mock-status { opacity: 1; }
[data-direction="forward"][data-state="feed"] .mock-status { transition-delay: 0.2s; }
[data-state="expanded"] .mock-status,
[data-state="crunching"] .mock-status,
[data-state="success"] .mock-status {
  opacity: 1;
  color: var(--accent-fg);
}

/* ── Fadeout gradient (protects status bar, above feed content) ── */
.mock-fadeout {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 80px;
  background: linear-gradient(
    to bottom,
    var(--mock-bg) 0%,
    var(--mock-bg) 40%,
    transparent 100%
  );
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease-out;
}
[data-state="feed"] .mock-fadeout,
[data-state="feed-scrolled"] .mock-fadeout { opacity: 1; }
[data-direction="forward"][data-state="feed"] .mock-fadeout { transition-delay: 0.2s; }

/* ── E logo (default at feed position, loading overrides to center) ── */
.mock-logo {
  position: absolute;
  top: 88px; left: 0; right: 0;
  display: flex; justify-content: center;
  z-index: 0;
}
.mock-logo svg {
  width: 120px; height: 120px;
  transition: width 0.45s ease-in-out, height 0.45s ease-in-out;
}
[data-state="loading"] .mock-logo { top: 260px; }
[data-state="loading"] .mock-logo svg { width: 180px; height: 180px; }

/* Loading text */
.mock-loading-text {
  position: absolute;
  top: 460px; left: var(--centered-text-px); right: var(--centered-text-px);
  font-size: 15px; font-weight: 400;
  text-align: center;
  color: var(--mock-text-1);
  opacity: 1;
  transition: opacity 0.2s ease-in;
}
[data-state="feed"] .mock-loading-text,
[data-state="feed-scrolled"] .mock-loading-text,
[data-state="expanded"] .mock-loading-text,
[data-state="crunching"] .mock-loading-text,
[data-state="success"] .mock-loading-text { opacity: 0; }

/* ── Feed scroll wrapper ── */
.mock-feed-scroll {
  position: absolute;
  top: 224px; left: 20px; right: 20px;
  display: flex; flex-direction: column; gap: 16px;
  transition: top 0.4s ease-out, opacity 0.25s ease-out;
}
[data-state="feed-scrolled"] .mock-feed-scroll {
  top: -12px; /* 224 − feed-scroll(236) = −12 */
}
[data-state="expanded"] .mock-feed-scroll,
[data-state="crunching"] .mock-feed-scroll,
[data-state="success"] .mock-feed-scroll {
  top: -12px;
  opacity: 0;
}

/* ── Card 1: static lavender card (overlap merge) ── */
.mock-card-1 {
  border-radius: var(--card-radius);
  background: var(--accent);
  color: var(--accent-fg);
  font-family: var(--mono);
  padding: 22px var(--card-px) 18px;
  height: 212px;
  overflow: hidden;
  flex-shrink: 0;
}
.mock-card-1-title {
  font-size: 22px; font-weight: 700;
  margin-bottom: 4px;
}
.mock-card-1-meta {
  font-size: 13px;
  color: rgba(26,21,37,0.75);
  margin-bottom: 14px;
}
.mock-card-1-duration {
  font-size: 15px; font-weight: 700;
}
.mock-card-1-subtitle {
  font-size: 13px;
  color: rgba(26,21,37,0.75);
  margin-top: 8px;
}
.mock-card-1-divider {
  border: none; border-top: 1px solid rgba(26,21,37,0.15);
  margin: 14px 0 10px;
}
.mock-card-1-cta {
  font-size: 15px; font-weight: 600;
  font-family: var(--sans);
}

/* Hero spacer: reserves space in the scroll wrapper for hero card 2 */
.mock-hero-spacer {
  height: 212px;
  flex-shrink: 0;
}

/* ── Merged cards ── */
.mock-card {
  background: var(--mock-card-muted);
  border-radius: var(--card-radius);
  padding: 22px var(--card-px);
}
.mock-card-title {
  font-size: 17px; font-weight: 600;
  color: var(--mock-text-1); margin-bottom: 8px;
}
.mock-card-meta {
  font-size: 13px; color: var(--mock-text-1); margin-bottom: 0;
}
.mock-card-row {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-top: 20px;
}
.mock-card-merged {
  font-size: 13px; color: var(--mock-text-1);
}
.mock-card-link {
  font-size: 13px; color: var(--mock-text-1);
}
.mock-merged-cards {
  display: flex; flex-direction: column; gap: 16px;
}

/* ── Bottom links ── */
.mock-links {
  text-align: center;
  display: flex; flex-direction: column; gap: 24px;
  padding: 8px 0;
}
.mock-links span {
  font-size: 14px; color: var(--accent); display: block;
}

/* ── Hero card 2 (sequential — expands to fullscreen) ── */
.mock-hero {
  position: absolute;
  z-index: 1;
  top: 464px; left: 20px; right: 20px;
  height: 212px;
  border-radius: var(--card-radius);
  background: var(--accent);
  color: var(--accent-fg);
  font-family: var(--mono);
  overflow: hidden;
  opacity: 0;
  transition: top 0.4s ease-out, left 0.4s ease-out, right 0.4s ease-out,
              height 0.4s ease-out, border-radius 0.4s ease-out,
              opacity 0.25s ease-out;
}
[data-state="feed"] .mock-hero { opacity: 1; top: 452px; }
[data-direction="forward"][data-state="feed"] .mock-hero { transition-delay: 0.40s; }
[data-state="feed-scrolled"] .mock-hero {
  opacity: 1;
  top: 216px; /* 452 − feed-scroll(236) = 216 */
}
[data-state="expanded"] .mock-hero,
[data-state="crunching"] .mock-hero,
[data-state="success"] .mock-hero {
  opacity: 1;
  top: 0; left: 0; right: 0;
  height: 874px;
  border-radius: 48px;
}

/* ── Group 1: Header (title + meta + duration + feed-only) ── */
.mock-hero-header {
  position: absolute;
  top: var(--card-py); left: var(--card-px); right: var(--card-px);
  transition: top 0.4s ease-out, left 0.4s ease-out, right 0.4s ease-out, opacity 0.2s ease-in;
}
.mock-hero-title {
  font-size: 22px; font-weight: 700;
  color: var(--accent-fg); margin-bottom: 4px;
}
.mock-hero-meta {
  font-size: 13px; margin-bottom: 14px;
  color: rgba(26,21,37,0.75);
}
.mock-hero-duration {
  font-size: 15px; font-weight: 700;
  color: var(--accent-fg);
}
.mock-hero-feed {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease-in, visibility 0s linear 0.2s;
}
[data-state="feed"] .mock-hero-feed,
[data-state="feed-scrolled"] .mock-hero-feed {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.2s ease-in, visibility 0s linear 0s;
}
.mock-hero-sources {
  font-size: 13px; color: rgba(26,21,37,0.75);
  margin-top: 8px;
}
.mock-hero-divider {
  border: none; border-top: 1px solid rgba(26,21,37,0.15);
  margin: 14px 0 10px;
}
.mock-hero-cta {
  font-size: 15px; font-weight: 600;
  color: var(--accent-fg);
  font-family: var(--sans);
}
[data-state="expanded"] .mock-hero-header {
  top: 142px; left: var(--card-px-full); right: var(--card-px-full);
}
[data-state="crunching"] .mock-hero-header,
[data-state="success"] .mock-hero-header {
  top: 142px; left: var(--card-px-full); right: var(--card-px-full); opacity: 0;
}

/* ── Group 2 & 3: Confirm content ── */
.mock-hero-confirm {
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity var(--reveal-duration) var(--reveal-ease),
              transform var(--reveal-duration) var(--reveal-ease),
              visibility 0s linear var(--reveal-duration);
}
[data-state="expanded"] .mock-hero-confirm {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
/* Forward: staggered entry after card finishes growing */
[data-direction="forward"][data-state="expanded"] .mock-confirm-sources { transition-delay: 0.4s; }
[data-direction="forward"][data-state="expanded"] .mock-confirm-actions { transition-delay: 0.55s; }
/* Backward into expanded: slight delay to let overlay clear */
[data-direction="backward"][data-state="expanded"] .mock-hero-confirm { transition-delay: 0.15s; }

/* ── Shared source container & block ── */
.mock-sources {
  overflow: hidden; border-radius: var(--card-radius);
  display: flex; flex-direction: column; gap: 2px;
}
.mock-source-block {
  background: #0D0A14;
  color: #fff; border-radius: 4px;
  padding: 16px;
  font-size: 14px;
}
.mock-source-name { font-weight: 700; margin-bottom: 16px; }
.mock-source-metrics {
  display: flex; gap: 12px; margin-bottom: 12px;
}
.mock-source-metrics:last-child { margin-bottom: 0; }
.mock-metric { flex: 1; }
.mock-metric-label {
  display: block; font-size: 11px; font-weight: 700;
  margin-bottom: 4px;
}
.mock-metric-value {
  font-size: 15px; font-weight: 700;
}
.mock-metric-value small {
  font-weight: 400; font-size: 11px;
}

.mock-confirm-sources {
  position: absolute; top: 266px;
  left: var(--card-px-full); right: var(--card-px-full);
}
.mock-overlap {
  font-size: 13px;
  margin: 20px 0 0;
}
.mock-confirm-actions {
  position: absolute; bottom: 60px;
  left: var(--card-px-full); right: var(--card-px-full);
}

/* ── Shared button styles ── */
.mock-btn-group {
  display: flex; flex-direction: column; gap: 4px;
}
.mock-btn {
  height: 54px;
  border-radius: 8px;
  font-family: var(--sans); font-size: 17px; font-weight: 600;
  text-align: center;
  display: flex; align-items: center; justify-content: center;
}
.mock-btn-primary {
  background: #0D0A14; color: #fff;
}
.mock-btn-text {
  color: var(--accent-fg);
}

/* ── Mock screen (crunching + success overlay) ── */
.mock-screen {
  position: absolute; inset: 0;
  border-radius: 48px;
  background: var(--accent);
  color: var(--accent-fg);
  opacity: 0; pointer-events: none;
  transition: opacity 0.2s ease-out;
  z-index: 2;
}
.mock-screen-crunching,
.mock-screen-success {
  position: absolute; left: 0; right: 0; top: 0; bottom: 0;
  display: flex; flex-direction: column;
  opacity: 0;
  transition: opacity 0.2s ease-in;
}

/* ── Crunching content ── */
.mock-screen-crunching {
  align-items: center; justify-content: flex-start;
}
.mock-crunching-text {
  position: absolute;
  top: 460px; left: var(--centered-text-px); right: var(--centered-text-px);
  font-size: 15px; font-weight: 400;
  text-align: center;
  opacity: 0;
  transition: opacity 0.2s ease-in;
}
[data-state="crunching"] .mock-crunching-text-build { opacity: 1; }
[data-direction="forward"][data-state="crunching"] .mock-crunching-text-build { transition-delay: 0.2s; }
[data-state="crunching"] .mock-screen-crunching { opacity: 1; }

/* ── Feed element stagger ── */
.mock-feed-reveal {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity var(--reveal-duration) var(--reveal-ease),
              transform var(--reveal-duration) var(--reveal-ease);
}
[data-state="feed"] .mock-feed-reveal,
[data-state="feed-scrolled"] .mock-feed-reveal {
  opacity: 1;
  transform: translateY(0);
}
/* Forward: staggered entry after E movement */
[data-direction="forward"][data-state="feed"] .mock-feed-g0 { transition-delay: 0.35s; }
[data-direction="forward"][data-state="feed"] .mock-feed-g1 { transition-delay: 0.40s; }
[data-direction="forward"][data-state="feed"] .mock-feed-g2 { transition-delay: 0.45s; }
[data-direction="forward"][data-state="feed"] .mock-feed-g3 { transition-delay: 0.50s; }
[data-direction="forward"][data-state="feed"] .mock-feed-g4 { transition-delay: 0.60s; }

/* ── Success content ── */
.mock-success-reveal {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity var(--reveal-duration) var(--reveal-ease),
              transform var(--reveal-duration) var(--reveal-ease);
}
[data-state="success"] .mock-screen-success { opacity: 1; }
[data-state="success"] .mock-success-reveal {
  opacity: 1;
  transform: translateY(0);
}
/* Forward: staggered entry */
[data-direction="forward"][data-state="success"] .mock-success-reveal-g0 { transition-delay: 0.35s; }
[data-direction="forward"][data-state="success"] .mock-success-reveal-g1 { transition-delay: 0.45s; }
[data-direction="forward"][data-state="success"] .mock-success-reveal-g2 { transition-delay: 0.55s; }

/* ── Persistent E logo (crunching & success) ── */
.mock-e {
  position: absolute;
  left: 50%; transform: translateX(-50%);
  z-index: 1;
  opacity: 0;
  width: 180px; height: 180px;
  top: 260px;
  transition: top 0.45s ease-in-out, width 0.45s ease-in-out, height 0.45s ease-in-out, opacity 0.2s ease-in;
}
[data-state="crunching"] .mock-e {
  opacity: 1;
  width: 180px; height: 180px;
  top: 260px;
}
[data-state="success"] .mock-e {
  opacity: 1;
  width: 120px; height: 120px;
  top: 72px;
}

/* ── Success content positioning ── */
.mock-success-title {
  position: absolute;
  top: 200px; left: 0; right: 0;
  font-size: 22px; font-weight: 700;
  text-align: center;
}
.mock-success-sources {
  position: absolute;
  top: 266px;
  left: var(--card-px-full); right: var(--card-px-full);
}
/* Success source blocks: title + device header, then status row */
.mock-success-block { display: flex; flex-direction: column; gap: 16px; }
.mock-success-block .mock-source-name { margin-bottom: 0; } /* override confirm 16px */
.mock-success-header { display: flex; flex-direction: column; gap: 4px; }
.mock-success-source-title { font-size: 14px; font-weight: 700; }
.mock-success-source-device { font-size: 11px; font-weight: 400; }
.mock-success-source-row {
  display: flex; justify-content: space-between; align-items: baseline;
  font-family: var(--sans); font-size: 13px; font-weight: 600;
}
.mock-success-source-status { }
.mock-success-source-link { }
.mock-success-result {
  position: absolute;
  top: 560px;
  left: var(--card-px-full); right: var(--card-px-full);
  background: rgba(26, 21, 37, 0.06);
  border-radius: var(--card-radius);
  padding: var(--card-py) var(--card-px);
}
.mock-success-result-title {
  font-size: 22px; font-weight: 700; margin-bottom: 4px;
}
.mock-success-result-meta {
  font-size: 15px; font-weight: 700; margin-bottom: 6px;
}
.mock-success-result-body {
  font-size: 13px; opacity: 0.5; line-height: 1.4; margin-bottom: 14px;
}

/* ══════════════════════════════════════════════════════════════
   State machine
   ══════════════════════════════════════════════════════════════ */

/* Logo: visible in loading + feed, fades out from feed-scrolled onward */
.phone-frame .mock-logo {
  opacity: 1;
  transition: top 0.45s ease-in-out, opacity 0.2s ease-in;
}
[data-state="feed-scrolled"] .mock-logo,
[data-state="expanded"] .mock-logo,
[data-state="crunching"] .mock-logo,
[data-state="success"] .mock-logo { opacity: 0; }

/* Feed scroll wrapper: hidden by default, visible in feed + feed-scrolled */
.phone-frame .mock-feed-scroll {
  opacity: 0;
  transition: top 0.4s ease-out, opacity 0.25s ease-out;
}
[data-state="feed"] .mock-feed-scroll,
[data-state="feed-scrolled"] .mock-feed-scroll { opacity: 1; }
[data-direction="forward"][data-state="feed"] .mock-feed-scroll { transition-delay: 0.35s; }

/* Mock screen: visible in crunching/success */
[data-state="crunching"] .mock-screen,
[data-state="success"] .mock-screen { opacity: 1; }

/* ══════════════════════════════════════════════════════════════
   Backward: strip all delays for simultaneous transitions
   ══════════════════════════════════════════════════════════════ */
[data-direction="backward"] .mock-hero,
[data-direction="backward"] .mock-hero-confirm,
[data-direction="backward"] .mock-hero-header,
[data-direction="backward"] .mock-hero-feed,
[data-direction="backward"] .mock-feed-reveal,
[data-direction="backward"] .mock-feed-scroll,
[data-direction="backward"] .mock-screen,
[data-direction="backward"] .mock-screen-crunching,
[data-direction="backward"] .mock-screen-success,
[data-direction="backward"] .mock-success-reveal,
[data-direction="backward"] .mock-logo,
[data-direction="backward"] .mock-e,
[data-direction="backward"] .mock-status,
[data-direction="backward"] .mock-crunching-text,
[data-direction="backward"] .mock-fadeout {
  transition-delay: 0s !important;
}
/* Loading text: delay so it fades in after E moves back */
[data-direction="backward"][data-state="loading"] .mock-loading-text {
  transition-delay: 0.4s !important;
}
[data-direction="backward"]:not([data-state="loading"]) .mock-loading-text {
  transition-delay: 0s !important;
}
/* Exception: crunching → expanded needs slight delay for overlay to clear */
[data-direction="backward"][data-state="expanded"] .mock-hero-confirm {
  transition-delay: 0.15s !important;
}
/* Backward into loading: E grows back after feed fades out */
[data-direction="backward"][data-state="loading"] .mock-logo {
  transition: top 0.45s ease-in-out 0.2s, opacity 0.25s ease-out !important;
}
[data-direction="backward"][data-state="loading"] .mock-logo svg {
  transition: width 0.45s ease-in-out 0.2s, height 0.45s ease-in-out 0.2s !important;
}
/* Backward E logo in other states: snap position/size, only animate opacity */
[data-direction="backward"]:not([data-state="loading"]) .mock-logo {
  transition: opacity 0.25s ease-out !important;
}
[data-direction="backward"]:not([data-state="loading"]) .mock-logo svg {
  transition: none !important;
}

/* Mobile scaling handled by JS — sets --mock-scale on .phone-scale */

/* ── Carousel fallback: frozen mocks, no transitions ── */
.demo-carousel .phone-frame,
.demo-carousel .phone-frame * {
  transition: none !important;
  animation: none !important;
}
.demo-carousel .phone-frame {
  background: var(--mock-bg);
  box-shadow: var(--mock-shadow);
}
.demo-carousel .mock-status { opacity: 1; }

/* ── Desktop: show phone frame bg + status bar in loading state ── */
@media (min-width: 721px) {
  .phone-frame {
    background: var(--mock-bg);
    box-shadow: var(--mock-shadow);
  }
  .mock-status {
    opacity: 1;
  }
}