/* ============================================================
   THE ATTICUS LOOP — native component (replaces the Lottie)
   Six stationary glass chips on dashed rings; a slow active
   sweep advances around the loop. Speed: --loop-step.
.aloop {
    --loop-step: 5s;
    --spread: 1;
    position: relative;
    width: min(640px, 100%);
    aspect-ratio: 1 / 1;
    margin: 0 auto;
    font-family: 'Hanken Grotesk', system-ui, sans-serif;
}

/* Dashed orbit rings */
.aloop-ring {
    position: absolute;
    border: 1.5px dashed rgba(255, 255, 255, 0.75);
    border-radius: 50%;
    pointer-events: none;
}
.aloop-ring--outer { inset: 7%; }

/* Rotating dot carrier — JS sets --spin so the dot arrives at each
   station in rhythm with the stepper (cumulative, always forward) */
.aloop-spin {
    position: absolute;
    inset: 7%;
    border-radius: 50%;
    transform: rotate(var(--spin, 0deg));
    transition: transform 1100ms cubic-bezier(0.22, 0.61, 0.36, 1);
    pointer-events: none;
}

/* Active arc beam — energy pointing at the active station */
.aloop-arc {
    position: absolute;
    inset: 7%;
    border-radius: 50%;
    background: conic-gradient(from -24deg,
        rgba(79, 110, 247, 0) 0deg,
        rgba(79, 110, 247, 0.65) 24deg,
        rgba(79, 110, 247, 0) 48deg);
    -webkit-mask: radial-gradient(closest-side, transparent calc(100% - 5px), #000 calc(100% - 4px));
    mask: radial-gradient(closest-side, transparent calc(100% - 5px), #000 calc(100% - 4px));
    transform: rotate(var(--arc, 60deg));
    transition: transform 800ms var(--ease);
    pointer-events: none;
}

/* Small decorative dots on the inner ring */
.aloop-dot {
    position: absolute;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.95);
    transform: translate(-50%, -50%);
    box-shadow: 0 2px 6px rgba(22, 22, 23, 0.10);
}

/* ── Chips ─────────────────────────────────────────────── */
.aloop-chip {
    cursor: pointer;
    position: absolute;
    left: calc(50% + (var(--x) - 50%) * var(--spread, 1));
    top: calc(50% + (var(--y) - 50%) * var(--spread, 1));
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;
    z-index: 2;
}

.aloop-disc {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 74px;
    height: 74px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.72);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 6px 18px rgba(60, 82, 160, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.6);
    color: #3a3a40;
    transition: transform 500ms var(--ease), box-shadow 500ms var(--ease), background 500ms var(--ease);
}
.aloop-disc svg { width: 30px; height: 30px; }

/* Brand chip is a station like the others: it inherits the same 74px glass
   disc. Only the flower glyph inside is sized, and the label is pulled tight
   under it (positioned absolute) so the disc alone stays centred on the ring. */
.aloop-chip--brand .aloop-disc svg { width: 38px; height: 38px; }
.aloop-chip--brand .aloop-label {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 8px;
}

.aloop-label {
    padding: 5px 13px;
    border-radius: 999px;
    background: #ffffff;
    box-shadow: 0 2px 8px rgba(22, 22, 23, 0.10);
    font-size: 13px;
    font-weight: 600;
    color: var(--c-n900);
    line-height: 1.2;
    white-space: nowrap;
    transition: background 500ms var(--ease), color 500ms var(--ease);
}

.aloop-chip:hover .aloop-disc { transform: scale(1.05); }

/* Brand chip breathes */
.aloop-chip--brand .aloop-disc { animation: aloopBreathe 6s var(--ease) infinite alternate; }
@keyframes aloopBreathe { to { transform: scale(1.04); } }
.aloop-chip--brand .aloop-disc img { width: 40px; height: 40px; mix-blend-mode: multiply; }

/* Active station — fully opaque so the ring never shows through */
.aloop-chip.is-active .aloop-disc {
    transform: scale(1.07);
    background: #ffffff;
    box-shadow:
        0 0 0 3px rgba(79, 110, 247, 0.35),
        0 10px 26px rgba(60, 82, 160, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.7);
}
.aloop-chip.is-active .aloop-label {
    background: var(--c-n900);
    color: #ffffff;
}

.aloop-chip.is-active .aloop-disc { animation: aloopPulse 2s var(--ease) infinite; }
@keyframes aloopPulse {
    0%, 100% { box-shadow: 0 0 0 3px rgba(79, 110, 247, 0.35), 0 10px 26px rgba(60, 82, 160, 0.22); }
    50%      { box-shadow: 0 0 0 7px rgba(79, 110, 247, 0.18), 0 10px 26px rgba(60, 82, 160, 0.22); }
}

/* ── Center glass panel ────────────────────────────────── */
.aloop-panel {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 56%;
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.62);
    border: 1px solid rgba(255, 255, 255, 0.68);
    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);
    box-shadow: var(--shadow-glass);
    padding: 20px 18px 14px;
    z-index: 3;
    animation: aloopFloat 8s ease-in-out infinite alternate;
}
@keyframes aloopFloat {
    from { transform: translate(-50%, calc(-50% - 3px)); }
    to   { transform: translate(-50%, calc(-50% + 3px)); }
}

.aloop-title {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 19px;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--c-n900);
    margin-bottom: 14px;
}
.aloop-title svg { width: 16px; height: 16px; }

/* Progress segments — one per station */
.aloop-pills {
    display: flex;
    gap: 6px;
    margin-bottom: 16px;
    padding: 0 4px;
}
.aloop-pill {
    flex: 1;
    height: 6px;
    border-radius: 999px;
    background: rgba(22, 22, 23, 0.10);
    overflow: hidden;
    position: relative;
}
.aloop-pill::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: var(--c-accent);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 600ms var(--ease);
}
.aloop-pill.is-done::after { transform: scaleX(1); }
.aloop-pill.is-active::after {
    transform: scaleX(1);
    transition-duration: var(--loop-step);
    transition-timing-function: linear;
}

/* Notification rows */
.aloop-rows {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-height: 186px;   /* 3 rows — no void mid-swap */
}
.aloop-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 12px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.78);
    border: 1px solid rgba(255, 255, 255, 0.85);
    box-shadow: 0 1px 4px rgba(22, 22, 23, 0.05);
}
.aloop-row-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    border-radius: 11px;
    background: rgba(245, 246, 246, 0.9);
    color: var(--c-n900);
}
.aloop-row-icon svg { width: 18px; height: 18px; }
.aloop-row-text {
    flex: 1;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.3;
    color: var(--c-n900);
    text-wrap: pretty;
}
.aloop-row-check {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--c-accent);
    color: #ffffff;
}
.aloop-row-check svg { width: 12px; height: 12px; }

/* Row enter animation — staggered via --d, retriggered by JS */
.aloop-row.is-in {
    animation: aloopRowIn 500ms var(--ease) both;
    animation-delay: var(--d, 0ms);
}
.aloop-row.is-in .aloop-row-check {
    animation: aloopCheckIn 420ms var(--ease) both;
    animation-delay: calc(var(--d, 0ms) + 220ms);
}
@keyframes aloopRowIn {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes aloopCheckIn {
    from { opacity: 0; transform: scale(0.25); filter: blur(4px); }
    to   { opacity: 1; transform: scale(1); filter: blur(0); }
}

.aloop-more {
    display: block;
    margin-top: 12px;
    text-align: center;
    font-size: 13px;
    font-weight: 500;
    color: var(--c-n500);
    transition: color 200ms var(--ease);
}
.aloop-more:hover { color: var(--c-accent); }

/* Entrance — one-time stagger on load */
@keyframes aloopEnter {
    from { opacity: 0; transform: translate(-50%, -50%) scale(0.92); }
    to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
.aloop-chip { animation: aloopEnter 600ms var(--ease) both; }
.aloop-chip[data-station="brand"]      { animation-delay: 0ms; }
.aloop-chip[data-station="synthesize"] { animation-delay: 100ms; }
.aloop-chip[data-station="outreach"]   { animation-delay: 180ms; }
.aloop-chip[data-station="enroll"]     { animation-delay: 260ms; }
.aloop-chip[data-station="manage"]     { animation-delay: 340ms; }
.aloop-chip[data-station="report"]     { animation-delay: 420ms; }

/* ── Responsive ────────────────────────────────────────── */
@media (max-width: 768px) {
    .aloop { width: min(440px, 100%); --spread: 1.22; margin: 52px auto 76px; }
    .aloop-ring--outer, .aloop-arc, .aloop-spin { inset: -2.5%; }
    .aloop-disc { width: 56px; height: 56px; }
    .aloop-disc svg { width: 24px; height: 24px; }
    .aloop-chip--brand .aloop-disc { width: 64px; height: 64px; }
    .aloop-chip--brand .aloop-disc svg { width: 30px; height: 30px; }
    .aloop-label { font-size: 11px; padding: 4px 10px; }
    .aloop-panel { width: 58%; padding: 14px 12px 10px; border-radius: 18px; }
    .aloop-title { font-size: 15px; margin-bottom: 10px; }
    .aloop-row { padding: 8px 9px; gap: 9px; border-radius: 12px; }
    .aloop-row-icon { width: 28px; height: 28px; border-radius: 9px; }
    .aloop-row-icon svg { width: 14px; height: 14px; }
    .aloop-row-text { font-size: 11.5px; }
    .aloop-row-check { width: 18px; height: 18px; }
    .aloop-rows { min-height: 138px; }
    .aloop-more { margin-top: 8px; font-size: 11px; }
    .aloop-dot { width: 10px; height: 10px; }
}

@media (prefers-reduced-motion: reduce) {
    .aloop-spin { transition: none; }
    .aloop-chip--brand .aloop-disc { animation: none; }
    .aloop-panel, .aloop-chip, .aloop-chip.is-active .aloop-disc { animation: none; }
    .aloop-arc { transition: none; }
    .aloop-row.is-in, .aloop-row.is-in .aloop-row-check { animation: none; }
    .aloop-pill.is-active::after { transition: none; transform: scaleX(1); }
    .aloop-disc, .aloop-label { transition: none; }
}