.flying-button {
  --fly-bg: #27272a;
  --fly-ink: #f5f5f5;
  --fly-pod: #18181b;
  --fly-glow: #8ec5ff;
  --fly-thrust: 0;
  --fly-h: 44px;
  --fly-px: 22px;
  --fly-fs: 14px;
  --fly-scale: 1;
  --fly-ramp: #25222b;

  position: relative;
  width: 100%;
  height: 100%;
  min-height: 240px;
  overflow: hidden;
  isolation: isolate;
  touch-action: manipulation;
}

.flying-button[data-carry] {
  cursor: none;
}

.flying-button__ramp {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  fill: none;
  pointer-events: none;
}

.flying-button__ramp-body {
  stroke: var(--fly-ramp);
  stroke-linejoin: round;
}

.flying-button__ramp-edge {
  stroke: color-mix(in srgb, var(--fly-ramp) 72%, #fff);
  stroke-width: 1.5;
  stroke-linejoin: round;
}

.flying-button[data-theme='light'] .flying-button__ramp-edge {
  stroke: color-mix(in srgb, var(--fly-ramp) 82%, #000);
}

.flying-button[data-dragging]:not([data-carry]) {
  cursor: grabbing;
}

.flying-button__smoke {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
  background: transparent;
}

.flying-button__craft {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--fly-h);
  margin: 0;
  padding: 0 var(--fly-px);
  border: 0;
  border-radius: var(--fly-radius, calc(var(--fly-h) / 2));
  background: var(--fly-bg);
  color: var(--fly-ink);
  font-family: inherit;
  font-size: var(--fly-fs);
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.01em;
  white-space: nowrap;
  cursor: pointer;
  outline: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: none;
  transform-origin: 50% 50%;
  will-change: transform;
  visibility: hidden;
}

.flying-button[data-ready] .flying-button__craft {
  visibility: visible;
}

.flying-button[data-trigger='hover'] .flying-button__craft {
  cursor: default;
}

.flying-button[data-carry] .flying-button__craft {
  pointer-events: none;
  cursor: none;
}

.flying-button__craft:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--fly-ink) 60%, transparent);
  outline-offset: 3px;
}

.flying-button__face {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0) 46%),
    linear-gradient(
      0deg,
      color-mix(in srgb, var(--fly-glow) calc(var(--fly-thrust) * 34%), transparent),
      transparent 62%
    );
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    inset 0 -1px 0 rgba(0, 0, 0, 0.25);
  pointer-events: none;
}

.flying-button[data-theme='light'] .flying-button__face {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0) 50%),
    linear-gradient(
      0deg,
      color-mix(in srgb, var(--fly-glow) calc(var(--fly-thrust) * 30%), transparent),
      transparent 62%
    );
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, 0.06),
    inset 0 -1px 0 rgba(0, 0, 0, 0.08);
}

.flying-button__label {
  position: relative;
}

.flying-button__craft[data-hover] {
  filter: brightness(1.12);
}

.flying-button[data-theme='light'] .flying-button__craft[data-hover] {
  filter: brightness(0.97);
}

.flying-button__craft[data-pressed] .flying-button__label {
  transform: scale(0.96);
}

.flying-button__pod {
  position: absolute;
  top: calc(100% - 3px * var(--fly-scale));
  width: calc(14px * var(--fly-scale));
  height: calc(8px * var(--fly-scale));
  border-radius: 2px 2px 5px 5px;
  background: linear-gradient(180deg, var(--fly-pod), color-mix(in srgb, var(--fly-pod) 80%, #000));
  transform: translateX(-50%);
  z-index: -1;
  pointer-events: none;
}

.flying-button__pod::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 0;
  width: calc(7px * var(--fly-scale));
  height: calc(2px * var(--fly-scale));
  border-radius: 2px 2px 1px 1px;
  transform: translateX(-50%);
  background: color-mix(in srgb, var(--fly-glow) calc(var(--fly-thrust) * 100%), #3f3f46);
  box-shadow: 0 1px 4px color-mix(in srgb, var(--fly-glow) calc(var(--fly-thrust) * 90%), transparent);
}

.flying-button[data-theme='light'] .flying-button__pod::after {
  background: color-mix(in srgb, var(--fly-glow) calc(var(--fly-thrust) * 100%), #52525b);
}

.flying-button__cursor {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 3;
  width: 20px;
  height: 28px;
  pointer-events: none;
  display: none;
  will-change: transform;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.28));
}

.flying-button[data-carry] .flying-button__cursor {
  display: block;
}

.ticket-fly {
  position: relative;
  height: 440px;
  margin: 4px -8px 8px;
}

.letter-fly {
  position: relative;
  height: 300px;
  margin: 8px -8px 4px;
}

.flying-button--lime {
  --fly-bg: #c6ee3a;
  --fly-ink: #14261e;
  --fly-glow: #e8ff6a;
  --fly-pod: #3f6f14;
  --fly-ramp: #6fa032;
}

.flying-button--lime .flying-button__craft {
  background:
    linear-gradient(
      125deg,
      #f7ff9a 0%,
      #ddf24a 22%,
      #c6ee3a 46%,
      #a8dc28 68%,
      #eaff70 86%,
      #d4f25a 100%
    );
  background-size: 240% 240%;
  animation: fly-sheen 5.5s ease-in-out infinite;
  box-shadow:
    0 0 18px rgba(232, 255, 106, .55),
    0 0 42px rgba(166, 204, 58, .42),
    0 12px 28px rgba(198, 238, 58, .28),
    inset 0 1px 0 rgba(255, 255, 255, .55);
}

.flying-button--lime .flying-button__face {
  background:
    linear-gradient(
      115deg,
      rgba(255, 255, 255, 0.62),
      transparent 38%,
      rgba(232, 255, 106, 0.45) 56%,
      transparent 74%,
      rgba(255, 255, 255, 0.22)
    ),
    linear-gradient(180deg, rgba(255, 255, 255, 0.28), transparent 52%),
    linear-gradient(
      0deg,
      color-mix(in srgb, var(--fly-glow) calc(var(--fly-thrust) * 48%), transparent),
      transparent 62%
    );
  background-size: 180% 100%, 100% 100%, 100% 100%;
  animation: fly-sheen 4.2s linear infinite;
}

.flying-button--lime .flying-button__craft[data-hover] {
  filter: brightness(1.1) saturate(1.12);
}

.flying-button--teal {
  --fly-bg: #14b8a6;
  --fly-ink: #ecfeff;
  --fly-glow: #99f6e4;
  --fly-pod: #115e59;
  --fly-ramp: #0f766e;
}

.flying-button--teal .flying-button__craft {
  background:
    linear-gradient(
      125deg,
      #7ef0e4 0%,
      #2dd4bf 22%,
      #14b8a6 46%,
      #06b6d4 68%,
      #67e8f9 86%,
      #5eead4 100%
    );
  background-size: 240% 240%;
  animation: fly-sheen 5.5s ease-in-out infinite;
  box-shadow:
    0 10px 28px rgba(20, 184, 166, 0.38),
    inset 0 1px 0 rgba(255, 255, 255, 0.42);
}

.flying-button--teal .flying-button__face {
  background:
    linear-gradient(
      115deg,
      rgba(255, 255, 255, 0.5),
      transparent 38%,
      rgba(103, 232, 249, 0.32) 56%,
      transparent 74%,
      rgba(255, 255, 255, 0.18)
    ),
    linear-gradient(180deg, rgba(255, 255, 255, 0.2), transparent 52%),
    linear-gradient(
      0deg,
      color-mix(in srgb, var(--fly-glow) calc(var(--fly-thrust) * 42%), transparent),
      transparent 62%
    );
  background-size: 180% 100%, 100% 100%, 100% 100%;
  animation: fly-sheen 4.2s linear infinite;
}

.flying-button--teal .flying-button__craft[data-hover] {
  filter: brightness(1.08) saturate(1.08);
}

@keyframes fly-sheen {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 45%; }
  100% { background-position: 0% 50%; }
}

body:has(.flying-button[data-carry]) .cursor {
  opacity: 0;
}

@media (max-width: 640px) {
  .ticket-fly { height: 360px; }
  .letter-fly { height: 260px; }
}

@media (prefers-reduced-motion: reduce) {
  .flying-button--lime .flying-button__craft,
  .flying-button--lime .flying-button__face,
  .flying-button--teal .flying-button__craft,
  .flying-button--teal .flying-button__face {
    animation: none;
    background-position: 40% 50%;
  }
}