/* Travel arriving. The sector is dealt to the middle of the screen, held there
   long enough to be read, and then flies to the slot it lives in from then on.
   The reveal's own entrance rules carry two ids and four classes, and they are
   still on the screen when this runs — these have to outrank them. */
#travel-veil {
  position: fixed; inset: 0; z-index: 7; pointer-events: none;
  background: radial-gradient(circle at 50% 46%, rgba(3,6,10,.55) 0%, rgba(3,6,10,.86) 70%);
  opacity: 0; transition: opacity .45s ease-out;
}
#travel-veil.on { opacity: 1; }

/* Placed over the slot it came out of and moved by transform alone, so the end
   of the flight is the slot itself rather than a guess at where it is. */
.travel-hero {
  position: fixed; z-index: 9; pointer-events: none;
  transform-origin: 50% 50%;
  filter: drop-shadow(0 0 34px rgba(125,211,252,.55));
}
.travel-hero .mod-sector {
  width: 100%; height: 100%; cursor: default;
  border-color: var(--accent);
  animation: hero-in .45s cubic-bezier(.15, .9, .25, 1.1) backwards;
}
/* Dropping back into a strip of small cards: the glow goes with the size. */
.travel-hero.flying { filter: drop-shadow(0 0 10px rgba(125,211,252,.3)); transition-property: transform, filter; }

@keyframes hero-in {
  0% { opacity: 0; transform: scale(.55); filter: brightness(3); }
  60% { opacity: 1; }
  100% { opacity: 1; transform: none; filter: brightness(1); }
}

/* The light that reads across a card as it comes on. Over the name and the lock
   both: it is the card being lit, not something behind it. */
.ms-sweep {
  position: absolute; inset: 0; z-index: 2; opacity: 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 36%,
                                      rgba(198,242,255,.85) 50%,
                                      transparent 64%);
}
.travel-hero .ms-sweep { animation: sector-sweep 1.1s ease-out .25s backwards; }

/* Nothing in the bar until the card that flew is home: the strip filling in
   behind the flight would give away where it was going. */
#mod-sectors.waiting .mod-sector { opacity: 0; }

#mod-sectors.intro .mod-sector:not(.hero) {
  animation: sector-arrive .5s cubic-bezier(.2, .9, .25, 1) backwards;
  animation-delay: calc(var(--i, 0) * .1s);
}
@keyframes sector-arrive {
  0% { opacity: 0; transform: translateY(-14px) scale(.9); filter: brightness(2.4); }
  60% { opacity: 1; transform: translateY(1px) scale(1.03); }
  100% { opacity: 1; transform: none; filter: brightness(1); }
}

/* The one that flew is already in place: it answers by lighting, not by moving. */
#mod-sectors.intro .mod-sector.hero { animation: hero-land .55s ease-out; }
#mod-sectors.intro .mod-sector.hero .ms-sweep { animation: sector-sweep .6s ease-out; }
@keyframes hero-land {
  0% { box-shadow: 0 0 30px rgba(125,211,252,.75); filter: brightness(1.6); }
  100% { box-shadow: none; filter: brightness(1); }
}

@keyframes sector-sweep {
  from { opacity: 1; transform: translateX(-115%); }
  to { opacity: 0; transform: translateX(115%); }
}

#modules #btn-select.unlocking { animation: sel-open .95s ease-out; }
@keyframes sel-open {
  0% { border-color: #fff; color: #fff; background: rgba(255,255,255,.38); }
  35% { border-color: var(--accent); background: rgba(125,211,252,.3); }
  100% { border-color: var(--accent); background: rgba(125,211,252,.08); }
}

/* The ring the button lets go of as it opens. */
#modules #btn-select.unlocking::after {
  content: ''; position: absolute; inset: -3px; pointer-events: none;
  border: 1px solid var(--accent);
  animation: sel-ring .95s ease-out forwards;
}
@keyframes sel-ring {
  from { transform: scale(1); opacity: .85; }
  to { transform: scale(1.55); opacity: 0; }
}

#modules #btn-select.unlocking .ico { animation: sel-key .95s ease-out; }
@keyframes sel-key {
  0% { transform: scale(0) rotate(-120deg); }
  55% { transform: scale(1.55) rotate(12deg); }
  100% { transform: none; }
}

#modules #btn-select-new.pop { animation: sel-new .55s cubic-bezier(.2, .9, .25, 1); }
@keyframes sel-new {
  0% { transform: scale(0); }
  62% { transform: scale(1.4); }
  100% { transform: none; }
}

/* A sector opening: the seal strains, gives, and the ground the card was
   keeping covered comes up in colour under the lock falling off it. Held to
   #mod-sectors so the reveal's entrance rules do not outrank it. */
#mod-sectors .mod-sector.cracking { animation: seal-strain .55s ease-in-out; }
@keyframes seal-strain {
  0%, 100% { transform: none; }
  18% { transform: translateX(-1.5px); }
  38% { transform: translateX(1.5px); }
  58% { transform: translateX(-1px); }
  78% { transform: translateX(1px); }
}
#mod-sectors .mod-sector.cracking .ico { animation: lock-strain .55s ease-in-out; }
@keyframes lock-strain {
  0%, 100% { transform: translate(-50%, -50%); opacity: .5; }
  30% { transform: translate(-50%, -50%) rotate(-10deg) scale(1.15); opacity: .9; }
  65% { transform: translate(-50%, -50%) rotate(10deg) scale(1.15); opacity: .9; }
}

#mod-sectors .mod-sector.opening {
  border-color: var(--accent);
  animation: sector-open 1.1s cubic-bezier(.2, .9, .25, 1);
}
@keyframes sector-open {
  0% { transform: scale(1); filter: brightness(2.8); box-shadow: 0 0 34px rgba(125,211,252,.9); }
  24% { transform: scale(1.09); box-shadow: 0 0 26px rgba(125,211,252,.75); }
  100% { transform: none; filter: brightness(1); box-shadow: none; }
}
#mod-sectors .mod-sector.opening .ms-name { animation: sector-read .8s ease-out; }
@keyframes sector-read {
  0% { opacity: .55; }
  100% { opacity: 1; }
}
#mod-sectors .mod-sector.opening .ms-sweep { animation: sector-sweep .85s ease-out .05s; }

/* The lock is the thing being taken away, so it leaves rather than vanishes. */
#mod-sectors .mod-sector.opening .ico { animation: lock-break .55s ease-in forwards; }
@keyframes lock-break {
  0% { transform: translate(-50%, -50%); opacity: .9; }
  28% { transform: translate(-50%, -70%) scale(1.4) rotate(-14deg); opacity: 1; filter: brightness(3); }
  100% { transform: translate(-50%, 60%) scale(.55) rotate(42deg); opacity: 0; }
}

/* The refusal's line, answered: same place, the other colour. */
#mod-sector-note.good {
  border-left-color: var(--accent);
  background: rgba(125,211,252,.1); color: var(--accent);
  animation: note-open .45s cubic-bezier(.2, .9, .25, 1);
}
@keyframes note-open {
  0% { opacity: 0; transform: translateY(-4px); }
  100% { opacity: 1; transform: none; }
}