/* HERO.CSS - Hero Section exatamente como no Vite */

/* CSS Variables do design system - matching Vite index.css */
:root {
    /* Elegant Neutral Palette */
    --background: 0 0% 100%;
    --foreground: 0 0% 15%;
    --card: 0 0% 98%;
    --card-foreground: 0 0% 15%;
    --popover: 0 0% 100%;
    --popover-foreground: 0 0% 15%;
    
    /* Elegant Bronze/Gold */
    --primary: 35 65% 65%;
    --primary-foreground: 0 0% 100%;
    
    /* Sophisticated Dark Blue */
    --secondary: 210 22% 25%;
    --secondary-foreground: 0 0% 100%;
    
    /* Warm Gold Accent */
    --accent: 35 80% 75%;
    --accent-foreground: 0 0% 15%;
    
    /* Coral Accent */
    --coral: 16 85% 70%;
    --coral-foreground: 0 0% 100%;
    
    --muted: 0 0% 96%;
    --muted-foreground: 0 0% 45%;
    
    --destructive: 0 84% 60%;
    --destructive-foreground: 0 0% 98%;
    
    --border: 0 0% 90%;
    --input: 0 0% 96%;
    --ring: 35 65% 65%;
    --radius: 0.5rem;
    
    /* Elegant Gradients */
    --gradient-hero: linear-gradient(135deg, hsl(210 22% 25% / 0.9), hsl(210 22% 15% / 0.8));
    --gradient-gold: linear-gradient(135deg, hsl(35 65% 65%), hsl(35 80% 75%));
    --shadow-elegant: 0 10px 25px rgba(0, 0, 0, 0.1);
}

/* Layout base */
.hero-section {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

/* Background Image */
.hero-background {
    position: absolute;
    inset: 0;
    background-image: url('../cancun-vows-paradise-main/public/lovable-uploads/82136e31-ed61-4135-9a31-b85a9d28b2e1.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* Overlay */
.hero-overlay {
    position: absolute;
    inset: 0;
    background: var(--gradient-hero);
}

/* Content Container */
.hero-content {
    position: relative;
    z-index: 10;
    text-align: center;
    color: white;
    /* Usa container padronizado */
}

/* Trust Badge */
.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 9999px;
    padding: 0.75rem 1.5rem;
    margin-bottom: 2rem;
}

.hero-stars {
    display: flex;
    gap: 0.125rem;
}

.hero-stars svg {
    width: 1rem;
    height: 1rem;
    fill: hsl(var(--primary));
    color: hsl(var(--primary));
}

.hero-badge-text {
    font-size: 0.875rem;
    font-weight: 500;
    letter-spacing: 0.05em;
}

/* Main Headline - EXATAMENTE como no Vite React */
/* Corresponde a: mb-8 max-w-5xl mx-auto */
.hero-headline {
    margin-bottom: 2rem; /* mb-8 = 32px = 2rem */
    max-width: 64rem; /* max-w-5xl = 1024px = 64rem */
    margin-left: auto;
    margin-right: auto;
}

/* Mobile: text-3xl (1.875rem/30px) */
/* md: text-4xl (2.25rem/36px) */
.hero-line-1 {
    display: block;
    font-family: Inter, sans-serif;
    font-weight: 300; /* font-light */
    font-size: 1.875rem; /* text-3xl */
    margin-bottom: 1rem; /* mb-4 = 16px = 1rem */
    letter-spacing: 0.025em; /* tracking-wide */
}

/* Mobile: text-5xl (3rem/48px) */
/* md: text-7xl (4.5rem/72px) */
/* lg: text-8xl (6rem/96px) */
.hero-line-2 {
    display: block;
    font-family: 'Playfair Display', serif;
    font-weight: 600;
    font-size: 3rem; /* text-5xl */
    line-height: 1; /* leading-none */
    margin-bottom: 1rem; /* mb-4 = 16px = 1rem */
    letter-spacing: -0.025em;
    color: hsl(var(--foreground));
}

/* Mobile: text-3xl (1.875rem/30px) */
/* md: text-4xl (2.25rem/36px) */
.hero-line-3 {
    display: block;
    font-family: Inter, sans-serif;
    font-weight: 300; /* font-light */
    font-size: 1.875rem; /* text-3xl */
    letter-spacing: 0.025em; /* tracking-wide */
}

/* md breakpoint (min-width: 768px) */
@media (min-width: 768px) {
    .hero-line-1 {
        font-size: 2.25rem; /* md:text-4xl */
    }
    
    .hero-line-2 {
        font-size: 4.5rem; /* md:text-7xl */
    }
    
    .hero-line-3 {
        font-size: 2.25rem; /* md:text-4xl */
    }
}

/* lg breakpoint (min-width: 1024px) */
@media (min-width: 1024px) {
    .hero-line-2 {
        font-size: 6rem; /* lg:text-8xl */
    }
}

.hero-emphasis {
    font-family: 'Playfair Display', serif;
    font-weight: 400;
    font-style: italic;
    color: hsl(var(--primary));
}

/* Subtitle - EXATAMENTE como no Vite React */
/* Corresponde a: elegant-text text-lg md:text-xl mb-12 max-w-2xl mx-auto leading-relaxed */
.hero-description {
    font-family: Inter, sans-serif;
    font-weight: 300;
    letter-spacing: 0.025em; /* elegant-text */
    color: rgba(255, 255, 255, 0.9); /* Texto branco para hero section */
    font-size: 1.125rem; /* text-lg = 18px = 1.125rem */
    margin-bottom: 3rem; /* mb-12 = 48px = 3rem */
    max-width: 42rem; /* max-w-2xl = 672px = 42rem */
    margin-left: auto;
    margin-right: auto;
    line-height: 1.625; /* leading-relaxed */
}

/* md breakpoint (min-width: 768px) */
@media (min-width: 768px) {
    .hero-description {
        font-size: 1.25rem; /* md:text-xl = 20px = 1.25rem */
    }
}

/* Video Play Button - EXATAMENTE como no Vite React */
/* Corresponde a: mb-12 */
.hero-video {
    margin-bottom: 3rem; /* mb-12 = 48px = 3rem */
}

/* Corresponde a: w-20 h-20 md:w-24 md:h-24 bg-white/20 backdrop-blur-sm border-2 border-white/30 rounded-full hover:bg-white/30 transition-all duration-300 */
.hero-play-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 5rem; /* w-20 = 80px = 5rem */
    height: 5rem; /* h-20 = 80px = 5rem */
    margin: 0 auto;
    background: rgba(255, 255, 255, 0.2); /* bg-white/20 */
    backdrop-filter: blur(4px); /* backdrop-blur-sm */
    border: 2px solid rgba(255, 255, 255, 0.3); /* border-2 border-white/30 */
    border-radius: 50%; /* rounded-full */
    transition: all 0.3s ease; /* transition-all duration-300 */
    cursor: pointer;
}

.hero-play-button:hover {
    background: rgba(255, 255, 255, 0.3); /* hover:bg-white/30 */
    transform: scale(1.1); /* group-hover:scale-110 */
}

/* Corresponde a: w-8 h-8 md:w-10 md:h-10 text-white ml-1 */
.hero-play-button svg {
    width: 2rem; /* w-8 = 32px = 2rem */
    height: 2rem; /* h-8 = 32px = 2rem */
    color: white; /* text-white */
    fill: white;
    margin-left: 0.25rem; /* ml-1 = 4px = 0.25rem */
    transition: transform 0.3s ease;
}

/* md breakpoint (min-width: 768px) */
@media (min-width: 768px) {
    .hero-play-button {
        width: 6rem; /* md:w-24 = 96px = 6rem */
        height: 6rem; /* md:h-24 = 96px = 6rem */
    }
    
    .hero-play-button svg {
        width: 2.5rem; /* md:w-10 = 40px = 2.5rem */
        height: 2.5rem; /* md:h-10 = 40px = 2.5rem */
    }
}

/* Corresponde a: text-sm mt-3 text-white/80 */
.hero-video-text {
    font-size: 0.875rem; /* text-sm = 14px = 0.875rem */
    margin-top: 0.75rem; /* mt-3 = 12px = 0.75rem */
    color: rgba(255, 255, 255, 0.8); /* text-white/80 */
}

/* Classes utilitárias Tailwind - EXATAS */
/* Corresponde a: flex flex-col sm:flex-row gap-4 justify-center items-center mb-12 */
.flex { display: flex; }
.flex-col { flex-direction: column; }
.gap-4 { gap: 1rem; } /* gap-4 = 16px = 1rem */
.justify-center { justify-content: center; }
.items-center { align-items: center; }
.mb-12 { margin-bottom: 3rem; } /* mb-12 = 48px = 3rem */

/* Display utilities - hidden/show */
.hidden { display: none; }
.inline-flex { display: inline-flex; }

/* sm breakpoint (min-width: 640px) */
@media (min-width: 640px) {
    .sm\:flex-row {
        flex-direction: row;
    }
    
    .sm\:inline-flex {
        display: inline-flex;
    }
}

/* Sistema de botões - REPLICANDO button component do shadcn/ui */
/* Base button classes */
.inline-flex { display: inline-flex; }
.items-center { align-items: center; }
.justify-center { justify-content: center; }
.gap-2 { gap: 0.5rem; } /* gap-2 = 8px = 0.5rem */
.whitespace-nowrap { white-space: nowrap; }
.ring-offset-background { --tw-ring-offset-color: hsl(var(--background)); }
.focus-visible\:outline-none:focus-visible { outline: 2px solid transparent; outline-offset: 2px; }
.focus-visible\:ring-2:focus-visible { --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color); box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000); }
.focus-visible\:ring-ring:focus-visible { --tw-ring-color: hsl(var(--ring)); }
.focus-visible\:ring-offset-2:focus-visible { --tw-ring-offset-width: 2px; }
.disabled\:pointer-events-none:disabled { pointer-events: none; }
.disabled\:opacity-50:disabled { opacity: 0.5; }
.bg-primary { background-color: hsl(var(--primary)); }
.hover\:bg-primary\/90:hover { background-color: hsl(var(--primary) / 0.9); }
.h-11 { height: 2.75rem; } /* h-11 = 44px = 2.75rem */
.rounded-md { border-radius: calc(var(--radius) - 2px); }
.text-lg { font-size: 1.125rem; line-height: 1.75rem; } /* text-lg */
.font-semibold { font-weight: 600; }
.px-12 { padding-left: 3rem; padding-right: 3rem; } /* px-12 = 48px = 3rem */
.px-8 { padding-left: 2rem; padding-right: 2rem; } /* px-8 = 32px = 2rem */
.py-4 { padding-top: 1rem; padding-bottom: 1rem; } /* py-4 = 16px = 1rem */

/* Variante gold-gradient */
.gold-gradient {
    background: var(--gradient-gold);
    color: hsl(var(--secondary));
}

.hover\:scale-105:hover {
    transform: scale(1.05);
}

.transition-transform {
    transition-property: transform;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}

.elegant-shadow {
    box-shadow: var(--shadow-elegant);
}

/* Button outline variant */
.border { border-width: 1px; }
.bg-background { background-color: hsl(var(--background)); }
.border-primary\/50 { border-color: hsl(var(--primary) / 0.5); }
.text-primary { color: hsl(var(--primary)); }
.hover\:bg-primary:hover { background-color: hsl(var(--primary)); }
.hover\:text-white:hover { color: rgb(255, 255, 255); }
.backdrop-blur-sm { backdrop-filter: blur(4px); }
.font-medium { font-weight: 500; }
.transition-colors { transition-property: color, background-color, border-color, text-decoration-color, fill, stroke; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; }

/* Benefits List - EXATAMENTE como no Vite React */
/* Corresponde a: flex flex-col sm:flex-row items-center justify-center gap-6 text-sm text-white/90 flex-wrap */
.hero-benefits {
    display: flex; /* flex */
    flex-direction: column; /* flex-col */
    align-items: center; /* items-center */
    justify-content: center; /* justify-center */
    gap: 1.5rem; /* gap-6 = 24px = 1.5rem */
    font-size: 0.875rem; /* text-sm = 14px = 0.875rem */
    color: rgba(255, 255, 255, 0.9); /* text-white/90 */
    flex-wrap: wrap; /* flex-wrap */
}

/* Cada span com: flex items-center gap-2 */
.hero-benefit {
    display: flex; /* flex */
    align-items: center; /* items-center */
    gap: 0.5rem; /* gap-2 = 8px = 0.5rem */
}

/* Separador: w-1 h-1 bg-white/40 rounded-full hidden sm:block */
.hero-separator {
    width: 0.25rem; /* w-1 = 4px = 0.25rem */
    height: 0.25rem; /* h-1 = 4px = 0.25rem */
    background: rgba(255, 255, 255, 0.4); /* bg-white/40 */
    border-radius: 50%; /* rounded-full */
    display: none; /* hidden */
}

/* sm breakpoint (min-width: 640px) */
@media (min-width: 640px) {
    .hero-benefits {
        flex-direction: row; /* sm:flex-row */
    }
    
    .hero-separator {
        display: block; /* sm:block */
    }
}

/* Scroll Indicator - EXATAMENTE como no Vite React */
/* Corresponde a: absolute bottom-8 left-1/2 transform -translate-x-1/2 */
.hero-scroll {
    position: absolute; /* absolute */
    bottom: 2rem; /* bottom-8 = 32px = 2rem */
    left: 50%; /* left-1/2 */
    transform: translateX(-50%); /* -translate-x-1/2 */
}

/* Corresponde a: w-0.5 h-16 bg-white/30 relative */
.hero-scroll-line {
    width: 0.125rem; /* w-0.5 = 2px = 0.125rem */
    height: 4rem; /* h-16 = 64px = 4rem */
    background: rgba(255, 255, 255, 0.3); /* bg-white/30 */
    position: relative; /* relative */
}

/* Corresponde a: absolute top-0 w-0.5 h-4 bg-white animate-pulse */
.hero-scroll-indicator {
    position: absolute; /* absolute */
    top: 0; /* top-0 */
    width: 0.125rem; /* w-0.5 = 2px = 0.125rem */
    height: 1rem; /* h-4 = 16px = 1rem */
    background: white; /* bg-white */
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; /* animate-pulse */
}

/* Corresponde a: text-xs text-white/60 mt-2 tracking-widest */
.hero-scroll-text {
    font-size: 0.75rem; /* text-xs = 12px = 0.75rem */
    color: rgba(255, 255, 255, 0.6); /* text-white/60 */
    margin-top: 0.5rem; /* mt-2 = 8px = 0.5rem */
    letter-spacing: 0.1em; /* tracking-widest */
}

/* Animação pulse do Tailwind */
@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}