/* Akistata (akistatafights.lt): homepage styles */

:root {
  --red: #c4161c;
  --red-hot: #e1251b;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  /* the logo is 1190 x 1318 (w:h 0.9): the vh terms keep logo + button inside the screen */
  --logo: min(56vh, 78vw, 600px);
  --gap: clamp(10px, 3.2vh, 34px);
  color-scheme: dark;
}
@supports (height: 1svh) {
  :root { --logo: min(56svh, 78vw, 600px); --gap: clamp(10px, 3.2svh, 34px); }
}
/* portrait phones: the logo fills most of the width */
@media (max-aspect-ratio: 4/5) {
  :root { --logo: min(90vw, 52vh, 600px); }
  @supports (height: 1svh) { :root { --logo: min(90vw, 52svh, 600px); } }
}
/* phones in landscape */
@media (max-height: 520px) and (min-aspect-ratio: 5/4) {
  :root { --logo: min(63vh, 60vw); --gap: 8px; }
  @supports (height: 1svh) { :root { --logo: min(63svh, 60vw); } }
}
/* very large screens (2560 px and up): the brief's 600 px cap looks small there, so allow more.
   Owner decision: delete this block to keep 600 px everywhere. */
@media (min-width: 2000px) and (min-height: 1200px) {
  :root { --logo: min(50vh, 78vw, 720px); --gap: clamp(10px, 3vh, 44px); }
}

*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: #000;
}

body {
  color: #eee;
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* ------------------------------------------------------------------ background */

/* Static backdrop: paints before WebGL's first frame (CSS only, no download). */
.bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-color: #040303;
  background-image:
    radial-gradient(64% 30% at 50% 104%, rgba(255, 170, 150, .85), rgba(255, 90, 42, .55) 38%, rgba(140, 28, 10, .18) 70%, rgba(0, 0, 0, 0) 92%),
    radial-gradient(40% 26% at 6% 102%, rgba(255, 120, 70, .35), rgba(0, 0, 0, 0) 80%),
    radial-gradient(40% 26% at 94% 102%, rgba(255, 120, 70, .35), rgba(0, 0, 0, 0) 80%),
    linear-gradient(180deg, rgba(0, 0, 0, .97) 0%, rgba(0, 0, 0, .9) 40%, rgba(0, 0, 0, .35) 100%),
    repeating-linear-gradient(0deg, rgba(0, 0, 0, .7) 0 2px, rgba(255, 255, 255, .05) 2px 3px, rgba(0, 0, 0, 0) 3px 33.3vh),
    linear-gradient(180deg, #232428, #141416);
}
/* No JavaScript or no WebGL: a still frame rendered by the shader itself (tools/make_poster.sh),
   over the same CSS glow. It is only downloaded in these two cases. */
.no-js .bg,
.no-webgl .bg {
  background-image:
    url("../assets/poster.jpg"),
    radial-gradient(64% 30% at 50% 104%, rgba(255, 170, 150, .85), rgba(255, 90, 42, .55) 38%, rgba(0, 0, 0, 0) 92%),
    linear-gradient(180deg, #030202, #120806);
  background-size: cover, auto, auto;
  background-position: 50% 100%, center, center;
  background-repeat: no-repeat;
}

@media (max-aspect-ratio: 3/4) {
  .no-js .bg,
  .no-webgl .bg { background-image: url("../assets/poster-portrait.jpg"), linear-gradient(180deg, #030202, #120806); background-size: cover, auto; }
}

.fx {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 1;
  opacity: 0;
  transition: opacity 1.4s cubic-bezier(.2, .7, .2, 1);
}
.fx.is-on { opacity: 1; }
.no-webgl .fx, .no-js .fx { display: none; }

/* ------------------------------------------------------------------ hero */

.hero {
  position: relative;
  z-index: 2;
  height: 100vh;
  height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--gap);
  padding:
    max(14px, env(safe-area-inset-top))
    max(16px, env(safe-area-inset-right))
    max(18px, env(safe-area-inset-bottom))
    max(16px, env(safe-area-inset-left));
}
.poster .hero { visibility: hidden; }   /* ?poster: background only (tools/make_poster.sh) */

/* ------------------------------------------------------------------ logo
   Every layer is its own sibling with its own transform (set by js/app.js). Nothing masked or
   blended sits inside a transformed parent, so the artwork is rasterised at full device
   resolution and stays sharp on retina screens. */

.logo {
  position: relative;
  flex: none;
  margin: 0;
  width: var(--logo);
  aspect-ratio: 1190 / 1318;
  perspective: 1100px;
  line-height: 0;
  color: #ddd;
  font-size: 1rem;          /* keeps the alt text readable if the image fails */
}

.logo__layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  transform-origin: 50% 50%;
  will-change: transform;
  backface-visibility: hidden;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: none;
}
.logo__img { line-height: 1.2; }
.logo__cast { opacity: .7; }
.logo__shade { opacity: .97; }
/* shade + cast are drawn on a canvas 150 logo-px larger on every side (tools/make_logo_layers.py),
   so their blur fades out instead of being cut off at the logo's box */
.logo__cast,
.logo__shade {
  inset: auto;
  left: -12.605%;
  top: -11.381%;
  width: 125.21%;
  height: 122.762%;
}
.logo__glow {
  mix-blend-mode: screen;
  opacity: .55;
}
/* firelight from below on the chrome; js/app.js ties its opacity to the fire flicker */
.logo__fire,
.logo__sheen {
  -webkit-mask: url("../assets/akistata-mask.webp") center / 100% 100% no-repeat;
  mask: url("../assets/akistata-mask.webp") center / 100% 100% no-repeat;
}
.logo__fire {
  background: linear-gradient(0deg, rgba(255, 112, 44, .85) 0%, rgba(255, 96, 36, .42) 24%, rgba(255, 80, 30, 0) 54%);
  mix-blend-mode: overlay;
  opacity: .3;
}
.logo__sheen {
  overflow: hidden;
  mix-blend-mode: overlay;
  opacity: .9;
}
.logo__band {
  position: absolute;
  left: -50%;
  top: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(90deg,
    rgba(255, 255, 255, 0) 38%,
    rgba(255, 255, 255, .16) 45%,
    rgba(255, 255, 255, .5) 48.6%,
    rgba(255, 255, 255, .95) 50%,
    rgba(255, 255, 255, .5) 51.4%,
    rgba(255, 255, 255, .16) 55%,
    rgba(255, 255, 255, 0) 62%);
  will-change: transform;
}

@keyframes glow-pulse {
  0%, 100% { opacity: .38; }
  50% { opacity: .82; }
}

/* ------------------------------------------------------------------ ticket button */

.ticket {
  --cut: 17px;
  --h: clamp(50px, 6.6vh, 62px);
  position: relative;
  flex: none;
  display: inline-flex;
  color: #fff6f2;
  text-decoration: none;
  font-weight: 800;
  font-size: clamp(13px, .32vw + 11px, 16px);
  line-height: 1;
  letter-spacing: .24em;
  text-transform: uppercase;
  border-radius: 3px;
  filter: drop-shadow(0 12px 20px rgba(0, 0, 0, .7)) drop-shadow(0 0 0 rgba(255, 60, 20, 0));
  transition: filter .35s ease, transform .3s cubic-bezier(.2, .8, .2, 1);
  touch-action: manipulation;
}

/* soft red glow behind the plate; breathes gently, flares on hover/focus */
.ticket__halo {
  position: absolute;
  inset: -20px -30px;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(closest-side, rgba(255, 70, 34, .5), rgba(196, 22, 28, .2) 55%, rgba(196, 22, 28, 0));
  opacity: .5;
  transition: opacity .35s ease, transform .35s ease;
}

/* red tapered blades, echoing the bars around "NESTANDARTINĖS KOVOS" in the logo */
.ticket::before,
.ticket::after {
  content: "";
  position: absolute;
  top: 50%;
  width: clamp(26px, 6vw, 92px);
  height: 4px;
  margin-top: -2px;
  background: linear-gradient(90deg, rgba(196, 22, 28, 0), var(--red) 55%, var(--red-hot));
  clip-path: polygon(0 50%, 100% 0, 100% 100%);
  transform-origin: 100% 50%;
  transition: transform .45s cubic-bezier(.2, .8, .2, 1), filter .35s;
}
.ticket::before { right: calc(100% + 12px); }
.ticket::after {
  left: calc(100% + 12px);
  background: linear-gradient(270deg, rgba(196, 22, 28, 0), var(--red) 55%, var(--red-hot));
  clip-path: polygon(100% 50%, 0 0, 0 100%);
  transform-origin: 0 50%;
}

.ticket__plate {
  position: relative;
  display: flex;
  align-items: center;
  gap: .8em;
  height: var(--h);
  padding: 0 2.35em 0 2.05em;
  isolation: isolate;
  overflow: hidden;
  clip-path: polygon(var(--cut) 0, calc(100% - var(--cut)) 0, 100% 50%, calc(100% - var(--cut)) 100%, var(--cut) 100%, 0 50%);
  /* chrome rim */
  background: linear-gradient(180deg, #fdfdfe 0%, #c3c4c9 20%, #67686e 49%, #2a2b2f 51%, #85878d 78%, #ededf0 100%);
}
/* blood-red brushed steel face */
.ticket__plate::before {
  content: "";
  position: absolute;
  inset: 2px;
  z-index: -3;
  clip-path: polygon(calc(var(--cut) - 1px) 0, calc(100% - var(--cut) + 1px) 0, 100% 50%, calc(100% - var(--cut) + 1px) 100%, calc(var(--cut) - 1px) 100%, 0 50%);
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .045) 0 1px, rgba(0, 0, 0, .05) 1px 2px, rgba(0, 0, 0, 0) 2px 4px),
    linear-gradient(180deg, rgba(255, 255, 255, .26) 0%, rgba(255, 255, 255, .04) 46%, rgba(0, 0, 0, .18) 54%, rgba(0, 0, 0, .34) 100%),
    linear-gradient(180deg, #e1251b 0%, #c4161c 48%, #93101a 52%, #6a0a10 100%);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .45);
  transition: filter .35s ease;
}
/* heat glowing up from below (hover / focus) */
.ticket__heat {
  position: absolute;
  inset: 2px;
  z-index: -2;
  pointer-events: none;
  clip-path: polygon(calc(var(--cut) - 1px) 0, calc(100% - var(--cut) + 1px) 0, 100% 50%, calc(100% - var(--cut) + 1px) 100%, calc(var(--cut) - 1px) 100%, 0 50%);
  background:
    radial-gradient(70% 95% at 50% 120%, rgba(255, 214, 150, .9), rgba(255, 136, 56, .5) 45%, rgba(255, 70, 20, 0) 75%),
    linear-gradient(180deg, rgba(255, 170, 90, .18), rgba(255, 140, 60, 0) 45%);
  box-shadow: inset 0 -6px 16px rgba(255, 170, 80, .5), inset 0 1px 0 rgba(255, 230, 200, .55);
  mix-blend-mode: screen;
  opacity: 0;
  transition: opacity .35s ease;
}
/* metallic sheen sweep */
.ticket__plate::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(100deg, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, .5) 47%, rgba(255, 236, 220, .14) 53%, rgba(255, 255, 255, 0) 64%);
  transform: translateX(-110%);
  pointer-events: none;
}
.ticket__icon {
  width: 1.45em;
  height: 1.45em;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linejoin: round;
  filter: drop-shadow(0 1px 0 rgba(0, 0, 0, .5));
}
.ticket__perf { stroke-dasharray: 1.6 2.1; stroke-linecap: round; }
.ticket__label {
  white-space: nowrap;
  padding-top: .08em;
  text-shadow: 0 1px 0 rgba(60, 0, 0, .75), 0 0 14px rgba(0, 0, 0, .25);
  transition: text-shadow .35s ease;
}

/* hover / keyboard focus: lift, heat from below, red glow, sheen sweep, blades extend */
.ticket:hover,
.ticket:focus-visible {
  transform: translateY(-2px);
  filter: drop-shadow(0 14px 22px rgba(0, 0, 0, .65)) drop-shadow(0 0 18px rgba(255, 70, 24, .65));
}
.ticket:hover .ticket__halo,
.ticket:focus-visible .ticket__halo { opacity: 1; transform: scale(1.12); }
.ticket:hover .ticket__heat,
.ticket:focus-visible .ticket__heat { opacity: 1; }
.ticket:hover .ticket__plate::before,
.ticket:focus-visible .ticket__plate::before { filter: brightness(1.14) saturate(1.08); }
.ticket:hover .ticket__label,
.ticket:focus-visible .ticket__label { text-shadow: 0 1px 0 rgba(70, 0, 0, .9), 0 0 16px rgba(255, 190, 120, .8); }
.ticket:hover::before, .ticket:focus-visible::before,
.ticket:hover::after, .ticket:focus-visible::after { transform: scaleX(1.25); filter: brightness(1.25); }

/* focus ring: :focus for older Safari, hidden again for mouse focus where :focus-visible exists */
.ticket:focus { outline: 2px solid #fff; outline-offset: 5px; }
.ticket:focus:not(:focus-visible) { outline: none; }
.ticket:focus-visible { outline: 2px solid #fff; outline-offset: 5px; }

.ticket:active {
  transform: translateY(1px) scale(.985);
  filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .75)) drop-shadow(0 0 10px rgba(255, 60, 20, .45));
  transition-duration: .08s;
}
.ticket:active .ticket__plate::before { filter: brightness(.9); }

/* two names on purpose: hovering adds the second animation without replaying the intro sweep */
@keyframes sheen-intro {
  from { transform: translateX(-110%); }
  to { transform: translateX(110%); }
}
@keyframes sheen-hover {
  from { transform: translateX(-110%); }
  to { transform: translateX(110%); }
}

@media (max-height: 520px) and (min-aspect-ratio: 5/4) {
  .ticket { --h: 46px; --cut: 14px; }
}
@media (min-width: 2000px) and (min-height: 1200px) {
  .ticket { --h: clamp(62px, 5.4vh, 88px); --cut: 22px; font-size: clamp(18px, .66vw + 3px, 25px); }
}
@media (max-width: 360px) {
  .ticket { letter-spacing: .18em; }
  .ticket__plate { padding: 0 1.9em 0 1.7em; }
}

/* ------------------------------------------------------------------ seller details
   Required on the page (Paysera, consumer law). Auto margins keep the logo and the button centred in the
   space above this line. The dark plate keeps the text readable over the embers. */

.logo { margin-top: auto; }
.seller {
  flex: none;
  margin-top: auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1px 14px;
  max-width: 100%;
  padding: 6px 12px;
  font: 400 12px/1.45 var(--font);
  color: #d6d6da;
  text-align: center;
  background: rgba(0, 0, 0, .62);
  border-radius: 3px;
}
.seller a { color: inherit; text-underline-offset: 2px; }
@media (max-height: 520px) and (min-aspect-ratio: 5/4) {
  .seller { font-size: 11px; padding: 3px 10px; gap: 0 12px; }
}

/* ------------------------------------------------------------------ purchase window (dialog)
   Opened by "Pirkti bilietą" or the address /uzsakymas; the payment button works only after the checkbox is
   ticked. Same materials as the button: chamfered corners, chrome rim, dark steel face, blood-red accents. */

.terms {
  --cut: 16px;
  width: min(600px, calc(100vw - 24px));
  max-width: none;
  max-height: none;
  margin: auto;
  padding: 0;
  border: 0;
  background: transparent;
  color: #e7e7ea;
  overflow: visible;
  filter: drop-shadow(0 30px 60px rgba(0, 0, 0, .8)) drop-shadow(0 0 30px rgba(196, 22, 28, .18));
}
.terms::backdrop {
  background: radial-gradient(120% 80% at 50% 110%, rgba(120, 24, 10, .38), rgba(0, 0, 0, .8) 62%);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}
/* chrome rim */
.terms__rim {
  padding: 1.5px;
  clip-path: polygon(var(--cut) 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, var(--cut) 100%, 0 calc(100% - var(--cut)), 0 var(--cut));
  background: linear-gradient(160deg, #f4f4f6 0%, #8d8f95 22%, #2a2b2f 50%, #77797f 78%, #e2e2e6 100%);
}
/* dark brushed-steel face; scrolls on very short screens */
.terms__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-height: calc(100vh - 28px);
  overflow: hidden auto;             /* the button's glow must not make the window scroll sideways */
  overscroll-behavior: contain;
  padding: 38px clamp(20px, 5vw, 38px) 30px;
  clip-path: polygon(calc(var(--cut) - .5px) 0, calc(100% - var(--cut) + .5px) 0, 100% calc(var(--cut) - .5px), 100% calc(100% - var(--cut) + .5px), calc(100% - var(--cut) + .5px) 100%, calc(var(--cut) - .5px) 100%, 0 calc(100% - var(--cut) + .5px), 0 calc(var(--cut) - .5px));
  background:
    radial-gradient(90% 60% at 50% 115%, rgba(196, 22, 28, .16), rgba(196, 22, 28, 0) 70%),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .018) 0 1px, rgba(0, 0, 0, .03) 1px 2px, rgba(0, 0, 0, 0) 2px 4px),
    linear-gradient(180deg, #1c1c20 0%, #121215 55%, #0c0b0d 100%);
}
@supports (height: 1svh) { .terms__inner { max-height: calc(100svh - 28px); } }
/* red accent across the top edge, tapered like the logo's bars */
.terms__inner::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 46%;
  height: 3px;
  transform: translateX(-50%);
  background: linear-gradient(90deg, rgba(196, 22, 28, 0), var(--red) 30%, var(--red-hot) 50%, var(--red) 70%, rgba(196, 22, 28, 0));
  box-shadow: 0 0 14px rgba(225, 37, 27, .55);
}

.terms__close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 3px;
  background: transparent;
  color: #a9a9ae;
  cursor: pointer;
  transition: color .2s ease, background-color .2s ease;
}
.terms__close svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.terms__close:hover { color: #fff; background: rgba(225, 37, 27, .18); }
.terms__close:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

.terms__title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin: 0 30px;
  font: 800 clamp(13px, .3vw + 12px, 16px)/1.25 var(--font);
  letter-spacing: .16em;
  text-transform: uppercase;
  text-align: center;
  color: #fff;
}
.terms__title::before,
.terms__title::after {
  content: "";
  flex: none;
  width: clamp(18px, 4vw, 40px);
  height: 3px;
  background: linear-gradient(90deg, rgba(196, 22, 28, 0), var(--red-hot));
  clip-path: polygon(0 50%, 100% 0, 100% 100%);
}
.terms__title::after { transform: scaleX(-1); }

.terms__text {
  margin: 0;
  font: 400 15.5px/1.62 var(--font);
  color: #cfcfd3;
  text-wrap: pretty;
  hyphens: manual;
}

.terms__check {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 13px;
  padding: 14px 16px;
  font: 600 15px/1.45 var(--font);
  color: #f2f2f4;
  cursor: pointer;
  background: rgba(255, 255, 255, .035);
  border: 1px solid rgba(255, 255, 255, .1);
  border-left: 3px solid var(--red-hot);
  border-radius: 3px;
  transition: background-color .2s ease, border-color .2s ease;
}
.terms__check:hover { background: rgba(255, 255, 255, .06); }
/* the real checkbox stays in the page for keyboards and screen readers; .terms__box draws it */
.terms__check input {
  position: absolute;
  opacity: 0;
  width: 24px;
  height: 24px;
  margin: 0;
  left: 16px;
  top: 13px;
  cursor: pointer;
}
.terms__box {
  flex: none;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  margin-top: -1px;
  border-radius: 3px;
  background: linear-gradient(180deg, #0b0b0d, #1d1d21);
  box-shadow: inset 0 0 0 1.5px #8d8f95, inset 0 2px 4px rgba(0, 0, 0, .6);
  transition: background .18s ease, box-shadow .18s ease;
}
.terms__box svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: #fff;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 24;
  stroke-dashoffset: 24;
  transition: stroke-dashoffset .22s ease;
}
.terms__check input:checked + .terms__box {
  background: linear-gradient(180deg, #e1251b, #93101a);
  box-shadow: inset 0 0 0 1.5px #f0c4bd, 0 0 12px rgba(225, 37, 27, .55);
}
.terms__check input:checked + .terms__box svg { stroke-dashoffset: 0; }
.terms__check input:checked ~ .terms__label { color: #fff; }
.terms__check:has(input:checked) { border-color: rgba(225, 37, 27, .45); background: rgba(225, 37, 27, .07); }
.terms__check input:focus-visible + .terms__box { outline: 2px solid #fff; outline-offset: 3px; }

/* the links inside the checkbox label */
.terms__label a { color: #fff; text-underline-offset: 2px; }

/* the order fields */
.terms__title:focus { outline: none; }
.order__notice {
  margin: 0;
  padding: 10px 14px;
  font: 600 14px/1.4 var(--font);
  color: #ffd9a8;
  background: rgba(255, 170, 60, .1);
  border: 1px solid rgba(255, 170, 60, .4);
  border-radius: 3px;
}
.order__notice[hidden], .order__error[hidden], .terms__go[hidden] { display: none; }
.order__fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 12px;
}
.order__field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font: 600 13.5px/1.3 var(--font);
  color: #f2f2f4;
}
.order__field input {
  width: 100%;
  height: 44px;
  padding: 0 12px;
  font: 400 16px/1 var(--font);      /* 16 px: iPhones do not zoom into the field */
  color: #fff;
  background: rgba(0, 0, 0, .42);
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 3px;
}
.order__field input:focus { outline: 2px solid var(--red-hot); outline-offset: 0; border-color: transparent; }
.order__small {
  margin: 0;
  font: 400 12.5px/1.5 var(--font);
  color: #a9a9ae;
  text-wrap: pretty;
}
.order__small a { color: inherit; text-underline-offset: 2px; }
.order__sum {
  margin: 0;
  font: 400 15px/1.5 var(--font);
  color: #e7e7ea;
  text-wrap: pretty;
}
.order__sum strong { font-size: 18px; font-weight: 800; color: #fff; white-space: nowrap; }
.order__error {
  margin: 0;
  padding: 10px 14px;
  font: 600 14px/1.4 var(--font);
  color: #ffc9c4;
  background: rgba(225, 37, 27, .14);
  border: 1px solid rgba(225, 37, 27, .55);
  border-radius: 3px;
}
/* the button inside the dialog: the same plate, without the side blades */
.terms__go {
  align-self: center;
  margin-top: 4px;
  padding: 0;
  border: 0;
  background: none;
  font-family: inherit;
  cursor: pointer;
}
.terms__go::before,
.terms__go::after { display: none; }
.terms__go:disabled {
  cursor: not-allowed;
  filter: grayscale(.85) brightness(.55) drop-shadow(0 8px 14px rgba(0, 0, 0, .6));
  transform: none;
}
.terms__go:disabled .ticket__halo,
.terms__go:disabled .ticket__heat { opacity: 0; }
.terms__go:disabled .ticket__plate::after { animation: none; }
/* the page button's entrance animation must not replay (and hide it) each time the dialog opens */
.ticket.terms__go { animation: none; }

@media (prefers-reduced-motion: no-preference) {
  .terms[open] { animation: terms-in .38s cubic-bezier(.16, 1, .3, 1); }
  .terms[open]::backdrop { animation: terms-fade .3s ease; }
}
@keyframes terms-in {
  from { opacity: 0; transform: translateY(14px) scale(.97); }
  to { opacity: 1; transform: none; }
}
@keyframes terms-fade { from { opacity: 0; } to { opacity: 1; } }

/* short screens (small phones, landscape phones): tighter, so the checkbox and button stay in view */
@media (max-height: 680px) {
  .terms__inner { gap: 14px; padding-top: 30px; padding-bottom: 22px; }
  .terms__text { font-size: 13.5px; line-height: 1.5; }
  .terms__check { font-size: 13.5px; padding: 10px 13px; }
  .terms__check input { top: 9px; }
  .terms__go { margin-top: 0; }
}
@media (max-height: 520px) and (min-aspect-ratio: 5/4) {
  .terms { width: min(780px, calc(100vw - 24px)); }
  .order__small { font-size: 12px; line-height: 1.4; }
  .terms__inner { gap: 10px; padding: 20px 30px 12px; }
  .terms__title { font-size: 12.5px; }
  .terms__text { font-size: 13px; line-height: 1.45; }
}
@media (max-width: 420px) {
  .terms { --cut: 12px; }
  .terms__title { gap: 9px; margin: 0 26px; letter-spacing: .11em; }
  .terms__title::before, .terms__title::after { width: 14px; }
  .terms__inner { gap: 16px; padding-top: 34px; }
  .terms__text { font-size: 14.5px; line-height: 1.58; }
  .terms__check { font-size: 14px; padding: 12px 13px; }
  .terms__check input { left: 13px; top: 11px; }
}

/* ------------------------------------------------------------------ toast */

.toast {
  position: fixed;
  z-index: 5;
  left: 50%;
  bottom: max(22px, calc(env(safe-area-inset-bottom) + 14px));
  max-width: calc(100vw - 32px);
  padding: 13px 20px 13px 16px;
  font: 600 14px/1.25 var(--font);
  letter-spacing: .02em;
  color: #f4f4f4;
  width: max-content;
  background: linear-gradient(180deg, rgba(36, 36, 40, .94), rgba(12, 12, 14, .96));
  border: 1px solid rgba(255, 255, 255, .13);
  border-left: 3px solid var(--red-hot);
  border-radius: 3px;
  box-shadow: 0 16px 36px rgba(0, 0, 0, .6), inset 0 1px 0 rgba(255, 255, 255, .08);
  opacity: 0;
  transform: translate(-50%, 14px);
  transition: opacity .3s ease, transform .45s cubic-bezier(.2, .8, .2, 1);
  pointer-events: none;
}
.toast:empty { visibility: hidden; }
.toast.is-on { opacity: 1; transform: translate(-50%, 0); }
/* landscape phones: the button sits near the bottom edge, so the message drops in from the top */
@media (max-height: 520px) and (min-aspect-ratio: 5/4) {
  .toast { bottom: auto; top: max(10px, env(safe-area-inset-top)); transform: translate(-50%, -14px); }
}

/* ------------------------------------------------------------------ motion
   Intros are CSS-only and use `backwards` fill: the logo and the button are visible even if no
   script runs or a script throws. Nothing is hidden behind a JS-added class. */

@media (prefers-reduced-motion: no-preference) {
  .logo { animation: logo-in 1.6s cubic-bezier(.16, 1, .3, 1) .1s backwards; }
  .ticket { animation: ticket-in 1.1s cubic-bezier(.16, 1, .3, 1) .6s backwards; }
  .logo__glow { animation: glow-pulse 3.8s ease-in-out infinite; }
  .ticket__halo { animation: halo-breathe 3.4s ease-in-out infinite; }
  .ticket:hover .ticket__halo, .ticket:focus-visible .ticket__halo { animation: none; }
  .ticket__plate::after { animation: sheen-intro 1.1s cubic-bezier(.3, .6, .2, 1) 2.6s both; }
  .ticket:hover .ticket__plate::after,
  .ticket:focus-visible .ticket__plate::after {
    animation: sheen-intro 1.1s cubic-bezier(.3, .6, .2, 1) 2.6s both, sheen-hover .9s cubic-bezier(.3, .6, .2, 1) both;
  }
}
@keyframes logo-in {
  from { opacity: 0; transform: scale(.94); }
  to { opacity: 1; transform: none; }
}
@keyframes ticket-in {
  from { opacity: 0; translate: 0 12px; }
  to { opacity: 1; translate: 0 0; }
}
@keyframes halo-breathe {
  0%, 100% { opacity: .4; }
  50% { opacity: .75; }
}

@media (prefers-reduced-motion: reduce) {
  .fx { transition: none; }
  .logo__sheen { display: none; }
  .ticket, .ticket__halo, .ticket__heat, .ticket::before, .ticket::after { transition: none; }
  .ticket:hover, .ticket:focus-visible { transform: none; }
  .toast { transition: opacity .2s ease; transform: translate(-50%, 0); }
}