/* ==========================================================================
   Closing circuit (templates/part-circuit-cta.php), Home and About.
   The loop's path is drawn by cwx.js to fit the frame: it leaves the
   switch's right post, runs round the frame through the source on the left,
   and returns to the left post. .is-live = switch closed.
   ========================================================================== */

.cwx-circuit {
    padding: 140px 0;
    background: var(--cwx-board);
    color: var(--cwx-silk);
    overflow: hidden;
}

.cwx-circuit__frame {
    position: relative;
    padding: 120px clamp(48px, 9vw, 140px) 96px;
    transition: background .8s;
}
.cwx-circuit__frame.is-live {
    background: radial-gradient(80% 70% at 50% 45%, rgba(69, 249, 171, .07), transparent 70%);
}

.cwx-circuit__loop {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    pointer-events: none;
}
.cwx-circuit__loop path { fill: none; stroke-linejoin: miter; }
.cwx-circuit__wire { stroke: #2b3f55; stroke-width: 2; }
.cwx-circuit__current {
    stroke: var(--cwx-mint);
    stroke-width: 2.5;
    stroke-dasharray: 16 26;
    opacity: 0;
    filter: drop-shadow(0 0 5px rgba(69, 249, 171, .9));
    transition: opacity .4s;
}
.cwx-circuit__frame.is-live .cwx-circuit__current {
    opacity: 1;
    animation: cwx-current 1.1s linear infinite;
}
@keyframes cwx-current { to { stroke-dashoffset: -42; } }

/* Source: a cell symbol sitting on the left-hand wire. */
.cwx-circuit__src {
    position: absolute;
    left: 20px;
    top: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;
    padding: 8px 0;
    background: var(--cwx-board);
    transform: translate(-50%, -50%);
}
.cwx-circuit__src i { display: block; width: 36px; height: 2px; background: var(--cwx-silk); }
.cwx-circuit__src i:nth-child(even) { width: 18px; height: 3px; }
.cwx-circuit__frame.is-live .cwx-circuit__src i { background: var(--cwx-mint); }

/* The knife switch sits in the top wire; its posts line up with it. */
.cwx-switch {
    position: absolute;
    top: 20px;
    left: 50%;
    width: 120px;
    height: 50px;
    padding: 0;
    border: 0;
    background: var(--cwx-board);
    cursor: pointer;
    transform: translate(-50%, -36px);
}
.cwx-switch svg { display: block; width: 120px; height: 50px; overflow: visible; }
.cwx-switch__post { fill: var(--cwx-board); stroke: var(--cwx-silk); stroke-width: 2; }
.cwx-switch__clip { fill: none; stroke: var(--cwx-mute); stroke-width: 2; }
.cwx-switch__blade {
    transform-origin: 14px 36px;
    transform: rotate(-34deg);
    transition: transform .55s cubic-bezier(.5, -0.4, .3, 1.5);
}
.cwx-switch__blade path { stroke: var(--cwx-silk); stroke-width: 3.5; stroke-linecap: round; transition: stroke .3s; }
.cwx-switch__blade circle { fill: var(--cwx-silk); }
.cwx-switch:hover .cwx-switch__blade { transform: rotate(-26deg); }
.cwx-switch[aria-pressed="true"] .cwx-switch__blade { transform: rotate(0); }
.cwx-switch[aria-pressed="true"] .cwx-switch__blade path,
.cwx-switch[aria-pressed="true"] .cwx-switch__post { stroke: var(--cwx-mint); }

.cwx-switch__hint {
    position: absolute;
    top: 62px;
    left: 50%;
    white-space: nowrap;
    font-size: 10.5px;
    color: var(--cwx-mint);
    transform: translateX(-50%);
    transition: opacity .3s;
}
.cwx-switch__hint::before { content: '\2191\00a0'; }
.cwx-switch[aria-pressed="true"] .cwx-switch__hint { opacity: 0; }

.cwx-circuit__copy { position: relative; max-width: 820px; margin: 0 auto; text-align: center; }
.cwx-circuit__copy .cwx-lead { margin: 26px auto 0; }

.cwx-circuit__title { position: relative; color: #fff; }
.cwx-circuit__open, .cwx-circuit__closed {
    display: block;
    transition: opacity .5s var(--cwx-ease), transform .6s var(--cwx-ease), filter .5s;
}
.cwx-circuit__closed {
    position: absolute;
    inset: 0;
    opacity: 0;
    transform: translateY(14px);
    filter: blur(4px);
    color: var(--cwx-mint);
}
.cwx-circuit__frame.is-live .cwx-circuit__open { opacity: 0; transform: translateY(-14px); filter: blur(4px); }
.cwx-circuit__frame.is-live .cwx-circuit__closed { opacity: 1; transform: none; filter: none; }

.cwx-circuit__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;
    margin-top: 42px;
}
.cwx-circuit__frame.is-live .cwx-circuit__load::after { animation: cwx-surge 1.6s var(--cwx-ease) infinite; }
@keyframes cwx-surge { from { transform: translateX(-110%); } to { transform: translateX(110%); } }

.cwx-circuit__ports {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px 32px;
    margin: 40px 0 0;
    padding: 0;
    list-style: none;
}
.cwx-circuit__ports li { padding: 0; }
.cwx-circuit__ports a { color: var(--cwx-mute); text-decoration: none; transition: color .25s; }
.cwx-circuit__ports a:hover { color: var(--cwx-mint); }

@media (max-width: 640px) {
    .cwx-circuit { padding: 90px 0; }
    .cwx-circuit__frame { padding: 104px 34px 64px 44px; }
    .cwx-circuit__src { left: 14px; }
    .cwx-circuit__src i { width: 26px; }
    .cwx-circuit__src i:nth-child(even) { width: 14px; }
    .cwx-circuit__actions .cwx-btn { flex: 1 1 100%; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
    .cwx-circuit__frame.is-live .cwx-circuit__current,
    .cwx-circuit__frame.is-live .cwx-circuit__load::after { animation: none; }
}