/* Gentle camera movement on the original illustration, plus a masked smoke layer. */
:root{--accent:var(--duel-accent,#dfE2dc);--store-accent:var(--duel-accent,#dfe2dc)}
body,header{background:#141414}.product,.theme,#name,dialog,.physical{background:#222222}
.viewer,.physical-visual{background:radial-gradient(ellipse at center,var(--duel-glow,#ffffff08),transparent 75%),#202020}
.primary,#flip{color:#171717;box-shadow:0 3px 0 #0005,0 7px 20px #0003;transition:background .8s,box-shadow .2s,transform .2s}
.primary:hover,#flip:hover{background:var(--store-accent);filter:brightness(1.08);transform:translateY(-2px);box-shadow:0 5px 0 #0005,0 10px 25px #0004}
.primary:active,#flip:active{transform:translateY(1px);box-shadow:0 1px 0 #0005}
.theme.active{background:color-mix(in srgb,var(--accent) 9%,#222)}
.hero-cinematic .duel:after{background:linear-gradient(180deg,#14141420,transparent 35%,#14141470 70%,#141414 100%)}
.duel-art{animation:portrait-breathe 18s ease-in-out infinite alternate;transform-origin:50% 45%;will-change:transform}
.duel-smoke{position:absolute;inset:-3%;z-index:1;pointer-events:none;background:url('assets/duel-cinematic-v2.png') center 40% / cover no-repeat;mask-image:linear-gradient(90deg,transparent 25%,#000 40%,#000 60%,transparent 75%);opacity:.28;mix-blend-mode:screen;animation:smoke-drift 13s ease-in-out infinite alternate;will-change:transform,opacity}
@keyframes portrait-breathe{from{transform:scale(1.015) translateY(0)}to{transform:scale(1.04) translateY(-4px)}}
@keyframes smoke-drift{from{transform:translate(-9px,8px) scale(1.025);opacity:.2}to{transform:translate(12px,-10px) scale(1.09);opacity:.38}}
.motion-paused .duel-art,.motion-paused .duel-smoke,.tab-paused .duel-art,.tab-paused .duel-smoke{animation-play-state:paused}
@media(max-width:760px){.duel-smoke{inset:45px -10% auto;height:46vw;background-size:100% auto;background-position:center top;mask-image:linear-gradient(90deg,transparent 25%,#000 42%,#000 58%,transparent 75%)}}
@media(prefers-reduced-motion:reduce){.duel-art,.duel-smoke{animation:none;will-change:auto}.primary,#flip{transition:none}}

/* The boundary follows the same confirmed score as the banner. */
@property --site-lula-share{syntax:'<percentage>';inherits:true;initial-value:47%}
:root{transition:--site-lula-share 1.5s ease}
body{background:linear-gradient(90deg,#341b22 0%,#281c20 calc(var(--site-lula-share,47%) - 8%),#1a2923 calc(var(--site-lula-share,47%) + 8%),#183329 100%);background-attachment:fixed}
header{background:#141414e8}.product,.theme,#name,dialog{background:#191919eb}
.physical{background:#16161670}.viewer,.physical-visual{background:radial-gradient(ellipse at center,var(--duel-glow,#ffffff08),transparent 75%),#18181880}
.hero-cinematic .duel:after{background:linear-gradient(180deg,#14141420,transparent 35%,#14141470 70%,#141414 100%)}
@media(prefers-reduced-motion:reduce){:root{transition:none}}

/* Independent cloud texture: visible drift, without moving a duplicate portrait. */
.duel-smoke{inset:0 12%;height:100%;background:none;opacity:.65;mask-image:radial-gradient(ellipse at center,#000 15%,#000b 45%,transparent 74%);mix-blend-mode:screen;animation:smoke-flow 7s ease-in-out infinite alternate}
.duel-smoke svg{width:140%;height:130%;position:absolute;left:-20%;top:-15%;animation:smoke-curl 11s ease-in-out infinite alternate}
@keyframes smoke-flow{from{transform:translate(-22px,20px) scale(1);opacity:.5}to{transform:translate(25px,-24px) scale(1.13);opacity:.8}}
@keyframes smoke-curl{from{transform:rotate(-5deg) scale(1)}to{transform:rotate(6deg) scale(1.15)}}
.motion-paused .duel-smoke svg,.tab-paused .duel-smoke svg{animation-play-state:paused}
@media(max-width:760px){.duel-smoke{inset:40px 8% auto;height:60%;opacity:.6}}
@media(prefers-reduced-motion:reduce){.duel-smoke,.duel-smoke svg{animation:none}}

.aura-layer{z-index:1;pointer-events:none;opacity:1}.aura-layer image{animation:aura-rise 7s ease-in-out infinite alternate;transform-origin:center}
@keyframes aura-rise{from{transform:translateY(5px)}to{transform:translateY(-12px)}}
.motion-paused .aura-layer image,.tab-paused .aura-layer image{animation-play-state:paused}
@media(max-width:760px){.aura-layer{aspect-ratio:2172 / 724}}
@media(prefers-reduced-motion:reduce){.aura-layer{display:none}}

/* Keep portrait pixels fixed; only the masked texture may deform. */
.duel-art{animation:none;transform:none;will-change:auto}