/**
 * Vexstorm Hero Carousel — Styles
 * Supports slide/fade/crossfade transitions, video + image slides,
 * configurable dot indicators, arrow navigation, and panel effects.
 *
 * Copyright 2026 Vexstorm Studios
 * Christopher Andrzejewski
 */

/* ================================================================
   Container
   ================================================================ */
.vex-hero {
    position: relative;
    width: 100%;
    overflow: hidden;
    line-height: 0;
    font-size: 0;
    margin-bottom: 8px;
    z-index: 1;
}

/* ================================================================
   Track + Slides
   ================================================================ */
.vex-hero-track {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.vex-hero-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.6s ease, visibility 0.6s ease;
    z-index: 1;
}

.vex-hero-slide-active {
    position: relative;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    z-index: 2;
}

/* Slide transition mode — overridden by JS for slide/crossfade */
.vex-hero[data-transition="slide"] .vex-hero-slide {
    transition: transform 0.6s ease, opacity 0.6s ease;
    transform: translateX(100%);
}
.vex-hero[data-transition="slide"] .vex-hero-slide-active {
    transform: translateX(0);
}
.vex-hero[data-transition="slide"] .vex-hero-slide-exit-left {
    transform: translateX(-100%);
    opacity: 0;
}

/* Crossfade: both visible during transition */
.vex-hero[data-transition="crossfade"] .vex-hero-slide {
    transition: opacity 0.8s ease;
}

/* ================================================================
   Media (images + videos)
   ================================================================ */
.vex-hero-media {
    display: block;
    width: 100%;
    height: auto;
    max-width: 100%;
    object-fit: cover;
}

video.vex-hero-media {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

iframe.vex-hero-media {
    width: 100%;
    aspect-ratio: 16 / 9;
    height: auto;
    min-height: 200px;
    max-height: 70vh;
    border: none;
    display: block;
}

video.vex-hero-media {
    max-height: 70vh;
}

/* Fallback for browsers with limited aspect-ratio support */
@supports not (aspect-ratio: 16 / 9) {
    iframe.vex-hero-media {
        height: 0;
        padding-bottom: 56.25%;
    }
}

/* ================================================================
   Arrow Navigation
   ================================================================ */
.vex-hero-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    background: rgba(0, 0, 0, 0.3);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
    transition: background 0.2s ease, transform 0.2s ease;
    line-height: 0;
}

.vex-hero-arrow:hover {
    background: rgba(0, 0, 0, 0.6);
    transform: translateY(-50%) scale(1.1);
}

.vex-hero-arrow-left {
    left: 12px;
}

.vex-hero-arrow-right {
    right: 12px;
}

.vex-hero-arrow svg {
    display: block;
    transition: stroke 0.2s ease;
}

/* ================================================================
   Dot Indicators
   ================================================================ */
.vex-hero-dots {
    position: absolute;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    display: flex;
    gap: 8px;
    align-items: center;
    padding: 6px 12px;
    border-radius: 20px;
    background: rgba(0, 0, 0, 0.25);
}

.vex-hero-dot {
    width: var(--vex-dot-size, 12px);
    height: var(--vex-dot-size, 12px);
    border: none;
    cursor: pointer;
    background: var(--vex-dot-inactive, #555555);
    transition: background 0.25s ease, transform 0.25s ease;
    padding: 0;
}

.vex-hero-dot:hover {
    transform: scale(1.2);
}

.vex-hero-dot-active {
    background: var(--vex-dot-active, #4dbfcd) !important;
}

/* Dot shapes */
.vex-hero-dot-circle {
    border-radius: 50%;
}

.vex-hero-dot-square {
    border-radius: 0;
}

.vex-hero-dot-rounded-square {
    border-radius: 3px;
}

.vex-hero-dot-diamond {
    border-radius: 0;
    transform: rotate(45deg);
    width: calc(var(--vex-dot-size, 12px) * 0.75);
    height: calc(var(--vex-dot-size, 12px) * 0.75);
}

.vex-hero-dot-diamond.vex-hero-dot-active {
    transform: rotate(45deg) scale(1.15);
}

.vex-hero-dot-diamond:hover {
    transform: rotate(45deg) scale(1.2);
}

/* ================================================================
   Entrance Animations — Panel (.vex-hero) and Carousel (.vex-hero-track)
   Applied via data attributes, triggered by JS on page load.
   ================================================================ */
.vex-hero-entrance-hidden {
    opacity: 0;
    visibility: hidden;
}

.vex-hero-enter-fade-in {
    animation: vexHeroFadeIn 0.8s ease forwards;
}
.vex-hero-enter-drop-down {
    animation: vexHeroDropDown 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
.vex-hero-enter-slide-up {
    animation: vexHeroSlideUp 0.7s ease-out forwards;
}
.vex-hero-enter-slide-left {
    animation: vexHeroSlideLeft 0.7s ease-out forwards;
}
.vex-hero-enter-zoom-in {
    animation: vexHeroZoomIn 0.6s ease-out forwards;
}
.vex-hero-enter-bounce-in {
    animation: vexHeroBounceIn 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes vexHeroFadeIn {
    from { opacity: 0; } to { opacity: 1; visibility: visible; }
}
@keyframes vexHeroDropDown {
    from { opacity: 0; transform: translateY(-60px); } to { opacity: 1; transform: translateY(0); visibility: visible; }
}
@keyframes vexHeroSlideUp {
    from { opacity: 0; transform: translateY(60px); } to { opacity: 1; transform: translateY(0); visibility: visible; }
}
@keyframes vexHeroSlideLeft {
    from { opacity: 0; transform: translateX(-60px); } to { opacity: 1; transform: translateX(0); visibility: visible; }
}
@keyframes vexHeroZoomIn {
    from { opacity: 0; transform: scale(0.7); } to { opacity: 1; transform: scale(1); visibility: visible; }
}
@keyframes vexHeroBounceIn {
    0% { opacity: 0; transform: scale(0.3); }
    50% { opacity: 1; transform: scale(1.05); }
    70% { transform: scale(0.95); }
    100% { opacity: 1; transform: scale(1); visibility: visible; }
}

/* ================================================================
   Responsive
   ================================================================ */
@media (max-width: 768px) {
    .vex-hero {
        max-height: 55vh;
        margin-bottom: 12px;
    }
    .vex-hero-track {
        max-height: 55vh;
    }
    .vex-hero-slide-active {
        max-height: 55vh;
        overflow: hidden;
    }
    .vex-hero-media {
        max-height: 55vh;
        object-fit: cover;
    }
    .vex-hero-arrow {
        padding: 6px;
    }
    .vex-hero-arrow-left {
        left: 6px;
    }
    .vex-hero-arrow-right {
        right: 6px;
    }
    .vex-hero-dots {
        bottom: 10px;
        gap: 6px;
        padding: 4px 10px;
    }
}

@media (max-width: 480px) {
    .vex-hero {
        max-height: 45vh;
        margin-bottom: 16px;
    }
    .vex-hero-track {
        max-height: 45vh;
    }
    .vex-hero-slide-active {
        max-height: 45vh;
        overflow: hidden;
    }
    .vex-hero-media {
        max-height: 45vh;
    }
    .vex-hero-arrow {
        padding: 4px;
    }
    .vex-hero-arrow svg {
        width: 24px;
        height: 24px;
    }
    iframe.vex-hero-media {
        min-height: 160px;
        max-height: 45vh;
    }
}