/* ================================================================
   premium-fx.css — Premium visual effects
   Inspired by 21st.dev component library
   GPU-friendly, hover-triggered, or fire-once animations
   ================================================================ */

/* ── Dotted Surface — Three.js particle wave ─────────────────── */
.dotted-surface {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  opacity: 0.55;
  mask-image: radial-gradient(ellipse 90% 80% at 50% 65%, black 5%, transparent 65%);
  -webkit-mask-image: radial-gradient(ellipse 90% 80% at 50% 65%, black 5%, transparent 65%);
}
.dotted-surface canvas {
  display: block;
  width: 100% !important;
  height: 100% !important;
}

/* ── Film Grain — canvas noise overlay ────────────────────────── */
.film-grain {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 10002;
  opacity: 0.4;
  mix-blend-mode: overlay;
  image-rendering: pixelated;
  object-fit: cover;
}

/* ── Spotlight Cards — cursor-following glow ──────────────────── */
.glow-card {
  background: rgba(14, 14, 16, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 12px;
  transition: border-color 0.3s, box-shadow 0.3s;
  position: relative;
  overflow: hidden;
}
.glow-card::before {
  content: '';
  position: absolute;
  width: 250px;
  height: 250px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(74, 143, 212, 0.12) 0%, transparent 70%);
  left: var(--spot-x, -200px);
  top: var(--spot-y, -200px);
  transform: translate(-50%, -50%);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s;
  z-index: 0;
}
.glow-card--active::before {
  opacity: 1;
}
.glow-card--active {
  border-color: rgba(74, 143, 212, 0.15);
  box-shadow: 0 0 30px rgba(74, 143, 212, 0.04);
}
.glow-card > * {
  position: relative;
  z-index: 1;
}

/* ── Border Beam — animated light traveling around border ─────── */
.border-beam {
  position: relative;
  overflow: hidden;
}
.border-beam::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: conic-gradient(
    from var(--beam-angle, 0deg),
    transparent 0%,
    transparent 75%,
    rgba(74, 143, 212, 0.6) 85%,
    rgba(255,255,255, 0.4) 90%,
    transparent 100%
  );
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: beam-rotate 4s linear infinite;
  pointer-events: none;
}
@keyframes beam-rotate {
  to { --beam-angle: 360deg; }
}
/* CSS Houdini for smooth angle animation */
@property --beam-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

/* ── Aurora Gradient — slow morphing background ──────────────── */
.landing__glow {
  position: absolute;
  border-radius: 50%;
  animation: aurora-drift 12s ease-in-out infinite alternate;
  will-change: transform;
}
.landing__glow--1 {
  width: 800px;
  height: 800px;
  top: -20%;
  left: 20%;
  background: radial-gradient(circle, rgba(40, 80, 160, 0.35) 0%, rgba(20, 50, 120, 0.12) 40%, transparent 70%);
  animation-duration: 14s;
}
.landing__glow--2 {
  width: 700px;
  height: 700px;
  bottom: -25%;
  right: 10%;
  background: radial-gradient(circle, rgba(212, 140, 40, 0.2) 0%, rgba(180, 100, 20, 0.06) 40%, transparent 70%);
  animation-duration: 18s;
  animation-delay: -4s;
}
.landing__glow--3 {
  width: 500px;
  height: 500px;
  top: 35%;
  left: 60%;
  background: radial-gradient(circle, rgba(40, 120, 180, 0.12) 0%, transparent 70%);
  animation-duration: 10s;
  animation-delay: -7s;
}
@keyframes aurora-drift {
  0% {
    transform: translate(0, 0) scale(1);
    filter: blur(0px);
  }
  33% {
    transform: translate(30px, -20px) scale(1.05);
  }
  66% {
    transform: translate(-20px, 15px) scale(0.95);
  }
  100% {
    transform: translate(15px, -10px) scale(1.02);
    filter: blur(0px);
  }
}

/* ── Shimmer Sweep — diagonal light across CTA ───────────────── */
.shimmer-btn {
  position: relative;
  overflow: hidden;
}
.shimmer-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(
    105deg,
    transparent 0%,
    transparent 35%,
    rgba(255, 255, 255, 0.08) 45%,
    rgba(255, 255, 255, 0.14) 50%,
    rgba(255, 255, 255, 0.08) 55%,
    transparent 65%,
    transparent 100%
  );
  animation: shimmer-sweep 4s ease-in-out infinite;
  pointer-events: none;
  z-index: 2;
}
@keyframes shimmer-sweep {
  0%, 100% {
    left: -100%;
  }
  50% {
    left: 200%;
  }
}

/* ── Tagline Letter Stagger ──────────────────────────────────── */
.tagline-char {
  display: inline-block;
  opacity: 0;
  transform: translateY(12px) rotateX(40deg);
  animation: tagline-in 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
@keyframes tagline-in {
  to {
    opacity: 1;
    transform: translateY(0) rotateX(0deg);
  }
}

/* ── Marquee — brand strip scrolling ─────────────────────────── */
.marquee {
  display: flex;
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, black 10%, black 90%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, black 10%, black 90%, transparent);
}
.marquee__track {
  display: flex;
  gap: 48px;
  animation: marquee-scroll 25s linear infinite;
  flex-shrink: 0;
  padding: 0 24px;
}
@keyframes marquee-scroll {
  to { transform: translateX(-100%); }
}

/* ── Grid Background — static ────────────────────────────────── */
.grid-bg {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.015) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.015) 1px, transparent 1px);
  background-size: 60px 60px;
  mask-image: radial-gradient(ellipse 60% 50% at 50% 50%, black 20%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse 60% 50% at 50% 50%, black 20%, transparent 70%);
  pointer-events: none;
  opacity: 0.5;
}

/* ── Dot Pattern — static ────────────────────────────────────── */
.dot-pattern {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
  background-size: 24px 24px;
  mask-image: radial-gradient(ellipse 50% 40% at 50% 50%, black 20%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse 50% 40% at 50% 50%, black 20%, transparent 70%);
  pointer-events: none;
}

/* ── Text Reveal words ───────────────────────────────────────── */
.text-reveal-word {
  display: inline-block;
  opacity: 0.15;
  transition: opacity 0.3s ease;
}
.text-reveal-word.revealed {
  opacity: 1;
}

/* ── Ambient scene glow ──────────────────────────────────────── */
.scene-ambient-glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.3;
  background: radial-gradient(ellipse 60% 50% at 50% 55%, rgba(80, 90, 120, 0.12) 0%, transparent 70%);
}

/* ── Feature card 3D tilt transition reset ───────────────────── */
.land-feature {
  transition: transform 0.15s ease, border-color 0.3s, background 0.3s;
  transform-style: preserve-3d;
}

/* ── Stat number monospace for counter stability ─────────────── */
.landing__stat-num {
  font-variant-numeric: tabular-nums;
}

/* ── Scroll progress glow ────────────────────────────────────── */
.landing__progress {
  box-shadow: 0 0 12px rgba(74, 143, 212, 0.3), 0 0 4px rgba(255,255,255, 0.2);
}

/* ── Hero orb subtle pulse ───────────────────────────────────── */
.hero-orb {
  animation: orb-breathe 8s ease-in-out infinite alternate;
}
@keyframes orb-breathe {
  0% { transform: translate(-50%, -50%) scale(1); opacity: 0.7; }
  100% { transform: translate(-50%, -50%) scale(1.15); opacity: 1; }
}

/* ── Badge dot enhanced glow ─────────────────────────────────── */
.landing__badge-dot {
  box-shadow: 0 0 10px rgba(74, 222, 128, 0.6), 0 0 30px rgba(74, 222, 128, 0.2);
}

/* ── Section label tracking animation ────────────────────────── */
.land-section__label {
  position: relative;
}
.land-section__label::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 0;
  height: 1px;
  background: var(--c-blue);
  transition: width 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.land-section__label.land-visible::after {
  width: 100%;
}