/*!
 * Cards CSS - Shared by all card components
 * Version: 1.0
 * Optimized for performance
 */

/* Design tokens are loaded directly by the component */

/* CSS Custom Properties for Card-Based Text Scaling */
:root {
    --card-height: 35vh;
    --card-width: calc(var(--card-height) * 9 / 16);
    --text-scale: calc(35vh / 15); /* Simplified calculation */
}

/* Fallback for browsers that don't support vh */
@supports not (height: 1vh) {
    :root {
        --card-height: 35vh; /* Fallback to regular vh */
        --card-width: calc(var(--card-height) * 9 / 16);
        --text-scale: calc(35vh / 15); /* Simplified calculation */
    }
}

/* Performer Card - Exact copy from original card-performer.php */
.performer-card {
    display: inline-block;
    margin: 0;
    vertical-align: top;
    aspect-ratio: 9/16; /* Sacred aspect ratio */
    height: 35vh; /* Dynamic viewport height - width calculates automatically */
    border: 2px solid var(--hms-pink);
    border-radius: 15px;
    overflow: hidden; /* Changed to hidden to ensure image is clipped by border */
    background: var(--hms-pink-light);
    transition: transform 0.4s ease-out, box-shadow 0.4s ease-out; /* Only animate what changes, simplified easing */
    box-shadow: 
        0 0 8px var(--hms-blue-strong),
        0 0 16px var(--hms-blue-medium),
        0 0 24px var(--hms-blue-light); /* Reduced from 5 to 3 shadow layers */
    transform: perspective(800px) rotateX(0deg) scale(1); /* Reduced perspective from 1000px to 800px for better performance */
    animation: breathe 20s ease-in-out infinite; /* Slowed down from 12s to 20s for better performance */
    position: relative; /* For pseudo-element positioning */
}

/* Additional glow effect using pseudo-element - positioned outside the card */
.performer-card::before {
    content: '';
    position: absolute;
    top: -5px;
    left: -5px;
    right: -5px;
    bottom: -5px;
    background: radial-gradient(ellipse at center, var(--hms-blue-light) 0%, transparent 70%);
    border-radius: 20px;
    z-index: -1;
    animation: glowPulse 20s ease-in-out infinite; /* Slowed down from 12s to 20s for better performance */
    pointer-events: none;
}

@keyframes glowPulse {
    0%, 100% { 
        opacity: 0.3;
        transform: scale(1);
    }
    50% { 
        opacity: 0.6;
        transform: scale(1.02);
    }
}

@keyframes breathe {
    0%, 100% { 
        box-shadow: 
            0 0 8px var(--hms-blue-strong),
            0 0 16px var(--hms-blue-medium),
            0 0 24px var(--hms-blue-light);
    }
    50% { 
        box-shadow: 
            0 0 12px var(--hms-blue-full),
            0 0 20px var(--hms-blue-strong),
            0 0 28px var(--hms-blue-medium);
    }
}

.performer-card:hover {
    transform: perspective(800px) rotateX(-5deg) scale(1.03); /* Reduced perspective from 1000px to 800px for better performance */
    box-shadow: 
        0 0 10px var(--hms-blue-full),
        0 0 20px var(--hms-blue-strong),
        0 0 30px var(--hms-blue-medium); /* Reduced from 4 to 3 shadow layers on hover */
    border-color: var(--hms-pink-medium);
    animation: none; /* Stop breathing animation on hover */
}

.performer-card:hover::before {
    opacity: 0.8;
    transform: scale(1.05);
    background: radial-gradient(ellipse at center, var(--hms-blue-medium) 0%, transparent 70%);
    animation: none;
}

.card-link {
    text-decoration: none;
    display: block;
    width: 100%;
    height: 100%;
}

.image-container {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.performer-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
    filter: brightness(1.1) contrast(1.1); /* Slightly brighten and enhance contrast */
}

.performer-card:hover .performer-image {
    transform: scale(1.08);
}

.performer-name-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent; /* Removed dark overlay */
    opacity: 1; /* Changed from 0 to 1 - always visible */
    transition: opacity 0.3s ease;
    z-index: 2; /* Ensure name is above vignette */
}

.performer-card:hover .performer-name-overlay {
    opacity: 1;
    background: transparent; /* Removed hover overlay effect */
}

/* Higher specificity to override old card-performer.php */
.performer-card .performer-name {
    color: var(--hms-text-white);
    text-align: center;
    font-family: var(--hms-font-heading); /* Use Black Ops One for performer names */
    font-size: calc(35vh / 15); /* Fallback for browsers without vh support */
    font-size: calc(35vh / 15); /* Direct card-based text scaling */
    font-weight: 700;
    margin: 0;
    text-shadow: var(--hms-h4-shadow); /* Dynamic glow that scales with text */
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 20px;
    line-height: 1.2;
}

/* Add vignette effect to the image */
.image-container::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(ellipse at center, transparent 30%, var(--hms-bg-black-strong) 70%);
    pointer-events: none;
    z-index: 1;
    transition: background 0.3s ease;
}

/* Mobile dynamic vignette effect */
@media (max-width: 768px) {
    .performer-card {
        position: relative;
    }
    
    .image-container::after {
        background: radial-gradient(ellipse at center, transparent 0%, var(--hms-bg-black-medium) 20%, var(--hms-bg-black-strong) 50%, var(--hms-bg-black-strong) 100%);
        transition: background 0.3s ease;
    }
}

/* Even more dramatic effect on smaller mobile */
@media (max-width: 480px) {
    .image-container::after {
        background: radial-gradient(ellipse at center, transparent 0%, var(--hms-bg-black-light) 12%, var(--hms-bg-black-medium) 30%, var(--hms-bg-black-strong) 100%);
    }
}

/* Dynamic viewport height handles all screen sizes - no media queries needed */
/* Text scaling will be handled separately with calc() functions */

/* Studio Card - 4:5 aspect ratio with 35vh height */
.studio-card {
    display: inline-block;
    margin: 0;
    vertical-align: top;
    aspect-ratio: 4/5; /* 4:5 aspect ratio first */
    height: 35vh; /* Dynamic viewport height - width calculates automatically */
    border: 2px solid var(--hms-pink);
    border-radius: 15px;
    overflow: hidden;
    background: var(--hms-pink-light);
    transition: transform 0.4s ease-out, box-shadow 0.4s ease-out;
    box-shadow: 
        0 0 8px var(--hms-blue-strong),
        0 0 16px var(--hms-blue-medium),
        0 0 24px var(--hms-blue-light);
    transform: perspective(800px) rotateX(0deg) scale(1);
    animation: breathe 20s ease-in-out infinite;
    position: relative;
}

/* Studio Card Glow Effect */
.studio-card::before {
    content: '';
    position: absolute;
    top: -5px;
    left: -5px;
    right: -5px;
    bottom: -5px;
    background: radial-gradient(ellipse at center, var(--hms-blue-light) 0%, transparent 70%);
    border-radius: 20px;
    z-index: -1;
    animation: glowPulse 20s ease-in-out infinite;
    pointer-events: none;
}

.studio-card:hover {
    transform: perspective(800px) rotateX(-5deg) scale(1.03);
    box-shadow: 
        0 0 10px var(--hms-blue-full),
        0 0 20px var(--hms-blue-strong),
        0 0 30px var(--hms-blue-medium);
    border-color: var(--hms-pink-medium);
    animation: none;
}

.studio-card:hover::before {
    opacity: 0.8;
    transform: scale(1.05);
    background: radial-gradient(ellipse at center, var(--hms-blue-medium) 0%, transparent 70%);
    animation: none;
}

/* Studio Image */
.studio-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
    filter: brightness(1.1) contrast(1.1);
}

.studio-card:hover .studio-image {
    transform: scale(1.08);
}

/* Studio Name Overlay */
.studio-name-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    opacity: 1;
    transition: opacity 0.3s ease;
    z-index: 2;
}

.studio-card:hover .studio-name-overlay {
    opacity: 1;
    background: transparent;
}

/* Studio Name Text */
.studio-card .studio-name {
    color: var(--hms-text-white);
    text-align: center;
    font-family: var(--hms-font-heading);
    font-size: calc(35vh / 15); /* Fallback for browsers without vh support */
    font-size: calc(35vh / 15); /* Direct card-based text scaling */
    font-weight: 700;
    margin: 0;
    text-shadow: var(--hms-h4-shadow);
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 20px;
    line-height: 1.2;
}

/* Studio Card Vignette Effect */
.studio-card .image-container::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(ellipse at center, transparent 30%, var(--hms-bg-black-strong) 70%);
    pointer-events: none;
    z-index: 1;
    transition: background 0.3s ease;
}

/* Scene Card - Based on original card-scene.php */
.scene-card {
    display: inline-block;
    margin: 0;
    vertical-align: top;
    aspect-ratio: 2/1; /* 2:1 aspect ratio for scenes */
    height: 20vh; /* Dynamic viewport height - width calculates automatically */
    border: 2px solid var(--hms-pink);
    border-radius: 15px;
    overflow: hidden;
    background: var(--hms-pink-light);
    transition: transform 0.4s ease-out, box-shadow 0.4s ease-out;
    box-shadow: 
        0 0 8px var(--hms-blue-strong),
        0 0 16px var(--hms-blue-medium),
        0 0 24px var(--hms-blue-light);
    transform: perspective(800px) rotateX(0deg) scale(1);
    animation: breathe 20s ease-in-out infinite;
    position: relative;
}

.scene-card::before {
    content: '';
    position: absolute;
    top: -5px;
    left: -5px;
    right: -5px;
    bottom: -5px;
    background: radial-gradient(ellipse at center, var(--hms-blue-light) 0%, transparent 70%);
    border-radius: 20px;
    z-index: -1;
    animation: glowPulse 20s ease-in-out infinite;
    pointer-events: none;
}

.scene-card:hover {
    transform: perspective(800px) rotateX(-5deg) scale(1.03);
    box-shadow: 
        0 0 10px var(--hms-blue-strong),
        0 0 20px var(--hms-blue-medium),
        0 0 30px var(--hms-blue-light);
    border-color: var(--hms-pink-medium);
    animation: none;
}

.scene-card:hover::before {
    opacity: 0.8;
    transform: scale(1.05);
    background: radial-gradient(ellipse at center, var(--hms-blue-medium) 0%, transparent 70%);
    animation: none;
}

.scene-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
    filter: brightness(1.1) contrast(1.1);
}

.scene-card:hover .scene-image {
    transform: scale(1.08);
}

.scene-name-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    opacity: 1;
    transition: opacity 0.3s ease;
    z-index: 2;
}

.scene-name {
    color: white;
    text-align: center;
    font-weight: 600;
    margin: 0;
    text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.9), 0 0 20px rgba(0, 0, 0, 0.8);
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 12px;
    line-height: 1.2;
    font-size: clamp(0.8rem, calc(20vh / 12), 1.2rem); /* Responsive text scaling */
}

.scene-card .image-container::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(ellipse at center, transparent 30%, rgba(0, 0, 0, 0.4) 70%);
    pointer-events: none;
    z-index: 1;
    transition: background 0.3s ease;
}