/* ============================================
   CINEMATIC ENTRANCE V2 - Hero Integrated
   ============================================
   Types "Hello, [Brand]" directly in the hero section,
   then reveals the original content. No separate overlay.

   Features:
   - Cinematic rectangular vignette with dust particles
   - Typewriter effect in hero title area
   - Smooth transition to original content
   ============================================ */

/* ==================== CINEMATIC VIGNETTE OVERLAY ==================== */
/* Replaces the circular vignette with a more cinematic look */
/* IMPORTANT: Override the base .video-hero__vignette radial gradient (the "eye effect") */
.video-hero__vignette--cinematic {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    /* Override the base class radial gradient - remove the circular "eye" effect */
    background: transparent !important;
}

/* Main vignette - rectangular/film-like with soft edges */
.video-hero__vignette--cinematic::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        /* Top bar - slight letterbox feel */
        linear-gradient(180deg, rgba(10, 10, 10, 0.6) 0%, transparent 15%),
        /* Bottom bar */
        linear-gradient(0deg, rgba(10, 10, 10, 0.7) 0%, transparent 20%),
        /* Left edge fade */
        linear-gradient(90deg, rgba(10, 10, 10, 0.5) 0%, transparent 15%),
        /* Right edge fade */
        linear-gradient(270deg, rgba(10, 10, 10, 0.5) 0%, transparent 15%),
        /* Center spotlight - keeps focus on content */
        radial-gradient(ellipse 80% 70% at 50% 45%, transparent 0%, rgba(10, 10, 10, 0.4) 100%);
}

/* Film grain overlay for cinematic texture */
/* Using opacity flicker instead of transform to avoid glitch/tilting artifacts */
.video-hero__vignette--cinematic::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
    opacity: 0.025;
    pointer-events: none;
    /* Subtle grain flicker - no transform to avoid border glitches */
    animation: grainFlicker 0.15s steps(2) infinite;
}

@keyframes grainFlicker {
    0%, 100% { opacity: 0.025; }
    50% { opacity: 0.035; }
}

/* ==================== FLOATING DUST PARTICLES ==================== */
.cinematic-dust {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 2;
}

.cinematic-dust-particle {
    position: absolute;
    width: var(--dust-size, 2px);
    height: var(--dust-size, 2px);
    background: rgba(255, 255, 255, var(--dust-opacity, 0.3));
    border-radius: 50%;
    animation: dustFloat var(--dust-duration, 15s) linear infinite;
    animation-delay: var(--dust-delay, 0s);
}

/* Different particle sizes and positions */
.cinematic-dust-particle:nth-child(1) { --dust-size: 1px; --dust-opacity: 0.2; --dust-duration: 18s; --dust-delay: 0s; left: 10%; top: 100%; }
.cinematic-dust-particle:nth-child(2) { --dust-size: 2px; --dust-opacity: 0.35; --dust-duration: 22s; --dust-delay: 2s; left: 25%; top: 100%; }
.cinematic-dust-particle:nth-child(3) { --dust-size: 1px; --dust-opacity: 0.25; --dust-duration: 16s; --dust-delay: 4s; left: 35%; top: 100%; }
.cinematic-dust-particle:nth-child(4) { --dust-size: 3px; --dust-opacity: 0.15; --dust-duration: 25s; --dust-delay: 1s; left: 50%; top: 100%; }
.cinematic-dust-particle:nth-child(5) { --dust-size: 1px; --dust-opacity: 0.3; --dust-duration: 20s; --dust-delay: 3s; left: 60%; top: 100%; }
.cinematic-dust-particle:nth-child(6) { --dust-size: 2px; --dust-opacity: 0.2; --dust-duration: 19s; --dust-delay: 5s; left: 75%; top: 100%; }
.cinematic-dust-particle:nth-child(7) { --dust-size: 1px; --dust-opacity: 0.35; --dust-duration: 17s; --dust-delay: 2.5s; left: 85%; top: 100%; }
.cinematic-dust-particle:nth-child(8) { --dust-size: 2px; --dust-opacity: 0.25; --dust-duration: 21s; --dust-delay: 0.5s; left: 15%; top: 100%; }
.cinematic-dust-particle:nth-child(9) { --dust-size: 1px; --dust-opacity: 0.2; --dust-duration: 23s; --dust-delay: 4.5s; left: 45%; top: 100%; }
.cinematic-dust-particle:nth-child(10) { --dust-size: 3px; --dust-opacity: 0.1; --dust-duration: 28s; --dust-delay: 1.5s; left: 90%; top: 100%; }

/* Golden accent particles */
.cinematic-dust-particle:nth-child(11) { --dust-size: 2px; --dust-duration: 20s; --dust-delay: 6s; left: 30%; top: 100%; background: rgba(201, 169, 98, 0.3); }
.cinematic-dust-particle:nth-child(12) { --dust-size: 1px; --dust-duration: 18s; --dust-delay: 8s; left: 70%; top: 100%; background: rgba(201, 169, 98, 0.25); }

@keyframes dustFloat {
    0% {
        transform: translateY(0) translateX(0) rotate(0deg);
        opacity: 0;
    }
    5% {
        opacity: var(--dust-opacity, 0.3);
    }
    50% {
        transform: translateY(-50vh) translateX(30px) rotate(180deg);
    }
    95% {
        opacity: var(--dust-opacity, 0.3);
    }
    100% {
        transform: translateY(-100vh) translateX(-20px) rotate(360deg);
        opacity: 0;
    }
}

/* ==================== HERO GREETING STATE ==================== */
/* When greeting is active, hide original content */
.video-hero.greeting-active .video-hero__content {
    pointer-events: none;
}

.video-hero.greeting-active .video-hero__title,
.video-hero.greeting-active .video-hero__subtitle,
.video-hero.greeting-active .video-hero__tagline,
.video-hero.greeting-active .video-hero__buttons {
    opacity: 0 !important;
    transform: translateY(20px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.video-hero.greeting-active .video-hero__scroll {
    opacity: 0;
}

/* Reduce blur-mask during greeting to make video more visible */
.video-hero.greeting-active .video-hero__blur-mask {
    opacity: 0.2;
    transition: opacity 0.5s ease;
}

/* ==================== HERO GREETING CONTAINER ==================== */
.hero-greeting {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    z-index: 10;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.6s ease;
    margin-top: -30px; /* Match hero content offset */
}

.hero-greeting.visible {
    opacity: 1;
}

.hero-greeting.exit {
    opacity: 0;
    transform: translate(-50%, -50%) translateY(-30px) scale(0.95);
    filter: blur(10px);
    transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Hello text */
.hero-greeting__hello {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: clamp(1.2rem, 3vw, 2rem);
    font-weight: 300;
    color: rgba(255, 255, 255, 0.7);
    letter-spacing: 0.15em;
    text-transform: uppercase;
    margin-bottom: 16px;
    opacity: 0;
    transform: translateY(10px);
    transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.hero-greeting__hello.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Brand name typing area */
.hero-greeting__brand {
    font-family: 'Cormorant Garamond', 'Playfair Display', 'Times New Roman', serif;
    font-size: clamp(2.5rem, 8vw, 5.5rem);
    font-weight: 500;
    font-style: italic;
    color: #ffffff;
    letter-spacing: 0.02em;
    line-height: 1.1;
    position: relative;
    display: inline-block;
    min-height: 1.2em;
    text-shadow: 0 4px 60px rgba(0, 0, 0, 0.5);
}

/* Typewriter cursor */
.hero-greeting__brand::after {
    content: '';
    position: absolute;
    right: -8px;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 0.75em;
    background: #c9a962;
    animation: cursorBlink 0.8s infinite;
}

.hero-greeting__brand.typing-done::after {
    opacity: 0;
    transition: opacity 0.3s ease;
}

@keyframes cursorBlink {
    0%, 50% { opacity: 1; }
    51%, 100% { opacity: 0; }
}

/* Individual letter styling */
.hero-greeting__brand .letter {
    display: inline-block;
    opacity: 0;
    transform: translateY(30px) scale(0.8);
    filter: blur(8px);
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.hero-greeting__brand .letter.visible {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
}

/* Intense glow on letter appearance */
.hero-greeting__brand .letter.glow {
    text-shadow:
        0 0 30px rgba(201, 169, 98, 0.9),
        0 0 60px rgba(201, 169, 98, 0.6),
        0 0 90px rgba(201, 169, 98, 0.4),
        0 0 120px rgba(201, 169, 98, 0.2);
}

/* Settled glow */
.hero-greeting__brand .letter.glow-settle {
    text-shadow:
        0 0 20px rgba(201, 169, 98, 0.4),
        0 0 40px rgba(201, 169, 98, 0.2);
    transition: text-shadow 0.8s ease-out;
}

/* ==================== CONTENT REVEAL ANIMATION ==================== */
/* After greeting, animate original content back in */
.video-hero.content-revealing .video-hero__title {
    opacity: 0;
    transform: translateY(30px);
    animation: contentReveal 0.8s forwards;
    animation-delay: 0.1s;
}

.video-hero.content-revealing .video-hero__subtitle {
    opacity: 0;
    transform: translateY(20px);
    animation: contentReveal 0.6s forwards;
    animation-delay: 0.3s;
}

.video-hero.content-revealing .video-hero__tagline {
    opacity: 0;
    transform: translateY(20px);
    animation: contentReveal 0.6s forwards;
    animation-delay: 0.45s;
}

.video-hero.content-revealing .video-hero__buttons {
    opacity: 0;
    transform: translateY(20px);
    animation: contentReveal 0.6s forwards;
    animation-delay: 0.6s;
}

.video-hero.content-revealing .video-hero__scroll {
    opacity: 0;
    animation: contentReveal 0.5s forwards;
    animation-delay: 0.8s;
}

@keyframes contentReveal {
    0% {
        opacity: 0;
        transform: translateY(30px);
        filter: blur(4px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
    }
}

/* ==================== PROGRESS INDICATOR ==================== */
.hero-greeting__progress {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 0;
    height: 3px;
    background: linear-gradient(90deg, #c9a962, #e8d5a3);
    z-index: 100;
    transition: width 0.1s linear;
}

/* ==================== COLD EMAIL PILL - HIDE DURING GREETING ==================== */
body.cinematic-playing .ce-pill {
    opacity: 0 !important;
    transform: translateY(20px) scale(0.95) !important;
    pointer-events: none !important;
}

/* ==================== HERO GREETING HIDDEN STATE ==================== */
.hero-greeting.hidden {
    display: none;
}

/* ==================== MOBILE ADJUSTMENTS ==================== */
@media (max-width: 768px) {
    .hero-greeting__hello {
        font-size: clamp(0.9rem, 4vw, 1.3rem);
        margin-bottom: 12px;
    }

    .hero-greeting__brand {
        font-size: clamp(1.8rem, 10vw, 3.5rem);
    }

    /* Reduce dust particles on mobile */
    .cinematic-dust-particle:nth-child(n+7) {
        display: none;
    }

    .video-hero__vignette--cinematic::after {
        /* Reduce grain on mobile for performance */
        animation: none;
    }
}

/* ==================== REDUCED MOTION ==================== */
@media (prefers-reduced-motion: reduce) {
    .hero-greeting,
    .hero-greeting__hello,
    .hero-greeting__brand .letter,
    .cinematic-dust-particle,
    .video-hero__vignette--cinematic::after {
        animation: none !important;
        transition: opacity 0.3s ease !important;
    }

    .hero-greeting__brand .letter {
        opacity: 1;
        transform: none;
        filter: none;
    }

    @keyframes dustFloat {
        0%, 100% { transform: none; opacity: var(--dust-opacity, 0.3); }
    }
}

/* ==================== LIGHT MODE ==================== */
[data-theme="light"] .video-hero__vignette--cinematic::before {
    background:
        linear-gradient(180deg, rgba(250, 250, 250, 0.5) 0%, transparent 15%),
        linear-gradient(0deg, rgba(250, 250, 250, 0.6) 0%, transparent 20%),
        linear-gradient(90deg, rgba(250, 250, 250, 0.4) 0%, transparent 15%),
        linear-gradient(270deg, rgba(250, 250, 250, 0.4) 0%, transparent 15%),
        radial-gradient(ellipse 80% 70% at 50% 45%, transparent 0%, rgba(250, 250, 250, 0.3) 100%);
}

[data-theme="light"] .hero-greeting__hello {
    color: rgba(0, 0, 0, 0.6);
}

[data-theme="light"] .hero-greeting__brand {
    color: #1a1a1a;
    text-shadow: 0 4px 60px rgba(0, 0, 0, 0.15);
}

[data-theme="light"] .hero-greeting__brand::after {
    background: #a08040;
}

[data-theme="light"] .hero-greeting__brand .letter.glow {
    text-shadow:
        0 0 30px rgba(160, 128, 64, 0.8),
        0 0 60px rgba(160, 128, 64, 0.5),
        0 0 90px rgba(160, 128, 64, 0.3);
}

[data-theme="light"] .hero-greeting__brand .letter.glow-settle {
    text-shadow:
        0 0 20px rgba(160, 128, 64, 0.3),
        0 0 40px rgba(160, 128, 64, 0.15);
}

[data-theme="light"] .cinematic-dust-particle {
    background: rgba(0, 0, 0, var(--dust-opacity, 0.15));
}

[data-theme="light"] .cinematic-dust-particle:nth-child(11),
[data-theme="light"] .cinematic-dust-particle:nth-child(12) {
    background: rgba(160, 128, 64, 0.25);
}