/* ============================================================================
   Motion — reveal states, Qandeel idle animations, ambient effects,
   and the reduced-motion contract.
   ========================================================================== */

/* Reveal: hidden only when JS is active; GSAP animates them in.
   If GSAP fails to load, main.js adds .reveal-all to show everything. */
.js [data-reveal] { opacity: 0; will-change: transform, opacity; }
.reveal-all [data-reveal] { opacity: 1 !important; transform: none !important; }

/* smooth the hero light layers fading out */
.rays, .hero__lines { transition: opacity 1.1s var(--ease); }

/* --------------------------- Qandeel idle motion -------------------------- */
@media (prefers-reduced-motion: no-preference) {
  .qandeel[data-anim="bob"]    img { animation: q-bob 4.2s var(--ease) infinite; }
  .qandeel[data-anim="bounce"] img { animation: q-bounce 2.8s var(--ease) infinite; }
  .qandeel[data-anim="sway"]   img { animation: q-sway 5s var(--ease) infinite; }
}
@keyframes q-bob    { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
@keyframes q-bounce { 0%,100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-14px) scale(1.025); } }
@keyframes q-sway   { 0%,100% { transform: rotate(-2deg); } 50% { transform: rotate(2.5deg); } }

/* ---------------------------- Ambient effects ---------------------------- */
/* sparkles / stars / sun: faint gold points around the companion */
.qandeel[data-effect="sparkles"]::before,
.qandeel[data-effect="stars"]::before,
.qandeel[data-effect="sun"]::before {
  content: ""; position: absolute; inset: -26%; z-index: 0; pointer-events: none;
  background:
    radial-gradient(2px 2px at 18% 28%, var(--c-gold), transparent),
    radial-gradient(2px 2px at 78% 22%, var(--c-gold), transparent),
    radial-gradient(1.5px 1.5px at 62% 68%, var(--c-gold-deep), transparent),
    radial-gradient(1.5px 1.5px at 30% 74%, var(--c-gold-deep), transparent);
  opacity: 0.75;
}
@media (prefers-reduced-motion: no-preference) {
  .qandeel[data-effect="sparkles"]::before,
  .qandeel[data-effect="stars"]::before,
  .qandeel[data-effect="sun"]::before { animation: q-twinkle 3.4s ease-in-out infinite; }
}
@keyframes q-twinkle { 0%,100% { opacity: 0.35; } 50% { opacity: 0.85; } }

/* sun: an extra warm halo */
.qandeel[data-effect="sun"] { --_sun: 1; }
.qandeel[data-effect="sun"] .qandeel__glow { background: radial-gradient(closest-side, color-mix(in srgb, var(--c-gold) 72%, transparent), transparent 74%); }

/* cloud: a faint desaturating veil for the worried/dim states */
.qandeel[data-effect="cloud"] img { filter: drop-shadow(0 12px 20px rgba(16,25,21,0.28)) saturate(0.8) brightness(0.96); }

/* --------------------------- Reduced motion ------------------------------ */
@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
  .qandeel img { animation: none !important; }
  .rays, .scroll-cue span { animation: none !important; }
  .qandeel[data-effect="sparkles"]::before,
  .qandeel[data-effect="stars"]::before,
  .qandeel[data-effect="sun"]::before { animation: none !important; }
  .hero, .hero::before, .rays, .hero__lines,
  .hero__title, .hero__sub, .hero__whisper, .hero .eyebrow { transition: none !important; }
}