/* ========== Advanced Animations & Novel Effects ========== */

/* ---- Noise grain overlay (subtle, animated) ---- */
.grain {
  position: fixed; inset: 0; pointer-events: none; z-index: 9998;
  opacity: 0.04; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  animation: grain 1.2s steps(6) infinite;
}
@keyframes grain {
  0% { transform: translate(0,0); } 20% { transform: translate(-5%,3%); } 40% { transform: translate(6%,-3%); }
  60% { transform: translate(-3%,-6%); } 80% { transform: translate(4%,4%); } 100% { transform: translate(0,0); }
}
[data-theme="light"] .grain { opacity: 0.03; mix-blend-mode: multiply; }

/* ---- Cursor trail dot (soft halo that follows cursor) ---- */
.cursor-halo {
  position: fixed; top: 0; left: 0; width: 340px; height: 340px; border-radius: 50%;
  pointer-events: none; z-index: 9997; transform: translate(-50%, -50%);
  background: radial-gradient(circle, color-mix(in oklab, var(--accent) 30%, transparent) 0%, transparent 60%);
  mix-blend-mode: screen; filter: blur(40px); opacity: 0;
  transition: opacity .4s ease;
}
[data-theme="light"] .cursor-halo { mix-blend-mode: multiply; filter: blur(32px); opacity: 0; }
.cursor-halo.on { opacity: 1; }

/* ---- Scroll reveal ---- */
.reveal { opacity: 0; transform: translateY(32px); transition: opacity .9s var(--ease-standard), transform .9s var(--ease-standard); }
.reveal.in { opacity: 1; transform: translateY(0); }

/* ---- Hero word stagger ---- */
.hero-word { display: inline-block; opacity: 0; transform: translateY(0.5em) rotateX(-20deg); transform-origin: 0 100%; transition: opacity .8s var(--ease-standard), transform .8s var(--ease-spring); }
.hero-word.in { opacity: 1; transform: translateY(0) rotateX(0); }
.hero-sub-line { opacity: 0; transform: translateY(14px); transition: opacity .7s var(--ease-standard), transform .7s var(--ease-standard); }
.hero-sub-line.in { opacity: 1; transform: translateY(0); }

/* ---- Shimmer sweep on signature gradients ---- */
@keyframes shimmer-sweep {
  0% { background-position: -200% 50%; }
  100% { background-position: 200% 50%; }
}
.shimmer {
  background: linear-gradient(
    110deg,
    var(--sm-mint-500) 0%,
    var(--sm-cyan-500) 25%,
    #ffffff 40%,
    var(--sm-lime-500) 55%,
    var(--sm-mint-500) 80%
  );
  background-size: 300% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: shimmer-sweep 8s ease-in-out infinite;
}

/* ---- Ambient floating orbs (in hero + CTA) ---- */
.ambient-orbs { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 0; }
.ambient-orbs .ao {
  position: absolute; border-radius: 50%; filter: blur(60px); opacity: 0.35;
  mix-blend-mode: screen;
}
[data-theme="light"] .ambient-orbs .ao { opacity: 0.5; mix-blend-mode: multiply; filter: blur(80px); }
.ambient-orbs .ao-1 { width: 420px; height: 420px; background: var(--sm-mint-500); top: 10%; left: -10%; animation: float1 18s ease-in-out infinite; }
.ambient-orbs .ao-2 { width: 360px; height: 360px; background: var(--sm-cyan-500); bottom: -15%; right: 20%; animation: float2 22s ease-in-out infinite; }
.ambient-orbs .ao-3 { width: 280px; height: 280px; background: var(--sm-lime-500); top: 40%; right: -5%; animation: float3 26s ease-in-out infinite; }
@keyframes float1 { 0%,100% { transform: translate(0,0) scale(1); } 33% { transform: translate(40px,-30px) scale(1.1); } 66% { transform: translate(-20px,40px) scale(0.95); } }
@keyframes float2 { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(-50px,-20px) scale(1.15); } }
@keyframes float3 { 0%,100% { transform: translate(0,0); } 25% { transform: translate(30px,50px); } 50% { transform: translate(-30px,20px); } 75% { transform: translate(20px,-40px); } }

/* ---- Magnetic buttons (applied via JS) ---- */
.btn.magnetic { will-change: transform; }

/* ---- Glitch on section title hover ---- */
.glitch { position: relative; display: inline-block; }
.glitch::before, .glitch::after {
  content: attr(data-text); position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  opacity: 0; pointer-events: none;
}
.glitch:hover::before {
  opacity: 0.7; color: var(--sm-cyan-500); transform: translate(-2px, 0);
  clip-path: polygon(0 0, 100% 0, 100% 45%, 0 45%);
  animation: glitch-a 0.4s steps(2) infinite;
}
.glitch:hover::after {
  opacity: 0.7; color: var(--sm-lime-500); transform: translate(2px, 0);
  clip-path: polygon(0 55%, 100% 55%, 100% 100%, 0 100%);
  animation: glitch-b 0.4s steps(2) infinite;
}
@keyframes glitch-a { 0% { transform: translate(-2px,0); } 50% { transform: translate(-3px,1px); } 100% { transform: translate(-2px,0); } }
@keyframes glitch-b { 0% { transform: translate(2px,0); } 50% { transform: translate(3px,-1px); } 100% { transform: translate(2px,0); } }

/* ---- Service card animated gradient border on hover ---- */
.service-card { position: relative; isolation: isolate; }
.service-card::after {
  content: ''; position: absolute; inset: -1px; border-radius: 24px; padding: 1px;
  background: conic-gradient(from 0deg, transparent 0deg, var(--sm-mint-500) 30deg, var(--sm-cyan-500) 90deg, transparent 180deg, transparent 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: 0; transition: opacity .4s; pointer-events: none;
  animation: rotate-border 4s linear infinite;
}
.service-card:hover::after { opacity: 1; }
@keyframes rotate-border {
  from { background: conic-gradient(from 0deg, transparent 0deg, var(--sm-mint-500) 30deg, var(--sm-cyan-500) 90deg, transparent 180deg, transparent 360deg); }
  to { background: conic-gradient(from 360deg, transparent 0deg, var(--sm-mint-500) 30deg, var(--sm-cyan-500) 90deg, transparent 180deg, transparent 360deg); }
}

/* ---- Marquee ticker ---- */
@keyframes ticker { to { transform: translateX(-50%); } }
.ticker { display: flex; white-space: nowrap; gap: 60px; animation: ticker 40s linear infinite; font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.15em; text-transform: uppercase; }
.ticker-wrap { overflow: hidden; border-top: 1px solid var(--border-subtle); border-bottom: 1px solid var(--border-subtle); padding: 22px 0; color: var(--fg-2); background: var(--bg-raised); position: relative; }
.ticker-wrap::before, .ticker-wrap::after {
  content: ''; position: absolute; top: 0; bottom: 0; width: 120px; z-index: 2; pointer-events: none;
}
.ticker-wrap::before { left: 0; background: linear-gradient(90deg, var(--bg-raised), transparent); }
.ticker-wrap::after { right: 0; background: linear-gradient(-90deg, var(--bg-raised), transparent); }

/* ---- Section header underline ---- */
.section-head h2 .underline { display: inline-block; height: 4px; width: 0; background: var(--grad-signature); margin-left: 16px; vertical-align: middle; border-radius: 2px; transition: width 1.2s var(--ease-standard); }
.reveal.in .section-head h2 .underline, .section-head.reveal.in h2 .underline { width: 80px; }

/* ---- Theme toggle ---- */
.theme-toggle { width: 40px; height: 40px; border-radius: 999px; background: var(--bg-card); border: 1px solid var(--border-subtle); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; color: var(--fg-2); transition: all .3s var(--ease-standard); position: relative; }
.theme-toggle:hover { color: var(--accent); border-color: color-mix(in oklab, var(--accent) 40%, transparent); transform: rotate(-20deg) scale(1.08); }
.theme-toggle svg { width: 18px; height: 18px; transition: transform .4s var(--ease-spring); }

/* ---- Stats count-up placeholder ---- */
.stat-num.counting { font-variant-numeric: tabular-nums; }

/* ---- Blog card tilt ---- */
.blog-card { perspective: 1000px; transform-style: preserve-3d; }
.blog-card .bc-img { transition: transform .5s var(--ease-standard); }
.blog-card:hover .bc-img { transform: scale(1.06); }
.blog-card .bc-img::after {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), color-mix(in oklab, var(--accent) 25%, transparent), transparent 60%);
  opacity: 0; transition: opacity .3s;
}
.blog-card:hover .bc-img::after { opacity: 1; }

/* ---- Portfolio tilt on hover ---- */
.pf-item { perspective: 1200px; }
.pf-item .pf-bg { transform-style: preserve-3d; }

/* ---- Footer constellation canvas ---- */
.footer { position: relative; overflow: hidden; }
.footer-constellation { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; opacity: 0.6; }
[data-theme="light"] .footer-constellation { opacity: 0.35; }

/* ---- Footer wordmark — smaller, with slow pan gradient ---- */
.footer-wordmark {
  background: linear-gradient(110deg, var(--sm-mint-500) 0%, var(--sm-cyan-500) 45%, var(--sm-lime-500) 80%, var(--sm-mint-500) 100%);
  background-size: 250% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: wordmark-pan 12s ease-in-out infinite;
  position: relative;
}
@keyframes wordmark-pan { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }

/* ---- Signature scroll progress bar ---- */
.scroll-progress {
  position: fixed; top: 0; left: 0; height: 2px; width: 0%;
  background: var(--grad-signature); z-index: 1000; transition: width .1s linear;
  box-shadow: 0 0 8px color-mix(in oklab, var(--sm-mint-500) 60%, transparent);
}

/* ---- Back-to-top pill (appears after scroll) ---- */
.to-top {
  position: fixed; right: 32px; bottom: 32px; width: 48px; height: 48px; border-radius: 50%;
  background: var(--sm-mint-500); color: var(--sm-ink-950); border: 0; cursor: pointer;
  display: flex; align-items: center; justify-content: center; z-index: 50;
  opacity: 0; transform: translateY(20px) scale(0.8); pointer-events: none;
  transition: all .4s var(--ease-spring);
  box-shadow: 0 8px 32px color-mix(in oklab, var(--sm-mint-500) 40%, transparent);
}
.to-top.on { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }
.to-top:hover { transform: translateY(-4px) scale(1.08); }

/* Hero em gets the shimmer effect */
.hero h1 em {
  background: linear-gradient(110deg, var(--sm-mint-500) 0%, var(--sm-cyan-500) 25%, #ffffff 40%, var(--sm-lime-500) 55%, var(--sm-mint-500) 80%);
  background-size: 300% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: shimmer-sweep 8s ease-in-out infinite;
}
[data-theme="light"] .hero h1 em {
  background: linear-gradient(110deg, var(--sm-mint-500) 0%, var(--sm-cyan-500) 25%, var(--sm-ink-950) 40%, var(--sm-lime-500) 55%, var(--sm-mint-500) 80%);
  background-size: 300% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
@media (prefers-reduced-motion: reduce) {
  .reveal, .hero-word, .hero-sub-line, .ticker, .shimmer, .ambient-orbs .ao,
  .service-card::after, .footer-wordmark, .grain, .cursor-halo,
  .stagger-item, .section, .ticker-wrap, .stats, .hero-orb::before, .section-head h2 em {
    animation: none !important; transition: none !important;
  }
  .reveal, .stagger-item { opacity: 1 !important; transform: none !important; }
  .section, .ticker-wrap, .stats { opacity: 1 !important; transform: none !important; }
  .hero-word, .hero-sub-line { opacity: 1 !important; transform: none !important; }
}

/* ---- 3D tilt card depth layers ---- */
.service-card, .pf-item, .blog-card, .step { transition: box-shadow .4s var(--ease-standard); }
.service-card > *, .pf-item > *, .blog-card > *, .step > * { transform-style: preserve-3d; }
.service-card:hover { box-shadow: var(--shadow-4), 0 0 60px color-mix(in oklab, var(--sm-mint-500) 22%, transparent); }

.pf-item::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(255,255,255,0.08), transparent 50%);
  opacity: 0; transition: opacity .3s; mix-blend-mode: overlay; z-index: 3;
}
.pf-item:hover::after { opacity: 1; }
[data-theme="light"] .pf-item::after { mix-blend-mode: multiply; }

.pf-meta, .pf-tags { transform: translateZ(30px); transform-style: preserve-3d; }
.service-card .sc-icon { transform: translateZ(25px); transition: transform .4s var(--ease-spring); }
.service-card:hover .sc-icon { transform: translateZ(40px) scale(1.08); }
.service-card h3 { transform: translateZ(18px); }
.blog-card .bc-body { transform: translateZ(15px); transform-style: preserve-3d; }
.step .step-num { transform: translateZ(20px); }
.step h4 { transform: translateZ(12px); }

.stagger-item {
  opacity: 0; transform: translateY(28px) scale(0.96);
  transition: opacity .7s var(--ease-standard), transform .7s var(--ease-spring);
}
.stagger-item.stagger-in { opacity: 1; transform: translateY(0) scale(1); }

.section, .ticker-wrap, .stats {
  opacity: 0.65; transform: scale(0.985);
  transition: opacity .9s var(--ease-standard), transform .9s var(--ease-standard);
}
.section.in-view, .ticker-wrap.in-view, .stats.in-view { opacity: 1; transform: scale(1); }

.hero-orb { position: absolute; isolation: isolate; }
.hero-orb::before {
  content: ''; position: absolute; inset: 15%; border-radius: 50%;
  background: radial-gradient(circle, color-mix(in oklab, var(--sm-mint-500) 40%, transparent) 0%, transparent 70%);
  filter: blur(60px); z-index: -1; animation: orb-pulse 6s ease-in-out infinite;
}
@keyframes orb-pulse {
  0%, 100% { opacity: 0.55; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.15); }
}

.pf-item .pf-bg { transition: transform .6s var(--ease-standard), filter .6s; }
.pf-item:hover .pf-bg { transform: scale(1.08); filter: saturate(1.3) brightness(1.05); }

@keyframes icon-float {
  0%, 100% { transform: translateZ(40px) translateY(0) scale(1.08); }
  50% { transform: translateZ(40px) translateY(-5px) scale(1.08); }
}
.service-card:hover .sc-icon { animation: icon-float 2.8s ease-in-out infinite; }

.stat { transition: transform .3s var(--ease-spring); }
.stat:hover { transform: translateY(-3px); }

.btn { position: relative; overflow: hidden; }
.btn::after {
  content: ''; position: absolute; top: 50%; left: 50%;
  width: 0; height: 0; border-radius: 50%;
  background: rgba(255,255,255,0.35); transform: translate(-50%, -50%);
  transition: width .6s, height .6s, opacity .6s; opacity: 0; pointer-events: none;
}
.btn:active::after { width: 400px; height: 400px; opacity: 0; transition: width .6s, height .6s, opacity .8s; }

.section-head h2 em {
  background-size: 200% 100%;
  animation: wordmark-pan 10s ease-in-out infinite;
}

/* ---- Light theme specifics ---- */
[data-theme="light"] .hero-bg { background: var(--grad-aurora), var(--bg-canvas); }
[data-theme="light"] .nav.scrolled { background: color-mix(in oklab, #ffffff 78%, transparent); }
[data-theme="light"] .service-card::before { background: radial-gradient(circle at top right, color-mix(in oklab, var(--accent) 14%, transparent), transparent 60%); }
[data-theme="light"] .lang { background: color-mix(in oklab, #ffffff 70%, transparent); }
[data-theme="light"] .pf-item .pf-overlay { background: linear-gradient(180deg, transparent 30%, rgba(244,244,238,0.9) 100%); }
[data-theme="light"] .pf-item .pf-title { color: var(--fg-1); }
[data-theme="light"] .pf-item .pf-chip { background: rgba(255,255,255,0.8); color: var(--accent); border-color: color-mix(in oklab, var(--accent) 35%, transparent); }
[data-theme="light"] .cta-block::before { opacity: 0.85; }
[data-theme="light"] .footer { background: var(--bg-canvas); }