/* Section transitions */
section[data-section] {
    transition: transform 0.8s cubic-bezier(0.645, 0.045, 0.355, 1), 
                opacity 0.8s cubic-bezier(0.645, 0.045, 0.355, 1);
    will-change: transform, opacity;
    backface-visibility: hidden;
    transform-style: preserve-3d;
    perspective: 1000px;
}

/* Prevent scrolling on body */
body.section-scroll-active {
    overflow: hidden;
    height: 100vh;
    touch-action: none;
    -webkit-overflow-scrolling: none;
}

/* Container for sections */
.sections-container {
    position: relative;
    height: 100vh;
    width: 100%;
    overflow: hidden;
    background-color: #fff;
}

/* Progress indicator */
.section-progress {
    position: fixed;
    right: 2rem;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1000;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.section-progress-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.5);
    border: 2px solid rgba(158, 78, 56, 0.3);
    cursor: pointer;
    transition: all 0.3s ease-in-out;
    position: relative;
}

.section-progress-dot::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: #9e4e38;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}

.section-progress-dot:hover,
.section-progress-dot.active {
    border-color: #9e4e38;
}

.section-progress-dot.active::before {
    opacity: 1;
}

/* Sticky button */
[data-sticky-btn-target="btn"] {
    transform: translateY(calc(100% + 5.5rem)) translateX(-50%);
    transition: transform 0.3s ease-in-out;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

[data-sticky-btn-target="btn"].is-visible {
    transform: translateY(0) translateX(-50%);
}

/* Video optimization */
video {
    will-change: transform;
    transform: translateZ(0);
    backface-visibility: hidden;
}