.deck-section { position:relative; isolation:isolate; }
.arcana-panorama { --tile-height:740px; position:absolute; inset:0; overflow:hidden; z-index:0; pointer-events:none; background:transparent; mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent); }
.arcana-panorama__track { position:absolute; inset:0 auto 0 0; height:100%; width:calc(100% + var(--tile-height)*4); background-size:calc(var(--tile-height)*4) 100%; background-repeat:repeat-x; opacity:.82; filter:none; animation:arcana-scroll 180s linear infinite; animation-play-state:paused; }
.arcana-panorama[data-loaded="true"] .arcana-panorama__track { background-image:url('./codex-arcana-78-transparent.webp'); }
.arcana-panorama[data-running="true"] .arcana-panorama__track { animation-play-state:running; will-change:transform; }
.deck-section .deck-layout { position:relative; z-index:1; }
@keyframes arcana-scroll { to { transform:translate3d(calc(var(--tile-height)*-4),0,0); } }
@media(max-width:1000px) { .arcana-panorama[data-loaded="true"] .arcana-panorama__track { background-image:url('./codex-arcana-78-transparent-mobile.webp'); } }
@media(prefers-reduced-motion:reduce) { .arcana-panorama .arcana-panorama__track,.arcana-panorama[data-running="true"] .arcana-panorama__track { animation:none; will-change:auto; } }
/* Keep the masked moving track above the section base. Avoid backdrop sampling
   across this large animated layer: some desktop GPU paths drop a horizontal tile. */
.deck-section { background:none; border:0; }
.deck-copy { padding:30px 32px; border-radius:20px; background:linear-gradient(145deg,#100e20f2,#11131de8); box-shadow:0 12px 44px #0003,inset 0 1px #f4ecff12; }
.deck-caption,.deck-static-note { position:relative; width:fit-content; padding:8px 12px; border-radius:8px; background:#11101ee8; }
@media(max-width:700px) { .deck-copy { padding:24px 22px; border-radius:16px; } }