/* ═══════════════════════════════════════════════════════════
   home_1-mobile.css — Tablet + Mobile stacked responsive
   Loaded only at ≤1024px, replaces the cinematic world
   ═══════════════════════════════════════════════════════════ */

@media (max-width: 1024px) {

  /* ── Kill cinematic world ────────────────────────────── */
  body {
    min-height: auto;
    overflow-x: hidden;
    overflow-y: auto;
  }

  .scroll-space { display: none !important; }
  .meter { display: none !important; }
  .ambient-orb { display: none !important; }
  .world::before { display: none; }

  /* ── Viewport → static flow ──────────────────────────── */
  .viewport {
    position: static;
    overflow: visible;
    contain: none;
    background:
      radial-gradient(circle at 12% 8%, rgba(10, 92, 60, 0.08), transparent 30%),
      linear-gradient(180deg, #17110b 0%, #0f0b06 100%);
  }

  /* ── World → static stacked ──────────────────────────── */
  .world {
    position: static;
    width: 100%;
    height: auto;
    transform: none !important;
    will-change: auto;
    backface-visibility: visible;
    background: none;
  }

  /* ── Intro overlay ───────────────────────────────────── */
  .intro-overlay {
    position: fixed;
    inset: 0;
    z-index: 100;
    transition: opacity 0.6s ease;
  }

  .intro-overlay.mobile-done {
    opacity: 0 !important;
    pointer-events: none;
  }

  .intro-curtain {
    filter: none;
  }

  .intro-curtain::after { display: none; }

  .intro-overlay::before {
    background: rgba(128, 128, 128, 0.94);
  }

  /* ── Scenes → stacked sections ───────────────────────── */
  .scene,
  .scene-hero,
  .scene-hosts,
  .scene-podcasts,
  .scene-final {
    position: static !important;
    width: 100% !important;
    height: auto !important;
    left: auto !important;
    top: auto !important;
    padding: 52px 20px;
    contain: none !important;
    content-visibility: visible !important;
    contain-intrinsic-size: none !important;
    overflow: visible !important;
  }

  .scene-hero { padding-top: 0; }

  /* ── Hero tile ───────────────────────────────────────── */
  .hero-tile {
    position: relative;
    left: auto; top: auto;
    width: 100%;
    height: auto;
    min-height: 56vh;
    padding: 48px 24px;
    box-shadow: none;
  }

  .hero-copy-wrap {
    max-width: 100%;
  }

  .hero-main-copy h1 {
    font-size: clamp(32px, 8vw, 52px);
    max-width: 14ch;
  }

  .hero-main-copy p {
    font-size: 16px;
    max-width: 40ch;
  }

  .hero-actions {
    gap: 10px;
  }

  .btn {
    min-height: 44px;
    padding: 10px 16px;
    font-size: 13px;
  }

  /* ── Image panel → below hero ────────────────────────── */
  .image-panel {
    position: relative;
    left: auto; top: auto;
    width: 100%;
    max-width: 320px;
    height: 200px;
    margin: 20px auto 0;
    box-shadow: 0 16px 32px rgba(0, 0, 0, 0.18);
  }

  .image-panel::before { display: none; }

  /* ── Social panel → row below hero ───────────────────── */
  .social-panel {
    position: relative;
    left: auto; top: auto;
    width: 100%;
    justify-content: center;
    margin: 20px auto 0;
    padding: 12px 16px;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: rgba(12, 9, 6, 0.7);
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.1);
  }

  .social-panel a { width: 38px; height: 38px; }
  .social-panel img { width: 24px; height: 24px; }

  /* ── Motion menu → centered row ──────────────────────── */
  .motion-menu {
    position: relative;
    left: auto; top: auto;
    justify-content: center;
    margin: 16px auto 0;
    flex-wrap: wrap;
  }

  .motion-menu a {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: rgba(12, 9, 6, 0.82);
    min-height: 42px;
    padding: 10px 16px;
    font-size: 12px;
  }

  /* ── Copy blocks → static flow ───────────────────────── */
  .copy-block,
  .host-copy,
  .podcast-copy,
  .final-copy {
    position: static !important;
    left: auto !important;
    top: auto !important;
    max-width: 100% !important;
    margin-bottom: 24px;
  }

  .copy-block::before {
    filter: none;
    background: rgba(16, 11, 7, 0.4);
  }

  .copy-block h2 {
    font-size: clamp(26px, 6vw, 36px);
  }

  .copy-block p {
    font-size: 16px;
    max-width: 100%;
  }

  /* ── Hosts section ───────────────────────────────────── */
  .scene-hosts {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 0;
  }

  .host-visual {
    position: relative;
    left: auto !important;
    top: auto !important;
    width: 100%;
    max-width: 320px;
    height: auto;
    margin-bottom: 16px;
  }

  .host-one,
  .host-two {
    left: auto; top: auto;
    width: 100%;
    max-width: 320px;
    height: auto;
    aspect-ratio: 2 / 3;
  }

  .host-panel {
    box-shadow: 0 18px 36px rgba(0, 0, 0, 0.2);
  }

  .host-name {
    position: relative;
    top: auto;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: rgba(16, 12, 8, 0.82);
    font-size: 18px;
    padding: 12px 14px;
  }

  .host-tag {
    position: static !important;
    left: auto !important;
    top: auto !important;
    width: 100%;
    max-width: 500px;
    margin-top: 16px;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: rgba(12, 9, 6, 0.7);
    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.14);
  }

  .host-tag strong { font-size: 19px; }
  .host-tag span { font-size: 14px; }

  /* ── Podcasts section ────────────────────────────────── */
  .scene-podcasts {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 12px !important;
  }

  .more-episodes-cta {
    position: static !important;
    left: auto !important;
    top: auto !important;
    margin-bottom: 8px;
    font-size: 13px;
  }

  .podcast-card,
  .podcast-1,
  .podcast-2,
  .podcast-3,
  .podcast-4,
  .podcast-5,
  .podcast-6 {
    position: static !important;
    left: auto !important;
    top: auto !important;
    width: 100% !important;
    max-width: 500px;
    height: auto !important;
    aspect-ratio: 16 / 10;
    margin: 0 auto;
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.2);
    transform: none;
  }

  .podcast-card .meta h3 { font-size: 15px; }

  /* ── Final section ───────────────────────────────────── */
  .scene-final {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 0;
  }

  .gallery-panel {
    position: static !important;
    left: auto !important;
    top: auto !important;
    width: 100%;
    max-width: 500px;
    height: auto;
    aspect-ratio: 16 / 10;
    margin-bottom: 20px;
    box-shadow: 0 18px 36px rgba(0, 0, 0, 0.2);
  }

  .logo-panel {
    position: static !important;
    left: auto !important;
    top: auto !important;
    width: 160px; height: 160px;
    margin-bottom: 20px;
    box-shadow: 0 14px 28px rgba(10, 92, 60, 0.2);
  }

  .contact-panel {
    position: static !important;
    left: auto !important;
    top: auto !important;
    width: 100%;
    max-width: 500px;
    background: transparent;
  }

  .contact-panel::before {
    display: none;
  }

  .contact-panel h2 { font-size: 26px; }
  .contact-panel p { font-size: 15px; max-width: 100%; }

  .contact-list {
    justify-content: center;
  }

  .contact-list a {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: rgba(11, 8, 5, 0.7);
    font-size: 13px;
    padding: 10px 14px;
  }

  /* ── End stack / footer → normal flow ────────────────── */
  .end-stack {
    position: static !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: none !important;
    transition: none !important;
  }

  .end-footer {
    width: 100%;
    height: auto;
    min-height: auto;
    padding: 48px 20px 0;
  }

  .end-footer-inner {
    width: 100%;
    max-width: 600px;
    flex: none;
    gap: 14px;
  }

  .end-footer-brand img {
    width: min(120px, 30vw);
  }

  .end-footer-brand::before {
    width: min(160px, 36vw);
    height: min(160px, 36vw);
  }

  .end-footer p { font-size: 14px; }

  .end-footer-links {
    gap: 8px;
  }

  .end-footer-links a {
    padding: 9px 12px;
    font-size: 13px;
  }

  .end-marquee {
    padding: 14px 0;
  }

  .end-marquee-track {
    gap: 28px;
    animation-duration: 20s;
  }

  .end-marquee-item {
    width: 100px; height: 36px;
  }

  /* ── Mobile fade-in animations ───────────────────────── */
  .mobile-fade-target {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.5s ease-out, transform 0.5s ease-out;
  }

  .mobile-fade-target.is-visible {
    opacity: 1 !important;
    transform: translateY(0) !important;
  }
}

/* ── Extra small screens ───────────────────────────────── */
@media (max-width: 480px) {
  .scene { padding: 36px 16px; }

  .hero-tile { padding: 36px 18px; min-height: 48vh; }

  .hero-main-copy h1 { font-size: clamp(28px, 8vw, 40px); }

  .host-one,
  .host-two {
    max-width: 260px;
  }

  .podcast-card {
    max-width: 100%;
  }

  .end-footer { padding: 36px 16px 0; }
}