/* =========================================================
   ROR Studios — Animations v4 (Elite Edition)
   Intentional, performant, reduced-motion-aware
   ========================================================= */

/* --------------------------------------------------
   Hero sequence — data-hero elements
-------------------------------------------------- */
[data-hero] {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity var(--dur-hero) var(--ease-out),
    transform var(--dur-hero) var(--ease-out);
}

[data-hero].is-visible {
  opacity: 1;
  transform: none;
}

/* Clip variant — for headline word reveals */
[data-hero="clip"] {
  clip-path: inset(0 0 110% 0);
  transform: none;
  transition:
    clip-path calc(var(--dur-hero) * 1.1) var(--ease-out),
    opacity   calc(var(--dur-hero) * 0.6) var(--ease-out);
}

[data-hero="clip"].is-visible {
  clip-path: inset(0 0 0% 0);
  opacity: 1;
}

[data-hero="fade"] { transform: none; }

/* --------------------------------------------------
   Scroll reveals — [data-reveal]
-------------------------------------------------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity  0.65s var(--ease-out),
    transform 0.65s var(--ease-out);
}

[data-reveal].is-in {
  opacity: 1;
  transform: none;
}

[data-reveal="fade"]  { transform: none; }
[data-reveal="up-sm"] { transform: translateY(12px); }

[data-reveal="left"] {
  transform: translateX(-20px);
}
[data-reveal="left"].is-in { transform: none; }

[data-reveal="scale"] {
  transform: scale(0.96);
}
[data-reveal="scale"].is-in { transform: none; }

/* Stagger containers */
[data-stagger] > * {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity  0.5s var(--ease-out),
    transform 0.5s var(--ease-out);
}

[data-stagger].is-in > *:nth-child(1)  { transition-delay: 0s; }
[data-stagger].is-in > *:nth-child(2)  { transition-delay: 0.07s; }
[data-stagger].is-in > *:nth-child(3)  { transition-delay: 0.14s; }
[data-stagger].is-in > *:nth-child(4)  { transition-delay: 0.21s; }
[data-stagger].is-in > *:nth-child(5)  { transition-delay: 0.28s; }
[data-stagger].is-in > *:nth-child(6)  { transition-delay: 0.35s; }
[data-stagger].is-in > *:nth-child(7)  { transition-delay: 0.42s; }
[data-stagger].is-in > *:nth-child(8)  { transition-delay: 0.49s; }

[data-stagger].is-in > * {
  opacity: 1;
  transform: none;
}

/* --------------------------------------------------
   Page entrance
-------------------------------------------------- */
.page-enter {
  animation: pageEnter 0.5s var(--ease-out) both;
}

@keyframes pageEnter {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

/* --------------------------------------------------
   Marquee / Ticker
-------------------------------------------------- */
.marquee-track {
  display: flex;
  gap: 0;
  will-change: transform;
  animation: marqueeScroll 28s linear infinite;
  width: max-content;
}

.marquee-wrap:hover .marquee-track {
  animation-play-state: paused;
}

@keyframes marqueeScroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* --------------------------------------------------
   Aurora Blob — Hero background
-------------------------------------------------- */
.aurora-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  pointer-events: none;
  will-change: transform, opacity;
}

.aurora-blob--1 {
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(0, 240, 255, 0.07) 0%, transparent 65%);
  top: -10%;
  right: -5%;
  animation: auroraDrift1 12s ease-in-out infinite alternate;
}

.aurora-blob--2 {
  width: 350px;
  height: 350px;
  background: radial-gradient(circle, rgba(0, 120, 255, 0.05) 0%, transparent 70%);
  bottom: 5%;
  right: 15%;
  animation: auroraDrift2 16s ease-in-out infinite alternate;
}

.aurora-blob--3 {
  width: 280px;
  height: 280px;
  background: radial-gradient(circle, rgba(0, 240, 255, 0.04) 0%, transparent 70%);
  top: 40%;
  left: -5%;
  animation: auroraDrift3 20s ease-in-out infinite alternate;
}

@keyframes auroraDrift1 {
  from { transform: translate(0, 0) scale(1); }
  to   { transform: translate(-30px, 20px) scale(1.08); }
}

@keyframes auroraDrift2 {
  from { transform: translate(0, 0) scale(1); }
  to   { transform: translate(20px, -30px) scale(0.94); }
}

@keyframes auroraDrift3 {
  from { transform: translate(0, 0) scale(1); }
  to   { transform: translate(25px, 15px) scale(1.06); }
}

/* --------------------------------------------------
   Typewriter cursor
-------------------------------------------------- */
.typewriter-cursor {
  display: inline-block;
  width: 3px;
  height: 0.85em;
  background: var(--accent);
  margin-left: 4px;
  vertical-align: text-bottom;
  border-radius: 1px;
  animation: cursorBlink 1.1s step-end infinite;
}

@keyframes cursorBlink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}

/* --------------------------------------------------
   Floating particles
-------------------------------------------------- */
.particle-field {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

.particle {
  position: absolute;
  width: 2px;
  height: 2px;
  background: var(--accent);
  border-radius: 50%;
  opacity: 0;
  animation: particleFloat var(--dur, 8s) ease-in-out var(--delay, 0s) infinite;
}

@keyframes particleFloat {
  0%   { opacity: 0; transform: translateY(0) translateX(0); }
  15%  { opacity: var(--opacity, 0.4); }
  85%  { opacity: var(--opacity, 0.4); }
  100% { opacity: 0; transform: translateY(-60px) translateX(var(--drift, 10px)); }
}

/* --------------------------------------------------
   Number count-up animation target
-------------------------------------------------- */
.count-up { display: inline-block; }

/* --------------------------------------------------
   SVG stroke draw
-------------------------------------------------- */
.svg-draw path,
.svg-draw line,
.svg-draw circle {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  transition: stroke-dashoffset 2.4s var(--ease-out);
}

.svg-draw.is-drawn path,
.svg-draw.is-drawn line,
.svg-draw.is-drawn circle {
  stroke-dashoffset: 0;
}

/* --------------------------------------------------
   Glow underline — on hover
-------------------------------------------------- */
.glow-link {
  position: relative;
  display: inline-block;
}

.glow-link::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 1px;
  background: var(--accent);
  box-shadow: 0 0 8px var(--accent);
  transition: width var(--dur-base) var(--ease-out);
}

.glow-link:hover::after { width: 100%; }

/* --------------------------------------------------
   Scroll cue
-------------------------------------------------- */
.scroll-cue__line {
  width: 1px;
  height: 48px;
  background: var(--border-subtle);
  position: relative;
  overflow: hidden;
}

.scroll-cue__line::after {
  content: '';
  position: absolute;
  top: -100%;
  left: 0;
  width: 100%;
  height: 50%;
  background: var(--accent);
  animation: scrollLine 2s var(--ease-in-out) infinite;
}

@keyframes scrollLine {
  0%   { top: -50%; }
  100% { top: 150%; }
}

.scroll-cue {
  position: absolute;
  bottom: var(--s10);
  left: var(--gutter);
  display: flex;
  flex-direction: column;
  gap: var(--s3);
  z-index: 5;
  opacity: 1;
  transition: opacity var(--dur-base);
}

.scroll-cue.is-gone { opacity: 0; }

.scroll-cue__label {
  font-family: var(--font-mono);
  font-size: var(--t-10);
  color: var(--txt-tertiary);
  text-transform: uppercase;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}

/* --------------------------------------------------
   Nuvmote connection pulse dot
-------------------------------------------------- */
.nv-pulse { animation: nvPulse 2s ease-in-out infinite; }

@keyframes nvPulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.35; }
}

/* --------------------------------------------------
   Hero grid line draw
-------------------------------------------------- */
.hero-line-anim {
  animation: heroDraw 1.8s var(--ease-out) 0.4s forwards;
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
}

@keyframes heroDraw {
  to { stroke-dashoffset: 0; }
}

/* --------------------------------------------------
   Reduced motion — strip everything
-------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  [data-hero],
  [data-hero="clip"],
  [data-hero="fade"],
  [data-reveal],
  [data-reveal="fade"],
  [data-reveal="up-sm"],
  [data-reveal="left"],
  [data-reveal="scale"],
  [data-stagger] > * {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
    transition: none !important;
    animation: none !important;
  }

  .page-enter     { animation: none; }
  .marquee-track  { animation: none; }
  .aurora-blob    { animation: none; }
  .particle       { animation: none; }
  .typewriter-cursor { animation: none; }
  .scroll-cue__line::after { animation: none; }
  .nv-pulse       { animation: none; }
  .hero-line-anim { animation: none; stroke-dashoffset: 0; }
}