/* ============================================
   SPLASH INTRO & HOMEPAGE ANIMATIONS
   Cinematic entrance + scroll-reveal effects
   ============================================ */

/* ─── 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 background — dark gradient with mountain feel */
.splash-bg {
    position: absolute;
    inset: 0;
    overflow: hidden;
    background: 
        radial-gradient(ellipse at 50% 120%, rgba(26, 58, 42, 0.6) 0%, transparent 60%),
        radial-gradient(ellipse at 50% -20%, rgba(74, 144, 217, 0.15) 0%, transparent 50%),
        linear-gradient(180deg, #0a1912 0%, #0f1e2d 40%, #081c10 100%);
    z-index: 0;
}
.splash-bg::before,
.splash-bg::after {
    content: "";
    position: absolute;
    pointer-events: none;
}
.splash-bg::before {
    inset: auto -8% -4% -8%;
    height: 42%;
    background:
        linear-gradient(180deg, rgba(6, 12, 11, 0) 0%, rgba(6, 12, 11, 0.94) 100%),
        linear-gradient(135deg, rgba(168, 230, 207, 0.16) 0%, rgba(74, 144, 217, 0.08) 100%);
    clip-path: polygon(0 100%, 0 68%, 11% 54%, 21% 63%, 32% 38%, 43% 66%, 56% 30%, 68% 58%, 81% 44%, 100% 70%, 100% 100%);
    opacity: 0.92;
}
.splash-bg::after {
    top: 12%;
    left: 50%;
    width: min(75vw, 900px);
    height: min(52vw, 560px);
    transform: translateX(-50%);
    background: radial-gradient(circle, rgba(122, 184, 245, 0.24) 0%, rgba(122, 184, 245, 0.08) 38%, transparent 72%);
    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 */
.splash-particles {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    overflow: hidden;
}
.s-particle {
    position: absolute;
    width: 2px;
    height: 2px;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    animation: sParticleDrift linear infinite;
}
.s-particle:nth-child(1) { left: 8%;  top: 20%; animation-duration: 18s; animation-delay: 0s; width: 3px; height: 3px; }
.s-particle:nth-child(2) { left: 22%; top: 60%; animation-duration: 22s; animation-delay: 2s; }
.s-particle:nth-child(3) { left: 38%; top: 30%; animation-duration: 15s; animation-delay: 4s; width: 4px; height: 4px; }
.s-particle:nth-child(4) { left: 55%; top: 70%; animation-duration: 20s; animation-delay: 1s; }
.s-particle:nth-child(5) { left: 70%; top: 15%; animation-duration: 17s; animation-delay: 3s; width: 3px; height: 3px; }
.s-particle:nth-child(6) { left: 85%; top: 50%; animation-duration: 25s; animation-delay: 5s; }
.s-particle:nth-child(7) { left: 45%; top: 85%; animation-duration: 19s; animation-delay: 7s; width: 2px; height: 2px; }
.s-particle:nth-child(8) { left: 92%; top: 35%; animation-duration: 21s; animation-delay: 6s; }
@keyframes sParticleDrift {
    0%   { transform: translate(0, 0) scale(1); opacity: 0; }
    15%  { opacity: 0.6; }
    50%  { transform: translate(-30px, -60px) scale(1.3); opacity: 0.4; }
    85%  { opacity: 0.5; }
    100% { transform: translate(20px, -120px) scale(0.8); opacity: 0; }
}

/* Generated snowfall layers */
.splash-snow,
.hero-snow {
    position: absolute;
    inset: -10% 0 0;
    pointer-events: none;
    overflow: hidden;
}
.splash-snow {
    z-index: 1;
}
.hero-snow {
    z-index: 1;
    opacity: 0.8;
}
.snowflake {
    position: absolute;
    top: -12%;
    width: var(--size, 8px);
    height: var(--size, 8px);
    border-radius: 999px;
    background: radial-gradient(circle at 35% 35%, rgba(255, 255, 255, 0.98) 0%, rgba(255, 255, 255, 0.76) 42%, rgba(255, 255, 255, 0.04) 100%);
    opacity: var(--opacity, 0.7);
    filter: blur(var(--blur, 0px));
    animation: snowDrift var(--duration, 14s) linear infinite;
    animation-delay: var(--delay, 0s);
    will-change: transform;
}
.hero-snow .snowflake {
    background: radial-gradient(circle at 35% 35%, rgba(255, 255, 255, 0.82) 0%, rgba(255, 255, 255, 0.42) 48%, rgba(255, 255, 255, 0.02) 100%);
}
@keyframes snowDrift {
    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;
}

/* Mountain icon mark */
.splash-logo-mark {
    font-size: 2.5rem;
    color: rgba(122, 184, 245, 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 — each word animates in */
.splash-heading {
    font-family: var(--font-heading, Georgia, serif);
    font-size: clamp(3rem, 10vw, 7rem);
    font-weight: 800;
    letter-spacing: 6px;
    line-height: 1.05;
    margin: 0;
    text-transform: uppercase;
    text-shadow: 0 4px 40px rgba(0, 0, 0, 0.6);
}
.splash-word {
    display: inline-block;
    opacity: 0;
    transform: translateY(50px) rotateX(20deg);
    animation: splashWordIn 0.9s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.splash-word[data-delay="0"]   { animation-delay: 0.6s; }
.splash-word[data-delay="150"] { animation-delay: 0.75s; }
.splash-word[data-delay="300"] { animation-delay: 0.9s; }
@keyframes splashWordIn {
    to {
        opacity: 1;
        transform: translateY(0) rotateX(0);
    }
}

/* Decorative rule / divider */
.splash-rule {
    width: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(122, 184, 245, 0.8), rgba(168, 230, 207, 0.8), transparent);
    margin: 1.25rem auto;
    animation: splashRuleGrow 1s cubic-bezier(0.16, 1, 0.3, 1) 1.2s forwards;
}
@keyframes splashRuleGrow {
    to { width: min(400px, 80vw); }
}

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

/* Enter button */
.splash-enter {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.9rem 2.5rem;
    font-size: 1rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 3px;
    color: #fff;
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 2px solid rgba(255, 255, 255, 0.25);
    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 1.9s forwards;
}
.splash-enter:hover {
    background: rgba(255, 255, 255, 0.18);
    border-color: rgba(255, 255, 255, 0.5);
    transform: translateY(-2px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3);
}
.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, #7ab8f5, #5dade2, #a8e6cf);
    -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(122, 184, 245, 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(122, 184, 245, 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(--pine, #1a3a2a), 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,
    .snowflake { 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-snow {
        opacity: 0.55;
    }
}

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