/* Mobile design refresh: Geist typography, a frosted header with a scrolling tab rail,
   tactile controls and thumb-reachable primary actions. Loaded last on every
   page and scoped to touch layouts; desktop keeps its existing design.
   Geist is licensed under the SIL Open Font License 1.1 (assets/geist-OFL.txt). */
@font-face {
  font-family: "Geist";
  src: url("/assets/geist-variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@media (max-width: 760px) {
  :root {
    --m-font: "Geist", "Clap Sans", Arial, sans-serif;
    --m-ease: cubic-bezier(.2, .8, .2, 1);
    --m-spring: cubic-bezier(.34, 1.36, .64, 1);
    --m-glass: #0a0a0acc;
    --m-hairline: #ffffff14;
  }

  /* Typography: one modern family everywhere, condensed display titles excepted. */
  :root, body { font-family: var(--m-font); font-optical-sizing: auto; text-rendering: optimizeLegibility; }
  :is(button, input, select, textarea) { font-family: inherit; }
  :is(.mobile-only-header, .mobile-navigation-toast, .media-library, .pricing-hero h1, .pricing-card h3, .pricing-details-label,
    body[data-page="video"] .video-sidebar, body[data-page="video"] .video-duration-menu) { font-family: var(--m-font); }
  :is(h1, h2, h3) { text-wrap: balance; }
  :is(.pricing-price, .pricing-credit-amount, .billing-credit-count, .usage-stat-value, .image-generate-price, .video-generate-price) { font-variant-numeric: tabular-nums; }

  /* Header: translucent, blurred and lighter. */
  .site-header, .site-header.mobile-only-header {
    border-bottom-color: var(--m-hairline);
    background: var(--m-glass);
    backdrop-filter: saturate(160%) blur(18px);
    -webkit-backdrop-filter: saturate(160%) blur(18px);
  }
  .site-header .header-actions .nav-start { min-height: 34px; padding-inline: 14px; border-radius: 999px; font-size: 12px; font-weight: 600; letter-spacing: -.1px; }

  /* Tab rail: pills glide between states and the tabs slide in once on arrival. */
  .site-header .nav-tools > .nav-link { position: relative; font-family: var(--m-font);
    transition: background-color 220ms var(--m-ease), color 220ms var(--m-ease), border-color 220ms var(--m-ease), transform 170ms var(--m-ease); }
  .site-header .nav-tools > .nav-link { animation: m-tab-in 520ms var(--m-ease) backwards; }
  .site-header .nav-tools > :nth-child(2) { animation-delay: 40ms; }
  .site-header .nav-tools > :nth-child(3) { animation-delay: 80ms; }
  .site-header .nav-tools > :nth-child(4) { animation-delay: 120ms; }
  .site-header .nav-tools > :nth-child(n+5) { animation-delay: 160ms; }
  .site-header > .main-nav { scroll-behavior: smooth; }

  /* Tactile controls: every button eases between states and presses in slightly. */
  :where(button, .button, a.nav-start, a.nav-login, .prompt-button, .pricing-plan-button, .billing-primary, .billing-secondary, .settings-primary, .settings-secondary, .asset-control, .asset-nav-item, .settings-nav-link, .site-header .nav-link) {
    -webkit-tap-highlight-color: transparent;
    transition: transform 170ms var(--m-ease), background-color 220ms var(--m-ease), border-color 220ms var(--m-ease), color 220ms var(--m-ease), box-shadow 220ms var(--m-ease), opacity 220ms var(--m-ease);
  }
  /* Zero specificity throughout, so any component that positions itself with a
     transform keeps it: the press effect only applies where nothing else does. */
  :where(button, .button, a.nav-start, a.nav-login, .prompt-button, .pricing-plan-button, .billing-primary, .billing-secondary, .settings-primary, .settings-secondary, .asset-control, .asset-nav-item, .settings-nav-link, .site-header .nav-link):where(:active):where(:not(:disabled)) { transform: scale(.965); }
  :where(button, a, input, select, textarea):focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

  /* Primary actions share one pill language. */
  :is(.prompt-button, .pricing-plan-button, .billing-primary, .settings-primary, .auth-continue, .inf-generate, #video-mobile-next, body[data-page="video"] .video-generate, .image-generate) { border-radius: 16px; font-weight: 600; letter-spacing: -.15px; }
  .pricing-plan-button-primary:not(:disabled), .prompt-button { box-shadow: 0 8px 24px #ffffff1f, inset 0 1px 0 #ffffffb3; }

  /* Segmented controls glide between their states. */
  :is(.mobile-workspace-tabs, .video-mobile-workspaces, .inf-mode-tabs) { border-radius: 16px; }
  :is(.mobile-workspace-tabs, .video-mobile-workspaces, .inf-mode-tabs) button { border-radius: 12px; transition: background-color 240ms var(--m-ease), color 240ms var(--m-ease), border-color 240ms var(--m-ease), box-shadow 240ms var(--m-ease), transform 170ms var(--m-ease); }
  .mobile-workspace-tabs { background: #141617e6; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }

  /* Horizontal rails hint that more choices are one swipe away. */
  :is(.image-composer-controls, .asset-sidebar nav, .settings-nav) {
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent);
    mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent);
    scroll-snap-type: x proximity;
  }
  :is(.image-composer-controls, .asset-sidebar nav, .settings-nav) > * { scroll-snap-align: start; }
  :is(.asset-nav-item, .settings-nav-link) { border-radius: 999px; }
  .asset-nav-item[aria-current="page"], .settings-nav-link[aria-current="page"] { border-color: #fff; background: #fff; color: #0a0a0a; }
  .asset-nav-item[aria-current="page"] :is(.asset-nav-count, .asset-nav-icon) { border-color: transparent; background: #0000000f; color: #0a0a0a; }
  .settings-nav-link[aria-current="page"] { color: #0a0a0a; }

  /* The active workspace tab uses the same white marker as the menu's current page. */
  .mobile-workspace-tabs button[aria-pressed="true"], .video-mobile-workspaces button[aria-current] { border-color: #fff; background: #fff; color: #0a0a0a; box-shadow: 0 4px 14px #0005; }

  /* Image studio: a floating composer that respects the home indicator. */
  .image-composer-area { padding-bottom: max(12px, env(safe-area-inset-bottom)); }
  .image-composer { border-color: #ffffff10; border-radius: 26px; background: #1d1d1dee; backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); box-shadow: 0 -12px 40px #0008; }

  /* Video and Hypnosis: the step actions stay within thumb reach. */
  body[data-mobile-step] .video-mobile-actions {
    position: sticky;
    bottom: 0;
    z-index: 6;
    margin-inline: -16px;
    padding: 12px 16px max(14px, env(safe-area-inset-bottom));
    background: linear-gradient(180deg, transparent, #0b0c0d 30%);
  }
  body[data-mobile-step] .video-mobile-actions button { border-radius: 16px; }

  /* Cards respond to touch with a soft lift. */
  :is(.scene-card, .creative-feature-card, .pricing-card, .billing-card, .settings-card, .inf-option, .asset-card) { transition: transform 220ms var(--m-ease), border-color 220ms var(--m-ease), box-shadow 220ms var(--m-ease); }
  :where(.scene-card, .creative-feature-card, .inf-option, .asset-card):where(:active) { transform: scale(.985); }

  /* Content arrives with a short rise. Backwards fill leaves no lasting transform,
     so fixed and sticky descendants keep their positioning. */
  :is(#home > *, .inspirations, .creative-highlights, .pricing-main > *, .billing-main > *, .settings-main > *, .asset-layout > *, .inf-main > :not(.mobile-workspace-tabs), body[data-mobile-step] .video-main > *) {
    animation: m-rise 560ms var(--m-ease) backwards;
  }
  :is(#home, .pricing-main, .billing-main, .settings-main, .asset-layout, .inf-main) > :nth-child(2) { animation-delay: 60ms; }
  :is(#home, .pricing-main, .billing-main, .settings-main, .asset-layout, .inf-main) > :nth-child(3) { animation-delay: 120ms; }
  :is(#home, .pricing-main, .billing-main, .settings-main, .asset-layout, .inf-main) > :nth-child(n+4) { animation-delay: 170ms; }

  /* Sheets rise from the bottom edge. */
  :is(.billing-cancel-dialog, .settings-help-dialog, .asset-lightbox, .idea-dialog)[open] { animation: m-sheet-in 420ms var(--m-ease) both; }
  :is(.billing-cancel-dialog, .settings-help-dialog, .asset-lightbox)::backdrop { background: #000a; backdrop-filter: blur(6px); }
}

@keyframes m-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes m-tab-in { from { opacity: 0; transform: translateX(10px); } to { opacity: 1; transform: none; } }
@keyframes m-sheet-in { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: none; } }

/* Only the motion added here is switched off; existing progress indicators keep their own rules. */
@media (max-width: 760px) and (prefers-reduced-motion: reduce) {
  .site-header .nav-tools > .nav-link,
  :is(#home > *, .inspirations, .creative-highlights, .pricing-main > *, .billing-main > *, .settings-main > *, .asset-layout > *, .inf-main > *, body[data-mobile-step] .video-main > *),
  :is(.billing-cancel-dialog, .settings-help-dialog, .asset-lightbox, .idea-dialog)[open] { animation: none; }
  :where(button, .button, a, .scene-card, .creative-feature-card, .inf-option, .asset-card) { transition-duration: 1ms; }
}