/* ============================================
   SPLASH INTRO & HOMEPAGE ANIMATIONS
   Cinematic entrance + scroll-reveal effects
   Ocean theme — deep water shimmer
   ============================================ */

/* ─── SPLASH INTRO OVERLAY ─── */
.splash-intro {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1),
                transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}
.splash-intro.exiting {
    opacity: 0;
    transform: scale(1.05);
    pointer-events: none;
}
.splash-intro.hidden {
    display: none;
}

/* Splash photo — faded background image of Ensenada coast */
.splash-photo {
    position: absolute;
    inset: 0;
    background: url('../media/ENSENADA - MEDIA - COAST.png') center/cover no-repeat;
    opacity: 0.15;
    z-index: 0;
    filter: saturate(1.3);
}

/* Second wave layer — parallax depth */
.splash-wave-2 {
    position: absolute;
    bottom: -2%;
    left: -5%;
    right: -5%;
    height: 30%;
    background: linear-gradient(180deg, transparent 0%, rgba(26, 58, 90, 0.4) 50%, rgba(20, 50, 80, 0.7) 100%);
    clip-path: polygon(
        0 100%, 0 85%,
        3% 80%, 7% 83%, 11% 78%, 17% 82%, 23% 76%, 29% 80%, 35% 74%, 41% 78%,
        47% 73%, 53% 77%, 59% 72%, 65% 76%, 71% 70%, 77% 74%, 83% 69%, 89% 73%,
        95% 68%, 100% 72%, 100% 100%
    );
    z-index: 1;
    opacity: 0.6;
    animation: waveShift2 12s ease-in-out infinite alternate;
}
@keyframes waveShift2 {
    0% { transform: translateX(8px); }
    100% { transform: translateX(-8px); }
}

/* Splash background — sunset beach gradient */
.splash-bg {
    position: absolute;
    inset: 0;
    overflow: hidden;
    background:
        radial-gradient(ellipse at 50% 20%, rgba(230, 140, 50, 0.15) 0%, transparent 50%),
        radial-gradient(ellipse at 30% 80%, rgba(46, 134, 171, 0.2) 0%, transparent 40%),
        radial-gradient(ellipse at 70% 90%, rgba(26, 122, 109, 0.15) 0%, transparent 35%),
        linear-gradient(180deg, #1a1a2e 0%, #16213e 25%, #0f3460 50%, #1a4a6e 70%, #2e6e8e 85%, #3a8a9e 100%);
    z-index: 0;
}
.splash-bg::before,
.splash-bg::after {
    content: "";
    position: absolute;
    pointer-events: none;
}
/* Gentle ocean waves at the bottom — smooth curves, not mountain peaks */
.splash-bg::before {
    inset: auto -8% -4% -8%;
    height: 35%;
    background:
        linear-gradient(180deg, transparent 0%, rgba(46, 134, 171, 0.3) 40%, rgba(26, 90, 120, 0.6) 100%);
    clip-path: polygon(
        0 100%, 0 82%,
        4% 78%, 8% 80%, 12% 76%, 18% 79%, 24% 74%, 30% 77%, 36% 72%, 42% 76%,
        48% 71%, 54% 75%, 60% 70%, 66% 74%, 72% 69%, 78% 73%, 84% 68%, 90% 72%,
        96% 67%, 100% 70%, 100% 100%
    );
    opacity: 0.85;
    animation: waveShift 8s ease-in-out infinite alternate;
}
@keyframes waveShift {
    0% { transform: translateX(0); }
    100% { transform: translateX(-12px); }
}
/* Warm sunset glow — golden/orange at top center */
.splash-bg::after {
    top: 5%;
    left: 50%;
    width: min(85vw, 1000px);
    height: min(45vw, 500px);
    transform: translateX(-50%);
    background: radial-gradient(ellipse at 50% 30%, rgba(230, 160, 50, 0.25) 0%, rgba(226, 114, 91, 0.12) 30%, transparent 65%);
    filter: blur(44px);
    animation: splashGlowPulse 10s ease-in-out infinite;
}
@keyframes splashGlowPulse {
    0%, 100% { opacity: 0.45; transform: translateX(-50%) scale(0.96); }
    50% { opacity: 0.82; transform: translateX(-50%) scale(1.05); }
}

/* Splash floating particles — light refracting through water */
.splash-particles {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    overflow: hidden;
}
.s-particle {
    position: absolute;
    width: 2px;
    height: 2px;
    background: rgba(212, 185, 100, 0.3);
    border-radius: 50%;
    animation: sParticleDrift linear infinite;
}
.s-particle:nth-child(1) { left: 8%;  top: 80%; animation-duration: 18s; animation-delay: 0s; width: 3px; height: 3px; }
.s-particle:nth-child(2) { left: 22%; top: 90%; animation-duration: 22s; animation-delay: 2s; }
.s-particle:nth-child(3) { left: 38%; top: 75%; animation-duration: 15s; animation-delay: 4s; width: 4px; height: 4px; }
.s-particle:nth-child(4) { left: 55%; top: 85%; animation-duration: 20s; animation-delay: 1s; }
.s-particle:nth-child(5) { left: 70%; top: 92%; animation-duration: 17s; animation-delay: 3s; width: 3px; height: 3px; }
.s-particle:nth-child(6) { left: 85%; top: 70%; animation-duration: 25s; animation-delay: 5s; }
.s-particle:nth-child(7) { left: 45%; top: 88%; animation-duration: 19s; animation-delay: 7s; width: 2px; height: 2px; }
.s-particle:nth-child(8) { left: 92%; top: 78%; animation-duration: 21s; animation-delay: 6s; }
@keyframes sParticleDrift {
    0%   { transform: translate(0, 0) scale(1); opacity: 0; }
    15%  { opacity: 0.5; }
    50%  { transform: translate(-20px, -80px) scale(1.3); opacity: 0.35; }
    85%  { opacity: 0.4; }
    100% { transform: translate(15px, -160px) scale(0.8); opacity: 0; }
}

/* Generated shimmer layers — ocean light bubbles */
.splash-shimmer,
.hero-shimmer {
    position: absolute;
    inset: 0 0 -10%;
    pointer-events: none;
    overflow: hidden;
}
.splash-shimmer {
    z-index: 1;
}
.hero-shimmer {
    z-index: 1;
    opacity: 0.8;
}
.shimmer {
    position: absolute;
    bottom: -12%;
    width: var(--size, 8px);
    height: var(--size, 8px);
    border-radius: 999px;
    background: radial-gradient(circle at 35% 35%, rgba(230, 200, 120, 0.9) 0%, rgba(212, 185, 100, 0.6) 42%, rgba(212, 185, 100, 0.04) 100%);
    opacity: var(--opacity, 0.7);
    filter: blur(var(--blur, 0px));
    animation: shimmerRise var(--duration, 14s) linear infinite;
    animation-delay: var(--delay, 0s);
    will-change: transform;
}
.hero-shimmer .shimmer {
    background: radial-gradient(circle at 35% 35%, rgba(212, 195, 130, 0.7) 0%, rgba(180, 160, 90, 0.35) 48%, rgba(180, 160, 90, 0.02) 100%);
}
@keyframes shimmerRise {
    0% {
        transform: translate3d(0, 14vh, 0) scale(0.96);
    }
    35% {
        transform: translate3d(var(--drift-mid, 12px), -32vh, 0) scale(1.04);
    }
    68% {
        transform: translate3d(var(--drift-late, -4px), -70vh, 0) scale(0.92);
    }
    100% {
        transform: translate3d(var(--drift-end, 24px), -116vh, 0) scale(1.08);
    }
}

/* Splash content container */
.splash-content {
    position: relative;
    z-index: 2;
    text-align: center;
    color: #fff;
    padding: 2rem;
    max-width: 900px;
}

/* Ocean icon mark */
.splash-logo-mark {
    font-size: 2.5rem;
    color: rgba(212, 185, 100, 0.7);
    margin-bottom: 1.5rem;
    opacity: 0;
    transform: translateY(30px) scale(0.5);
    animation: splashMarkIn 1s cubic-bezier(0.16, 1, 0.3, 1) 0.3s forwards;
}
@keyframes splashMarkIn {
    to { opacity: 1; transform: translateY(0) scale(1); }
}

/* Splash heading — ENSENADA as one word */
.splash-heading {
    font-family: var(--font-heading, Georgia, serif);
    font-size: clamp(3.5rem, 12vw, 8rem);
    font-weight: 800;
    letter-spacing: 8px;
    line-height: 1;
    margin: 0;
    text-transform: uppercase;
    text-shadow: 0 4px 40px rgba(0, 0, 0, 0.6);
}
.splash-word.splash-full {
    display: inline-block;
    opacity: 0;
    transform: translateY(60px) scale(0.8);
    animation: splashWordIn 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.5s forwards;
    background: linear-gradient(135deg, #fff 0%, #5eb8d9 40%, #d4a739 70%, #e2725b 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.splash-word[data-delay="0"]   { animation-delay: 0.5s; }
.splash-word[data-delay="150"] { animation-delay: 0.65s; }
.splash-word[data-delay="300"] { animation-delay: 0.8s; }
@keyframes splashWordIn {
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* "esta" branding above the title */
.splash-esta {
    font-family: var(--font-heading, Georgia, serif);
    font-size: clamp(1rem, 3vw, 1.6rem);
    font-weight: 300;
    font-style: italic;
    letter-spacing: 6px;
    text-transform: lowercase;
    color: rgba(212, 175, 80, 0.8);
    margin: 0.5rem 0 0;
    opacity: 0;
    animation: splashEstaIn 0.8s ease 1s forwards;
}
@keyframes splashEstaIn {
    to { opacity: 1; }
}

/* Feature pills under subtitle */
.splash-features {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 2rem;
    opacity: 0;
    animation: splashSubIn 0.8s ease 1.8s forwards;
}
.splash-features span {
    font-size: 0.8rem;
    font-weight: 500;
    letter-spacing: 1px;
    color: rgba(255,255,255,0.7);
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.12);
    padding: 0.4rem 1rem;
    border-radius: 20px;
    backdrop-filter: blur(4px);
}
.splash-features span i {
    margin-right: 6px;
    color: rgba(212, 175, 80, 0.8);
}

/* Decorative rule / divider — warm sunset gradient */
.splash-rule {
    width: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(212, 175, 80, 0.8), rgba(230, 160, 60, 0.8), rgba(226, 114, 91, 0.6), transparent);
    margin: 1rem auto;
    animation: splashRuleGrow 1.2s cubic-bezier(0.16, 1, 0.3, 1) 1.2s forwards;
}
@keyframes splashRuleGrow {
    to { width: min(500px, 85vw); }
}

/* Subtitle tagline */
.splash-sub {
    font-size: clamp(1rem, 2.8vw, 1.4rem);
    font-weight: 300;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.65);
    margin: 0 0 1.5rem;
    opacity: 0;
    transform: translateY(20px);
    animation: splashSubIn 0.8s ease 1.5s forwards;
}
@keyframes splashSubIn {
    to { opacity: 1; transform: translateY(0); }
}

/* Enter button — warm golden glow */
.splash-enter {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 3rem;
    font-size: 1.05rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 3px;
    color: #fff;
    background: linear-gradient(135deg, rgba(212, 167, 57, 0.3), rgba(226, 114, 91, 0.25));
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 2px solid rgba(212, 175, 80, 0.4);
    border-radius: 60px;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    opacity: 0;
    transform: translateY(20px);
    animation: splashBtnIn 0.8s ease 2.2s forwards;
    box-shadow: 0 0 30px rgba(212, 167, 57, 0.1);
}
.splash-enter:hover {
    background: linear-gradient(135deg, rgba(212, 167, 57, 0.5), rgba(226, 114, 91, 0.4));
    border-color: rgba(212, 175, 80, 0.7);
    transform: translateY(-3px);
    box-shadow: 0 8px 40px rgba(212, 167, 57, 0.25);
}
.splash-enter:active {
    transform: scale(0.97);
}
.splash-enter i {
    transition: transform 0.3s ease;
}
.splash-enter:hover i {
    transform: translateX(4px);
}
@keyframes splashBtnIn {
    to { opacity: 1; transform: translateY(0); }
}

/* ─── HERO SPLASH TITLE (after entering) ─── */
.splash-title {
    font-family: var(--font-heading, Georgia, serif);
    font-size: clamp(2.5rem, 7vw, 4.5rem);
    font-weight: 800;
    line-height: 1.1;
    margin-bottom: 0.75rem;
    text-shadow: 0 4px 30px rgba(0, 0, 0, 0.5);
    letter-spacing: -0.5px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.15rem;
}
.splash-line {
    display: block;
    opacity: 0;
    transform: translateY(25px);
}
.splash-line-1 {
    font-size: clamp(2.8rem, 8vw, 5rem);
    background: linear-gradient(135deg, #5dade2, #2e86ab, #d4af37);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    letter-spacing: 4px;
    text-transform: uppercase;
}
.splash-line-2,
.splash-line-3 {
    font-size: clamp(1.1rem, 3vw, 1.8rem);
    font-weight: 300;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.85);
    -webkit-text-fill-color: initial;
}
.splash-divider {
    display: block;
    width: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(212, 175, 80, 0.6), transparent);
    margin: 0.4rem auto;
    transition: width 1s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Animate hero title lines on reveal */
.hero-content.revealed .splash-line {
    animation: heroLineIn 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.hero-content.revealed .splash-line-1 { animation-delay: 0.1s; }
.hero-content.revealed .splash-line-2 { animation-delay: 0.5s; }
.hero-content.revealed .splash-line-3 { animation-delay: 0.65s; }
.hero-content.revealed .splash-divider { width: min(300px, 60vw); transition-delay: 0.35s; }

/* Animate other hero children */
.hero-content .hero-eyebrow,
.hero-content .hero-tagline,
.hero-content .hero-actions,
.hero-content .hero-highlights {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.hero-content.revealed .hero-eyebrow {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0s;
}
.hero-content.revealed .hero-tagline {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.8s;
}
.hero-content.revealed .hero-actions {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 1s;
}
.hero-content.revealed .hero-highlights {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 1.15s;
}

/* Animate hero status shell */
.hero .hero-status-shell {
    opacity: 0;
    transition: opacity 0.6s ease 1.2s;
}
.hero-content.revealed ~ .hero-status-shell {
    opacity: 1;
}

@keyframes heroLineIn {
    to { opacity: 1; transform: translateY(0); }
}

/* ─── SCROLL-REVEAL ANIMATIONS ─── */
.reveal-on-scroll {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal-on-scroll.revealed {
    opacity: 1;
    transform: translateY(0);
}

/* Staggered children */
.reveal-stagger > * {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal-stagger.revealed > *:nth-child(1)  { transition-delay: 0.05s; }
.reveal-stagger.revealed > *:nth-child(2)  { transition-delay: 0.10s; }
.reveal-stagger.revealed > *:nth-child(3)  { transition-delay: 0.15s; }
.reveal-stagger.revealed > *:nth-child(4)  { transition-delay: 0.20s; }
.reveal-stagger.revealed > *:nth-child(5)  { transition-delay: 0.25s; }
.reveal-stagger.revealed > *:nth-child(6)  { transition-delay: 0.30s; }
.reveal-stagger.revealed > *:nth-child(7)  { transition-delay: 0.35s; }
.reveal-stagger.revealed > *:nth-child(8)  { transition-delay: 0.40s; }
.reveal-stagger.revealed > * {
    opacity: 1;
    transform: translateY(0);
}

/* Slide-in from sides */
.reveal-left {
    opacity: 0;
    transform: translateX(-50px);
    transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal-right {
    opacity: 0;
    transform: translateX(50px);
    transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal-left.revealed,
.reveal-right.revealed {
    opacity: 1;
    transform: translateX(0);
}

/* Scale-in effect */
.reveal-scale {
    opacity: 0;
    transform: scale(0.85);
    transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal-scale.revealed {
    opacity: 1;
    transform: scale(1);
}

/* ─── STAT COUNTER ANIMATION ─── */
.stat-number[data-count] {
    transition: color 0.3s ease;
}
.stat-number.counting {
    color: var(--sky, #4a90d9);
}

/* ─── DISCOVER TILE HOVER GLOW ─── */
.discover-tile::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 16px;
    opacity: 0;
    transition: opacity 0.4s ease;
    background: radial-gradient(circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
        rgba(70, 160, 210, 0.15) 0%, transparent 60%);
    z-index: 3;
    pointer-events: none;
}
.discover-tile:hover::after {
    opacity: 1;
}

/* ─── SECTION TITLE UNDERLINE ANIMATION ─── */
.section-title {
    position: relative;
    display: inline-block;
}
.section-head .section-title::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--ocean, #1a2a3a), var(--sky, #4a90d9));
    border-radius: 2px;
    transition: width 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.section-head.revealed .section-title::after {
    width: 60px;
}

/* ─── SMOOTH BODY LOCK DURING SPLASH ─── */
body.splash-active {
    overflow: hidden;
}

/* ─── REDUCED MOTION ─── */
@media (prefers-reduced-motion: reduce) {
    .splash-intro { transition: opacity 0.3s ease; }
    .splash-logo-mark,
    .splash-word,
    .splash-sub,
    .splash-enter { animation-duration: 0.01s !important; animation-delay: 0s !important; opacity: 1; transform: none; }
    .splash-rule { animation-duration: 0.01s !important; animation-delay: 0s !important; width: min(400px, 80vw); }
    .reveal-on-scroll,
    .reveal-left,
    .reveal-right,
    .reveal-scale,
    .reveal-stagger > * {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
    .splash-line { opacity: 1 !important; transform: none !important; animation: none !important; }
    .splash-divider { width: min(300px, 60vw) !important; }
    .s-particle,
    .shimmer { animation: none; display: none; }
    .splash-bg::after { animation: none; }
}

/* ─── MOBILE ADJUSTMENTS ─── */
@media (max-width: 768px) {
    .splash-heading {
        font-size: clamp(2.5rem, 14vw, 5rem);
        letter-spacing: 3px;
    }
    .splash-sub {
        font-size: clamp(0.85rem, 3.5vw, 1.2rem);
        letter-spacing: 2px;
    }
    .splash-enter {
        padding: 0.75rem 2rem;
        font-size: 0.9rem;
    }
    .splash-title {
        font-size: clamp(2rem, 8vw, 3.5rem);
    }
    .splash-line-1 {
        font-size: clamp(2.2rem, 10vw, 4rem);
    }
    .splash-bg::before {
        height: 36%;
    }
    .hero-shimmer {
        opacity: 0.55;
    }
}

@media (max-width: 480px) {
    .splash-heading {
        font-size: clamp(2rem, 15vw, 4rem);
        letter-spacing: 2px;
    }
    .splash-sub {
        letter-spacing: 1px;
    }
}