/* The smaller needle and thread hover independently inside the existing 54px touch target. */
.landing-stack-toggle[data-stack-state="working"] {
  --stack-firefly-duration: 3.6s;
}

.landing-stack-toggle:is([data-stack-state="listening"], .is-listening) {
  --stack-firefly-duration: 2.8s;
}

/* stylelint-disable declaration-no-important -- The legacy launcher sets these properties with !important, including its pressed and expanded states. */
.landing-stack-anchor > .landing-stack-toggle {
  display: grid;
  grid-template-rows: minmax(0, 1fr);
  place-items: center;
  overflow: visible !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 10px !important;
  background: transparent !important;
  box-shadow: none !important;
  filter: none !important;
  -webkit-tap-highlight-color: transparent;
  position: relative !important;
  inset: auto !important;
  width: 64px !important;
  height: 64px !important;
  min-width: 64px !important;
  min-height: 64px !important;
  transform: none !important;
  animation: none !important;
}
/* stylelint-enable declaration-no-important */

.landing-stack-anchor > .landing-stack-toggle::before,
.landing-stack-anchor > .landing-stack-toggle::after {
  content: none;
}

.landing-stack-anchor > .landing-stack-toggle:focus-visible {
  outline: 1px solid #eed29a;
  outline-offset: 3px;
}

.landing-stack-anchor {
  position: relative;
  z-index: 2;
  width: 64px;
  height: 64px;
  flex: 0 0 64px;
}

.landing-stack-anchor[hidden],
body:is(.drawer-open, .drawer-closing, .app-menu-open, .utility-access-open) .landing-stack-anchor {
  visibility: hidden;
  pointer-events: none;
}

.stack-launcher-artwork {
  position: relative;
  display: grid;
  width: 38px;
  height: 56px;
  place-items: center;
  pointer-events: none;
}

.landing-stack-anchor[data-teleport="startup"] .stack-launcher-artwork,
.landing-stack-anchor[data-teleport="away"] .stack-launcher-artwork {
  visibility: hidden;
  opacity: 0;
}

.landing-stack-anchor[data-teleport="departing"] .stack-launcher-artwork {
  visibility: hidden;
  opacity: 0;
}

.landing-stack-anchor[data-teleport="returning"] .stack-launcher-artwork {
  animation: stack-launcher-launch 2100ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.landing-stack-anchor[data-teleport="launching"] .stack-launcher-artwork {
  animation: stack-launcher-launch var(--backsplash-reveal-duration, 2650ms) ease var(--landing-brand-delay, 2.2s) both;
}

@keyframes stack-launcher-launch {
  from { opacity: 0; filter: brightness(2.05) drop-shadow(0 0 8px #ffe08a) drop-shadow(0 0 18px rgb(224 125 31 / 76%)); }
  to { opacity: 1; filter: none; }
}

.stack-launcher-artwork > picture {
  display: contents;
}

/* The departure copy sits above the Stack room while that room opens. Its
   opacity only moves downward and its glow only expands, preventing the
   launcher SVG and fireflies from creating a pulse or flicker. */
.stack-teleport-ghost {
  position: fixed;
  z-index: 190;
  display: grid;
  place-items: center;
  pointer-events: none;
  transform-origin: center;
  isolation: isolate;
  will-change: opacity, transform, filter;
  animation: stack-teleport-ghost-depart 2100ms cubic-bezier(.32,0,.67,1) both;
}

.stack-teleport-ghost::before {
  content: "";
  position: absolute;
  inset: -24px;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(circle,
    rgb(255 235 172 / 82%) 0%,
    rgb(242 166 55 / 48%) 24%,
    rgb(176 53 43 / 24%) 52%,
    transparent 74%);
  opacity: .05;
  transform: scale(.42);
  animation: stack-teleport-glow-encompass 2100ms cubic-bezier(.18,.62,.28,1) both;
}

.stack-teleport-ghost img {
  display: block;
  width: auto;
  height: 100%;
  max-width: none;
  object-fit: contain;
}

@keyframes stack-teleport-ghost-depart {
  0% { opacity: 1; transform: scale(1); filter: brightness(1) drop-shadow(0 0 2px rgb(255 219 141 / 55%)); }
  28% { opacity: .91; transform: scale(1.018); filter: brightness(1.18) drop-shadow(0 0 7px rgb(255 218 132 / 68%)); }
  58% { opacity: .65; transform: scale(1.045); filter: brightness(1.43) drop-shadow(0 0 12px rgb(242 153 46 / 74%)); }
  80% { opacity: .31; transform: scale(1.073); filter: brightness(1.72) drop-shadow(0 0 18px rgb(222 102 37 / 66%)); }
  100% { opacity: 0; transform: scale(1.1); filter: brightness(2.05) drop-shadow(0 0 24px rgb(255 210 112 / 72%)); }
}

@keyframes stack-teleport-glow-encompass {
  from { opacity: .05; transform: scale(.42); filter: blur(2px); }
  to { opacity: 1; transform: scale(1.12); filter: blur(5px); }
}

/* Calendar glow colors, softened to follow the transparent artwork. */
.stack-launcher-needle {
  display: block;
  width: auto;
  height: 56px;
  max-width: none;
  object-fit: contain;
  filter: drop-shadow(0 0 2px rgb(255 219 141 / 55%))
    drop-shadow(0 0 5px rgb(240 142 31 / 38%))
    drop-shadow(0 0 9px rgb(170 70 8 / 24%));
  transition: filter 180ms ease;
}

.stack-launcher-fireflies {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.stack-launcher-fireflies i {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: #fff0ba;
  box-shadow: 0 0 3px 1px rgb(247 205 112 / 70%), 0 0 7px rgb(224 157 49 / 32%);
  opacity: 0;
  animation: stack-needle-firefly var(--stack-firefly-duration, 7s) ease-in-out infinite;
}

.stack-launcher-fireflies i:nth-child(2) {
  width: 1.4px;
  height: 1.4px;
  animation-delay: -3.8s;
  animation-direction: reverse;
}

.landing-stack-toggle:is(:hover, :focus-visible, .is-pressing, .is-hold-active) .stack-launcher-needle,
.landing-stack-toggle[aria-expanded="true"] .stack-launcher-needle {
  filter: drop-shadow(0 0 2px rgb(255 219 141 / 70%))
    drop-shadow(0 0 6px rgb(240 142 31 / 46%))
    drop-shadow(0 0 10px rgb(170 70 8 / 27%));
}

.landing-stack-toggle:is([data-stack-state="listening"], .is-listening) .stack-launcher-needle {
  filter: drop-shadow(0 0 2px rgb(255 219 141 / 80%))
    drop-shadow(0 0 6px rgb(240 142 31 / 55%))
    drop-shadow(0 0 11px rgb(170 70 8 / 30%));
}

@keyframes stack-needle-firefly {
  0%, 100% {
    opacity: 0;
    transform: translate(-10px, 18px) scale(0.6);
  }

  18% {
    opacity: 0.7;
    transform: translate(-13px, 5px) scale(0.9);
  }

  38% {
    opacity: 0.2;
    transform: translate(5px, -6px) scale(0.65);
  }

  57% {
    opacity: 0.85;
    transform: translate(10px, -21px) scale(1);
  }

  78% {
    opacity: 0.35;
    transform: translate(-3px, -12px) scale(0.75);
  }
}

@media (prefers-reduced-motion: reduce) {
  .stack-launcher-artwork,
  .stack-launcher-fireflies i,
  .stack-teleport-ghost,
  .stack-teleport-ghost::before {
    animation: none !important; /* stylelint-disable-line declaration-no-important -- Includes teleport states. */
  }

  .stack-teleport-ghost { display: none; }

  .stack-launcher-needle {
    transition: none;
  }

  .stack-launcher-fireflies {
    display: none;
  }
}