/* ==========================================================================
   ANIMATIONS
   ========================================================================== */

/* ---------- Scroll reveal (driven by IntersectionObserver in main.js) ---------- */
[data-reveal]{
  opacity:0; transform:translateY(28px);
  transition:opacity .8s var(--ease-out), transform .8s var(--ease-out);
}
[data-reveal].is-visible{ opacity:1; transform:translateY(0); }
[data-reveal="fade"]{ transform:none; }
[data-reveal="left"]{ transform:translateX(-40px); }
[data-reveal="left"].is-visible{ transform:translateX(0); }
[data-reveal="right"]{ transform:translateX(40px); }
[data-reveal="right"].is-visible{ transform:translateX(0); }
[data-reveal="scale"]{ transform:scale(.92); }
[data-reveal="scale"].is-visible{ transform:scale(1); }

/* stagger via inline --d custom property */
[data-reveal]{ transition-delay:var(--d,0s); }

/* ---------- Ambient background: glow blobs ---------- */
.glow-field{ position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:0; }
.glow-blob{
  position:absolute; border-radius:50%;
  background:radial-gradient(circle, var(--accent-glow) 0%, transparent 70%);
  filter:blur(10px);
  animation:drift 18s ease-in-out infinite;
  opacity:.55;
}
@keyframes drift{
  0%,100%{ transform:translate(0,0) scale(1); }
  33%{ transform:translate(4%,-6%) scale(1.08); }
  66%{ transform:translate(-3%,4%) scale(.95); }
}

/* mouse-follow glow (positioned via JS custom props) */
.mouse-glow{
  position:fixed; width:520px; height:520px; border-radius:50%;
  background:radial-gradient(circle, rgba(0,255,136,.08), transparent 70%);
  left:var(--mx,50%); top:var(--my,50%);
  transform:translate(-50%,-50%);
  pointer-events:none; z-index:1; transition:opacity .4s;
}

/* ---------- Signature: Signal Line (SVG path draw) ---------- */
.signal-path{
  fill:none; stroke:var(--accent); stroke-width:2; stroke-linecap:round;
  stroke-dasharray:1400; stroke-dashoffset:1400;
  filter:drop-shadow(0 0 6px var(--accent-glow));
  animation:draw 2.6s var(--ease-out) .3s forwards;
}
.signal-path.dim{ stroke:var(--border-strong); stroke-width:1; filter:none; animation:none; stroke-dashoffset:0; }
@keyframes draw{ to{ stroke-dashoffset:0; } }

.signal-dot{
  animation:pulse-dot 2.2s ease-in-out infinite;
  transform-origin:center;
}
@keyframes pulse-dot{ 0%,100%{ r:4; opacity:1;} 50%{ r:7; opacity:.5;} }

/* section divider signal line */
.section-divider{ width:100%; height:40px; opacity:.7; }

/* ---------- Typing effect caret ---------- */
.typing-caret{ display:inline-block; width:2px; background:var(--accent); margin-left:2px; animation:blink 1s step-end infinite; }
@keyframes blink{ 50%{ opacity:0; } }

/* ---------- Floating shapes ---------- */
.float-shape{ animation:float-rot 9s ease-in-out infinite; }
@keyframes float-rot{ 0%,100%{ transform:translateY(0) rotate(0deg);} 50%{ transform:translateY(-16px) rotate(6deg);} }

/* ---------- Page transition overlay ---------- */
.page-transition{
  position:fixed; inset:0; z-index:9997; background:var(--bg);
  transform:translateY(100%); pointer-events:none;
}
.page-transition.is-active{ animation:page-sweep .7s var(--ease-in-out) forwards; }
@keyframes page-sweep{
  0%{ transform:translateY(100%);} 50%{ transform:translateY(0%);} 100%{ transform:translateY(-100%);}
}

/* ---------- Magnetic button wrapper ---------- */
.magnetic{ display:inline-block; will-change:transform; }

/* ---------- Hover underline links ---------- */
.link-underline{ position:relative; }
.link-underline::after{ content:''; position:absolute; left:0; bottom:-2px; width:100%; height:1px; background:currentColor; transform:scaleX(0); transform-origin:right; transition:transform .35s var(--ease-out); }
.link-underline:hover::after{ transform:scaleX(1); transform-origin:left; }

/* ---------- Particles canvas ---------- */
#particles-canvas{ position:absolute; inset:0; z-index:0; opacity:.6; }

/* ---------- Marquee logo item icon spin (subtle) ---------- */
.marquee-item svg{ opacity:.6; }

/* ---------- Count-up number ready state ---------- */
[data-countup]{ font-variant-numeric:tabular-nums; }

/* ==========================================================================
   FIX: horizontal scroll on mobile/tablet.
   [data-reveal="left|right"] offsets elements by 40px before they animate in.
   On narrow screens that pushed content past the viewport edge and created a
   sideways scroll. Two guards: a smaller offset on small screens, plus
   overflow-x:clip as a safety net (clip — not hidden — so position:sticky
   keeps working).
   ========================================================================== */
html{ overflow-x:hidden; }
@supports (overflow-x: clip){ html{ overflow-x:clip; } }

@media (max-width:900px){
  [data-reveal="left"]{ transform:translateX(-16px); }
  [data-reveal="right"]{ transform:translateX(16px); }
}
@media (max-width:560px){
  /* On phones drop the sideways motion entirely — fade up reads better and
     removes any chance of an off-screen overhang. */
  [data-reveal="left"], [data-reveal="right"]{ transform:translateY(24px); }
  [data-reveal="left"].is-visible, [data-reveal="right"].is-visible{ transform:translateY(0); }
}