/* Ursula landing, mobile layer.
   Loaded after landing-motion.css. Every rule below is scoped to phones and tablets; the desktop scenes are untouched.
   Breakpoints: <= 980px compact bar + hamburger menu; <= 700px phone hero, phone scroll pacing, portrait hero photo. */

:root {
  --m-bar-h: 56px;
  /* Safe-area insets (notch, home indicator, landscape sides). Requires viewport-fit=cover, set in index.html. */
  --sat: env(safe-area-inset-top, 0px);
  --sar: env(safe-area-inset-right, 0px);
  --sab: env(safe-area-inset-bottom, 0px);
  --sal: env(safe-area-inset-left, 0px);
  --m-ink: #14121d;
  --m-line: rgba(255, 255, 255, .10);
  --m-focus: #b6abff;
}

/* Desktop never shows any of the mobile controls. */
.m-toggle, .m-menu, .hero-skip, .reel-skip { display: none; }

/* Poster fallback: if the hero photo fails to load, the hero is still a composed dark scene with the same palette. */
html.hero-poster-failed body.cinematic-home .home-hero::before {
  background:
    radial-gradient(60% 42% at 74% 66%, rgba(154, 140, 255, .34), transparent 70%),
    radial-gradient(52% 38% at 18% 86%, rgba(60, 111, 245, .22), transparent 70%),
    linear-gradient(180deg, #14121d, #1c1832) !important;
  -webkit-mask-image: none !important; mask-image: none !important;
}

@media (max-width: 980px) {
  /* Anchor targets land below the fixed bar, so section headings are never covered. */
  html { scroll-padding-top: calc(var(--m-bar-h) + var(--sat) + 8px); }

  /* ---- 1. Persistent bar: brand left, hamburger right. It lives on <body>, outside every pinned scene. ---- */
  html body.cinematic-home .home-nav,
  html body.cinematic-home .home-nav.on-dark {
    position: fixed; top: 0; left: 0; right: 0; z-index: 200;
    width: 100%; max-width: none; margin: 0; transform: none; translate: none;
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    min-height: calc(var(--m-bar-h) + var(--sat)); height: auto;
    padding: var(--sat) max(12px, var(--sar)) 0 max(14px, var(--sal));
    border: 0 !important; border-bottom: 1px solid var(--m-line) !important; border-radius: 0 !important;
    background: var(--m-ink) !important; color: #f4f0ff !important;
    box-shadow: 0 10px 28px -14px rgba(8, 7, 14, .6) !important;
    -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
  }
  html body.cinematic-home .home-nav::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; pointer-events: none;
    background: linear-gradient(90deg, transparent, rgba(154, 140, 255, .75), rgba(103, 152, 255, .5), transparent);
  }
  html body.cinematic-home .home-nav .home-links,
  html body.cinematic-home .home-nav .home-account { display: none !important; }
  html body.cinematic-home .home-nav .home-brand {
    display: flex; align-items: center; flex: 0 0 auto; width: 132px !important; height: 44px !important; margin: 0;
  }
  /* The bar is always the brand dark, so it always carries the light wordmark. */
  html body.cinematic-home .home-nav .ursula-brand-logo-light { display: none !important; }
  html body.cinematic-home .home-nav .ursula-brand-logo-dark { display: block !important; }

  html body.cinematic-home .m-toggle,
  html body.cinematic-home .m-close {
    display: inline-grid; place-items: center; flex: 0 0 auto;
    width: 44px; height: 44px; min-width: 44px; min-height: 44px; padding: 0;
    border: 1px solid rgba(255, 255, 255, .20); border-radius: 12px;
    background: rgba(255, 255, 255, .07); color: #fff; cursor: pointer;
    -webkit-tap-highlight-color: transparent; transition: background-color .18s, border-color .18s;
  }
  html body.cinematic-home .m-toggle:hover,
  html body.cinematic-home .m-close:hover { background: rgba(255, 255, 255, .14); }
  html body.cinematic-home :is(.m-toggle, .m-close, .m-menu a, .m-btn, .m-theme, .hero-skip, .reel-skip):focus-visible {
    outline: 2px solid var(--m-focus); outline-offset: 2px;
  }
  .m-toggle-bars { display: grid; gap: 5px; width: 20px; }
  .m-toggle-bars i { display: block; height: 2px; border-radius: 2px; background: currentColor; }
  .m-toggle-bars i:nth-child(2) { width: 14px; justify-self: end; }
  .m-close svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }

  /* ---- Menu dialog ---- */
  html.m-menu-open, html.m-menu-open body { overflow: hidden; }
  .m-menu {
    position: fixed; inset: 0; z-index: 300; flex-direction: column; overflow-y: auto; overscroll-behavior: contain;
    padding: var(--sat) max(20px, var(--sar)) calc(var(--sab) + 24px) max(20px, var(--sal));
    color: #f4f0ff;
    background:
      radial-gradient(120% 60% at 100% 0%, rgba(96, 71, 239, .38), transparent 60%),
      radial-gradient(90% 50% at 0% 100%, rgba(60, 111, 245, .16), transparent 60%),
      var(--m-ink);
  }
  .m-menu:not([hidden]) { display: flex; }
  .m-menu.is-open { animation: mMenuIn .22s ease-out both; }
  @keyframes mMenuIn { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }
  /* Same insets as the bar, so the brand and the close button sit exactly where the brand and hamburger were. */
  .m-menu-top {
    display: flex; align-items: center; justify-content: space-between; min-height: var(--m-bar-h);
    margin-left: calc(max(14px, var(--sal)) - max(20px, var(--sal)));
    margin-right: calc(max(12px, var(--sar)) - max(20px, var(--sar)));
  }
  .m-menu-brand { display: flex; align-items: center; width: 132px; height: 44px; }
  .m-menu-brand img { display: block; width: 100%; height: 100%; object-fit: contain; object-position: left center; }
  .m-menu-title { margin: 26px 0 10px; color: var(--m-focus); font: 700 11px/1 Inter, system-ui, sans-serif; letter-spacing: .16em; text-transform: uppercase; }
  .m-menu-links { display: grid; border-top: 1px solid var(--m-line); }
  .m-menu-links a {
    display: flex; align-items: center; justify-content: space-between; min-height: 64px; padding: 0 4px;
    border-bottom: 1px solid var(--m-line); color: #fff; text-decoration: none;
    font: 600 28px/1.1 Inter, system-ui, sans-serif; letter-spacing: -.03em;
    -webkit-tap-highlight-color: transparent; transition: background-color .15s;
  }
  .m-menu-links a::after {
    content: ""; width: 9px; height: 9px; border-top: 2px solid rgba(255, 255, 255, .55); border-right: 2px solid rgba(255, 255, 255, .55);
    transform: rotate(45deg); margin-right: 4px;
  }
  .m-menu-links a:hover, .m-menu-links a:active { background: rgba(255, 255, 255, .05); }
  .m-menu-actions { display: grid; gap: 12px; margin-top: 28px; }
  .m-btn {
    display: flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 20px;
    border: 1.5px solid transparent; border-radius: 14px; cursor: pointer; text-decoration: none;
    font: 700 16px/1 Inter, system-ui, sans-serif; letter-spacing: -.01em; -webkit-tap-highlight-color: transparent;
  }
  .m-btn-primary { background: var(--u-cta-bg, #3be6a3); color: var(--u-cta-ink, #04261a); box-shadow: inset 0 0 0 1px var(--u-cta-ring), var(--u-cta-glow); }
  .m-btn-primary:hover { background: var(--u-cta-bg-hover, #62f5c0); }
  .m-btn-login { background: rgba(154, 140, 255, .20); border-color: rgba(178, 166, 255, .62); color: #ece8ff; }
  html body.cinematic-home .m-menu .m-btn-pro { background: var(--u-pro, #f7e08a) !important; color: var(--u-pro-ink, #2a2110) !important; }
  html body.cinematic-home .m-menu .m-btn-primary { color: var(--u-cta-ink, #04261a) !important; font-weight: 750; }
  html body.cinematic-home .m-menu .m-btn-login { color: #ece8ff !important; }
  .m-theme {
    display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 56px; margin-top: 22px; padding: 0 4px;
    border: 0; border-top: 1px solid var(--m-line); background: none; color: #f4f0ff; cursor: pointer;
    font: 600 16px/1 Inter, system-ui, sans-serif; -webkit-tap-highlight-color: transparent;
  }
  .m-theme-switch { position: relative; width: 46px; height: 28px; border-radius: 99px; background: rgba(255, 255, 255, .20); transition: background-color .2s; }
  .m-theme-switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; transition: transform .2s; }
  .m-theme[aria-pressed="true"] .m-theme-switch { background: #8e80ff; }
  .m-theme[aria-pressed="true"] .m-theme-switch::after { transform: translateX(18px); }
  .m-menu-legal { display: flex; gap: 14px; margin: auto 0 0 -6px; padding-top: 26px; font: 500 13px/1 Inter, system-ui, sans-serif; }
  .m-menu-legal a { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 0 6px; color: #c9c4d6; text-underline-offset: 3px; }
}

/* ---- 2. Phone hero: bar, one headline, one action, a subtle scroll cue. The photo carries the rest.
   Applies to phones in portrait (<= 700px wide) and to phones held sideways (short landscape viewports). ---- */
@media (max-width: 700px), (max-width: 980px) and (max-height: 520px) and (orientation: landscape) {
  html body.cinematic-home .home-hero { min-height: 100svh !important; background: #0f0e15 !important; }
  html body.cinematic-home .hero-sticky {
    min-height: 100svh !important; justify-content: flex-start;
    /* Headline sits lower than the bar: about a seventh of the screen down, so it is not pressed against the top. */
    padding: calc(var(--m-bar-h) + var(--sat) + clamp(64px, 14svh, 140px)) max(22px, var(--sar)) calc(var(--sab) + 84px) max(22px, var(--sal)) !important;
  }
  html body.cinematic-home .hero-copy { margin-top: 0 !important; }
  html body.cinematic-home :is(.hero-eyebrow, .hero-intro, .hero-actions .text-link, .exam-window, .doubt, .hero-scroll-cue, .hero-aurora) { display: none !important; }
  html body.cinematic-home .hero-copy h1 { font-size: clamp(42px, 13.4vw, 66px) !important; line-height: .98 !important; }
  html body.cinematic-home .hero-actions { margin-top: 26px !important; }
  html body.cinematic-home .hero-actions .home-cta { min-height: 56px; }

  /* Visible skip control that doubles as the scroll cue. */
  html body.cinematic-home .hero-skip {
    position: absolute; left: 50%; bottom: calc(var(--sab) + 18px); transform: translateX(-50%); z-index: 6;
    display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 18px;
    border: 1px solid rgba(255, 255, 255, .18); border-radius: 99px;
    background: rgba(15, 14, 21, .58); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
    color: rgba(255, 255, 255, .88); text-decoration: none; white-space: nowrap;
    font: 700 11px/1 Inter, system-ui, sans-serif; letter-spacing: .14em; text-transform: uppercase;
  }
  .hero-skip svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; animation: mCue 2.2s ease-in-out infinite; }
  @keyframes mCue { 0%, 100% { transform: translateY(-1px); } 50% { transform: translateY(3px); } }

  /* Skip for the pinned practice reel. */
  html body.cinematic-home .reel-skip {
    position: absolute; z-index: 6; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 12px;
    top: calc(var(--m-bar-h) + var(--sat) + 4px); right: max(10px, var(--sar));
    color: var(--cinema-purple, #6047ef); text-decoration: none; font: 700 12px/1 Inter, system-ui, sans-serif; letter-spacing: .02em;
  }
  .reel-skip svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
}

/* Portrait phones: the recomposed 9:16 photo sits in the lower part of a tall dark field and fades up into it, so there is no panel edge. */
@media (max-width: 700px) {
  html body.cinematic-home .home-hero::before {
    inset: auto 0 0 0 !important; top: 14% !important;
    background: var(--hero-photo) 58% 58% / cover no-repeat !important;
    -webkit-mask-image: linear-gradient(180deg, transparent 0, rgba(0, 0, 0, .55) 22%, #000 46%, #000 86%, rgba(0, 0, 0, .6) 100%);
    mask-image: linear-gradient(180deg, transparent 0, rgba(0, 0, 0, .55) 22%, #000 46%, #000 86%, rgba(0, 0, 0, .6) 100%);
  }
  html body.cinematic-home .home-hero::after {
    background: linear-gradient(180deg, rgba(15, 14, 21, .88) 0%, rgba(15, 14, 21, .48) 30%, rgba(15, 14, 21, .10) 54%, rgba(15, 14, 21, .52) 100%) !important;
  }
}

/* Phones held sideways: headline and action sit in the dark negative space on the left, the landscape photo on the right. */
@media (max-width: 980px) and (max-height: 520px) and (orientation: landscape) {
  html body.cinematic-home .home-hero::before { background-position: 62% 62% !important; }
  html body.cinematic-home .home-hero::after { background: linear-gradient(90deg, rgba(9, 11, 14, .93) 0%, rgba(9, 11, 14, .72) 45%, rgba(9, 11, 14, .18) 100%) !important; }
  html body.cinematic-home .hero-sticky { justify-content: center; padding: calc(var(--m-bar-h) + var(--sat) + 12px) max(28px, var(--sar)) calc(var(--sab) + 64px) max(28px, var(--sal)) !important; }
  html body.cinematic-home .hero-copy h1 { font-size: clamp(34px, 11vh, 58px) !important; }
  html body.cinematic-home .hero-actions { margin-top: 18px !important; }
  html body.cinematic-home .hero-skip { bottom: calc(var(--sab) + 10px); }
}

/* Section tops sit just under the bar (scroll-padding above), so the old 105px of clearance padding is not needed on phones. */
@media (max-width: 700px) {
  html body.cinematic-home :is(.feedback-sticky, .progress-sticky, .speak-sticky, .return-sticky) { padding-top: 44px !important; }
  html body.cinematic-home .practice-sticky { padding-top: calc(var(--m-bar-h) + var(--sat) + 16px) !important; }
  html body.cinematic-home main [tabindex="-1"]:focus { outline: none; }
}

/* ---- 4. Phone scroll pacing: the reel is pinned for about 1.7 screens instead of 4.4 (stops are remapped in landing-motion.js). ---- */
@media (max-width: 700px) and (prefers-reduced-motion: no-preference) {
  html body.cinematic-home .practice-preview { height: 272svh !important; }
}

/* Reduced motion means normal page flow: the practice scene is not pinned and adds no scroll distance.
   (An older rule further up the cascade set this too, but a later 540svh rule beat it.) */
@media (prefers-reduced-motion: reduce) {
  html body.cinematic-home .practice-preview { height: auto !important; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-skip svg { animation: none !important; }
  .m-menu.is-open { animation: none !important; }
  .m-theme-switch, .m-theme-switch::after, .m-toggle, .m-close { transition: none !important; }
}

/* ---- 5. Stacked scenes animate as they scroll into view (phones and tablets, up to 980px). ----
   Below 980px the scenes are not pinned, and the older stylesheet froze them in their finished state, so the score never
   counted, the progress line never drew, the topic chips stayed faint and the conversation never arrived.
   landing-motion.js now measures each scene against the screen and sets the same variables the desktop story uses;
   this block lets those variables take effect. It only applies while script is driving them (.scenes-live), so with no
   script, or with reduced motion, the scenes stay in their finished state. */
@media (max-width: 980px) and (prefers-reduced-motion: no-preference) {
  /* Feedback: the report rises in, the three skill cards and the next step reveal one by one as they come on screen. */
  html body.cinematic-home.scenes-live .feedback-report {
    transform: translate3d(0, calc((1 - var(--feedback-report, 0)) * 44px), 0);
    opacity: var(--feedback-report, 0);
  }
  html body.cinematic-home.scenes-live .feedback-metrics article { opacity: .32; transform: translateY(18px); }
  html body.cinematic-home.scenes-live .feedback-metrics article > b i { transform: scaleX(0); }
  html body.cinematic-home.scenes-live .next-step-card { opacity: .2; transform: translateY(20px); }
  html body.cinematic-home.scenes-live .feedback-metrics article.revealed,
  html body.cinematic-home.scenes-live .next-step-card.revealed { opacity: 1; transform: none; }
  html body.cinematic-home.scenes-live .feedback-metrics article.revealed > b i { transform: scaleX(1); }

  /* Speak: the conversation slides in from either side. */
  html body.cinematic-home.scenes-live .speech-ursula {
    transform: translateX(calc((1 - var(--speak-conversation, 0)) * 28px));
    opacity: var(--speak-conversation, 0);
  }
  html body.cinematic-home.scenes-live .speech-student {
    transform: translateX(calc((1 - var(--speak-conversation, 0)) * -28px));
    opacity: var(--speak-conversation, 0);
  }
  html body.cinematic-home.scenes-live .speak-story.topic-selected .speech-ursula { opacity: 1 !important; transform: none !important; }

  /* Return: the calm exam window settles into place. */
  html body.cinematic-home.scenes-live .calm-exam {
    transform: translate3d(calc((1 - var(--return-progress, 0)) * 7vw), 0, 0) rotate(calc(-2deg - (1 - var(--return-progress, 0)) * 3deg));
  }
}