/* Homepage hero motion — layers injected by hero-motion.js into .raha-hero-wrap:
   .raha-motion (photo, halo, photo-space constellations, stars) sits BEHIND the
   existing .raha-hero-fade; .raha-motion-overlay (screen-space constellations
   for narrow screens) sits between the fade and the text. Every moving layer is
   clipped by .raha-hero-wrap's overflow:hidden — an animated transform that can
   poke outside its box is exactly what made iOS Safari scroll sideways before. */
.raha-hero-wrap.raha-motion-on { overflow: hidden; isolation: isolate; }

.raha-motion { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.raha-motion-stage { position: absolute; transition: transform 1.2s cubic-bezier(.2,.7,.2,1); }
.raha-motion-inner { position: absolute; inset: 0; transform-origin: 31% 40%; animation: raha-kenburns 28s ease-in-out infinite alternate; }
.raha-motion-inner img { position: absolute; inset: 0; width: 100% !important; height: 100% !important; max-width: none !important; display: block; }
.raha-motion-inner svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.raha-motion-halo { position: absolute; inset: 0; mix-blend-mode: screen;
  background: radial-gradient(circle at 30.9% 31%, rgba(255,214,140,0.42) 0%, rgba(255,200,120,0.15) 9%, rgba(255,200,120,0.001) 19%);
  animation: raha-halo 7s ease-in-out infinite; }
.raha-motion-stars { position: absolute; inset: 0; width: 100%; height: 100%; }
.raha-motion-overlay { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; overflow: visible; }

@keyframes raha-kenburns { from { transform: scale(1); } to { transform: scale(1.06) translate(-0.6%, -0.4%); } }
@keyframes raha-halo { 0%, 100% { opacity: 0.35; } 50% { opacity: 0.9; } }

.raha-motion .rm-orbit { fill: none; stroke: #E2B865; stroke-width: 1.2; opacity: 0.45; stroke-dasharray: 3 9; transform-box: fill-box; transform-origin: center; animation: raha-spin 90s linear infinite; }
.raha-motion .rm-orbit-2 { opacity: 0.25; stroke-dasharray: 1 14; animation-duration: 140s; animation-direction: reverse; }
.raha-motion-narrow .rm-orbit { opacity: 0.75; stroke-width: 1.7; }
.raha-motion-narrow .rm-orbit-2 { opacity: 0.45; }
@keyframes raha-spin { to { transform: rotate(360deg); } }
.rm-comet { fill: #FFE3A3; }

.rm-edge { fill: none; stroke: #E2B865; stroke-width: 1.1; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; opacity: 0;
  animation: raha-draw 16s ease-in-out infinite; animation-delay: var(--d, 0s); }
@keyframes raha-draw {
  0% { stroke-dashoffset: 1; opacity: 0; }
  6% { opacity: 0.75; }
  22% { stroke-dashoffset: 0; opacity: 0.75; }
  70% { stroke-dashoffset: 0; opacity: 0.55; }
  85%, 100% { stroke-dashoffset: 0; opacity: 0; }
}
.rm-node { fill: #FFE3A3; opacity: 0; animation: raha-node 16s ease-in-out infinite; animation-delay: var(--d, 0s); }
@keyframes raha-node {
  0%, 4% { opacity: 0; }
  10% { opacity: 1; }
  30% { opacity: 0.55; } 40% { opacity: 1; } 50% { opacity: 0.55; } 60% { opacity: 1; }
  80%, 100% { opacity: 0; }
}
.rm-label { fill: #E8C987; font-family: 'Vazirmatn', Tahoma, sans-serif; opacity: 0; animation: raha-label 16s ease-in-out infinite; animation-delay: var(--d, 0s); }
@keyframes raha-label { 0%, 8% { opacity: 0; } 20%, 65% { opacity: 0.6; } 82%, 100% { opacity: 0; } }

.raha-motion-paused .raha-motion *, .raha-motion-paused .raha-motion-overlay * { animation-play-state: paused !important; }

/* Narrow screens: the photo is cropped down to the face, so the motion adds its
   own constellations in a band under the buttons — give the text some room. */
@media (max-width: 767px) {
  .raha-hero-wrap.raha-motion-on .raha-hero-corner { padding-bottom: 130px !important; }
}

@media (prefers-reduced-motion: reduce) {
  .raha-motion-inner, .raha-motion-halo, .raha-motion .rm-orbit { animation: none; }
  .rm-edge { animation: none; stroke-dashoffset: 0; opacity: 0.55; }
  .rm-node { animation: none; opacity: 0.8; }
  .rm-label { animation: none; opacity: 0.55; }
}