/* ─── Umbra Motion CSS · v2 ─── */

/* Reveal primitives */
[data-reveal] {
  opacity: 0;
  transform: translate3d(0, 18px, 0);
  transition: opacity 820ms cubic-bezier(.2,.7,.2,1), transform 820ms cubic-bezier(.2,.7,.2,1);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}
[data-reveal="fade"]       { transform: none; }
[data-reveal="left"]       { transform: translate3d(-24px, 0, 0); }
[data-reveal="right"]      { transform: translate3d(24px, 0, 0); }
[data-reveal="up"]         { transform: translate3d(0, 32px, 0); }
[data-reveal="scale"]      { transform: scale(.96); transform-origin: center; }
[data-reveal].is-revealed  { opacity: 1; transform: none; }

/* Stagger helpers */
.stagger > * { opacity: 0; transform: translate3d(0, 14px, 0); transition: opacity 700ms cubic-bezier(.2,.7,.2,1), transform 700ms cubic-bezier(.2,.7,.2,1); }
.stagger.is-revealed > *      { opacity: 1; transform: none; }
.stagger.is-revealed > *:nth-child(1) { transition-delay: 0ms; }
.stagger.is-revealed > *:nth-child(2) { transition-delay: 60ms; }
.stagger.is-revealed > *:nth-child(3) { transition-delay: 120ms; }
.stagger.is-revealed > *:nth-child(4) { transition-delay: 180ms; }
.stagger.is-revealed > *:nth-child(5) { transition-delay: 240ms; }
.stagger.is-revealed > *:nth-child(6) { transition-delay: 300ms; }
.stagger.is-revealed > *:nth-child(7) { transition-delay: 360ms; }
.stagger.is-revealed > *:nth-child(8) { transition-delay: 420ms; }

/* Scroll-driven eclipse container */
[data-scroll-eclipse] {
  --eclipse-progress: 0;
  --moon-x: 0%;
  --totality: 0;
  position: relative;
}
.eclipse-svg .moon { transform: translateX(var(--moon-x)); transition: none; }
.eclipse-svg .corona { opacity: calc(0.2 + var(--totality) * 0.8); }
.eclipse-svg .bloom { opacity: calc(var(--totality) * 0.18); }

/* Signal pulse — animated breathing dot */
[data-signal-pulse], .signal-pulse {
  position: relative;
  display: inline-block;
  width: 8px; height: 8px;
  background: var(--signal, #4D9EFF);
  border-radius: 50%;
  box-shadow: 0 0 6px var(--signal, #4D9EFF);
}
[data-signal-pulse]::after, .signal-pulse::after {
  content: "";
  position: absolute; inset: -4px;
  border-radius: 50%;
  border: 1px solid var(--signal, #4D9EFF);
  opacity: 0.6;
  animation: umbra-pulse 2.2s cubic-bezier(.2,.7,.2,1) infinite;
}
@keyframes umbra-pulse {
  0%   { transform: scale(.6); opacity: .8; }
  70%  { transform: scale(2.6); opacity: 0; }
  100% { transform: scale(2.6); opacity: 0; }
}

/* Drift — slow diagonal float */
.drift { animation: umbra-drift 14s ease-in-out infinite alternate; }
@keyframes umbra-drift {
  from { transform: translate3d(-6px, -4px, 0); }
  to   { transform: translate3d(6px, 6px, 0); }
}

/* Shimmer — text sweep for hero lines */
.shimmer {
  background: linear-gradient(110deg, var(--corona, #F2F6FF) 30%, var(--signal, #4D9EFF) 50%, var(--corona, #F2F6FF) 70%);
  background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  animation: umbra-shimmer 6s linear infinite;
}
@keyframes umbra-shimmer {
  from { background-position: 200% 0; }
  to   { background-position: -200% 0; }
}

/* Marquee band (bottom ticker) */
.marquee {
  display: flex; gap: 48px;
  animation: umbra-marquee 44s linear infinite;
  will-change: transform;
  white-space: nowrap;
  width: max-content;
}
.marquee-wrap:hover .marquee { animation-play-state: paused; }
@keyframes umbra-marquee {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

/* Scanline background for specific cells */
.scanlines {
  background-image: repeating-linear-gradient(
    to bottom,
    rgba(168,184,216,0.03) 0px,
    rgba(168,184,216,0.03) 1px,
    transparent 1px,
    transparent 3px
  );
}

/* Link underline sweep */
a.sweep { position: relative; text-decoration: none; }
a.sweep::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px;
  height: 1px; background: currentColor;
  transform: scaleX(0); transform-origin: left;
  transition: transform .5s cubic-bezier(.2,.7,.2,1);
}
a.sweep:hover::after { transform: scaleX(1); }

/* Cursor crosshair */
.umbra-cursor {
  position: fixed; top: 0; left: 0; z-index: 9999; pointer-events: none;
  width: 28px; height: 28px;
  mix-blend-mode: difference;
}
.umbra-cursor .uc-ring {
  position: absolute; inset: 0;
  border: 1px solid rgba(242,246,255,0.55);
  border-radius: 50%;
  transition: transform .2s, border-color .2s, opacity .2s;
}
.umbra-cursor .uc-dot {
  position: absolute; top: 50%; left: 50%;
  width: 3px; height: 3px;
  background: #F2F6FF;
  border-radius: 50%;
  transform: translate(-50%, -50%);
}
.umbra-cursor.is-hover .uc-ring { transform: scale(1.7); border-color: #4D9EFF; }
@media (hover: none) { .umbra-cursor { display: none; } }

@media (prefers-reduced-motion: reduce) {
  .shimmer { animation: none; background: none; color: var(--corona, #F2F6FF); -webkit-text-fill-color: currentColor; }
  .marquee { animation: none; }
  .drift { animation: none; }
  [data-signal-pulse]::after, .signal-pulse::after { animation: none; opacity: 0; }
}
