/* AP Euro Unit 8 reel graphics — pair with ap-euro-reel-graphics.js */

/* ===================== shared base ===================== */
.ap-euro-u8v {
    position: relative;
    width: min(100%, 260px);
    height: min(34vh, 220px);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 16px;
}

/* ===================== 8.2 — WWI ===================== */

/* v1: tangled alliance threads */
.ap-euro-u8v--u82v1 { background: radial-gradient(circle at 50% 50%, rgba(180,60,40,0.08), transparent 70%); }
.ap-euro-u8v__thread {
    position: absolute;
    width: 2px;
    height: 80%;
    background: linear-gradient(180deg, rgba(255,100,80,0.6), rgba(80,140,255,0.6));
    border-radius: 1px;
    transform-origin: 50% 0;
}
.ap-euro-u8v__thread--1 { left: 25%; animation: apU8ThreadSway 3s ease-in-out infinite; }
.ap-euro-u8v__thread--2 { left: 40%; animation: apU8ThreadSway 3.4s ease-in-out infinite 0.3s; }
.ap-euro-u8v__thread--3 { left: 55%; animation: apU8ThreadSway 2.8s ease-in-out infinite 0.6s; }
.ap-euro-u8v__thread--4 { left: 70%; animation: apU8ThreadSway 3.2s ease-in-out infinite 0.15s; }
.ap-euro-u8v__knot {
    position: absolute;
    width: 12px; height: 12px;
    border-radius: 50%;
    background: rgba(255,120,80,0.7);
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    animation: apU8KnotPulse 2.4s ease-in-out infinite;
}
@keyframes apU8ThreadSway { 0%,100% { transform: rotate(-4deg); } 50% { transform: rotate(4deg); } }
@keyframes apU8KnotPulse { 0%,100% { transform: translate(-50%,-50%) scale(1); opacity: 0.7; } 50% { transform: translate(-50%,-50%) scale(1.3); opacity: 1; } }

/* v2: trench cross-section + barbed wire */
.ap-euro-u8v--u82v2 { background: linear-gradient(180deg, #1a1a1a 40%, #2a2218 41%, #2a2218 100%); }
.ap-euro-u8v__trench {
    position: absolute;
    bottom: 20%;
    width: 60%;
    height: 30%;
    border: 2px solid rgba(160,130,80,0.5);
    border-top: none;
    border-radius: 0 0 8px 8px;
}
.ap-euro-u8v__wire {
    position: absolute;
    top: 38%;
    width: 80%;
    height: 2px;
    background: repeating-linear-gradient(90deg, rgba(180,180,180,0.6) 0 4px, transparent 4px 8px);
}
.ap-euro-u8v__wire::before, .ap-euro-u8v__wire::after {
    content: '';
    position: absolute;
    width: 6px; height: 6px;
    border: 1.5px solid rgba(180,180,180,0.5);
    border-radius: 50%;
    top: -3px;
}
.ap-euro-u8v__wire::before { left: 20%; }
.ap-euro-u8v__wire::after { left: 65%; }
.ap-euro-u8v__shell {
    position: absolute;
    top: 10%;
    right: 20%;
    width: 8px; height: 16px;
    background: rgba(255,180,60,0.7);
    border-radius: 50% 50% 30% 30%;
    animation: apU8ShellFall 2.5s ease-in infinite;
}
@keyframes apU8ShellFall { 0% { transform: translateY(-20px); opacity: 0; } 40% { opacity: 1; } 80% { transform: translateY(60px); opacity: 1; } 100% { transform: translateY(60px); opacity: 0; } }

/* v3: gas cloud */
.ap-euro-u8v--u82v3 { background: radial-gradient(circle at 40% 60%, rgba(120,160,60,0.1), transparent 60%); }
.ap-euro-u8v__gas {
    position: absolute;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(160,200,60,0.25), transparent 70%);
    animation: apU8GasExpand 4s ease-in-out infinite;
}
.ap-euro-u8v__gas--1 { width: 100px; height: 100px; left: 15%; top: 25%; }
.ap-euro-u8v__gas--2 { width: 80px; height: 80px; right: 20%; top: 35%; animation-delay: 0.8s; }
.ap-euro-u8v__gas--3 { width: 60px; height: 60px; left: 40%; bottom: 20%; animation-delay: 1.6s; }
@keyframes apU8GasExpand { 0%,100% { transform: scale(0.8); opacity: 0.3; } 50% { transform: scale(1.3); opacity: 0.6; } }

/* v4: globe with spreading lines */
.ap-euro-u8v--u82v4 { background: radial-gradient(circle at 50% 50%, rgba(60,100,180,0.08), transparent 60%); }
.ap-euro-u8v__globe {
    width: 90px; height: 90px;
    border-radius: 50%;
    border: 2px solid rgba(100,160,255,0.4);
    position: relative;
}
.ap-euro-u8v__globe::before {
    content: '';
    position: absolute;
    inset: 15%;
    border-radius: 50%;
    border: 1px solid rgba(100,160,255,0.2);
}
.ap-euro-u8v__spread {
    position: absolute;
    width: 120px; height: 120px;
    border-radius: 50%;
    border: 1px solid rgba(255,80,60,0.3);
    animation: apU8SpreadRing 3s ease-out infinite;
}
.ap-euro-u8v__spread--2 { animation-delay: 1s; }
.ap-euro-u8v__spread--3 { animation-delay: 2s; }
@keyframes apU8SpreadRing { 0% { transform: scale(0.5); opacity: 0.6; } 100% { transform: scale(2); opacity: 0; } }

/* ===================== 8.3 — Russian Revolution ===================== */

/* v1: cracking crown */
.ap-euro-u8v--u83v1 { background: radial-gradient(circle at 50% 40%, rgba(200,160,60,0.08), transparent 60%); }
.ap-euro-u8v__crown {
    width: 60px; height: 40px;
    border: 3px solid rgba(200,170,60,0.7);
    border-bottom: none;
    border-radius: 0 0 0 0;
    position: relative;
    clip-path: polygon(0% 100%, 10% 0%, 30% 50%, 50% 0%, 70% 50%, 90% 0%, 100% 100%);
    background: rgba(200,170,60,0.15);
    animation: apU8CrownCrack 3s ease-in-out infinite;
}
.ap-euro-u8v__crack {
    position: absolute;
    width: 2px;
    height: 100%;
    background: rgba(255,60,40,0.6);
    left: 50%;
    top: 0;
    transform-origin: top center;
    animation: apU8CrackGrow 3s ease-in-out infinite;
}
@keyframes apU8CrownCrack { 0%,100% { transform: scale(1); } 50% { transform: scale(0.95); } }
@keyframes apU8CrackGrow { 0% { height: 0; opacity: 0; } 50% { height: 100%; opacity: 1; } 100% { height: 100%; opacity: 0; } }

/* v2: red flag rising */
.ap-euro-u8v--u83v2 { background: radial-gradient(circle at 50% 60%, rgba(180,30,30,0.08), transparent 60%); }
.ap-euro-u8v__pole {
    width: 3px;
    height: 80%;
    background: rgba(180,180,180,0.5);
    position: absolute;
    left: 40%;
}
.ap-euro-u8v__flag {
    position: absolute;
    left: calc(40% + 3px);
    top: 10%;
    width: 50px;
    height: 32px;
    background: linear-gradient(135deg, rgba(200,30,30,0.8), rgba(160,20,20,0.6));
    border-radius: 0 4px 4px 0;
    animation: apU8FlagWave 2s ease-in-out infinite;
    transform-origin: left center;
}
@keyframes apU8FlagWave { 0%,100% { transform: skewY(-2deg) scaleX(1); } 50% { transform: skewY(2deg) scaleX(0.95); } }

/* v3: hammer/sickle forming */
.ap-euro-u8v--u83v3 { background: radial-gradient(circle at 50% 50%, rgba(180,30,30,0.06), transparent 60%); }
.ap-euro-u8v__hammer {
    position: absolute;
    width: 6px; height: 40px;
    background: rgba(220,200,60,0.7);
    left: 45%; top: 25%;
    border-radius: 2px;
    animation: apU8HammerSwing 2.5s ease-in-out infinite;
    transform-origin: bottom center;
}
.ap-euro-u8v__hammer-head {
    position: absolute;
    width: 20px; height: 10px;
    background: rgba(220,200,60,0.7);
    left: calc(45% - 7px); top: 22%;
    border-radius: 2px;
    animation: apU8HammerSwing 2.5s ease-in-out infinite;
    transform-origin: center bottom;
}
.ap-euro-u8v__sickle {
    position: absolute;
    width: 36px; height: 36px;
    border: 3px solid rgba(220,200,60,0.7);
    border-radius: 50%;
    clip-path: polygon(50% 0%, 100% 0%, 100% 100%, 50% 100%, 30% 80%, 20% 50%, 30% 20%);
    right: 30%; top: 30%;
    animation: apU8SickleFade 2.5s ease-in-out infinite 0.3s;
}
@keyframes apU8HammerSwing { 0%,100% { transform: rotate(-5deg); } 50% { transform: rotate(5deg); } }
@keyframes apU8SickleFade { 0%,100% { opacity: 0.5; } 50% { opacity: 1; } }

/* v4: scales tipping (NEP) */
.ap-euro-u8v--u83v4 { background: radial-gradient(circle at 50% 50%, rgba(60,160,100,0.06), transparent 60%); }
.ap-euro-u8v__scale-beam {
    width: 100px; height: 3px;
    background: rgba(200,200,200,0.5);
    position: absolute;
    top: 40%;
    animation: apU8ScaleTip 3s ease-in-out infinite;
    transform-origin: center;
}
.ap-euro-u8v__scale-post {
    width: 3px; height: 50px;
    background: rgba(200,200,200,0.4);
    position: absolute;
    top: 40%;
}
.ap-euro-u8v__scale-pan {
    width: 30px; height: 20px;
    border: 2px solid rgba(200,200,200,0.4);
    border-top: none;
    border-radius: 0 0 8px 8px;
    position: absolute;
    top: 42%;
}
.ap-euro-u8v__scale-pan--l { left: 25%; }
.ap-euro-u8v__scale-pan--r { right: 25%; }
@keyframes apU8ScaleTip { 0%,100% { transform: rotate(-8deg); } 50% { transform: rotate(8deg); } }

/* ===================== 8.4 — Versailles ===================== */

/* v1: quill signing */
.ap-euro-u8v--u84v1 { background: radial-gradient(circle at 50% 60%, rgba(200,180,140,0.08), transparent 60%); }
.ap-euro-u8v__quill {
    width: 4px; height: 60px;
    background: linear-gradient(180deg, rgba(240,230,210,0.8), rgba(160,140,100,0.6));
    border-radius: 2px 2px 0 0;
    position: absolute;
    transform: rotate(-25deg);
    animation: apU8QuillWrite 2s ease-in-out infinite;
    transform-origin: bottom center;
}
.ap-euro-u8v__doc {
    width: 60px; height: 80px;
    background: rgba(240,235,220,0.1);
    border: 1px solid rgba(200,190,160,0.3);
    border-radius: 2px;
    position: absolute;
    bottom: 15%;
}
.ap-euro-u8v__doc-line {
    width: 70%; height: 1px;
    background: rgba(200,190,160,0.3);
    margin: 8px auto;
}
@keyframes apU8QuillWrite { 0%,100% { transform: rotate(-25deg) translateX(0); } 50% { transform: rotate(-25deg) translateX(8px); } }

/* v2: scissors redrawing borders */
.ap-euro-u8v--u84v2 { background: radial-gradient(circle at 50% 50%, rgba(100,140,200,0.06), transparent 60%); }
.ap-euro-u8v__map-line {
    position: absolute;
    height: 2px;
    background: rgba(255,100,80,0.5);
    animation: apU8MapCut 3s ease-in-out infinite;
}
.ap-euro-u8v__map-line--1 { width: 60%; top: 35%; left: 20%; }
.ap-euro-u8v__map-line--2 { width: 40%; top: 55%; left: 30%; animation-delay: 0.5s; }
.ap-euro-u8v__map-line--3 { width: 50%; top: 70%; left: 25%; animation-delay: 1s; }
.ap-euro-u8v__scissors {
    position: absolute;
    font-size: 1.4rem;
    top: 30%;
    left: 15%;
    animation: apU8ScissorMove 3s ease-in-out infinite;
    filter: grayscale(0.5);
}
@keyframes apU8MapCut { 0% { width: 0; opacity: 0; } 50% { opacity: 1; } 100% { opacity: 0.5; } }
@keyframes apU8ScissorMove { 0% { left: 15%; } 100% { left: 70%; } }

/* v3: broken chains */
.ap-euro-u8v--u84v3 { background: radial-gradient(circle at 50% 50%, rgba(160,100,60,0.06), transparent 60%); }
.ap-euro-u8v__chain-link {
    width: 20px; height: 12px;
    border: 2.5px solid rgba(180,160,120,0.6);
    border-radius: 6px;
    position: absolute;
    top: 50%;
}
.ap-euro-u8v__chain-link--1 { left: 20%; }
.ap-euro-u8v__chain-link--2 { left: 35%; }
.ap-euro-u8v__chain-link--3 { left: 50%; animation: apU8ChainBreak 2s ease-in-out infinite; }
.ap-euro-u8v__chain-link--4 { left: 65%; animation: apU8ChainBreak 2s ease-in-out infinite reverse; }
.ap-euro-u8v__chain-snap {
    position: absolute;
    width: 10px; height: 10px;
    background: rgba(255,200,60,0.6);
    border-radius: 50%;
    top: 48%; left: 56%;
    animation: apU8SnapFlash 2s ease-in-out infinite;
}
@keyframes apU8ChainBreak { 0%,40% { transform: translateX(0); } 100% { transform: translateX(12px); opacity: 0.4; } }
@keyframes apU8SnapFlash { 0%,30% { opacity: 0; transform: scale(0.5); } 50% { opacity: 1; transform: scale(1.5); } 100% { opacity: 0; transform: scale(0.5); } }

/* v4: mandate partition lines */
.ap-euro-u8v--u84v4 { background: radial-gradient(circle at 50% 50%, rgba(100,80,60,0.06), transparent 60%); }
.ap-euro-u8v__partition {
    position: absolute;
    width: 2px;
    background: rgba(255,100,80,0.5);
    animation: apU8PartDraw 2.5s ease-in-out infinite;
}
.ap-euro-u8v__partition--1 { height: 60%; left: 35%; top: 20%; }
.ap-euro-u8v__partition--2 { height: 50%; left: 55%; top: 25%; animation-delay: 0.4s; }
.ap-euro-u8v__partition--3 { width: 50%; height: 2px; top: 50%; left: 25%; animation-delay: 0.8s; }
.ap-euro-u8v__zone {
    position: absolute;
    border-radius: 4px;
    animation: apU8ZoneFill 3s ease-in-out infinite;
}
.ap-euro-u8v__zone--a { width: 30%; height: 40%; top: 20%; left: 5%; background: rgba(80,120,200,0.1); }
.ap-euro-u8v__zone--b { width: 35%; height: 35%; top: 25%; right: 10%; background: rgba(200,80,80,0.1); animation-delay: 0.5s; }
@keyframes apU8PartDraw { 0% { height: 0; opacity: 0; } 50% { opacity: 0.8; } 100% { opacity: 0.4; } }
@keyframes apU8ZoneFill { 0%,100% { opacity: 0.3; } 50% { opacity: 0.7; } }

/* ===================== 8.5 — Economic Crisis ===================== */

/* v1: falling graph line */
.ap-euro-u8v--u85v1 { background: linear-gradient(180deg, rgba(20,20,20,1) 0%, rgba(30,20,20,1) 100%); }
.ap-euro-u8v__axis-y { position: absolute; left: 15%; top: 15%; width: 2px; height: 70%; background: rgba(200,200,200,0.2); }
.ap-euro-u8v__axis-x { position: absolute; bottom: 15%; left: 15%; width: 70%; height: 2px; background: rgba(200,200,200,0.2); }
.ap-euro-u8v__graph-line {
    position: absolute;
    top: 20%; left: 20%;
    width: 60%; height: 50%;
    overflow: hidden;
}
.ap-euro-u8v__graph-line::before {
    content: '';
    position: absolute;
    width: 100%; height: 100%;
    background: linear-gradient(135deg, transparent 20%, rgba(255,60,40,0.6) 50%, rgba(255,60,40,0.3) 100%);
    clip-path: polygon(0% 20%, 25% 15%, 45% 30%, 65% 50%, 85% 80%, 100% 95%, 100% 100%, 0% 100%);
    animation: apU8GraphCrash 3s ease-in infinite;
}
@keyframes apU8GraphCrash { 0% { opacity: 0; transform: translateX(-20%); } 30% { opacity: 1; } 100% { opacity: 0.6; } }

/* v2: empty factory smokestacks */
.ap-euro-u8v--u85v2 { background: linear-gradient(180deg, #1a1a1a 0%, #1e1c18 100%); }
.ap-euro-u8v__stack {
    position: absolute;
    bottom: 25%;
    width: 16px;
    background: rgba(120,100,80,0.5);
    border-radius: 2px 2px 0 0;
}
.ap-euro-u8v__stack--1 { height: 60px; left: 25%; }
.ap-euro-u8v__stack--2 { height: 75px; left: 42%; }
.ap-euro-u8v__stack--3 { height: 50px; left: 60%; }
.ap-euro-u8v__no-smoke {
    position: absolute;
    width: 40px; height: 20px;
    border: 1.5px dashed rgba(160,160,160,0.2);
    border-radius: 50%;
    animation: apU8NoSmokeDrift 3s ease-in-out infinite;
}
.ap-euro-u8v__no-smoke--1 { top: 15%; left: 20%; }
.ap-euro-u8v__no-smoke--2 { top: 8%; left: 38%; animation-delay: 0.5s; }
.ap-euro-u8v__no-smoke--3 { top: 20%; left: 55%; animation-delay: 1s; }
@keyframes apU8NoSmokeDrift { 0%,100% { transform: translateY(0); opacity: 0.2; } 50% { transform: translateY(-6px); opacity: 0.4; } }

/* v3: bread line (stick figures) */
.ap-euro-u8v--u85v3 { background: linear-gradient(180deg, #181818 0%, #1a1818 100%); }
.ap-euro-u8v__figure {
    position: absolute;
    bottom: 30%;
    width: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    opacity: 0.5;
    animation: apU8FigureSway 2.5s ease-in-out infinite;
}
.ap-euro-u8v__figure-head {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: rgba(200,200,200,0.4);
}
.ap-euro-u8v__figure-body {
    width: 2px; height: 16px;
    background: rgba(200,200,200,0.4);
}
.ap-euro-u8v__figure--1 { left: 20%; }
.ap-euro-u8v__figure--2 { left: 30%; animation-delay: 0.2s; }
.ap-euro-u8v__figure--3 { left: 40%; animation-delay: 0.4s; }
.ap-euro-u8v__figure--4 { left: 50%; animation-delay: 0.6s; }
.ap-euro-u8v__figure--5 { left: 60%; animation-delay: 0.8s; }
.ap-euro-u8v__bread-line {
    position: absolute;
    bottom: 28%;
    left: 15%;
    width: 55%;
    height: 1px;
    background: rgba(200,200,200,0.15);
}
@keyframes apU8FigureSway { 0%,100% { transform: translateX(0); } 50% { transform: translateX(2px); } }

/* v4: currency crumbling */
.ap-euro-u8v--u85v4 { background: radial-gradient(circle at 50% 50%, rgba(200,180,60,0.06), transparent 60%); }
.ap-euro-u8v__coin {
    position: absolute;
    width: 32px; height: 32px;
    border-radius: 50%;
    border: 2px solid rgba(200,180,60,0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    color: rgba(200,180,60,0.6);
    font-weight: 700;
}
.ap-euro-u8v__coin--1 { top: 25%; left: 25%; animation: apU8CoinCrumble 3s ease-in-out infinite; }
.ap-euro-u8v__coin--2 { top: 35%; left: 50%; animation: apU8CoinCrumble 3s ease-in-out infinite 0.5s; }
.ap-euro-u8v__coin--3 { top: 45%; left: 38%; animation: apU8CoinCrumble 3s ease-in-out infinite 1s; }
@keyframes apU8CoinCrumble {
    0% { transform: scale(1) rotate(0); opacity: 0.7; }
    50% { transform: scale(0.7) rotate(15deg); opacity: 0.3; }
    100% { transform: scale(1) rotate(0); opacity: 0.7; }
}

/* ===================== 8.6 — Fascism & Totalitarianism ===================== */

/* v1: megaphone + radiating waves */
.ap-euro-u8v--u86v1 { background: radial-gradient(circle at 35% 50%, rgba(200,60,40,0.06), transparent 60%); }
.ap-euro-u8v__mega {
    position: absolute;
    left: 25%;
    width: 40px; height: 20px;
    background: linear-gradient(90deg, rgba(200,200,200,0.5) 0%, rgba(200,200,200,0.2) 100%);
    clip-path: polygon(0% 30%, 0% 70%, 100% 100%, 100% 0%);
    animation: apU8MegaPulse 2s ease-in-out infinite;
}
.ap-euro-u8v__wave {
    position: absolute;
    left: 55%;
    width: 30px; height: 30px;
    border: 2px solid rgba(255,80,60,0.3);
    border-radius: 50%;
    border-left-color: transparent;
    border-bottom-color: transparent;
    animation: apU8WaveSpread 2s ease-out infinite;
}
.ap-euro-u8v__wave--2 { animation-delay: 0.4s; }
.ap-euro-u8v__wave--3 { animation-delay: 0.8s; }
@keyframes apU8MegaPulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.05); } }
@keyframes apU8WaveSpread { 0% { transform: scale(0.5); opacity: 0.8; } 100% { transform: scale(2.5); opacity: 0; } }

/* v2: marching columns */
.ap-euro-u8v--u86v2 { background: linear-gradient(180deg, #181818 0%, #1a1818 100%); }
.ap-euro-u8v__col-bar {
    position: absolute;
    bottom: 25%;
    width: 6px;
    height: 30px;
    background: rgba(180,180,180,0.4);
    border-radius: 2px;
    animation: apU8March 1.2s ease-in-out infinite;
}
.ap-euro-u8v__col-bar--1 { left: 20%; }
.ap-euro-u8v__col-bar--2 { left: 30%; animation-delay: 0.15s; }
.ap-euro-u8v__col-bar--3 { left: 40%; animation-delay: 0.3s; }
.ap-euro-u8v__col-bar--4 { left: 50%; animation-delay: 0.45s; }
.ap-euro-u8v__col-bar--5 { left: 60%; animation-delay: 0.6s; }
.ap-euro-u8v__col-bar--6 { left: 70%; animation-delay: 0.75s; }
@keyframes apU8March { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }

/* v3: eye surveillance */
.ap-euro-u8v--u86v3 { background: radial-gradient(circle at 50% 45%, rgba(160,40,40,0.08), transparent 55%); }
.ap-euro-u8v__eye-outer {
    width: 80px; height: 40px;
    border: 2.5px solid rgba(200,200,200,0.4);
    border-radius: 50%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}
.ap-euro-u8v__eye-iris {
    width: 24px; height: 24px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(200,40,40,0.8) 30%, rgba(200,40,40,0.3) 70%);
    animation: apU8EyeScan 3s ease-in-out infinite;
}
.ap-euro-u8v__eye-iris::after {
    content: '';
    display: block;
    width: 8px; height: 8px;
    border-radius: 50%;
    background: rgba(20,20,20,0.9);
    margin: 8px auto 0;
}
@keyframes apU8EyeScan { 0%,100% { transform: translateX(-6px); } 50% { transform: translateX(6px); } }

/* v4: book burning flames */
.ap-euro-u8v--u86v4 { background: linear-gradient(180deg, #1a1410 0%, #181210 100%); }
.ap-euro-u8v__flame {
    position: absolute;
    bottom: 30%;
    width: 16px;
    border-radius: 50% 50% 20% 20%;
    animation: apU8FlameFlicker 0.8s ease-in-out infinite;
}
.ap-euro-u8v__flame--1 { height: 40px; left: 30%; background: rgba(255,120,20,0.6); }
.ap-euro-u8v__flame--2 { height: 55px; left: 45%; background: rgba(255,80,20,0.7); animation-delay: 0.2s; }
.ap-euro-u8v__flame--3 { height: 35px; left: 58%; background: rgba(255,140,40,0.5); animation-delay: 0.4s; }
.ap-euro-u8v__book-ash {
    position: absolute;
    bottom: 22%;
    left: 25%;
    width: 50%;
    height: 12px;
    background: rgba(80,60,40,0.4);
    border-radius: 2px;
}
@keyframes apU8FlameFlicker { 0%,100% { transform: scaleY(1) scaleX(1); } 50% { transform: scaleY(1.15) scaleX(0.9); } }

/* ===================== 8.7 — Interwar Period ===================== */

/* v1: fractured art frame */
.ap-euro-u8v--u87v1 { background: radial-gradient(circle at 50% 50%, rgba(100,80,140,0.06), transparent 60%); }
.ap-euro-u8v__frame {
    width: 70px; height: 90px;
    border: 2.5px solid rgba(200,180,140,0.5);
    position: relative;
}
.ap-euro-u8v__frac {
    position: absolute;
    background: rgba(200,180,140,0.15);
    animation: apU8FracShift 4s ease-in-out infinite;
}
.ap-euro-u8v__frac--1 { top: 0; left: 0; width: 50%; height: 45%; }
.ap-euro-u8v__frac--2 { top: 0; right: 0; width: 50%; height: 55%; animation-delay: 0.5s; }
.ap-euro-u8v__frac--3 { bottom: 0; left: 0; width: 60%; height: 55%; animation-delay: 1s; }
.ap-euro-u8v__frac--4 { bottom: 0; right: 0; width: 40%; height: 45%; animation-delay: 1.5s; }
@keyframes apU8FracShift { 0%,100% { transform: translate(0); } 50% { transform: translate(3px, 2px); } }

/* v2: jazz notes floating */
.ap-euro-u8v--u87v2 { background: radial-gradient(circle at 50% 50%, rgba(200,160,60,0.06), transparent 60%); }
.ap-euro-u8v__note {
    position: absolute;
    font-size: 1.5rem;
    color: rgba(200,180,100,0.5);
    animation: apU8NoteFloat 3s ease-in-out infinite;
}
.ap-euro-u8v__note--1 { left: 20%; top: 30%; }
.ap-euro-u8v__note--2 { left: 45%; top: 20%; animation-delay: 0.6s; font-size: 1.2rem; }
.ap-euro-u8v__note--3 { left: 65%; top: 35%; animation-delay: 1.2s; font-size: 1.8rem; }
@keyframes apU8NoteFloat { 0%,100% { transform: translateY(0) rotate(0); opacity: 0.4; } 50% { transform: translateY(-12px) rotate(8deg); opacity: 0.8; } }

/* v3: spinning clock */
.ap-euro-u8v--u87v3 { background: radial-gradient(circle at 50% 50%, rgba(160,140,120,0.06), transparent 60%); }
.ap-euro-u8v__clock {
    width: 70px; height: 70px;
    border-radius: 50%;
    border: 2.5px solid rgba(200,200,200,0.3);
    position: relative;
}
.ap-euro-u8v__hand-h {
    position: absolute;
    width: 2px; height: 18px;
    background: rgba(200,200,200,0.5);
    left: 50%; bottom: 50%;
    transform-origin: bottom center;
    animation: apU8HandH 12s linear infinite;
}
.ap-euro-u8v__hand-m {
    position: absolute;
    width: 1.5px; height: 26px;
    background: rgba(255,80,60,0.6);
    left: 50%; bottom: 50%;
    transform-origin: bottom center;
    animation: apU8HandM 3s linear infinite;
}
@keyframes apU8HandH { from { transform: rotate(0); } to { transform: rotate(360deg); } }
@keyframes apU8HandM { from { transform: rotate(0); } to { transform: rotate(360deg); } }

/* v4: rising tension bars */
.ap-euro-u8v--u87v4 { background: linear-gradient(180deg, #181818 0%, #1a1414 100%); }
.ap-euro-u8v__bar {
    position: absolute;
    bottom: 20%;
    width: 12px;
    border-radius: 2px 2px 0 0;
    animation: apU8BarRise 2.5s ease-in-out infinite;
}
.ap-euro-u8v__bar--1 { left: 20%; height: 30px; background: rgba(200,180,60,0.5); }
.ap-euro-u8v__bar--2 { left: 32%; height: 45px; background: rgba(220,140,40,0.5); animation-delay: 0.2s; }
.ap-euro-u8v__bar--3 { left: 44%; height: 60px; background: rgba(240,100,40,0.5); animation-delay: 0.4s; }
.ap-euro-u8v__bar--4 { left: 56%; height: 75px; background: rgba(255,70,40,0.6); animation-delay: 0.6s; }
.ap-euro-u8v__bar--5 { left: 68%; height: 90px; background: rgba(255,40,40,0.7); animation-delay: 0.8s; }
@keyframes apU8BarRise { 0% { height: 0; opacity: 0; } 50% { opacity: 1; } 100% { opacity: 0.6; } }

/* ===================== 8.8 — WWII ===================== */

/* v1: lightning bolt (blitz) */
.ap-euro-u8v--u88v1 { background: radial-gradient(circle at 50% 30%, rgba(255,220,60,0.06), transparent 60%); }
.ap-euro-u8v__bolt {
    width: 30px; height: 60px;
    position: relative;
    animation: apU8BoltFlash 1.5s ease-in-out infinite;
}
.ap-euro-u8v__bolt::before {
    content: '';
    position: absolute;
    width: 100%; height: 100%;
    background: rgba(255,220,60,0.7);
    clip-path: polygon(40% 0%, 70% 0%, 35% 45%, 65% 45%, 20% 100%, 45% 50%, 15% 50%);
}
.ap-euro-u8v__bolt-glow {
    position: absolute;
    inset: -20%;
    background: radial-gradient(circle, rgba(255,220,60,0.15), transparent 70%);
    animation: apU8BoltGlow 1.5s ease-in-out infinite;
}
@keyframes apU8BoltFlash { 0%,100% { opacity: 0.5; } 20% { opacity: 1; } 25% { opacity: 0.3; } 30% { opacity: 1; } }
@keyframes apU8BoltGlow { 0%,100% { transform: scale(0.8); opacity: 0.3; } 25% { transform: scale(1.2); opacity: 0.6; } }

/* v2: tank silhouette */
.ap-euro-u8v--u88v2 { background: linear-gradient(180deg, #181818 0%, #1a1818 100%); }
.ap-euro-u8v__tank-body {
    width: 60px; height: 24px;
    background: rgba(120,120,120,0.5);
    border-radius: 4px;
    position: relative;
}
.ap-euro-u8v__tank-turret {
    position: absolute;
    top: -12px; left: 20px;
    width: 24px; height: 14px;
    background: rgba(120,120,120,0.5);
    border-radius: 4px 4px 2px 2px;
}
.ap-euro-u8v__tank-barrel {
    position: absolute;
    top: -8px; right: -18px;
    width: 22px; height: 4px;
    background: rgba(120,120,120,0.5);
    border-radius: 0 2px 2px 0;
}
.ap-euro-u8v__tank-treads {
    position: absolute;
    bottom: -6px; left: -2px;
    width: 64px; height: 8px;
    background: rgba(80,80,80,0.5);
    border-radius: 4px;
}
.ap-euro-u8v__tank-body { animation: apU8TankRoll 4s ease-in-out infinite; }
@keyframes apU8TankRoll { 0%,100% { transform: translateX(-20px); } 50% { transform: translateX(20px); } }

/* v3: landing craft (D-Day) */
.ap-euro-u8v--u88v3 { background: linear-gradient(180deg, #14161a 0%, #182030 100%); }
.ap-euro-u8v__craft {
    width: 40px; height: 24px;
    border: 2px solid rgba(150,160,180,0.5);
    border-top: none;
    border-radius: 0 0 6px 6px;
    position: relative;
    animation: apU8CraftBob 2s ease-in-out infinite;
}
.ap-euro-u8v__craft-ramp {
    position: absolute;
    top: 0; left: -2px;
    width: 2px; height: 20px;
    background: rgba(150,160,180,0.5);
    transform-origin: bottom;
    animation: apU8RampDrop 3s ease-in-out infinite;
}
.ap-euro-u8v__water {
    position: absolute;
    bottom: 20%;
    width: 80%;
    height: 2px;
    background: repeating-linear-gradient(90deg, rgba(60,100,180,0.3) 0 6px, transparent 6px 12px);
    animation: apU8WaterFlow 2s linear infinite;
}
@keyframes apU8CraftBob { 0%,100% { transform: translateY(0) rotate(-1deg); } 50% { transform: translateY(-4px) rotate(1deg); } }
@keyframes apU8RampDrop { 0%,60% { transform: rotate(0); } 80%,100% { transform: rotate(-70deg); } }
@keyframes apU8WaterFlow { from { transform: translateX(0); } to { transform: translateX(-12px); } }

/* v4: falling bomb / mushroom cloud */
.ap-euro-u8v--u88v4 { background: radial-gradient(circle at 50% 70%, rgba(255,120,20,0.06), transparent 60%); }
.ap-euro-u8v__mushroom-stem {
    position: absolute;
    bottom: 25%;
    width: 12px; height: 40px;
    background: linear-gradient(180deg, rgba(255,160,60,0.4), rgba(200,100,40,0.2));
    border-radius: 4px;
    animation: apU8MushroomGrow 3s ease-out infinite;
}
.ap-euro-u8v__mushroom-cap {
    position: absolute;
    bottom: 55%;
    width: 60px; height: 30px;
    background: radial-gradient(ellipse, rgba(255,140,40,0.5), rgba(255,80,20,0.2) 70%);
    border-radius: 50%;
    animation: apU8MushroomGrow 3s ease-out infinite;
}
.ap-euro-u8v__mushroom-ring {
    position: absolute;
    bottom: 50%;
    width: 80px; height: 10px;
    border: 1.5px solid rgba(255,160,60,0.3);
    border-radius: 50%;
    animation: apU8RingExpand 3s ease-out infinite;
}
@keyframes apU8MushroomGrow { 0% { transform: scale(0); opacity: 0; } 30% { transform: scale(1); opacity: 0.8; } 100% { opacity: 0.3; } }
@keyframes apU8RingExpand { 0% { transform: scale(0.5); opacity: 0.6; } 100% { transform: scale(2); opacity: 0; } }

/* ===================== 8.9 — Holocaust ===================== */

/* v1: star dimming */
.ap-euro-u8v--u89v1 { background: radial-gradient(circle at 50% 45%, rgba(200,180,60,0.06), transparent 55%); }
.ap-euro-u8v__star {
    width: 50px; height: 50px;
    position: relative;
    animation: apU8StarDim 4s ease-in-out infinite;
}
.ap-euro-u8v__star::before, .ap-euro-u8v__star::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(200,180,60,0.6);
    clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}
.ap-euro-u8v__star::after {
    transform: rotate(35deg);
    clip-path: polygon(50% 5%, 63% 38%, 100% 38%, 70% 60%, 82% 95%, 50% 73%, 18% 95%, 30% 60%, 0% 38%, 37% 38%);
}
@keyframes apU8StarDim { 0% { opacity: 0.8; } 50% { opacity: 0.2; } 100% { opacity: 0.8; } }

/* v2: barbed wire fence */
.ap-euro-u8v--u89v2 { background: linear-gradient(180deg, #181818 0%, #1a1818 100%); }
.ap-euro-u8v__fence-post {
    position: absolute;
    bottom: 25%;
    width: 3px;
    height: 50%;
    background: rgba(160,160,160,0.4);
}
.ap-euro-u8v__fence-post--1 { left: 20%; }
.ap-euro-u8v__fence-post--2 { left: 50%; }
.ap-euro-u8v__fence-post--3 { left: 80%; }
.ap-euro-u8v__fence-wire {
    position: absolute;
    width: 65%;
    height: 2px;
    left: 18%;
    background: repeating-linear-gradient(90deg, rgba(160,160,160,0.4) 0 5px, transparent 5px 8px);
}
.ap-euro-u8v__fence-wire--1 { top: 35%; }
.ap-euro-u8v__fence-wire--2 { top: 48%; }
.ap-euro-u8v__fence-wire--3 { top: 61%; }
.ap-euro-u8v__fence-barb {
    position: absolute;
    width: 6px; height: 6px;
    border: 1px solid rgba(160,160,160,0.4);
    border-radius: 50%;
    top: 34%;
    animation: apU8BarbGlint 3s ease-in-out infinite;
}
.ap-euro-u8v__fence-barb--1 { left: 30%; }
.ap-euro-u8v__fence-barb--2 { left: 55%; top: 47%; animation-delay: 0.5s; }
.ap-euro-u8v__fence-barb--3 { left: 70%; top: 60%; animation-delay: 1s; }
@keyframes apU8BarbGlint { 0%,100% { opacity: 0.3; } 50% { opacity: 0.7; } }

/* v3: candle flame (memorial) */
.ap-euro-u8v--u89v3 { background: radial-gradient(circle at 50% 60%, rgba(255,200,80,0.06), transparent 50%); }
.ap-euro-u8v__candle {
    position: absolute;
    bottom: 20%;
    width: 10px; height: 50px;
    background: linear-gradient(180deg, rgba(240,230,210,0.4), rgba(200,190,170,0.2));
    border-radius: 2px;
}
.ap-euro-u8v__candle-flame {
    position: absolute;
    bottom: calc(20% + 50px);
    width: 14px; height: 22px;
    background: radial-gradient(ellipse at 50% 70%, rgba(255,200,80,0.9), rgba(255,120,20,0.4) 70%);
    border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
    animation: apU8CandleFlicker 1.5s ease-in-out infinite;
}
.ap-euro-u8v__candle-glow {
    position: absolute;
    bottom: calc(20% + 40px);
    width: 60px; height: 60px;
    background: radial-gradient(circle, rgba(255,200,80,0.1), transparent 70%);
    border-radius: 50%;
    animation: apU8CandleGlow 2s ease-in-out infinite;
}
@keyframes apU8CandleFlicker { 0%,100% { transform: scaleX(1) scaleY(1); } 25% { transform: scaleX(0.85) scaleY(1.1); } 75% { transform: scaleX(1.1) scaleY(0.9); } }
@keyframes apU8CandleGlow { 0%,100% { opacity: 0.5; transform: scale(1); } 50% { opacity: 0.8; transform: scale(1.1); } }

/* v4: shattered glass */
.ap-euro-u8v--u89v4 { background: radial-gradient(circle at 50% 50%, rgba(160,200,255,0.04), transparent 60%); }
.ap-euro-u8v__shard {
    position: absolute;
    background: rgba(180,200,240,0.15);
    border: 1px solid rgba(180,200,240,0.2);
    animation: apU8ShardFall 3s ease-in infinite;
}
.ap-euro-u8v__shard--1 { width: 20px; height: 30px; top: 20%; left: 25%; clip-path: polygon(10% 0%, 90% 20%, 70% 100%, 0% 80%); }
.ap-euro-u8v__shard--2 { width: 16px; height: 24px; top: 25%; left: 50%; clip-path: polygon(0% 10%, 100% 0%, 80% 100%, 20% 90%); animation-delay: 0.4s; }
.ap-euro-u8v__shard--3 { width: 22px; height: 18px; top: 30%; left: 65%; clip-path: polygon(30% 0%, 100% 20%, 70% 100%, 0% 70%); animation-delay: 0.8s; }
.ap-euro-u8v__shard--4 { width: 14px; height: 26px; top: 35%; left: 40%; clip-path: polygon(0% 0%, 90% 30%, 100% 100%, 10% 80%); animation-delay: 1.2s; }
.ap-euro-u8v__impact {
    position: absolute;
    top: 30%;
    left: 45%;
    width: 20px; height: 20px;
    border: 1.5px solid rgba(200,220,255,0.3);
    border-radius: 50%;
    animation: apU8ImpactRing 3s ease-out infinite;
}
@keyframes apU8ShardFall { 0% { transform: translateY(0) rotate(0); opacity: 0.5; } 100% { transform: translateY(30px) rotate(15deg); opacity: 0; } }
@keyframes apU8ImpactRing { 0% { transform: scale(0.5); opacity: 0.6; } 100% { transform: scale(2.5); opacity: 0; } }

/* ===================== 8.10 — Cultural Developments ===================== */

/* v1: abstract splatter */
.ap-euro-u8v--u810v1 { background: radial-gradient(circle at 50% 50%, rgba(100,60,160,0.06), transparent 60%); }
.ap-euro-u8v__splat {
    position: absolute;
    border-radius: 50%;
    animation: apU8SplatBurst 3s ease-out infinite;
}
.ap-euro-u8v__splat--1 { width: 40px; height: 40px; background: rgba(180,60,200,0.2); top: 25%; left: 30%; }
.ap-euro-u8v__splat--2 { width: 30px; height: 30px; background: rgba(60,120,200,0.2); top: 40%; left: 55%; animation-delay: 0.5s; }
.ap-euro-u8v__splat--3 { width: 50px; height: 50px; background: rgba(200,160,40,0.15); top: 30%; left: 40%; animation-delay: 1s; }
.ap-euro-u8v__drip {
    position: absolute;
    width: 3px;
    background: rgba(180,60,200,0.3);
    border-radius: 0 0 2px 2px;
    animation: apU8DripFall 2.5s ease-in infinite;
}
.ap-euro-u8v__drip--1 { height: 20px; top: 50%; left: 35%; }
.ap-euro-u8v__drip--2 { height: 30px; top: 55%; left: 55%; animation-delay: 0.8s; }
@keyframes apU8SplatBurst { 0% { transform: scale(0); opacity: 0; } 30% { transform: scale(1); opacity: 0.6; } 100% { opacity: 0.2; } }
@keyframes apU8DripFall { 0% { height: 0; opacity: 0; } 50% { opacity: 0.5; } 100% { height: 30px; opacity: 0; } }

/* v2: existential void circle */
.ap-euro-u8v--u810v2 { background: radial-gradient(circle at 50% 50%, rgba(20,20,40,0.3), transparent 60%); }
.ap-euro-u8v__void {
    width: 70px; height: 70px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(10,10,20,0.9), rgba(40,40,60,0.3) 70%);
    border: 1.5px solid rgba(120,120,180,0.2);
    position: relative;
    animation: apU8VoidPulse 4s ease-in-out infinite;
}
.ap-euro-u8v__void-ring {
    position: absolute;
    inset: -15px;
    border-radius: 50%;
    border: 1px solid rgba(120,120,180,0.15);
    animation: apU8VoidOrbit 8s linear infinite;
}
.ap-euro-u8v__void-ring::before {
    content: '';
    position: absolute;
    width: 6px; height: 6px;
    border-radius: 50%;
    background: rgba(160,140,255,0.4);
    top: 0; left: 50%;
}
@keyframes apU8VoidPulse { 0%,100% { transform: scale(1); } 50% { transform: scale(0.92); } }
@keyframes apU8VoidOrbit { from { transform: rotate(0); } to { transform: rotate(360deg); } }

/* v3: film reel spinning */
.ap-euro-u8v--u810v3 { background: radial-gradient(circle at 50% 50%, rgba(160,140,100,0.06), transparent 60%); }
.ap-euro-u8v__reel {
    width: 70px; height: 70px;
    border-radius: 50%;
    border: 3px solid rgba(180,180,180,0.3);
    position: relative;
    animation: apU8ReelSpin 6s linear infinite;
}
.ap-euro-u8v__reel-hole {
    position: absolute;
    width: 10px; height: 10px;
    border-radius: 50%;
    background: rgba(30,30,30,0.8);
    border: 1px solid rgba(180,180,180,0.2);
}
.ap-euro-u8v__reel-hole--1 { top: 8px; left: 50%; transform: translateX(-50%); }
.ap-euro-u8v__reel-hole--2 { bottom: 8px; left: 50%; transform: translateX(-50%); }
.ap-euro-u8v__reel-hole--3 { left: 8px; top: 50%; transform: translateY(-50%); }
.ap-euro-u8v__reel-hole--4 { right: 8px; top: 50%; transform: translateY(-50%); }
.ap-euro-u8v__reel-center {
    position: absolute;
    width: 14px; height: 14px;
    border-radius: 50%;
    background: rgba(180,180,180,0.3);
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
}
@keyframes apU8ReelSpin { from { transform: rotate(0); } to { transform: rotate(360deg); } }

/* v4: scattered manifesto pages */
.ap-euro-u8v--u810v4 { background: radial-gradient(circle at 50% 50%, rgba(200,200,200,0.04), transparent 60%); }
.ap-euro-u8v__page {
    position: absolute;
    width: 28px; height: 36px;
    background: rgba(240,235,220,0.08);
    border: 1px solid rgba(200,190,160,0.2);
    border-radius: 1px;
    animation: apU8PageScatter 3.5s ease-in-out infinite;
}
.ap-euro-u8v__page::before {
    content: '';
    position: absolute;
    top: 6px; left: 4px;
    width: 60%; height: 1px;
    background: rgba(200,190,160,0.3);
    box-shadow: 0 4px 0 rgba(200,190,160,0.2), 0 8px 0 rgba(200,190,160,0.15);
}
.ap-euro-u8v__page--1 { top: 20%; left: 22%; transform: rotate(-8deg); }
.ap-euro-u8v__page--2 { top: 30%; left: 48%; transform: rotate(5deg); animation-delay: 0.4s; }
.ap-euro-u8v__page--3 { top: 40%; left: 35%; transform: rotate(-3deg); animation-delay: 0.8s; }
.ap-euro-u8v__page--4 { top: 25%; left: 60%; transform: rotate(10deg); animation-delay: 1.2s; }
@keyframes apU8PageScatter { 0%,100% { transform: translateY(0) rotate(var(--r, 0deg)); opacity: 0.5; } 50% { transform: translateY(-8px) rotate(calc(var(--r, 0deg) + 4deg)); opacity: 0.8; } }

/* ===================== reduced motion ===================== */
@media (prefers-reduced-motion: reduce) {
    .ap-euro-u8v,
    .ap-euro-u8v * {
        animation: none !important;
    }
}