/*
 * scroll-reveal.css
 * Premium scroll-triggered reveal animations for the main site.
 * Covers: fade-up, fade-left, fade-right, scale-in, stagger.
 * All elements start hidden and transition to visible via JS class.
 */

/* ── Base hidden state for all reveal elements ─────────────── */
.sr,
.sr-up,
.sr-left,
.sr-right,
.sr-scale,
.sr-fade {
    opacity: 0;
    will-change: opacity, transform;
    transition:
        opacity 0.85s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.85s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Upward slide (most used — section titles, cards) */
.sr,
.sr-up {
    transform: translateY(48px);
}

/* Slide from left (mechanism text, hero left) */
.sr-left {
    transform: translateX(-52px);
}

/* Slide from right (watch images, mechanism video) */
.sr-right {
    transform: translateX(52px);
}

/* Scale up from slightly small (gallery thumbnails, NH35 specs) */
.sr-scale {
    transform: scale(0.88);
}

/* Pure opacity fade (backgrounds, overlays) */
.sr-fade {
    transform: none;
}

/* ── Visible state — added by JS ─────────────────────────── */
.sr.sr-visible,
.sr-up.sr-visible,
.sr-left.sr-visible,
.sr-right.sr-visible,
.sr-scale.sr-visible,
.sr-fade.sr-visible {
    opacity: 1;
    transform: none;
}

/* ── Stagger delays — add .sr-d-N to child elements ──────── */
.sr-d-1 {
    transition-delay: 0.10s;
}

.sr-d-2 {
    transition-delay: 0.20s;
}

.sr-d-3 {
    transition-delay: 0.32s;
}

.sr-d-4 {
    transition-delay: 0.46s;
}

.sr-d-5 {
    transition-delay: 0.62s;
}

.sr-d-6 {
    transition-delay: 0.80s;
}

/*
 * Longer, slower reveal for large hero-style sections.
 * Usage: add .sr-slow alongside any sr class.
 */
.sr-slow {
    transition-duration: 1.25s !important;
}

/*
 * A subtle gold line that draws in from left on section headings.
 * Usage: add .sr-line to a heading wrapper.
 */
.sr-line {
    position: relative;
    overflow: hidden;
}

.sr-line::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0%;
    height: 1.5px;
    background: linear-gradient(90deg, #EAC67A, transparent);
    transition: width 1.1s cubic-bezier(0.22, 1, 0.36, 1) 0.4s;
}

.sr-line.sr-visible::after {
    width: 60%;
}