/* 登录首页品牌动态背景（从 control.html 抽取，供开赛预告等复用，勿另起一套近似纹理） */
@keyframes xy-brand-ken-burns {
    0%, 100% { transform: translate3d(-1.5%, -1%, 0) scale(1.04); }
    50% { transform: translate3d(1.5%, 1%, 0) scale(1.08); }
}
@keyframes xy-brand-float {
    0%, 100% { transform: translate(0, 0); opacity: 0.3; }
    50% { transform: translate(20px, -40px); opacity: 0.8; }
}
@keyframes xy-brand-diagonal-sweep {
    0% { transform: translate(-100%, -100%) rotate(45deg); opacity: 0; }
    10% { opacity: 0.15; }
    90% { opacity: 0.15; }
    100% { transform: translate(100%, 100%) rotate(45deg); opacity: 0; }
}
@keyframes xy-brand-light-sweep {
    0% { transform: translateX(-100%) rotate(-45deg); }
    100% { transform: translateX(200%) rotate(-45deg); }
}

.xy-brand-dynamic-bg {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
}
.xy-brand-dynamic-bg__image {
    position: absolute;
    inset: -5%;
    z-index: 0;
    background-color: #8a7412;
    background-image: url('images/brand-dynamic-bg.jpg');
    background-size: cover;
    background-position: center;
    animation: xy-brand-ken-burns 40s ease-in-out infinite;
    will-change: transform;
    backface-visibility: hidden;
}
.xy-brand-dynamic-bg__overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: radial-gradient(circle, rgba(11, 14, 20, 0.4) 0%, rgba(11, 14, 20, 0.7) 100%);
}
.xy-brand-dynamic-bg__hex {
    position: absolute;
    inset: 0;
    z-index: 2;
    opacity: 0.2;
    background-image: url("data:image/svg+xml,%3Csvg width='24' height='42' viewBox='0 0 24 42' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 7L12 0L24 7V21L12 28L0 21V7ZM12 28L24 35V42H0V35L12 28Z' fill='%23FFD700' fill-opacity='0.03' fill-rule='evenodd'/%3E%3C/svg%3E");
}
.xy-brand-dynamic-bg__mesh {
    position: absolute;
    inset: 0;
    z-index: 2;
    opacity: 0.1;
    background-image:
        linear-gradient(45deg, rgba(255, 215, 0, 0.02) 25%, transparent 25%),
        linear-gradient(-45deg, rgba(255, 215, 0, 0.02) 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, rgba(255, 215, 0, 0.02) 75%),
        linear-gradient(-45deg, transparent 75%, rgba(255, 215, 0, 0.02) 75%);
    background-size: 16px 16px;
}
.xy-brand-dynamic-bg__scan {
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 100px;
    z-index: 3;
    background: linear-gradient(to bottom, transparent, rgba(255, 215, 0, 0.3), transparent);
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.2);
    animation: xy-brand-diagonal-sweep 15s linear infinite;
    opacity: 0.1;
    pointer-events: none;
}
.xy-brand-dynamic-bg__sweep {
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    z-index: 2;
    background: linear-gradient(to right, transparent, rgba(255, 215, 0, 0.05), transparent);
    animation: xy-brand-light-sweep 10s linear infinite;
    pointer-events: none;
}
.xy-brand-dynamic-bg__glow-tr {
    position: absolute;
    top: 0;
    right: 0;
    width: 50%;
    height: 100%;
    z-index: 2;
    background: linear-gradient(to left, rgba(255, 215, 0, 0.05), transparent);
}
.xy-brand-dynamic-bg__glow-bl {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 33.333%;
    height: 100%;
    z-index: 2;
    background: linear-gradient(to right, rgba(255, 215, 0, 0.05), transparent);
}
.xy-brand-dynamic-bg__particle {
    position: absolute;
    z-index: 3;
    background: #ffcc00;
    border-radius: 50%;
    pointer-events: none;
    animation: xy-brand-float 6s ease-in-out infinite;
    box-shadow: 0 0 10px #ffcc00;
    will-change: transform, opacity;
}

/* 缩略图只承担辨认分镜的作用，不需要持续运行整套动态包装。导播台同屏有多张
   缩略图，全部动画会制造大量常驻合成层，是长期白屏的主要风险。 */
.thumb .xy-brand-dynamic-bg__image,
.thumb .xy-brand-dynamic-bg__scan,
.thumb .xy-brand-dynamic-bg__sweep,
.thumb .xy-brand-dynamic-bg__particle {
    animation: none !important;
}
.thumb .xy-brand-dynamic-bg__particle,
.thumb .xy-brand-dynamic-bg__scan,
.thumb .xy-brand-dynamic-bg__sweep {
    display: none !important;
}

/* 页面退到后台时主动释放动画合成压力；回到前台后浏览器会自然续播。 */
html.v2-page-hidden .xy-brand-dynamic-bg__image,
html.v2-page-hidden .xy-brand-dynamic-bg__scan,
html.v2-page-hidden .xy-brand-dynamic-bg__sweep,
html.v2-page-hidden .xy-brand-dynamic-bg__particle {
    animation-play-state: paused !important;
}

@media (prefers-reduced-motion: reduce) {
    .xy-brand-dynamic-bg__image,
    .xy-brand-dynamic-bg__scan,
    .xy-brand-dynamic-bg__sweep,
    .xy-brand-dynamic-bg__particle {
        animation: none !important;
    }
}


/* Confirmed broadcast flow-02: fixed art, continuous light, fixed fine grain.
   Distinct children avoid presentation.css's legacy image drift and dark layers. */
.xy-brand-gold-flow {
    isolation: isolate;
    background: #181a19;
    filter: brightness(var(--gold-flow02-brightness, 1));
}
.xy-brand-gold-flow__image,
.xy-brand-gold-flow__canvas,
.xy-brand-gold-flow__grain {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}
.xy-brand-gold-flow__image {
    z-index: 0;
    object-fit: cover;
    animation: none;
    transform: none;
    will-change: auto;
}
.xy-brand-gold-flow__canvas { z-index: 1; display: none; }
.xy-brand-gold-flow__grain {
    z-index: 2;
    display: none;
    background-repeat: repeat;
    background-size: 96px 96px;
    opacity: .13;
}
.xy-brand-gold-flow.flow-on .xy-brand-gold-flow__canvas,
.xy-brand-gold-flow.flow-on .xy-brand-gold-flow__grain { display: block; }
.xy-brand-gold-flow[data-flow-texture="false"] .xy-brand-gold-flow__grain { display: none; }
.thumb .xy-brand-gold-flow__canvas,
.thumb .xy-brand-gold-flow__grain { display: none !important; }

/* Retain watermark nodes, configuration and all other background modes/profiles.
   Existing scrim input is observed by the provider and drives calibrated dimming. */
.pv-shared-bg[data-background-profile="default-brand"][data-brand-flow02="live"]:is([data-bg-mode="brand"], [data-bg-mode="brand-fallback"]) > .pv-shared-bg-pack > :is(
    .pv-shared-bg-scrim, .pv-shared-bg-wash, .pv-shared-bg-vignette,
    .pv-shared-bg-grid, .pv-shared-bg-beam, .pv-shared-bg-scan
) { display: none; }

@media (prefers-reduced-motion: reduce) {
    .xy-brand-gold-flow.flow-on .xy-brand-gold-flow__canvas,
    .xy-brand-gold-flow.flow-on .xy-brand-gold-flow__grain { display: none; }
}