/* ═══════════════════════════════════════════════════════════════════════
   joy-motion.css — beautiful motion + interactions
   Yousef directive: add many beautiful visual motions and interactions.

   Includes:
   - Floating clouds + light rays + sun particles
   - Card hover lift + glow
   - Animated SVG section dividers
   - Scroll-triggered fade up + parallax
   - Shimmer effects on accents
   - Smooth section transitions
   - Animated icons
   ═══════════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────────────
   1. FLOATING SUN PARTICLES (hero background)
   ───────────────────────────────────────────────────────────────────── */
.joy-sun-particles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  overflow: hidden;
}

.joy-sun-particle {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(244, 215, 122, 0.8) 0%, rgba(244, 215, 122, 0) 70%);
  animation: joy-particle-rise linear infinite;
  will-change: transform, opacity;
}

@keyframes joy-particle-rise {
  0% { transform: translateY(0) scale(0.6); opacity: 0; }
  10% { opacity: 0.9; }
  90% { opacity: 0.7; }
  100% { transform: translateY(-120vh) scale(1.4); opacity: 0; }
}

/* ─────────────────────────────────────────────────────────────────────
   2. LIGHT RAYS (subtle sun god-rays through hero)
   ───────────────────────────────────────────────────────────────────── */
.joy-light-rays {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  background:
    conic-gradient(
      from 90deg at 20% 0%,
      transparent 0deg,
      rgba(244, 215, 122, 0.20) 6deg,
      transparent 12deg,
      transparent 18deg,
      rgba(244, 215, 122, 0.16) 24deg,
      transparent 30deg,
      transparent 36deg,
      rgba(244, 215, 122, 0.20) 42deg,
      transparent 48deg
    );
  mix-blend-mode: screen;
  animation: joy-rays-pulse 14s ease-in-out infinite;
}

@keyframes joy-rays-pulse {
  0%, 100% { opacity: 0.4; transform: scale(1) rotate(0deg); }
  50%      { opacity: 0.7; transform: scale(1.06) rotate(2deg); }
}

/* ─────────────────────────────────────────────────────────────────────
   3. FLOATING CLOUDS (hero atmosphere)
   ───────────────────────────────────────────────────────────────────── */
.joy-clouds {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  overflow: hidden;
}

.joy-cloud {
  position: absolute;
  width: 180px;
  height: 60px;
  background: radial-gradient(ellipse at center,
    rgba(255, 255, 255, 0.55) 0%,
    rgba(255, 255, 255, 0.0) 70%);
  filter: blur(8px);
  animation: joy-cloud-drift linear infinite;
}

@keyframes joy-cloud-drift {
  from { transform: translateX(-220px); }
  to   { transform: translateX(110vw); }
}

/* ─────────────────────────────────────────────────────────────────────
   4. CARD LIFT + GLOW on hover
   ───────────────────────────────────────────────────────────────────── */
.media-card,
.shop-product-card,
.lesson-card,
.foundations-card {
  transition:
    transform 320ms cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow 320ms cubic-bezier(0.4, 0, 0.2, 1),
    border-color 200ms ease;
  position: relative;
  overflow: hidden;
}

.media-card:hover,
.shop-product-card:hover,
.lesson-card:hover {
  transform: translateY(-6px);
  box-shadow:
    0 16px 40px rgba(244, 167, 139, 0.30),
    0 2px 8px rgba(212, 168, 67, 0.20),
    0 0 0 1px rgba(212, 168, 67, 0.30);
}

/* Shimmer overlay on card hover */
.media-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    100deg,
    transparent 0%,
    rgba(255, 255, 255, 0.0) 40%,
    rgba(255, 255, 255, 0.35) 50%,
    rgba(255, 255, 255, 0.0) 60%,
    transparent 100%
  );
  background-size: 200% 100%;
  background-position: -200% 50%;
  transition: background-position 800ms ease;
  pointer-events: none;
  border-radius: inherit;
}

.media-card:hover::after {
  background-position: 200% 50%;
}

/* ─────────────────────────────────────────────────────────────────────
   5. ANIMATED SECTION DIVIDERS (SVG wave)
   ───────────────────────────────────────────────────────────────────── */
.joy-divider-wave {
  display: block;
  width: 100%;
  height: 60px;
  background: var(--grad-dawn);
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 60' preserveAspectRatio='none'><path d='M0,30 C300,60 600,0 900,30 C1050,45 1100,15 1200,30 L1200,60 L0,60 Z' fill='black'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 60' preserveAspectRatio='none'><path d='M0,30 C300,60 600,0 900,30 C1050,45 1100,15 1200,30 L1200,60 L0,60 Z' fill='black'/></svg>");
  -webkit-mask-size: 100% 100%;
          mask-size: 100% 100%;
  margin: -1px 0;
}

/* ─────────────────────────────────────────────────────────────────────
   6. SCROLL-TRIGGERED FADE UP (used with IntersectionObserver)
   ───────────────────────────────────────────────────────────────────── */
[data-reveal] {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 700ms cubic-bezier(0.4, 0, 0.2, 1),
              transform 700ms cubic-bezier(0.4, 0, 0.2, 1);
}

[data-reveal].is-revealed {
  opacity: 1;
  transform: translateY(0);
}

/* Staggered children */
[data-reveal-children] > * {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 600ms cubic-bezier(0.4, 0, 0.2, 1),
              transform 600ms cubic-bezier(0.4, 0, 0.2, 1);
}
[data-reveal-children].is-revealed > *:nth-child(1) { transition-delay: 0ms; }
[data-reveal-children].is-revealed > *:nth-child(2) { transition-delay: 80ms; }
[data-reveal-children].is-revealed > *:nth-child(3) { transition-delay: 160ms; }
[data-reveal-children].is-revealed > *:nth-child(4) { transition-delay: 240ms; }
[data-reveal-children].is-revealed > *:nth-child(5) { transition-delay: 320ms; }
[data-reveal-children].is-revealed > *:nth-child(6) { transition-delay: 400ms; }
[data-reveal-children].is-revealed > *:nth-child(n+7) { transition-delay: 480ms; }
[data-reveal-children].is-revealed > * {
  opacity: 1;
  transform: translateY(0);
}

/* ─────────────────────────────────────────────────────────────────────
   7. ANIMATED LINKS (underline grows on hover)
   ───────────────────────────────────────────────────────────────────── */
.prose a {
  position: relative;
  text-decoration: none;
  background-image: linear-gradient(90deg, var(--jp-gold-400), var(--jp-coral));
  background-size: 100% 2px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: background-size 300ms ease;
}
.prose a:hover {
  background-size: 100% 4px;
}

/* ─────────────────────────────────────────────────────────────────────
   8. SHIMMER BUTTONS (gold + coral with light sweep)
   ───────────────────────────────────────────────────────────────────── */
.btn--gold {
  position: relative;
  overflow: hidden;
}

.btn--gold::after {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 100%; height: 100%;
  background: linear-gradient(
    100deg,
    transparent 0%,
    rgba(255, 255, 255, 0.55) 50%,
    transparent 100%
  );
  transition: left 700ms ease;
  pointer-events: none;
}

.btn--gold:hover::after {
  left: 100%;
}

/* ─────────────────────────────────────────────────────────────────────
   9. SCROLL PROGRESS BAR (top)
   ───────────────────────────────────────────────────────────────────── */
.joy-progress-bar {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  background: var(--grad-spectrum);
  z-index: 9999;
  width: 0%;
  transition: width 80ms ease-out;
  box-shadow: 0 2px 8px rgba(212, 168, 67, 0.40);
}

/* ─────────────────────────────────────────────────────────────────────
   10. CINEMATIC HERO H1 — joy gradient + soft glow
   ───────────────────────────────────────────────────────────────────── */
.cinematic-hero__h1 {
  text-shadow: 0 0 30px rgba(212, 168, 67, 0.30);
  animation:
    tech-aurora-shift 14s ease-in-out infinite,
    joy-h1-breathe 6s ease-in-out infinite;
}

@keyframes joy-h1-breathe {
  0%, 100% { transform: scale(1); text-shadow: 0 0 30px rgba(212, 168, 67, 0.30); }
  50%      { transform: scale(1.005); text-shadow: 0 0 50px rgba(244, 167, 139, 0.45); }
}

/* ─────────────────────────────────────────────────────────────────────
   11. (Intentionally not auto-coloring sections — handled in joy-bright.css)
   ───────────────────────────────────────────────────────────────────── */

/* ─────────────────────────────────────────────────────────────────────
   12. ANIMATED SVG CROSS (subtle glow)
   ───────────────────────────────────────────────────────────────────── */
.cinematic-hero__logo svg,
.site-mark__icon svg,
.footer-mark__icon svg,
.section-divider__mark svg {
  filter: drop-shadow(0 0 6px rgba(212, 168, 67, 0.50));
  animation: joy-cross-shine 5s ease-in-out infinite;
}

@keyframes joy-cross-shine {
  0%, 100% { filter: drop-shadow(0 0 6px rgba(212, 168, 67, 0.40)); }
  50%      { filter: drop-shadow(0 0 16px rgba(244, 167, 139, 0.70)); }
}

/* ─────────────────────────────────────────────────────────────────────
   13. CINEMATIC HERO INNER — bring text forward
   ───────────────────────────────────────────────────────────────────── */
.cinematic-hero__inner {
  position: relative;
  z-index: 10;
}

/* ─────────────────────────────────────────────────────────────────────
   14. RESPECT REDUCED MOTION
   ───────────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .joy-sun-particle, .joy-cloud, .joy-light-rays,
  .joy-progress-bar, .media-card::after, .btn--gold::after {
    animation: none !important;
    transition: none !important;
  }
  .cinematic-hero__h1 { animation: none !important; }
}

/* ─────────────────────────────────────────────────────────────────────
   14.5  BACK TO TOP floating button
   ───────────────────────────────────────────────────────────────────── */
.joy-back-to-top {
  position: fixed;
  bottom: 22px;
  right: 22px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 2px solid var(--jp-gold-400);
  background: linear-gradient(135deg, var(--jp-gold-200), var(--jp-coral));
  color: var(--jp-ink);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  opacity: 0;
  transform: translateY(20px) scale(0.85);
  pointer-events: none;
  transition: opacity 320ms ease, transform 320ms ease, box-shadow 240ms ease;
  box-shadow: 0 4px 18px rgba(244, 167, 139, 0.45);
}
.joy-back-to-top svg {
  width: 22px;
  height: 22px;
}
.joy-back-to-top.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}
.joy-back-to-top:hover {
  transform: translateY(-3px) scale(1.06);
  box-shadow: 0 10px 28px rgba(244, 167, 139, 0.60);
}

/* ─────────────────────────────────────────────────────────────────────
   15. MOBILE — reduce intensity
   ───────────────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .joy-clouds .joy-cloud:nth-child(odd) { display: none; }
  .joy-light-rays { opacity: 0.5; }
}