/* ============================================================
   RunR Landing — hero-fx.css
   CSS-only hero efektleri — Three.js yüklenmese bile her zaman
   canlı görünüm sağlar. 3 katman:
     1) Animated gradient blob'lar (::before)
     2) Floating hex SVG mesh (::after)
     3) Subtle scan-line + grid overlay
   ============================================================ */

/* ── Hero güçlü çoklu-blob arkaplan ─────────────────────── */
.hero {
  isolation: isolate;
}
.hero::before {
  content: '';
  position: absolute;
  inset: -10%;
  z-index: 0;
  background:
    radial-gradient(circle at 18% 35%, rgba(255,140,66,0.55) 0%, transparent 30%),
    radial-gradient(circle at 82% 28%, rgba(230,57,70,0.50) 0%, transparent 32%),
    radial-gradient(circle at 50% 78%, rgba(255,179,71,0.45) 0%, transparent 28%),
    radial-gradient(circle at 25% 80%, rgba(255,80,90,0.35) 0%, transparent 30%);
  filter: blur(60px) saturate(140%);
  animation: hero-blob 18s ease-in-out infinite;
  pointer-events: none;
}
@keyframes hero-blob {
  0%, 100% { transform: scale(1) translate3d(0,0,0) rotate(0deg); }
  25%      { transform: scale(1.08) translate3d(30px,-25px,0) rotate(2deg); }
  50%      { transform: scale(0.95) translate3d(-25px,30px,0) rotate(-2deg); }
  75%      { transform: scale(1.05) translate3d(20px,15px,0) rotate(1deg); }
}

/* ── Hex SVG floating layer (CSS-only) ─────────────────── */
.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image:
    /* Scanlines */
    repeating-linear-gradient(180deg, rgba(255,140,66,0.05) 0 1px, transparent 1px 4px),
    /* Hex pattern — SVG data-uri (subtle, slowly drifting) */
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='80' height='92' viewBox='0 0 80 92'><polygon points='40,4 76,24 76,64 40,84 4,64 4,24' fill='none' stroke='%23ff8c42' stroke-width='1' opacity='0.18'/></svg>");
  background-size: 100% 6px, 80px 92px;
  background-repeat: repeat, repeat;
  opacity: 0.85;
  animation: hex-drift 60s linear infinite;
  pointer-events: none;
  mix-blend-mode: screen;
}
@keyframes hex-drift {
  from { background-position: 0 0, 0 0; }
  to   { background-position: 0 -120px, 80px 92px; }
}

/* Üç hareketli "spark" ışını — orange/red beams sweeping */
.hero-content { z-index: 4; }
.hero-canvas  { z-index: 1; }
.hero-fade    { z-index: 2; }
.hero .hero-sparks {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  overflow: hidden;
}
.hero-spark {
  position: absolute;
  width: 2px;
  height: 200px;
  background: linear-gradient(180deg, transparent, rgba(255,180,90,0.9), transparent);
  filter: blur(1px);
  animation: spark-fall 6s linear infinite;
  opacity: 0;
}
.hero-spark.s1 { left: 15%; animation-delay: 0s;   animation-duration: 5s; }
.hero-spark.s2 { left: 38%; animation-delay: 2s;   animation-duration: 7s; }
.hero-spark.s3 { left: 62%; animation-delay: 4.5s; animation-duration: 6s; }
.hero-spark.s4 { left: 84%; animation-delay: 1s;   animation-duration: 8s; }
.hero-spark.s5 { left: 50%; animation-delay: 3.5s; animation-duration: 5.5s; }
@keyframes spark-fall {
  0%   { transform: translateY(-260px); opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { transform: translateY(110vh);  opacity: 0; }
}

/* Hero content — body::before zaten tüm ekranı blur'luyor;
   burada hero canvas'ın direkt üstüne ekstra glass katmanı veriyoruz
   ki Three.js scene'i hero h1/CTA'nın arkasında bulanıklaşsın. */
.hero-content {
  position: relative;
}
.hero .hero-fade {
  /* Tüm hero alanı için ekstra glass — Three.js canvas blur edilir */
  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  background:
    linear-gradient(180deg, rgba(10,14,26,0.15) 0%, rgba(10,14,26,0.25) 70%, var(--bg) 100%),
    linear-gradient(90deg, rgba(10,14,26,0.3) 0%, transparent 18%, transparent 82%, rgba(10,14,26,0.3) 100%);
}

/* Big text glow */
.hero h1 {
  text-shadow:
    0 4px 80px rgba(255, 140, 66, 0.35),
    0 2px 12px rgba(0, 0, 0, 0.8);
}
.hero h1 .r {
  filter: drop-shadow(0 0 35px rgba(255, 140, 66, 0.7));
}

@media (prefers-reduced-motion: reduce) {
  .hero::before, .hero::after, .hero-spark { animation: none !important; }
}