/* ---------- 3D accents (assets/js/expedice-fx.js; every one is optional, the CSS/icon UI underneath is the fallback) ---------- */
.fx3d { position: relative; display: block; flex: none; pointer-events: none; }
.fx3d canvas { display: block; width: 100%; height: 100%; }
.fx3d:not(.is-ready) { visibility: hidden; }          /* reserves its space, so nothing jumps when three.js arrives */
.fx3d.is-failed { display: none; }
.fx3d--pumpkin canvas { pointer-events: auto; cursor: pointer; }

.fx3d--drag canvas { pointer-events: auto; cursor: grab; touch-action: pan-y; }
.fx3d--drag canvas:active { cursor: grabbing; }

/* declarative host: <div data-fx3d="...">, its own children (img / icon) are the fallback until the scene is ready */
:where(.fx3d-host) { position: relative; }   /* zero specificity: never overrides an .absolute / .fixed host */
.fx3d--fill { position: absolute; inset: 0; width: 100%; height: 100%; }
.fx3d--pad { inset: -60%; width: 220%; height: 220%; }
.fx3d-host.is-fx-ready > :not(.fx3d) { visibility: hidden; }

/* HcFX.celebrate() overlay */
.fx3d-modal { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: 1rem; overflow-y: auto; }
.fx3d-modal__scrim { position: fixed; inset: 0; background: rgba(5, 7, 12, .78); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); animation: fx3d-fade .25s ease backwards; }
.fx3d-modal__box { position: relative; width: 100%; max-width: 24rem; padding: 1.25rem; border-radius: 1.2rem; text-align: center; color: #e7e9ee;
  background: linear-gradient(180deg, #181c28, #10131b); border: 1px solid rgba(255, 255, 255, .14); box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .9); animation: fx3d-pop .3s cubic-bezier(.2, .9, .3, 1.2) backwards; }
.fx3d-modal__stage { position: relative; height: 13rem; }
.fx3d-modal__stage .fx3d { position: absolute; inset: 0; width: 18rem; max-width: 100%; height: 100%; margin: 0 auto; }
.fx3d-modal__box h3 { margin: 0 0 .35rem; font-size: 1.25rem; font-weight: 700; color: #fff; }
.fx3d-modal__box p { margin: 0 0 .8rem; min-height: 1.3rem; font-size: .9rem; line-height: 1.5; color: #c3c9d8; }
.fx3d-modal__list { list-style: none; margin: 0 0 1rem; padding: 0; display: flex; flex-wrap: wrap; gap: .45rem; justify-content: center; }
.fx3d-modal__list li { padding: .3rem .7rem; border-radius: .75rem; font-size: .85rem; font-weight: 600; color: #ffe08a; border: 1px solid rgba(255, 200, 61, .5); background: rgba(255, 200, 61, .1); animation: fx3d-pop .45s cubic-bezier(.2, .9, .3, 1.3) backwards; }
.fx3d-modal__btn { width: 100%; padding: .65rem 1rem; border-radius: .8rem; border: 0; cursor: pointer; font-weight: 700; color: #fff; background: linear-gradient(90deg, #ff6b2b, #ff8a4d); }
.fx3d-modal__btn[hidden] { display: none; }
@keyframes fx3d-fade { from { opacity: 0; } }
@keyframes fx3d-pop { from { opacity: 0; transform: scale(.88); } }