/* ToneCast title / lower-third overlay roots */
#castAnim,
#customLiveAnim,
#livePreviewAnim,
#nowCastingModalAnim {
    position: absolute;
    inset: 0;
    z-index: 6;
    overflow: hidden;
    pointer-events: none;
    display: none;
    background: transparent;
}
#castAnim.is-show,
#customLiveAnim.is-show,
#livePreviewAnim.is-show,
#nowCastingModalAnim.is-show,
html.tc-obs-overlay #castAnim.is-show,
html.tc-custom-overlay #castAnim.is-show {
    display: block;
    transform: translate3d(0, 0, 0) scale(var(--tc-anim-scale, 1));
    will-change: transform;
}
#castAnim.is-title,
#customLiveAnim.is-title,
#livePreviewAnim.is-title,
#nowCastingModalAnim.is-title {
    transform-origin: 50% 50%;
}
/* L3: do not scale the full 16:9 overlay (clips + fights GSAP). Scale the
   nameplate wrapper from the bottom instead so XL actually grows on 1080p. */
#castAnim.is-l3.is-show,
#customLiveAnim.is-l3.is-show,
#livePreviewAnim.is-l3.is-show,
#nowCastingModalAnim.is-l3.is-show,
html.tc-obs-overlay #castAnim.is-l3.is-show,
html.tc-custom-overlay #castAnim.is-l3.is-show {
    transform: none;
    will-change: auto;
}
#castAnim.is-l3,
#customLiveAnim.is-l3,
#livePreviewAnim.is-l3,
#nowCastingModalAnim.is-l3 {
    transform-origin: 6% 93%;
}
#castAnim.is-l3[data-position="bottom-right"],
#customLiveAnim.is-l3[data-position="bottom-right"],
#livePreviewAnim.is-l3[data-position="bottom-right"],
#nowCastingModalAnim.is-l3[data-position="bottom-right"] {
    transform-origin: 94% 93%;
}
.tc-l3-scaler {
    transform: scale(var(--tc-anim-scale, 1));
    transform-origin: left bottom;
    will-change: transform;
}
.tc-l3-scaler.tc-l3-scaler--center {
    transform-origin: center bottom;
}
.tc-l3-scaler.tc-l3-scaler--right,
#castAnim.is-l3[data-position="bottom-right"] .tc-l3-scaler,
#customLiveAnim.is-l3[data-position="bottom-right"] .tc-l3-scaler,
#livePreviewAnim.is-l3[data-position="bottom-right"] .tc-l3-scaler,
#nowCastingModalAnim.is-l3[data-position="bottom-right"] .tc-l3-scaler {
    transform-origin: right bottom;
}
#castAnim.is-overlay,
#customLiveAnim.is-overlay,
#livePreviewAnim.is-overlay,
#nowCastingModalAnim.is-overlay { background: transparent !important; }
html.tc-custom-overlay #castAnim,
html.tc-obs-overlay #castAnim,
html.tc-custom-overlay #customLiveAnim,
html.tc-custom-overlay #livePreviewAnim {
    background: transparent !important;
    background-color: rgba(0, 0, 0, 0) !important;
}
html.tc-obs-overlay .tc-anim-veil,
html.tc-custom-overlay .tc-anim-veil,
#castAnim.is-overlay .tc-anim-veil,
#customLiveAnim.is-overlay .tc-anim-veil,
#livePreviewAnim.is-overlay .tc-anim-veil {
    display: none !important;
    opacity: 0 !important;
    background: none !important;
    background-color: rgba(0, 0, 0, 0) !important;
}

/* Wireframe while GSAP / packs / enter() are not mounted yet */
.tc-anim-scaffold {
    position: absolute;
    inset: 0;
    z-index: 7;
    display: none;
    pointer-events: none;
    overflow: hidden;
    background: #020617;
}
.tc-anim-scaffold.is-on { display: block; }
.tc-anim-scaffold.is-overlay,
html.tc-custom-overlay .tc-anim-scaffold,
html.tc-obs-overlay .tc-anim-scaffold,
html.tc-obs-overlay .tc-anim-scaffold--l3,
#castAnim.is-overlay .tc-anim-scaffold--l3 {
    background: transparent;
}
.tc-anim-scaffold-inner { position: absolute; inset: 0; }
.tc-anim-scaffold--title {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.85rem;
    padding: 8%;
}
.tc-anim-scaffold--l3 {
    display: flex;
    align-items: stretch;
    gap: 0;
    position: absolute;
    left: 5%;
    bottom: 8%;
    width: min(42%, 28rem);
    height: 18%;
    min-height: 4.25rem;
    background: rgba(2, 6, 23, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 2px;
    overflow: hidden;
}
.tc-anim-scaffold-l3-lines {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.45rem;
    padding: 0.7rem 0.9rem;
}
.tc-anim-wire {
    display: block;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.04);
    border-radius: 2px;
}
.tc-anim-wire-rule {
    width: 4.5rem;
    height: 3px;
    border-color: rgba(45, 212, 191, 0.45);
    background: rgba(45, 212, 191, 0.18);
}
.tc-anim-wire-title {
    width: min(70%, 28rem);
    height: clamp(1.6rem, 7vh, 3.4rem);
}
.tc-anim-wire-sub {
    width: min(42%, 16rem);
    height: clamp(0.55rem, 2vh, 0.95rem);
    border-color: rgba(45, 212, 191, 0.28);
}
.tc-anim-wire-accent {
    width: 6px;
    flex-shrink: 0;
    align-self: stretch;
    border: 0;
    border-radius: 0;
    background: rgba(45, 212, 191, 0.55);
}
.tc-anim-wire-name { width: 78%; height: 0.85rem; }
.tc-anim-wire-role {
    width: 52%;
    height: 0.5rem;
    border-color: rgba(45, 212, 191, 0.28);
}
.tc-anim-scaffold.is-on:not(.is-static) .tc-anim-wire {
    animation: tc-anim-wire-pulse 1.35s ease-in-out infinite;
}
.tc-anim-scaffold.is-on:not(.is-static) .tc-anim-wire-accent,
.tc-anim-scaffold.is-on:not(.is-static) .tc-anim-wire-rule,
.tc-anim-scaffold.is-on:not(.is-static) .tc-anim-wire-sub,
.tc-anim-scaffold.is-on:not(.is-static) .tc-anim-wire-role {
    animation-name: tc-anim-wire-teal;
}
@keyframes tc-anim-wire-pulse {
    0%, 100% { opacity: 0.45; }
    50% { opacity: 1; }
}
@keyframes tc-anim-wire-teal {
    0%, 100% { opacity: 0.4; box-shadow: 0 0 0 rgba(45, 212, 191, 0); }
    50% { opacity: 1; box-shadow: 0 0 10px rgba(45, 212, 191, 0.35); }
}
@media (prefers-reduced-motion: reduce) {
    .tc-anim-scaffold .tc-anim-wire {
        animation: none !important;
        box-shadow: none !important;
    }
}

.tc-anim-card-wire {
    width: 100%;
    height: 100%;
    background: #020617;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    padding: 0.85rem;
}
.tc-anim-card-wire.is-l3 {
    align-items: stretch;
    justify-content: flex-end;
    padding: 0.7rem;
}
.tc-anim-card-wire .tc-anim-wire-title { width: 78%; height: 1.15rem; }
.tc-anim-card-wire .tc-anim-wire-sub { width: 48%; height: 0.45rem; }
.tc-anim-card-wire .tc-anim-card-l3 {
    display: flex;
    align-items: stretch;
    border: 1px solid rgba(255, 255, 255, 0.1);
    min-height: 2.6rem;
}
.tc-anim-card-wire .tc-anim-card-copy {
    position: relative;
    z-index: 1;
    text-align: center;
    max-width: 100%;
}
.image-card.is-media-pending::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(255,255,255,0.03), rgba(45,212,191,0.08), rgba(255,255,255,0.03));
    background-size: 200% 100%;
    animation: tc-anim-wire-pulse 1.4s ease-in-out infinite;
    pointer-events: none;
    z-index: 1;
}
@media (prefers-reduced-motion: reduce) {
    .image-card.is-media-pending::after { animation: none; opacity: 0.35; }
}
#castAnim.is-show:not(.is-overlay) { /* full-frame titles may paint their own vignette */ }

.tc-anim-builtin {
    position: absolute;
    inset: 0;
    overflow: hidden;
    color: #fff;
    font-family: Inter, system-ui, sans-serif;
    pointer-events: none;
}
.tc-anim-builtin .tc-t {
    font-family: 'Crimson Pro', Georgia, serif;
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.1;
    margin: 0;
}
.tc-anim-builtin .tc-s {
    font-family: Inter, system-ui, sans-serif;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin: 0;
    opacity: 0.92;
}