/* ============================================================
   ShubhLuck CodeWorks — Animation Layer
   Splash, page transitions, reveal primitives, keyframes
   ============================================================ */

/* ---------- Splash screen ---------- */
.splash {
  position: fixed; inset: 0; z-index: 5000;
  background: var(--color-navy);
  display: grid; place-items: center;
  overflow: hidden;
  clip-path: inset(0 0 0 0);
}
.splash.is-done { display: none; }
html.no-js .splash { display: none; }
html.no-js body.splash-active { overflow: auto; }
.splash-inner { display: flex; flex-direction: column; align-items: center; gap: 26px; }
.splash-logo { width: clamp(84px, 14vw, 130px); opacity: 0; transform: scale(0.85); }
.splash-morph { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0.35; }
.splash-name {
  font-family: var(--font-display); font-weight: 700; color: #fff;
  font-size: clamp(1.2rem, 3.4vw, 1.9rem); letter-spacing: 0.02em;
  display: flex; gap: 1px; overflow: hidden;
}
.splash-name .char { display: inline-block; transform: translateY(110%); }
.splash-name .accent { color: var(--color-brand); }
.splash-tag {
  color: #7d92a5; font-size: var(--text-xs); letter-spacing: 0.3em;
  text-transform: uppercase; opacity: 0;
}
.splash-progress {
  width: min(240px, 50vw); height: 2px; background: rgba(255,255,255,0.12);
  border-radius: 2px; overflow: hidden;
}
.splash-progress span {
  display: block; height: 100%; width: 100%;
  background: var(--color-brand); transform: scaleX(0); transform-origin: left;
}

/* Body lock while splash is active */
body.splash-active { overflow: hidden; }

/* ---------- Page transition overlay ---------- */
.page-transition {
  position: fixed; inset: 0; z-index: 4500; pointer-events: none;
  visibility: hidden;
}
.page-transition .pt-panel {
  position: absolute; inset: 0;
  background: var(--color-navy);
  transform: scaleY(0); transform-origin: bottom;
}
.page-transition .pt-mark {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%) scale(0.8);
  width: 64px; opacity: 0;
}
.page-transition.is-active { visibility: visible; pointer-events: all; }

/* Page enter: content eases in after load */
.page-enter main { animation: pageEnter 0.8s var(--ease-out) both; }
@keyframes pageEnter {
  from { opacity: 0; transform: translateY(26px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ---------- Reveal primitives (initial states set by JS) ---------- */
[data-reveal] { will-change: transform, opacity; }
html.no-js [data-reveal],
html.reduced-motion [data-reveal] { opacity: 1 !important; transform: none !important; clip-path: none !important; }

/* Line-by-line heading reveal: JS wraps lines in .reveal-line > .reveal-line-inner */
.reveal-line { display: block; overflow: hidden; }
.reveal-line-inner { display: block; }

/* Masked image/media reveal */
.reveal-mask { position: relative; overflow: hidden; }
.reveal-mask .reveal-mask-cover {
  position: absolute; inset: 0; background: var(--color-brand);
  transform-origin: left; z-index: 2;
}

/* ---------- Keyframes ---------- */
@keyframes scrollHint {
  0% { transform: scaleY(0); transform-origin: top; }
  45% { transform: scaleY(1); transform-origin: top; }
  55% { transform: scaleY(1); transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}

@keyframes floatSoft {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-14px); }
}

@keyframes pulseDot {
  0%, 100% { opacity: 0.4; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.35); }
}

@keyframes dashFlow { to { stroke-dashoffset: -220; } }

/* B2B highlight band */
@keyframes b2bBorder {
  0% { background-position: 0% 50%; }
  100% { background-position: 300% 50%; }
}
@keyframes b2bPulse {
  0%, 100% { opacity: 0.5; transform: scale(1); }
  50% { opacity: 0.9; transform: scale(1.12); }
}

/* AI band */
@keyframes aiGlow {
  0%, 100% { opacity: 0.7; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.1); }
}
@keyframes spinSlow { to { transform: rotate(360deg); } }
@keyframes spinReverse { to { transform: rotate(-360deg); } }
.ai-visual .net-line { stroke-dasharray: 5 7; animation: dashFlow 5s linear infinite; }
.ai-visual .net-node { animation: pulseDot 2.6s var(--ease-inout) infinite; }
.ai-visual .net-node:nth-child(2n) { animation-delay: 0.7s; }
.ai-visual .net-node:nth-child(3n) { animation-delay: 1.3s; }
.ai-core-ring { transform-origin: 300px 200px; animation: spinSlow 16s linear infinite; }
.ai-core-ring--rev { transform-origin: 300px 200px; animation: spinReverse 22s linear infinite; }
.ai-core-pulse { transform-origin: 300px 200px; animation: aiGlow 3.2s var(--ease-inout) infinite; }

/* Hero visual details */
.hero-visual .net-line {
  stroke-dasharray: 6 8; animation: dashFlow 7s linear infinite;
}
.hero-visual .net-node { animation: pulseDot 3.2s var(--ease-inout) infinite; }
.hero-visual .net-node:nth-child(2n) { animation-delay: 0.9s; }
.hero-visual .net-node:nth-child(3n) { animation-delay: 1.7s; }
.hero-visual .float-card { animation: floatSoft 7s var(--ease-inout) infinite; }
.hero-visual .float-card--delay { animation-delay: 2.2s; }

/* ---------- Marquee (capability strip) ---------- */
@keyframes capScroll { to { transform: translateX(-50%); } }
.cap-track { animation: capScroll 36s linear infinite; }
.cap-strip:hover .cap-track { animation-play-state: paused; }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .cap-track { animation: none; }
  .splash { display: none !important; }
  body.splash-active { overflow: auto; }
}