/**
 * Final Gear Auto — Hero Slider
 * Lightweight, GPU-friendly (transform/opacity only). Colours come from the
 * Customizer via --fg-hero-* variables (printed in <style id="fg-customizer-css">).
 */

.fg-hero {
    position: relative;
    width: 100%;
    height: var(--fg-hero-h, 520px);
    overflow: hidden;
    border-radius: 0;
    background: #0b1220;
    isolation: isolate;
    font-family: var(--font-family, inherit);
}

.fg-hero__viewport { position: absolute; inset: 0; }

/* ---- Slides (stacked) ---- */
.fg-hero__slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    visibility: hidden;
    z-index: 1;
    transition:
        opacity var(--fg-hero-t, 700ms) ease,
        transform var(--fg-hero-t, 700ms) cubic-bezier(.22, 1, .36, 1),
        filter var(--fg-hero-t, 700ms) ease,
        clip-path var(--fg-hero-t, 700ms) cubic-bezier(.22, 1, .36, 1);
    will-change: opacity, transform;
}
.fg-hero__slide.is-active {
    opacity: 1;
    visibility: visible;
    z-index: 2;
}

.fg-hero__media { position: absolute; inset: 0; overflow: hidden; }
.fg-hero__img,
.fg-hero__video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
/* Embedded YouTube / Vimeo background (cover-scaled, non-interactive) */
.fg-hero__embed {
    position: absolute;
    inset: 0;
    z-index: 1;
    overflow: hidden;
    pointer-events: none;
}
.fg-hero__embed iframe {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100vw;
    height: 56.25vw;          /* 16:9 relative to viewport width */
    min-width: 177.78vh;      /* 16:9 relative to viewport height */
    min-height: 100vh;
    transform: translate(-50%, -50%);
    border: 0;
}
.fg-hero__embed iframe:not([src]) { display: none; } /* hidden until activated */

.fg-hero__overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        linear-gradient(
            to top,
            color-mix(in srgb, var(--fg-hero-overlay, #0f172a) var(--fg-hero-ov, 55%), transparent) 0%,
            color-mix(in srgb, var(--fg-hero-overlay, #0f172a) calc(var(--fg-hero-ov, 55%) * .35), transparent) 45%,
            transparent 80%
        );
}

/* ---- Content ---- */
.fg-hero__content {
    position: absolute;
    z-index: 2;
    left: 0;
    bottom: 0;
    max-width: 640px;
    padding: clamp(20px, 4vw, 48px);
    color: var(--fg-hero-text, #e5e7eb);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
}
/* Content rises in on activation */
.fg-hero__slide .fg-hero__content > * {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .5s ease, transform .5s cubic-bezier(.22, 1, .36, 1);
}
.fg-hero__slide.is-active .fg-hero__content > * {
    opacity: 1;
    transform: none;
}
.fg-hero__slide.is-active .fg-hero__content > *:nth-child(1) { transition-delay: .15s; }
.fg-hero__slide.is-active .fg-hero__content > *:nth-child(2) { transition-delay: .23s; }
.fg-hero__slide.is-active .fg-hero__content > *:nth-child(3) { transition-delay: .31s; }
.fg-hero__slide.is-active .fg-hero__content > *:nth-child(4) { transition-delay: .39s; }
.fg-hero__slide.is-active .fg-hero__content > *:nth-child(5) { transition-delay: .47s; }
.fg-hero__slide.is-active .fg-hero__content > *:nth-child(6) { transition-delay: .55s; }

.fg-hero__title {
    margin: 0;
    color: var(--fg-hero-title, #fff);
    font-size: clamp(26px, 4.4vw, 48px);
    line-height: 1.08;
    font-weight: 800;
    letter-spacing: -.5px;
    text-shadow: 0 2px 18px rgba(0, 0, 0, .35);
}
.fg-hero__subtitle {
    margin: 0;
    max-width: 56ch;
    color: var(--fg-hero-text, #e5e7eb);
    font-size: clamp(14px, 1.8vw, 18px);
    line-height: 1.5;
    text-shadow: 0 1px 10px rgba(0, 0, 0, .3);
}
.fg-hero__btn {
    margin-top: 6px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 26px;
    border-radius: 5px;
    font-weight: 700;
    text-decoration: none !important;
    color: var(--fg-hero-btn-text, #fff);
    background: var(--fg-hero-btn-bg, #2563eb);
    transition: background .25s ease, color .25s ease, transform .25s ease, box-shadow .25s ease;
}
.fg-hero__btn::after { content: "\2192"; transition: transform .25s ease; }
.fg-hero__btn:hover {
    background: var(--fg-hero-btn-hover-bg, #1e3a8a);
    color: var(--fg-hero-btn-hover-text, #fff);
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(0, 0, 0, .25);
}
.fg-hero__btn:hover::after { transform: translateX(4px); }

/* ---- Arrows ---- */
.fg-hero__arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 5;
    width: 46px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    line-height: 1;
    color: #fff;
    cursor: pointer;
    border: none;
    border-radius: 50%;
    background: rgba(15, 23, 42, .35);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    transition: background .25s ease, transform .25s ease;
}
.fg-hero__arrow:hover { background: var(--fg-hero-accent, #38bdf8); color: #0b1220; }
.fg-hero__arrow--prev { left: 16px; }
.fg-hero__arrow--next { right: 16px; }
.fg-hero__arrow--prev:hover { transform: translateY(-50%) scale(1.08); }
.fg-hero__arrow--next:hover { transform: translateY(-50%) scale(1.08); }

/* ---- Dots ---- */
.fg-hero__dots {
    position: absolute;
    z-index: 5;
    bottom: 16px;
    right: 20px;
    display: flex;
    gap: 8px;
}
.fg-hero__dot {
    width: 9px;
    height: 9px;
    padding: 0;
    border: none;
    border-radius: 999px;
    cursor: pointer;
    background: rgba(255, 255, 255, .5);
    transition: width .3s ease, background .3s ease;
}
.fg-hero__dot.is-active {
    width: 26px;
    background: var(--fg-hero-accent, #38bdf8);
}

/* =====================================================================
   ANIMATIONS — choose one in the Customizer (wrapper modifier class).
   All use transform/opacity only, so they stay smooth on mobile.
   ===================================================================== */

/* Fade (default base already fades via opacity) */

/* Slide in from the right */
.fg-hero--slide .fg-hero__slide { transform: translateX(6%); }
.fg-hero--slide .fg-hero__slide.is-active { transform: translateX(0); }

/* Zoom in */
.fg-hero--zoom .fg-hero__slide { transform: scale(1.08); }
.fg-hero--zoom .fg-hero__slide.is-active { transform: scale(1); }

/* 3D flip */
.fg-hero--flip .fg-hero__viewport { perspective: 1600px; }
.fg-hero--flip .fg-hero__slide { transform: rotateY(12deg) scale(1.04); transform-origin: left center; }
.fg-hero--flip .fg-hero__slide.is-active { transform: rotateY(0) scale(1); }

/* Ken Burns — slow cinematic zoom + pan on the active image */
.fg-hero--kenburns .fg-hero__slide.is-active .fg-hero__img {
    animation: fgKenBurns 9s ease-out forwards;
}
@keyframes fgKenBurns {
    from { transform: scale(1) translate(0, 0); }
    to   { transform: scale(1.14) translate(-1.5%, -1.5%); }
}

/* Slide up (vertical) */
.fg-hero--slide-up .fg-hero__slide { transform: translateY(8%); }
.fg-hero--slide-up .fg-hero__slide.is-active { transform: translateY(0); }

/* Zoom out */
.fg-hero--zoom-out .fg-hero__slide { transform: scale(.92); }
.fg-hero--zoom-out .fg-hero__slide.is-active { transform: scale(1); }

/* Blur in */
.fg-hero--blur .fg-hero__slide { filter: blur(14px); transform: scale(1.04); }
.fg-hero--blur .fg-hero__slide.is-active { filter: blur(0); transform: scale(1); }

/* Rotate in */
.fg-hero--rotate .fg-hero__slide { transform: rotate(2deg) scale(1.06); transform-origin: center; }
.fg-hero--rotate .fg-hero__slide.is-active { transform: rotate(0) scale(1); }

/* Reveal (wipe from left) */
.fg-hero--reveal .fg-hero__slide { clip-path: inset(0 100% 0 0); transform: none; }
.fg-hero--reveal .fg-hero__slide.is-active { clip-path: inset(0 0 0 0); }

/* ---- Responsive ---- */
@media (max-width: 768px) {
    .fg-hero { height: clamp(360px, 70vw, var(--fg-hero-h, 520px)); border-radius: 0; }
    .fg-hero__content { max-width: 100%; padding: 20px; }
    .fg-hero__arrow { width: 38px; height: 38px; font-size: 22px; }
}

/* ---- Respect reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
    .fg-hero__slide,
    .fg-hero__slide.is-active .fg-hero__content > *,
    .fg-hero__btn { transition: opacity .2s ease; transform: none !important; }
    .fg-hero--kenburns .fg-hero__slide.is-active .fg-hero__img { animation: none; }
}

/* Admin-only hint shown when no slides are configured yet */
.fg-hero-empty {
    padding: 28px;
    border: 2px dashed #cbd5e1;
    border-radius: 12px;
    text-align: center;
    color: #64748b;
    font-weight: 600;
    background: #f8fafc;
}