/* Bookanda: la landing per i professionisti (professionisti.bookanda.app) e il suo ringraziamento.
   Dipende da tokens.css e site.css.

   Un oggetto solo per tutta la pagina: lo scontrino di Bookanda, carta chiara con il bordo
   strappato. Apre la pagina sopra la foto di un salone, torna nelle notifiche, diventa il tagliando
   del modulo e chiude la pagina come il retro di una cartolina. */

/* gli sfasamenti degli ingressi, senza attributi style (la Content-Security-Policy li blocca) */
[data-i="1"] { --i: 1; }
[data-i="2"] { --i: 2; }
[data-i="3"] { --i: 3; }
[data-i="4"] { --i: 4; }
[data-i="5"] { --i: 5; }
[data-i="6"] { --i: 6; }

.lp { --step-mid: clamp(1.75rem, 0.9rem + 2vw, 2.625rem); }
.lp main { overflow-x: clip; }
.lp .skip:not(:focus) { clip-path: inset(50%); }

/* la barra: il bottone del modulo resta visibile anche sul telefono */
.lp-bar .bar__end { margin-left: auto; }
.lp-bar .bar__nav + .bar__end { margin-left: 0; }
.lp-bar .bar__end .btn { display: inline-flex; }

/* ---------- righe con i puntini, come su uno scontrino ---------- */
.leaders { display: grid; gap: 0.45rem; text-align: left; }
.leaders li { position: relative; display: flex; align-items: baseline; justify-content: space-between; gap: 0.5rem; }
.leaders li::before {
  content: "· · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · ·";
  position: absolute; left: 0; right: 0; bottom: 0.1em; overflow: hidden; white-space: nowrap; color: var(--paper-muted);
}
.leaders li > span { position: relative; background: var(--paper); }
.leaders li > span:first-child { padding-right: 0.4ch; }
.leaders li > span:last-child { padding-left: 0.4ch; white-space: nowrap; font-weight: 700; }

/* ---------- il gancio: lo scontrino sopra il salone ---------- */
.hero {
  position: relative; overflow: clip; background: var(--surface-2);
  padding: clamp(2rem, 0.5rem + 6vw, 7rem) var(--margin) clamp(4.5rem, 3rem + 5vw, 8rem);
}
.hero__photo { position: absolute; inset: 0; margin: 0; }
.hero__photo img {
  width: 100%; height: 100%; object-fit: cover; object-position: 62% 40%;
  filter: brightness(calc(var(--photo-dim) * 0.8));
}
.ticket {
  --pad-x: clamp(1.25rem, 0.4rem + 3.4vw, 3.5rem);
  position: relative; width: min(100%, 50rem); margin-inline: auto;
  padding: clamp(2.25rem, 1.5rem + 2vw, 3.5rem) var(--pad-x) clamp(2.75rem, 2rem + 2vw, 4rem);
  background: var(--paper); color: var(--paper-ink); text-align: center;
  clip-path: polygon(0% 9px, 2.5% 0px, 5% 9px, 7.5% 0px, 10% 9px, 12.5% 0px, 15% 9px, 17.5% 0px, 20% 9px, 22.5% 0px, 25% 9px, 27.5% 0px, 30% 9px, 32.5% 0px, 35% 9px, 37.5% 0px, 40% 9px, 42.5% 0px, 45% 9px, 47.5% 0px, 50% 9px, 52.5% 0px, 55% 9px, 57.5% 0px, 60% 9px, 62.5% 0px, 65% 9px, 67.5% 0px, 70% 9px, 72.5% 0px, 75% 9px, 77.5% 0px, 80% 9px, 82.5% 0px, 85% 9px, 87.5% 0px, 90% 9px, 92.5% 0px, 95% 9px, 97.5% 0px, 100% 9px, 100% calc(100% - 9px), 97.5% 100%, 95% calc(100% - 9px), 92.5% 100%, 90% calc(100% - 9px), 87.5% 100%, 85% calc(100% - 9px), 82.5% 100%, 80% calc(100% - 9px), 77.5% 100%, 75% calc(100% - 9px), 72.5% 100%, 70% calc(100% - 9px), 67.5% 100%, 65% calc(100% - 9px), 62.5% 100%, 60% calc(100% - 9px), 57.5% 100%, 55% calc(100% - 9px), 52.5% 100%, 50% calc(100% - 9px), 47.5% 100%, 45% calc(100% - 9px), 42.5% 100%, 40% calc(100% - 9px), 37.5% 100%, 35% calc(100% - 9px), 32.5% 100%, 30% calc(100% - 9px), 27.5% 100%, 25% calc(100% - 9px), 22.5% 100%, 20% calc(100% - 9px), 17.5% 100%, 15% calc(100% - 9px), 12.5% 100%, 10% calc(100% - 9px), 7.5% 100%, 5% calc(100% - 9px), 2.5% 100%, 0% calc(100% - 9px));
}
.ticket .day { height: 2.25rem; margin-bottom: clamp(2rem, 1.5rem + 2vw, 3rem); }
.ticket .day > span { background: #e2e2e2; }
.ticket .day > .b { background: var(--paper-ink); }
.ticket .day > .m { background: var(--accent); }
.ticket__title { font-size: var(--step-display); font-weight: 800; line-height: 1; letter-spacing: -0.035em; }
.ticket__title span { display: block; white-space: nowrap; }
.ticket__lede { max-width: 44ch; margin: 1.5rem auto 2rem; }
.ticket__rows { max-width: 32rem; margin: clamp(2.5rem, 2rem + 2vw, 3.5rem) auto 0; }
.ticket__total {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  margin: 2rem calc(var(--pad-x) * -1) 0; padding: 0 var(--pad-x); min-height: 3.25rem;
  background: var(--paper-ink); color: var(--paper); font-weight: 800; text-align: left;
}
.ticket .stores { justify-content: center; }
.ticket .stores a:focus-visible { outline-color: var(--paper-ink); }
.ticket__qr { display: flex; align-items: center; justify-content: center; gap: 1.25rem; margin-top: 2.5rem; text-align: left; }
.ticket__qr img { width: 7.5rem; height: 7.5rem; image-rendering: pixelated; }
.ticket__qr p { max-width: 22ch; }
.ticket__home { display: inline-block; margin-top: 2rem; }

/* ---------- perché: titolo, nota, la riga delle cifre ---------- */
.intro { padding: var(--section) var(--margin) 0; }
.intro__top { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: end; }
.intro__title { grid-column: 1 / span 7; max-width: 13ch; font-size: var(--step-display); font-weight: 800; line-height: 0.98; letter-spacing: -0.03em; }
.intro__note { grid-column: 9 / span 4; max-width: 36ch; }
.facts { display: flex; justify-content: space-between; gap: var(--gutter); margin-top: clamp(4rem, 3rem + 4vw, 7.5rem); }
.facts > div { flex: 0 1 16rem; }
.facts dt { font-size: var(--step-mid); font-weight: 500; line-height: 1.05; letter-spacing: -0.02em; white-space: nowrap; }
.facts dd { margin-top: 0.6rem; max-width: 26ch; font-size: var(--step-small); color: var(--muted); }
.intro__photo {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: end;
  margin-top: clamp(4rem, 3rem + 4vw, 7.5rem);
}
.intro__photo img { grid-column: 1 / -1; width: 100%; aspect-ratio: 1280 / 586; object-fit: cover; filter: brightness(var(--photo-dim)); }
.intro__photo figcaption { grid-column: 1 / span 5; margin-top: 0.75rem; }

/* ---------- clienti nuovi: le notifiche in fila lungo il bordo ---------- */
.slips { position: relative; height: 96svh; min-height: 44rem; margin-top: var(--section); overflow: clip; background: #111111; color: #ffffff; }
.slips__photo { position: absolute; inset: 0; margin: 0; }
.slips__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; filter: brightness(calc(var(--photo-dim) * 0.78)); }
.slips__text {
  position: relative; z-index: 1; width: min(40rem, 64%); margin: clamp(3rem, 1rem + 6svh, 6rem) 0 0 18%;
  padding: clamp(1.5rem, 1rem + 1.5vw, 2.5rem); background: rgba(0, 0, 0, 0.62);
}
.slips__title { font-size: var(--step-display); font-weight: 800; line-height: 0.98; letter-spacing: -0.03em; margin-bottom: 1.25rem; }
.slips__text p { max-width: 32ch; font-size: var(--step-lead); font-weight: 600; line-height: 1.25; letter-spacing: -0.01em; }
.slips__text p + p { margin-top: 0.75rem; }
.slips__row {
  position: absolute; z-index: 1; left: var(--margin); right: var(--margin); bottom: 0;
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; align-items: end;
}
.note-slip {
  height: var(--h, 32svh); margin-bottom: -3rem; padding: 1.25rem 1.1rem 4rem;
  background: var(--paper); color: var(--paper-ink); font-size: var(--step-small); line-height: 1.5;
}
.note-slip:nth-child(1) { --h: 38svh; }
.note-slip:nth-child(2) { --h: 30svh; --tilt: -1.5deg; }
.note-slip:nth-child(3) { --h: 42svh; }
.note-slip:nth-child(4) { --h: 34svh; --tilt: 1.2deg; }
.note-slip:nth-child(5) { --h: 29svh; }
.note-slip:nth-child(6) { --h: 36svh; --tilt: -1deg; }
.note-slip { transform: rotate(var(--tilt, 0deg)); transform-origin: 50% 100%; }
.note-slip__head { font-weight: 800; }
.note-slip__cut { overflow: hidden; white-space: nowrap; color: var(--paper-muted); margin: 0.2rem 0 0.4rem; }
.note-slip__end { margin-top: 0.4rem; font-weight: 700; }

/* ---------- le funzioni: un nome per riga, la schermata nel telefono accanto ---------- */
.index { padding: var(--section) var(--margin) 0; }
.index__title { max-width: 14ch; margin-bottom: clamp(2.5rem, 2rem + 2vw, 4rem); font-size: var(--step-display); font-weight: 800; line-height: 0.98; letter-spacing: -0.03em; }
.index__body { position: relative; }
.index__list li { display: grid; grid-template-columns: minmax(0, 1fr) 6.5rem; grid-template-rows: auto 1fr; column-gap: 1.25rem; align-items: start; padding-block: 1rem; }
.index__row { text-align: left; color: inherit; transition: color var(--t-hover) ease, transform var(--t-ui) var(--ease-out); }
.index__name { display: block; font-size: var(--step-lead); font-weight: 800; line-height: 1.1; letter-spacing: -0.02em; transition: color var(--t-hover) ease; }
.index__note { grid-column: 1; max-width: 46ch; margin-top: 0.5rem; }
.index__thumb { grid-column: 2; grid-row: 1 / span 2; width: 6.5rem; }
.index__frame { display: none; }
@media (hover: hover) and (pointer: fine) and (min-width: 64em) {
  .index__list { width: 58%; }
  .index__list li { display: block; padding-block: 0.85rem; }
  .index__thumb { display: none; }
  .index__name { font-size: var(--step-display); line-height: 1; letter-spacing: -0.03em; }
  .index__row[aria-pressed="false"] .index__name { color: color-mix(in srgb, var(--ink) 42%, var(--bg)); }
  .index__row:hover, .index__row:focus-visible { transform: translateX(10px); }
  .index__frame {
    display: block; position: absolute; top: 0; right: 6%; width: min(19rem, 24%);
    transition: transform 360ms var(--ease-out);
  }
  .index__frame .phone__screen > img { opacity: 0; transition: opacity 240ms ease; }
  .index__frame .phone__screen > img.is-active { opacity: 1; }
}

/* ---------- il modulo: un tagliando da staccare ---------- */
.coupon-wrap { padding: var(--section) var(--margin) 0; }
.coupon {
  --tone: color-mix(in srgb, var(--accent) 42%, #ffffff);
  position: relative; display: grid; grid-template-columns: minmax(0, 46fr) minmax(0, 54fr);
  width: calc((100% + var(--gutter)) * 10 / 12 - var(--gutter)); margin-inline: auto;
  background: var(--accent); color: #000000;
}
.coupon :focus-visible { outline-color: #000000; }
.coupon a { color: inherit; text-decoration: underline; text-underline-offset: 0.2em; font-weight: 700; }
.coupon__stub { position: relative; padding: clamp(1.5rem, 1rem + 2vw, 3rem); border-right: 5px dotted var(--bg); }
/* titolo, frase e scontrino restano accanto ai campi mentre si compila */
.coupon__hold { position: sticky; top: calc(var(--header-h) + 1.5rem); display: flex; flex-direction: column; gap: 1.25rem; }
.coupon__stub::before, .coupon__stub::after {
  content: ""; position: absolute; right: -11.5px; width: 28px; height: 28px; border-radius: 50%; background: var(--bg);
}
.coupon__stub::before { top: -14px; }
.coupon__stub::after { bottom: -14px; }
.coupon__title { font-size: var(--step-mid); font-weight: 800; line-height: 1; letter-spacing: -0.03em; }
.coupon__lede { max-width: 36ch; }

.mini-slip {
  margin-top: 1rem; padding: 1.25rem 1.25rem 0; background: var(--paper); color: var(--paper-ink); font-size: var(--step-small);
}
.mini-slip__head { font-weight: 800; }
.mini-slip__url { margin: 0.35rem 0 1rem; font-size: var(--step-lead); font-weight: 600; line-height: 1.15; letter-spacing: -0.01em; overflow-wrap: anywhere; }
.mini-slip__url b { display: inline-block; max-width: 100%; font-weight: 800; overflow-wrap: anywhere; }
.mini-slip__total {
  display: flex; justify-content: space-between; gap: 1rem; align-items: center;
  margin: 1.25rem -1.25rem 0; padding: 0 1.25rem; min-height: 2.75rem;
  background: var(--paper-ink); color: var(--paper); font-weight: 800;
}

.form { position: relative; padding: clamp(1.5rem, 1rem + 2vw, 3rem); }
.form__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.1rem 1.25rem; }
.field { min-width: 0; margin: 0; padding: 0; border: 0; }
.field[hidden] { display: none; }
.field--wide { grid-column: 1 / -1; }
.field > label, .field legend { display: block; padding: 0; margin-bottom: 0.4rem; font-size: var(--step-small); font-weight: 700; }
.field__opt { font-weight: 500; }
.field input[type="text"], .field input[type="email"], .field input[type="tel"], .field textarea {
  display: block; width: 100%; min-height: 3.25rem; padding: 0.7rem 0.9rem; margin: 0;
  border: 0; border-radius: 0; background: var(--tone); color: #000000;
  font: inherit; font-size: var(--step-body); line-height: 1.4;
  transition: background-color var(--t-hover) ease;
}
.field textarea { min-height: 7.5rem; resize: vertical; }
.field input:focus, .field textarea:focus { background: #ffffff; }
.field input:focus-visible, .field textarea:focus-visible { outline: 3px solid #000000; outline-offset: 0; }
.field [aria-invalid="true"] { background: #ffffff; outline: 3px solid #000000; outline-offset: -3px; }
.field__hint { margin-top: 0.35rem; font-size: var(--step-small); }
.field__error { margin-top: 0.4rem; font-size: var(--step-small); font-weight: 800; }

.choice__opts { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.choice__opts label { position: relative; }
.choice__opts input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.choice__opts span {
  display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0 1.1rem;
  border-radius: var(--radius-pill); background: var(--tone); font-weight: 700;
  transition: background-color var(--t-hover) ease, color var(--t-hover) ease, transform var(--t-press) var(--ease-out);
}
.choice__opts input:checked + span { background: #000000; color: #ffffff; }
.choice__opts input:focus-visible + span { outline: 3px solid #000000; outline-offset: 2px; }
.choice__opts label:active span { transform: scale(0.97); }
.choice[aria-invalid="true"] .choice__opts span { background: #ffffff; }
@media (hover: hover) and (pointer: fine) {
  .choice__opts input:not(:checked):hover + span { background: #ffffff; }
}

.check label { display: flex; gap: 0.75rem; align-items: flex-start; font-size: var(--step-small); font-weight: 500; cursor: pointer; }
.check input { flex: none; width: 1.5rem; height: 1.5rem; margin: 0; accent-color: #000000; cursor: pointer; }
.check input[aria-invalid="true"] { outline: 3px solid #000000; outline-offset: 2px; }

.hp { position: absolute; top: 0; left: 0; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); opacity: 0; pointer-events: none; } /* taste-skill-ignore: honeypot nascosto, non una riga */

.form__send {
  display: flex; align-items: center; justify-content: center; width: 100%; min-height: 3.5rem; margin-top: 1.75rem;
  border-radius: var(--radius-pill); background: #000000; color: #ffffff; font-weight: 800; font-size: var(--step-body);
  transition: transform var(--t-press) var(--ease-out), background-color var(--t-hover) ease, color var(--t-hover) ease;
}
.form__send:active { transform: scale(0.98); }
.form__send[disabled] { cursor: progress; background: #3a3a3a; }
@media (hover: hover) and (pointer: fine) { .form__send:not([disabled]):hover { background: #ffffff; color: #000000; } }
.form__status { min-height: 1.5em; margin-top: 1rem; font-weight: 800; }
.form__status:empty { margin-top: 0; }
.form__note { margin-top: 1rem; font-size: var(--step-small); }

/* ---------- ringraziamento: tre schermate dell'app ---------- */
.peek { padding: var(--section) var(--margin) calc(var(--section) * 0.6); }
.peek__title { font-size: var(--step-display); font-weight: 800; line-height: 0.98; letter-spacing: -0.03em; text-align: center; }
.peek__phones { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gutter); max-width: 56rem; margin: clamp(2.5rem, 2rem + 2vw, 4rem) auto 0; }
.peek__phones p { margin-top: 1rem; text-align: center; }
/* ---------- domande ---------- */
.faq { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); padding: var(--section) var(--margin) calc(var(--section) * 0.6); }
.faq__title { grid-column: 1 / span 3; font-size: var(--step-lead); font-weight: 800; line-height: 1.15; }
.faq__text { grid-column: 5 / span 8; columns: 2; column-gap: 3.5rem; }
.faq__text p { break-inside: avoid; margin-bottom: 1.25rem; }
.faq__text strong { font-weight: 700; }

/* ---------- il retro della cartolina ---------- */
.back { --back-ground: #000000; background: var(--back-ground); padding: clamp(5rem, 3rem + 6vw, 9rem) var(--margin) clamp(3rem, 2rem + 3vw, 5rem); }
:root[data-theme="dark"] .back { --back-ground: var(--surface); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .back { --back-ground: var(--surface); } }
.back__card {
  position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--gutter);
  width: calc((100% + var(--gutter)) * 10 / 12 - var(--gutter)); min-height: 26rem; margin-inline: auto;
  padding: clamp(2.5rem, 2rem + 2vw, 4rem) clamp(1.5rem, 1rem + 2vw, 3.5rem) 1.5rem;
  background: var(--paper); color: var(--paper-ink);
}
.back__edge { position: absolute; left: 0; bottom: 100%; width: 100%; height: 2.5rem; color: var(--paper); }
.back__title { font-size: var(--step-lead); font-weight: 800; line-height: 1.15; margin-bottom: 1rem; }
.back__message p { max-width: 38ch; }
.back__btn { margin-top: 2rem; }
.back__address { display: flex; flex-direction: column; align-items: flex-start; }
.back__stamp { align-self: flex-end; width: 5.5rem; aspect-ratio: 3 / 4; object-fit: cover; padding: 6px; background: #e2e2e2; margin-bottom: 1.5rem; }
.back__address ul { display: grid; gap: 0.75rem; margin: 0; padding: 0; list-style: none; }
.back__address a, .back__legal a { text-decoration-line: underline; text-decoration-color: transparent; transition: text-decoration-color var(--t-hover) ease; }
.back__address a:hover, .back__legal a:hover { text-decoration-color: currentColor; }
.back__legal { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; margin-top: 2rem; font-size: var(--step-small); }
.back__imprint { grid-column: 1 / -1; margin-top: 3rem; text-align: center; font-size: var(--step-small); }
.back .btn:focus-visible, .back a:focus-visible { outline-color: var(--accent); }

/* ---------- tablet e telefono ---------- */
@media (max-width: 63.99em) {
  .intro__top { display: block; }
  .intro__note { margin-top: 1.5rem; }
  .facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem var(--gutter); }
  .intro__photo { display: block; }
  .intro__photo figcaption { margin-top: 0.75rem; max-width: none; }

  .slips__text { width: auto; margin: clamp(2.5rem, 1rem + 5svh, 4rem) var(--margin) 0; }
  .slips__row {
    left: 0; right: 0; display: flex; gap: 12px; padding-inline: var(--margin);
    overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
  }
  .slips__row::-webkit-scrollbar { display: none; }
  .note-slip { flex: 0 0 min(15rem, 44vw); scroll-snap-align: start; }

  .coupon { grid-template-columns: minmax(0, 1fr); width: 100%; }
  .coupon__stub { border-right: 0; border-bottom: 5px dotted var(--bg); }
  .coupon__hold { position: static; }
  .coupon__stub::before, .coupon__stub::after { top: auto; right: auto; bottom: -16.5px; }
  .coupon__stub::before { left: -14px; }
  .coupon__stub::after { right: -14px; }

  .faq { display: block; }
  .faq__title { margin-bottom: 1.5rem; }
  .faq__text { columns: 1; }

  .back__card { grid-template-columns: minmax(0, 1fr); width: 100%; }
  .back__address { margin-top: 2.5rem; }
  .back__stamp { position: absolute; top: 1.5rem; right: 1.5rem; width: 4rem; margin: 0; }
  .back__message { padding-right: 5rem; }
}

@media (max-width: 39.99em) {
  .ticket { --pad-x: 1rem; }
  .ticket__title { font-size: 2rem; }
  .ticket__qr { display: none; }
  .facts { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .slips { height: 100svh; }
  .slips__text p { font-size: 1.375rem; }
  .index__name { font-size: var(--step-body); }
  .peek__phones { gap: 0.75rem; }
  .peek__phones p { font-size: var(--step-small); }
  .form__grid { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- movimento: solo transform e opacity; con reduced motion resta lo stato finale ---------- */
@media (prefers-reduced-motion: no-preference) {
  /* lo scontrino esce dalla stampante, poi la giornata si riempie e le righe si stampano */
  .js .ticket { animation: print-out 900ms var(--ease-expo) both; }
  .js .ticket .day > span { transform: scaleY(0); transform-origin: bottom; animation: slot-in 420ms var(--ease-out) forwards; }
  .js .ticket .day > span:nth-child(1) { animation-delay: 300ms; }
  .js .ticket .day > span:nth-child(2) { animation-delay: 330ms; }
  .js .ticket .day > span:nth-child(3) { animation-delay: 360ms; }
  .js .ticket .day > span:nth-child(4) { animation-delay: 390ms; }
  .js .ticket .day > span:nth-child(5) { animation-delay: 420ms; }
  .js .ticket .day > span:nth-child(6) { animation-delay: 450ms; }
  .js .ticket .day > span:nth-child(7) { animation-delay: 480ms; }
  .js .ticket .day > span:nth-child(8) { animation-delay: 510ms; }
  .js .ticket .day > span:nth-child(9) { animation-delay: 540ms; }
  .js .ticket .day > span:nth-child(10) { animation-delay: 570ms; }
  .js .ticket .day > span:nth-child(11) { animation-delay: 600ms; }
  .js .ticket .day > span:nth-child(12) { animation-delay: 630ms; }
  .js .ticket .day > span:nth-child(13) { animation-delay: 660ms; }
  .js .ticket .day > span:nth-child(14) { animation-delay: 690ms; }
  .js .ticket .day > span:nth-child(15) { animation-delay: 720ms; }
  .js .ticket .day > span:nth-child(17) { animation-delay: 750ms; }
  .js .ticket .day > span:nth-child(18) { animation-delay: 780ms; }
  .js .ticket .day > span:nth-child(19) { animation-delay: 810ms; }
  .js .ticket .day > span:nth-child(20) { animation-delay: 840ms; }
  .js .ticket .day > span.m { animation-delay: 1000ms; animation-duration: 600ms; }
  .js .ticket__title span, .js .ticket__lede, .js .ticket__btn, .js .ticket .stores {
    opacity: 0; transform: translateY(14px); animation: rise-in 600ms var(--ease-out) forwards;
  }
  .js .ticket__title span:first-child { animation-delay: 250ms; }
  .js .ticket__title span:last-child { animation-delay: 340ms; }
  .js .ticket__lede { animation-delay: 440ms; }
  .js .ticket__btn, .js .ticket .stores { animation-delay: 540ms; }
  .js .ticket__rows li, .js .ticket__total { opacity: 0; animation: line-in 260ms var(--ease-out) forwards; }
  .js .ticket__rows li:nth-child(1) { animation-delay: 800ms; }
  .js .ticket__rows li:nth-child(2) { animation-delay: 900ms; }
  .js .ticket__rows li:nth-child(3) { animation-delay: 1000ms; }
  .js .ticket__rows li:nth-child(4) { animation-delay: 1100ms; }
  .js .ticket__total { animation-delay: 1250ms; }
  .hero__photo img { animation: drift 18s var(--ease-soft) infinite alternate; }

  .mini-slip__url b.is-bump { animation: bump 220ms var(--ease-out); }

  @supports (animation-timeline: view()) {
    .note-slip { animation: slip-up linear both; animation-timeline: view(); animation-range: entry 0% cover 40%; }
    .note-slip:nth-child(even) { --lift: 7rem; }
    .note-slip:nth-child(odd) { --lift: 4rem; }
  }
}
@keyframes print-out { from { opacity: 0; transform: translateY(-36px); } to { opacity: 1; transform: none; } }
@keyframes slot-in { to { transform: none; } }
@keyframes rise-in { to { opacity: 1; transform: none; } }
@keyframes line-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@keyframes drift { from { transform: scale(1); } to { transform: scale(1.06); } }
@keyframes bump { 50% { opacity: 0.4; transform: translateY(2px); } }
@keyframes slip-up { from { transform: translateY(var(--lift, 4rem)) rotate(var(--tilt, 0deg)); } to { transform: rotate(var(--tilt, 0deg)); } }