/* La Châsse de cristal (chasse.js) : le reliquaire de cristal et la relique qu'on y voit, la prise, la scène.
   Reprend le vocabulaire des Reliquaires (rq-, reliquaires.css). Préfixe ch-. Tout ce qui bouge passe par transform et opacity. */

[data-reliq="cristal"] { --m1: #F4FBFF; --m2: #2A3A50; --m3: #0A1018; --t1: #FFF3C4; --t2: #B9D4EC; --t3: #4A6A8A; --gemme: #8ECBFF; --lueur: #BFE0FF; --fond: #0E1A2C; --ban1: #2A3A50; --ban2: #0E1622; }
.ch-chasse { --ch-lueur: var(--rar, #BFE0FF); }

/* ——— Le reliquaire de cristal ——— */
.ch-chasse { position: relative; width: 100%; aspect-ratio: 200 / 210; isolation: isolate; }
.ch-fond, .ch-devant { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.ch-fond { z-index: 0; }
.ch-devant { z-index: 2; filter: drop-shadow(0 0 6px rgba(190, 224, 255, .35)); transition: opacity .5s ease-out, transform .6s cubic-bezier(.2, .8, .3, 1); }
/* La relique dans le cristal : x 40–160, y 86–176 sur 200 × 210 */
.ch-dedans { position: absolute; left: 20%; right: 20%; top: 41%; height: 43%; z-index: 1; display: grid; place-items: center; overflow: visible; transition: transform .6s cubic-bezier(.2, 1.4, .4, 1), filter .6s; }
.ch-dedans::before { content: ""; position: absolute; inset: -6% -10%; z-index: -1; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--ch-lueur) 55%, transparent), transparent); animation: ch-respire 3.4s ease-in-out infinite; }
@keyframes ch-respire { 0%, 100% { opacity: .55; transform: scale(.94); } 50% { opacity: 1; transform: scale(1.06); } }
.ch-dedans .vg { animation: ch-flotte 4.2s ease-in-out infinite; }
@keyframes ch-flotte { 0%, 100% { translate: 0 2%; } 50% { translate: 0 -3%; } }
/* Les rayons derrière la Châsse, couleur de la rareté */
.ch-rayons {
  position: absolute; inset: -14% -18% 0; z-index: -1; border-radius: 50%;
  background: repeating-conic-gradient(from 0deg at 50% 58%, transparent 0 9deg, color-mix(in srgb, var(--ch-lueur) 26%, transparent) 9deg 12deg);
  -webkit-mask: radial-gradient(closest-side at 50% 58%, #000 30%, transparent 100%); mask: radial-gradient(closest-side at 50% 58%, #000 30%, transparent 100%);
  animation: sk-tourne 60s linear infinite;
}
.ch-chasse.rar-mythique { --ch-lueur: #FF8A9A; }
.ch-chasse.rar-mythique .ch-rayons { background: repeating-conic-gradient(from 0deg at 50% 58%, rgba(255, 77, 109, .3) 0 3deg, transparent 3deg 10deg, rgba(92, 240, 160, .26) 10deg 13deg, transparent 13deg 20deg, rgba(79, 216, 255, .3) 20deg 23deg, transparent 23deg 30deg, rgba(155, 107, 255, .3) 30deg 33deg, transparent 33deg 40deg); animation-duration: 40s; }
.ch-chasse.rar-legendaire .ch-rayons { background: repeating-conic-gradient(from 0deg at 50% 58%, transparent 0 7deg, rgba(255, 226, 150, .34) 7deg 10deg); }
/* Le reflet qui passe sur le cristal, et l'éclat de la gemme du faîte */
.ch-vitres { animation: ch-vitres 5.4s ease-in-out infinite; }
@keyframes ch-vitres { 0%, 100% { opacity: .7; } 50% { opacity: 1; } }
.ch-gemme { animation: ch-gemme 3.2s ease-in-out infinite; }
@keyframes ch-gemme { 0%, 100% { fill: #B0182E; } 50% { fill: #FF5A6E; } }
.ch-coeur { animation: ch-coeur 2.6s ease-in-out infinite alternate; }
@keyframes ch-coeur { from { fill: #5AA8F0; } to { fill: #DDF4FF; } }
.ch-eclats { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.ch-eclats i {
  position: absolute; width: 7%; aspect-ratio: 1; translate: -50% -50%; opacity: 0; background: #FFFFFF;
  clip-path: polygon(50% 0, 58% 42%, 100% 50%, 58% 58%, 50% 100%, 42% 58%, 0 50%, 42% 42%); filter: drop-shadow(0 0 4px #BFE0FF);
  animation: ch-eclat 3.2s ease-in-out infinite;
}
.ch-eclats i:nth-child(1) { left: 22%; top: 46%; } .ch-eclats i:nth-child(2) { left: 50%; top: 13%; animation-delay: -.6s; } .ch-eclats i:nth-child(3) { left: 80%; top: 70%; animation-delay: -1.2s; }
.ch-eclats i:nth-child(4) { left: 17%; top: 15%; animation-delay: -1.8s; } .ch-eclats i:nth-child(5) { left: 83%; top: 15%; animation-delay: -2.3s; } .ch-eclats i:nth-child(6) { left: 30%; top: 82%; animation-delay: -2.8s; }
@keyframes ch-eclat { 0%, 72%, 100% { opacity: 0; transform: scale(.3) rotate(0deg); } 82% { opacity: 1; transform: scale(1) rotate(45deg); } }
/* Rien à voir (sans compte, Châsse complète) : le cristal est voilé de brume */
.ch-brume { width: 80%; height: 80%; border-radius: 50%; background: radial-gradient(closest-side, rgba(230, 242, 255, .7), rgba(190, 220, 255, .2) 60%, transparent); filter: blur(6px); animation: ch-respire 4s ease-in-out infinite; }
/* La relique vient de changer : le cristal se trouble puis s'éclaircit */
.ch-trouble .ch-dedans { animation: ch-eclaircit 1.4s ease-out both; }
@keyframes ch-eclaircit { 0% { filter: blur(10px) brightness(1.8); opacity: 0; transform: scale(.9); } 100% { filter: none; opacity: 1; transform: none; } }

/* ——— L'autel de la Châsse ——— */
.ch-autel {
  background:
    radial-gradient(ellipse 60% 36% at 50% 38%, rgba(191, 224, 255, .18), transparent 72%),
    repeating-linear-gradient(0deg, rgba(0, 0, 0, .5) 0 2px, transparent 2px 46px), repeating-linear-gradient(90deg, rgba(0, 0, 0, .35) 0 2px, transparent 2px 92px),
    radial-gradient(ellipse 120% 80% at 50% 40%, #1E2634, #0C1018 70%, #05070B);
}
.ch-vitrine { width: min(100%, 300px); justify-self: center; padding: 30px 0 6px; }
@media (min-width: 720px) { .ch-vitrine { width: 100%; max-width: 360px; padding: 34px 0 10px; } }
.ch-relique { display: grid; gap: 4px; max-width: 46ch; padding: 10px 14px; border-left: 3px solid var(--rar); background: linear-gradient(90deg, color-mix(in srgb, var(--rar) 14%, transparent), transparent); text-align: left; }
.ch-relique-sur { margin: 0; display: inline-flex; align-items: center; flex-wrap: wrap; gap: 6px; font: 400 .82rem/1.2 var(--etiquette); color: var(--rar); }
.ch-relique h3 { font: 600 1.45rem/1.1 var(--titre); color: var(--encre); }
.ch-relique.rar-mythique h3, .ch-recu.rar-mythique h2 { color: transparent; -webkit-background-clip: text; background-clip: text; background-image: linear-gradient(100deg, #FF8A9A, #FFE9A0 30%, #9CF5C4 55%, #9ADFFF 75%, #C9A8FF); }
.ch-relique.rar-mythique { background: linear-gradient(90deg, rgba(155, 107, 255, .16), rgba(255, 90, 106, .08) 40%, transparent); border-image: linear-gradient(180deg, #FF4D6D, #FFB547, #FFF35C, #5CF0A0, #4FD8FF, #9B6BFF) 1; }
.ch-relique.rar-legendaire h3 { color: transparent; -webkit-background-clip: text; background-clip: text; background-image: linear-gradient(100deg, #E9C066, #FFF3C4 50%, #E9C066); }
.ch-relique-texte { margin: 0; font-size: .92rem; line-height: 1.45; color: var(--encre-att); text-wrap: pretty; }
.ch-prendre-case { display: grid; gap: 6px; width: 100%; max-width: 320px; }
.ch-prendre { min-height: 68px; }
.ch-euros { margin-left: 4px; font: italic 500 .85rem/1 var(--titre); opacity: .8; }
.ch-prendre-case .rq-manque .bq-lien { font-size: inherit; }
.ch-complet { margin: 0; max-width: 40ch; font: italic 600 1.1rem/1.4 var(--titre); color: var(--serment); }
.ch-faveurs .rq-faveur b { color: var(--rar); }
.rq-objet.ch-vue { box-shadow: 0 0 0 1px #BFE0FF, 0 0 18px rgba(191, 224, 255, .4); }
.ch-dans { background: #DDF4FF; color: #061A3A; }

/* ——— Confirmation et scène ——— */
.ch-confirm { --rar-fond: var(--rar); }
.ch-confirm .bq-confirm-apercu { min-height: 160px; }
.ch-scene-chasse { width: min(78vw, 340px, 48vh); margin-top: 6px; }
.ch-recu { display: grid; justify-items: center; gap: 6px; padding: 0 16px; text-align: center; opacity: 0; transform: translateY(10px); transition: opacity .5s ease-out .15s, transform .5s ease-out .15s; }
.ch-recu h2 { font: 600 1.8rem/1.1 var(--titre); color: var(--encre); }
.ch-recu.rar-legendaire h2 { color: transparent; -webkit-background-clip: text; background-clip: text; background-image: linear-gradient(100deg, #E9C066, #FFF3C4 50%, #E9C066); }
.ch-scene.revele .ch-recu { opacity: 1; transform: none; }
.ch-scene .rq-nouveau { animation-play-state: paused; }
.ch-scene.revele .rq-nouveau { animation-play-state: running; }
/* Le cristal s'illumine et s'ouvre : la façade s'efface dans la lumière, la relique s'avance */
.ch-ouvre .ch-devant { opacity: 0; transform: scale(1.06); }
.ch-ouvre .ch-dedans { transform: scale(1.14); filter: drop-shadow(0 0 18px var(--ch-lueur)); }
.ch-ouvre .ch-rayons { animation-duration: 14s; filter: brightness(1.6); }

@media (prefers-reduced-motion: reduce) {
  .ch-dedans::before, .ch-dedans .vg, .ch-rayons, .ch-vitres, .ch-gemme, .ch-coeur, .ch-eclats i, .ch-brume, .ch-trouble .ch-dedans { animation: none; }
  .ch-devant, .ch-dedans, .ch-recu { transition: none; }
}
:root[data-anim-reduite="1"] :is(.ch-dedans .vg, .ch-rayons, .ch-eclats i) { animation: none; }

/* ——— La Châsse en 3D (chasse3d.js) : deux toiles, l'une sous la relique, l'autre dessus ; l'image SVG s'efface ———
   La relique se cale dans la coupe du milieu de la caisse de verre (--ch3d-*, calculées par la 3D). */
.ch3d { position: absolute; left: -16%; top: -12%; width: 132%; height: 124%; pointer-events: none; }
.ch3d--fond { z-index: 0; }
.ch3d--devant { z-index: 2; }
.ch-chasse.ch3d-actif { touch-action: pan-y; cursor: grab; }
.ch-chasse.ch3d-actif:active { cursor: grabbing; }
.ch-chasse.ch3d-actif :is(.ch-fond, .ch-devant, .ch-eclats) { visibility: hidden; }
.ch-chasse.ch3d-actif .ch-dedans { left: var(--ch3d-l, 20%); right: auto; top: var(--ch3d-t, 41%); width: var(--ch3d-w, 60%); height: var(--ch3d-h, 43%); }
.ch-chasse.ch3d-actif .ch-rayons { inset: -18% -22% -4%; }