/* ==========================================================================
   motion-system.css
   Hebrew AI School — RTL dark-theme motion & animation system
   Covers: smooth scroll, reveal animations, stagger children,
           ambient blobs, particle canvas, micro-interactions,
           counter animation, mobile overrides, reduced-motion.
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. SMOOTH SCROLL
   -------------------------------------------------------------------------- */

html {
  scroll-behavior: smooth;
  /* leave room for the fixed nav bar (72 px) when jumping to anchors */
  scroll-padding-top: 72px;
}


/* --------------------------------------------------------------------------
   2. REVEAL ANIMATIONS
   Elements start hidden via [data-reveal] and become visible when JS adds
   the class .is-revealed.  Each variant controls its own transform/opacity.
   Use the CSS custom property --reveal-delay on the element to stagger
   individual items without extra JS (e.g. style="--reveal-delay: 200ms").
   -------------------------------------------------------------------------- */

/* --- shared "before reveal" state --- */
[data-reveal] {
  /* initial opacity shared by all variants */
  opacity: 0;
  /* will-change lets the browser composite the layer ahead of time */
  will-change: opacity, transform;
}

/* --- fade-up ------------------------------------------------------------ */
[data-reveal="fade-up"] {
  transform: translateY(48px);
  transition:
    opacity  0.85s cubic-bezier(0.16, 1, 0.3, 1) var(--reveal-delay, 0ms),
    transform 0.85s cubic-bezier(0.16, 1, 0.3, 1) var(--reveal-delay, 0ms);
}

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

/* --- fade-scale --------------------------------------------------------- */
[data-reveal="fade-scale"] {
  transform: scale(0.94);
  transition:
    opacity   0.7s cubic-bezier(0.34, 1.56, 0.64, 1) var(--reveal-delay, 0ms),
    transform 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) var(--reveal-delay, 0ms);
}

[data-reveal="fade-scale"].is-revealed {
  opacity: 1;
  transform: scale(1);
}

/* --- slide-in (from the left — works for RTL section headers) ----------- */
[data-reveal="slide-in"] {
  transform: translateX(-40px);
  transition:
    opacity   0.75s cubic-bezier(0.16, 1, 0.3, 1) var(--reveal-delay, 0ms),
    transform 0.75s cubic-bezier(0.16, 1, 0.3, 1) var(--reveal-delay, 0ms);
}

[data-reveal="slide-in"].is-revealed {
  opacity: 1;
  transform: translateX(0);
}

/* --- fade-right (from the right) --------------------------------------- */
[data-reveal="fade-right"] {
  transform: translateX(40px);
  transition:
    opacity   0.75s cubic-bezier(0.16, 1, 0.3, 1) var(--reveal-delay, 0ms),
    transform 0.75s cubic-bezier(0.16, 1, 0.3, 1) var(--reveal-delay, 0ms);
}

[data-reveal="fade-right"].is-revealed {
  opacity: 1;
  transform: translateX(0);
}


/* --------------------------------------------------------------------------
   3. STAGGER CHILDREN SYSTEM
   Wrap a list of cards/icons/etc. with .stagger-children.
   JS adds .is-revealed to the wrapper; children animate sequentially.
   Up to 8 children are staggered (80 ms apart).
   -------------------------------------------------------------------------- */

.stagger-children > * {
  opacity: 0;
  transform: translateY(32px);
  transition:
    opacity   0.7s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
  /* Safety fallback: if JS never runs / IntersectionObserver never fires,
     force children visible after 1.5s so content is never permanently hidden */
  animation: stagger-fallback 0s linear 1.5s forwards;
}
@keyframes stagger-fallback {
  to { opacity: 1; transform: none; }
}

/* when the container is revealed, unlock each child */
.stagger-children.is-revealed > * {
  opacity: 1;
  transform: translateY(0);
}

/* individual stagger offsets — nth-child(1) = 0 ms baseline */
.stagger-children.is-revealed > *:nth-child(1)  { transition-delay:   0ms; }
.stagger-children.is-revealed > *:nth-child(2)  { transition-delay:  80ms; }
.stagger-children.is-revealed > *:nth-child(3)  { transition-delay: 160ms; }
.stagger-children.is-revealed > *:nth-child(4)  { transition-delay: 240ms; }
.stagger-children.is-revealed > *:nth-child(5)  { transition-delay: 320ms; }
.stagger-children.is-revealed > *:nth-child(6)  { transition-delay: 400ms; }
.stagger-children.is-revealed > *:nth-child(7)  { transition-delay: 480ms; }
.stagger-children.is-revealed > *:nth-child(8)  { transition-delay: 560ms; }

/* ── Bento-item override ─────────────────────────────────────
   .bento-item has its own `transform: perspective(1000px) rotateX rotateY`
   for 3D tilt. The generic .stagger-children > * rule would overwrite it
   with translateY(). Here we preserve the perspective + tilt while still
   animating opacity + a subtle lift on reveal.
   Specificity 0,2,0 beats .stagger-children > * (0,1,0). */
.stagger-children > .bento-item {
  opacity: 0;
  transform: perspective(1000px) translateY(32px);
}
.stagger-children.is-revealed > .bento-item {
  opacity: 1;
  transform: perspective(1000px)
             rotateX(var(--rx, 0deg))
             rotateY(var(--ry, 0deg));
}


/* --------------------------------------------------------------------------
   4. AMBIENT BLOB CSS
   Fixed full-screen decorative blobs.  JS can set inline transform for
   parallax (the transition below smooths JS-driven position updates).
   -------------------------------------------------------------------------- */

.ambient-blob {
  position: fixed;
  pointer-events: none;
  z-index: -2;
  border-radius: 50%;
  filter: blur(100px);
  opacity: 0.12;
  animation: blobFloat 20s ease-in-out infinite;
  /* smooths parallax nudges applied by JS */
  transition: transform 0.5s ease-out;
}

/* gold blob — top-right corner */
.blob-gold {
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(232, 160, 32, 0.8), transparent 70%);
  top: -100px;
  right: -100px;
  animation-delay: 0s;
}

/* purple blob — bottom-left corner */
.blob-purple {
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(139, 92, 246, 0.7), transparent 70%);
  bottom: -50px;
  left: -50px;
  animation-delay: -10s; /* offset so blobs are out of phase */
}

/* keyframes: gentle drift + subtle scale breathing */
@keyframes blobFloat {
  0%,  100% { transform: translate(0,     0)    scale(1);    }
  33%        { transform: translate(30px, -20px) scale(1.05); }
  66%        { transform: translate(-20px, 15px) scale(0.97); }
}


/* --------------------------------------------------------------------------
   5. AMBIENT PARTICLE CANVAS
   The <canvas id="ambient-particles"> is drawn by a JS particle system.
   CSS keeps it fixed, behind all content, and slightly transparent.
   -------------------------------------------------------------------------- */

#ambient-particles {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  opacity: 0.6;
}


/* --------------------------------------------------------------------------
   6. BUTTON PRESS MICRO-INTERACTION
   Gives primary/secondary buttons a tactile "press" feel on :active.
   -------------------------------------------------------------------------- */

.btn-primary,
.btn-secondary {
  transform-origin: center;
}

/* slight scale + downward nudge on press */
.btn-primary:active  { transform: scale(0.97) translateY(1px) !important; }
.btn-secondary:active { transform: scale(0.97) translateY(1px) !important; }


/* --------------------------------------------------------------------------
   7. COUNTER ANIMATION
   Applied to elements whose text content is incremented by JS.
   tabular-nums prevents layout shift as digits change.
   -------------------------------------------------------------------------- */

.count-up {
  font-variant-numeric: tabular-nums;
}


/* --------------------------------------------------------------------------
   8. MOBILE OVERRIDES  (≤ 768 px)
   Reduce motion distance and blob intensity on smaller screens.
   Also disable CSS 3D tilt on bento cards (touch devices have no hover).
   -------------------------------------------------------------------------- */

@media (max-width: 768px) {

  /* shorter travel distance for fade-up on mobile */
  [data-reveal="fade-up"] {
    transform: translateY(24px);
  }

  /* dimmer, softer blobs on small screens */
  .ambient-blob {
    opacity: 0.06;
    filter: blur(60px);
  }

  /* kill 3D tilt on bento grid items — JS tilt won't fire on touch anyway,
     but guard against any residual inline transform / box-shadow */
  .bento-item:not(:hover) {
    transform: none !important;
    box-shadow: none;
  }
}


/* --------------------------------------------------------------------------
   9. REDUCED MOTION — accessibility override
   Honour the OS "reduce motion" preference by stripping all animations and
   making every reveal element immediately visible.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {

  /* instant reveal — no transitions, no transforms */
  [data-reveal],
  [data-reveal].is-revealed {
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }

  /* stagger children — also instantly visible */
  .stagger-children > *,
  .stagger-children.is-revealed > * {
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
    transition-delay: 0ms !important;
  }

  /* stop blob animation */
  .ambient-blob {
    animation: none !important;
  }
}

/* --------------------------------------------------------------------------
   10. SCROLL-BEHAVIOR REDUCED-MOTION GUARD (a11y H-30)
   The smooth scroll declared at the top of the file must yield to the user's
   OS preference. Without this, programmatic scrollIntoView / anchor jumps
   continue to animate even when "reduce motion" is enabled.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}