/* ═══════════════════════════════════════════════════
   RIBBON, Decorative ribbon with scroll animation
   ═══════════════════════════════════════════════════ */

.ribbon-divider {
    position: relative;
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    height: 200px;
    overflow: hidden;
    pointer-events: none;
}

.ribbon-divider svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* Main ribbon stroke, Anvil blue */
.ribbon-path {
    fill: none;
    stroke: #1e5ab8;
    stroke-width: 4.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: var(--path-length);
    stroke-dashoffset: var(--path-length);
}

.ribbon-divider.animate .ribbon-path {
    stroke-dashoffset: 0 !important;
    transition: stroke-dashoffset 2.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Glow line, Anvil light blue */
.ribbon-glow {
    fill: none;
    stroke: #64b5f6;
    stroke-width: 11;
    stroke-linecap: round;
    stroke-linejoin: round;
    filter: blur(5px);
    opacity: 0.45;
    stroke-dasharray: var(--path-length);
    stroke-dashoffset: var(--path-length);
}

.ribbon-divider.animate .ribbon-glow {
    stroke-dashoffset: 0 !important;
    transition: stroke-dashoffset 2.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Image inside the loop, no border, fits inside the 60px diameter circle */
.ribbon-loop-image {
    position: absolute;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    object-fit: cover;
    border: none;
    box-shadow: none;
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.4);
    transition: none;
}

.ribbon-divider.animate .ribbon-loop-image {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
    transition: opacity 0.4s ease 1.8s, transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) 1.8s;
}

/* LTR: circle center at (680,90) in 1200x200 = 56.67%, 45% */
.ribbon-divider--ltr .ribbon-loop-image {
    top: 45%;
    left: 56.67%;
}

/* RTL: circle center at (520,90) in 1200x200 = 43.33%, 45% */
.ribbon-divider--rtl .ribbon-loop-image {
    top: 45%;
    left: 43.33%;
}

/* Responsive */
@media (max-width: 768px) {
    .ribbon-divider {
        height: 150px;
    }

    .ribbon-loop-image {
        width: 34px;
        height: 34px;
    }
}

@media (max-width: 480px) {
    .ribbon-divider {
        height: 110px;
    }

    .ribbon-loop-image {
        width: 28px;
        height: 28px;
    }
}