/* Section Separation Utility */
.bg-alt {
    background-color: #F4EFE6;
}
[data-theme="dark"] .bg-alt {
    background-color: #111111;
}
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="dark"]):not([data-theme="light"]) .bg-alt {
        background-color: #111111;
    }
}

.section-divider {
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--gold), transparent);
    opacity: 0.25;
    margin: 0 auto;
    max-width: 85%;
    border: none;
}

/* ── Mobile section spacing & centering fixes ── */
@media (max-width: 768px) {
    .section-divider {
        margin: 32px auto;
    }

    /* Extra bottom spacing on How It Works to prevent overlap with curriculum */
    #solution {
        padding-bottom: 72px !important;
    }

    /* Center instructor headshot and text on mobile */
    .instructor-inner {
        align-items: center !important;
        text-align: center;
    }
    .instructor-avatar,
    img[src*="headshot"] {
        display: block;
        margin-left: auto;
        margin-right: auto;
    }
    .instructor-text {
        text-align: center;
    }
    .instructor-text > div[style*="flex-direction"] {
        align-items: center;
    }

    /* Neutralize negative margin on sticky notes wrapper (hidden on mobile) */
    .sticky-notes-wrapper {
        margin-bottom: 0 !important;
        padding: 0 !important;
    }
}

/* Base scroll animation classes */
.animate-on-scroll {
    opacity: 0;
    will-change: opacity, transform;
}

/* Fade in up */
.fade-in-up {
    transform: translateY(30px);
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Smooth scale up */
.scale-up {
    transform: scale(0.95);
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Parallax element (subtle CSS transform on intersection) */
.parallax-element {
    transform: translateY(50px) scale(0.98);
    transition: opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1), transform 1.5s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Activated states */
.animate-on-scroll.is-visible {
    opacity: 1;
}
.fade-in-up.is-visible {
    transform: translateY(0);
}
.scale-up.is-visible {
    transform: scale(1);
}
.parallax-element.is-visible {
    transform: translateY(0) scale(1);
}

/* Stagger transition delays */
.stagger-1 { transition-delay: 0.1s; }
.stagger-2 { transition-delay: 0.2s; }
.stagger-3 { transition-delay: 0.3s; }
.stagger-4 { transition-delay: 0.4s; }
.stagger-5 { transition-delay: 0.5s; }
.stagger-6 { transition-delay: 0.6s; }

/* In light mode, frame dark screenshots with a border + rounded corners + shadow */
.screenshot-claude,
.screenshot-dispatch,
img[src*="claude-mobile"],
img[src*="claude-code"],
img[src*="claude-dispatch"] {
    border-radius: 12px;
    border: 2px solid var(--border);
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
}

/* Hide dark screenshots on mobile */
@media (max-width: 768px) {
    .screenshot-claude,
    .screenshot-dispatch,
    .screenshot-mobile,
    .dispatch-showcase,
    .mobile-float,
    img[src*="claude-mobile"],
    img[src*="claude-code"],
    img[src*="claude-dispatch"] {
        display: none !important;
    }
}

/* Fallback: if JS hasn't initialized animations after 3s, show everything */
.animate-on-scroll.animated {
    opacity: 1 !important;
    transform: none !important;
}

/* Respect prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
    .animate-on-scroll,
    .fade-in-up,
    .scale-up,
    .parallax-element {
        transition: opacity 0.5s ease;
        transform: none !important;
    }
}

/* Mobile optimizations */
@media (max-width: 768px) {
    .parallax-element {
        transform: translateY(20px) scale(1); /* Reduce parallax */
        transition-duration: 0.8s;
    }
    
    .section {
        padding-top: 64px;
        padding-bottom: 64px;
    }
}

/* Hide decorative illustrations on mobile */
@media (max-width: 768px) {
    .ship-illustration,
    .tools-illustration,
    .not-zapier-illustration {
        display: none !important;
    }
}