/*
 * まなび動画ナビ Photo Motion v241
 * Finite, presentation-only motion for the 20-screen photo-fidelity layer.
 * Existing state, values, media controls and navigation remain authoritative.
 */

:root {
  --mnv-v241-motion-fast: 150ms;
  --mnv-v241-motion-card: 300ms;
  --mnv-v241-motion-hero: 440ms;
  --mnv-v241-motion-ease: cubic-bezier(.2, .8, .2, 1);
}

/* V231 supplies the viewport-aware .is-visible state. */
body.mnv-future-ui.mnv-v241-ready .mnv-v241-reveal.is-visible:not(.mnv-v241-hero-copy):not(.mnv-v241-stagger-item) {
  animation: mnv-v241-reveal var(--mnv-v241-motion-card) var(--mnv-v241-motion-ease) backwards;
}

@keyframes mnv-v241-reveal {
  from { opacity: .26; transform: translate3d(0, 20px, 0) scale(.988); }
  to { opacity: 1; transform: none; }
}

/* Public hero: bright future world, device, search console, then its actions. */
body.mnv-future-ui.page-index.mnv-v241-ready .mnv-v241-hero-copy.is-visible {
  animation: mnv-v241-hero-copy var(--mnv-v241-motion-hero) var(--mnv-v241-motion-ease) backwards;
}

body.mnv-future-ui.page-index.mnv-v241-ready .koto-hero-stage.is-visible .mnv-v241-hero-device {
  animation: mnv-v241-hero-device 500ms var(--mnv-v241-motion-ease) 70ms backwards;
}

body.mnv-future-ui.page-index.mnv-v241-ready .koto-hero-stage.is-visible .mnv-v241-hero-search {
  animation: mnv-v241-hero-search 430ms var(--mnv-v241-motion-ease) 170ms backwards;
}

body.mnv-future-ui.page-index.mnv-v241-ready .mnv-v241-hero-copy.is-visible .mnv-v241-hero-actions {
  animation: mnv-v241-fade-up 280ms var(--mnv-v241-motion-ease) 190ms backwards;
}

body.mnv-future-ui.page-index.mnv-v241-ready .mnv-v241-hero-copy.is-visible .mnv-v241-hero-trust {
  animation: mnv-v241-fade-up 280ms var(--mnv-v241-motion-ease) 250ms backwards;
}

body.mnv-future-ui.page-index.mnv-v241-ready .mnv-v241-ambient {
  animation: mnv-v241-ambient-arrive 900ms var(--mnv-v241-motion-ease) 1 both;
}

@keyframes mnv-v241-hero-copy {
  from { opacity: .16; transform: translate3d(-26px, 16px, 0) scale(.988); }
  to { opacity: 1; transform: none; }
}

@keyframes mnv-v241-hero-device {
  from { opacity: .18; transform: translate3d(30px, 12px, 0) scale(.965) rotate(.7deg); }
  72% { opacity: 1; transform: translate3d(-2px, -2px, 0) scale(1.006) rotate(0); }
  to { opacity: 1; transform: none; }
}

@keyframes mnv-v241-hero-search {
  from { opacity: .22; transform: translate3d(0, 24px, 0) scale(.982); box-shadow: 0 8px 24px rgba(28, 89, 158, .08); }
  70% { opacity: 1; transform: translate3d(0, -2px, 0) scale(1.003); box-shadow: 0 26px 72px rgba(47, 111, 218, .24), 0 0 30px rgba(98, 232, 255, .16); }
  to { opacity: 1; transform: none; }
}

@keyframes mnv-v241-fade-up {
  from { opacity: .2; transform: translate3d(0, 12px, 0); }
  to { opacity: 1; transform: none; }
}

@keyframes mnv-v241-ambient-arrive {
  0% { opacity: .08; transform: scale(.84); }
  62% { opacity: .62; transform: scale(1.035); }
  100% { transform: none; }
}

/* One thin scan stays on the edge and never crosses readable copy. */
body.mnv-future-ui.page-index .mnv-v241-hero-search {
  position: relative;
}

body.mnv-future-ui.page-index .mnv-v241-hero-search::after {
  position: absolute;
  z-index: 2;
  inset: -1px 70% auto -1px;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, #62e8ff 42%, #8367ff 70%, transparent);
  content: "";
  opacity: 0;
  pointer-events: none;
}

body.mnv-future-ui.page-index.mnv-v241-ready .koto-hero-stage.is-visible .mnv-v241-hero-search::after {
  animation: mnv-v241-edge-scan 680ms ease-out 340ms 1;
}

@keyframes mnv-v241-edge-scan {
  0% { opacity: 0; transform: translate3d(-40%, 0, 0); }
  24% { opacity: 1; }
  78% { opacity: .9; }
  100% { opacity: 0; transform: translate3d(330%, 0, 0); }
}

/* Existing input focus stays readable; only the border receives a quick scan. */
body.mnv-future-ui .koto-input-shell {
  position: relative;
}

body.mnv-future-ui .koto-input-shell::after {
  position: absolute;
  z-index: 2;
  inset: 0 72% auto 0;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, #62e8ff, #8367ff, transparent);
  content: "";
  opacity: 0;
  pointer-events: none;
}

body.mnv-future-ui .koto-input-shell:focus-within::after {
  animation: mnv-v241-input-scan 440ms ease-out 1;
}

body.mnv-future-ui :where(
  .koto-input-shell,
  .future-search-command-card,
  .search-form,
  .luxury-command-search,
  .guide-query-row,
  .mnv-ui-field-focus
):focus-within {
  border-color: #62e8ff;
  box-shadow: 0 0 0 3px rgba(98, 232, 255, .12), 0 14px 34px rgba(57, 120, 255, .13);
  transition: border-color 170ms ease, box-shadow 170ms ease;
}

@keyframes mnv-v241-input-scan {
  0% { opacity: 0; transform: translate3d(-45%, 0, 0); }
  25% { opacity: 1; }
  100% { opacity: 0; transform: translate3d(355%, 0, 0); }
}

/* Stagger groups: no extra viewport observer; V231's state is reused. */
body.mnv-future-ui .mnv-v241-delay-1 { --mnv-v241-delay: 0ms; }
body.mnv-future-ui .mnv-v241-delay-2 { --mnv-v241-delay: 45ms; }
body.mnv-future-ui .mnv-v241-delay-3 { --mnv-v241-delay: 90ms; }
body.mnv-future-ui .mnv-v241-delay-4 { --mnv-v241-delay: 135ms; }
body.mnv-future-ui .mnv-v241-delay-5 { --mnv-v241-delay: 180ms; }
body.mnv-future-ui .mnv-v241-delay-6 { --mnv-v241-delay: 225ms; }
body.mnv-future-ui .mnv-v241-delay-7 { --mnv-v241-delay: 270ms; }
body.mnv-future-ui .mnv-v241-delay-8 { --mnv-v241-delay: 315ms; }

body.mnv-future-ui.mnv-v241-ready .mnv-v241-stagger.mf-horizon-reveal.is-visible > .mnv-v241-stagger-item,
body.mnv-future-ui.mnv-v241-ready .mf-horizon-reveal.is-visible .mnv-v241-stagger > .mnv-v241-stagger-item,
body.mnv-future-ui.mnv-v241-ready .mnv-v241-stagger > .mnv-v241-stagger-item.mf-horizon-reveal.is-visible,
body.mnv-future-ui.mnv-v241-ready .mnv-v241-stagger.mnv-v241-stage-ready > .mnv-v241-stagger-item {
  animation: mnv-v241-card-arrive var(--mnv-v241-motion-card) var(--mnv-v241-motion-ease) var(--mnv-v241-delay, 0ms) backwards;
}

body.mnv-future-ui.mnv-v241-ready .mnv-v241-video-sequence.mf-horizon-reveal.is-visible > .mnv-v241-stagger-item,
body.mnv-future-ui.mnv-v241-ready .mf-horizon-reveal.is-visible .mnv-v241-video-sequence > .mnv-v241-stagger-item,
body.mnv-future-ui.mnv-v241-ready .mnv-v241-video-sequence > .mnv-v241-stagger-item.mf-horizon-reveal.is-visible,
body.mnv-future-ui.mnv-v241-ready .mnv-v241-video-sequence.mnv-v241-stage-ready > .mnv-v241-stagger-item {
  animation-name: mnv-v241-video-arrive;
  animation-duration: 360ms;
}

body.mnv-future-ui .mnv-v241-video-sequence > .mnv-v241-delay-2 { --mnv-v241-delay: 90ms; }
body.mnv-future-ui .mnv-v241-video-sequence > .mnv-v241-delay-3 { --mnv-v241-delay: 180ms; }

@keyframes mnv-v241-card-arrive {
  from { opacity: .18; transform: translate3d(0, 18px, 0) scale(.982); }
  72% { opacity: 1; transform: translate3d(0, -2px, 0) scale(1.003); }
  to { opacity: 1; transform: none; }
}

@keyframes mnv-v241-video-arrive {
  from { opacity: .12; transform: translate3d(0, 28px, 0) scale(.958); filter: saturate(.72); }
  70% { opacity: 1; transform: translate3d(0, -3px, 0) scale(1.006); filter: saturate(1.08); }
  to { opacity: 1; transform: none; filter: none; }
}

/* Media, handwriting and QR owners use opacity only. */
body.mnv-future-ui.mnv-v241-ready .mnv-v241-fade-only.is-visible,
body.mnv-future-ui.mnv-v241-ready .mnv-v241-stagger.mf-horizon-reveal.is-visible > .mnv-v241-fade-only,
body.mnv-future-ui.mnv-v241-ready .mf-horizon-reveal.is-visible .mnv-v241-stagger > .mnv-v241-fade-only,
body.mnv-future-ui.mnv-v241-ready .mnv-v241-stagger > .mnv-v241-fade-only.mf-horizon-reveal.is-visible,
body.mnv-future-ui.mnv-v241-ready .mnv-v241-stagger.mnv-v241-stage-ready > .mnv-v241-fade-only {
  animation-name: mnv-v241-fade-only;
}

@keyframes mnv-v241-fade-only {
  from { opacity: .35; }
  to { opacity: 1; }
}

/* Current navigation and step state glow once, then remain still. */
body.mnv-future-ui.mnv-v241-ready .mnv-v241-current {
  animation: mnv-v241-current-glow 430ms var(--mnv-v241-motion-ease) 1;
}

@keyframes mnv-v241-current-glow {
  0% { box-shadow: inset 0 0 #62e8ff, 0 0 rgba(57, 120, 255, 0); }
  62% { box-shadow: inset 4px 0 #62e8ff, 0 0 26px rgba(98, 232, 255, .25); }
  100% { box-shadow: inset 3px 0 #62e8ff, 0 10px 26px rgba(0, 0, 0, .18); }
}

body.mnv-future-ui.mnv-v241-ready .mf-journey-rail .mnv-v241-step-active .mf-journey-step-icon,
body.mnv-future-ui.mnv-v241-ready .dekiru-progress .mnv-v241-step-active > span,
body.mnv-future-ui.mnv-v241-ready .assignment-save-progress__steps .mnv-v241-step-active > span,
body.mnv-future-ui.mnv-v241-ready .page-loader-journey .mnv-v241-step-active > b {
  animation: mnv-v241-step-current 340ms var(--mnv-v241-motion-ease) 1;
}

body.mnv-future-ui.mnv-v241-ready .practice-processing-stages > .mnv-v241-step-active {
  animation: mnv-v241-step-current 340ms var(--mnv-v241-motion-ease) 1;
}

body.mnv-future-ui.mnv-v241-ready .mf-journey-rail .mnv-v241-step-done .mf-journey-step-icon,
body.mnv-future-ui.mnv-v241-ready .dekiru-progress .mnv-v241-step-done > span,
body.mnv-future-ui.mnv-v241-ready .assignment-save-progress__steps .mnv-v241-step-done > span {
  animation: mnv-v241-step-done 260ms ease-out 1;
}

@keyframes mnv-v241-step-current {
  0% { transform: scale(.78); box-shadow: 0 0 rgba(98, 232, 255, 0); }
  64% { transform: scale(1.1); box-shadow: 0 0 0 7px rgba(98, 232, 255, .13), 0 0 24px rgba(98, 232, 255, .24); }
  100% { transform: none; }
}

@keyframes mnv-v241-step-done {
  from { opacity: .4; transform: scale(.78); }
  72% { opacity: 1; transform: scale(1.08); }
  to { opacity: 1; transform: none; }
}

/* Selection mirrors existing checked/pressed/current state. */
body.mnv-future-ui.mnv-v241-ready .mnv-v241-selected {
  animation: mnv-v241-selected 190ms ease-out 1;
  border-color: #62e8ff;
  box-shadow: 0 0 0 3px rgba(98, 232, 255, .12), 0 12px 28px rgba(57, 120, 255, .16);
}

@keyframes mnv-v241-selected {
  from { transform: scale(.975); box-shadow: 0 0 0 rgba(98, 232, 255, 0); }
  72% { transform: scale(1.012); }
  to { transform: none; }
}

/* Real progress values stay untouched; only their existing pixels draw in. */
body.mnv-future-ui.mnv-v241-ready :where(
  .progress-bar > span,
  .diagnostic-progress > span,
  .assessment-progress > div > span,
  .skill-meter-track > span
).mnv-v241-progress-ready {
  transform-origin: left center;
  animation: mnv-v241-progress-draw 620ms var(--mnv-v241-motion-ease) backwards;
}

body.mnv-future-ui.mnv-v241-ready progress.mnv-v241-progress-ready,
body.mnv-future-ui.mnv-v241-ready .assignment-save-progress__track.mnv-v241-progress-ready {
  animation: mnv-v241-progress-native 520ms ease-out 1;
}

body.mnv-future-ui.mnv-v241-ready :where(
  .ring,
  .diagnostic-overall,
  .learning-focus-ring
).mnv-v241-progress-ready {
  animation: mnv-v241-progress-ring 640ms var(--mnv-v241-motion-ease) 1;
}

@keyframes mnv-v241-progress-draw {
  from { transform: scaleX(0); filter: brightness(1.3); }
  72% { filter: brightness(1.15) drop-shadow(0 0 8px rgba(98, 232, 255, .38)); }
  to { transform: scaleX(1); filter: none; }
}

@keyframes mnv-v241-progress-native {
  from { opacity: .42; filter: brightness(.85); }
  70% { opacity: 1; filter: brightness(1.14) drop-shadow(0 0 7px rgba(98, 232, 255, .30)); }
  to { opacity: 1; filter: none; }
}

@keyframes mnv-v241-progress-ring {
  from { opacity: .3; transform: scale(.74) rotate(-16deg); filter: none; }
  72% { opacity: 1; transform: scale(1.06) rotate(2deg); filter: drop-shadow(0 0 16px rgba(98, 232, 255, .26)); }
  to { opacity: 1; transform: none; }
}

/* AI screen uses app-owned .active/.pulse/.has-error timing. */
body.mnv-future-ui .ai-wait-overlay.is-visible .ai-wait-card {
  animation: mnv-v241-modal-arrive 250ms var(--mnv-v241-motion-ease) backwards;
}

body.mnv-future-ui .ai-mini-video.active {
  animation: mnv-v241-ai-card 230ms ease-out 1;
  border-color: rgba(98, 232, 255, .48);
  box-shadow: 0 0 0 2px rgba(98, 232, 255, .10), 0 12px 28px rgba(57, 120, 255, .18);
}

body.mnv-future-ui .ai-mini-video.pulse {
  animation: mnv-v241-ai-pulse 340ms ease-out 1;
}

@keyframes mnv-v241-ai-card {
  from { opacity: .62; transform: translate3d(0, 7px, 0) scale(.97); }
  to { opacity: 1; transform: none; }
}

@keyframes mnv-v241-ai-pulse {
  0%, 100% { transform: none; }
  55% { transform: translate3d(0, -2px, 0) scale(1.018); }
}

/* Success, error and completion are finite and never hide their copy. */
body.mnv-future-ui.mnv-v241-ready .mnv-v241-complete {
  animation: mnv-v241-complete 760ms var(--mnv-v241-motion-ease) 1;
}

body.mnv-future-ui.mnv-v241-ready .mnv-v241-error:not(.ai-wait-overlay):not(.page-transition-overlay) {
  animation: mnv-v241-error 260ms ease-in-out 1;
}

body.mnv-future-ui .ai-wait-overlay.mnv-v241-error .ai-wait-card,
body.mnv-future-ui .page-transition-overlay.mnv-v241-error .page-loader-card {
  animation: mnv-v241-error 260ms ease-in-out 1;
  border-color: rgba(255, 111, 135, .58);
}

@keyframes mnv-v241-complete {
  0% { opacity: .7; transform: scale(.982); box-shadow: 0 0 rgba(67, 220, 160, 0); }
  46% { opacity: 1; transform: scale(1.01); box-shadow: 0 0 0 5px rgba(67, 220, 160, .10), 0 0 38px rgba(67, 220, 160, .22); }
  72% { box-shadow: 0 0 0 9px rgba(98, 232, 255, .05), 0 0 25px rgba(98, 232, 255, .14); }
  100% { opacity: 1; transform: none; }
}

@keyframes mnv-v241-error {
  0%, 100% { transform: translateX(0); }
  28% { transform: translateX(-3px); }
  58% { transform: translateX(3px); }
  82% { transform: translateX(-1px); }
}

/* Existing owners toggle hidden/open. Motion never delays close. */
body.mnv-future-ui.mnv-v241-ready .mnv-v241-modal-open:not(.mnv-v241-fade-only):not([data-qr-scanner-root]) {
  animation: mnv-v241-modal-arrive 220ms var(--mnv-v241-motion-ease) backwards;
}

body.mnv-future-ui.mnv-v241-ready .mnv-v241-modal-open:is(.mnv-v241-fade-only, [data-qr-scanner-root]) {
  animation: mnv-v241-fade-only 190ms ease-out backwards;
}

@keyframes mnv-v241-modal-arrive {
  from { opacity: .28; transform: translate3d(0, 10px, 0) scale(.975); }
  to { opacity: 1; transform: none; }
}

/* Existing V240 press hook gets a more tactile but immediate response. */
body.mnv-future-ui :where(.button, button).mnv-ui-pressed {
  box-shadow: 0 4px 12px rgba(3, 15, 37, .20), inset 0 2px 8px rgba(0, 0, 0, .12);
  filter: brightness(.98);
  transform: translateY(1px) scale(.97);
  transition-duration: 110ms;
}

@media (hover: hover) and (pointer: fine) {
  body.mnv-future-ui .mnv-v241-stagger-item:not(.mnv-v241-fade-only):hover {
    border-color: rgba(98, 232, 255, .34);
    box-shadow: 0 22px 52px rgba(31, 95, 184, .18), 0 0 24px rgba(98, 232, 255, .08);
    transform: translateY(-3px);
  }
}

@media (max-width: 760px) {
  body.mnv-future-ui.page-index.mnv-v241-ready .mnv-v241-hero-copy.is-visible {
    animation-name: mnv-v241-fade-up;
    animation-duration: 340ms;
  }

  body.mnv-future-ui.page-index.mnv-v241-ready .koto-hero-stage.is-visible .mnv-v241-hero-device {
    animation-name: mnv-v241-card-arrive;
    animation-duration: 380ms;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.mnv-future-ui .mnv-v241-reveal,
  body.mnv-future-ui .mnv-v241-hero-copy,
  body.mnv-future-ui .mnv-v241-hero-device,
  body.mnv-future-ui .mnv-v241-hero-search,
  body.mnv-future-ui .mnv-v241-hero-actions,
  body.mnv-future-ui .mnv-v241-hero-trust,
  body.mnv-future-ui .mnv-v241-ambient,
  body.mnv-future-ui .mnv-v241-stagger-item,
  body.mnv-future-ui .mnv-v241-current,
  body.mnv-future-ui .mnv-v241-step-active,
  body.mnv-future-ui .mnv-v241-step-done,
  body.mnv-future-ui .mnv-v241-selected,
  body.mnv-future-ui .mnv-v241-progress-ready,
  body.mnv-future-ui .mnv-v241-complete,
  body.mnv-future-ui .mnv-v241-error,
  body.mnv-future-ui .mnv-v241-modal-open,
  body.mnv-future-ui .ai-mini-video.active,
  body.mnv-future-ui .ai-mini-video.pulse,
  body.mnv-future-ui .ai-wait-overlay.is-visible .ai-wait-card {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    transition-duration: .01ms !important;
  }

  body.mnv-future-ui .mnv-v241-hero-search::after,
  body.mnv-future-ui .koto-input-shell::after {
    display: none;
  }
}

@media (forced-colors: active) {
  body.mnv-future-ui :where(
    .mnv-v241-current,
    .mnv-v241-step-active,
    .mnv-v241-step-done,
    .mnv-v241-selected,
    .mnv-v241-complete,
    .mnv-v241-error
  ) {
    box-shadow: none;
    filter: none;
  }

  body.mnv-future-ui .mnv-v241-hero-search::after,
  body.mnv-future-ui .koto-input-shell::after {
    display: none;
  }
}

@media print {
  body.mnv-future-ui .mnv-v241-reveal,
  body.mnv-future-ui .mnv-v241-hero-copy,
  body.mnv-future-ui .mnv-v241-hero-device,
  body.mnv-future-ui .mnv-v241-hero-search,
  body.mnv-future-ui .mnv-v241-stagger-item,
  body.mnv-future-ui .mnv-v241-progress-ready,
  body.mnv-future-ui .mnv-v241-complete,
  body.mnv-future-ui .mnv-v241-error {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    box-shadow: none !important;
  }

  body.mnv-future-ui .mnv-v241-hero-search::after,
  body.mnv-future-ui .koto-input-shell::after {
    display: none !important;
  }
}