/* Hero Component Styles */

/* Hero UID Variables - Admin Panel Control */
:root {
    /* Hero Section Layout */
    --hero-position: relative;
    --hero-min-height: 70vh;
    --hero-min-height-mobile: 60vh;
    --hero-min-height-tablet: 65vh;
    --hero-display: flex;
    --hero-align-items: center;
    --hero-justify-content: center;
    --hero-overflow: hidden;
    
    /* Hero Background */
    --hero-background-gradient: linear-gradient(135deg, #0f172a 0%, #1e293b 25%, #334155 50%, #475569 75%, #64748b 100%);
    --hero-background-color-1: #0f172a;
    --hero-background-color-2: #1e293b;
    --hero-background-color-3: #334155;
    --hero-background-color-4: #475569;
    --hero-background-color-5: #64748b;
    
    /* Hero Before Overlay */
    --hero-overlay-content: '';
    --hero-overlay-position: absolute;
    --hero-overlay-top: 0;
    --hero-overlay-left: 0;
    --hero-overlay-right: 0;
    --hero-overlay-bottom: 0;
    --hero-overlay-opacity: 0.3;
    --hero-overlay-z-index: 0;
    --hero-overlay-grid-stroke: rgba(255,255,255,0.1);
    --hero-overlay-grid-stroke-width: 0.5;
    
    /* Hero Logo Background */
    --hero-logo-bg-position: absolute;
    --hero-logo-bg-top: 50%;
    --hero-logo-bg-left: 50%;
    --hero-logo-bg-width: 800px;
    --hero-logo-bg-height: 800px;
    --hero-logo-bg-size: contain;
    --hero-logo-bg-repeat: no-repeat;
    --hero-logo-bg-position-center: center;
    --hero-logo-bg-opacity: 0.25;
    --hero-logo-bg-transform: translate(-50%, -50%);
    --hero-logo-bg-z-index: 1;
    --hero-logo-bg-pointer-events: none;
    --hero-logo-bg-animation: rotateY 15s linear infinite;
    --hero-logo-bg-image: url('assets/images/pdl_assets/icon/png-300dpi/pdl-logo-reverse-icon.png');
    
    /* Hero Page Identity Icon Variables */
    --hero-page-identity-position: absolute;
    --hero-page-identity-top: 2rem;
    --hero-page-identity-right: 2rem;
    --hero-page-identity-z-index: 5;
    --hero-page-identity-animation: fadeInScale 1s ease-out 0.5s both;
    --hero-page-identity-icon-width: 61px;
    --hero-page-identity-icon-height: 61px;
    --hero-page-identity-icon-background: linear-gradient(135deg, rgba(124, 58, 237, 0.9) 0%, rgba(99, 102, 241, 0.9) 100%);
    --hero-page-identity-icon-border-radius: 50%;
    --hero-page-identity-icon-font-size: 25px;
    --hero-page-identity-icon-border: 3px solid rgba(124, 58, 237, 0.4);
    --hero-page-identity-icon-box-shadow: 0 8px 25px rgba(124, 58, 237, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.2);
    --hero-page-identity-icon-box-shadow-hover: 0 12px 35px rgba(124, 58, 237, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.3);
    --hero-page-identity-icon-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --hero-page-identity-icon-backdrop-filter: blur(10px);
    --hero-page-identity-icon-transform-hover: scale(1.1) rotate(5deg);
    --hero-page-identity-tablet-top: 1.5rem;
    --hero-page-identity-tablet-right: 1.5rem;
    --hero-page-identity-tablet-width: 46px;
    --hero-page-identity-tablet-height: 46px;
    --hero-page-identity-tablet-font-size: 19px;
    --hero-page-identity-tablet-border-width: 2px;
    --hero-page-identity-mobile-top: 1rem;
    --hero-page-identity-mobile-right: 1rem;
    --hero-page-identity-mobile-width: 38px;
    --hero-page-identity-mobile-height: 38px;
    --hero-page-identity-mobile-font-size: 15px;
    
    /* Hero Container */
    --hero-container-position: relative;
    --hero-container-z-index: 2;
    --hero-container-margin: 0 auto;
    --hero-container-text-align: center;
    --hero-container-padding-desktop: 0 var(--space-8);
    
    /* Hero Content */
    --hero-content-max-width: 800px;
    --hero-content-margin: 0 auto;
    --hero-content-padding-top: var(--space-8);
    
    /* Hero Badge */
    --hero-badge-display: inline-flex;
    --hero-badge-align-items: center;
    --hero-badge-gap: var(--space-2);
    --hero-badge-padding: var(--space-2) var(--space-4);
    --hero-badge-background: rgba(255, 255, 255, 0.1);
    --hero-badge-border: 1px solid rgba(255, 255, 255, 0.2);
    --hero-badge-border-radius: var(--radius-full);
    --hero-badge-color: rgba(255, 255, 255, 0.9);
    --hero-badge-font-size: var(--text-sm);
    --hero-badge-font-weight: var(--font-medium);
    --hero-badge-margin-bottom: var(--space-6);
    --hero-badge-backdrop-filter: blur(10px);
    --hero-badge-icon-color: var(--accent-color);
    
    /* Hero Title */
    --hero-title-font-size: var(--text-5xl);
    --hero-title-font-size-mobile: var(--text-4xl);
    --hero-title-font-size-tablet: var(--text-5xl);
    --hero-title-font-size-desktop: var(--text-6xl);
    --hero-title-font-weight: var(--font-bold);
    --hero-title-color: var(--text-inverse);
    --hero-title-margin-bottom: var(--space-6);
    --hero-title-line-height: 1.1;
    --hero-title-highlight-background: linear-gradient(135deg, var(--primary-light), var(--accent-light));
    --hero-title-highlight-clip: text;
    --hero-title-highlight-fill: transparent;
    
    /* Hero Subtitle */
    --hero-subtitle-font-size: var(--text-xl);
    --hero-subtitle-font-size-mobile: var(--text-lg);
    --hero-subtitle-font-size-tablet: var(--text-lg);
    --hero-subtitle-color: rgba(255, 255, 255, 0.8);
    --hero-subtitle-margin-bottom: var(--space-8);
    --hero-subtitle-line-height: 1.6;
    --hero-subtitle-max-width: 600px;
    --hero-subtitle-max-width-tablet: 500px;
    --hero-subtitle-margin-left: auto;
    --hero-subtitle-margin-right: auto;
    
    /* Hero Actions */
    --hero-actions-display: flex;
    --hero-actions-flex-wrap: wrap;
    --hero-actions-gap: var(--space-4);
    --hero-actions-justify-content: center;
    --hero-actions-margin-bottom: var(--space-12);
    --hero-actions-flex-direction-mobile: column;
    --hero-actions-align-items-mobile: center;
    
    /* Hero CTA Primary */
    --hero-cta-display: inline-flex;
    --hero-cta-align-items: center;
    --hero-cta-gap: var(--space-2);
    --hero-cta-padding: var(--space-4) var(--space-8);
    --hero-cta-background: var(--primary-gradient);
    --hero-cta-color: var(--text-inverse);
    --hero-cta-text-decoration: none;
    --hero-cta-font-weight: var(--font-semibold);
    --hero-cta-border-radius: var(--radius-xl);
    --hero-cta-box-shadow: var(--shadow-xl);
    --hero-cta-box-shadow-hover: var(--shadow-2xl);
    --hero-cta-transition: all var(--transition-base);
    --hero-cta-transform-hover: translateY(-3px);
    
    /* Hero CTA Secondary */
    --hero-cta-secondary-display: inline-flex;
    --hero-cta-secondary-align-items: center;
    --hero-cta-secondary-gap: var(--space-2);
    --hero-cta-secondary-padding: var(--space-4) var(--space-8);
    --hero-cta-secondary-background: rgba(255, 255, 255, 0.1);
    --hero-cta-secondary-background-hover: rgba(255, 255, 255, 0.2);
    --hero-cta-secondary-color: var(--text-inverse);
    --hero-cta-secondary-text-decoration: none;
    --hero-cta-secondary-font-weight: var(--font-semibold);
    --hero-cta-secondary-border: 1px solid rgba(255, 255, 255, 0.2);
    --hero-cta-secondary-border-radius: var(--radius-xl);
    --hero-cta-secondary-backdrop-filter: blur(10px);
    --hero-cta-secondary-transition: all var(--transition-base);
    --hero-cta-secondary-transform-hover: translateY(-2px);
    
    /* Hero CTA Tertiary */
    --hero-cta-tertiary-display: inline-flex;
    --hero-cta-tertiary-align-items: center;
    --hero-cta-tertiary-gap: var(--space-2);
    --hero-cta-tertiary-padding: var(--space-4) var(--space-8);
    --hero-cta-tertiary-background: linear-gradient(135deg, #0891b2 0%, #0e7490 100%);
    --hero-cta-tertiary-background-hover: linear-gradient(135deg, #0e7490 0%, #155e75 100%);
    --hero-cta-tertiary-color: var(--text-inverse);
    --hero-cta-tertiary-text-decoration: none;
    --hero-cta-tertiary-font-weight: var(--font-semibold);
    --hero-cta-tertiary-border-radius: var(--radius-xl);
    --hero-cta-tertiary-box-shadow: var(--shadow-xl);
    --hero-cta-tertiary-box-shadow-hover: var(--shadow-2xl);
    --hero-cta-tertiary-transition: all var(--transition-base);
    --hero-cta-tertiary-transform-hover: translateY(-3px);
    
    /* Hero Features */
    --hero-features-display: flex;
    --hero-features-flex-wrap: nowrap;
    --hero-features-gap: var(--space-4);
    --hero-features-gap-mobile: var(--space-6);
    --hero-features-gap-tablet: var(--space-6);
    --hero-features-justify-content: space-between;
    --hero-features-margin-top: var(--space-16);
    
    /* Hero Feature */
    --hero-feature-display: flex;
    --hero-feature-flex-direction: column;
    --hero-feature-align-items: center;
    --hero-feature-text-align: center;
    --hero-feature-flex: 1;
    --hero-feature-max-width: 180px;
    --hero-feature-max-width-mobile: 150px;
    
    /* Hero Feature Icon */
    --hero-feature-icon-width: 60px;
    --hero-feature-icon-height: 60px;
    --hero-feature-icon-background: rgba(255, 255, 255, 0.1);
    --hero-feature-icon-border: 1px solid rgba(255, 255, 255, 0.2);
    --hero-feature-icon-border-radius: var(--radius-xl);
    --hero-feature-icon-display: flex;
    --hero-feature-icon-align-items: center;
    --hero-feature-icon-justify-content: center;
    --hero-feature-icon-margin-bottom: var(--space-3);
    --hero-feature-icon-backdrop-filter: blur(10px);
    --hero-feature-icon-font-size: var(--text-2xl);
    --hero-feature-icon-color: var(--accent-light);
    
    /* Hero Feature Title */
    --hero-feature-title-font-size: var(--text-lg);
    --hero-feature-title-font-weight: var(--font-semibold);
    --hero-feature-title-color: var(--text-inverse);
    --hero-feature-title-margin-bottom: var(--space-2);
    
    /* Hero Feature Description */
    --hero-feature-desc-font-size: var(--text-sm);
    --hero-feature-desc-color: rgba(255, 255, 255, 0.7);
    --hero-feature-desc-line-height: 1.5;
    
    /* Bounce Wave Animation */
    --hero-bounce-duration: 7s;
    --hero-bounce-timing: ease-in-out;
    --hero-bounce-iteration: infinite;
    --hero-bounce-translateY-start: 0px;
    --hero-bounce-translateY-40: -15px;
    --hero-bounce-translateY-60: -5px;
    --hero-bounce-delay-1: 0s;
    --hero-bounce-delay-2: 0.5s;
    --hero-bounce-delay-3: 1s;
    --hero-bounce-delay-4: 1.5s;
    --hero-bounce-delay-5: 2s;
    --hero-bounce-delay-6: 2.5s;
    
    /* Rotate Y Animation */
    --hero-rotate-duration: 15s;
    --hero-rotate-timing: linear;
    --hero-rotate-iteration: infinite;
    --hero-rotate-start: translate(-50%, -50%) rotateY(0deg);
    --hero-rotate-end: translate(-50%, -50%) rotateY(360deg);
    
    /* Promotional Images - Already defined but expanded */
    --promo-animation-speed: 8s;
    --promo-left-delay: 0s;
    --promo-right-delay: 0s;
    --promo-max-opacity: 0.7;
    --promo-fade-speed: 2s;
    --promo-vertical-offset: 64px;
    --promo-horizontal-inset: 64px;
    --promo-image-size: 200px;
    --promo-mobile-size: 60px;
    --promo-mobile-inset: 2px;
    --promo-portrait-size: 45px;
    --promo-portrait-top-offset: calc(50% + 10px);
    --promo-portrait-left: 3px;
    --promo-portrait-right: 3px;
    --promo-portrait-z-index: 10;
    
    /* Hero Rotating Icon */
    --hero-rotating-icon-position: absolute;
    --hero-rotating-icon-top: calc(50% - 88px);
    --hero-rotating-icon-left: 50%;
    --hero-rotating-icon-width: 400px;
    --hero-rotating-icon-height: 400px;
    --hero-rotating-icon-opacity: 0.25;
    --hero-rotating-icon-transform: translate(-50%, -50%);
    --hero-rotating-icon-z-index: 1;
    --hero-rotating-icon-pointer-events: none;
    --hero-rotating-icon-animation: rotateY 15s linear infinite;
    
    /* Animation Load Timing */
    --hero-load-opacity-start: 0;
    --hero-load-opacity-end: 1;
    --hero-load-transform-start: translateY(30px);
    --hero-load-transform-end: translateY(0);
    --hero-load-transition: all 0.8s ease-out;
    --hero-load-delay-base: 200;
    --hero-load-delay-features: 150;
    
    /* Parallax Effect */
    --hero-parallax-speed: 0.5;
}

.hero {
    position: var(--hero-position);
    min-height: var(--hero-min-height);
    background: var(--hero-background-gradient);
    display: var(--hero-display);
    align-items: var(--hero-align-items);
    justify-content: var(--hero-justify-content);
    overflow: var(--hero-overflow);
    margin-top: calc(var(--header-height) + var(--nav-height));
}

.hero::before,
.page-header::before {
    content: var(--hero-overlay-content) !important;
    position: var(--hero-overlay-position) !important;
    top: var(--hero-overlay-top) !important;
    left: var(--hero-overlay-left) !important;
    right: var(--hero-overlay-right) !important;
    bottom: var(--hero-overlay-bottom) !important;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grid" width="10" height="10" patternUnits="userSpaceOnUse"><path d="M 10 0 L 0 0 0 10" fill="none" stroke="rgba(255,255,255,0.1)" stroke-width="0.5"/></pattern></defs><rect width="100" height="100" fill="url(%23grid)"/></svg>') !important;
    opacity: var(--hero-overlay-opacity) !important;
    z-index: var(--hero-overlay-z-index) !important;
}

.hero-logo-background {
    position: var(--hero-logo-bg-position);
    top: var(--hero-logo-bg-top);
    left: var(--hero-logo-bg-left);
    width: var(--hero-logo-bg-width);
    height: var(--hero-logo-bg-height);
    background-image: var(--hero-logo-bg-image);
    background-size: var(--hero-logo-bg-size);
    background-repeat: var(--hero-logo-bg-repeat);
    background-position: var(--hero-logo-bg-position-center);
    opacity: var(--hero-logo-bg-opacity);
    transform: var(--hero-logo-bg-transform);
    animation: var(--hero-logo-bg-animation);
    z-index: var(--hero-logo-bg-z-index);
    pointer-events: var(--hero-logo-bg-pointer-events);
}

/* Hero Page Identity Icon - Top Right Corner */
.hero-page-identity {
    position: var(--hero-page-identity-position);
    top: var(--hero-page-identity-top);
    right: var(--hero-page-identity-right);
    z-index: var(--hero-page-identity-z-index);
    animation: var(--hero-page-identity-animation);
}

.page-identity-icon {
    width: var(--hero-page-identity-icon-width);
    height: var(--hero-page-identity-icon-height);
    background: var(--hero-page-identity-icon-background);
    border-radius: var(--hero-page-identity-icon-border-radius);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--hero-page-identity-icon-font-size);
    border: var(--hero-page-identity-icon-border);
    box-shadow: var(--hero-page-identity-icon-box-shadow);
    transition: var(--hero-page-identity-icon-transition);
    backdrop-filter: var(--hero-page-identity-icon-backdrop-filter);
}

.page-identity-icon:hover {
    transform: var(--hero-page-identity-icon-transform-hover);
    box-shadow: var(--hero-page-identity-icon-box-shadow-hover);
}

.hero-container {
    position: var(--hero-container-position);
    z-index: var(--hero-container-z-index);
    max-width: var(--container-xl);
    margin: var(--hero-container-margin);
    padding: 0 var(--space-6);
    text-align: var(--hero-container-text-align);
}

.hero-content {
    max-width: var(--hero-content-max-width);
    margin: var(--hero-content-margin);
    padding-top: var(--hero-content-padding-top);
}

.hero-badge {
    display: var(--hero-badge-display);
    align-items: var(--hero-badge-align-items);
    gap: var(--hero-badge-gap);
    padding: var(--hero-badge-padding);
    background: var(--hero-badge-background);
    border: var(--hero-badge-border);
    border-radius: var(--hero-badge-border-radius);
    color: var(--hero-badge-color);
    font-size: var(--hero-badge-font-size);
    font-weight: var(--hero-badge-font-weight);
    margin-bottom: var(--hero-badge-margin-bottom);
    backdrop-filter: var(--hero-badge-backdrop-filter);
}

.hero-badge i {
    color: var(--hero-badge-icon-color);
}

.hero-title {
    font-size: var(--hero-title-font-size);
    font-weight: var(--hero-title-font-weight);
    color: var(--hero-title-color);
    margin-bottom: var(--hero-title-margin-bottom);
    line-height: var(--hero-title-line-height);
}

.hero-title .highlight {
    background: var(--hero-title-highlight-background);
    -webkit-background-clip: var(--hero-title-highlight-clip);
    -webkit-text-fill-color: var(--hero-title-highlight-fill);
    background-clip: var(--hero-title-highlight-clip);
}

.hero-subtitle {
    font-size: var(--hero-subtitle-font-size);
    color: var(--hero-subtitle-color);
    margin-bottom: var(--hero-subtitle-margin-bottom);
    line-height: var(--hero-subtitle-line-height);
    max-width: var(--hero-subtitle-max-width);
    margin-left: var(--hero-subtitle-margin-left);
    margin-right: var(--hero-subtitle-margin-right);
}

.hero-actions {
    display: var(--hero-actions-display);
    flex-wrap: var(--hero-actions-flex-wrap);
    gap: var(--hero-actions-gap);
    justify-content: var(--hero-actions-justify-content);
    margin-bottom: var(--hero-actions-margin-bottom);
}

.hero-cta {
    display: var(--hero-cta-display);
    align-items: var(--hero-cta-align-items);
    gap: var(--hero-cta-gap);
    padding: var(--hero-cta-padding);
    background: var(--hero-cta-background);
    color: var(--hero-cta-color);
    text-decoration: var(--hero-cta-text-decoration);
    font-weight: var(--hero-cta-font-weight);
    border-radius: var(--hero-cta-border-radius);
    box-shadow: var(--hero-cta-box-shadow);
    transition: var(--hero-cta-transition);
}

.hero-cta:hover {
    transform: var(--hero-cta-transform-hover);
    box-shadow: var(--hero-cta-box-shadow-hover);
}

.hero-cta-secondary {
    display: var(--hero-cta-secondary-display);
    align-items: var(--hero-cta-secondary-align-items);
    gap: var(--hero-cta-secondary-gap);
    padding: var(--hero-cta-secondary-padding);
    background: var(--hero-cta-secondary-background);
    color: var(--hero-cta-secondary-color);
    text-decoration: var(--hero-cta-secondary-text-decoration);
    font-weight: var(--hero-cta-secondary-font-weight);
    border: var(--hero-cta-secondary-border);
    border-radius: var(--hero-cta-secondary-border-radius);
    backdrop-filter: var(--hero-cta-secondary-backdrop-filter);
    transition: var(--hero-cta-secondary-transition);
}

.hero-cta-secondary:hover {
    background: var(--hero-cta-secondary-background-hover);
    transform: var(--hero-cta-secondary-transform-hover);
}

.hero-cta-tertiary {
    display: var(--hero-cta-tertiary-display);
    align-items: var(--hero-cta-tertiary-align-items);
    gap: var(--hero-cta-tertiary-gap);
    padding: var(--hero-cta-tertiary-padding);
    background: var(--hero-cta-tertiary-background);
    color: var(--hero-cta-tertiary-color);
    text-decoration: var(--hero-cta-tertiary-text-decoration);
    font-weight: var(--hero-cta-tertiary-font-weight);
    border-radius: var(--hero-cta-tertiary-border-radius);
    box-shadow: var(--hero-cta-tertiary-box-shadow);
    transition: var(--hero-cta-tertiary-transition);
}

.hero-cta-tertiary:hover {
    background: var(--hero-cta-tertiary-background-hover);
    transform: var(--hero-cta-tertiary-transform-hover);
    box-shadow: var(--hero-cta-tertiary-box-shadow-hover);
}

.hero-features {
    display: var(--hero-features-display);
    flex-wrap: var(--hero-features-flex-wrap);
    gap: var(--hero-features-gap);
    justify-content: var(--hero-features-justify-content);
    margin-top: var(--hero-features-margin-top);
}

.hero-feature {
    display: var(--hero-feature-display);
    flex-direction: var(--hero-feature-flex-direction);
    align-items: var(--hero-feature-align-items);
    text-align: var(--hero-feature-text-align);
    flex: var(--hero-feature-flex);
    max-width: var(--hero-feature-max-width);
}

.hero-feature-icon {
    width: var(--hero-feature-icon-width);
    height: var(--hero-feature-icon-height);
    background: var(--hero-feature-icon-background);
    border: var(--hero-feature-icon-border);
    border-radius: var(--hero-feature-icon-border-radius);
    display: var(--hero-feature-icon-display);
    align-items: var(--hero-feature-icon-align-items);
    justify-content: var(--hero-feature-icon-justify-content);
    margin-bottom: var(--hero-feature-icon-margin-bottom);
    backdrop-filter: var(--hero-feature-icon-backdrop-filter);
}

.hero-feature-icon i {
    font-size: var(--hero-feature-icon-font-size);
    color: var(--hero-feature-icon-color);
}

.hero-feature-title {
    font-size: var(--hero-feature-title-font-size);
    font-weight: var(--hero-feature-title-font-weight);
    color: var(--hero-feature-title-color);
    margin-bottom: var(--hero-feature-title-margin-bottom);
}

.hero-feature-description {
    font-size: var(--hero-feature-desc-font-size);
    color: var(--hero-feature-desc-color);
    line-height: var(--hero-feature-desc-line-height);
}

/* Bouncing Wave Animation */
@keyframes bounceWave /* hero-style-bounce-keyframes */ {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(var(--hero-bounce-translateY-start));
    }
    40% {
        transform: translateY(var(--hero-bounce-translateY-40));
    }
    60% {
        transform: translateY(var(--hero-bounce-translateY-60));
    }
}

/* 3D Y-axis Rotation Animation */
@keyframes rotateY {
    0% {
        transform: var(--hero-rotate-start);
    }
    100% {
        transform: var(--hero-rotate-end);
    }
}

.hero-feature-icon /* hero-style-bounce-duration */ {
    animation: bounceWave var(--hero-bounce-duration) var(--hero-bounce-timing) var(--hero-bounce-iteration);
}

.hero-feature:nth-child(1) .hero-feature-icon /* hero-style-bounce-delay-1 */ {
    animation-delay: var(--hero-bounce-delay-1);
}

.hero-feature:nth-child(2) .hero-feature-icon /* hero-style-bounce-delay-2 */ {
    animation-delay: var(--hero-bounce-delay-2);
}

.hero-feature:nth-child(3) .hero-feature-icon /* hero-style-bounce-delay-3 */ {
    animation-delay: var(--hero-bounce-delay-3);
}

.hero-feature:nth-child(4) .hero-feature-icon /* hero-style-bounce-delay-4 */ {
    animation-delay: var(--hero-bounce-delay-4);
}

.hero-feature:nth-child(5) .hero-feature-icon /* hero-style-bounce-delay-5 */ {
    animation-delay: var(--hero-bounce-delay-5);
}

.hero-feature:nth-child(6) .hero-feature-icon /* hero-style-bounce-delay-6 */ {
    animation-delay: var(--hero-bounce-delay-6);
}

/* Responsive Design */
@media (max-width: 640px) {
    .hero {
        min-height: var(--hero-min-height-mobile);
        margin-top: var(--header-height);
    }
    
    .hero-title {
        font-size: var(--hero-title-font-size-mobile);
    }
    
    .hero-subtitle {
        font-size: var(--hero-subtitle-font-size-mobile);
    }
    
    .hero-actions {
        flex-direction: var(--hero-actions-flex-direction-mobile);
        align-items: var(--hero-actions-align-items-mobile);
    }
    
    .hero-features {
        gap: var(--hero-features-gap-mobile);
    }
    
    .hero-feature {
        max-width: var(--hero-feature-max-width-mobile);
    }
}

@media (min-width: 641px) and (max-width: 1023px) {
    .hero {
        min-height: var(--hero-min-height-tablet);
        margin-top: calc(var(--header-height) + var(--nav-height));
    }
    
    .hero-title {
        font-size: var(--hero-title-font-size-tablet);
    }
    
    .hero-subtitle {
        font-size: var(--hero-subtitle-font-size-tablet);
        max-width: var(--hero-subtitle-max-width-tablet);
    }
    
    .hero-features {
        gap: var(--hero-features-gap-tablet);
    }
    
    .hero-feature {
        max-width: var(--hero-feature-max-width);
    }
}

@media (min-width: 768px) {
    .hero {
        margin-top: calc(var(--header-height) + var(--nav-height));
    }
}

@media (min-width: 1024px) {
    .hero-container {
        padding: var(--hero-container-padding-desktop);
    }
    
    .hero-title {
        font-size: var(--hero-title-font-size-desktop);
    }
}

/* Promotional Images */
.hero-promo-left,
.hero-promo-right {
    position: absolute;
    top: calc(50% - var(--promo-vertical-offset, 64px));
    width: var(--promo-image-size, 200px);
    height: var(--promo-image-size, 200px);
    z-index: 3;
    pointer-events: none;
    transform: translateY(-50%);
}

.hero-promo-left {
    left: calc(5% + var(--promo-horizontal-inset, 64px));
}

.hero-promo-right {
    right: calc(5% + var(--promo-horizontal-inset, 64px));
}

.hero-promo-image /* hero-style-promo-duration */ {
    width: 100%;
    height: 100%;
    object-fit: contain;
    opacity: 0;
    transform: scale(0.1);
    animation: heroPromoFadeInOut var(--promo-animation-speed) ease-in-out infinite;
}

#hero-media-promo-image-left /* hero-style-promo-delay-left */ {
    animation-delay: var(--promo-left-delay);
}

#hero-media-promo-image-right /* hero-style-promo-delay-right */ {
    animation-delay: var(--promo-right-delay);
}

/* Hero Promotional Animation Keyframes */
@keyframes heroPromoFadeInOut /* hero-style-promo-keyframes */ {
    0% {
        opacity: 0;
        transform: scale(0.1);
    }
    50% {
        opacity: var(--promo-max-opacity);
        transform: scale(1);
    }
    60% {
        opacity: var(--promo-max-opacity);
        transform: scale(1);
    }
    85% {
        opacity: 0;
        transform: scale(0.1);
    }
    100% {
        opacity: 0;
        transform: scale(0.1);
    }
}

/* Admin Control Variables */
:root {
    --promo-animation-speed: 8s;
    --promo-left-delay: 0s;
    --promo-right-delay: 0s;
    --promo-max-opacity: 0.7;
    --promo-fade-speed: 2s;
    --promo-vertical-offset: 64px;
    --promo-horizontal-inset: 64px;
    --promo-image-size: 200px;
    --promo-mobile-size: 60px;
    --promo-mobile-inset: 2px;
}

/* Responsive Promotional Images */
@media (max-width: 768px) {
    .hero-promo-left,
    .hero-promo-right {
        width: var(--promo-mobile-size);
        height: var(--promo-mobile-size);
        top: calc(50% - 20px);
    
    /* Responsive Page Identity Icon */
    .hero-page-identity {
        top: var(--hero-page-identity-tablet-top);
        right: var(--hero-page-identity-tablet-right);
    }
    
    .page-identity-icon {
        width: var(--hero-page-identity-tablet-width);
        height: var(--hero-page-identity-tablet-height);
        font-size: var(--hero-page-identity-tablet-font-size);
        border-width: var(--hero-page-identity-tablet-border-width);
    }
    
    .hero-promo-left {
        left: var(--promo-mobile-inset);
    }
    
    .hero-promo-right {
        right: var(--promo-mobile-inset);
    }
}

/* Portrait Mobile Specific */
@media (max-width: 480px) and (orientation: portrait) {
    .hero-promo-left,
    .hero-promo-right {
        width: var(--promo-portrait-size);
        height: var(--promo-portrait-size);
        top: var(--promo-portrait-top-offset);
        z-index: var(--promo-portrait-z-index);
    }
    
    .hero-promo-left {
        left: var(--promo-portrait-left);
    }
    
    /* Extra Small Screen Page Identity Icon */
    .hero-page-identity {
        top: var(--hero-page-identity-mobile-top);
        right: var(--hero-page-identity-mobile-right);
    }
    
    .page-identity-icon {
        width: var(--hero-page-identity-mobile-width);
        height: var(--hero-page-identity-mobile-height);
        font-size: var(--hero-page-identity-mobile-font-size);
    }
    
    .hero-promo-right {
        right: var(--promo-portrait-right);
    }
}

/* Hero CSS variables for admin control */
:root {
    --promo-portrait-size: 45px;
    --promo-portrait-top-offset: calc(50% + 10px);
    --promo-portrait-left: 3px;
    --promo-portrait-right: 3px;
    --promo-portrait-z-index: 10;
}