/* ============================================================================
   IICONIX — Animations
   Keyframes and motion utilities not tied to a single component. All wrapped
   so prefers-reduced-motion neutralises them.
   ========================================================================== */

@keyframes floatY { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes drift { 0%,100% { transform: translate(0,0); } 50% { transform: translate(6px,-8px); } }
@keyframes shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }
@keyframes pulseRing { 0% { transform: scale(0.8); opacity: 0.7; } 100% { transform: scale(2.2); opacity: 0; } }
@keyframes gridPan { from { background-position: 0 0; } to { background-position: 60px 60px; } }
@keyframes dash { to { stroke-dashoffset: 0; } }

/* Ambient grid backdrop used on inner page heroes and research section. */
.bg-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--border) 1px, transparent 1px),
    linear-gradient(90deg, var(--border) 1px, transparent 1px);
  background-size: 60px 60px;
  -webkit-mask-image: radial-gradient(70% 60% at 50% 30%, #000, transparent 80%);
  mask-image: radial-gradient(70% 60% at 50% 30%, #000, transparent 80%);
  opacity: 0.5;
  pointer-events: none;
  z-index: 0;
}
@media (prefers-reduced-motion: no-preference) {
  .bg-grid { animation: gridPan 24s linear infinite; }
}

/* Floating decorative orb */
.orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  opacity: 0.5;
  pointer-events: none;
  z-index: 0;
}
.orb--azure { background: rgba(61,139,255,0.5); }
.orb--cyan  { background: rgba(52,227,227,0.4); }
.orb--violet { background: rgba(123,107,255,0.4); }
@media (prefers-reduced-motion: no-preference) {
  .orb { animation: drift 12s var(--ease) infinite; }
}

/* SVG line-draw util (research visual) */
.draw-line { stroke-dasharray: 1; stroke-dashoffset: 1; }
.draw-line.is-in { animation: dash 1.6s var(--ease) forwards; }

/* Shimmering placeholder for future project screenshots */
.shimmer {
  background: linear-gradient(100deg, var(--surface) 30%, var(--surface-3) 50%, var(--surface) 70%);
  background-size: 200% 100%;
}
@media (prefers-reduced-motion: no-preference) {
  .shimmer { animation: shimmer 2.4s linear infinite; }
}

/* Magnetic buttons get a will-change hint (JS drives the transform) */
.magnetic { will-change: transform; }

/* Char-reveal for hero headline (JS splits words) */
.word { display: inline-block; overflow: hidden; vertical-align: top; }
.word > span { display: inline-block; transform: translateY(110%); }
.is-revealed .word > span {
  transform: translateY(0);
  transition: transform 0.8s var(--ease);
}
@media (prefers-reduced-motion: reduce) {
  .word > span { transform: none; }
}