/*
 * Manabi Video Navi — cinematic motion V243
 *
 * Motion is visual-only. Most sequences run once as content enters the
 * viewport. The two continuing cues (a one-pixel scan and scroll meter) use
 * compositor-friendly transform/opacity only and are disabled when reduced
 * motion is requested.
 */

@keyframes mnvV243HeroReveal {
  0% { opacity: 0; transform: translate3d(0, 44px, 0); filter: blur(9px); }
  64% { opacity: 1; filter: blur(0); }
  100% { opacity: 1; transform: translate3d(0, 0, 0); filter: blur(0); }
}

@keyframes mnvV243HeroCut {
  0% { opacity: 0; clip-path: inset(0 100% 0 0); transform: translate3d(-24px, 0, 0); }
  100% { opacity: 1; clip-path: inset(-12% -4% -12% -4%); transform: translate3d(0, 0, 0); }
}

@keyframes mnvV243HeroAnswer {
  0% { opacity: 0; clip-path: inset(0 0 0 100%); transform: translate3d(30px, 0, 0); }
  100% { opacity: 1; clip-path: inset(-12% -5% -12% -5%); transform: translate3d(0, 0, 0); }
}

@keyframes mnvV243TextCharge {
  0% { background-position: 200% 50%; }
  100% { background-position: -20% 50%; }
}

@keyframes mnvV243Scan {
  0% { opacity: 0; transform: translate3d(0, 4vh, 0); }
  8% { opacity: .64; }
  78% { opacity: .42; }
  100% { opacity: 0; transform: translate3d(0, calc(100svh - 82px), 0); }
}

@keyframes mnvV243Crosshair {
  0% { opacity: 0; transform: scale(.72) rotate(-18deg); }
  45% { opacity: .75; }
  100% { opacity: .48; transform: scale(1) rotate(22deg); }
}

@keyframes mnvV243CodeIn {
  0% { opacity: 0; transform: translate3d(28px, 0, 0); }
  100% { opacity: .78; transform: translate3d(0, 0, 0); }
}

@keyframes mnvV243SectionIn {
  0% { opacity: 0; transform: translate3d(0, 52px, 0); }
  100% { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes mnvV243SectionFromLeft {
  0% { opacity: 0; clip-path: inset(0 100% 0 0); transform: translate3d(-32px, 0, 0); }
  100% { opacity: 1; clip-path: inset(-10% -5% -10% -5%); transform: translate3d(0, 0, 0); }
}

@keyframes mnvV243CardIn {
  0% { opacity: 0; transform: translate3d(0, 34px, 0) scale(.975); }
  100% { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}

@keyframes mnvV243PanelLight {
  0%, 12% { transform: translate3d(-170%, 0, 0) skewX(-18deg); }
  55%, 100% { transform: translate3d(460%, 0, 0) skewX(-18deg); }
}

@keyframes mnvV243OrbitPulse {
  0%, 100% { opacity: .44; transform: scale(.97) rotate(0deg); }
  50% { opacity: .78; transform: scale(1.03) rotate(3deg); }
}

@keyframes mnvV243FocusPulse {
  0%, 100% { box-shadow: 0 18px 46px rgba(255, 99, 17, .28), 0 0 0 4px rgba(255, 133, 39, .06); }
  50% { box-shadow: 0 22px 58px rgba(255, 99, 17, .38), 0 0 0 7px rgba(255, 133, 39, .11); }
}

@keyframes mnvV243IntroShell {
  0% { opacity: 0; visibility: visible; }
  5%, 82% { opacity: 1; visibility: visible; }
  99% { opacity: 0; visibility: visible; }
  100% { opacity: 0; visibility: hidden; }
}

@keyframes mnvV243IntroWord {
  0% { opacity: 0; transform: translate3d(0, 6px, 0) skewX(-4deg); clip-path: inset(0 100% 0 0); }
  18% { opacity: 1; }
  32%, 64% { opacity: 1; transform: translate3d(0, -38%, 0) skewX(0); clip-path: inset(-8% -4% -8% -4%); }
  100% { opacity: 0; transform: translate3d(16px, -43%, 0) skewX(2deg); clip-path: inset(0 0 0 100%); }
}

@keyframes mnvV243FieldOrbit {
  0% { opacity: .35; transform: rotate(-8deg) scale(.96); }
  100% { opacity: .78; transform: rotate(8deg) scale(1.02); }
}

@keyframes mnvV243KineticShift {
  0%, 100% { transform: translate3d(0, 0, 0); text-shadow: -5px 0 rgba(46, 225, 255, .24), 5px 0 rgba(255, 89, 34, .18); }
  42% { transform: translate3d(-7px, 0, 0); text-shadow: 8px 0 rgba(46, 225, 255, .34), -6px 0 rgba(255, 89, 34, .27); }
  48% { transform: translate3d(5px, 0, 0); }
}

@keyframes mnvV243OrbitTravel {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* First-view editing rhythm. */
body.mnv-future-ui.public-app.shell-public.page-index.mnv-v243-ready .mnv-v243-intro-sequence {
  animation: mnvV243IntroShell 2.85s linear both !important;
}

body.mnv-future-ui.public-app.shell-public.page-index.mnv-v243-ready .mnv-v243-intro-sequence > span:nth-child(1) { animation: mnvV243IntroWord .66s cubic-bezier(.18,.82,.2,1) .06s both !important; }
body.mnv-future-ui.public-app.shell-public.page-index.mnv-v243-ready .mnv-v243-intro-sequence > span:nth-child(2) { animation: mnvV243IntroWord .68s cubic-bezier(.18,.82,.2,1) .43s both !important; }
body.mnv-future-ui.public-app.shell-public.page-index.mnv-v243-ready .mnv-v243-intro-sequence > span:nth-child(3) { animation: mnvV243IntroWord .78s cubic-bezier(.18,.82,.2,1) .84s both !important; }
body.mnv-future-ui.public-app.shell-public.page-index.mnv-v243-ready .mnv-v243-intro-sequence > span:nth-child(4) { animation: mnvV243IntroWord .72s cubic-bezier(.18,.82,.2,1) 1.33s both !important; }
body.mnv-future-ui.public-app.shell-public.page-index.mnv-v243-ready .mnv-v243-intro-sequence > strong { animation: mnvV243IntroWord .94s cubic-bezier(.16,.84,.2,1) 1.83s both !important; }

body.mnv-future-ui.public-app.shell-public.page-index.mnv-v243-ready .mnv-v243-hero-field > i:nth-child(1),
body.mnv-future-ui.public-app.shell-public.page-index.mnv-v243-ready .mnv-v243-hero-field > i:nth-child(2) {
  animation: mnvV243FieldOrbit 4.8s ease-in-out .4s 2 alternate both !important;
}

body.mnv-future-ui.public-app.shell-public.page-index.mnv-v243-ready .koto-cosmic-hero .koto-kicker {
  animation: mnvV243HeroReveal 620ms cubic-bezier(.16, .84, .22, 1) 70ms both !important;
}

body.mnv-future-ui.public-app.shell-public.page-index.mnv-v243-ready .koto-cosmic-hero .koto-hero-problem {
  animation: mnvV243HeroCut 820ms cubic-bezier(.14, .82, .18, 1) 160ms both !important;
}

body.mnv-future-ui.public-app.shell-public.page-index.mnv-v243-ready .koto-cosmic-hero .koto-hero-bridge {
  animation: mnvV243HeroReveal 540ms cubic-bezier(.18, .78, .22, 1) 420ms both !important;
}

body.mnv-future-ui.public-app.shell-public.page-index.mnv-v243-ready .koto-cosmic-hero .koto-solution-band {
  animation: mnvV243HeroAnswer 900ms cubic-bezier(.12, .82, .16, 1) 500ms both !important;
}

body.mnv-future-ui.public-app.shell-public.page-index.mnv-v243-ready .koto-cosmic-hero .koto-hero-solution strong {
  animation: mnvV243TextCharge 2.6s cubic-bezier(.2, .72, .25, 1) 1.05s 2 both !important;
}

body.mnv-future-ui.public-app.shell-public.page-index.mnv-v243-ready .koto-cosmic-hero :where(.koto-hero-promise, .koto-hero-actions) {
  animation: mnvV243HeroReveal 700ms cubic-bezier(.16, .82, .2, 1) both !important;
}

body.mnv-future-ui.public-app.shell-public.page-index.mnv-v243-ready .koto-cosmic-hero .koto-hero-promise {
  animation-delay: 720ms !important;
}

body.mnv-future-ui.public-app.shell-public.page-index.mnv-v243-ready .koto-cosmic-hero .koto-hero-actions {
  animation-delay: 840ms !important;
}

body.mnv-future-ui.public-app.shell-public.page-index.mnv-v243-ready .koto-cosmic-hero :where(.koto-audience-scope, .koto-trust-row) {
  animation: mnvV243HeroReveal 620ms cubic-bezier(.16, .82, .2, 1) both !important;
}

body.mnv-future-ui.public-app.shell-public.page-index.mnv-v243-ready .koto-cosmic-hero .koto-audience-scope {
  animation-delay: 920ms !important;
}

body.mnv-future-ui.public-app.shell-public.page-index.mnv-v243-ready .koto-cosmic-hero .koto-trust-row {
  animation-delay: 1s !important;
}

body.mnv-future-ui.public-app.shell-public.page-index.mnv-v243-ready .mnv-v243-hero-code,
body.mnv-future-ui.public-app.shell-public.page-index.mnv-v243-ready .mnv-v243-sequence {
  animation: mnvV243CodeIn 760ms ease-out 1.05s both !important;
}

body.mnv-future-ui.public-app.shell-public.page-index.mnv-v243-ready .mnv-v243-crosshair {
  animation: mnvV243Crosshair 2.8s cubic-bezier(.15, .78, .2, 1) .45s 2 alternate both !important;
}

body.mnv-future-ui.public-app.shell-public.page-index.mnv-v243-ready .mnv-v243-scan {
  animation: mnvV243Scan 7.2s linear .3s infinite !important;
}

body.mnv-future-ui.public-app.shell-public.page-index.mnv-v243-ready .koto-cosmic-hero .koto-hero-actions .button.primary {
  animation: mnvV243FocusPulse 2.4s ease-in-out 1.6s 2 !important;
}

body.mnv-future-ui.public-app.shell-public.page-index .koto-cosmic-hero .koto-hero-actions .button.primary::after {
  position: absolute !important;
  inset: -25% auto -25% -28% !important;
  width: 24% !important;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .7), transparent) !important;
  content: "" !important;
  pointer-events: none !important;
  transform: translate3d(-170%, 0, 0) skewX(-18deg) !important;
}

body.mnv-future-ui.public-app.shell-public.page-index.mnv-v243-ready .koto-cosmic-hero .koto-hero-actions .button.primary::after {
  animation: mnvV243PanelLight 3.6s ease-in-out 1.15s 2 both !important;
}

/* Progressive disclosure. CSS never hides content unless the enhancement JS
   has installed a working observer (the .mnv-v243-enhanced class). */
body.mnv-future-ui.public-app.shell-public.page-index.mnv-v243-enhanced [data-animate]:not(.mnv-v243-inview):not(.koto-hero-copy):not(.koto-hero-stage) {
  opacity: .01 !important;
  transform: translate3d(0, 42px, 0) !important;
}

body.mnv-future-ui.public-app.shell-public.page-index [data-animate].mnv-v243-inview:not(.koto-hero-copy):not(.koto-hero-stage) {
  animation: mnvV243SectionIn 760ms cubic-bezier(.16, .82, .2, 1) both !important;
}

body.mnv-future-ui.public-app.shell-public.page-index :where(.koto-section-heading, .conversion-section-heading, .koto-learning-range-intro).mnv-v243-inview h2,
body.mnv-future-ui.public-app.shell-public.page-index .koto-flow-copy.mnv-v243-inview h2 {
  animation: mnvV243SectionFromLeft 860ms cubic-bezier(.14, .82, .18, 1) 80ms both !important;
}

body.mnv-future-ui.public-app.shell-public.page-index :where(.koto-learning-range-grid, .koto-pain-grid, .koto-feature-grid, .koto-scene-grid, .koto-role-grid, .homepage-trust-grid, .org-path-grid, .koto-experience-track).mnv-v243-inview > *,
body.mnv-future-ui.public-app.shell-public.page-index .mnv-v243-impact-grid.mnv-v243-inview > * {
  animation: mnvV243CardIn 660ms cubic-bezier(.16, .82, .2, 1) both !important;
}

body.mnv-future-ui.public-app.shell-public.page-index :where(.koto-learning-range-grid, .koto-pain-grid, .koto-feature-grid, .koto-scene-grid, .koto-role-grid, .homepage-trust-grid, .org-path-grid, .koto-experience-track, .mnv-v243-impact-grid).mnv-v243-inview > :nth-child(2) {
  animation-delay: 80ms !important;
}

body.mnv-future-ui.public-app.shell-public.page-index :where(.koto-learning-range-grid, .koto-pain-grid, .koto-feature-grid, .koto-scene-grid, .koto-role-grid, .homepage-trust-grid, .org-path-grid, .koto-experience-track, .mnv-v243-impact-grid).mnv-v243-inview > :nth-child(3) {
  animation-delay: 150ms !important;
}

body.mnv-future-ui.public-app.shell-public.page-index :where(.koto-learning-range-grid, .koto-pain-grid, .koto-feature-grid, .koto-scene-grid, .koto-role-grid, .homepage-trust-grid, .org-path-grid, .koto-experience-track, .mnv-v243-impact-grid).mnv-v243-inview > :nth-child(4) {
  animation-delay: 220ms !important;
}

body.mnv-future-ui.public-app.shell-public.page-index :where(.koto-learning-range-grid, .koto-pain-grid, .koto-feature-grid, .koto-scene-grid, .koto-role-grid, .homepage-trust-grid, .org-path-grid, .koto-experience-track, .mnv-v243-impact-grid).mnv-v243-inview > :nth-child(5) {
  animation-delay: 290ms !important;
}

body.mnv-future-ui.public-app.shell-public.page-index :where(.koto-feature-grid).mnv-v243-inview > :nth-child(6),
body.mnv-future-ui.public-app.shell-public.page-index :where(.koto-feature-grid).mnv-v243-inview > :nth-child(7),
body.mnv-future-ui.public-app.shell-public.page-index :where(.koto-feature-grid).mnv-v243-inview > :nth-child(8),
body.mnv-future-ui.public-app.shell-public.page-index :where(.koto-feature-grid).mnv-v243-inview > :nth-child(9) {
  animation-delay: 180ms !important;
}

body.mnv-future-ui.public-app.shell-public.page-index .koto-flow-board.mnv-v243-inview::after {
  animation: mnvV243OrbitPulse 3.8s ease-in-out 3 !important;
}

body.mnv-future-ui.public-app.shell-public.page-index .mnv-v243-kinetic-scene > div.mnv-v243-inview span:nth-child(2) {
  animation: mnvV243KineticShift 720ms steps(2, jump-none) 180ms 3 both !important;
}

body.mnv-future-ui.public-app.shell-public.page-index .mnv-v243-horizon-orbit.mnv-v243-inview > i:nth-child(1),
body.mnv-future-ui.public-app.shell-public.page-index .mnv-v243-horizon-orbit.mnv-v243-inview > b {
  animation: mnvV243OrbitTravel 7s linear 2 both !important;
}

body.mnv-future-ui.public-app.shell-public.page-index .koto-hero-stage.mnv-v243-inview .koto-device {
  animation: mnvV243SectionIn 820ms cubic-bezier(.12, .82, .18, 1) both !important;
}

body.mnv-future-ui.public-app.shell-public.page-index .koto-hero-stage.mnv-v243-inview .cosmic-live-showcase {
  animation: mnvV243SectionIn 820ms cubic-bezier(.12, .82, .18, 1) 130ms both !important;
}

/* Interaction feedback: no layout-changing animation and no overlays above
   functional controls. */
body.mnv-future-ui.public-app.shell-public.page-index :where(.button, .org-path-card, .koto-learning-range-grid > article, .koto-pain-grid > article, .koto-feature-grid > article, .koto-scene-grid > article, .homepage-trust-grid > article) {
  transition:
    transform 180ms cubic-bezier(.2, .72, .25, 1),
    border-color 180ms ease,
    box-shadow 180ms ease,
    background-color 180ms ease !important;
}

@media (hover: hover) and (pointer: fine) {
  body.mnv-future-ui.public-app.shell-public.page-index :where(.button, .org-path-card):hover {
    transform: translate3d(0, -3px, 0) !important;
  }

  body.mnv-future-ui.public-app.shell-public.page-index :where(.koto-learning-range-grid > article, .koto-pain-grid > article, .koto-feature-grid > article, .koto-scene-grid > article, .homepage-trust-grid > article):hover {
    border-color: rgba(53, 188, 255, .52) !important;
    box-shadow: 0 28px 68px rgba(0, 45, 105, .14) !important;
    transform: translate3d(0, -5px, 0) !important;
  }

  body.mnv-future-ui.public-app.shell-public.page-index .koto-flow-board:hover::after {
    border-color: rgba(255, 128, 38, .82) !important;
  }
}

body.mnv-future-ui.public-app.shell-public.page-index :where(a, button, input, textarea, select, summary):focus-visible {
  outline: 3px solid #fff !important;
  outline-offset: 3px !important;
  box-shadow: 0 0 0 6px rgba(18, 157, 255, .58) !important;
}

/* The scroll meter follows a CSS variable updated only during actual scroll
   or resize events; there is no perpetual requestAnimationFrame loop. */
body.mnv-future-ui.public-app.shell-public.page-index .mnv-v243-scroll-meter > i {
  transition: transform 90ms linear !important;
}

@media (max-width: 860px), (hover: none) {
  body.mnv-future-ui.public-app.shell-public.page-index :where(.button, .org-path-card, .koto-learning-range-grid > article, .koto-pain-grid > article, .koto-feature-grid > article, .koto-scene-grid > article, .homepage-trust-grid > article) {
    transition-duration: 150ms !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.mnv-future-ui.public-app.shell-public.page-index *,
  body.mnv-future-ui.public-app.shell-public.page-index *::before,
  body.mnv-future-ui.public-app.shell-public.page-index *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }

  body.mnv-future-ui.public-app.shell-public.page-index.mnv-v243-enhanced [data-animate]:not(.mnv-v243-inview):not(.koto-hero-copy):not(.koto-hero-stage) {
    opacity: 1 !important;
    transform: none !important;
  }

  body.mnv-future-ui.public-app.shell-public.page-index :where(.mnv-v243-scan, .mnv-v243-crosshair) {
    opacity: .2 !important;
    transform: none !important;
  }

  body.mnv-future-ui.public-app.shell-public.page-index .mnv-v243-scroll-meter > i {
    transition: none !important;
  }

  body.mnv-future-ui.public-app.shell-public.page-index .mnv-v243-intro-sequence {
    opacity: 0 !important;
    visibility: hidden !important;
  }
}

@media print {
  body.mnv-future-ui.public-app.shell-public.page-index *,
  body.mnv-future-ui.public-app.shell-public.page-index *::before,
  body.mnv-future-ui.public-app.shell-public.page-index *::after {
    animation: none !important;
    transition: none !important;
  }
}