@charset "UTF-8";
/* Motion layer: entrances, micro-interactions and feedback.
   Always played in full: there is no reduced-motion mode. */

/* ---- Entrances ------------------------------------------------------- */
@keyframes rise-in {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes seal-in {
  0% {
    opacity: 0;
    transform: scale(0.94) translateY(12px);
  }
  60% {
    transform: scale(1.012) translateY(0);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}
@keyframes glint {
  from {
    background-position:
      -140% 0,
      0 0;
  }
  to {
    background-position:
      240% 0,
      0 0;
  }
}
@keyframes soft-pulse {
  0%,
  100% {
    opacity: 0.55;
  }
  50% {
    opacity: 1;
  }
}
@keyframes value-flash {
  0% {
    transform: scale(1.14);
    filter: brightness(1.55);
  }
  100% {
    transform: none;
    filter: none;
  }
}
@keyframes urgent-beat {
  0%,
  100% {
    transform: none;
    text-shadow: 0 2px 3px #000000;
  }
  50% {
    transform: scale(1.06);
    text-shadow:
      0 2px 3px #000000,
      0 0 18px #e2cca299;
  }
}
@keyframes slot-fill {
  0% {
    transform: scale(0.55) translateY(-10px);
    opacity: 0;
  }
  65% {
    transform: scale(1.09) translateY(0);
    opacity: 1;
  }
  100% {
    transform: none;
    opacity: 1;
  }
}
/* The gold thread under a run in order breathes while it waits for the loupe. */
@keyframes ordered-glow {
  0%,
  100% {
    box-shadow:
      inset 0 3px 8px #000000aa,
      inset 0 -4px 0 #f5dcae,
      0 0 12px #ffe5b477;
  }
  50% {
    box-shadow:
      inset 0 3px 8px #000000aa,
      inset 0 -5px 0 #ffe5b4,
      0 0 22px #ffe5b4cc;
  }
}
.game-page .bag-slot.ordered.just-filled {
  animation:
    slot-fill 0.36s cubic-bezier(0.2, 0.9, 0.3, 1.1),
    ordered-glow 1.6s ease-in-out infinite;
}
@keyframes halo-breathe {
  0%,
  100% {
    box-shadow:
      inset 0 0 0 2px #090b1e,
      inset 0 0 0 3px #72799d3b,
      0 3px 7px #00000066;
  }
  50% {
    box-shadow:
      inset 0 0 0 2px #090b1e,
      inset 0 0 0 3px #e2cca277,
      0 3px 7px #00000066,
      0 0 22px #d8c39c40;
  }
}
@keyframes dot-seal {
  from {
    transform: scale(0.2);
    opacity: 0;
  }
  to {
    transform: none;
    opacity: 1;
  }
}

/* ---- Screen and section entrances ------------------------------------ */
/* The whole screen only fades: moving it would repaint the illustration and
   the engraved title on every frame, which modest machines feel. */
#app > main {
  animation: fade-in 0.28s ease-out both;
}
.home-subtitle,
.title-rule,
.home-primary-actions,
.journey-progress {
  animation: rise-in 0.5s cubic-bezier(0.22, 0.75, 0.3, 1) both;
}
.home-subtitle {
  animation-delay: 0.1s;
}
.title-rule {
  animation-delay: 0.14s;
}
.home-primary-actions {
  animation-delay: 0.24s;
}
.journey-progress {
  animation-delay: 0.3s;
}
.realm-art,
.stage-list {
  animation: rise-in 0.4s cubic-bezier(0.22, 0.75, 0.3, 1) both;
}
.realm-art {
  animation-delay: 0.05s;
}
.stage-list {
  animation-delay: 0.1s;
}

.game-hud,
.board-frame,
.bag-slots,
.resource-bar {
  animation: rise-in 0.42s cubic-bezier(0.22, 0.75, 0.3, 1) both;
}
.board-frame {
  animation-delay: 0.06s;
}
.bag-slots {
  animation-delay: 0.12s;
}
.resource-bar {
  animation-delay: 0.16s;
}

/* ---- Buttons and controls -------------------------------------------- */
.button,
.icon-button,
.resource-button,
.home-nav button,
.text-button,
.back-link,
.stage-row {
  transition:
    transform 0.16s cubic-bezier(0.22, 0.75, 0.3, 1),
    box-shadow 0.2s ease,
    background 0.2s ease,
    border-color 0.2s ease,
    color 0.2s ease;
}
.button:hover:not(:disabled),
.icon-button:hover:not(:disabled) {
  transform: translateY(-2px);
}
.button:active:not(:disabled),
.icon-button:active:not(:disabled),
.resource-button:active:not(:disabled) {
  transform: translateY(1px) scale(0.985);
}
/* A blade of light crosses the main call to action every few seconds.
   The shine is an extra background layer so the engraved diamonds remain. */
.button.primary {
  background-image:
    linear-gradient(105deg, transparent 38%, #a1c4ff4d 47%, transparent 57%),
    linear-gradient(180deg, #27365b, #182341 48%, #10182e 52%, #1e2c4c);
  background-size:
    220% 100%,
    100% 100%;
  background-repeat: no-repeat;
  animation: glint 4.8s ease-in-out 1.2s infinite;
}
.button.primary:hover {
  background-image:
    linear-gradient(105deg, transparent 38%, #a1c4ff4d 47%, transparent 57%),
    linear-gradient(180deg, #344873, #253458 48%, #1b2949 52%, #2e4068);
}
.home-nav button:hover,
.text-button:hover,
.back-link:hover {
  transform: translateY(-1px);
}
.stage-row:hover:not(:disabled) {
  transform: translateX(4px);
}
.stage-row.current .stage-number {
  animation: soft-pulse 2.8s ease-in-out infinite;
}

/* ---- Head-up display -------------------------------------------------- */
.hud-stat .value {
  display: inline-block;
  transition: color 0.2s ease;
}
.hud-stat .value.changed {
  animation: value-flash 0.42s cubic-bezier(0.22, 0.75, 0.3, 1);
}
.hud-stat .value.danger {
  animation: urgent-beat 1s ease-in-out infinite;
}
.objective-dot {
  transition:
    background 0.25s ease,
    box-shadow 0.25s ease;
}
.objective-dot.complete {
  animation: dot-seal 0.34s cubic-bezier(0.22, 0.75, 0.3, 1);
}
.family-focus-item .artifact-icon {
  transition:
    transform 0.2s cubic-bezier(0.22, 0.75, 0.3, 1),
    filter 0.2s ease;
}
.family-focus-item:hover .artifact-icon {
  transform: translateY(-3px) scale(1.06);
  filter: brightness(1.12);
}

/* ---- Bag and resources ------------------------------------------------ */
.bag-slot {
  transition:
    border-color 0.22s ease,
    box-shadow 0.22s ease,
    transform 0.22s cubic-bezier(0.22, 0.75, 0.3, 1);
}
.bag-slot.filled:hover {
  transform: translateY(-3px);
  border-color: #efd7aa;
  box-shadow:
    inset 0 3px 8px #000000aa,
    0 4px 14px #00000077,
    0 0 16px #d3bf9944;
}
.bag-slot.just-filled {
  animation: slot-fill 0.36s cubic-bezier(0.2, 0.9, 0.3, 1.1);
}
.bag-slot.just-filled .artifact-icon {
  animation: slot-fill 0.36s cubic-bezier(0.2, 0.9, 0.3, 1.1);
}
.resource-button:not(:disabled) .artifact-icon,
.resource-display .artifact-icon {
  transition: transform 0.2s cubic-bezier(0.22, 0.75, 0.3, 1);
}
.resource-button:hover:not(:disabled) .artifact-icon {
  transform: scale(1.12) rotate(-4deg);
}
.resource-button.is-ready {
  animation: ready-glow 1.3s ease-in-out infinite;
}
.resource-button .resource-value {
  display: inline-block;
}
.resource-button .resource-value.changed,
.resource-display .resource-value.changed {
  animation: value-flash 0.42s cubic-bezier(0.22, 0.75, 0.3, 1);
}

/* ---- Board frame ------------------------------------------------------ */
.board-frame:before,
.board-frame:after {
  animation: soft-pulse 4.2s ease-in-out infinite;
}
.board-frame:after {
  animation-delay: -2.1s;
}
#board {
  transition: filter 0.3s ease;
}

/* ---- Modals and toast -------------------------------------------------- */
.modal-backdrop {
  animation: fade-in 0.2s ease-out;
}
.modal {
  animation: seal-in 0.34s cubic-bezier(0.22, 0.75, 0.3, 1) both;
}
/* The families of a page settle one after the other, each time it opens. */
.grimoire-page:not([hidden]) .family-entry {
  animation: rise-in 0.42s cubic-bezier(0.22, 0.75, 0.3, 1) both;
}
.grimoire-page .family-entry:nth-child(2) {
  animation-delay: 0.04s;
}
.grimoire-page .family-entry:nth-child(3) {
  animation-delay: 0.08s;
}
.grimoire-page .family-entry:nth-child(4) {
  animation-delay: 0.12s;
}
.grimoire-page .family-entry:nth-child(n + 5) {
  animation-delay: 0.16s;
}
.family-object-art .artifact-icon {
  transition:
    transform 0.2s cubic-bezier(0.22, 0.75, 0.3, 1),
    filter 0.2s ease;
}
.family-object:hover .artifact-icon {
  transform: scale(1.09);
  filter: brightness(1.15) drop-shadow(0 3px 10px #00000080);
}
/* The page arrows are clicked again and again in the same place: they glow
   instead of rising, so that they never slip from under the pointer. */
.book-pager .icon-button:hover:not(:disabled) {
  transform: none;
  box-shadow: 0 0 12px #e8d1a666;
  color: var(--gold-bright);
}
/* A page of a book turns from its spine. */
.book-page.turn-next {
  transform-origin: left center;
  animation: leaf-next 0.42s cubic-bezier(0.22, 0.75, 0.3, 1) both;
}
.book-page.turn-prev {
  transform-origin: right center;
  animation: leaf-prev 0.42s cubic-bezier(0.22, 0.75, 0.3, 1) both;
}
@keyframes leaf-next {
  from {
    opacity: 0;
    transform: perspective(1400px) rotateY(-14deg) translateX(28px);
  }
}
@keyframes leaf-prev {
  from {
    opacity: 0;
    transform: perspective(1400px) rotateY(14deg) translateX(-28px);
  }
}
.modal-close {
  transition:
    transform 0.2s cubic-bezier(0.22, 0.75, 0.3, 1),
    color 0.2s ease;
}
.modal-close:hover:not(:disabled) {
  transform: rotate(90deg);
}
#toast {
  transition:
    opacity 0.22s ease,
    transform 0.28s cubic-bezier(0.22, 0.75, 0.3, 1);
  transform: translate(-50%, -14px) scale(0.97);
}
#toast.visible {
  transform: translate(-50%, 0) scale(1);
}

/* ---- Collection and artefacts ----------------------------------------- */
.artifact-icon {
  transition:
    transform 0.22s cubic-bezier(0.22, 0.75, 0.3, 1),
    filter 0.22s ease;
}

/* ---- Feedback of the game screen ------------------------------------------- */
@keyframes ready-glow {
  0%,
  100% {
    box-shadow:
      0 0 0 1px #ffe5b455,
      0 0 10px #ffe5b444;
  }
  50% {
    box-shadow:
      0 0 0 1px #ffe5b4,
      0 0 24px #ffe5b4aa;
  }
}
@keyframes received {
  0% {
    transform: scale(1);
  }
  35% {
    transform: scale(1.1);
    filter: brightness(1.45);
  }
  100% {
    transform: scale(1);
    filter: none;
  }
}
@keyframes refused {
  0%,
  100% {
    box-shadow: 0 3px 8px #00000077;
  }
  30% {
    box-shadow:
      0 0 0 2px var(--danger),
      0 0 18px rgba(255, 59, 92, 0.6);
  }
}
@keyframes spent {
  40% {
    filter: brightness(0.7) saturate(0.6);
  }
}
@keyframes badge-pop {
  0% {
    transform: scale(0.3);
    opacity: 0;
  }
  60% {
    transform: scale(1.25);
    opacity: 1;
  }
  100% {
    transform: scale(1);
  }
}
@keyframes frozen-in {
  0% {
    filter: brightness(2.2) saturate(0.3);
  }
  100% {
    filter: none;
  }
}
@keyframes urgent-vignette {
  0%,
  100% {
    opacity: 0.45;
  }
  50% {
    opacity: 1;
  }
}
@keyframes danger-pulse {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(255, 59, 92, 0);
  }
  50% {
    box-shadow: 0 0 16px 2px rgba(255, 59, 92, 0.75);
  }
}
@keyframes rotate-phone {
  0%,
  25% {
    transform: rotate(0);
  }
  55%,
  85% {
    transform: rotate(-90deg);
  }
  100% {
    transform: rotate(0);
  }
}
@keyframes tip-in {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.hud-stat.received,
.resource-button.received,
.resource-display.received,
.hud-time.received {
  animation: received 0.45s cubic-bezier(0.2, 0.9, 0.3, 1.2);
}
.resource-button.refused,
.resource-display.refused,
.bag-slots.refused {
  animation: refused 0.6s ease-out;
}
.resource-display.spent .artifact-icon {
  animation: spent 0.4s ease-out;
}
.mult-badge.pop {
  animation: badge-pop 0.5s cubic-bezier(0.2, 0.9, 0.3, 1.4);
}
.hud-time.frozen-in {
  animation: frozen-in 0.7s ease-out;
}
.game-page.is-urgent:after {
  animation: urgent-vignette 1s ease-in-out infinite;
}
.bag-meter.blocked {
  animation: danger-pulse 0.9s ease-in-out infinite;
}
.fx-tip {
  animation: tip-in 0.2s ease-out both;
}
.rotate-phone {
  animation: rotate-phone 2.6s ease-in-out infinite;
}

/* ---- Victory ---------------------------------------------------------------- */
@keyframes cup-drop {
  0% {
    transform: translateY(-46px) scale(0.55);
    opacity: 0;
  }
  55% {
    transform: translateY(6px) scale(1.08);
    opacity: 1;
  }
  75% {
    transform: translateY(-3px) scale(0.98);
  }
  100% {
    transform: none;
  }
}
@keyframes rays-spin {
  from {
    transform: translate(-50%, -50%) rotate(0);
  }
  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}
@keyframes actions-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.result-emblem.staged .artifact-icon {
  animation: cup-drop 0.75s cubic-bezier(0.2, 0.8, 0.3, 1) 0.1s both;
}
.result-emblem .result-rays {
  animation: rays-spin 24s linear infinite;
}
.result-actions.staged {
  animation: actions-in 0.45s cubic-bezier(0.22, 0.75, 0.3, 1) 1.5s both;
}

/* The family carousel turning by itself: the new family slides in. */
@keyframes family-swap {
  from {
    opacity: 0;
    transform: translateX(14px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.family-focus-content.swap {
  animation: family-swap 0.35s cubic-bezier(0.22, 0.75, 0.3, 1);
}

/* ---- Menus accordés aux lieux ------------------------------------------------ */
/* Entering a realm: its illustration comes out of the dark and settles, the
   path draws itself and each medallion is struck like a seal as the path
   reaches it. Turning to another realm, the new one arrives from its side. */
@keyframes backdrop-settle {
  from {
    opacity: 0;
    transform: scale(1.06);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes backdrop-next {
  from {
    opacity: 0;
    transform: translateX(4%) scale(1.06);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes backdrop-prev {
  from {
    opacity: 0;
    transform: translateX(-4%) scale(1.06);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes cartouche-in {
  from {
    opacity: 0;
    transform: translateX(-26px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes dock-in {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes path-draw {
  to {
    stroke-dashoffset: 0;
  }
}
@keyframes node-stamp {
  0% {
    opacity: 0;
    transform: scale(0.35) rotate(-14deg);
  }
  60% {
    opacity: 1;
    transform: scale(1.14) rotate(3deg);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}
@keyframes node-sheen {
  0% {
    opacity: 0;
    background-position: 160% 0;
  }
  25% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    background-position: -60% 0;
  }
}
@keyframes sonar {
  0% {
    transform: scale(1);
    opacity: 0.9;
  }
  100% {
    transform: scale(2.2);
    opacity: 0;
  }
}
@keyframes pennant-drop {
  from {
    opacity: 0;
    transform: translateY(-18px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes pennant-bob {
  0%,
  100% {
    transform: none;
  }
  50% {
    transform: translateY(-5px);
  }
}
@keyframes flash-bloom {
  0% {
    transform: scale(0.4);
    opacity: 1;
  }
  65% {
    opacity: 0.85;
  }
  100% {
    transform: scale(64);
    opacity: 0;
  }
}
@keyframes flash-veil {
  0% {
    opacity: 0;
  }
  22% {
    opacity: 0.8;
  }
  100% {
    opacity: 0;
  }
}
.realm-backdrop {
  animation: backdrop-settle 1.4s cubic-bezier(0.2, 0.7, 0.2, 1) backwards;
}
.stages-screen[data-enter="next"] .realm-backdrop {
  animation-name: backdrop-next;
  animation-duration: 0.9s;
}
.stages-screen[data-enter="prev"] .realm-backdrop {
  animation-name: backdrop-prev;
  animation-duration: 0.9s;
}
.realm-cartouche {
  animation: cartouche-in 0.7s cubic-bezier(0.2, 0.8, 0.25, 1) 0.12s backwards;
}
.realm-dock {
  animation: dock-in 0.55s cubic-bezier(0.2, 0.8, 0.25, 1) 0.08s backwards;
}
/* Turning to another realm, the bars stay where they are. */
.stages-screen[data-enter] .realm-dock,
.stages-screen[data-enter] .menu-topbar {
  animation: none;
}
#app > main.stages-screen[data-enter] {
  animation: none;
}
.realm-path-reveal {
  animation: path-draw 1.15s cubic-bezier(0.45, 0.05, 0.35, 1) 0.2s forwards;
}
.stage-node {
  animation: node-stamp 0.6s cubic-bezier(0.2, 0.9, 0.3, 1.2) backwards;
  animation-delay: calc(0.25s + var(--i, 0) * 110ms);
}
.stage-node-name {
  animation: rise-in 0.45s cubic-bezier(0.22, 0.75, 0.3, 1) backwards;
  animation-delay: calc(0.45s + var(--i, 0) * 110ms);
}
.stage-node:hover:not(:disabled)::after,
.stage-node:focus-visible::after {
  animation: node-sheen 0.8s ease-out;
}
.stage-ripple {
  animation: fade-in 0.4s ease 1.5s backwards;
}
.stage-ripple::before,
.stage-ripple::after {
  animation: sonar 2.6s cubic-bezier(0.2, 0.6, 0.35, 1) infinite;
}
.stage-ripple::after {
  animation-delay: 1.3s;
}
.stage-pennant {
  animation:
    pennant-drop 0.6s cubic-bezier(0.2, 0.9, 0.3, 1.3) 1.4s backwards,
    pennant-bob 2.6s ease-in-out 2s infinite;
}
.home-seals .realm-seal {
  animation: rise-in 0.5s cubic-bezier(0.22, 0.75, 0.3, 1) backwards;
}
.home-seals .realm-seal:nth-child(1) {
  animation-delay: 0.34s;
}
.home-seals .realm-seal:nth-child(2) {
  animation-delay: 0.4s;
}
.home-seals .realm-seal:nth-child(3) {
  animation-delay: 0.46s;
}
.home-seals .realm-seal:nth-child(4) {
  animation-delay: 0.52s;
}
.home-seals .realm-seal:nth-child(5) {
  animation-delay: 0.58s;
}
.portal-flash.lit::before {
  animation: flash-bloom 0.75s cubic-bezier(0.2, 0.7, 0.3, 1) forwards;
}
.portal-flash.lit::after {
  animation: flash-veil 0.75s ease-out forwards;
}