/* Signature element — a braided cable dropping in from the top edge, frayed
   and sparking at the tip. One per page, always on an ink band, always hanging
   from the very top of the band it lives in. Decorative: never blocks pointer
   events, and hidden from assistive tech. */

.cable {
    position: absolute;
    top: 0;
    pointer-events: none;
    z-index: 6;
    transform-origin: 50% 0%;
    animation: om-sway 7s ease-in-out infinite alternate;
}

.cable svg {
    display: block;
    overflow: visible;
}

.cable__glow { animation: om-glow 1.5s ease-in-out infinite; }
.cable__spark { animation: om-spark 1.5s ease-in-out infinite; }

.cable__arc {
    opacity: 0;
    animation: om-arc 1.5s steps(1, end) infinite;
}

.cable__arc:nth-of-type(2) { animation-delay: 0.5s; }
.cable__arc:nth-of-type(3) { animation-delay: 1s; }

@keyframes om-sway {
    from { transform: rotate(-1.4deg); }
    to { transform: rotate(1.4deg); }
}

@keyframes om-spark {
    0%, 100% { opacity: 0.25; }
    8%  { opacity: 1; }
    12% { opacity: 0.3; }
    20% { opacity: 0.95; }
    26% { opacity: 0.2; }
    60% { opacity: 0.5; }
}

@keyframes om-glow {
    0%, 100% { opacity: 0.25; }
    10% { opacity: 0.8; }
    22% { opacity: 0.35; }
    55% { opacity: 0.55; }
}

@keyframes om-arc {
    0%, 100% { opacity: 0; }
    6%  { opacity: 0.9; }
    10% { opacity: 0; }
    18% { opacity: 0.7; }
    22% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .cable,
    .cable__glow,
    .cable__spark,
    .cable__arc {
        animation: none;
    }
    .cable__arc { opacity: 0.5; }
}

/* The cable hangs in a gutter or empty column. Below the two-column
   breakpoint there is no gutter to hang it in, so it comes out. */
@media (max-width: 900px) {
    .cable { display: none; }
}

/* Placements — the cable hangs in a gutter or empty column, never over a
   heading, a face, or a photo's subject. */
.cable-hero { left: calc(52.1% - 78px); }
.cable-page { right: 14%; }