/* ═══════════════════════════════════════════════════════════
   scroll-counter.css — IHD Design Build
   Vertical fixed section counter, left edge of viewport.
═══════════════════════════════════════════════════════════ */

#scroll-counter {
    position: fixed;
    left: 0.8rem;
    top: 50%;
    transform: translateY(-50%);
    z-index: 9000;
    pointer-events: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.6rem;
    /* Fade in after preloader */
    opacity: 0;
    transition: opacity 0.6s ease;
}
#scroll-counter.sc-visible {
    opacity: 1;
}

/* Vertical line — track */
.sc-track {
    width: 1px;
    height: 8rem;
    background: hsla(0 0% 0% / .24);
    position: relative;
    overflow: hidden;
}

/* Animated fill line showing progress within current section */
.sc-track-fill {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    background: var(--color-main);
    height: 0%;
    transition: height 0.1s linear;
}

/* Step indicator — e.g. "02" */
.sc-step {
    writing-mode: vertical-rl;
    text-orientation: mixed;
    transform: rotate(180deg);
    font-family: var(--font-heading);
    font-size: 1.4rem;
    letter-spacing: 0.08em;
    color: var(--color-main);
    opacity: 0.48;
    line-height: 1;
    transition: opacity 0.35s ease;
}

/* Section name — rotated label */
.sc-name-wrap {
    position: relative;
    height: 11.6rem;
    width: 2rem;
    overflow: hidden;
}
.sc-name {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%) rotate(180deg);
    writing-mode: vertical-rl;
    text-orientation: mixed;
    font-family: var(--font-accent);
    font-size: 1.4rem;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--color-dark);
    opacity: 0.48;
    white-space: nowrap;
    /* Slide transition between sections */
    transition:
        opacity 0.4s ease,
        transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.sc-name.sc-exit {
    opacity: 0;
    transform: translateX(-50%) rotate(180deg) translateY(-1.2rem);
}
.sc-name.sc-enter {
    opacity: 0;
    transform: translateX(-50%) rotate(180deg) translateY(1.2rem);
}
.sc-name.sc-active {
    opacity: 0.48;
    transform: translateX(-50%) rotate(180deg) translateY(0);
}

/* Total count — sits below the track */
.sc-total {
    writing-mode: vertical-rl;
    text-orientation: mixed;
    transform: rotate(180deg);
    font-family: var(--font-accent);
    font-size: 1.4rem;
    letter-spacing: 0.2em;
    color: var(--color-dark);
    opacity: 0.48;
    line-height: 1;
}

/* Invert colours when counter sits over dark sections */
#scroll-counter.sc-dark .sc-track {
    background: hsla(67 33% 91% / .48);
}
#scroll-counter.sc-dark .sc-track-fill {
    background: var(--color-main-100);
}
#scroll-counter.sc-dark .sc-step {
    color: var(--color-main-100);
    opacity: 0.64;
}
#scroll-counter.sc-dark .sc-name {
    color: var(--color-light);
    opacity: 0.64;
}
#scroll-counter.sc-dark .sc-total {
    color: var(--color-light);
    opacity: 0.64;
}

/* Hide on small screens — not enough room */
@media (max-width: 1024px) {
    #scroll-counter { display: none; }
}