/*
 * まなび動画ナビ — Photo Motion V242 / Application surfaces
 * Visual-only, finite motion. No request, form, media or canvas behavior.
 */

:root {
  --mnv-v242-motion-fast: 160ms;
  --mnv-v242-motion-card: 300ms;
  --mnv-v242-motion-scene: 520ms;
  --mnv-v242-ease: cubic-bezier(.2, .78, .2, 1);
}

body.mnv-future-ui :is(
  .button,
  .history-item,
  .stat-card,
  .route-card-s,
  .org-card,
  .org-kpi,
  .admin-card,
  .kpi-card,
  .diagnostic-option > span,
  .assessment-options label > span,
  .practice-choice-grid label > span
) {
  transition:
    border-color var(--mnv-v242-motion-fast) ease,
    background-color var(--mnv-v242-motion-fast) ease,
    box-shadow var(--mnv-v242-motion-fast) ease,
    color var(--mnv-v242-motion-fast) ease,
    transform var(--mnv-v242-motion-fast) ease;
}

/* The persistent cockpit arrives as one unit; it never loops. */
@media (min-width: 1181px) {
  body.mnv-future-ui.mnv-v241-ready:is(.shell-learner, .shell-immersive) .site-header {
    animation: mnv-v242-rail-enter 420ms var(--mnv-v242-ease) both;
  }

  body.mnv-future-ui.mnv-v241-ready:is(.shell-learner, .shell-immersive) .site-header .brand {
    animation: mnv-v242-brand-enter 360ms var(--mnv-v242-ease) 90ms both;
  }
}

@keyframes mnv-v242-rail-enter {
  from { opacity: .35; transform: translate3d(-24px, 0, 0); }
  to { opacity: 1; transform: none; }
}

@keyframes mnv-v242-brand-enter {
  from { opacity: .15; transform: translate3d(0, -10px, 0); }
  to { opacity: 1; transform: none; }
}

/* Reference 06's illuminated current-location route. */
body.mnv-future-ui.mnv-v241-ready .mf-journey-rail .is-current .mf-journey-step-icon {
  animation: mnv-v242-current-step 620ms var(--mnv-v242-ease) 1 both;
}

body.mnv-future-ui.mnv-v241-ready .mf-journey-rail .is-complete .mf-journey-step-icon {
  animation: mnv-v242-complete-step 340ms ease-out 1 both;
}

@keyframes mnv-v242-current-step {
  0% { opacity: .28; transform: scale(.72); box-shadow: 0 0 rgba(100, 234, 255, 0); }
  68% { opacity: 1; transform: scale(1.09); box-shadow: 0 0 0 8px rgba(100, 234, 255, .13), 0 0 32px rgba(61, 126, 255, .50); }
  100% { transform: none; }
}

@keyframes mnv-v242-complete-step {
  from { opacity: .25; transform: scale(.74); }
  72% { opacity: 1; transform: scale(1.06); }
  to { transform: none; }
}

/* Dashboard mission and the four status tiles enter in the order shown in 01. */
body.mnv-future-ui.page-mypage.mnv-v241-ready .dash-greet.mf-horizon-reveal.is-visible {
  animation: mnv-v242-mission-enter var(--mnv-v242-motion-scene) var(--mnv-v242-ease) both;
}

body.mnv-future-ui.page-mypage.mnv-v241-ready .today-learning-card.mf-horizon-reveal.is-visible {
  animation: mnv-v242-mission-enter 440ms var(--mnv-v242-ease) 60ms both;
}

body.mnv-future-ui.page-mypage.mnv-v241-ready .stat-cards.mf-horizon-reveal.is-visible > .stat-card:nth-child(1) { animation-delay: 70ms; }
body.mnv-future-ui.page-mypage.mnv-v241-ready .stat-cards.mf-horizon-reveal.is-visible > .stat-card:nth-child(2) { animation-delay: 115ms; }
body.mnv-future-ui.page-mypage.mnv-v241-ready .stat-cards.mf-horizon-reveal.is-visible > .stat-card:nth-child(3) { animation-delay: 160ms; }
body.mnv-future-ui.page-mypage.mnv-v241-ready .stat-cards.mf-horizon-reveal.is-visible > .stat-card:nth-child(4) { animation-delay: 205ms; }

@keyframes mnv-v242-mission-enter {
  from { opacity: .16; transform: translate3d(0, 22px, 0) scale(.984); }
  72% { opacity: 1; transform: translate3d(0, -2px, 0) scale(1.002); }
  to { opacity: 1; transform: none; }
}

/* Three-video order rail draws once; the actual video facade is untouched. */
body.mnv-future-ui.mnv-v241-ready:is(.page-route, .page-route_preview) .route-timeline.mf-horizon-reveal.is-visible::before,
body.mnv-future-ui.mnv-v241-ready:is(.page-route, .page-route_preview) .route-timeline.mnv-v241-stage-ready::before {
  transform-origin: left center;
  animation: mnv-v242-route-draw 720ms var(--mnv-v242-ease) both;
}

body.mnv-future-ui.mnv-v241-ready:is(.page-route, .page-route_preview) .route-step:nth-child(1) .step-marker {
  animation: mnv-v242-marker-enter 360ms var(--mnv-v242-ease) 70ms both;
}

body.mnv-future-ui.mnv-v241-ready:is(.page-route, .page-route_preview) .route-step:nth-child(2) .step-marker {
  animation: mnv-v242-marker-enter 360ms var(--mnv-v242-ease) 160ms both;
}

body.mnv-future-ui.mnv-v241-ready:is(.page-route, .page-route_preview) .route-step:nth-child(3) .step-marker {
  animation: mnv-v242-marker-enter 360ms var(--mnv-v242-ease) 250ms both;
}

@keyframes mnv-v242-route-draw {
  from { opacity: .12; transform: scaleX(.03); }
  to { opacity: 1; transform: scaleX(1); }
}

@keyframes mnv-v242-marker-enter {
  from { opacity: .15; transform: scale(.66); }
  72% { opacity: 1; transform: scale(1.1); }
  to { transform: none; }
}

/* Selection feels like the reference glow but never delays the native change. */
body.mnv-future-ui :is(
  .diagnostic-option,
  .assessment-options label,
  .practice-choice-grid label,
  .dekiru-choice
) input:checked + span {
  animation: mnv-v242-choice-select 190ms ease-out 1;
}

@keyframes mnv-v242-choice-select {
  0% { transform: scale(.978); box-shadow: 0 0 rgba(100, 234, 255, 0); }
  72% { transform: scale(1.008); box-shadow: 0 0 0 5px rgba(100, 234, 255, .11), 0 0 28px rgba(40, 135, 255, .21); }
  100% { transform: none; }
}

/* AI loading edge scan: decoration only, no synthetic wait. */
body.mnv-future-ui :is(.page-loader-card, .practice-processing-card, .ai-wait-card) {
  position: relative;
  overflow: hidden;
}

body.mnv-future-ui :is(.page-loader-card, .practice-processing-card, .ai-wait-card)::after {
  position: absolute;
  z-index: 0;
  inset: -1px 76% auto -1px;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, #64eaff 38%, #865cff 72%, transparent);
  content: "";
  opacity: 0;
  pointer-events: none;
  animation: mnv-v242-loader-scan 840ms ease-out 1;
}

@keyframes mnv-v242-loader-scan {
  0% { opacity: 0; transform: translate3d(-55%, 0, 0); }
  22% { opacity: 1; }
  78% { opacity: .86; }
  100% { opacity: 0; transform: translate3d(440%, 0, 0); }
}

/* Success is deliberately stronger and finite, like reference 15. */
body.mnv-future-ui.mnv-v241-ready :is(
  .practice-complete,
  .standard-review-complete,
  .diagnostic-complete,
  .dekiru-outcome-card.success
).mf-horizon-reveal.is-visible {
  animation: mnv-v242-success-enter 720ms var(--mnv-v242-ease) both;
}

body.mnv-future-ui.mnv-v241-ready :is(
  .practice-complete,
  .standard-review-complete,
  .diagnostic-complete,
  .dekiru-outcome-card.success
)::before {
  animation: mnv-v242-companion-enter 760ms var(--mnv-v242-ease) 110ms both;
}

body.mnv-future-ui.mnv-v241-ready :is(
  .practice-complete,
  .standard-review-complete,
  .diagnostic-complete,
  .dekiru-outcome-card.success
)::after {
  animation: mnv-v242-stars 560ms ease-out 2 alternate;
}

@keyframes mnv-v242-success-enter {
  0% { opacity: .18; transform: translate3d(0, 24px, 0) scale(.972); }
  68% { opacity: 1; transform: translate3d(0, -3px, 0) scale(1.006); }
  100% { transform: none; }
}

@keyframes mnv-v242-companion-enter {
  from { opacity: 0; transform: translate3d(32px, 22px, 0) scale(.72) rotate(5deg); }
  70% { opacity: 1; transform: translate3d(-3px, -4px, 0) scale(1.04) rotate(-1deg); }
  to { opacity: .94; transform: none; }
}

@keyframes mnv-v242-stars {
  from { opacity: .18; }
  to { opacity: .88; }
}

/* Error feedback is one brief, readable nudge. */
body.mnv-future-ui .mnv-v241-error {
  animation: mnv-v242-error-nudge 260ms ease-out 1;
}

@keyframes mnv-v242-error-nudge {
  0%, 100% { transform: translate3d(0, 0, 0); }
  30% { transform: translate3d(-5px, 0, 0); }
  65% { transform: translate3d(4px, 0, 0); }
}

/* Hover depth is limited to cards with no media/canvas/QR owner. */
@media (hover: hover) and (pointer: fine) {
  body.mnv-future-ui :is(.stat-card, .route-card-s, .history-item, .org-kpi, .kpi-card):hover {
    border-color: rgba(100, 234, 255, .46);
    box-shadow: 0 20px 52px rgba(0, 5, 22, .35), 0 0 24px rgba(40, 135, 255, .10);
    transform: translate3d(0, -3px, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  body.mnv-future-ui *,
  body.mnv-future-ui *::before,
  body.mnv-future-ui *::after {
    animation-duration: .01ms;
    animation-iteration-count: 1;
    scroll-behavior: auto;
    transition-duration: .01ms;
  }

  body.mnv-future-ui :is(.button, .stat-card, .route-card-s, .history-item, .org-kpi, .kpi-card):hover {
    transform: none;
  }
}

@media print {
  body.mnv-future-ui *,
  body.mnv-future-ui *::before,
  body.mnv-future-ui *::after {
    animation: none;
    transition: none;
  }
}