/* ============================================================
   PHASE 5 — HERO SLIDER (Swiper)
   Left column rotates through slides (badge/title/text/CTAs);
   the stats proof-card on the right stays fixed as trust anchor.
   ============================================================ */

.hero-section {
    position: relative;
    overflow: hidden;
    background: linear-gradient(180deg, var(--taghat-cream) 0%, var(--taghat-bg) 100%);
    padding-block: clamp(40px, 6vw, 84px);
}

.taghat-hero-swiper {
    overflow: visible;
}

.taghat-hero-swiper .swiper-wrapper {
    position: relative;
    align-items: center;
}

.taghat-hero-slide {
    height: auto;
}

/* ------------------------------------------------------------
   v4.7.1 — lightweight in-house cross-fade (Swiper library
   removed; see hero-slider.js). Only the active slide sits in
   normal flow (so the wrapper's height always matches it);
   inactive slides are taken out of flow and layered underneath
   so both can be visible at once during the opacity transition.
   ------------------------------------------------------------ */
.taghat-hero-swiper .swiper-slide {
    position: absolute;
    inset: 0;
    width: 100%;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--taghat-duration-slow, .5s) var(--taghat-ease, ease);
}
.taghat-hero-swiper .swiper-slide.swiper-slide-active {
    position: relative;
    opacity: 1;
    pointer-events: auto;
}

/* Background parallax layer behind the text column */
.taghat-hero-slide::before {
    content: "";
    position: absolute;
    inset: -10% -5%;
    z-index: -1;
    background:
        radial-gradient(circle at 20% 20%, rgba(47, 111, 237, .08), transparent 55%),
        radial-gradient(circle at 80% 70%, rgba(111, 174, 255, .10), transparent 50%);
    opacity: 0;
    transition: opacity var(--taghat-duration-slow) var(--taghat-ease);
    will-change: transform;
}
.swiper-slide-active.taghat-hero-slide::before {
    opacity: 1;
}

/* Fade + scale transition on the slide content itself */
.taghat-hero-slide .hero-badge,
.taghat-hero-slide .hero-title,
.taghat-hero-slide .hero-text,
.taghat-hero-slide .taghat-hero-ctas {
    opacity: 0;
    transform: translateY(16px) scale(.98);
    transition: opacity var(--taghat-duration-slow) var(--taghat-ease),
                transform var(--taghat-duration-slow) var(--taghat-ease);
}
.swiper-slide-active .hero-badge        { opacity: 1; transform: none; transition-delay: 60ms; }
.swiper-slide-active .hero-title        { opacity: 1; transform: none; transition-delay: 140ms; }
.swiper-slide-active .hero-text         { opacity: 1; transform: none; transition-delay: 220ms; }
.swiper-slide-active .taghat-hero-ctas  { opacity: 1; transform: none; transition-delay: 300ms; }

.hero-title { line-height: 1.25; }

.taghat-hero-ctas {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

/* Controls row — arrows + pagination sit BELOW the slide content now,
   never overlapping the text (previous absolute-centered arrows did). */
.taghat-hero-controls {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 28px;
}

.taghat-hero-swiper .swiper-button-prev,
.taghat-hero-swiper .swiper-button-next {
    position: static;
    margin: 0;
    width: 44px;
    height: 44px;
    flex: 0 0 auto;
    background: var(--taghat-glass-bg);
    border: 1px solid var(--taghat-glass-border);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 50%;
    color: var(--taghat-primary-blue-dark);
    box-shadow: 0 8px 24px var(--taghat-shadow);
    transition: transform var(--taghat-duration-fast) var(--taghat-ease), background var(--taghat-duration-fast) var(--taghat-ease);
}
.taghat-hero-swiper .swiper-button-prev:hover,
.taghat-hero-swiper .swiper-button-next:hover {
    transform: scale(1.06);
    background: rgba(255, 255, 255, .55);
}
.taghat-hero-swiper .swiper-button-prev::after,
.taghat-hero-swiper .swiper-button-next::after {
    font-size: 16px;
    font-weight: 700;
}

/* Pagination bullets + animated progress */
.taghat-hero-swiper .swiper-pagination {
    position: static;
    display: flex;
    align-items: center;
    gap: 8px;
}
.taghat-hero-swiper .swiper-pagination-bullet {
    width: 28px;
    height: 4px;
    border-radius: var(--taghat-radius-pill);
    background: var(--taghat-light-gray);
    opacity: 1;
    position: relative;
    overflow: hidden;
    transition: background var(--taghat-duration-fast) var(--taghat-ease);
}
.taghat-hero-swiper .swiper-pagination-bullet-active {
    background: var(--taghat-light-gray);
}
.taghat-hero-swiper .swiper-pagination-bullet-active::after {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--taghat-primary-blue);
    transform-origin: right center;
    animation: taghat-hero-progress var(--taghat-hero-autoplay, 6000ms) linear forwards;
}
[dir="ltr"] .taghat-hero-swiper .swiper-pagination-bullet-active::after {
    transform-origin: left center;
}

@keyframes taghat-hero-progress {
    from { transform: scaleX(0); }
    to   { transform: scaleX(1); }
}

.taghat-hero-stats-wrap {
    animation: taghat-fade-scale-in var(--taghat-duration-slow) var(--taghat-ease) both;
    animation-delay: 120ms;
}

/* Responsive height + mobile behaviour */
@media (max-width: 991.98px) {
    .taghat-hero-swiper .swiper-button-prev,
    .taghat-hero-swiper .swiper-button-next {
        display: none;
    }
    .taghat-hero-ctas .btn { flex: 1 1 auto; text-align: center; }
}

@media (max-width: 575.98px) {
    .taghat-hero-ctas { flex-direction: column; }
    .taghat-hero-ctas .btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
    .taghat-hero-slide::before,
    .taghat-hero-slide .hero-badge,
    .taghat-hero-slide .hero-title,
    .taghat-hero-slide .hero-text,
    .taghat-hero-slide .taghat-hero-ctas,
    .taghat-hero-swiper .swiper-pagination-bullet-active::after,
    .taghat-hero-stats-wrap {
        animation: none !important;
        transition: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
}