/* ============================================
   3D SCROLL ANIMATIONS & IMMERSIVE EFFECTS
   ============================================ */

/* === TEXT READABILITY ON BACKGROUNDS === */
.section-bg h1,
.section-bg h2,
.section-bg h3,
.section-bg h4 {
    text-shadow:
        0 2px 4px rgba(0, 0, 0, 0.4),
        0 4px 8px rgba(0, 0, 0, 0.3),
        0 8px 16px rgba(0, 0, 0, 0.2),
        0 0 40px rgba(255, 255, 255, 0.5);
}

.section-bg p,
.section-bg .pillar-description,
.section-bg .cabinet-subtitle {
    text-shadow:
        0 1px 3px rgba(0, 0, 0, 0.4),
        0 2px 6px rgba(0, 0, 0, 0.3),
        0 4px 12px rgba(0, 0, 0, 0.2),
        0 0 20px rgba(255, 255, 255, 0.3);
}

/* White text for better contrast on photos */
.section-bg .section-title,
.section-bg .pillar-title,
.section-bg .cabinet-title,
.section-bg .area-county {
    color: var(--white);
    font-weight: 800;
}

.section-bg .section-subtitle,
.section-bg .pillar-description,
.section-bg .cabinet-subtitle,
.section-bg .area-cities li {
    color: var(--white);
    font-weight: 600;
}

/* === 3D ANIMATION UTILITIES === */
.animate-3d {
    transform-style: preserve-3d;
    perspective: 1000px;
    transition: all var(--transition-3d);
}

/* Scroll-triggered 3D animations */
.scroll-animate {
    opacity: 0;
    transform: translateY(100px) rotateX(-15deg) scale(0.95);
    transition: all 1s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.scroll-animate.active {
    opacity: 1;
    transform: translateY(0) rotateX(0) scale(1);
}

/* Slide from left with 3D rotation */
.slide-left-3d {
    opacity: 0;
    transform: translateX(-150px) rotateY(25deg);
    transition: all 1.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.slide-left-3d.active {
    opacity: 1;
    transform: translateX(0) rotateY(0);
}

/* Slide from right with 3D rotation */
.slide-right-3d {
    opacity: 0;
    transform: translateX(150px) rotateY(-25deg);
    transition: all 1.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.slide-right-3d.active {
    opacity: 1;
    transform: translateX(0) rotateY(0);
}

/* Flip in animation */
.flip-in {
    opacity: 0;
    transform: rotateX(-90deg);
    transform-origin: center;
    transition: all 1s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.flip-in.active {
    opacity: 1;
    transform: rotateX(0);
}

/* Scale and rotate */
.scale-rotate {
    opacity: 0;
    transform: scale(0.5) rotate(-15deg);
    transition: all 1s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.scale-rotate.active {
    opacity: 1;
    transform: scale(1) rotate(0);
}

/* Depth layers for parallax */
.depth-layer-1 {
    transform: translateZ(50px);
}

.depth-layer-2 {
    transform: translateZ(100px);
}

.depth-layer-3 {
    transform: translateZ(150px);
}

/* === SECTION BACKGROUND IMAGES === */
.section-bg {
    position: relative;
    overflow: hidden;
}

.section-bg::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 0;
    transition: transform 0.5s ease-out;
}

.section-bg::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1;
}

.section-bg .container {
    position: relative;
    z-index: 2;
}

/* Parallax effect on section backgrounds */
.section-bg.parallax::before {
    transform: translateY(var(--parallax-offset, 0));
}

/* Specific section backgrounds */
#hero.section-bg::before {
    background-image: url('images/shake_hands.avif');
    background-position: center center;
}

#hero.section-bg::after {
    background: rgba(88, 88, 88, 0.8);
}

#standard.section-bg::before {
    background-image: url('images/IMG_0360.jpeg');
    background-position: center;
}

#services.section-bg::before {
    background-image: url('images/IMG_0362.jpeg');
    background-position: center;
}

.comparison-section.section-bg::before {
    background-image: url('images/Tyler.avif');
    background-position: center;
}

#gallery.section-bg::before {
    background-image: url('images/Yellow\ wall.avif');
    background-position: center;
}

#areas.section-bg::before {
    background-image: url('images/IMG_1217.jpeg');
    background-position: center;
}

.testimonials-section.section-bg::before {
    background-image: url('images/IMG_1218.jpeg');
    background-position: center;
}

.consultation-section.section-bg::before {
    background-image: url('images/A1753B2C-19FE-4156-8862-3DC554F342D0.jpeg');
    background-position: center;
}

.consultation-section.section-bg::after {
    background: linear-gradient(135deg, rgba(44, 40, 37, 0.4) 0%, rgba(44, 40, 37, 0.3) 100%);
}

/* === STAGGER ANIMATIONS === */
.stagger-item {
    opacity: 0 !important;
    transform: translateY(30px) !important;
    transition: all 1s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

.stagger-item.active {
    opacity: 1 !important;
    transform: translateY(0) !important;
}

/* Delay classes for staggered animations */
.delay-1 {
    transition-delay: 0.15s;
}

.delay-2 {
    transition-delay: 0.3s;
}

.delay-3 {
    transition-delay: 0.45s;
}

.delay-4 {
    transition-delay: 0.6s;
}

.delay-5 {
    transition-delay: 0.75s;
}

.delay-6 {
    transition-delay: 0.9s;
}

/* === FLOATING ANIMATIONS === */
@keyframes float-gentle {

    0%,
    100% {
        transform: translateY(0) translateZ(0);
    }

    50% {
        transform: translateY(-20px) translateZ(10px);
    }
}

.float-gentle {
    animation: float-gentle 4s ease-in-out infinite;
}

/* === PULSE GLOW === */
@keyframes pulse-glow {

    0%,
    100% {
        box-shadow: 0 0 20px rgba(212, 175, 55, 0.3);
    }

    50% {
        box-shadow: 0 0 40px rgba(212, 175, 55, 0.6);
    }
}

.pulse-glow {
    animation: pulse-glow 3s ease-in-out infinite;
}

/* === TILT ON HOVER === */
.tilt-card {
    transform-style: preserve-3d;
    transition: transform 0.3s ease;
}

.tilt-card:hover {
    transform: perspective(1000px) rotateX(5deg) rotateY(5deg) scale(1.02);
}

/* === ZOOM IN ON SCROLL === */
.zoom-in {
    opacity: 0;
    transform: scale(0.8);
    transition: all 1s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.zoom-in.active {
    opacity: 1;
    transform: scale(1);
}

/* === SLIDE UP WITH FADE === */
.slide-up-fade {
    opacity: 0;
    transform: translateY(60px);
    transition: all 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.slide-up-fade.active {
    opacity: 1;
    transform: translateY(0);
}

/* === ROTATE IN === */
.rotate-in {
    opacity: 0;
    transform: rotate(-180deg) scale(0.5);
    transition: all 1s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.rotate-in.active {
    opacity: 1;
    transform: rotate(0) scale(1);
}

/* === PERSPECTIVE CARDS === */
.perspective-container {
    perspective: 1500px;
    perspective-origin: center;
}

.perspective-card {
    transform-style: preserve-3d;
    transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.perspective-card:hover {
    transform: rotateY(10deg) rotateX(5deg) translateZ(20px);
}

/* === SECTION TRANSITIONS === */
.section-transition {
    opacity: 0;
    transform: translateY(100px) scale(0.95);
    transition: all 1.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.section-transition.active {
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* === WAVE ANIMATION === */
@keyframes wave {

    0%,
    100% {
        transform: translateY(0) rotateZ(0deg);
    }

    25% {
        transform: translateY(-10px) rotateZ(2deg);
    }

    75% {
        transform: translateY(10px) rotateZ(-2deg);
    }
}

.wave-animate {
    animation: wave 3s ease-in-out infinite;
}

/* === SHIMMER EFFECT === */
@keyframes shimmer-3d {
    0% {
        background-position: -1000px 0;
        transform: rotateY(0deg);
    }

    50% {
        transform: rotateY(5deg);
    }

    100% {
        background-position: 1000px 0;
        transform: rotateY(0deg);
    }
}

.shimmer-3d {
    background: linear-gradient(90deg,
            transparent 0%,
            rgba(212, 175, 55, 0.3) 50%,
            transparent 100%);
    background-size: 200% 100%;
    animation: shimmer-3d 3s ease-in-out infinite;
}

/* === MOBILE OPTIMIZATIONS === */
@media (max-width: 768px) {

    /* Reduce 3D effects on mobile for performance */
    .scroll-animate,
    .slide-left-3d,
    .slide-right-3d,
    .flip-in,
    .scale-rotate {
        transform: translateY(30px);
        transition-duration: 0.6s;
    }

    .scroll-animate.active,
    .slide-left-3d.active,
    .slide-right-3d.active,
    .flip-in.active,
    .scale-rotate.active {
        transform: translateY(0);
    }

    /* Simplify hover effects on mobile */
    .tilt-card:hover,
    .perspective-card:hover {
        transform: scale(1.02);
    }

    /* Faster animations on mobile */
    .stagger-item {
        transition-duration: 0.6s;
    }

    .zoom-in,
    .slide-up-fade {
        transition-duration: 0.6s;
    }

    /* Reduce parallax intensity on mobile */
    .section-bg.parallax::before {
        transform: translateY(calc(var(--parallax-offset, 0) * 0.5)) !important;
    }
}

/* === REDUCED MOTION === */
@media (prefers-reduced-motion: reduce) {

    .scroll-animate,
    .slide-left-3d,
    .slide-right-3d,
    .flip-in,
    .scale-rotate,
    .zoom-in,
    .slide-up-fade,
    .rotate-in,
    .stagger-item {
        transition: opacity 0.3s ease;
        transform: none;
    }

    .float-gentle,
    .pulse-glow,
    .wave-animate,
    .shimmer-3d {
        animation: none;
    }
}