/* 
==========================================================================
   wtt-journey-bg.css
   "Cinematic Floating Aurora" Background Atmosphere for WayToTrip
========================================================================== 
*/

/* 1. Main Background Container
-------------------------------------------------------------------------- */
.wtt-atmosphere {
    position: absolute;
    inset: 0;
    z-index: -1; /* Behind other content children of main-content-flow */
    pointer-events: none;
    overflow: hidden;
    opacity: 0;
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1);
    background: linear-gradient(180deg, #071018 0%, #0b1522 35%, #111827 70%, #0a1018 100%);
}

/* 2. Visual Stacking Depth Layers
-------------------------------------------------------------------------- */
.wtt-travel-bg-layer {
    position: absolute;
    inset: 0;
    pointer-events: none;
    will-change: transform;
}

.wtt-travel-bg-layer-far {
    z-index: 10;
    transform: translateY(calc(var(--wtt-scroll-far, 0) * 1px)) translate3d(var(--wtt-mouse-far-x, 0px), var(--wtt-mouse-far-y, 0px), 0);
}

.wtt-travel-bg-layer-mid {
    z-index: 20;
    transform: translateY(calc(var(--wtt-scroll-mid, 0) * 1px)) translate3d(var(--wtt-mouse-mid-x, 0px), var(--wtt-mouse-mid-y, 0px), 0);
}

.wtt-travel-bg-layer-near {
    z-index: 30;
    transform: translateY(calc(var(--wtt-scroll-near, 0) * 1px)) translate3d(var(--wtt-mouse-near-x, 0px), var(--wtt-mouse-near-y, 0px), 0);
}

/* 3. Floating Aurora Blobs (Clearly Visible, Enhanced Night Effect)
-------------------------------------------------------------------------- */
.wtt-atmosphere-blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(150px);
    pointer-events: none;
    mix-blend-mode: screen;
    will-change: transform;
}

/* Specific keyframes for noticeable float & rotation wave movements */
@keyframes wtt-aurora-move-1 {
    0% { transform: translate3d(-80px, 20px, 0) scale(1) rotate(0deg); }
    35% { transform: translate3d(120px, -90px, 0) scale(1.22) rotate(15deg); }
    70% { transform: translate3d(50px, 110px, 0) scale(0.9) rotate(-15deg); }
    100% { transform: translate3d(-80px, 20px, 0) scale(1) rotate(0deg); }
}

@keyframes wtt-aurora-move-2 {
    0% { transform: translate3d(80px, -40px, 0) scale(1.15) rotate(0deg); }
    40% { transform: translate3d(-110px, 70px, 0) scale(0.85) rotate(-20deg); }
    75% { transform: translate3d(100px, -100px, 0) scale(1.28) rotate(20deg); }
    100% { transform: translate3d(80px, -40px, 0) scale(1.15) rotate(0deg); }
}

@keyframes wtt-aurora-move-3 {
    0% { transform: translate3d(-50px, -70px, 0) scale(0.9) rotate(0deg); }
    30% { transform: translate3d(90px, 50px, 0) scale(1.2) rotate(25deg); }
    70% { transform: translate3d(-90px, 90px, 0) scale(0.8) rotate(-25deg); }
    100% { transform: translate3d(-50px, -70px, 0) scale(0.9) rotate(0deg); }
}

@keyframes wtt-aurora-move-4 {
    0% { transform: translate3d(100px, 50px, 0) scale(1.1) rotate(0deg); }
    35% { transform: translate3d(-60px, -110px, 0) scale(1.25) rotate(-18deg); }
    70% { transform: translate3d(80px, -40px, 0) scale(0.85) rotate(18deg); }
    100% { transform: translate3d(100px, 50px, 0) scale(1.1) rotate(0deg); }
}

@keyframes wtt-aurora-move-5 {
    0% { transform: translate3d(-70px, 90px, 0) scale(1.2) rotate(0deg); }
    45% { transform: translate3d(60px, -60px, 0) scale(0.8) rotate(15deg); }
    80% { transform: translate3d(-40px, -90px, 0) scale(1.05) rotate(-15deg); }
    100% { transform: translate3d(-70px, 90px, 0) scale(1.2) rotate(0deg); }
}

.wtt-blob-cyan {
    background: radial-gradient(circle, rgba(0, 210, 255, 0.35) 0%, rgba(0, 160, 230, 0.08) 50%, transparent 70%);
}

.wtt-blob-electric {
    background: radial-gradient(circle, rgba(59, 130, 246, 0.38) 0%, rgba(59, 130, 246, 0.08) 50%, transparent 70%);
}

.wtt-blob-royal {
    background: radial-gradient(circle, rgba(37, 99, 235, 0.34) 0%, rgba(37, 99, 235, 0.07) 50%, transparent 70%);
}

.wtt-blob-purple {
    background: radial-gradient(circle, rgba(147, 51, 234, 0.3) 0%, rgba(147, 51, 234, 0.06) 50%, transparent 70%);
}

.wtt-blob-gold {
    background: radial-gradient(circle, rgba(255, 204, 41, 0.32) 0%, rgba(255, 204, 41, 0.08) 50%, transparent 70%);
}

/* 4. Cinematic Light Beam (FAR - Volumetric Atmospheric Shafts)
-------------------------------------------------------------------------- */
.wtt-atmosphere-beam {
    position: absolute;
    width: 280px;
    height: 1000px;
    opacity: 0.15;
    filter: blur(80px);
    background: linear-gradient(135deg, 
        rgba(59, 130, 246, 0.38) 0%, 
        rgba(0, 180, 255, 0.15) 30%, 
        rgba(255, 255, 255, 0.08) 50%, 
        rgba(0, 180, 255, 0.1) 70%, 
        transparent 100%);
    pointer-events: none;
    transform-origin: center center;
    will-change: transform;
    animation: wtt-beam-sweep 32s ease-in-out infinite alternate;
}

@keyframes wtt-beam-sweep {
    0% { transform: translate3d(-15vw, -120px, 0) rotate(27deg); }
    100% { transform: translate3d(85vw, 60px, 0) rotate(33deg); }
}

/* 5. Floating Dust & Fireflies (MID)
-------------------------------------------------------------------------- */
.wtt-atmosphere-dust {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    opacity: 0;
    will-change: transform, opacity;
}

.wtt-dust-cyan { background-color: #00b0ff; color: #00b0ff; }
.wtt-dust-blue { background-color: #3b82f6; color: #3b82f6; }
.wtt-dust-gold { background-color: #ffcc29; color: #ffcc29; }

@keyframes wtt-dust-drift {
    0% { transform: translate3d(0, 0, 0); opacity: 0; }
    10% { opacity: var(--wtt-dust-opacity, 0.5); }
    90% { opacity: var(--wtt-dust-opacity, 0.5); }
    100% { transform: translate3d(var(--wtt-dust-x, 40px), var(--wtt-dust-y, -80px), 0); opacity: 0; }
}

/* Gold Fireflies (Wandering around) */
.wtt-atmosphere-firefly {
    position: absolute;
    border-radius: 50%;
    background: #ffcc29;
    box-shadow: 
        0 0 8px #ffcc29, 
        0 0 18px #ffcc29, 
        0 0 30px rgba(255, 190, 0, 0.5);
    pointer-events: none;
    will-change: transform;
    animation: wtt-firefly-wander 15s ease-in-out infinite alternate;
}

@keyframes wtt-firefly-wander {
    0%, 100% { transform: translate3d(0, 0, 0); }
    25% { transform: translate3d(35px, -20px, 0); }
    50% { transform: translate3d(-20px, -45px, 0); }
    75% { transform: translate3d(20px, 20px, 0); }
}

/* 6. Cursor Glow Spotlight (Desktop Only)
-------------------------------------------------------------------------- */
.wtt-cursor-glow {
    position: fixed; 
    width: 450px; 
    height: 450px; 
    border-radius: 50%;
    background: radial-gradient(circle, rgba(0, 180, 255, 0.10) 0%, rgba(0, 120, 255, 0.04) 40%, transparent 70%);
    pointer-events: none; 
    z-index: 588; /* Behind content, on top of normal atmosphere */
    transform: translate(-50%, -50%);
    transition: none;
    will-change: transform;
    opacity: 0;
}

@media (hover: none), (pointer: coarse) { 
    .wtt-cursor-glow { display: none !important; } 
}

/* 7. Travel Route Trails
-------------------------------------------------------------------------- */
.wtt-atmosphere-route {
    position: absolute;
    pointer-events: none;
    opacity: 0.15; /* clearly visible */
}

.wtt-atmosphere-route-path {
    fill: none;
    stroke: rgba(0, 180, 220, 0.4);
    stroke-width: 1.2px;
    stroke-dasharray: 6 12;
}

/* 8. Card Hover Illumination
-------------------------------------------------------------------------- */
.wtt-card-illum {
    position: absolute;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    filter: blur(65px);
    opacity: 0;
    transition: opacity 0.5s cubic-bezier(0.25, 1, 0.5, 1);
    pointer-events: none;
    z-index: 25; /* above far layer blobs */
}

.wtt-card-illum.wtt-illum-active {
    opacity: 1;
}

/* Why Travel section centered ambient glow */
.wtt-atmo-glow-whytravel {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80%;
    height: 60%;
    border-radius: 50%;
    filter: blur(120px);
    background: radial-gradient(circle, rgba(59, 130, 246, 0.18) 0%, transparent 70%);
    pointer-events: none;
    z-index: 1; /* behind cards, on top of section background */
}

/* 9. Accessibility
-------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .wtt-atmosphere-blob,
    .wtt-atmosphere-beam,
    .wtt-atmosphere-dust,
    .wtt-atmosphere-firefly {
        animation: none !important;
        transform: none !important;
    }
    .wtt-travel-bg-layer {
        transform: none !important;
    }
}

/* 10. Mobile Responsive Overrides
-------------------------------------------------------------------------- */
@media (max-width: 768px) {
    .wtt-atmosphere-beam {
        display: none !important;
    }
    .wtt-atmosphere-blob {
        filter: blur(80px);
    }
}