/* TLC electric logo interaction: dormant until hover/focus, with no idle animation cost. */
#header #logo,
#header #logo a {
    overflow: visible;
}

#header #logo a {
    position: relative;
    isolation: isolate;
}

#header #logo a::before,
#header #logo a::after {
    position: absolute;
    z-index: 0;
    pointer-events: none;
    content: "";
    opacity: 0;
}

#header #logo a::before {
    inset: -7px -10px;
    border: 1px solid rgba(91, 220, 255, 0.76);
    border-radius: 19px;
    clip-path: polygon(0 0, 32% 0, 35% 2px, 68% 2px, 71% 0, 100% 0, 100% 34%, calc(100% - 2px) 38%, calc(100% - 2px) 70%, 100% 74%, 100% 100%, 66% 100%, 62% calc(100% - 2px), 37% calc(100% - 2px), 33% 100%, 0 100%, 0 68%, 2px 64%, 2px 36%, 0 32%);
    box-shadow:
        0 0 8px rgba(91, 220, 255, 0.82),
        0 0 24px rgba(35, 166, 224, 0.46),
        inset 0 0 12px rgba(91, 220, 255, 0.2);
}

#header #logo a::after {
    inset: -16px -20px;
    background:
        radial-gradient(circle at 9% 22%, #fff 0 1px, #58dcff 1.5px 3px, transparent 4px),
        radial-gradient(circle at 23% 84%, #fff 0 1px, #58dcff 1.5px 2.5px, transparent 4px),
        radial-gradient(circle at 52% 8%, #fff 0 1px, #58dcff 1.5px 3px, transparent 4px),
        radial-gradient(circle at 78% 91%, #fff 0 1px, #58dcff 1.5px 2.5px, transparent 4px),
        radial-gradient(circle at 94% 31%, #fff 0 1px, #58dcff 1.5px 3px, transparent 4px),
        linear-gradient(112deg, transparent 0 17%, rgba(92, 220, 255, 0.9) 18% 18.5%, transparent 19% 100%),
        linear-gradient(292deg, transparent 0 78%, rgba(92, 220, 255, 0.85) 79% 79.5%, transparent 80% 100%);
    filter: drop-shadow(0 0 5px rgba(68, 202, 255, 0.95));
}

#header #logo img {
    position: relative;
    z-index: 1;
    transform-origin: 50% 50%;
}

#header #logo a:hover::before,
#header #logo a:focus-visible::before,
html.tlc-logo-electric #header #logo a::before {
    animation: tlc-electric-frame 720ms steps(1, end) 1 both;
}

#header #logo a:hover::after,
#header #logo a:focus-visible::after,
html.tlc-logo-electric #header #logo a::after {
    animation: tlc-electric-sparks 760ms steps(1, end) 1 both;
}

#header #logo a:hover img,
#header #logo a:focus-visible img,
html.tlc-logo-electric #header #logo img {
    animation: tlc-logo-glitch 680ms steps(1, end) 1 both;
}

/* Keep all electricity on the artwork itself, never on the link/container box. */
#header #logo a::before,
#header #logo a::after {
    display: none !important;
    content: none !important;
    animation: none !important;
}

#header #logo a:hover,
#header #logo a:focus-visible,
html.tlc-logo-electric #header #logo a {
    filter: none !important;
    box-shadow: none !important;
    transform: none !important;
}

@keyframes tlc-electric-frame {
    0% { opacity: 0; transform: scaleX(0.94); }
    10% { opacity: 0.88; transform: translate(-2px, 1px) scaleX(1.01); }
    18% { opacity: 0.24; }
    28% { opacity: 1; transform: translate(2px, -1px); }
    42% { opacity: 0.5; }
    55% { opacity: 0.94; transform: translate(-1px, 0); }
    72% { opacity: 0.38; }
    100% { opacity: 0.72; transform: none; }
}

@keyframes tlc-electric-sparks {
    0%, 8% { opacity: 0; transform: scale(0.96); }
    12% { opacity: 1; transform: translate(2px, -2px) scale(1.01); }
    20% { opacity: 0.18; }
    31% { opacity: 0.92; transform: translate(-3px, 1px); }
    43% { opacity: 0; }
    58% { opacity: 0.86; transform: translate(1px, 2px) scale(1.015); }
    69% { opacity: 0.12; }
    82% { opacity: 0.64; }
    100% { opacity: 0; transform: none; }
}

@keyframes tlc-logo-glitch {
    0% {
        transform: translate(0) scale(1);
        filter: brightness(1) saturate(1) drop-shadow(0 0 0 transparent);
    }
    10% {
        transform: translate(-0.8px, 0.35px) scale(1.002);
        filter: brightness(1.05) saturate(1.08) drop-shadow(1.4px 0 rgba(67, 214, 255, 0.78)) drop-shadow(-1px 0 rgba(255, 52, 76, 0.34));
    }
    17% {
        transform: translate(0.7px, -0.3px) scale(1.003);
        filter: brightness(1.08) saturate(1.12) drop-shadow(-1.2px 0 rgba(67, 214, 255, 0.7)) drop-shadow(0.8px 0 rgba(255, 52, 76, 0.28));
    }
    26% {
        transform: translate(-0.35px, 0) scale(1.002);
        filter: brightness(1.04) saturate(1.06) drop-shadow(0 0 8px rgba(64, 210, 255, 0.54));
    }
    41% {
        transform: translate(0.4px, 0.2px) scale(1.003);
        filter: brightness(1.09) saturate(1.1) drop-shadow(0 0 11px rgba(64, 210, 255, 0.62));
    }
    56% {
        transform: translate(-0.25px, -0.15px) scale(1.002);
        filter: brightness(1.05) saturate(1.06) drop-shadow(0.8px 0 rgba(67, 214, 255, 0.5));
    }
    72%,
    100% {
        transform: translate(0) scale(1);
        filter: brightness(1.03) saturate(1.04) drop-shadow(0 0 7px rgba(64, 210, 255, 0.42));
    }
}

@media (prefers-reduced-motion: reduce) {
    #header #logo a::before,
    #header #logo a::after {
        display: none !important;
    }

    #header #logo a:hover img,
    #header #logo a:focus-visible img,
    html.tlc-logo-electric #header #logo img {
        animation: none !important;
        filter: drop-shadow(0 0 12px rgba(64, 210, 255, 0.48));
    }
}

/* One-shot electric gleam for interactive buttons. */
a.button,
button:not(.icon):not(.tlc-hex-core):not(.tlc-hex-tile),
[role="button"]:not(.tlc-hex-core):not(.tlc-hex-tile),
.tlc-hex-button,
.tlc-project-cta__actions a,
.tlc-hex-home-cta__actions a {
    position: relative;
    isolation: isolate;
    overflow: hidden;
}

a.button::after,
button:not(.icon):not(.tlc-hex-core):not(.tlc-hex-tile)::after,
[role="button"]:not(.tlc-hex-core):not(.tlc-hex-tile)::after,
.tlc-hex-button::after,
.tlc-project-cta__actions a::after,
.tlc-hex-home-cta__actions a::after {
    position: absolute;
    top: -65%;
    bottom: -65%;
    left: -52%;
    z-index: 3;
    width: 34%;
    pointer-events: none;
    content: "";
    opacity: 0;
    background: linear-gradient(
        100deg,
        transparent 0%,
        rgba(113, 225, 255, 0.1) 24%,
        rgba(255, 255, 255, 0.92) 49%,
        rgba(84, 208, 255, 0.28) 64%,
        transparent 100%
    );
    filter: blur(0.4px) drop-shadow(0 0 8px rgba(77, 210, 255, 0.72));
    transform: skewX(-18deg) translateX(0);
}

a.button:hover::after,
a.button:focus-visible::after,
button:not(.icon):not(.tlc-hex-core):not(.tlc-hex-tile):hover::after,
button:not(.icon):not(.tlc-hex-core):not(.tlc-hex-tile):focus-visible::after,
[role="button"]:not(.tlc-hex-core):not(.tlc-hex-tile):hover::after,
[role="button"]:not(.tlc-hex-core):not(.tlc-hex-tile):focus-visible::after,
.tlc-hex-button:hover::after,
.tlc-hex-button:focus-visible::after,
.tlc-project-cta__actions a:hover::after,
.tlc-project-cta__actions a:focus-visible::after,
.tlc-hex-home-cta__actions a:hover::after,
.tlc-hex-home-cta__actions a:focus-visible::after {
    animation: tlc-button-electric-gleam 620ms cubic-bezier(0.2, 0.72, 0.24, 1) 1 both;
}

input[type="button"],
input[type="submit"] {
    transition: filter 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

input[type="button"]:hover,
input[type="button"]:focus-visible,
input[type="submit"]:hover,
input[type="submit"]:focus-visible {
    filter: brightness(1.12) saturate(1.08);
    box-shadow: 0 0 0 1px rgba(119, 226, 255, 0.5), 0 0 22px rgba(61, 197, 245, 0.34) !important;
}

@keyframes tlc-button-electric-gleam {
    0% {
        left: -52%;
        opacity: 0;
    }
    12% {
        opacity: 0.92;
    }
    44% {
        opacity: 0.72;
    }
    100% {
        left: 122%;
        opacity: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    a.button::after,
    button:not(.icon):not(.tlc-hex-core):not(.tlc-hex-tile)::after,
    [role="button"]:not(.tlc-hex-core):not(.tlc-hex-tile)::after,
    .tlc-hex-button::after,
    .tlc-project-cta__actions a::after,
    .tlc-hex-home-cta__actions a::after {
        display: none !important;
        animation: none !important;
    }
}