/* Global resets + shared keyframes used across all three Luunr directions. */

*, *::before, *::after { box-sizing: border-box; }

.luunr-board {
  container-type: inline-size;
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  overflow: hidden;
  position: relative;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  text-wrap: pretty;
}
.luunr-board img { display: block; max-width: 100%; }
.luunr-board p { margin: 0; }
.luunr-board h1, .luunr-board h2, .luunr-board h3, .luunr-board h4 { margin: 0; }
.luunr-board a { color: inherit; text-decoration: none; }

/* ─── Responsive ─────────────────────────────────────────────────────────────
   Each artboard sets `container-type: inline-size` on `.luunr-board`, so the
   queries below respond to the artboard's own rendered width — not the user's
   viewport. This lets us show 375 / 768 / 1280 artboards side-by-side in the
   design canvas and have each one render its correct breakpoint.

   Breakpoints:
   - default (>= 1100px) — desktop, the original inline styles win.
   - TABLET (701–1100px)  — fired by the 768 artboard. Lighter scaling:
       keep nav links, hold key 2-col layouts, scale the moon and type but
       don't collapse the whole page to one column.
   - NARROW (≤ 700px)    — full mobile stacking. Fired by anyone narrower
       than the tablet artboard. We render DirectionAPhone at 375 instead of
       relying on this, but it stays in place as a fallback if DirectionA is
       deployed standalone.

   The override strategy: inline styles set the desktop values; these blocks
   fire only at narrow widths and override with `!important`.
*/

/* ════════════════ TABLET (≤ 1100px) ════════════════
   Used by the 768 artboard. Lighter touch — keep some 2-col layouts.
*/
@container (max-width: 1100px) {
  .luunr-board > section { padding: 88px 44px !important; }
  .luunr-board > nav     { padding: 20px 40px !important; }
  .luunr-board > footer  { padding: 80px 44px 48px !important; }

  .luunr-board h1 { font-size: clamp(56px, 9.5cqi, 96px) !important; line-height: 0.98 !important; }
  .luunr-board h2 { font-size: clamp(38px, 6.5cqi, 56px) !important; line-height: 1.02 !important; }
  .luunr-board h3 { font-size: clamp(22px, 3.6cqi, 30px) !important; }

  /* Hero stays 2-col but with a smaller moon column */
  .lu-stack { gap: 48px !important; }

  /* Specifically the hero — keep 2-col but tighter ratio */
  section[data-screen-label="01 Hero"] .lu-stack {
    grid-template-columns: 1fr 380px !important;
  }
  .lu-hero-moon-wrap { transform: scale(0.78); transform-origin: top center; height: 380px !important; }
  /* Prevent the moon from being flex-shrunk to fit the column — otherwise the
     460×460 layout box gets squished into a 380×460 rectangle BEFORE the
     visual scale applies, producing an oval. */
  .lu-hero-moon-wrap > * { flex-shrink: 0 !important; }
  .lu-hero-orbit { display: none !important; }

  /* Pillars stay 2-col */
  /* (no override — desktop's 1fr 1fr inline holds) */

  /* Sub-grid step / age / faq rows stay multi-col but tighter */
  .lu-how-row { grid-template-columns: 56px 1fr !important; gap: 24px !important; padding: 32px 0 !important; }
  .lu-how-row > :last-child { display: none !important; }   /* drop step diagram */

  /* Voice section stacks at tablet — the 2-col is too cramped */
  section[data-screen-label="05 Voice"] .lu-stack { grid-template-columns: 1fr !important; }
  .lu-voice-cycler-second{ display: none !important; }
  .lu-voice-cycler-main  { max-width: 480px !important; margin: 0 auto !important; }
  .lu-voice-cycler-main > div { width: 100% !important; }

  /* Categories: 6 → 3 */
  .lu-cat-grid { grid-template-columns: repeat(3, 1fr) !important; gap: 14px !important; }
  .lu-cat-card { min-height: 200px !important; padding: 18px !important; }

  /* Reviews: stack but cleaner */
  section[data-screen-label="08 Reviews"] .lu-stack { grid-template-columns: 1fr !important; gap: 28px !important; }

  /* Screenshots: 4 → 2 */
  .lu-shots-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 22px !important; }

  /* Made for 1+ stacks */
  section[data-screen-label="10 Made for 1+"] .lu-stack { grid-template-columns: 1fr !important; }

  /* Privacy + About: stack */
  section[data-screen-label="11 Privacy"] .lu-stack { grid-template-columns: 1fr !important; }
  section[data-screen-label="12 About"] .lu-stack { grid-template-columns: 1fr !important; }

  /* FAQ stays 2-col header layout but tighter */
  section[data-screen-label="13 FAQ"] .lu-stack {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }
  .lu-faq-row { grid-template-columns: 40px 1fr !important; gap: 18px !important; padding: 26px 0 !important; }

  /* Footer wordmark scales down */
  h2.lu-footer-wordmark { font-size: clamp(96px, 18cqi, 140px) !important; }

  .lu-marquee-cell { width: 80px !important; height: 80px !important; font-size: 38px !important; }

  .lu-stats { gap: 32px !important; }
}

/* ════════════════ NARROW (≤ 700px) — phone fallback ════════════════
   We use DirectionAPhone at 375 instead, but this remains for when
   DirectionA is deployed alone and viewed on a phone.
*/
@container (max-width: 700px) {
  .luunr-board > section { padding: 56px 20px !important; }
  .luunr-board > nav     { padding: 14px 18px !important; }
  .luunr-board > footer  { padding: 56px 20px 32px !important; }

  .luunr-board h1 { font-size: clamp(34px, 11cqi, 52px) !important; }
  .luunr-board h2 { font-size: clamp(26px, 8.5cqi, 40px) !important; }
  .luunr-board h3 { font-size: clamp(20px, 5cqi, 26px) !important; }

  .lu-nav__links { display: none !important; }

  .lu-stack       { grid-template-columns: 1fr !important; gap: 36px !important; }
  .lu-pillars     { grid-template-columns: 1fr !important; }
  .lu-pillar      { padding: 28px !important; border-left: none !important; }
  .lu-pillar + .lu-pillar { border-top: 1px solid rgba(244, 236, 218, 0.12) !important; }

  /* Reset the hero-specific override from the tablet rule */
  section[data-screen-label="01 Hero"] .lu-stack { grid-template-columns: 1fr !important; }
  .lu-hero-moon-wrap { transform: scale(0.46); height: 230px !important; }
  .lu-hero-orbit     { display: none !important; }
  .lu-hero-eyebrow   { flex-wrap: wrap !important; gap: 6px 14px !important; }
  .lu-hero-eyebrow > span:nth-child(2) { display: none !important; }
  .lu-hero-cta-row > a { justify-content: center !important; flex: 1 1 100% !important; }

  .lu-ages-row    { grid-template-columns: 1fr !important; gap: 6px !important; padding: 18px 0 !important; }

  .lu-voice-langs        { grid-template-columns: 1fr !important; }
  .lu-voice-cycler-main  { width: 100% !important; padding: 20px !important; }

  .lu-cat-grid   { grid-template-columns: 1fr 1fr !important; }
  .lu-cat-card   { min-height: 150px !important; }

  .lu-shots-grid { grid-template-columns: 1fr !important; }

  .lu-marquee-cell { width: 60px !important; height: 60px !important; font-size: 28px !important; border-radius: 14px !important; }

  .lu-stats   { gap: 18px 28px !important; flex-wrap: wrap !important; }
  .lu-stat-v  { font-size: 26px !important; }

  .lu-footer-top      { flex-direction: column !important; align-items: flex-start !important; gap: 28px !important; }
  h2.lu-footer-wordmark { font-size: clamp(72px, 22cqi, 120px) !important; }
  .lu-footer-bottom   { flex-direction: column !important; align-items: flex-start !important; gap: 14px !important; }
  .lu-footer-links    { flex-wrap: wrap !important; gap: 12px 18px !important; }
}

/* ─── Shared keyframes (so all 3 directions can riff on the rocket motion) ─── */

@keyframes luunr-rocket-loop {
  0%   { transform: translateX(0); }
  55%  { transform: translateX(var(--rocket-end, 280px)); }
  60%  { transform: translateX(var(--rocket-end, 280px)) translateY(0) rotate(-2deg); }
  75%  { transform: translateX(var(--rocket-end, 280px)) translateY(-260px) rotate(-6deg); opacity: 1; }
  80%  { transform: translateX(var(--rocket-end, 280px)) translateY(-340px) rotate(-8deg); opacity: 0; }
  82%  { transform: translateX(0) translateY(0); opacity: 0; }
  90%  { transform: translateX(0); opacity: 1; }
  100% { transform: translateX(0); }
}

@keyframes luunr-flame-pulse {
  0%, 49% { opacity: 0; transform: scaleX(0.2) scaleY(0.5); }
  50%     { opacity: 0.6; transform: scaleX(1) scaleY(0.8); }
  60%, 80%{ opacity: 0.95; transform: scaleX(1.4) scaleY(1.2); }
  85%     { opacity: 0; transform: scaleX(0.4) scaleY(0.4); }
  100%    { opacity: 0; }
}

@keyframes luunr-emoji-drop {
  0%   { transform: translate(var(--emoji-from-x, 0), -180px) scale(0.4); opacity: 0; }
  20%  { opacity: 1; }
  60%  { transform: translate(0, 0) scale(1.15); opacity: 1; }
  72%  { transform: translate(0, 0) scale(0.95); }
  100% { transform: translate(0, 0) scale(1); opacity: 1; }
}

@keyframes luunr-star-twinkle {
  0%, 100% { opacity: 0.25; }
  50%      { opacity: 1; }
}

@keyframes luunr-moon-float {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-10px) rotate(0.6deg); }
}

@keyframes luunr-spin-slow {
  to { transform: rotate(360deg); }
}

@keyframes luunr-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* Reduced-motion: kill the rocket animation but leave gentle floats. */
@media (prefers-reduced-motion: reduce) {
  .luunr-board * {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
  }
}