/**
 * Slideshow Styles
 * Responsive slideshow with Ken Burns effects and animations
 * 
 * @package Hampstead_Academy
 * @since 1.0.0
 */

/* ==========================================================================
   Slideshow Container
   ========================================================================== */

.ha-slideshow {
    position: relative;
    width: 100%;
    overflow: hidden;
    background: #000;
    border-radius: 0;
}

/* Homepage hero slideshow */
.homepage-hero-slideshow {
    height: 500px;
    max-width: 2000px;
    margin: 0 auto;
}

/* Widget slideshow */
.widget-slideshow {
    height: 300px;
    border-radius: 8px;
}

/* Sidebar slideshow */
.ha-slideshow[data-location="sidebar"] {
    height: 300px;
    border-radius: 8px;
}

/* Footer slideshow */
.ha-slideshow[data-location="footer"] {
    height: 200px;
    border-radius: 4px;
}

/* Page header slideshow */
.ha-slideshow[data-location="page-header"] {
    height: 300px;
}

/* Block slideshow - default height for Gutenberg blocks */
.ha-slideshow-block {
    height: 500px;
    width: 100vw;
    max-width: 2000px;
    margin: 0 auto;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
}

/* Ensure block slideshow breaks out of container constraints */
@media (min-width: 2001px) {
    .ha-slideshow-block {
        width: 2000px;
        margin-left: -1000px;
        margin-right: -1000px;
        left: 50%;
        right: auto;
    }
}

.ha-slideshow-container {
    position: relative;
    width: 100%;
    height: 100%;
}

/* ==========================================================================
   Individual Slides
   ========================================================================== */

.ha-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.8s ease-in-out, visibility 0.8s ease-in-out;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ha-slide.active {
    opacity: 1;
    visibility: visible;
    z-index: 2;
}

/* Single slide should always be visible */
.ha-slideshow.single-slide .ha-slide {
    opacity: 1;
    visibility: visible;
    z-index: 2;
}

.ha-slide.transitioning {
    z-index: 1;
}

/* ==========================================================================
   Slide Backgrounds
   ========================================================================== */

.ha-slide-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.ha-slide-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

/* Responsive image handling for desktop/mobile specific images */
.ha-slide-image-desktop {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

.ha-slide-image-mobile {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: none;
}

/* Show mobile image on mobile devices */
@media (max-width: 768px) {
    .ha-slide-image-desktop {
        display: none;
    }
    
    .ha-slide-image-mobile {
        display: block;
    }
}

.ha-slide-color-bg,
.ha-slide-gradient-bg {
    width: 100%;
    height: 100%;
}

.ha-slide-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.3);
    z-index: 2;
}

/* ==========================================================================
   Enhanced Overlay Types
   ========================================================================== */

/* Solid overlay - uses inline background-color from PHP */
.ha-slide-overlay.ha-overlay-solid {
    /* Background color set via inline styles */
}

/* Gradient overlay - uses inline background from PHP */
.ha-slide-overlay.ha-overlay-gradient {
    /* Background gradient set via inline styles */
}

/* Responsive gradient overlays */
@media (max-width: 768px) {
    .ha-slide-overlay.ha-overlay-gradient[style*="--mobile-gradient"] {
        background: var(--mobile-gradient) !important;
    }
}

/* ==========================================================================
   Texture Overlays
   ========================================================================== */

/* Noise texture */
.ha-slide-overlay.ha-texture-noise::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: 
        radial-gradient(circle at 20% 80%, transparent 0%, transparent 50%, rgba(255,255,255,0.03) 50.5%, rgba(255,255,255,0.03) 100%),
        radial-gradient(circle at 80% 20%, transparent 0%, transparent 50%, rgba(255,255,255,0.03) 50.5%, rgba(255,255,255,0.03) 100%),
        radial-gradient(circle at 40% 40%, transparent 0%, transparent 50%, rgba(255,255,255,0.03) 50.5%, rgba(255,255,255,0.03) 100%);
    background-size: 3px 3px, 5px 5px, 7px 7px;
    opacity: 0.8;
    pointer-events: none;
}

/* Paper texture */
.ha-slide-overlay.ha-texture-paper::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: 
        linear-gradient(45deg, transparent 40%, rgba(255,255,255,0.02) 40%, rgba(255,255,255,0.02) 60%, transparent 60%),
        linear-gradient(-45deg, transparent 40%, rgba(255,255,255,0.02) 40%, rgba(255,255,255,0.02) 60%, transparent 60%);
    background-size: 8px 8px, 12px 12px;
    opacity: 0.6;
    pointer-events: none;
}

/* Canvas texture */
.ha-slide-overlay.ha-texture-canvas::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: 
        repeating-linear-gradient(0deg, transparent, transparent 1px, rgba(255,255,255,0.02) 1px, rgba(255,255,255,0.02) 2px),
        repeating-linear-gradient(90deg, transparent, transparent 1px, rgba(255,255,255,0.02) 1px, rgba(255,255,255,0.02) 2px);
    background-size: 4px 4px;
    opacity: 0.7;
    pointer-events: none;
}

/* Film grain texture */
.ha-slide-overlay.ha-texture-grain::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: 
        radial-gradient(circle at 25% 25%, rgba(255,255,255,0.04) 0%, transparent 50%),
        radial-gradient(circle at 75% 75%, rgba(255,255,255,0.04) 0%, transparent 50%),
        radial-gradient(circle at 75% 25%, rgba(255,255,255,0.04) 0%, transparent 50%),
        radial-gradient(circle at 25% 75%, rgba(255,255,255,0.04) 0%, transparent 50%);
    background-size: 2px 2px, 3px 3px, 4px 4px, 5px 5px;
    background-position: 0 0, 1px 1px, 2px 2px, 3px 3px;
    opacity: 0.9;
    pointer-events: none;
}

/* Dot pattern texture */
.ha-slide-overlay.ha-texture-dots::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: 
        radial-gradient(circle at center, rgba(255,255,255,0.05) 1px, transparent 1px);
    background-size: 8px 8px;
    opacity: 0.8;
    pointer-events: none;
}

/* Line pattern texture */
.ha-slide-overlay.ha-texture-lines::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: 
        repeating-linear-gradient(45deg, transparent, transparent 2px, rgba(255,255,255,0.03) 2px, rgba(255,255,255,0.03) 4px);
    background-size: 6px 6px;
    opacity: 0.7;
    pointer-events: none;
}

/* ==========================================================================
   Responsive Texture Adjustments
   ========================================================================== */

@media (max-width: 768px) {
    /* Reduce texture intensity on mobile for better performance */
    .ha-slide-overlay.ha-texture-noise::after,
    .ha-slide-overlay.ha-texture-paper::after,
    .ha-slide-overlay.ha-texture-canvas::after,
    .ha-slide-overlay.ha-texture-grain::after,
    .ha-slide-overlay.ha-texture-dots::after,
    .ha-slide-overlay.ha-texture-lines::after {
        opacity: 0.5;
    }
    
    /* Simplify complex textures on mobile */
    .ha-slide-overlay.ha-texture-grain::after {
        background-image: 
            radial-gradient(circle at 25% 25%, rgba(255,255,255,0.04) 0%, transparent 50%),
            radial-gradient(circle at 75% 75%, rgba(255,255,255,0.04) 0%, transparent 50%);
        background-size: 3px 3px, 4px 4px;
    }
}

/* ==========================================================================
   Accessibility and Performance
   ========================================================================== */

/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
    .ha-slide-overlay::after {
        animation: none !important;
    }
}

/* High contrast mode adjustments */
@media (prefers-contrast: high) {
    .ha-slide-overlay.ha-texture-noise::after,
    .ha-slide-overlay.ha-texture-paper::after,
    .ha-slide-overlay.ha-texture-canvas::after,
    .ha-slide-overlay.ha-texture-grain::after,
    .ha-slide-overlay.ha-texture-dots::after,
    .ha-slide-overlay.ha-texture-lines::after {
        opacity: 0.3;
    }
}

/* ==========================================================================
   Ken Burns Effects
   ========================================================================== */

/* Ken Burns - Zoom In */
.ha-slide[data-ken-burns="slow"][data-ken-burns-direction="zoom-in"] .ha-slide-image,
.ha-slide[data-ken-burns="slow"][data-ken-burns-direction="zoom-in"] .ha-slide-image-desktop,
.ha-slide[data-ken-burns="slow"][data-ken-burns-direction="zoom-in"] .ha-slide-image-mobile {
    animation: kenBurnsZoomIn 15s ease-out infinite;
}

.ha-slide[data-ken-burns="medium"][data-ken-burns-direction="zoom-in"] .ha-slide-image,
.ha-slide[data-ken-burns="medium"][data-ken-burns-direction="zoom-in"] .ha-slide-image-desktop,
.ha-slide[data-ken-burns="medium"][data-ken-burns-direction="zoom-in"] .ha-slide-image-mobile {
    animation: kenBurnsZoomIn 10s ease-out infinite;
}

.ha-slide[data-ken-burns="fast"][data-ken-burns-direction="zoom-in"] .ha-slide-image,
.ha-slide[data-ken-burns="fast"][data-ken-burns-direction="zoom-in"] .ha-slide-image-desktop,
.ha-slide[data-ken-burns="fast"][data-ken-burns-direction="zoom-in"] .ha-slide-image-mobile {
    animation: kenBurnsZoomIn 5s ease-out infinite;
}

/* Ken Burns - Zoom Out */
.ha-slide[data-ken-burns="slow"][data-ken-burns-direction="zoom-out"] .ha-slide-image,
.ha-slide[data-ken-burns="slow"][data-ken-burns-direction="zoom-out"] .ha-slide-image-desktop,
.ha-slide[data-ken-burns="slow"][data-ken-burns-direction="zoom-out"] .ha-slide-image-mobile {
    animation: kenBurnsZoomOut 15s ease-out infinite;
}

.ha-slide[data-ken-burns="medium"][data-ken-burns-direction="zoom-out"] .ha-slide-image,
.ha-slide[data-ken-burns="medium"][data-ken-burns-direction="zoom-out"] .ha-slide-image-desktop,
.ha-slide[data-ken-burns="medium"][data-ken-burns-direction="zoom-out"] .ha-slide-image-mobile {
    animation: kenBurnsZoomOut 10s ease-out infinite;
}

.ha-slide[data-ken-burns="fast"][data-ken-burns-direction="zoom-out"] .ha-slide-image,
.ha-slide[data-ken-burns="fast"][data-ken-burns-direction="zoom-out"] .ha-slide-image-desktop,
.ha-slide[data-ken-burns="fast"][data-ken-burns-direction="zoom-out"] .ha-slide-image-mobile {
    animation: kenBurnsZoomOut 5s ease-out infinite;
}

/* Ken Burns - Zoom In Left */
.ha-slide[data-ken-burns="slow"][data-ken-burns-direction="zoom-in-left"] .ha-slide-image,
.ha-slide[data-ken-burns="slow"][data-ken-burns-direction="zoom-in-left"] .ha-slide-image-desktop,
.ha-slide[data-ken-burns="slow"][data-ken-burns-direction="zoom-in-left"] .ha-slide-image-mobile {
    animation: kenBurnsZoomInLeft 15s ease-out infinite;
}

.ha-slide[data-ken-burns="medium"][data-ken-burns-direction="zoom-in-left"] .ha-slide-image,
.ha-slide[data-ken-burns="medium"][data-ken-burns-direction="zoom-in-left"] .ha-slide-image-desktop,
.ha-slide[data-ken-burns="medium"][data-ken-burns-direction="zoom-in-left"] .ha-slide-image-mobile {
    animation: kenBurnsZoomInLeft 10s ease-out infinite;
}

.ha-slide[data-ken-burns="fast"][data-ken-burns-direction="zoom-in-left"] .ha-slide-image,
.ha-slide[data-ken-burns="fast"][data-ken-burns-direction="zoom-in-left"] .ha-slide-image-desktop,
.ha-slide[data-ken-burns="fast"][data-ken-burns-direction="zoom-in-left"] .ha-slide-image-mobile {
    animation: kenBurnsZoomInLeft 5s ease-out infinite;
}

/* Ken Burns - Zoom In Right */
.ha-slide[data-ken-burns="slow"][data-ken-burns-direction="zoom-in-right"] .ha-slide-image,
.ha-slide[data-ken-burns="slow"][data-ken-burns-direction="zoom-in-right"] .ha-slide-image-desktop,
.ha-slide[data-ken-burns="slow"][data-ken-burns-direction="zoom-in-right"] .ha-slide-image-mobile {
    animation: kenBurnsZoomInRight 15s ease-out infinite;
}

.ha-slide[data-ken-burns="medium"][data-ken-burns-direction="zoom-in-right"] .ha-slide-image,
.ha-slide[data-ken-burns="medium"][data-ken-burns-direction="zoom-in-right"] .ha-slide-image-desktop,
.ha-slide[data-ken-burns="medium"][data-ken-burns-direction="zoom-in-right"] .ha-slide-image-mobile {
    animation: kenBurnsZoomInRight 10s ease-out infinite;
}

.ha-slide[data-ken-burns="fast"][data-ken-burns-direction="zoom-in-right"] .ha-slide-image,
.ha-slide[data-ken-burns="fast"][data-ken-burns-direction="zoom-in-right"] .ha-slide-image-desktop,
.ha-slide[data-ken-burns="fast"][data-ken-burns-direction="zoom-in-right"] .ha-slide-image-mobile {
    animation: kenBurnsZoomInRight 5s ease-out infinite;
}

/* Ken Burns - Zoom Out Left */
.ha-slide[data-ken-burns="slow"][data-ken-burns-direction="zoom-out-left"] .ha-slide-image,
.ha-slide[data-ken-burns="slow"][data-ken-burns-direction="zoom-out-left"] .ha-slide-image-desktop,
.ha-slide[data-ken-burns="slow"][data-ken-burns-direction="zoom-out-left"] .ha-slide-image-mobile {
    animation: kenBurnsZoomOutLeft 15s ease-out infinite;
}

.ha-slide[data-ken-burns="medium"][data-ken-burns-direction="zoom-out-left"] .ha-slide-image,
.ha-slide[data-ken-burns="medium"][data-ken-burns-direction="zoom-out-left"] .ha-slide-image-desktop,
.ha-slide[data-ken-burns="medium"][data-ken-burns-direction="zoom-out-left"] .ha-slide-image-mobile {
    animation: kenBurnsZoomOutLeft 10s ease-out infinite;
}

.ha-slide[data-ken-burns="fast"][data-ken-burns-direction="zoom-out-left"] .ha-slide-image,
.ha-slide[data-ken-burns="fast"][data-ken-burns-direction="zoom-out-left"] .ha-slide-image-desktop,
.ha-slide[data-ken-burns="fast"][data-ken-burns-direction="zoom-out-left"] .ha-slide-image-mobile {
    animation: kenBurnsZoomOutLeft 5s ease-out infinite;
}

/* Ken Burns - Zoom Out Right */
.ha-slide[data-ken-burns="slow"][data-ken-burns-direction="zoom-out-right"] .ha-slide-image,
.ha-slide[data-ken-burns="slow"][data-ken-burns-direction="zoom-out-right"] .ha-slide-image-desktop,
.ha-slide[data-ken-burns="slow"][data-ken-burns-direction="zoom-out-right"] .ha-slide-image-mobile {
    animation: kenBurnsZoomOutRight 15s ease-out infinite;
}

.ha-slide[data-ken-burns="medium"][data-ken-burns-direction="zoom-out-right"] .ha-slide-image,
.ha-slide[data-ken-burns="medium"][data-ken-burns-direction="zoom-out-right"] .ha-slide-image-desktop,
.ha-slide[data-ken-burns="medium"][data-ken-burns-direction="zoom-out-right"] .ha-slide-image-mobile {
    animation: kenBurnsZoomOutRight 10s ease-out infinite;
}

.ha-slide[data-ken-burns="fast"][data-ken-burns-direction="zoom-out-right"] .ha-slide-image,
.ha-slide[data-ken-burns="fast"][data-ken-burns-direction="zoom-out-right"] .ha-slide-image-desktop,
.ha-slide[data-ken-burns="fast"][data-ken-burns-direction="zoom-out-right"] .ha-slide-image-mobile {
    animation: kenBurnsZoomOutRight 5s ease-out infinite;
}

/* ==========================================================================
   Ken Burns Keyframes
   ========================================================================== */

@keyframes kenBurnsZoomIn {
    0% {
        transform: scale(1);
    }
    100% {
        transform: scale(1.2);
    }
}

@keyframes kenBurnsZoomOut {
    0% {
        transform: scale(1.2);
    }
    100% {
        transform: scale(1);
    }
}

@keyframes kenBurnsZoomInLeft {
    0% {
        transform: scale(1) translateX(0);
    }
    100% {
        transform: scale(1.2) translateX(-5%);
    }
}

@keyframes kenBurnsZoomInRight {
    0% {
        transform: scale(1) translateX(0);
    }
    100% {
        transform: scale(1.2) translateX(5%);
    }
}

@keyframes kenBurnsZoomOutLeft {
    0% {
        transform: scale(1.2) translateX(-5%);
    }
    100% {
        transform: scale(1) translateX(0);
    }
}

@keyframes kenBurnsZoomOutRight {
    0% {
        transform: scale(1.2) translateX(5%);
    }
    100% {
        transform: scale(1) translateX(0);
    }
}

/* ==========================================================================
   Slide Content
   ========================================================================== */

.ha-slide-content {
    position: relative;
    z-index: 3;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    box-sizing: border-box;
}

.ha-slide-content-inner {
    max-width: 800px;
    width: 100%;
    text-align: center;
}

/* Layout variations */
.ha-slide.layout-left-aligned .ha-slide-content {
    justify-content: flex-start;
}

.ha-slide.layout-left-aligned .ha-slide-content-inner {
    text-align: left;
    max-width: 600px;
}

.ha-slide.layout-right-aligned .ha-slide-content {
    justify-content: flex-end;
    padding-right: 2rem;
    padding-left: 50%;
}

.ha-slide.layout-right-aligned .ha-slide-content-inner {
    text-align: center;
    max-width: none;
    width: 100%;
    margin-left: 0;
    margin-right: 0;
    position: relative;
    right: 0;
}

.ha-slide.layout-minimal .ha-slide-content-inner {
    max-width: 500px;
}

.ha-slide.layout-overlay-bottom .ha-slide-content {
    align-items: flex-end;
    background: linear-gradient(transparent 0%, rgba(0, 0, 0, 0.7) 100%);
}

.ha-slide.layout-overlay-bottom .ha-slide-content-inner {
    text-align: left;
    max-width: 100%;
}

/* Mobile-bottom layout styles are defined in the mobile media query section below */

/* ==========================================================================
   Typography
   ========================================================================== */

.ha-slide-title {
    margin: 0 0 1rem 0;
    font-weight: 700;
    line-height: 1.1;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

.ha-slide-subtitle {
    margin: 0 0 1.5rem 0;
    font-weight: 500;
    line-height: 1.3;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}

.ha-slide-description {
    margin: 0 0 2rem 0;
    line-height: 1.6;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}

.ha-slide-cta {
    margin-top: 2rem;
}

.ha-slide-cta-button {
    display: inline-block;
    padding: 1rem 2rem;
    border: none;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 600;
    font-size: 1rem;
    transition: all 0.3s ease;
    cursor: pointer;
    text-shadow: none;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.ha-slide-cta-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
    text-decoration: none;
}

.ha-slide-cta-button:focus {
    outline: 2px solid rgba(255, 255, 255, 0.5);
    outline-offset: 2px;
}

/* ==========================================================================
   Text Animations
   ========================================================================== */

.ha-slide.active [data-animation] {
    animation-fill-mode: both;
}

/* Fade In */
.ha-slide.active [data-animation="fade-in"] {
    animation: fadeIn 1s ease-out;
}

.ha-slide.active [data-animation="fade-in"][data-animation-delay="0.2s"] {
    animation-delay: 0.2s;
}

.ha-slide.active [data-animation="fade-in"][data-animation-delay="0.4s"] {
    animation-delay: 0.4s;
}

.ha-slide.active [data-animation="fade-in"][data-animation-delay="0.6s"] {
    animation-delay: 0.6s;
}

/* Slide Up */
.ha-slide.active [data-animation="slide-up"] {
    animation: slideUp 1s ease-out;
}

.ha-slide.active [data-animation="slide-up"][data-animation-delay="0.2s"] {
    animation-delay: 0.2s;
}

.ha-slide.active [data-animation="slide-up"][data-animation-delay="0.4s"] {
    animation-delay: 0.4s;
}

.ha-slide.active [data-animation="slide-up"][data-animation-delay="0.6s"] {
    animation-delay: 0.6s;
}

/* Slide Down */
.ha-slide.active [data-animation="slide-down"] {
    animation: slideDown 1s ease-out;
}

.ha-slide.active [data-animation="slide-down"][data-animation-delay="0.2s"] {
    animation-delay: 0.2s;
}

.ha-slide.active [data-animation="slide-down"][data-animation-delay="0.4s"] {
    animation-delay: 0.4s;
}

.ha-slide.active [data-animation="slide-down"][data-animation-delay="0.6s"] {
    animation-delay: 0.6s;
}

/* Slide Left */
.ha-slide.active [data-animation="slide-left"] {
    animation: slideLeft 1s ease-out;
}

.ha-slide.active [data-animation="slide-left"][data-animation-delay="0.2s"] {
    animation-delay: 0.2s;
}

.ha-slide.active [data-animation="slide-left"][data-animation-delay="0.4s"] {
    animation-delay: 0.4s;
}

.ha-slide.active [data-animation="slide-left"][data-animation-delay="0.6s"] {
    animation-delay: 0.6s;
}

/* Slide Right */
.ha-slide.active [data-animation="slide-right"] {
    animation: slideRight 1s ease-out;
}

.ha-slide.active [data-animation="slide-right"][data-animation-delay="0.2s"] {
    animation-delay: 0.2s;
}

.ha-slide.active [data-animation="slide-right"][data-animation-delay="0.4s"] {
    animation-delay: 0.4s;
}

.ha-slide.active [data-animation="slide-right"][data-animation-delay="0.6s"] {
    animation-delay: 0.6s;
}

/* Bounce */
.ha-slide.active [data-animation="bounce"] {
    animation: bounce 1.2s ease-out;
}

.ha-slide.active [data-animation="bounce"][data-animation-delay="0.2s"] {
    animation-delay: 0.2s;
}

.ha-slide.active [data-animation="bounce"][data-animation-delay="0.4s"] {
    animation-delay: 0.4s;
}

.ha-slide.active [data-animation="bounce"][data-animation-delay="0.6s"] {
    animation-delay: 0.6s;
}

/* Typewriter */
.ha-slide.active [data-animation="typewriter"] {
    animation: typewriter 2s steps(40) 1s both;
    overflow: hidden;
    white-space: nowrap;
    border-right: 2px solid;
    animation-fill-mode: both;
}

/* ==========================================================================
   Animation Keyframes
   ========================================================================== */

@keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@keyframes slideUp {
    0% {
        opacity: 0;
        transform: translateY(30px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideDown {
    0% {
        opacity: 0;
        transform: translateY(-30px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideLeft {
    0% {
        opacity: 0;
        transform: translateX(30px);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slideRight {
    0% {
        opacity: 0;
        transform: translateX(-30px);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes bounce {
    0%, 20%, 53%, 80%, 100% {
        animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
        transform: translate3d(0, 0, 0);
        opacity: 1;
    }
    40%, 43% {
        animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
        transform: translate3d(0, -30px, 0);
    }
    70% {
        animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
        transform: translate3d(0, -15px, 0);
    }
    90% {
        transform: translate3d(0, -4px, 0);
    }
}

@keyframes typewriter {
    0% {
        width: 0;
    }
    100% {
        width: 100%;
    }
}

/* ==========================================================================
   Navigation
   ========================================================================== */

.ha-slideshow-navigation {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    z-index: 4;
    pointer-events: none;
    transform: translateY(-50%);
}

.ha-slideshow-prev,
.ha-slideshow-next {
    position: absolute;
    top: 0;
    background: rgba(255, 255, 255, 0.9);
    border: none;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    pointer-events: auto;
    color: #333;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.ha-slideshow-prev:hover,
.ha-slideshow-next:hover {
    background: rgba(255, 255, 255, 1);
    transform: scale(1.1);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}

.ha-slideshow-prev:focus,
.ha-slideshow-next:focus {
    outline: 2px solid rgba(255, 255, 255, 0.8);
    outline-offset: 2px;
}

.ha-slideshow-prev {
    left: 20px;
}

.ha-slideshow-next {
    right: 20px;
}

.ha-slideshow-prev svg,
.ha-slideshow-next svg {
    width: 24px;
    height: 24px;
}

/* ==========================================================================
   Dots Navigation
   ========================================================================== */

.ha-slideshow-dots {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 10px;
    z-index: 4;
}

.ha-slideshow-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.7);
    background: transparent;
    cursor: pointer;
    transition: all 0.3s ease;
}

.ha-slideshow-dot:hover,
.ha-slideshow-dot.active {
    background: rgba(255, 255, 255, 0.9);
    border-color: rgba(255, 255, 255, 1);
}

.ha-slideshow-dot:focus {
    outline: 2px solid rgba(255, 255, 255, 0.8);
    outline-offset: 2px;
}

/* ==========================================================================
   Transition Effects
   ========================================================================== */

/* Fade transition (default) */
.ha-slideshow[data-transition="fade"] .ha-slide {
    transition: opacity 0.8s ease-in-out, visibility 0.8s ease-in-out;
}

/* Slide transition */
.ha-slideshow[data-transition="slide"] .ha-slide {
    transition: transform 0.8s ease-in-out, opacity 0.8s ease-in-out, visibility 0.8s ease-in-out;
}

.ha-slideshow[data-transition="slide"] .ha-slide:not(.active) {
    transform: translateX(100%);
}

.ha-slideshow[data-transition="slide"] .ha-slide.slide-prev {
    transform: translateX(-100%);
}

/* Zoom transition */
.ha-slideshow[data-transition="zoom"] .ha-slide {
    transition: transform 0.8s ease-in-out, opacity 0.8s ease-in-out, visibility 0.8s ease-in-out;
}

.ha-slideshow[data-transition="zoom"] .ha-slide:not(.active) {
    transform: scale(0.8);
}

/* ==========================================================================
   Responsive Design
   ========================================================================== */

/* Tablet styles */
@media (max-width: 1024px) {
    .homepage-hero-slideshow {
        height: 400px;
    }
    
    .ha-slide-content {
        padding: 1.5rem;
    }
    
    .ha-slide-title {
        font-size: 2.5rem;
    }
    
    .ha-slide-subtitle {
        font-size: 1.5rem;
    }
    
    .ha-slide-description {
        font-size: 1rem;
    }
    
    .ha-slideshow-prev,
    .ha-slideshow-next {
        width: 45px;
        height: 45px;
    }
    
    .ha-slideshow-prev {
        left: 15px;
    }
    
    .ha-slideshow-next {
        right: 15px;
    }
}

/* Mobile styles */
@media (max-width: 768px) {
    .homepage-hero-slideshow {
        height: 450px;
        max-width: 600px;
    }
    
    .ha-slide-content {
        padding: 1rem;
    }
    
    .ha-slide-content-inner {
        max-width: 100%;
    }
    
    .ha-slide.layout-left-aligned .ha-slide-content-inner,
    .ha-slide.layout-right-aligned .ha-slide-content-inner {
        text-align: center;
        max-width: 100%;
        width: 100%;
        right: 0;
    }
    
    .ha-slide.layout-left-aligned .ha-slide-content,
    .ha-slide.layout-right-aligned .ha-slide-content {
        justify-content: center;
        padding-right: 1rem;
        padding-left: 1rem;
    }
    
    /* Mobile-bottom layout stays at bottom on mobile */
    .ha-slide.layout-mobile-bottom .ha-slide-content {
        align-items: flex-end;
        justify-content: center;
        padding: 1rem;
        background: linear-gradient(transparent 0%, rgba(0, 0, 0, 0.7) 100%);
    }
    
    .ha-slide.layout-mobile-bottom .ha-slide-content-inner {
        text-align: center;
        max-width: 100%;
        padding-bottom: 1rem;
    }
    
    /* Mobile Typography - Use CSS Custom Properties for Mobile-Specific Styling */
    .ha-slide-title {
        font-size: var(--title-font-size-mobile, 2rem) !important;
        font-weight: var(--title-font-weight-mobile, 700) !important;
        color: var(--title-color-mobile, inherit) !important;
        font-family: var(--title-font-family-mobile, inherit) !important;
        margin-bottom: var(--title-margin-bottom-mobile, 0.75rem) !important;
    }
    
    .ha-slide-subtitle {
        font-size: var(--subtitle-font-size-mobile, 1.25rem) !important;
        font-weight: var(--subtitle-font-weight-mobile, 500) !important;
        color: var(--subtitle-color-mobile, inherit) !important;
        font-family: var(--subtitle-font-family-mobile, inherit) !important;
        margin-bottom: var(--subtitle-margin-bottom-mobile, 1rem) !important;
    }
    
    .ha-slide-description {
        font-size: var(--description-font-size-mobile, 0.95rem) !important;
        font-weight: var(--description-font-weight-mobile, 400) !important;
        color: var(--description-color-mobile, inherit) !important;
        font-family: var(--description-font-family-mobile, inherit) !important;
        margin-bottom: var(--description-margin-bottom-mobile, 1.5rem) !important;
    }
    
    .ha-slide-cta-button {
        padding: 0.875rem 1.75rem;
        font-size: var(--cta-font-size-mobile, 0.95rem) !important;
        font-weight: var(--cta-font-weight-mobile, 600) !important;
        color: var(--cta-color-mobile, inherit) !important;
        background-color: var(--cta-bg-color-mobile, inherit) !important;
        font-family: var(--cta-font-family-mobile, inherit) !important;
    }
    
    .ha-slideshow-prev,
    .ha-slideshow-next {
        width: 40px;
        height: 40px;
    }
    
    .ha-slideshow-prev {
        left: 10px;
    }
    
    .ha-slideshow-next {
        right: 10px;
    }
    
    .ha-slideshow-prev svg,
    .ha-slideshow-next svg {
        width: 20px;
        height: 20px;
    }
    
    .ha-slideshow-dots {
        bottom: 15px;
    }
    
    .ha-slideshow-dot {
        width: 10px;
        height: 10px;
    }
    
    /* Widget and sidebar slideshows on mobile */
    .widget-slideshow,
    .ha-slideshow[data-location="sidebar"] {
        height: 225px;
    }
    
    .ha-slideshow[data-location="footer"] {
        height: 150px;
    }
    
    .ha-slideshow[data-location="page-header"] {
        height: 200px;
    }
}

/* Small mobile styles */
@media (max-width: 480px) {
    .homepage-hero-slideshow {
        height: 350px;
    }
    
    .ha-slide-title {
        font-size: 1.75rem;
    }
    
    .ha-slide-subtitle {
        font-size: 1.125rem;
    }
    
    .ha-slide-description {
        font-size: 0.9rem;
    }
    
    .ha-slide-cta-button {
        padding: 0.75rem 1.5rem;
        font-size: 0.9rem;
    }
}

/* ==========================================================================
   Accessibility
   ========================================================================== */

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    .ha-slide,
    .ha-slideshow-prev,
    .ha-slideshow-next,
    .ha-slideshow-dot,
    .ha-slide-cta-button,
    .ha-slide [data-animation] {
        transition: none !important;
        animation: none !important;
    }
    
    .ha-slide-image {
        animation: none !important;
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .ha-slideshow-prev,
    .ha-slideshow-next {
        background: #fff;
        color: #000;
        border: 2px solid #000;
    }
    
    .ha-slideshow-dot {
        border-color: #fff;
        background: transparent;
    }
    
    .ha-slideshow-dot.active {
        background: #fff;
    }
    
    .ha-slide-overlay {
        background: rgba(0, 0, 0, 0.7);
    }
}

/* Focus visible support */
.ha-slideshow-prev:focus-visible,
.ha-slideshow-next:focus-visible,
.ha-slideshow-dot:focus-visible,
.ha-slide-cta-button:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

/* ==========================================================================
   Loading States
   ========================================================================== */

.ha-slideshow.loading {
    background: #f0f0f0;
}

.ha-slideshow.loading::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 40px;
    height: 40px;
    margin: -20px 0 0 -20px;
    border: 3px solid #ddd;
    border-top-color: #666;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    z-index: 5;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* ==========================================================================
   Print Styles
   ========================================================================== */

@media print {
    .ha-slideshow {
        height: auto !important;
        overflow: visible !important;
    }
    
    .ha-slide {
        position: static !important;
        opacity: 1 !important;
        visibility: visible !important;
        page-break-inside: avoid;
        margin-bottom: 2rem;
    }
    
    .ha-slide:not(.active) {
        display: none;
    }
    
    .ha-slideshow-navigation,
    .ha-slideshow-dots {
        display: none !important;
    }
    
    .ha-slide-background {
        position: static;
    }
    
    .ha-slide-image {
        max-height: 300px;
        width: auto;
        margin: 0 auto;
        display: block;
    }
}