/* ============================================================
   MyTrafficBuzz — Hero

   The homepage hero slider: slides, backgrounds and dots.

   Part of the split of the former single style.css (20-Aug-2026).
   Load order matters: see the <link> block in any page head, and
   keep this file in that same position when adding rules.
   ============================================================ */

/* ---------- hero (homepage slider) ---------- */
.hero{position:relative;height:620px;overflow:hidden;background:var(--pri)}
.hero-slide{position:absolute;inset:0;opacity:0;transition:opacity .9s ease;display:flex;align-items:center}
.hero-slide.active{opacity:1}
.hero-slide::before{content:'';position:absolute;inset:0;background:linear-gradient(105deg,rgba(6,13,27,.94) 30%,rgba(9,20,41,.74) 66%,rgba(15,35,72,.55));z-index:1}
.hero-slide::after{content:'';position:absolute;inset:-12%;background:var(--aur);z-index:1;pointer-events:none;animation:aurora 16s ease-in-out infinite;will-change:transform}
.hero-content{position:relative;z-index:2;color:var(--wh);max-width:780px;padding:0 60px;animation:fadeUp .7s ease}
.hero-content h1,.hero-content .hero-h1-style{font-size:clamp(34px,5.2vw,62px);margin-bottom:18px;line-height:1.06;color:#fff;font-weight:800;letter-spacing:-.03em}
.hero-content h1 span,.hero-content .hero-h1-style span{color:var(--gold);background:linear-gradient(92deg,#F4B63F 20%,#FFD98A 55%,#F4B63F 85%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.hero-content p{font-size:18px;color:rgba(255,255,255,.85);margin-bottom:30px;max-width:560px;line-height:1.65}
.hero-dots{position:absolute;bottom:26px;left:50%;transform:translateX(-50%);display:flex;gap:8px;z-index:3}
.hero-dot{width:26px;height:4px;border-radius:2px;background:rgba(255,255,255,.35);cursor:pointer;transition:var(--t);border:none;padding:0}
.hero-dot.active{background:var(--gold);width:40px;transform:none}

/* ===== Hero background video ===== */
.hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;border:none}
.hero-video-overlay{position:absolute;inset:0;z-index:1;background:linear-gradient(105deg,rgba(6,13,27,.92),rgba(9,20,41,.7))}
.hero-slide{z-index:2}
.hero-dots{z-index:4}

/* ===== Hero slider: image backgrounds ===== */
.hero-slide{background-size:cover;background-position:center;background-repeat:no-repeat;background-color:var(--pri)}
.hero-bg-1{background-image:url(../assets/images/slide-seo.jpg)}
.hero-bg-2{background-image:url(../assets/images/slide-team.jpg)}
.hero-bg-3{background-image:url(../assets/images/slide-growth.jpg)}
.hero-content{position:relative;z-index:2}
.mt-32{margin-top:32px}

/* Hero slider polish: gentle zoom on the active slide image */
@keyframes kenburns{from{background-size:112%}to{background-size:124%}}
.hero-slide{background-size:112%}
.hero-slide.active{animation:kenburns 9s ease-out forwards}
.hero-content h1,.hero-content .hero-h1-style{text-shadow:0 2px 20px rgba(4,10,22,.45)}
@media (prefers-reduced-motion:reduce){.hero-slide.active{animation:none;background-size:cover}}