/* ============================================================
   CJ MOTION SYSTEM (Phase 2) — transform + opacity only.
   - Gated on html.cj-js (added by motion.js): no-JS users always
     see full content (progressive enhancement).
   - Reveal: opacity 0→1, translateY(20px)→0, ~550ms, subtle ease.
   - Stagger: short 80ms steps — users never wait for content.
   - Text mask + image reveal for hero/major headings (opt-in).
   - Wave signature: thin-line, subtle, selected areas ONLY.
   - Page transition: ~320ms fade, never delays navigation.
   ============================================================ */

html.cj-js [data-cj] {
  opacity: 0;
  transition: opacity var(--cj-reveal-duration) var(--ease-out), transform var(--cj-reveal-duration) var(--ease-out);
}
html.cj-js [data-cj="fade"] { transform: none; }
html.cj-js [data-cj="rise"] { transform: translateY(var(--cj-reveal-distance)); }
html.cj-js [data-cj="slide-left"] { transform: translateX(40px); }
html.cj-js [data-cj="slide-right"] { transform: translateX(-40px); }
html.cj-js [data-cj="zoom"] { transform: scale(0.94); }
[data-cj].is-in { opacity: 1 !important; transform: none !important; }

/* Stagger: short intervals (80ms), max ~0.5s total. */
html.cj-js [data-cj-group] > *:nth-child(1) { transition-delay: 0ms; }
html.cj-js [data-cj-group] > *:nth-child(2) { transition-delay: var(--cj-stagger-step); }
html.cj-js [data-cj-group] > *:nth-child(3) { transition-delay: calc(var(--cj-stagger-step) * 2); }
html.cj-js [data-cj-group] > *:nth-child(4) { transition-delay: calc(var(--cj-stagger-step) * 3); }
html.cj-js [data-cj-group] > *:nth-child(5) { transition-delay: calc(var(--cj-stagger-step) * 4); }
html.cj-js [data-cj-group] > *:nth-child(6) { transition-delay: calc(var(--cj-stagger-step) * 5); }
html.cj-js [data-cj-group] > *:nth-child(7) { transition-delay: calc(var(--cj-stagger-step) * 6); }
html.cj-js [data-cj-group] > *:nth-child(8) { transition-delay: calc(var(--cj-stagger-step) * 7); }

/* CJ Text Mask — premium headline reveal (hero + major headings only).
   Markup: <span class="cj-mask"><span>Headline</span></span> */
.cj-mask { display: block; overflow: hidden; }
.cj-mask > span { display: block; }
html.cj-js .cj-mask > span { transform: translateY(110%); transition: transform 650ms var(--ease-out); }
html.cj-js .cj-mask.is-in > span { transform: none; }

/* CJ Image Reveal — clip wipe + subtle scale normalisation (GPU-friendly).
   Markup: <figure class="cj-imgreveal"><img …></figure> */
.cj-imgreveal { position: relative; overflow: hidden; border-radius: var(--radius-lg); }
.cj-imgreveal img { display: block; width: 100%; height: 100%; object-fit: cover; }
html.cj-js .cj-imgreveal { clip-path: inset(6% 4% 6% 4% round 16px); opacity: 0; transition: clip-path 700ms var(--ease-out), opacity 500ms var(--ease-out); }
html.cj-js .cj-imgreveal img { transform: scale(1.08); transition: transform 900ms var(--ease-out); }
html.cj-js .cj-imgreveal.is-in { clip-path: inset(0 0 0 0 round 16px); opacity: 1; }
html.cj-js .cj-imgreveal.is-in img { transform: scale(1); }

/* Card hover lift + image zoom (desktop pointers only). */
.cj-hover { transition: transform var(--duration-base) var(--ease-out), box-shadow var(--duration-base) var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .cj-hover:hover { transform: translateY(var(--cj-lift)); box-shadow: var(--shadow-lg); }
}
.cj-zoom-img { overflow: hidden; border-radius: var(--radius-lg); }
.cj-zoom-img img { transition: transform var(--duration-slow) var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .cj-zoom-img:hover img { transform: scale(1.06); }
}

/* CJ Wave signature — thin waveform lines, slow and subtle.
   Use ONLY in selected moments (hero accents, player, brand marks),
   never as a constantly jumping equalizer across the site. */
.cj-wave { display: inline-flex; align-items: center; gap: 5px; height: 32px; }
.cj-wave span {
  width: 2px; border-radius: 2px; background: linear-gradient(var(--cj-primary), rgba(18, 151, 254, 0.25));
  transform-origin: center; animation: cj-wave 3.2s ease-in-out infinite;
}
.cj-wave span:nth-child(1) { height: 35%; animation-delay: 0s; }
.cj-wave span:nth-child(2) { height: 65%; animation-delay: 0.4s; }
.cj-wave span:nth-child(3) { height: 45%; animation-delay: 0.8s; }
.cj-wave span:nth-child(4) { height: 85%; animation-delay: 1.2s; }
.cj-wave span:nth-child(5) { height: 55%; animation-delay: 1.6s; }
.cj-wave span:nth-child(6) { height: 75%; animation-delay: 2s; }
.cj-wave span:nth-child(7) { height: 40%; animation-delay: 2.4s; }
@keyframes cj-wave { 0%, 100% { transform: scaleY(0.55); opacity: 0.7; } 50% { transform: scaleY(1); opacity: 1; } }

/* Progress animation (lesson/checkout progress bars). */
.cj-progress { height: 8px; border-radius: var(--radius-pill); background: var(--color-border); overflow: hidden; }
.cj-progress > span { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, var(--cj-primary), #5BB8FF); transition: width var(--duration-slow) var(--ease-out); }

/* Subtle parallax hook — JS writes --cj-py (translate only). */
[data-parallax] { transform: translateY(var(--cj-py, 0px)); will-change: transform; }

/* Page transition: quick fade + thin CJ Blue progress line.
   The line is decorative and instant — navigation is never delayed. */
.cj-page { animation: cj-page-in var(--duration-base) var(--ease-out); }
@keyframes cj-page-in { from { opacity: 0; } to { opacity: 1; } }
.cj-page-line {
  position: fixed; top: 0; left: 0; height: 2px; width: 100%; z-index: var(--z-toast);
  background: linear-gradient(90deg, transparent, var(--cj-primary), transparent);
  transform-origin: left; animation: cj-page-line 450ms var(--ease-out);
  pointer-events: none;
}
@keyframes cj-page-line { from { transform: scaleX(0); opacity: 1; } to { transform: scaleX(1); opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; transition-delay: 0ms !important; }
  [data-cj], html.cj-js [data-cj] { opacity: 1 !important; transform: none !important; }
  html.cj-js .cj-mask > span { transform: none; }
  html.cj-js .cj-imgreveal { clip-path: none; opacity: 1; }
  html.cj-js .cj-imgreveal img { transform: none; }
  .cj-page { animation: none; }
  .cj-page-line { display: none; }
  [data-parallax] { transform: none !important; }
  .cj-wave span { animation: none; opacity: 0.85; }
  .cj-skeleton::after { animation: none; }
}