/* ==========================================================================
   TechRoad — Motion system
   Reveal states are driven by IntersectionObserver adding `.in`.
   ========================================================================== */

/* ---------------------------------------------------------------- *
   Scroll reveal primitives
 * ---------------------------------------------------------------- */
[data-reveal] {
  --reveal-delay: 0ms;
  --reveal-dur: 900ms;
  opacity: 0;
  transition:
    opacity var(--reveal-dur) var(--ease-out) var(--reveal-delay),
    transform var(--reveal-dur) var(--ease-out) var(--reveal-delay),
    clip-path var(--reveal-dur) var(--ease-out) var(--reveal-delay),
    filter var(--reveal-dur) var(--ease-out) var(--reveal-delay);
  will-change: opacity, transform;
}

[data-reveal="up"]     { transform: translate3d(0, 40px, 0); }
[data-reveal="down"]   { transform: translate3d(0, -32px, 0); }
[data-reveal="start"]  { transform: translate3d(-42px, 0, 0); }
[data-reveal="end"]    { transform: translate3d(42px, 0, 0); }
[data-reveal="scale"]  { transform: scale(.93); }
[data-reveal="blur"]   { filter: blur(14px); transform: translate3d(0, 20px, 0); }
[data-reveal="clip"]   { clip-path: inset(0 0 100% 0); transform: translate3d(0, 24px, 0); }
[data-reveal="fade"]   { transform: none; }
[data-reveal="mask"]   { clip-path: inset(0 100% 0 0); }
[dir="rtl"] [data-reveal="start"] { transform: translate3d(42px, 0, 0); }
[dir="rtl"] [data-reveal="end"]   { transform: translate3d(-42px, 0, 0); }
[dir="rtl"] [data-reveal="mask"]  { clip-path: inset(0 0 0 100%); }

[data-reveal].in {
  opacity: 1;
  transform: none;
  filter: none;
  clip-path: inset(0 0 0 0);
}

/* Stagger helper: children animate in sequence */
[data-stagger] > * {
  opacity: 0;
  transform: translate3d(0, 34px, 0);
  transition: opacity .82s var(--ease-out), transform .82s var(--ease-out);
  transition-delay: calc(var(--stagger-step, 85ms) * var(--i, 0));
}
[data-stagger].in > * { opacity: 1; transform: none; }

/* ---------------------------------------------------------------- *
   Split text
 * ---------------------------------------------------------------- */
.split-line { display: block; overflow: hidden; }

.word { display: inline-block; white-space: nowrap; }

.word-mask {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  padding-block-end: .12em;
  margin-block-end: -.12em;
}
.word-mask .w {
  display: inline-block;
  transform: translate3d(0, 110%, 0) rotate(4deg);
  opacity: 0;
  transition:
    transform .95s var(--ease-out),
    opacity .7s var(--ease-out);
  transition-delay: calc(var(--i, 0) * 55ms + var(--reveal-delay, 0ms));
}
.in .word-mask .w,
.word-mask.in .w { transform: none; opacity: 1; }

.char {
  display: inline-block;
  opacity: 0;
  transform: translate3d(0, .55em, 0);
  transition: opacity .55s var(--ease-out), transform .75s var(--ease-out);
  transition-delay: calc(var(--i, 0) * 22ms + var(--reveal-delay, 0ms));
}
.in .char { opacity: 1; transform: none; }

/* ---------------------------------------------------------------- *
   Keyframes
 * ---------------------------------------------------------------- */
@keyframes marquee-x {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(calc(-100% - var(--marquee-gap, 2.5rem)), 0, 0); }
}

@keyframes drift-a {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  33%      { transform: translate3d(9vw, 6vh, 0) scale(1.12); }
  66%      { transform: translate3d(-4vw, 11vh, 0) scale(.94); }
}
@keyframes drift-b {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  40%      { transform: translate3d(-11vw, -7vh, 0) scale(1.16); }
  70%      { transform: translate3d(5vw, -3vh, 0) scale(.9); }
}
@keyframes drift-c {
  0%, 100% { transform: translate3d(-50%, -50%, 0) scale(1); }
  50%      { transform: translate3d(-62%, -38%, 0) scale(1.22); }
}

@keyframes pulse-dot {
  0%   { box-shadow: 0 0 0 0 rgba(0, 229, 160, .6); }
  70%  { box-shadow: 0 0 0 8px rgba(0, 229, 160, 0); }
  100% { box-shadow: 0 0 0 0 rgba(0, 229, 160, 0); }
}

@keyframes logo-breathe {
  0%, 100% { transform: scale(1); filter: drop-shadow(0 0 14px rgba(103, 209, 231, .35)); }
  50%      { transform: scale(1.06); filter: drop-shadow(0 0 30px rgba(0, 229, 160, .55)); }
}

@keyframes scroll-hint {
  0%      { transform: translateY(0); opacity: 0; }
  25%     { opacity: 1; }
  75%     { opacity: 1; }
  100%    { transform: translateY(14px); opacity: 0; }
}

@keyframes rotate-slow {
  to { transform: rotate(360deg); }
}

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

@keyframes shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

@keyframes gradient-pan {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}

@keyframes trace-line {
  from { stroke-dashoffset: var(--dash, 1000); }
  to   { stroke-dashoffset: 0; }
}

@keyframes node-ping {
  0%   { transform: scale(.6); opacity: .9; }
  70%  { transform: scale(2.6); opacity: 0; }
  100% { transform: scale(2.6); opacity: 0; }
}

@keyframes ticker-flip {
  0%, 45%   { transform: translateY(0); }
  55%, 100% { transform: translateY(-100%); }
}

/* ---------------------------------------------------------------- *
   Animated helpers
 * ---------------------------------------------------------------- */
.float { animation: float-y 6s var(--ease-inout) infinite; }
.spin-slow { animation: rotate-slow 32s linear infinite; }

.animate-gradient {
  background-size: 260% 260%;
  animation: gradient-pan 9s var(--ease-inout) infinite;
}

.shimmer {
  background: linear-gradient(90deg, var(--surface) 25%, var(--surface-3) 50%, var(--surface) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.6s linear infinite;
}

/* Scroll cue under the hero */
.scroll-cue {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: .8rem;
  color: var(--text-4);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .22em;
  text-transform: uppercase;
}
[dir="rtl"] .scroll-cue { font-family: var(--font-body); letter-spacing: 0; text-transform: none; font-size: var(--fs-xs); }
.scroll-cue__rail {
  position: relative;
  width: 1px;
  height: 54px;
  background: var(--line-2);
  overflow: hidden;
}
.scroll-cue__rail::after {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  width: 100%;
  height: 40%;
  background: var(--grad-brand);
  animation: scroll-hint 2.4s var(--ease-inout) infinite;
}

/* Magnetic elements get a JS-driven translate */
.magnetic { will-change: transform; }

/* Link underline sweep */
.link-sweep {
  position: relative;
  display: inline-block;
}
.link-sweep::after {
  content: "";
  position: absolute;
  inset-block-end: -2px;
  inset-inline-start: 0;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .45s var(--ease-out);
}
[dir="rtl"] .link-sweep::after { transform-origin: left; }
.link-sweep:hover::after { transform: scaleX(1); transform-origin: left; }
[dir="rtl"] .link-sweep:hover::after { transform-origin: right; }

/* Number counters render monospaced so they do not jitter while counting */
[data-count] { font-variant-numeric: tabular-nums; }

/* Page transition curtain */
.page-curtain {
  position: fixed;
  inset: 0;
  z-index: 9997;
  background: var(--grad-brand);
  transform: scaleY(0);
  transform-origin: bottom;
  pointer-events: none;
  transition: transform .6s var(--ease-inout);
}
.page-curtain.is-out { transform: scaleY(1); transform-origin: bottom; }

/*
 * Everything must still be visible when JavaScript is unavailable (`.no-js`)
 * or when the reveal system failed to start (`.reveal-off`, set by the safety
 * timeout in the document head).
 */
.no-js [data-reveal],
.no-js [data-stagger] > *,
.no-js .word-mask .w,
.no-js .char,
.reveal-off [data-reveal],
.reveal-off [data-stagger] > *,
.reveal-off .word-mask .w,
.reveal-off .char {
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
  clip-path: none !important;
}

/* The preloader must never be able to trap the page either. */
.reveal-off .preloader { opacity: 0; visibility: hidden; }

@media (prefers-reduced-motion: reduce) {
  [data-reveal],
  [data-stagger] > *,
  .word-mask .w,
  .char {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    clip-path: none !important;
    transition: none !important;
  }
  .marquee__track { animation: none !important; }
  .float, .spin-slow, .animate-gradient, .shimmer { animation: none !important; }
  .scroll-cue__rail::after { animation: none !important; }
}