/* ============================================================
   Mahmoud Alyosify — Motion
   Every rule here degrades to "visible and still" when the
   visitor asks for reduced motion or when JS never arrives.
   ============================================================ */

/* ── Reveal ───────────────────────────────────────────────
   Hidden only once JS has confirmed it can animate. Without
   JS the .motion-ready class is never added and everything
   renders normally.                                          */
.motion-ready [data-reveal] {
  opacity: 0;
  transform: translateY(28px);
}
.motion-ready [data-reveal].is-in {
  opacity: 1;
  transform: none;
  transition: opacity 0.75s var(--ease-out), transform 0.75s var(--ease-out);
}

/* Stagger children of a revealed group */
.motion-ready [data-reveal].is-in { transition-delay: var(--d, 0ms); }

/* ── Hero split lines ─────────────────────────────────────── */
.motion-ready .hero__line { overflow: hidden; }
/* Word wrapper: characters animate individually, but the word is one
   unbreakable unit so nothing splits mid-word on a narrow screen. */
.hero__line .wd { display: inline-block; white-space: nowrap; }
.motion-ready .hero__line .ch {
  display: inline-block;
  transform: translateY(105%) rotate(4deg);
  opacity: 0;
}
.motion-ready .hero__line .ch.is-in {
  transform: none;
  opacity: 1;
  transition: transform 0.9s var(--ease-out), opacity 0.6s var(--ease-out);
}

/* ── About: scrubbed word reveal ──────────────────────────── */
.motion-ready .about__lead .w { color: var(--ink-mute); opacity: 0.35; }
.motion-ready .about__lead .w.lit { color: var(--ink); opacity: 1; }

/* ── Project card tilt ────────────────────────────────────── */
.motion-ready [data-tilt] {
  transition: transform 0.4s var(--ease-out);
  transform-style: preserve-3d;
}
.motion-ready [data-tilt].is-tilting { transition: transform 0.08s linear; }

/* ── Magnetic buttons ─────────────────────────────────────── */
[data-magnetic] { transition: transform 0.35s var(--ease-out); }

/* ── Fat footer rise ──────────────────────────────────────── */
.motion-ready .fatfooter__img { transform: translateY(18%); }
.motion-ready .fatfooter__inner > * { opacity: 0; transform: translateY(24px); }
.motion-ready .fatfooter.is-in .fatfooter__inner > * {
  opacity: 1;
  transform: none;
  transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out);
}
.motion-ready .fatfooter.is-in .fatfooter__inner > *:nth-child(2) { transition-delay: 0.15s; }

/* ── Beams breathe ────────────────────────────────────────── */
@keyframes beam-breathe {
  0%, 100% { opacity: 0.45; filter: brightness(1.4) contrast(1.3) saturate(1.25); }
  50%      { opacity: 0.68; filter: brightness(1.7) contrast(1.45) saturate(1.45); }
}
.motion-ready .hero__layer--beams { animation: beam-breathe 7s var(--ease-soft) infinite; }

/* ── Rail progress cue ────────────────────────────────────── */
.rail__hint { position: relative; }
@keyframes rail-nudge {
  0%, 100% { transform: translateX(0); }
  50%      { transform: translateX(6px); }
}
html[dir='rtl'] .rail__hint::after { animation-direction: reverse; }
.motion-ready .rail__hint::after { animation: rail-nudge 2.4s var(--ease-soft) infinite; }

/* ── Chatbot FAB attention pulse (first visit only) ───────── */
.bot-fab__pulse {
  position: absolute;
  inset: -4px;
  border-radius: inherit;
  border: 1px solid var(--magenta);
  opacity: 0;
}
.motion-ready .bot-fab.is-idle .bot-fab__pulse {
  animation: fab-pulse 2.8s var(--ease-out) infinite;
}
@keyframes fab-pulse {
  0%   { opacity: 0.7; transform: scale(1); }
  70%  { opacity: 0;   transform: scale(1.35); }
  100% { opacity: 0;   transform: scale(1.35); }
}

/* ══════════════════════════════════════════════════════════
   REDUCED MOTION — everything above becomes still
   ══════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .motion-ready [data-reveal],
  .motion-ready .hero__line .ch,
  .motion-ready .fatfooter__inner > * {
    opacity: 1 !important;
    transform: none !important;
  }
  .motion-ready .about__lead .w { color: var(--ink); opacity: 1; }
  .motion-ready .fatfooter__img { transform: none; }
  .motion-ready .hero__layer--beams { animation: none; }
  .hero__particles { display: none; }
  .caret { animation: none; }
  .hero__scroll-line::after { animation: none; }
  .cursor { display: none !important; }
  body { cursor: auto !important; }

  .gal, .gal__panel { transition: none; }
  .gal__panel { transform: none; }
  .gal__img-wrap { opacity: 1; transition: none; }
  .cert-cat:hover:not(:disabled) { transform: none; }
  .cert-cat:hover:not(:disabled) .cert-cat__icon,
  .cert-cat:hover:not(:disabled) .cert-cat__go { transform: none; }
}

/* ══════════════════════════════════════════════════════════
   MOBILE — heavy effects off, content-first
   ══════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
  .motion-ready [data-tilt] { transform: none !important; }
  .motion-ready .hero__layer--beams { animation-duration: 10s; }
  .hero__particles { opacity: 0.5; }
}