/* ============================================================
   SILVIA / SKYLINE — SHARED MOTION LAYER
   Scroll-driven dynamics. Loads alongside page CSS.
   Everything degrades gracefully under prefers-reduced-motion.
   ============================================================ */

/* ---- Scroll progress bar (top of viewport) ---- */
.scroll-progress {
  position: fixed; top: 0; left: 0; height: 3px; width: 100%;
  transform: scaleX(0); transform-origin: 0 50%;
  background: var(--grad-accent, var(--accent));
  z-index: 200; pointer-events: none;
  will-change: transform;
}

/* ---- Reveal variants (richer set; driven by js/motion.js) ---- */
[data-rv] {
  opacity: 0;
  transition:
    opacity 0.8s var(--ease-out),
    transform 0.9s var(--ease-spring, cubic-bezier(0.25,1.05,0.4,1)),
    filter 0.8s var(--ease-out);
  transition-delay: var(--rd, 0ms);
  will-change: opacity, transform;
}
[data-rv="up"]      { transform: translateY(34px); }
[data-rv="down"]    { transform: translateY(-34px); }
[data-rv="left"]    { transform: translateX(-44px); }
[data-rv="right"]   { transform: translateX(44px); }
[data-rv="scale"]   { transform: translateY(24px) scale(0.92); }
[data-rv="rot"]     { transform: translateY(34px) rotate(-1.6deg); }
[data-rv="blur"]    { transform: translateY(24px); filter: blur(10px); }
[data-rv="clip"]    { transform: translateY(40px); clip-path: inset(0 0 100% 0); }
[data-rv].in {
  opacity: 1;
  transform: none;
  filter: none;
  clip-path: inset(0 0 0 0);
}

/* ---- Scroll-linked parallax targets (transform set inline by JS) ---- */
[data-parallax] { will-change: transform; }

/* ---- Reveal-aware children stagger helper ---- */
[data-stagger] > * {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.7s var(--ease-out), transform 0.8s var(--ease-spring, cubic-bezier(0.25,1.05,0.4,1));
}
[data-stagger].in > * { opacity: 1; transform: none; }

/* ---- Count-up numbers shouldn't reflow ---- */
[data-countup] { font-variant-numeric: tabular-nums; }

/* ---- Card "lift + tilt" life on hover (pointer devices only) ---- */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .tilt { transition: transform 0.25s var(--ease-out), box-shadow 0.25s var(--ease-out); transform-style: preserve-3d; }
}

/* ---- Magnetic glow that follows the cursor on feature surfaces ---- */
.spotlight { position: relative; overflow: hidden; }
.spotlight::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%),
              color-mix(in srgb, var(--accent) 16%, transparent), transparent 60%);
  transition: opacity 0.3s var(--ease-out); z-index: 0;
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .spotlight:hover::before { opacity: 1; }
}
.spotlight > * { position: relative; z-index: 1; }

/* ---- Section reveal: a soft rising underline accent ---- */
.section-head h2 { position: relative; }

/* ---- Marquee-free, gentle infinite drift for decorative chips ---- */
@media (prefers-reduced-motion: no-preference) {
  .drift { animation: driftY 9s ease-in-out infinite; }
  .drift-2 { animation: driftY 11s ease-in-out infinite; animation-delay: -3s; }
}
@keyframes driftY { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }

/* ---- Respect reduced motion globally ---- */
@media (prefers-reduced-motion: reduce) {
  [data-rv], [data-stagger] > * { opacity: 1 !important; transform: none !important; filter: none !important; clip-path: none !important; }
  .scroll-progress { display: none; }
  .drift, .drift-2 { animation: none !important; }
}