/**
 * VAIC Hero Section Styles
 *
 * Additional styles specific to the hero animation section.
 * Base styles are in style.css
 *
 * @package VAIC_Theme
 */

/* ==========================================================================
   Default State - Elements visible without JavaScript
   ========================================================================== */

/* Quote visible by default */
.vaic-quote {
    opacity: 1;
}

/* Logo visible by default (logo is in header, not hero) */
.vaic-logo {
    opacity: 1;
}

/* Letters hidden by default */
.vaic-letters {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

/* Background hidden by default */
.vaic-hero__background {
    opacity: 0;
}

/* ==========================================================================
   Hero Animation States (JS-controlled)
   ========================================================================== */

/* Transitioning state */
.vaic-hero[data-state="transitioning"] .vaic-quote {
    transition: opacity var(--vaic-transition-medium);
}

/* Final state - quote hidden */
.vaic-hero[data-state="final"] .vaic-quote {
    opacity: 0;
    pointer-events: none;
}

/* Final state - letters visible */
.vaic-hero[data-state="final"] .vaic-letters {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* Final state - background visible */
.vaic-hero[data-state="final"] .vaic-hero__background {
    opacity: 1;
}

/* Logo fade is handled by GSAP directly since it's outside .vaic-hero */

/* ==========================================================================
   Letter Animation Specifics
   ========================================================================== */

.vaic-letter {
    opacity: 0;
    will-change: opacity;
}

/* Make the "i" letter wider */
.vaic-letter[data-letter="i"] {
    transform: scaleX(2);
}

.vaic-letter.is-visible {
    opacity: 1;
}

/* Counteract the stretch on the video inside "i" */
.vaic-letter[data-letter="i"] .vaic-letter__video,
.vaic-letter[data-letter="i"] .vaic-letter__image {
    transform: scaleX(0.5);
}

.vaic-letter__media-container {
    will-change: opacity;
}

.vaic-letter__text {
    will-change: opacity;
}

/* Letter video clip effect */
.vaic-letter.has-media .vaic-letter__media-container {
    opacity: 1;
}

.vaic-letter.has-media .vaic-letter__text {
    /* Make text transparent to show video through it */
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    background-color: transparent;
}

/* ==========================================================================
   Background Media Transitions
   ========================================================================== */

.vaic-hero__background {
    will-change: opacity;
}

.vaic-hero__background-media {
    will-change: opacity;
}

/* Crossfade transition */
.vaic-hero__background.transition-crossfade .vaic-hero__background-media {
    transition: opacity 1s ease;
}

/* Instant transition */
.vaic-hero__background.transition-instant .vaic-hero__background-media {
    transition: opacity 0s;
}

/* ==========================================================================
   Video Inside Letters
   ========================================================================== */

/* Text element - always present for sizing */
.vaic-letter__text {
    display: block;
    visibility: visible;
}

/* Hide text visually when media is present (but keep for sizing) */
.vaic-letter.has-media .vaic-letter__text {
    visibility: hidden;
}

/* Media container - positioned absolutely over the text */
.vaic-letter__media-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

/* Video/image fills the container */
.vaic-letter__video,
.vaic-letter__image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ==========================================================================
   Letter-specific CSS masks using SVG data URLs
   ========================================================================== */

/* Each letter gets a mask matching its character - sized to fill container */
.vaic-letter[data-letter="v"] .vaic-letter__media-container {
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Ctext x='50' y='85' font-family='Inter,-apple-system,BlinkMacSystemFont,sans-serif' font-size='100' font-weight='900' text-anchor='middle' fill='black'%3Ev%3C/text%3E%3C/svg%3E") center/100% 100% no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Ctext x='50' y='85' font-family='Inter,-apple-system,BlinkMacSystemFont,sans-serif' font-size='100' font-weight='900' text-anchor='middle' fill='black'%3Ev%3C/text%3E%3C/svg%3E") center/100% 100% no-repeat;
}

.vaic-letter[data-letter="a1"] .vaic-letter__media-container,
.vaic-letter[data-letter="a2"] .vaic-letter__media-container {
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Ctext x='50' y='85' font-family='Inter,-apple-system,BlinkMacSystemFont,sans-serif' font-size='100' font-weight='900' text-anchor='middle' fill='black'%3Ea%3C/text%3E%3C/svg%3E") center/100% 100% no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Ctext x='50' y='85' font-family='Inter,-apple-system,BlinkMacSystemFont,sans-serif' font-size='100' font-weight='900' text-anchor='middle' fill='black'%3Ea%3C/text%3E%3C/svg%3E") center/100% 100% no-repeat;
}

.vaic-letter[data-letter="i"] .vaic-letter__media-container {
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Ctext x='50' y='85' font-family='Inter,-apple-system,BlinkMacSystemFont,sans-serif' font-size='100' font-weight='900' text-anchor='middle' fill='black'%3Ei%3C/text%3E%3C/svg%3E") center/100% 100% no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Ctext x='50' y='85' font-family='Inter,-apple-system,BlinkMacSystemFont,sans-serif' font-size='100' font-weight='900' text-anchor='middle' fill='black'%3Ei%3C/text%3E%3C/svg%3E") center/100% 100% no-repeat;
}

.vaic-letter[data-letter="c"] .vaic-letter__media-container {
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Ctext x='50' y='85' font-family='Inter,-apple-system,BlinkMacSystemFont,sans-serif' font-size='100' font-weight='900' text-anchor='middle' fill='black'%3Ec%3C/text%3E%3C/svg%3E") center/100% 100% no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Ctext x='50' y='85' font-family='Inter,-apple-system,BlinkMacSystemFont,sans-serif' font-size='100' font-weight='900' text-anchor='middle' fill='black'%3Ec%3C/text%3E%3C/svg%3E") center/100% 100% no-repeat;
}

.vaic-letter[data-letter="t"] .vaic-letter__media-container {
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Ctext x='50' y='85' font-family='Inter,-apple-system,BlinkMacSystemFont,sans-serif' font-size='100' font-weight='900' text-anchor='middle' fill='black'%3Et%3C/text%3E%3C/svg%3E") center/100% 100% no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Ctext x='50' y='85' font-family='Inter,-apple-system,BlinkMacSystemFont,sans-serif' font-size='100' font-weight='900' text-anchor='middle' fill='black'%3Et%3C/text%3E%3C/svg%3E") center/100% 100% no-repeat;
}

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

@media (max-width: 768px) {
    .vaic-letters__wrapper {
        flex-wrap: nowrap;
    }

    .vaic-letter {
        font-size: 22vw;
    }
}

@media (max-width: 480px) {
    .vaic-letter {
        font-size: 18vw;
    }

    .vaic-quote__text {
        font-size: 18px;
    }
}

/* ==========================================================================
   Performance Optimizations
   ========================================================================== */

/* GPU acceleration for animated elements */
/* Note: .vaic-letter is excluded - it uses will-change for GPU acceleration
   and has specific transform rules that would be overridden */
.vaic-quote,
.vaic-logo,
.vaic-hero__background,
.vaic-hero__background-media {
    transform: translateZ(0);
    backface-visibility: hidden;
}

/* Reduce paint during video playback */
.vaic-letter__video,
.vaic-hero__background-media {
    contain: strict;
}

/* ==========================================================================
   Loading State
   ========================================================================== */

.vaic-hero.is-loaded .vaic-quote {
    opacity: 1;
    transition: opacity 0.5s ease;
}

/* ==========================================================================
   Fallback for No JavaScript
   ========================================================================== */

.no-js .vaic-quote {
    opacity: 1;
}

.no-js .vaic-logo {
    opacity: 1;
}

.no-js .vaic-letters {
    display: none;
}

/* ==========================================================================
   Letter Hover/Expand State
   ========================================================================== */

/* Hide regular background media when a letter is expanded */
.vaic-hero.has-expanded-letter .vaic-hero__background-media:not(.is-hover-media) {
    opacity: 0 !important;
    transition: none !important; /* Instant hide for snappy response */
}

/* Hover background video - ensure fullscreen coverage */
.vaic-hero__background-media.is-hover-media {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    /* Size will be set by JavaScript for Safari compatibility */
    min-width: 100vw;
    min-height: 100vh;
    transform: translate(-50%, -50%);
    opacity: 0;
    z-index: 50; /* Above letters (10) and quote (20), below navigation (100) */
    /* No transition for instant response */
    transition: none !important;
}

/* Show the specific hover video that's active */
.vaic-hero__background-media.is-hover-media.is-active {
    opacity: 1 !important;
}

/* Hide other letters when one is expanded */
.vaic-hero.has-expanded-letter .vaic-letter:not(.is-expanded) {
    opacity: 0 !important;
    pointer-events: none;
}

/* Make the expanded letter fully transparent (only background video visible) */
.vaic-letter.is-expanded {
    opacity: 0 !important;
}