/* Period motif primitives — dots, rings, trails, clusters */

@keyframes periodPulse {
    0%, 100% { opacity: 0.4; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.12); }
}

@keyframes periodSpin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.period-dot {
    display: inline-block;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--color-primary);
}

.period-dot--sm {
    width: 0.375rem;
    height: 0.375rem;
}

.period-dot--md {
    width: 0.625rem;
    height: 0.625rem;
}

.period-dot--lg {
    width: 0.875rem;
    height: 0.875rem;
}

.period-dot--outline {
    background: transparent;
    border: 2px solid var(--color-primary);
}

.period-dot--outline.period-dot--md {
    border-width: 2px;
}

.period-dot--outline.period-dot--lg {
    border-width: 3px;
    border-color: var(--color-primary-dark);
}

.period-dot--pulse {
    animation: periodPulse 4s ease-in-out infinite;
}

.period-dot--float-a,
.period-dot--float-b {
    position: absolute;
    width: 0.5rem;
    height: 0.5rem;
    background: rgba(255, 255, 255, 0.5);
    animation: periodPulse 5s ease-in-out infinite;
}

.period-trail {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
}

.period-ring {
    position: absolute;
    border-radius: 50%;
    border: 2px solid rgba(237, 28, 36, 0.2);
    pointer-events: none;
}

.period-ring--spin {
    animation: periodSpin 40s linear infinite;
}

.period-ring--static {
    animation: none;
}

.period-cluster {
    position: absolute;
    pointer-events: none;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: var(--space-3);
}

.period-cluster .period-ring {
    position: relative;
    width: 4rem;
    height: 4rem;
    top: auto;
    right: auto;
    border-color: rgba(255, 255, 255, 0.18);
}

.period-cluster .period-trail {
    opacity: 0.7;
}

.period-cluster .period-dot {
    background: rgba(255, 255, 255, 0.6);
}

.period-cluster .period-dot--outline {
    border-color: rgba(255, 255, 255, 0.5);
}

.period-corner {
    position: absolute;
    pointer-events: none;
}

.period-corner--tl {
    top: var(--space-6);
    left: var(--space-6);
}

.period-corner--br {
    bottom: var(--space-6);
    right: var(--space-6);
}

/* Section-scoped motif placement */
.products-section__motif {
    flex-shrink: 0;
    opacity: 0.85;
}

.products-section__motif .period-dot--outline {
    border-color: rgba(var(--ink-rgb), 0.2);
}

.promise-section__motif {
    display: flex;
    margin-bottom: var(--space-4);
    opacity: 0.85;
}

.promise-section__motif .period-dot--outline {
    border-color: rgba(var(--ink-rgb), 0.2);
}

@media (max-width: 479px) {
    .products-section__motif {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .period-dot--pulse,
    .period-dot--float-a,
    .period-dot--float-b,
    .period-ring--spin {
        animation: none;
    }
}