:root {
    --bg-color: #050505;
    --glass-bg: rgba(255, 255, 255, 0.05);
    --glass-border: rgba(255, 255, 255, 0.1);
    --brand-blue: #3b82f6;
    --sky-blue: #e0f2fe;
    --sky-white: #f8fafc;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    overflow-x: hidden;
    background: var(--bg-color);
}

/* 3D Parallax Structure */
.scroll-track {
    height: 500vh; /* Extremely tall for precise scroll control */
    position: relative;
    background: var(--bg-color);
}

.sticky-viewport {
    position: sticky;
    top: 0;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.layer {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    background-size: cover;
    background-position: center bottom;
    background-repeat: no-repeat;
    transition: opacity 0.3s ease;
    will-change: transform, opacity;
}

/* Background Sky */
.layer-sky {
    background: radial-gradient(circle at 50% 50%, #1e3a8a 0%, #050505 100%);
    z-index: 0;
}

/* Paris Layers - 3/4 cut (top 25% hidden) */
.layer-paris-far {
    background-image: url('../img/paris_bg.png');
    z-index: 1;
    background-position: center 125%; /* Pushed up so top is cut */
    opacity: 0.6;
}

.layer-eiffel {
    background-image: url('../img/eiffel.png');
    z-index: 2;
    width: 30%;
    height: 60%;
    left: 15%;
    background-size: contain;
}

.layer-paris-near {
    background-image: url('../img/paris_bg.png');
    z-index: 3;
    background-position: center 125%;
}

/* The Larchitect Tower */
.layer-tower-building {
    background-image: url('../img/tower_building.png');
    z-index: 4;
    background-size: contain;
}

.layer-tower-finished {
    background-image: url('../img/tower_finished.png');
    z-index: 4;
    background-size: contain;
    opacity: 0;
}

/* Cranes - flipped and positioned */
.crane {
    position: absolute;
    z-index: 5;
    background-size: contain;
    background-repeat: no-repeat;
    bottom: 0;
}

.crane-left {
    background-image: url('../img/crane_left.png');
    width: 50%;
    height: 70%;
    left: -5%;
    transform: scaleX(-1); /* Flipped */
}

.crane-right {
    background-image: url('../img/crane_right.png');
    width: 50%;
    height: 60%;
    right: -5%;
    transform: scaleX(-1); /* Flipped */
}

.crane-top {
    background-image: url('../img/crane_top.png');
    width: 40%;
    height: 40%;
    top: 0;
    left: 20%;
}

/* Clouds Layer - Opaque & 3x bigger */
.layer-clouds {
    z-index: 6;
    background-image: url('../img/clouds_new.png');
    background-size: 300% auto;
    background-position: center;
    opacity: 1; /* Almost no transparency */
    transform: scale(1);
    will-change: transform, opacity;
}

/* Base Gradient Mask - 10x Stronger Pocket Effect */
.base-gradient-mask {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 60vh;
    z-index: 7;
    background: linear-gradient(to top, 
        var(--bg-color) 0%, 
        var(--bg-color) 30%, 
        rgba(5, 5, 5, 0.9) 60%,
        transparent 100%);
    pointer-events: none;
}

/* Mouth/Pocket Effect for Section Transitions */
.section-mouth-mask {
    position: relative;
    z-index: 20;
    margin-top: -150px; /* Overlap */
}

.section-mouth-mask::before {
    content: '';
    position: absolute;
    top: -150px;
    left: 50%;
    transform: translateX(-50%);
    width: 200%;
    height: 300px;
    background: var(--bg-color);
    border-radius: 50% 50% 0 0;
    box-shadow: 0 -50px 150px rgba(0,0,0,0.8);
}

/* Continuous Orbiting Animation for Cards (Loop left to right) */
@keyframes card-loop {
    0% { transform: rotateY(-20deg) translateZ(-50px) translateX(-150%); opacity: 0; }
    20% { opacity: 1; }
    50% { transform: rotateY(0deg) translateZ(150px) translateX(0); opacity: 1; }
    80% { opacity: 1; }
    100% { transform: rotateY(20deg) translateZ(-50px) translateX(150%); opacity: 0; }
}

.animate-card-orbit {
    animation: card-loop 12s linear infinite;
    transform-style: preserve-3d;
    animation-play-state: paused; /* User asked for it on mouse move/hover? "when we move the mouse on it" */
}

#plans:hover .animate-card-orbit {
    animation-play-state: running;
}

/* Section Backgrounds - Pure White */
.bg-section-white {
    background: linear-gradient(to bottom, #ffffff 0%, #ffffff 70%, var(--sky-blue) 100%);
    color: #050505;
}

.bg-section-black {
    background: #000;
    color: #ffffff;
}

/* Template Carousel */
.template-carousel {
    width: 100%;
    overflow: hidden;
    padding: 40px 0;
    position: relative;
}

.carousel-track {
    display: flex;
    width: max-content;
    animation: scroll 40s linear infinite;
}

.template-carousel:hover .carousel-track {
    animation-duration: 80s; /* Slow down on hover */
}

/* Slowdown effect on hover */
@keyframes scroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

.template-card {
    flex: 0 0 300px;
    height: 400px;
    margin: 0 20px;
    border-radius: 20px;
    position: relative;
    overflow: hidden;
    background: #000; /* Cards stay dark for contrast */
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease;
}

.template-card:hover {
    transform: translateY(-10px) scale(1.05);
}

/* Navbar Sky Theme */
.nav-sky {
    background: rgba(224, 242, 254, 0.9) !important; /* Sky Blue */
    backdrop-blur: 20px;
    border-bottom: 1px solid rgba(59, 130, 246, 0.1);
}

.nav-sky .nav-link {
    color: #1e3a8a !important;
}

.nav-sky .nav-link:hover {
    color: var(--brand-blue) !important;
}

/* Utilities */
.text-brand-blue { color: var(--brand-blue); }
.bg-brand-blue { background-color: var(--brand-blue); }
.border-brand-blue { border-color: var(--brand-blue); }
.text-sky-white { color: var(--sky-white); }