/* VTL 2027 photo-wall animations, shared by the site (v27_photo_wall) and the VIMS admin picker
   (vims/league-reg/admin/web-animations.php). Each .waN plays inside its frame; photos never move or tilt. */
.wp {
    position: relative; isolation: isolate; display: block;
    overflow: hidden; border-radius: 14px; background-color: rgba(255, 255, 255, .06);
    --fx: 1; animation-duration: var(--d, 4s); animation-delay: var(--t, 0s); animation-iteration-count: infinite;
}
.wp img { display: block; width: 100%; height: 100%; }
.wp::before, .wp::after {
    content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; border-radius: inherit; opacity: 0;
    animation-duration: var(--d, 4s); animation-delay: var(--t, 0s); animation-iteration-count: infinite;
}
.wp > img { animation-duration: var(--d, 4s); animation-delay: var(--t, 0s); animation-iteration-count: infinite; }

/* Each wall photo plays its own broadcast-style animation inside its frame (never twice in a row, see
   v27_photo_wall); the photo itself stays upright and in place on the row line */
/* 1 Trading-card shine */
.wa1::after { opacity: 1; background: linear-gradient(110deg, transparent 35%, rgba(255, 255, 255, .7) 48%, rgba(255, 255, 255, .15) 54%, transparent 65%) 100% 0 / 250% 100% no-repeat; animation-name: wa-shine; animation-timing-function: ease-in-out; }
@keyframes wa-shine { from { background-position: 100% 0; } to { background-position: 0 0; } }
/* 2 Camera flashes */
.wa2::after { background: #fff; animation-name: wa-flash; }
@keyframes wa-flash { 0% { opacity: .9; } 30% { opacity: .08; } 33% { opacity: .75; } 60% { opacity: .1; } 63% { opacity: .85; } 100% { opacity: 0; } }
/* 3 Punch zoom */
.wa3 > img { animation-name: wa-punch; animation-timing-function: ease-out; }
@keyframes wa-punch { 0% { scale: 1; } 25% { scale: 1.22; } 40% { scale: 1.04; } 50% { scale: 1.14; } 75% { scale: 1.03; } 100% { scale: 1; } }
/* 4 Slow push-in on the face */
.wa4 > img { transform-origin: 50% 35%; animation-name: wa-push; animation-timing-function: ease-in-out; animation-direction: alternate; }
@keyframes wa-push { from { scale: 1; } to { scale: 1.3; } }
/* 5 Red glow ring */
.wa5 { animation-name: wa-ring-red; animation-timing-function: ease-in-out; }
@keyframes wa-ring-red { 0%, 100% { box-shadow: 0 0 0 0 rgba(232, 0, 43, 0); } 50% { box-shadow: 0 0 0 3px rgba(232, 0, 43, .95), 0 0 26px 6px rgba(232, 0, 43, .7); } }
/* 6 Blue glow ring */
.wa6 { animation-name: wa-ring-blue; animation-timing-function: ease-in-out; }
@keyframes wa-ring-blue { 0%, 100% { box-shadow: 0 0 0 0 rgba(40, 120, 255, 0); } 50% { box-shadow: 0 0 0 3px rgba(80, 150, 255, .95), 0 0 26px 6px rgba(40, 120, 255, .7); } }
/* 7 Scoreboard wipe */
.wa7 > img { animation-name: wa-wipe; animation-timing-function: cubic-bezier(.7, 0, .3, 1); }
.wa7::after { opacity: 1; background: linear-gradient(90deg, transparent 47%, var(--red) 47% 53%, transparent 53%) 100% 0 / 300% 100% no-repeat; animation-name: wa-wipe-bar; animation-timing-function: cubic-bezier(.7, 0, .3, 1); }
@keyframes wa-wipe { 0% { clip-path: inset(0 0 0 0); } 50% { clip-path: inset(0 0 0 100%); } 50.5% { clip-path: inset(0 100% 0 0); } 100% { clip-path: inset(0 0 0 0); } }
@keyframes wa-wipe-bar { 0% { background-position: 100% 0; } 50% { background-position: 0 0; } 50.5% { background-position: 100% 0; } 100% { background-position: 0 0; } }
/* 8 Iris close and open */
.wa8 > img { animation-name: wa-iris; animation-timing-function: ease-in-out; }
@keyframes wa-iris { 0% { clip-path: circle(75% at 50% 40%); } 50% { clip-path: circle(16% at 50% 40%); } 100% { clip-path: circle(75% at 50% 40%); } }
/* 9 Shutter */
.wa9 > img { animation-name: wa-shutter; animation-timing-function: cubic-bezier(.7, 0, .3, 1); }
@keyframes wa-shutter { 0% { clip-path: inset(0 0 0 0); } 50% { clip-path: inset(46% 0 46% 0); } 100% { clip-path: inset(0 0 0 0); } }
/* 10 Scan line */
.wa10::after { opacity: 1; background: linear-gradient(180deg, transparent 40%, rgba(120, 190, 255, .25) 47%, rgba(200, 230, 255, .95) 50%, transparent 51%) 0 100% / 100% 300% no-repeat; animation-name: wa-scan; animation-timing-function: linear; }
@keyframes wa-scan { from { background-position: 0 100%; } to { background-position: 0 0; } }
/* 11 Roaming spotlight */
.wa11::after { opacity: 1; background: radial-gradient(circle, transparent 0 16%, rgba(4, 16, 40, .78) 34%) 0 0 / 200% 200%; animation-name: wa-spot; animation-timing-function: ease-in-out; }
@keyframes wa-spot { 0%, 100% { background-position: 20% 20%; } 33% { background-position: 80% 30%; } 66% { background-position: 55% 85%; } }
/* 12 Speed stripe in team red */
.wa12::after { opacity: 1; background: linear-gradient(115deg, transparent 42%, rgba(232, 0, 43, .85) 42% 50%, rgba(255, 255, 255, .8) 50% 52%, transparent 52%) 100% 0 / 300% 100% no-repeat; animation-name: wa-stripe; animation-timing-function: cubic-bezier(.6, 0, .4, 1); }
@keyframes wa-stripe { from { background-position: 100% 0; } to { background-position: 0 0; } }
/* 13 Strobe */
.wa13 { animation-name: wa-strobe; animation-timing-function: linear; }
@keyframes wa-strobe { 0% { filter: brightness(1); } 8% { filter: brightness(1.9); } 16% { filter: brightness(.6); } 24% { filter: brightness(1.6); } 40% { filter: brightness(.85); } 52% { filter: brightness(1.8); } 60% { filter: brightness(.7); } 80% { filter: brightness(1.3); } 100% { filter: brightness(1); } }
/* 14 Contrast pop */
.wa14 { animation-name: wa-pop; animation-timing-function: ease-in-out; }
@keyframes wa-pop { 0%, 100% { filter: none; } 50% { filter: contrast(1.7) brightness(1.25); } }
/* 15-17 Team-colour and MVP-gold tints */
.wa15::after, .wa16::after, .wa17::after { mix-blend-mode: color; animation-name: wa-tint; animation-timing-function: ease-in-out; }
.wa15::after { background: var(--red); }
.wa16::after { background: #1f6bff; }
.wa17::after { background: #f4b400; }
@keyframes wa-tint { 0%, 100% { opacity: 0; } 50% { opacity: .9; } }
/* 18 Volleyball net */
.wa18::after {
    background: repeating-linear-gradient(0deg, rgba(255, 255, 255, .5) 0 1px, transparent 1px 12px), repeating-linear-gradient(90deg, rgba(255, 255, 255, .5) 0 1px, transparent 1px 12px);
    animation-name: wa-net; animation-timing-function: ease-in-out;
}
@keyframes wa-net { 0%, 100% { opacity: 0; background-position: 0 -12px, 0 0; } 50% { opacity: 1; background-position: 0 0, 0 0; } }
/* 19 Lock-on reticle */
.wa19::after { inset: 16% 22% 28%; border: 2px solid rgba(255, 255, 255, .95); border-radius: 50%; box-shadow: 0 0 12px rgba(80, 160, 255, .8); animation-name: wa-lock; animation-timing-function: cubic-bezier(.2, .8, .3, 1); }
@keyframes wa-lock { 0% { opacity: 0; scale: 2.4; } 30% { opacity: 1; scale: 1; } 40% { scale: 1.12; } 50% { scale: 1; } 62% { scale: 1.06; } 75% { opacity: 1; scale: 1; } 100% { opacity: 0; scale: .9; } }
/* 20 Viewfinder corners */
.wa20::after {
    inset: 8%;
    background:
        linear-gradient(#fff, #fff) 0 0 / 22% 3px, linear-gradient(#fff, #fff) 0 0 / 3px 22%,
        linear-gradient(#fff, #fff) 100% 0 / 22% 3px, linear-gradient(#fff, #fff) 100% 0 / 3px 22%,
        linear-gradient(#fff, #fff) 0 100% / 22% 3px, linear-gradient(#fff, #fff) 0 100% / 3px 22%,
        linear-gradient(#fff, #fff) 100% 100% / 22% 3px, linear-gradient(#fff, #fff) 100% 100% / 3px 22%;
    background-repeat: no-repeat; border-radius: 0; animation-name: wa-frame; animation-timing-function: ease-out;
}
@keyframes wa-frame { 0% { opacity: 0; scale: 1.25; } 25% { opacity: 1; scale: 1; } 50% { opacity: .75; scale: 1.06; } 70% { opacity: 1; scale: 1; } 80% { opacity: .2; } 85% { opacity: 1; } 100% { opacity: 0; scale: .96; } }
/* 21 Sparkles */
.wa21::after {
    background:
        radial-gradient(circle at 18% 24%, #fff 0 2px, transparent 3px), radial-gradient(circle at 78% 18%, #fff 0 2.5px, transparent 3.5px),
        radial-gradient(circle at 64% 70%, #fff 0 2px, transparent 3px), radial-gradient(circle at 28% 78%, #fff 0 1.5px, transparent 2.5px),
        radial-gradient(circle at 88% 58%, #fff 0 1.5px, transparent 2.5px);
    animation-name: wa-sparkle; animation-timing-function: ease-in-out;
}
@keyframes wa-sparkle { 0%, 100% { opacity: 0; scale: .8; } 25% { opacity: 1; scale: 1; } 40% { opacity: .2; } 55% { opacity: 1; scale: 1.08; } 80% { opacity: .1; scale: .9; } }
/* 22 Sonar ripples */
.wa22::before, .wa22::after { inset: 30%; border: 2px solid rgba(255, 255, 255, .9); border-radius: 50%; animation-name: wa-sonar; animation-timing-function: ease-out; }
.wa22::after { animation-delay: calc(var(--t, 0s) - var(--d, 4s) / 2); }
@keyframes wa-sonar { from { opacity: 1; scale: .2; } to { opacity: 0; scale: 2.6; } }
/* 23 On fire: red heat from the edges */
.wa23::after { opacity: 1; animation-name: wa-fire; animation-timing-function: ease-in-out; }
@keyframes wa-fire { 0%, 100% { box-shadow: inset 0 0 0 0 rgba(255, 60, 0, 0); } 50% { box-shadow: inset 0 -10px 34px 10px rgba(255, 60, 0, .85); } }
/* 24 Power bar charging up */
.wa24::after { inset: auto 0 0; height: 100%; opacity: 1; background: linear-gradient(0deg, rgba(232, 0, 43, .8), rgba(232, 0, 43, .25) 60%, rgba(232, 0, 43, 0)); transform-origin: 50% 100%; animation-name: wa-power; animation-timing-function: cubic-bezier(.3, 0, .2, 1); }
@keyframes wa-power { 0% { scale: 1 0; opacity: 1; } 65% { scale: 1 1; opacity: 1; } 100% { scale: 1 1; opacity: 0; } }
/* 25 Curtain split */
.wa25 > img { animation-name: wa-curtain; animation-timing-function: cubic-bezier(.7, 0, .3, 1); }
@keyframes wa-curtain { 0% { clip-path: inset(0 0 0 0); } 50% { clip-path: inset(0 46% 0 46%); } 100% { clip-path: inset(0 0 0 0); } }
/* 26 Heartbeat */
.wa26 > img { animation-name: wa-heart; animation-timing-function: ease-in-out; }
@keyframes wa-heart { 0%, 100% { scale: 1; } 14% { scale: 1.15; } 28% { scale: 1.02; } 42% { scale: 1.12; } 60% { scale: 1; } 80% { scale: 1.05; } }

/* 27 Zoom-out reveal */
.wa27 > img { animation-name: wa-zoomout; animation-timing-function: cubic-bezier(.2, .7, .3, 1); }
@keyframes wa-zoomout { 0% { scale: 1.45; } 70% { scale: 1; } 100% { scale: 1.08; } }
/* 28 Glitch slices */
.wa28 > img { animation-name: wa-glitch; animation-timing-function: steps(1, end); }
@keyframes wa-glitch {
    0% { clip-path: inset(0 0 0 0); } 10% { clip-path: inset(12% 0 58% 0); } 14% { clip-path: inset(0 0 0 0); }
    30% { clip-path: inset(60% 0 8% 0); } 34% { clip-path: inset(0 0 0 0); } 52% { clip-path: inset(30% 0 40% 0); }
    56% { clip-path: inset(0 0 0 0); } 74% { clip-path: inset(0 0 70% 0); } 78% { clip-path: inset(0 0 0 0); }
    90% { clip-path: inset(44% 0 22% 0); } 94%, 100% { clip-path: inset(0 0 0 0); }
}
/* 29 Venetian blinds */
.wa29::after { opacity: 1; background: repeating-linear-gradient(180deg, rgba(10, 42, 94, .85) 0 7px, transparent 7px 14px) 0 0 / 100% 200%; animation-name: wa-blinds; animation-timing-function: ease-in-out; }
@keyframes wa-blinds { 0%, 100% { opacity: 0; background-position: 0 0; } 50% { opacity: .9; background-position: 0 100%; } }
/* 30 Confetti in league colours */
.wa30::after {
    opacity: 1;
    background:
        radial-gradient(circle, #E8002B 0 2px, transparent 3px) 10% 0 / 30% 34%,
        radial-gradient(circle, #fff 0 2px, transparent 3px) 60% 0 / 26% 30%,
        radial-gradient(circle, #f4b400 0 2px, transparent 3px) 30% 0 / 34% 38%,
        radial-gradient(circle, #2f7bff 0 2px, transparent 3px) 85% 0 / 28% 32%;
    animation-name: wa-confetti; animation-timing-function: linear;
}
@keyframes wa-confetti { from { background-position: 10% 0, 60% 0, 30% 0, 85% 0; } to { background-position: 14% 100%, 56% 140%, 34% 120%, 81% 160%; } }
/* 31 MVP badge */
.wa31::after {
    content: "MVP"; inset: auto 8% 8% auto; display: grid; place-items: center; padding: 3px 7px; border-radius: 6px;
    background: linear-gradient(135deg, #f7c948, #d99a00); color: #071F47;
    font: 700 13px/1 "Righteous", system-ui, sans-serif; letter-spacing: .04em;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .35); animation-name: wa-mvp; animation-timing-function: cubic-bezier(.3, 1.6, .5, 1);
}
@keyframes wa-mvp { 0% { opacity: 0; scale: 0; } 25% { opacity: 1; scale: 1.2; } 35% { scale: 1; } 75% { opacity: 1; scale: 1; } 100% { opacity: 0; scale: .6; } }
.wa31 > img { animation-name: wa-mvp-glow; animation-timing-function: ease-in-out; }
@keyframes wa-mvp-glow { 0%, 100% { scale: 1; } 30% { scale: 1.06; } }
/* 32 Red-to-blue duotone sweep */
.wa32::after { opacity: .85; mix-blend-mode: color; background: linear-gradient(90deg, #E8002B, #1f6bff, #E8002B) 0 0 / 300% 100%; animation-name: wa-duo; animation-timing-function: linear; }
@keyframes wa-duo { to { background-position: 100% 0; } }
/* 33 Elastic boing */
.wa33 > img { animation-name: wa-boing; animation-timing-function: ease-out; }
@keyframes wa-boing { 0% { scale: 1; } 12% { scale: 1.2; } 24% { scale: .94; } 36% { scale: 1.1; } 48% { scale: .98; } 60% { scale: 1.04; } 100% { scale: 1; } }
/* 34 Light ring running round the frame */
.wa34::after {
    opacity: 1; inset: 0;
    background: conic-gradient(from var(--wa-a, 0deg), transparent 0 70%, rgba(255, 255, 255, .95) 85%, transparent 100%);
    -webkit-mask: linear-gradient(#000, #000) content-box exclude, linear-gradient(#000, #000);
    mask: linear-gradient(#000, #000) content-box exclude, linear-gradient(#000, #000);
    padding: 3px; animation-name: wa-run; animation-timing-function: linear;
}
@property --wa-a { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@keyframes wa-run { to { --wa-a: 360deg; } }

@media (prefers-reduced-motion: reduce) {
    .wp, .wp > img { animation: none; }
    .wp::before, .wp::after { display: none; }
}