/* ==========================================================================
   Sonic Motion - Turn Key Designs
   Scroll reveal initial states + interaction animations
   ========================================================================== */

/* ---------- Scroll Reveal: Initial Hidden State ---------- */
.sonic-reveal {
    opacity: 0;
    transform: translateY(12px);
}

.sonic-reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 250ms ease-out,
                transform 250ms ease-out;
}

/* Stagger children */
.sonic-reveal-stagger > .sonic-reveal:nth-child(1) { transition-delay: 0ms; }
.sonic-reveal-stagger > .sonic-reveal:nth-child(2) { transition-delay: 50ms; }
.sonic-reveal-stagger > .sonic-reveal:nth-child(3) { transition-delay: 100ms; }
.sonic-reveal-stagger > .sonic-reveal:nth-child(4) { transition-delay: 150ms; }
.sonic-reveal-stagger > .sonic-reveal:nth-child(5) { transition-delay: 200ms; }
.sonic-reveal-stagger > .sonic-reveal:nth-child(6) { transition-delay: 250ms; }
.sonic-reveal-stagger > .sonic-reveal:nth-child(7) { transition-delay: 300ms; }
.sonic-reveal-stagger > .sonic-reveal:nth-child(8) { transition-delay: 350ms; }
.sonic-reveal-stagger > .sonic-reveal:nth-child(9) { transition-delay: 400ms; }

/* Slide from left variant */
.sonic-reveal--left {
    opacity: 0;
    transform: translateX(-12px);
}

.sonic-reveal--left.is-visible {
    opacity: 1;
    transform: translateX(0);
    transition: opacity 250ms ease-out, transform 250ms ease-out;
}

/* Slide from right variant */
.sonic-reveal--right {
    opacity: 0;
    transform: translateX(12px);
}

.sonic-reveal--right.is-visible {
    opacity: 1;
    transform: translateX(0);
    transition: opacity 250ms ease-out, transform 250ms ease-out;
}

/* Scale up variant */
.sonic-reveal--scale {
    opacity: 0;
    transform: scale(0.97);
}

.sonic-reveal--scale.is-visible {
    opacity: 1;
    transform: scale(1);
    transition: opacity 250ms ease-out, transform 250ms ease-out;
}

/* ---------- Hero Entrance (anime.js handles, but set initial) ---------- */
.hero-eyebrow,
.hero-headline,
.hero-subtitle,
.hero-cta {
    opacity: 0;
    transform: translateY(16px);
}

/* ---------- Gold Underline Link ---------- */
.sonic-link {
    color: #AD8144;
    text-decoration: none;
    background-image: linear-gradient(#AD8144, #AD8144);
    background-size: 0% 2px;
    background-position: left bottom;
    background-repeat: no-repeat;
    transition: background-size 300ms ease;
}

.sonic-link:hover {
    background-size: 100% 2px;
}

/* ---------- Gold accent line (decorative) ---------- */
.sonic-gold-line {
    display: block;
    width: 48px;
    height: 3px;
    background: #AD8144;
    margin-bottom: 16px;
}

.sonic-gold-line--center {
    margin-left: auto;
    margin-right: auto;
}

/* ---------- Reduced Motion ---------- */
@media (prefers-reduced-motion: reduce) {
    .sonic-reveal,
    .sonic-reveal--left,
    .sonic-reveal--right,
    .sonic-reveal--scale,
    .hero-eyebrow,
    .hero-headline,
    .hero-subtitle,
    .hero-cta {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
        animation: none !important;
    }

    .sonic-link {
        transition: none !important;
        background-size: 100% 2px !important;
    }

    .service-card,
    .btn,
    .sonic-card,
    img {
        transition: none !important;
    }
}