/* One Ticket page motion - Spaceship-inspired continuity between navigations.
   Soft load tone, then a quick reveal. Respects prefers-reduced-motion. */
@import url('./ot-layout.css');

@view-transition {
  navigation: auto;
}

/* The header is the same header on all three of these pages, so it is taken
   out of the root snapshot and given a name of its own. Named, it is matched
   old-to-new and left alone; unnamed, it was inside the crossfade that blurs
   the whole page, so the one element that does not change was the most
   obvious thing changing. This is what makes a navigation read as the same
   page rather than a new one. */
.ot-header {
  view-transition-name: ot-header;
}

/* The placeholder holds the same name while the component is still mounting
   (see ot-layout.css). Only one of the two is ever in the document, so the
   name is never claimed twice, which would make the browser drop the whole
   transition silently. */

::view-transition-old(root) {
  animation: ot-vt-out 280ms cubic-bezier(0.4, 0, 0.2, 1) both;
}
::view-transition-new(root) {
  animation: ot-vt-in 420ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes ot-vt-out {
  from { opacity: 1; filter: blur(0); }
  to { opacity: 0; filter: blur(4px); }
}
@keyframes ot-vt-in {
  from { opacity: 0; filter: blur(6px); }
  to { opacity: 1; filter: blur(0); }
}

.ot-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 2px;
  width: 0;
  z-index: 10001;
  pointer-events: none;
  background: linear-gradient(90deg, var(--ot-accent) 0%, #8b9cff 55%, var(--ot-link-hover) 100%);
  box-shadow: 0 0 12px rgba(91, 107, 232, 0.45);
  opacity: 0;
  transition: width 0.45s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.2s ease;
}
.ot-progress.is-active { opacity: 1; }
.ot-progress.is-done {
  width: 100% !important;
  opacity: 0;
  transition: width 0.18s ease, opacity 0.35s ease 0.1s;
}

.ot-veil {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(ellipse 55% 45% at 50% 42%, var(--ot-surface-2) 0%, var(--ot-bg) 68%);
  opacity: 1;
  visibility: visible;
  transition:
    opacity 0.48s cubic-bezier(0.22, 1, 0.36, 1),
    visibility 0.48s linear;
}
.ot-veil.is-leaving {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.22s ease, visibility 0.22s linear;
}
.ot-veil.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.ot-veil-stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}

.ot-veil-mark {
  position: relative;
  width: 46px;
  height: 32px;
  background: linear-gradient(135deg, var(--ot-accent), var(--ot-link));
  border-radius: 8px;
  transform: rotate(-8deg);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 28px rgba(91, 107, 232, 0.35);
  animation: ot-mark-pulse 1.1s cubic-bezier(0.45, 0, 0.2, 1) infinite;
}
.ot-veil-mark::before,
.ot-veil-mark::after {
  content: "";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 11px;
  height: 11px;
  background: var(--ot-bg);
  border-radius: 50%;
}
.ot-veil-mark::before { left: -5px; }
.ot-veil-mark::after { right: -5px; }
.ot-veil-mark span {
  font-weight: 900;
  font-size: 17px;
  color: #ffffff;
  font-style: italic;
  font-family: 'Figtree', system-ui, sans-serif;
  line-height: 1;
}

@keyframes ot-mark-pulse {
  0%, 100% { transform: rotate(-8deg) scale(1); opacity: 1; }
  50% { transform: rotate(-8deg) scale(1.06); opacity: 0.88; }
}

/* `backwards`, not `both`. page-motion.js puts this class on every <main>, and
   ot-rise ends on transform: translateY(0) - with a forwards fill that identity
   transform is left applied for the life of the page, which makes <main> the
   containing block for every position:fixed descendant. Bottom bars inside it
   then pin to the bottom of the content, not the viewport: the Orders select
   bar sat 184px short of the bottom, above the footer.

   `backwards` still applies the from-frame during animation-delay, so the
   staggered children do not flash in before their turn - the only thing it
   drops is the resting state after the animation, which is the element's own
   (opacity 1, no transform) anyway. The exit animation keeps `both`: there the
   end state should persist while the page navigates away. */
.ot-page-enter {
  animation: ot-rise 0.58s cubic-bezier(0.22, 1, 0.36, 1) backwards;
}
.ot-page-enter-delay-1 { animation-delay: 0.05s; }
.ot-page-enter-delay-2 { animation-delay: 0.12s; }
.ot-page-enter-delay-3 { animation-delay: 0.2s; }

@keyframes ot-rise {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

html.ot-exiting .ot-page-enter {
  animation: ot-sink 0.22s cubic-bezier(0.4, 0, 1, 1) both;
}
@keyframes ot-sink {
  from { opacity: 1; transform: translateY(0); }
  to { opacity: 0; transform: translateY(-8px); }
}

/* In-page wait module - save / delete / publish while staying on the page. */
.ot-wait {
  position: fixed;
  inset: 0;
  z-index: 10060;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(4, 8, 20, 0.62);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  opacity: 1;
  visibility: visible;
  transition: opacity 0.2s ease, visibility 0.2s linear;
}
.ot-wait.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.ot-wait-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  min-width: min(100%, 220px);
  max-width: 320px;
  padding: 28px 30px 24px;
  background: var(--ot-surface-2);
  border: 1px solid var(--ot-border-strong);
  border-radius: 16px;
  box-shadow: 0 22px 55px rgba(0, 0, 0, 0.45);
  text-align: center;
}
.ot-wait-msg {
  color: var(--ot-text);
  font-size: 15px;
  font-weight: 700;
  font-family: 'Figtree', system-ui, sans-serif;
  line-height: 1.35;
}
.ot-wait-sub {
  color: var(--ot-muted);
  font-size: 12.5px;
  font-weight: 500;
  font-family: 'Figtree', system-ui, sans-serif;
  margin-top: -6px;
  line-height: 1.4;
}
.ot-wait-bar {
  width: 120px;
  height: 3px;
  border-radius: 999px;
  background: var(--ot-border);
  overflow: hidden;
  margin-top: 2px;
}
.ot-wait-bar > span {
  display: block;
  height: 100%;
  width: 40%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--ot-accent), var(--ot-link));
  animation: ot-wait-slide 1.05s cubic-bezier(0.45, 0, 0.2, 1) infinite;
}
@keyframes ot-wait-slide {
  0% { transform: translateX(-120%); }
  100% { transform: translateX(320%); }
}
html.ot-wait-open,
html.ot-wait-open body {
  overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  .ot-veil,
  .ot-progress,
  .ot-page-enter,
  .ot-veil-mark,
  .ot-wait,
  .ot-wait-bar > span,
  html.ot-exiting .ot-page-enter {
    animation: none !important;
    transition: opacity 0.15s ease !important;
  }
  .ot-veil-mark { transform: rotate(-8deg); }
  .ot-wait-bar > span {
    width: 100%;
    transform: none;
    opacity: 0.85;
  }
  @keyframes ot-rise {
    from { opacity: 0; }
    to { opacity: 1; }
  }
}

/* Custom select chevron - keep the arrow inset and centered on every dropdown,
   even when page styles use the background shorthand (which would otherwise
   wipe background-image). */
select {
  -webkit-appearance: none !important;
  appearance: none !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1.5 1.75L6 6.25L10.5 1.75' stroke='%238fa0bd' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 12px center !important;
  background-size: 12px 8px !important;
  padding-right: 36px !important;
}