/* Full Bleed Video Hero Reveal Effect - Apple Style */

/* Smooth rendering for all elements */
* {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Prevent scrollbar during initial load */
html {
    overflow-x: hidden;
}

/* Hero video wrapper (added via JS) */
.hero-video-wrapper {
    pointer-events: none;
    will-change: transform, width, height, top, left;
}

.hero-video-wrapper video {
    pointer-events: none;
    user-select: none;
}

/* Hero placeholder for smooth spacing */
.hero-placeholder {
    pointer-events: none;
    will-change: height;
}

/* Ensure smooth transitions */
.hero-transitioning {
    transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Override Framer's initial animations during our effect */
body:has(.hero-video-wrapper) .framer-1vp7oik-container {
    animation: none !important;
}

/* Smooth scroll behavior after hero loads */
html.hero-loaded {
    scroll-behavior: smooth;
}

/* Add subtle shadow to video during transition */
.hero-video-wrapper {
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
}

/* Ensure video container is properly positioned */
.framer-1vp7oik-container {
    position: relative;
    overflow: hidden;
}

/* Optional: Add a subtle vignette to the full-screen video */
.hero-video-wrapper::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(ellipse at center, transparent 0%, rgba(0,0,0,0.2) 100%);
    pointer-events: none;
    opacity: 0.5;
    transition: opacity 0.8s ease;
}

.hero-video-wrapper.transitioning::after {
    opacity: 0;
}

/* Loading state */
body.hero-loading {
    overflow: hidden;
}

/* Ensure sections below are ready for animation */
section {
    will-change: transform, opacity;
}

/* Prevent any flash of unstyled content */
.framer-1vp7oik-container video {
    background: #000;
}