/* ===== APPARITIONS DES GRANDS LÉGENDAIRES (js/views/capsules-legend.js) ===== */
/* .lg-back = décor derrière la capsule, .lg-front = devant (pluie, mer, verre…) ; étapes = classes posées sur .cap-ov */
.lg-layer { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.lg-back { z-index: 0; }
.lg-front { z-index: 4; }
.cap-ov.co-reveal .lg-front { opacity: 0; transition: opacity .6s; }
.cap-ov.co-reveal .lg-back { opacity: .6; transition: opacity 1s; }
.cap-ov.lg-q .cap-scene, .cap-ov.lg-q .lg-back { animation: godShake .55s ease-out; }
.lg-text { position: absolute; left: 20px; right: 20px; top: calc(6% + env(safe-area-inset-top)); margin: 0; text-align: center; font-family: Fredoka, Inter, sans-serif; font-size: 1.15rem; letter-spacing: .04em; color: #fff; text-shadow: 0 2px 10px rgba(0,0,0,.7); opacity: 0; transform: translateY(8px); transition: opacity .7s, transform .7s; }
.cap-ov.lg-l1 .lg-text.t1, .cap-ov.lg-l2 .lg-text.t2, .cap-ov.lg-l3 .lg-text.t3 { opacity: 1; transform: none; }
.cap-ov.lg-l2 .lg-text.t1, .cap-ov.lg-l3 .lg-text.t2, .cap-ov.lg-burst .lg-text.t1, .cap-ov.lg-burst .lg-text.t2, .cap-ov.lg-burst .lg-text.t3 { opacity: 0; transform: translateY(-6px); transition-duration: .25s; }
.cap-banner.lg-title { letter-spacing: .14em; }
.lg-rayquaza .cap-banner.lg-title { color: #7dffb0; text-shadow: 0 0 14px #3fd17a; }
.lg-mewtwo .cap-banner.lg-title { color: #d9b8ff; text-shadow: 0 0 14px #b07cff; }
.lg-lugia .cap-banner.lg-title { color: #dcecff; text-shadow: 0 0 14px #8fc3ff; }
.lg-leviator .cap-banner.lg-title { color: #ff8a8a; text-shadow: 0 0 14px #ff3d3d; }

/* ---------- Briques communes ---------- */
.lg-sky { position: absolute; inset: 0; opacity: 0; transition: opacity 1s; background: var(--sky); }
.cap-ov.lg-on .lg-sky { opacity: 1; }
.cap-ov.lg.co-reveal .cap-rays { background: repeating-conic-gradient(from 0deg, color-mix(in srgb, var(--lgr, var(--tc)) 55%, transparent) 0deg 7deg, transparent 7deg 20deg); }
/* éclair « f » de la couleur --lgf (relancé à chaque fois) */
.cap-ov.lg-f .cap-flash { animation: lgFlash .7s ease-out; }
@keyframes lgFlash { 0% { opacity: 0; } 12% { opacity: .95; background: #fff; } 100% { opacity: 0; background: var(--lgf, #fff); } }
/* ondes de choc « r » de la couleur --lgr */
.lg-shock { position: absolute; left: 50%; top: 45%; width: 120px; height: 120px; margin: -60px; border-radius: 50%; border: 3px solid var(--lgr, #fff); box-shadow: 0 0 24px var(--lgr, #fff), inset 0 0 24px var(--lgr, #fff); opacity: 0; }
.cap-ov.lg-r .lg-shock { animation: godShock 1.1s cubic-bezier(.1,.7,.3,1) forwards; }
.cap-ov.lg-r .lg-shock.r2 { animation-delay: .18s; border-color: #fff; }
.cap-ov.lg-r .lg-shock.r3 { animation-delay: .36s; }
/* particules (lg-p) : montent, tombent ou traversent ; plumes, pétales, feuilles, bulles */
.lg-parts i { position: absolute; width: var(--s); height: var(--s); border-radius: 50%; background: var(--pc); box-shadow: 0 0 8px var(--pc); opacity: 0; }
.lg-parts.up i { bottom: -14px; } .lg-parts.down i { top: -24px; } .lg-parts.side i { left: -24px; }
.cap-ov.lg-p .lg-parts.up i, .lg-tube .lg-parts.up i { animation: lgRise var(--du) var(--dl) linear infinite; }
.cap-ov.lg-p .lg-parts.down i { animation: lgFall var(--du) var(--dl) linear infinite; }
.cap-ov.lg-p .lg-parts.side i { animation: lgSide var(--du) var(--dl) ease-in infinite; }
.lg-parts.feather i { width: calc(var(--s) * .55); height: calc(var(--s) * 2); border-radius: 50% 50% 50% 50% / 80% 80% 20% 20%; box-shadow: 0 0 6px rgba(255,255,255,.6); }
.lg-parts.petal i { border-radius: 0 70% 0 70%; box-shadow: none; }
.lg-parts.leaf i { border-radius: 0 80% 0 80%; box-shadow: none; }
.lg-parts.bubble i { background: transparent; border: 1.5px solid var(--pc); box-shadow: none; }
@keyframes lgRise { 0% { opacity: 0; transform: translateY(0); } 15% { opacity: 1; } 100% { opacity: 0; transform: translateY(-85vh) translateX(20px); } }
@keyframes lgFall { 0% { opacity: 0; transform: translateY(0) rotate(0); } 15% { opacity: 1; } 50% { transform: translateY(45vh) translateX(26px) rotate(140deg); } 100% { opacity: 0; transform: translateY(95vh) translateX(-20px) rotate(300deg); } }
@keyframes lgSide { 0% { opacity: 0; transform: translateX(0) rotate(0); } 10% { opacity: 1; } 100% { opacity: 0; transform: translateX(110vw) translateY(-14vh) rotate(420deg); } }
.lg-stars { position: absolute; inset: 0; }
.lg-stars i { position: absolute; left: 0; top: 0; width: 1px; height: 1px; border-radius: 50%; }

/* ---------- Groudon : sécheresse ---------- */
.lg-groudon .lg-sky { background: linear-gradient(#3a0d02 0%, #a3260a 45%, #ff7a1a 100%); }
.lg-groudon .lg-sun { position: absolute; left: 50%; top: 14%; width: 220px; height: 220px; margin-left: -110px; border-radius: 50%; opacity: 0; transform: scale(.2);
  background: radial-gradient(circle, #fffbe0 0 30%, #ffd23f 45%, rgba(255,140,30,.6) 60%, transparent 72%); box-shadow: 0 0 120px 40px rgba(255,170,40,.55); transition: opacity 1.2s, transform 1.8s cubic-bezier(.2,.8,.3,1); }
.cap-ov.lg-groudon.lg-on .lg-sun { opacity: 1; transform: scale(1); }
.cap-ov.lg-groudon.lg-heat .lg-sun { transform: scale(1.25); filter: brightness(1.2); transition: transform 1.2s, filter 1.2s; }
.lg-cracks { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 55%; }
.lg-cracks path { fill: none; stroke: #ffb347; stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 6px #ff5a00) drop-shadow(0 0 14px #ff3d00); stroke-dasharray: 400; stroke-dashoffset: 400; }
.cap-ov.lg-crack .lg-cracks path { animation: lgDraw .8s ease-out forwards; }
@keyframes lgDraw { to { stroke-dashoffset: 0; } }
.lg-lava { position: absolute; left: 0; right: 0; bottom: 0; height: 0; background: linear-gradient(transparent, rgba(255,80,0,.55) 50%, #ff3d00); filter: blur(4px); transition: height 1.6s ease-out; }
.cap-ov.lg-crack .lg-lava { height: 32%; }
.lg-embers i { position: absolute; bottom: -10px; width: var(--s); height: var(--s); border-radius: 50%; background: #ffb347; box-shadow: 0 0 8px #ff5a00; opacity: 0; }
.cap-ov.lg-heat .lg-embers i { animation: lgRise var(--du) var(--dl) linear infinite; }
.cap-ov.lg-groudon.lg-heat .cap-ball { filter: drop-shadow(0 0 22px #ff5a00) sepia(.6) saturate(2) hue-rotate(-20deg); }
.cap-ov.lg-groudon.lg-heat .cap-ball .capsule { animation: lgShimmer .18s linear infinite; }
@keyframes lgShimmer { 50% { transform: translate(1px, -1px) skewX(1deg); } }
.cap-ov.lg-erupt .cap-flash { animation: lgFlashOrange .9s ease-out; }
@keyframes lgFlashOrange { 0% { opacity: 0; } 15% { opacity: .95; background: #fff1c2; } 100% { opacity: 0; background: #ff5a00; } }

/* ---------- Kyogre : déluge (la mer sert aussi à Lugia et Léviator rouge : --sea, --wave) ---------- */
.lg-kyogre .lg-sky { background: linear-gradient(#02040c 0%, #0b1a3a 55%, #12305e 100%); }
.lg-rain { position: absolute; inset: -20% -10%; opacity: 0; transition: opacity .8s;
  background: repeating-linear-gradient(100deg, transparent 0 13px, rgba(170,210,255,.3) 13px 16px, transparent 16px 31px); filter: blur(1.2px); animation: lgRain .35s linear infinite; }
@keyframes lgRain { to { background-position: -60px 340px; } }
.cap-ov.lg-kyogre.lg-on .lg-rain { opacity: 1; }
.lg-bolt { position: absolute; width: 70px; height: 230px; opacity: 0; fill: #f4f8ff; filter: drop-shadow(0 0 10px #9ecbff) drop-shadow(0 0 24px #5aa0ff); }
.lg-bolt.b1 { left: 12%; top: 4%; } .lg-bolt.b2 { right: 10%; top: 8%; transform: scaleX(-1); }
.cap-ov.lg-bolt1 .lg-bolt.b1, .cap-ov.lg-bolt2 .lg-bolt.b2 { animation: lgBolt .55s steps(1) forwards; }
@keyframes lgBolt { 0% { opacity: 1; } 20% { opacity: 0; } 35% { opacity: 1; } 100% { opacity: 0; } }
.cap-ov.lg-bolt1 .cap-flash { animation: lgFlashWhite .45s steps(2); }
.cap-ov.lg-bolt2 .cap-flash { animation: lgFlashWhite2 .45s steps(2); }
@keyframes lgFlashWhite { 0% { opacity: .8; background: #dbe9ff; } 100% { opacity: 0; } }
@keyframes lgFlashWhite2 { 0% { opacity: .8; background: #dbe9ff; } 100% { opacity: 0; } }
.lg-sea { position: absolute; left: 0; right: 0; bottom: 0; height: 0; background: var(--sea, linear-gradient(rgba(40,120,220,.72), rgba(8,40,110,.92))); transition: height 1.3s cubic-bezier(.3,.7,.4,1); }
.cap-ov.lg-rise .lg-sea { height: 52%; }
.cap-ov.lg-surge .lg-sea { height: 108%; transition: height .6s cubic-bezier(.5,0,.6,1); }
.lg-wave { position: absolute; left: 0; width: 200%; height: 40px; top: -26px; background: radial-gradient(ellipse 30px 22px at 30px 26px, var(--wave, rgba(40,120,220,.72)) 98%, transparent 100%) 0 0 / 60px 40px repeat-x; animation: lgWave 1.4s linear infinite; }
.lg-wave.w2 { top: -20px; opacity: .6; animation-duration: 2.1s; animation-direction: reverse; }
@keyframes lgWave { to { transform: translateX(-60px); } }
.lg-bubbles i { position: absolute; bottom: 0; width: var(--s); height: var(--s); border-radius: 50%; border: 1.5px solid rgba(220,240,255,.7); opacity: 0; }
.cap-ov.lg-rise .lg-bubbles i { animation: lgBubble var(--du) var(--dl) ease-in infinite; }
@keyframes lgBubble { 0% { opacity: 0; transform: translateY(0); } 20% { opacity: 1; } 100% { opacity: 0; transform: translateY(-40vh); } }
.cap-ov.lg-kyogre.lg-rise .cap-ball { filter: brightness(.75) saturate(.6) drop-shadow(0 0 16px #5aa0ff); transition: filter 1s; }

/* ---------- Mewtwo : la cuve du laboratoire ---------- */
.lg-lab { position: absolute; inset: 0; opacity: 0; transition: opacity 1s; background: repeating-linear-gradient(0deg, transparent 0 38px, rgba(80,255,170,.06) 38px 39px), repeating-linear-gradient(90deg, transparent 0 38px, rgba(80,255,170,.06) 38px 39px); }
.cap-ov.lg-on .lg-lab { opacity: 1; }
.lg-tube { position: absolute; left: 50%; top: 45%; width: 220px; height: 360px; margin: -200px 0 0 -110px; border-radius: 110px; overflow: hidden; opacity: 0; transition: opacity .8s;
  border: 4px solid rgba(190,255,225,.5); box-shadow: 0 0 40px rgba(80,255,170,.35), inset 0 0 30px rgba(255,255,255,.15); }
.cap-ov.lg-on .lg-tube { opacity: 1; }
.lg-liquid { position: absolute; inset: 0; background: linear-gradient(rgba(80,255,170,.15), rgba(40,200,130,.55)); }
.cap-ov.lg-mewtwo .cap-ball { filter: drop-shadow(0 0 16px rgba(80,255,170,.6)); }
.lg-alarm { position: absolute; inset: 0; opacity: 0; box-shadow: inset 0 0 120px 40px rgba(255,20,40,.75); }
.cap-ov.s-alarm .lg-alarm { animation: lgAlarm .6s ease-in-out infinite; }
.cap-ov.s-freeze .lg-alarm { animation: none; opacity: 0; }
@keyframes lgAlarm { 50% { opacity: 1; } }
.lg-glass { position: absolute; left: 50%; top: 45%; width: 220px; height: 360px; margin: -200px 0 0 -110px; }
.lg-glass path { fill: none; stroke: #e8fff4; stroke-width: 2.5; stroke-linecap: round; filter: drop-shadow(0 0 4px #fff); stroke-dasharray: 400; stroke-dashoffset: 400; }
.cap-ov.s-crack1 .lg-glass .c1, .cap-ov.s-crack2 .lg-glass .c2 { animation: lgDraw .35s ease-out forwards; }
.cap-ov.s-shatter .lg-glass, .cap-ov.s-shatter .lg-tube { opacity: 0; transition: opacity .1s; }
.lg-shards { position: absolute; left: 50%; top: 40%; }
.lg-shards i { position: absolute; width: var(--s); height: calc(var(--s) * 1.4); clip-path: polygon(50% 0, 100% 60%, 30% 100%, 0 40%); background: linear-gradient(135deg, rgba(220,255,240,.9), rgba(120,220,180,.5)); opacity: 0; }
.cap-ov.s-shatter .lg-shards i { animation: lgShard .9s cubic-bezier(.1,.8,.3,1) forwards; }
@keyframes lgShard { 0% { opacity: 1; transform: rotate(var(--a)) translateX(0) rotate(0); } 100% { opacity: 1; transform: rotate(var(--a)) translateX(var(--d)) rotate(var(--rt)); } }
/* la télékinésie fige tout : les éclats s'arrêtent net, l'image se teinte de violet */
.cap-ov.s-freeze .lg-shards i { animation-play-state: paused; filter: drop-shadow(0 0 6px #b07cff); }
.cap-ov.s-freeze .lg-back { filter: saturate(.3) hue-rotate(60deg); transition: filter .3s; }
.lg-psy { position: absolute; left: 50%; top: 45%; width: 520px; height: 520px; margin: -260px; border-radius: 50%; opacity: 0;
  background: repeating-radial-gradient(circle, rgba(176,124,255,.0) 0 22px, rgba(176,124,255,.45) 24px 27px, rgba(176,124,255,0) 30px 48px); }
.cap-ov.s-psy .lg-psy { opacity: 1; animation: lgPsy 1.2s linear infinite; transition: opacity .4s; }
@keyframes lgPsy { from { transform: scale(.8); } to { transform: scale(1.15); } }
.cap-ov.s-psy .cap-ball { filter: drop-shadow(0 0 22px #b07cff) drop-shadow(0 0 50px rgba(176,124,255,.6)); }
.cap-ov.s-psy .lg-shards i { opacity: 0; transition: opacity .8s .6s; }

/* ---------- Mew : la cascade dans la forêt et la bulle rose ---------- */
/* la cascade : une coulée d'eau floue qui descend (pas de traits), entre deux rochers */
.lg-rocks i { position: absolute; top: 10%; width: 30%; height: 58%; border-radius: 45% 45% 25% 25%; background: linear-gradient(#7fae86, #4f7d5c 60%, #3d6649); filter: blur(2px); opacity: .9; }
.lg-rocks .l { left: 8%; } .lg-rocks .r { right: 8%; }
.lg-falls { position: absolute; left: 50%; top: 6%; width: 32%; height: 64%; transform: translateX(-50%); overflow: hidden; border-radius: 30% 30% 0 0 / 12% 12% 0 0; filter: blur(2.5px);
  background: linear-gradient(90deg, rgba(200,235,255,.55), rgba(235,250,255,.95) 30%, #fff 50%, rgba(235,250,255,.95) 70%, rgba(200,235,255,.55)); }
.lg-flow { position: absolute; inset: -40% 0 0; background: repeating-linear-gradient(180deg, rgba(150,205,240,.0) 0 22px, rgba(150,205,240,.3) 22px 48px, rgba(150,205,240,0) 48px 80px); filter: blur(7px); animation: lgFlow .7s linear infinite; }
@keyframes lgFlow { to { transform: translateY(80px); } }
.lg-pool { position: absolute; left: 10%; right: 10%; top: 66%; height: 14%; border-radius: 50%; background: radial-gradient(ellipse, #e9f8ff 0%, #9fd6f2 45%, #5fb3d8 75%, transparent 77%); animation: lgPool 1.6s ease-in-out infinite alternate; }
@keyframes lgPool { to { transform: scaleX(1.04); filter: brightness(1.08); } }
.lg-mist i { position: absolute; top: 64%; width: var(--w); height: calc(var(--w) * .6); margin-left: calc(var(--w) / -2); border-radius: 50%; background: rgba(255,255,255,.85); filter: blur(10px); animation: lgMist 2s var(--dl) ease-in-out infinite alternate; }
.lg-mist { position: absolute; left: 30%; right: 30%; top: 0; bottom: 0; }
@keyframes lgMist { to { transform: translateY(-14px) scale(1.25); opacity: .6; } }
/* des arbres ronds de chaque côté, au premier plan */
.lg-tree { position: absolute; bottom: 16%; width: min(46%, 230px); height: auto; filter: drop-shadow(0 6px 10px rgba(0,60,20,.25)); }
.lg-tree.l { left: -10%; } .lg-tree.r { right: -10%; transform: scaleX(-1); }
.lg-bush { position: absolute; bottom: -5%; width: 50%; height: 15%; border-radius: 50%; background: radial-gradient(ellipse at 50% 30%, #6cc27c, #3f9a52 60%, #2f8447); }
.lg-bush.l { left: -18%; } .lg-bush.r { right: -18%; }
.lg-mew .lg-parts.up i { box-shadow: 0 0 8px #fff, 0 0 14px rgba(255,170,220,.8); }
/* la bulle rose : elle sort du bassin, tourne autour de la capsule, fait un looping puis éclate */
.lg-orbit { position: absolute; left: 50%; top: 45%; width: 0; height: 0; opacity: 0; transform: translateY(28vh); }
.lg-bubble { position: absolute; left: -32px; top: -32px; width: 64px; height: 64px; border-radius: 50%; transform: translateX(130px);
  background: radial-gradient(circle at 35% 30%, #fff 0 12%, rgba(255,190,225,.8) 30%, rgba(255,120,190,.4) 70%, rgba(255,120,190,.12)); box-shadow: 0 0 22px rgba(255,140,200,.9), inset 0 0 12px rgba(255,255,255,.6);
  animation: lgWobble .5s ease-in-out infinite alternate; }
@keyframes lgWobble { to { border-radius: 46% 54% 52% 48%; } }
.cap-ov.s-rise .lg-orbit { opacity: 1; transform: none; transition: opacity .4s, transform .8s cubic-bezier(.3,1.3,.5,1); }
.cap-ov.s-orbit .lg-orbit { animation: lgOrbit 1s linear infinite; }
@keyframes lgOrbit { to { transform: rotate(360deg); } }
.cap-ov.s-loop .lg-orbit { animation: lgLoop 1.1s cubic-bezier(.45,0,.55,1) forwards; }
@keyframes lgLoop { 0% { transform: rotate(0) scale(1); } 50% { transform: rotate(270deg) scale(1.4); } 100% { transform: rotate(720deg) scale(.35); } }
.cap-ov.s-pop .lg-orbit { opacity: 0; transition: opacity .12s; }
/* l'éclatement : une pluie de petits cœurs */
.lg-hearts { position: absolute; left: 50%; top: 45%; }
.lg-hearts i { position: absolute; width: 18px; height: 18px; margin: -9px; opacity: 0; }
.lg-hearts i::before { content: "♥"; position: absolute; inset: 0; font-size: 18px; line-height: 18px; text-align: center; color: #ff6fb5; text-shadow: 0 0 8px #fff; }
.cap-ov.s-pop .lg-hearts i { animation: lgHeart 1.1s var(--dl) cubic-bezier(.2,.8,.4,1) forwards; }
@keyframes lgHeart { 0% { opacity: 1; transform: rotate(var(--a)) translateX(10px) scale(.4); } 70% { opacity: 1; } 100% { opacity: 0; transform: rotate(var(--a)) translateX(var(--d)) scale(1.1); } }
.cap-ov.lg-mew .cap-ball { filter: drop-shadow(0 0 16px rgba(255,140,200,.7)); }
.lg-mew .lg-text { color: #5a2350; text-shadow: 0 1px 6px rgba(255,255,255,.9); }
.lg-mew .lg-text.t3 { font-size: 1.5rem; font-weight: 700; color: #e0559e; }

@keyframes lgFloat { to { transform: translateX(30px); } }
/* ---------- Giratina : le Monde Distorsion ---------- */
.lg-world { position: absolute; inset: 0; transition: transform 1s cubic-bezier(.6,0,.3,1); }
.lg-world i { position: absolute; width: var(--w); height: calc(var(--w) * .35); background: linear-gradient(#4a2a5e, #1d0b28); border-top: 3px solid #8b5aa8; rotate: var(--rt); opacity: 0; transition: opacity 1s var(--dl); animation: lgFloat 4s ease-in-out infinite alternate; }
.cap-ov.lg-on .lg-world i { opacity: .8; }
.cap-ov.s-flip .lg-world { transform: rotate(180deg) scale(1.1); }
.cap-ov.s-unflip .lg-world { transform: none; }
.cap-ov.lg-giratina .cap-ball .capsule { transition: transform 1s cubic-bezier(.6,0,.3,1); }
.cap-ov.s-flip .cap-ball .capsule { transform: rotate(180deg); }
.cap-ov.s-unflip .cap-ball .capsule { transform: none; }
.lg-portal { position: absolute; left: 50%; top: 45%; width: 340px; height: 340px; margin: -170px; border-radius: 50%; opacity: 0; transform: scale(.1);
  background: radial-gradient(circle, #000 0 45%, #2a0638 58%, transparent 70%); box-shadow: 0 0 0 4px rgba(255,77,77,.6), 0 0 60px 10px rgba(255,207,90,.35), inset 0 0 50px #ff4d4d; }
.cap-ov.s-portal .lg-portal { opacity: 1; transform: scale(1); transition: transform 1s cubic-bezier(.2,.9,.3,1), opacity .4s; animation: lgPortal 1.6s ease-in-out infinite alternate; }
@keyframes lgPortal { to { box-shadow: 0 0 0 8px rgba(255,77,77,.4), 0 0 90px 20px rgba(255,207,90,.45), inset 0 0 70px #ff4d4d; } }
.lg-shadows { position: absolute; inset: 0; width: 100%; height: 100%; }
.lg-shadows path { fill: none; stroke: #000; stroke-width: 44; opacity: .85; stroke-linecap: round; filter: blur(5px) drop-shadow(0 0 12px rgba(255,77,77,.6)); stroke-dasharray: 500; stroke-dashoffset: 500; }
.cap-ov.s-shadow .lg-shadows path { animation: lgDraw 1.2s ease-out forwards; }
.cap-ov.s-unflip .lg-shadows { opacity: 0; transition: opacity .4s; }

/* ---------- Ho-Oh : l'arc-en-ciel du premier épisode ---------- */
/* l'aube : une grande lueur chaude qui monte du bas */
.lg-dawn { position: absolute; left: -25%; right: -25%; bottom: -40%; height: 90%; border-radius: 50%; opacity: 0; transform: translateY(30%); filter: blur(10px);
  background: radial-gradient(ellipse at 50% 70%, #fff6c8 0%, #ffd27a 20%, #ff9a6b 40%, rgba(255,120,120,.35) 60%, transparent 72%); }
.cap-ov.s-dawn .lg-dawn { opacity: 1; transform: none; transition: opacity 1.5s, transform 2.5s cubic-bezier(.2,.8,.3,1); }
/* l'arc-en-ciel : une bande douce et floue (pas des traits), qui s'étend de gauche à droite */
.lg-arc { position: absolute; left: 50%; top: 50%; width: 150vw; max-width: 1100px; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; filter: blur(7px);
  background: radial-gradient(circle, transparent 54%, rgba(255,77,77,.75) 56%, rgba(255,154,60,.75) 58.5%, rgba(255,224,102,.75) 61%, rgba(107,224,122,.7) 63.5%, rgba(77,184,255,.7) 66%, rgba(111,107,255,.65) 68.5%, rgba(200,107,255,.6) 71%, transparent 73.5%);
  -webkit-mask: linear-gradient(#000 50%, transparent 50%); mask: linear-gradient(#000 50%, transparent 50%); clip-path: inset(0 100% 0 0); }
.cap-ov.s-arc .lg-arc { clip-path: inset(0 0 0 0); transition: clip-path 1.6s cubic-bezier(.4,0,.2,1); }
/* le Feu Sacré : des flammes qui montent en changeant de couleur */
.lg-parts.flame i { height: calc(var(--s) * 1.6); border-radius: 50% 50% 50% 50% / 70% 70% 30% 30%; box-shadow: 0 0 18px var(--pc), 0 0 6px #fff inset; }
.lg-hooh .lg-parts.flame { position: absolute; left: 34%; right: 34%; top: 60%; height: 0; }
.cap-ov.lg-p .lg-parts.flame i { animation: lgFlameUp var(--du) var(--dl) ease-out infinite; }
@keyframes lgFlameUp { 0% { opacity: 0; transform: translateY(0) scale(1); filter: blur(2px) hue-rotate(0deg); } 15% { opacity: .95; } 100% { opacity: 0; transform: translateY(-34vh) scale(.25); filter: blur(4px) hue-rotate(300deg); } }
/* les ailes de feu (même dessin que Lugia, en flammes) */
.lg-wings.fire { margin-top: calc(var(--ww) * -.17); filter: blur(4px) saturate(1.3) drop-shadow(0 0 18px rgba(255,190,70,.95)) drop-shadow(0 0 50px rgba(255,90,40,.8)); }
.cap-ov.s-wings .lg-wings.fire { animation: lgFireFlicker .14s ease-in-out infinite alternate; }
@keyframes lgFireFlicker { to { filter: blur(7px) drop-shadow(0 0 24px rgba(255,220,120,1)) drop-shadow(0 0 70px rgba(255,120,40,.9)) brightness(1.15); } }
.cap-ov.s-wings.lg-hooh .cap-ball { filter: drop-shadow(0 0 22px #ffd23f); }
.lg-hooh .lg-text { text-shadow: 0 2px 10px rgba(60,20,40,.8); }
.lg-plume { position: absolute; left: 50%; top: -18%; width: 40px; height: 120px; margin-left: -20px; opacity: 0; filter: drop-shadow(0 0 10px rgba(255,240,180,.9)); }
.cap-ov.s-plume .lg-plume { animation: lgPlume 1.8s ease-in-out forwards; }
@keyframes lgPlume { 0% { opacity: 1; transform: translate(0, 0) rotate(-20deg); } 30% { transform: translate(60px, 18vh) rotate(25deg); } 60% { transform: translate(-50px, 32vh) rotate(-20deg); } 100% { opacity: 0; transform: translate(0, 46vh) rotate(0) scale(.5); } }

/* ---------- Celebi : le voyage dans le temps ---------- */
.lg-trees { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 1s; }
.lg-trees path { stroke: #0a1d0c; } .lg-trees circle { fill: #10331a; }
.cap-ov.lg-on .lg-trees { opacity: .9; }
.lg-clock { position: absolute; left: 50%; top: 45%; width: 260px; height: 260px; margin: -130px; opacity: 0; transform: scale(.5); }
.lg-clock circle { fill: rgba(240,255,220,.08); stroke: #dfffc0; stroke-width: 3; }
.lg-clock path { stroke: #dfffc0; stroke-width: 3; stroke-linecap: round; transform-origin: 100px 100px; }
.lg-clock .hh { stroke-width: 6; } .lg-clock .mm { stroke-width: 4; }
.cap-ov.s-clock .lg-clock { opacity: .85; transform: scale(1); transition: opacity .5s, transform .8s; }
.cap-ov.s-clock .lg-clock .mm { animation: lgBackwards .45s linear infinite; }
.cap-ov.s-clock .lg-clock .hh { animation: lgBackwards 3s linear infinite; }
@keyframes lgBackwards { to { transform: rotate(-360deg); } }
.cap-ov.s-past .lg-back { filter: sepia(1) saturate(.7) brightness(1.35) contrast(1.05); transition: filter .8s; }

/* ---------- Shaymin : les Gracidées ---------- */
.lg-flowers i { position: absolute; width: var(--s); height: var(--s); margin: calc(var(--s) / -2); border-radius: 50%; transform: scale(0) rotate(-90deg);
  background: radial-gradient(circle, #ffe066 0 18%, transparent 20%), radial-gradient(circle at 50% 12%, #ff8fc4 0 22%, transparent 24%), radial-gradient(circle at 88% 45%, #ff8fc4 0 22%, transparent 24%),
    radial-gradient(circle at 72% 88%, #ff8fc4 0 22%, transparent 24%), radial-gradient(circle at 28% 88%, #ff8fc4 0 22%, transparent 24%), radial-gradient(circle at 12% 45%, #ff8fc4 0 22%, transparent 24%); }
.cap-ov.s-bloom .lg-flowers i { transform: scale(1) rotate(0); transition: transform .5s cubic-bezier(.2,1.6,.4,1) var(--dl); }
.lg-shaymin .lg-text { color: #1f5a2a; text-shadow: 0 1px 6px rgba(255,255,255,.9); }
.cap-ov.lg-shaymin .cap-ball { filter: drop-shadow(0 0 14px rgba(255,143,196,.7)); }

/* ---------- Léviator rouge : le lac Colère ---------- */
.lg-rage { position: absolute; inset: 0; opacity: 0; box-shadow: inset 0 0 160px 50px rgba(255,20,30,.8); }
.cap-ov.s-rage .lg-rage { animation: lgAlarm .5s ease-in-out infinite; }
.lg-spouts i { position: absolute; bottom: 0; width: 46px; height: 60%; margin-left: -23px; transform: scaleY(0); transform-origin: 50% 100%;
  background: linear-gradient(rgba(255,200,200,0), rgba(255,120,120,.8) 30%, rgba(170,20,30,.95)); border-radius: 50% 50% 0 0; filter: blur(2px); }
.cap-ov.s-spout .lg-spouts i { animation: lgSpout 1.2s var(--dl) cubic-bezier(.2,.9,.3,1) forwards; }
@keyframes lgSpout { 0% { transform: scaleY(0); } 60% { transform: scaleY(1); } 100% { transform: scaleY(.85); } }
.cap-ov.s-rage .cap-ball { filter: drop-shadow(0 0 22px #ff3d3d) saturate(1.4); }

/* ---------- Nuages d'orage (Rayquaza, Lugia) : masses sombres et floues, éclairées de l'intérieur par la foudre ---------- */
.lg-storm i { position: absolute; width: var(--w); height: calc(var(--w) * .55); border-radius: 50%; opacity: 0; filter: blur(14px);
  background: radial-gradient(ellipse at 50% 40%, #1c2b22 0%, #0b140f 55%, transparent 72%); transition: opacity 1.2s var(--dl); animation: lgCloudDrift var(--du, 4s) ease-in-out infinite alternate; }
.lg-storm.sea i { background: radial-gradient(ellipse at 50% 40%, #5a6e98 0%, #2c3d63 55%, transparent 72%); }
.cap-ov.lg-on .lg-storm i { opacity: 1; }
@keyframes lgCloudDrift { 0% { transform: translate(0, 0) scale(1); } 100% { transform: translate(var(--dx, 26px), var(--dy, 0)) scale(1.14); } }
.cap-ov.s-thunder .lg-storm i { animation: lgCloudDrift var(--du, 4s) ease-in-out infinite alternate, lgCloudFlash .9s steps(1, end); }
/* pendant la charge, les nuages s'agitent et tourbillonnent */
.cap-ov.lg-rayquaza.s-charge .lg-storm i { animation-duration: .7s, .9s; }
@keyframes lgCloudFlash { 0% { filter: blur(14px) brightness(3.2); } 18% { filter: blur(14px); } 30% { filter: blur(14px) brightness(2.4); } 50%, 100% { filter: blur(14px); } }
.cap-ov.s-thunder .cap-flash { animation: lgFlashWhite .5s steps(2); }

/* ---------- Rayquaza : furieux et dangereux ---------- */
/* deux yeux en amande, inclinés vers l'intérieur, qui s'ouvrent dans les nuages */
.lg-eyes { position: absolute; left: 50%; top: 13%; width: 0; height: 0; }
.lg-eyes i { position: absolute; top: 0; width: 116px; height: 52px; transform: scaleY(0); opacity: 0;
  background: radial-gradient(ellipse 5% 40% at 56% 54%, #000 0 80%, transparent 90%), radial-gradient(ellipse at 55% 50%, #fff9c9 0%, #ffe14d 30%, #ffb000 62%, #ff6a00 100%);
  filter: drop-shadow(0 0 10px #ffe14d) drop-shadow(0 0 28px rgba(255,150,0,.8)); transition: transform .35s cubic-bezier(.2,1.4,.4,1), opacity .2s; }
.lg-eyes .l { left: -150px; clip-path: polygon(0 18%, 100% 52%, 88% 100%, 14% 86%); }
.lg-eyes .r { left: 40px; clip-path: polygon(0 52%, 100% 18%, 86% 86%, 12% 100%); }
.cap-ov.s-eyes .lg-eyes i { transform: scaleY(1); opacity: 1; }
/* les yeux vivent : ils regardent autour, clignent, puis se plissent de colère pendant la charge */
.cap-ov.s-eyes .lg-eyes { animation: lgLook 2.6s ease-in-out infinite; }
@keyframes lgLook { 0%, 100% { transform: translate(0, 0); } 22% { transform: translate(-18px, 4px); } 48% { transform: translate(14px, 10px) rotate(2deg); } 72% { transform: translate(-6px, 14px); } }
.cap-ov.s-glare .lg-eyes i { animation: lgGlare .5s ease-in-out infinite alternate, lgBlink 1.6s ease-in-out; }
@keyframes lgBlink { 0%, 40%, 100% { transform: scaleY(1); } 46% { transform: scaleY(.06); } 54% { transform: scaleY(1); } }
.cap-ov.s-charge .lg-eyes i { animation: lgGlare .25s ease-in-out infinite alternate, lgNarrow .5s ease-out forwards; }
@keyframes lgNarrow { to { transform: scaleY(.5); } }
.cap-ov.s-charge .lg-eyes { animation: lgGlower .12s linear infinite alternate; }
@keyframes lgGlower { to { transform: translate(2px, 22px); } from { transform: translate(-2px, 18px); } }
@keyframes lgGlare { to { filter: drop-shadow(0 0 16px #fff36b) drop-shadow(0 0 50px #ff7a00) brightness(1.3); } }
.cap-ov.s-impact .lg-eyes i { opacity: 0; transition: opacity .3s; }
/* l'écran vire au rouge, de plus en plus fort */
.lg-danger { position: absolute; inset: 0; opacity: 0; box-shadow: inset 0 0 170px 60px rgba(200,0,30,.75); }
.cap-ov.s-glare .lg-danger { animation: lgAlarm .7s ease-in-out infinite; }
.cap-ov.s-charge .lg-danger { animation-duration: .32s; }
.cap-ov.s-impact .lg-danger { animation: none; opacity: 0; }
/* la sphère d'énergie qui se charge en aspirant tout autour d'elle */
.lg-charge { position: absolute; left: 50%; top: 13%; width: 170px; height: 170px; margin: -40px 0 0 -85px; border-radius: 50%; transform: scale(0);
  background: radial-gradient(circle, #fff 0 12%, #d6ffe6 22%, #3fd17a 42%, rgba(8,60,30,.85) 62%, transparent 71%); box-shadow: 0 0 60px 20px rgba(63,209,122,.55); }
.cap-ov.s-charge .lg-charge { transform: scale(1); transition: transform 1.7s cubic-bezier(.3,0,.6,1); animation: lgPulse .18s ease-in-out infinite alternate; }
@keyframes lgPulse { to { box-shadow: 0 0 90px 34px rgba(125,255,176,.75); filter: brightness(1.25); } }
.cap-ov.s-beam .lg-charge { transform: scale(.4); opacity: 0; transition: transform .25s, opacity .25s; }
.lg-gather { position: absolute; left: 50%; top: calc(13% + 45px); }
.lg-gather i { position: absolute; width: var(--s); height: var(--s); margin: calc(var(--s) / -2); border-radius: 50%; background: #b8ffd6; box-shadow: 0 0 10px #3fd17a; opacity: 0; }
.cap-ov.s-charge .lg-gather i { animation: lgGather .8s var(--dl) ease-in infinite; }
.cap-ov.s-beam .lg-gather { display: none; }
@keyframes lgGather { 0% { opacity: 0; transform: rotate(var(--a)) translateX(var(--d)); } 30% { opacity: 1; } 100% { opacity: 0; transform: rotate(var(--a)) translateX(0) scale(.4); } }
/* le rayon : une colonne épaisse et floue (pas un trait) qui frappe la capsule */
.lg-beam { position: absolute; left: 50%; top: 13%; width: 170px; height: 34%; margin-left: -85px; transform: scaleY(0); transform-origin: 50% 0; opacity: 0; filter: blur(5px);
  background: linear-gradient(90deg, transparent 0%, rgba(63,209,122,.55) 18%, #c8ffe0 38%, #fff 50%, #c8ffe0 62%, rgba(63,209,122,.55) 82%, transparent 100%); box-shadow: 0 0 60px 30px rgba(63,209,122,.5); }
.cap-ov.s-beam .lg-beam { opacity: 1; transform: scaleY(1); transition: transform .28s cubic-bezier(.6,0,.9,.4); animation: lgBeam .08s linear infinite alternate; }
@keyframes lgBeam { to { filter: blur(5px) brightness(1.3); width: 190px; margin-left: -95px; } }
.cap-ov.s-impact .lg-beam { opacity: 0; transform: scaleY(1) scaleX(2.4); transition: opacity .5s, transform .5s; animation: none; }
/* l'impact : une boule de lumière qui grossit, des débris projetés */
.lg-blast { position: absolute; left: 50%; top: 45%; width: 120px; height: 120px; margin: -60px; border-radius: 50%; opacity: 0;
  background: radial-gradient(circle, #fff 0 20%, #c8ffe0 35%, rgba(63,209,122,.6) 55%, transparent 70%); }
.cap-ov.s-impact .lg-blast { animation: lgBlast 1s cubic-bezier(.1,.7,.3,1) forwards; }
@keyframes lgBlast { 0% { opacity: 1; transform: scale(.3); } 100% { opacity: 0; transform: scale(9); } }
.lg-debris { position: absolute; left: 50%; top: 45%; }
.lg-debris i { position: absolute; width: var(--s); height: var(--s); margin: calc(var(--s) / -2); opacity: 0; clip-path: polygon(30% 0, 100% 25%, 80% 100%, 0 70%);
  background: linear-gradient(135deg, #5a6b60, #1d2620); }
.cap-ov.s-impact .lg-debris i { animation: lgDebris .9s cubic-bezier(.15,.7,.4,1) forwards; }
@keyframes lgDebris { 0% { opacity: 1; transform: rotate(var(--a)) translateX(10px) rotate(0); } 100% { opacity: 0; transform: rotate(var(--a)) translateX(var(--d)) rotate(var(--rt)) translateY(40px); } }
.cap-ov.lg-rayquaza.s-charge .cap-ball { filter: drop-shadow(0 0 14px rgba(255,40,60,.7)); }
.cap-ov.lg-rayquaza.co-reveal .lg-back { opacity: .75; }

/* ---------- Lugia : la tempête, les profondeurs, les ailes ---------- */
.lg-calm { position: absolute; inset: 0; opacity: 0; transition: opacity 1.4s; background: radial-gradient(ellipse 80% 55% at 80% 10%, rgba(200,220,255,.35), transparent 70%), linear-gradient(#1d3a6e, #3a64a6 70%, #5b86c4); }
.cap-ov.s-calm .lg-calm { opacity: 1; }
.lg-moon { position: absolute; right: 14%; top: 9%; width: 70px; height: 70px; border-radius: 50%; background: radial-gradient(circle at 40% 40%, #fff, #dbe6ff 60%, #a9bde6); box-shadow: 0 0 50px 14px rgba(200,220,255,.35); }
.cap-ov.s-calm .lg-storm i { opacity: 0; transform: translateX(var(--gone, 60vw)) scale(1.4); transition: opacity .9s, transform 1.2s cubic-bezier(.5,0,.3,1); animation: none; }
.cap-ov.s-calm .lg-storm i:nth-child(odd) { --gone: -60vw; }
.lg-ocean { position: absolute; left: -5%; right: -5%; bottom: 0; height: 30%; border-radius: 50% 50% 0 0 / 22px 22px 0 0;
  background: linear-gradient(#2a5f9e 0%, #17437a 30%, #0b2448 100%); box-shadow: 0 -6px 34px rgba(150,195,255,.3); animation: lgSwell 2.6s ease-in-out infinite alternate; }
@keyframes lgSwell { to { transform: translateY(8px) scaleX(1.02); } }
.cap-ov.s-swell .lg-ocean { animation: lgBulge .9s cubic-bezier(.3,0,.4,1) forwards; }
@keyframes lgBulge { 50% { transform: translateY(-22px) scaleY(1.12); border-radius: 50% 50% 0 0 / 70px 70px 0 0; } 100% { transform: translateY(-8px); } }
.lg-deep { position: absolute; left: 50%; top: 20%; width: 360px; height: 220px; margin-left: -180px; border-radius: 50%; opacity: 0; transform: scale(.3);
  background: radial-gradient(ellipse, rgba(235,245,255,.95) 0%, rgba(160,200,255,.6) 35%, rgba(80,130,220,.2) 60%, transparent 72%); filter: blur(6px); }
.cap-ov.s-glow .lg-deep { opacity: 1; transform: scale(1); transition: opacity 1.2s, transform 1.6s cubic-bezier(.3,0,.4,1); animation: lgPulseSoft 1.1s ease-in-out infinite alternate; }
@keyframes lgPulseSoft { to { filter: blur(6px) brightness(1.3); } }
.lg-wings { --ww: min(860px, 136vw); position: absolute; left: 50%; top: 45%; width: var(--ww); height: calc(var(--ww) * .4333); margin: calc(var(--ww) * -.3) 0 0 calc(var(--ww) / -2); opacity: 0; transform: scaleX(.05) scaleY(.4);
  filter: drop-shadow(0 0 16px rgba(210,230,255,.85)) drop-shadow(0 0 40px rgba(130,170,255,.5)); }
.cap-ov.s-wings .lg-wings { opacity: 1; transform: none; transition: opacity .3s, transform 1s cubic-bezier(.2,.9,.25,1); }
.cap-ov.s-beat .lg-wings { animation: lgBeat .7s ease-in-out; }
@keyframes lgBeat { 40% { transform: scaleY(.72) translateY(14px); } 100% { transform: none; } }
.cap-ov.lg-lugia.s-glow .cap-ball { filter: drop-shadow(0 0 20px rgba(210,230,255,.8)); }
.lg-parts.drop i { border-radius: 50% 50% 50% 50% / 62% 62% 38% 38%; box-shadow: 0 0 10px rgba(200,225,255,.7); filter: blur(.6px); }
.lg-lugia .lg-parts.drop { position: absolute; left: 0; right: 0; bottom: 18%; height: 0; }

/* ---------- Deoxys : la boule de feu et l'ADN ---------- */
.lg-nebula { position: absolute; inset: 0; opacity: 0; transition: opacity 1.5s;
  background: radial-gradient(ellipse 50% 35% at 70% 25%, rgba(255,120,40,.18), transparent 70%), radial-gradient(ellipse 45% 35% at 25% 65%, rgba(77,225,255,.14), transparent 70%); }
.cap-ov.lg-on .lg-nebula { opacity: 1; }
/* la météorite arrive en diagonale du coin haut droit : un cœur incandescent et une traînée de feu en cône, floue */
.lg-rock { position: absolute; left: 50%; top: 45%; width: 0; height: 0; transform: rotate(18deg); }
.lg-fall { position: absolute; left: 0; top: 0; opacity: 0; transform: translateY(-42vh) scale(.25); }
.cap-ov.s-fall .lg-fall { opacity: 1; animation: lgFall2 1.25s cubic-bezier(.35,0,.75,.7) forwards; }
@keyframes lgFall2 { 0% { transform: translateY(-42vh) scale(.25); } 100% { transform: translateY(-30px) scale(1.2); } }
.cap-ov.s-impact .lg-fall { animation: none; opacity: 0; }
.lg-head { position: absolute; left: -30px; top: -30px; width: 60px; height: 60px; border-radius: 46% 54% 50% 50%;
  background: radial-gradient(circle at 45% 60%, #fff 0 18%, #ffe3a1 32%, #ff8a1f 58%, #7a2208 88%); box-shadow: 0 0 30px 12px rgba(255,140,40,.85), 0 0 80px 20px rgba(255,80,20,.5);
  animation: lgShake .07s linear infinite alternate; }
@keyframes lgShake { to { transform: translate(1.5px, -1px) rotate(4deg); } }
.lg-tail { position: absolute; left: -55px; top: -330px; width: 110px; height: 320px; filter: blur(7px);
  background: linear-gradient(to top, #fff3d0 0%, #ffb347 14%, rgba(255,90,20,.75) 38%, rgba(140,30,60,.35) 70%, transparent 100%); clip-path: polygon(50% 100%, 100% 0, 0 0); }
.lg-tail::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(255,255,255,.8), transparent 40%); clip-path: polygon(50% 100%, 70% 0, 30% 0); }
/* l'impact : une boule de feu qui grossit, puis la fumée */
.lg-fireball { position: absolute; left: 50%; top: 45%; width: 140px; height: 140px; margin: -70px; border-radius: 50%; opacity: 0;
  background: radial-gradient(circle, #fff 0 14%, #ffe3a1 26%, #ff8a1f 45%, rgba(200,40,20,.7) 62%, transparent 72%); }
.cap-ov.s-impact .lg-fireball { animation: lgFireball 1.1s cubic-bezier(.1,.7,.3,1) forwards; }
@keyframes lgFireball { 0% { opacity: 1; transform: scale(.2); } 40% { opacity: 1; } 100% { opacity: 0; transform: scale(5); } }
.lg-smoke { position: absolute; left: 50%; top: 45%; width: 200px; height: 200px; margin: -100px; border-radius: 50%; opacity: 0; filter: blur(12px);
  background: radial-gradient(circle, transparent 30%, rgba(60,40,50,.75) 50%, transparent 70%); }
.cap-ov.s-impact .lg-smoke { animation: lgSmoke 1.8s .2s ease-out forwards; }
@keyframes lgSmoke { 0% { opacity: .9; transform: scale(.5); } 100% { opacity: 0; transform: scale(3.2); } }
.lg-deoxys .lg-debris i { background: linear-gradient(135deg, #ffb347, #5a2a10); box-shadow: 0 0 8px rgba(255,140,40,.7); }
/* la double hélice : deux rangées de points lumineux qui tournent l'une autour de l'autre */
.lg-helix { position: absolute; left: 50%; top: 8%; height: 76%; width: 0; opacity: 0; }
.lg-helix i { position: absolute; top: calc(var(--i) * 7%); left: -7px; width: 14px; height: 14px; border-radius: 50%;
  animation: lgHelix 1.6s ease-in-out infinite; animation-delay: calc(var(--i) * -.11s); }
.lg-helix .a { background: radial-gradient(circle, #fff 0 20%, #ff9a3c 60%); box-shadow: 0 0 12px #ff9a3c; }
.lg-helix .b { background: radial-gradient(circle, #fff 0 20%, #4de1ff 60%); box-shadow: 0 0 12px #4de1ff; animation-delay: calc(var(--i) * -.11s - .8s); }
@keyframes lgHelix { 0%, 100% { transform: translateX(-70px) scale(.55); opacity: .5; } 50% { transform: translateX(70px) scale(1.15); opacity: 1; } }
.cap-ov.s-dna .lg-helix { opacity: 1; transition: opacity .6s; }


@media (max-width: 760px) {
  .lg-groudon .lg-sun { width: 170px; height: 170px; margin-left: -85px; }
  .lg-text { font-size: 1rem; }
  .lg-tube, .lg-glass { width: 200px; height: 330px; margin: -185px 0 0 -100px; }
  .lg-clock { width: 210px; height: 210px; margin: -105px; }
}
@media (prefers-reduced-motion: reduce) {
  .cap-ov.lg-q .cap-scene, .cap-ov.lg-q .lg-back, .lg-rain, .cap-ov.lg-groudon.lg-heat .cap-ball .capsule, .cap-ov.s-alarm .lg-alarm, .cap-ov.s-rage .lg-rage { animation: none; }
}