/* ORBITAL Learn: the motion layer.

   Loaded by index.html after app/shell.css. Delete both tags (this file and
   app/motion.js) and the app is exactly what it was without it.

   Everything here is presentation only: no markup is forked and no module
   depends on it. All movement sits inside prefers-reduced-motion:
   no-preference, and shell.css already zeroes every animation for reduce. */

:root {
  --mo-ease: cubic-bezier(.22, 1, .36, 1);      /* long-tail settle, no bounce */
  --mo-ease-in: cubic-bezier(.55, 0, .75, .2);
}

/* The starfield canvas (app/motion.js) sits behind everything, so the page
   ground moves from body to html. */
html { background: var(--bg); }
body.mo-on { background: transparent; }
#moStars {
  position: fixed; inset: 0; width: 100%; height: 100%;
  z-index: -1; pointer-events: none; opacity: .9;
}

@media (prefers-reduced-motion: no-preference) {

  /* ---- Page reveal: cards rise in a stagger as they scroll into view ---- */
  /* Hidden only until motion.js marks it in; the entrance is an animation
     with fill "both", not a transition, so it needs no painted "before"
     frame and cannot strand a card half-faded. */
  .mo-reveal { opacity: 0; }
  .mo-reveal.mo-in {
    opacity: 1;
    animation: mo-rise .7s var(--mo-ease) both;
    animation-delay: calc(var(--mo-i, 0) * 55ms);
  }
  @keyframes mo-rise {
    from { opacity: 0; transform: translateY(18px) scale(.985); }
    to { opacity: 1; transform: none; }
  }
  /* shell.css gives every .card a short rise; inside a revealed block the
     block's own entrance replaces it. */
  .mo-reveal .card { animation: none; }

  /* Tab switch: the whole screen settles in */
  #screen.mo-swap { animation: mo-screen .45s var(--mo-ease) both; }
  @keyframes mo-screen { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

  /* ---- Progress fills grow from empty ---- */
  .progressbar i { transform-origin: left center; animation: mo-fill 1.1s var(--mo-ease) .15s both; }
  @keyframes mo-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
  .progressbar { position: relative; }
  .progressbar::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(90deg, transparent, rgba(232, 238, 255, .35), transparent);
    transform: translateX(-100%);
    animation: mo-sheen 1.4s var(--mo-ease) 1s 1 both;
    pointer-events: none;
  }
  @keyframes mo-sheen { to { transform: translateX(100%); } }

  /* ---- Sky hero: a scanning accent line across each stat card ---- */
  .lv-hcard { position: relative; overflow: hidden; }
  .lv-hcard::before {
    content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px;
    background: linear-gradient(90deg, transparent, var(--acc), transparent);
    transform: translateX(-100%);
    animation: mo-scan 2.2s var(--mo-ease) .3s 1 both;
  }
  .lv-hcard:nth-child(2)::before { animation-delay: .5s; }
  .lv-hcard:nth-child(3)::before { animation-delay: .7s; }
  @keyframes mo-scan { to { transform: translateX(100%); } }
  .lv-hn.mo-counting { color: var(--txt); text-shadow: 0 0 18px rgba(95, 139, 255, .55); }
  .lv-hn { transition: color .6s, text-shadow .9s; }

  /* ---- Lesson bubbles and tiles: a lift on hover, a ring glow when done ---- */
  @media (hover: hover) {
    .tile, .card-tap, .ch-jump, .lr-card { transition: transform .25s var(--mo-ease), border-color .2s, box-shadow .25s; }
    .tile:hover, .card-tap:hover, .lr-card:hover { transform: translateY(-3px); box-shadow: 0 10px 28px -14px rgba(95, 139, 255, .55); }
    .ch-jump:hover { transform: translateY(-2px); }
    .bubble:hover .ring { transform: scale(1.06); }
  }
  .bubble.done .ring, .tile.quizzed { animation: mo-done-glow 2.4s ease-out .4s 1 both; }
  @keyframes mo-done-glow {
    0% { box-shadow: 0 0 0 0 rgba(67, 224, 138, .0); }
    30% { box-shadow: 0 0 0 6px rgba(67, 224, 138, .18); }
    100% { box-shadow: 0 0 0 0 rgba(67, 224, 138, 0); }
  }

  /* ---- Tab bar: the active tab's icon floats up and glows ---- */
  .tabbtn .tabico { transition: transform .35s var(--mo-ease), filter .35s; }
  .tabbtn.on .tabico { transform: translateY(-2px); filter: drop-shadow(0 0 6px rgba(95, 139, 255, .7)); }

  /* ---- Story cards: the card opens with a soft pop over a fading sky ---- */
  .story { animation: mo-backdrop .35s ease-out both; }
  @keyframes mo-backdrop { from { background-color: rgba(5, 7, 15, 0); backdrop-filter: blur(0); } }
  .story-card { animation: mo-card-open .5s var(--mo-ease) both; }
  @keyframes mo-card-open {
    from { opacity: 0; transform: translateY(24px) scale(.96); filter: blur(6px); }
    to { opacity: 1; transform: none; filter: none; }
  }

  /* Each slide's picture wipes in from the left before the copy rises */
  .story-slide.in .s-media { animation: mo-wipe .7s var(--mo-ease) both; }
  @keyframes mo-wipe {
    from { clip-path: inset(0 100% 0 0 round 14px); opacity: .4; }
    to { clip-path: inset(0 0 0 0 round 14px); opacity: 1; }
  }
  .story-slide.in .s-chapter, .story-slide.in .chapter-meta { animation: mo-chapter .8s var(--mo-ease) both; }
  @keyframes mo-chapter { from { opacity: 0; letter-spacing: .4em; } to { opacity: 1; } }

  /* Progress dots fill like a fuse */
  .story-dots i { transition: background-color .35s, transform .35s var(--mo-ease); }
  .story-dots i.on:last-of-type, .story-dots i.on { transform: scaleY(1.4); }

  /* Quiz feedback: a right answer pulses, a wrong one shakes */
  .quiz-opt.good { animation: mo-good .6s var(--mo-ease) both; }
  @keyframes mo-good {
    0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(67, 224, 138, .6); }
    40% { transform: scale(1.03); }
    100% { transform: scale(1); box-shadow: 0 0 0 14px rgba(67, 224, 138, 0); }
  }
  .quiz-opt.bad { animation: mo-bad .45s ease-in-out both; }
  @keyframes mo-bad {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-7px); } 40% { transform: translateX(6px); }
    60% { transform: translateX(-4px); } 80% { transform: translateX(2px); }
  }

  /* Glossary chips pop as they appear */
  .story-slide.in .term-chip { animation: mo-pop .4s var(--mo-ease) both; }
  .story-slide.in .term-chip:nth-child(2) { animation-delay: .06s; }
  .story-slide.in .term-chip:nth-child(3) { animation-delay: .12s; }
  .story-slide.in .term-chip:nth-child(n+4) { animation-delay: .18s; }
  @keyframes mo-pop { from { opacity: 0; transform: scale(.7); } to { opacity: 1; transform: none; } }

  /* ---- Learners: the avatar ring breathes once when a learner is active ---- */
  .lr-now .lr-av { animation: mo-av 1.6s var(--mo-ease) .2s 1 both; }
  @keyframes mo-av {
    0% { box-shadow: 0 0 0 0 rgba(95, 139, 255, .6); }
    100% { box-shadow: 0 0 0 16px rgba(95, 139, 255, 0); }
  }

  /* ---- Header: the brand glyph's satellite orbits (motion.js adds it) ---- */
  .brand svg { overflow: visible; }
  .brand .mo-sat { filter: drop-shadow(0 0 3px rgba(95, 139, 255, .9)); }

  /* Today in space: a slow light sweep over the card once */
  .hero-today .card { position: relative; overflow: hidden; }
  .hero-today .card::after {
    content: ""; position: absolute; inset: -40% auto -40% -30%; width: 30%;
    background: linear-gradient(100deg, transparent, rgba(95, 139, 255, .12), transparent);
    transform: translateX(0) skewX(-12deg);
    animation: mo-sweep 2.6s var(--mo-ease) .8s 1 both;
    pointer-events: none;
  }
  @keyframes mo-sweep { to { transform: translateX(520%) skewX(-12deg); } }
}