/* ==========================================================================
   NOVA DENTAL — RESPONSIVE LAYER
   Loaded last. Two jobs:
   A) Phones / tablets / touch ("stacked mode", same query film-strip.css uses
      for its fallback): real layout for hero, the five treatment chapters
      (each with its own tooth still), booking form and footer.
   B) Large screens (2K / ultrawide / 4K): the desktop film was drawn at a
      fixed ~1600px design size. --uiz scales the UI blocks up with the screen
      so nothing floats small in the middle.
   ========================================================================== */

/* --------------------------------------------------------------------------
   B. Large-screen scale factor  ≈ min(width / 1600, height / 900)
   (heights are the browser's inner height, not the monitor's)
   -------------------------------------------------------------------------- */
:root { --uiz: 1; }
@media (min-width: 1800px) and (min-height: 1000px) { :root { --uiz: 1.1; } }
@media (min-width: 2100px) and (min-height: 1150px) { :root { --uiz: 1.25; } }
@media (min-width: 2300px) and (min-height: 1260px) { :root { --uiz: 1.4; } }
@media (min-width: 2800px) and (min-height: 1550px) { :root { --uiz: 1.7; } }
@media (min-width: 3400px) and (min-height: 1900px) { :root { --uiz: 2; } }

/* hidden outside stacked mode */
.hero-mobile-tooth,
.journey-mobile-tooth { display: none; }

@media (min-width: 1025px) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  /* hero */
  .hero-container {
    max-width: calc(1600px * var(--uiz));
    --tooth-w: min(calc(560px * var(--uiz)), 42vw, calc((100svh - 180px) * 0.88));
  }
  .hero-left-col { zoom: var(--uiz); }
  .hero-scroll-indicator { zoom: var(--uiz); }

  /* the tooth film */
  .journey-fixed-stage,
  .film-tooth-stage { height: min(65vh, calc(600px * var(--uiz))); }
  .journey-callout-pill { zoom: var(--uiz); }

  /* chapter text: scale the contents, not the positioned column itself */
  .journey-editorial-col { width: min(calc(520px * var(--uiz)), 38vw); max-width: none; }
  .journey-editorial-col > * { zoom: var(--uiz); }
  .journey-editorial-headline { max-width: calc(30vw / var(--uiz)); }
  .journey-pos-01 { max-width: min(calc(460px * var(--uiz)), 28vw); }
  .journey-pos-02 { max-width: min(calc(440px * var(--uiz)), 27vw); }
  .journey-pos-03,
  .journey-pos-04,
  .journey-pos-05 { max-width: min(calc(460px * var(--uiz)), 28vw); }

  /* why nova + booking/footer blocks */
  .why-nova-container { zoom: var(--uiz); }
  .booking-stage-wrap { zoom: var(--uiz); }

  /* navbar: brand + booking scale as blocks; links scale by size so the
     sliding marker (measured in screen px) stays aligned */
  .navbar { --nav-h: calc(76px * var(--uiz)); }
  .navbar.scrolled { --nav-h: calc(66px * var(--uiz)); }
  .navbar::before { height: calc(150px * var(--uiz)); }
  .navbar .brand-logo,
  .navbar .nav-end { zoom: var(--uiz); }
  .navbar .nav-link,
  .navbar .nav-link:hover,
  .navbar .nav-link.active {
    font-size: calc(11.5px * var(--uiz));
    padding: calc(12px * var(--uiz)) calc(16px * var(--uiz));
    gap: calc(7px * var(--uiz));
  }
  .navbar .nav-index { font-size: calc(9px * var(--uiz)); }
  .navbar .nav-pill-indicator::after {
    width: calc(22px * var(--uiz));
    margin-left: calc(-11px * var(--uiz));
  }
}

/* --------------------------------------------------------------------------
   A. Stacked mode (phones, tablets, touch, reduced motion)
   -------------------------------------------------------------------------- */
@media (max-width: 1024px), (pointer: coarse), (prefers-reduced-motion: reduce) {

  html, body { overflow-x: clip; }

  /* the live WebGL tooth is a desktop-film device; stills take over here */
  .journey-fixed-stage,
  .film-tooth-stage { display: none !important; }

  /* ---------- Hero ---------- */
  .panel-hero {
    height: auto !important;
    min-height: 100svh !important;
  }
  .panel-hero .hero-section { min-height: 100svh; }
  .hero-container {
    max-width: 760px;
    padding: 92px 6vw 56px !important;
  }
  .hero-grid {
    grid-template-columns: 1fr !important;
    gap: 0 !important;
    padding-bottom: 0 !important;
    text-align: center;
  }
  .hero-center-col,
  .hero-right-col,
  .hero-scroll-indicator { display: none !important; }
  .hero-left-col {
    max-width: 100% !important;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .hero-mobile-tooth {
    display: block;
    position: relative;
    width: clamp(150px, 40vw, 240px);
    margin: 0 auto 18px;
  }
  .hero-mobile-tooth::before {
    content: '';
    position: absolute;
    inset: 10% -30% 0;
    z-index: -1;
    background: radial-gradient(closest-side, rgba(139, 124, 255, .45), transparent 75%);
    filter: blur(6px);
  }
  .hero-mobile-tooth img {
    display: block;
    width: 100%;
    height: auto;
    filter: drop-shadow(0 26px 30px rgba(10, 4, 40, .55));
    animation: novaFloat 6s ease-in-out infinite;
  }

  .hero-pretitle { margin-bottom: 10px; }
  .hero-heading { font-size: clamp(34px, 9.4vw, 56px) !important; line-height: 1.04; }
  .hero-subtitle {
    font-size: clamp(15px, 4vw, 18px);
    max-width: 34ch;
    margin: 14px auto 0;
  }
  .hero-features-row {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 18px 20px !important;
    max-width: 460px;
    width: 100%;
    margin: 26px auto 0;
    text-align: left;
  }
  .feature-divider { display: none !important; }
  .hero-cta-wrap { margin-top: 28px; }

  /* ---------- Treatment journey: one card per stage ---------- */
  .panel-journey { padding: 24px 0 !important; }

  .journey-chapter-slide {
    display: grid !important;
    grid-template-columns: 1fr;
    align-items: center !important;
    justify-items: center;
    gap: 6px;
    min-height: 0 !important;
    padding: 44px 6vw 36px !important;
    text-align: center;
    position: relative !important;
  }
  .journey-chapter-slide + .journey-chapter-slide::before {
    content: '';
    position: absolute;
    top: 0;
    left: 12%;
    right: 12%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(199, 184, 255, .28), transparent);
  }
  .journey-editorial-col {
    align-items: center;
    max-width: 520px !important;
  }
  .journey-editorial-index { justify-content: center; }
  .journey-editorial-headline { font-size: clamp(30px, 8vw, 46px) !important; }
  .journey-editorial-sentence { font-size: clamp(15px, 4vw, 18px); }

  .journey-mobile-tooth {
    display: flex;
    justify-content: center;
    position: relative;
    margin: 18px 0 0;
  }
  .journey-mobile-tooth::before {
    content: '';
    position: absolute;
    inset: 18% 8% 6%;
    z-index: -1;
    background: radial-gradient(closest-side, rgba(139, 124, 255, .40), transparent 75%);
    filter: blur(8px);
  }
  .journey-mobile-tooth img {
    display: block;
    width: auto;
    height: clamp(230px, 40vh, 380px);
    max-width: 70vw;
    object-fit: contain;
    filter: drop-shadow(0 26px 30px rgba(10, 4, 40, .55));
  }

  /* tablets: text and tooth side by side, alternating */
  @media (min-width: 640px) {
    .journey-chapter-slide {
      grid-template-columns: 1.1fr .9fr;
      text-align: left;
      justify-items: stretch;
      gap: 40px;
      padding: 56px 7vw !important;
    }
    .journey-editorial-col { align-items: flex-start; }
    .journey-editorial-index { justify-content: flex-start; }
    .journey-mobile-tooth { margin: 0; }
    .journey-chapter-slide:nth-child(even) .journey-mobile-tooth { order: -1; }
  }

  /* ---------- Why Nova ---------- */
  .panel-why-nova { padding: 72px 6vw 48px !important; }
  .why-nova-container { height: auto !important; }

  /* ---------- Booking + footer: stack, full width ---------- */
  .panel-booking { padding: 64px 6vw 40px !important; }
  .booking-stage-wrap {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 32px !important;
  }
  .booking-film-container {
    max-width: none !important;
    width: 100%;
    grid-template-columns: 1fr !important;
  }
  .booking-form-card { padding: 24px !important; }
  .film-strip-footer {
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
    padding: 32px 24px !important;
    gap: 28px;
  }
}

/* phones: one field per row in the booking form */
@media (max-width: 560px) {
  .booking-grid-inner { grid-template-columns: 1fr !important; gap: 16px !important; }
  .booking-full-width { grid-column: span 1 !important; }
  .booking-invite-title { font-size: clamp(28px, 8vw, 36px) !important; }
  .booking-invite-desc { font-size: 16px !important; }
}

/* very small phones */
@media (max-width: 370px) {
  .hero-features-row { gap: 14px 12px !important; }
  .feature-title { font-size: 13px; }
}

/* ---------- scroll reveal for stacked mode (responsive.js adds .rv-on) ---------- */
@media (prefers-reduced-motion: no-preference) {
  html.rv-on .journey-chapter-slide .journey-editorial-col,
  html.rv-on .journey-chapter-slide .journey-mobile-tooth {
    opacity: 0 !important;
    transform: translateY(28px) !important;
    transition: opacity .9s cubic-bezier(.16, 1, .3, 1), transform 1.1s cubic-bezier(.16, 1, .3, 1) !important;
  }
  html.rv-on .journey-chapter-slide .journey-mobile-tooth { transition-delay: .12s !important; }
  html.rv-on .journey-chapter-slide.rv-in .journey-editorial-col,
  html.rv-on .journey-chapter-slide.rv-in .journey-mobile-tooth {
    opacity: 1 !important;
    transform: none !important;
  }
}

@keyframes novaFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-mobile-tooth img { animation: none; }
}


/* --------------------------------------------------------------------------
   C. Pinned tooth film in stacked mode (mobile-film.js adds html.mfilm-on and
      moves #film-tooth-stage into #journey as .mfilm-stage)
   -------------------------------------------------------------------------- */
@media (max-width: 1024px), (pointer: coarse), (prefers-reduced-motion: reduce) {
  html.mfilm-on .journey-fixed-stage.mfilm-stage,
  html.mfilm-on .film-tooth-stage.mfilm-stage {
    display: flex !important;
    position: sticky !important;
    top: 68px !important;
    left: auto !important;
    transform: none !important;
    z-index: 3;
    width: auto !important;
    height: min(42svh, 400px) !important;
    max-width: 80vw !important;
    aspect-ratio: 434 / 702;
    margin: 0 auto !important;
    pointer-events: none;
  }
  html.mfilm-on .mfilm-stage .journey-single-callout { display: none; }

  /* stills are only the fallback now */
  html.mfilm-on .journey-mobile-tooth { display: none !important; }

  /* each stage gets about a screen of scroll to play its clip */
  html.mfilm-on .journey-chapter-slide {
    min-height: 78svh !important;
    align-content: center;
    padding: 6svh 7vw !important;
  }
  html.mfilm-on .journey-chapter-slide + .journey-chapter-slide::before { display: none; }
  html.mfilm-on .journey-editorial-col { will-change: transform, opacity; }
}

/* tablets: tooth pinned in the left column, copy in the right */
@media (min-width: 640px) and (max-width: 1024px), (min-width: 640px) and (pointer: coarse) {
  html.mfilm-on .panel-journey {
    display: grid !important;
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
    column-gap: 4vw;
    padding: 0 5vw !important;
  }
  html.mfilm-on .film-tooth-stage.mfilm-stage {
    grid-column: 1;
    grid-row: 1 / span 40;
    align-self: start;
    top: calc(50svh - min(30svh, 300px)) !important;
    height: min(60svh, 600px) !important;
    max-width: 42vw !important;
  }
  html.mfilm-on .panel-journey > :not(.mfilm-stage) { grid-column: 2; }
  html.mfilm-on .journey-chapter-slide {
    grid-template-columns: 1fr !important;
    min-height: 90svh !important;
    padding: 0 !important;
  }
  html.mfilm-on .panel-journey .kinetic-line.kl-flow { text-align: left; padding: 22vh 0; }
  html.mfilm-on .panel-journey .kinetic-line.kl-flow .kl-half { text-align: left; }
}


/* Reload mid-page: keep the film hidden for the moment it takes scroll-restore.js
   to put the camera back (failsafe 2.5 s), then fade in. */
html.nova-restoring .film-strip-main,
html.nova-restoring .header { opacity: 0; }
.film-strip-main, .header { transition: opacity .45s ease; }