@font-face {
  font-family: 'Roboto Condensed';
  src: url('public/fonts/RobotoCondensed-Bold.ttf') format('truetype');
  font-weight: 700;
  font-display: swap;
}

@font-face {
  font-family: 'Ringside';
  src: url('public/fonts/Ringside-Book.otf') format('opentype');
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: 'Ringside Bold';
  src: url('public/fonts/Ringside-Bold.otf') format('opentype');
  font-weight: 700;
  font-display: block;
}

@font-face {
  font-family: 'Ringside Extra Wide';
  src: url('public/fonts/RingsideExtraWide-Thin.otf') format('opentype');
  font-weight: 100;
  font-display: swap;
}

@font-face {
  font-family: 'Atacama';
  src: url('public/fonts/AtacamaTrialItalic.ttf') format('truetype');
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Atacama VAR';
  src: url('public/fonts/AtacamaTrialItalicVAR.ttf') format('truetype');
  font-style: italic;
  font-weight: 100 900;
  font-display: block;
}

:root {
  --red: #e1251b;
  --cream: #fff0d8;
  --black: #212121;
  --blue: #0f3a85;
  --pink: #e68074;
  --stage-width: 1920;
  --stage-height: 1080;
}

* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: clip;
  background: var(--black);
  cursor: default;
  touch-action: none;
  user-select: none;
}

body,
button {
  color: var(--cream);
  font-family: 'Ringside', Arial, sans-serif;
}

button {
  -webkit-appearance: none;
  appearance: none;
}

.kiosk-shell {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  overflow: clip;
  background: var(--black);
}

.stage-fit {
  position: relative;
  width: 1920px;
  height: 1080px;
  overflow: clip;
}

.stage {
  position: absolute;
  top: 0;
  left: 0;
  width: 1920px;
  height: 1080px;
  overflow: clip;
  background: var(--red);
  transform: scale(1);
  transform-origin: top left;
}

.frame {
  position: absolute;
  inset: 0;
  z-index: 100;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.lilly-logo {
  position: absolute;
  z-index: 90;
  top: 128px;
  left: 142px;
  width: 183px;
  height: auto;
  pointer-events: none;
}

.screen {
  position: absolute;
  inset: 0;
  z-index: 10;
  visibility: hidden;
  opacity: 0;
  transform: translateY(28px) scale(1.018);
  transition: opacity 360ms ease, transform 720ms cubic-bezier(.16, 1, .3, 1), visibility 0s linear 720ms;
  pointer-events: none;
}

.screen.is-active {
  visibility: visible;
  opacity: 1;
  transform: translateY(0) scale(1);
  transition-delay: 0s;
  pointer-events: auto;
}

.screen.hand-screen {
  transform: none;
  transition: opacity 360ms ease, visibility 0s linear 360ms;
}

.left-copy {
  position: absolute;
  z-index: 30;
  left: 134px;
}

.left-copy h2,
.intro-copy h1 {
  margin: 0;
  font-family: 'Roboto Condensed', Impact, sans-serif;
  font-weight: 700;
  letter-spacing: -2px;
  line-height: .85;
  text-transform: uppercase;
}

.left-copy .lead,
.left-copy .support {
  margin: 0;
  font-family: 'Ringside Extra Wide', Arial, sans-serif;
  font-weight: 100;
}

.dotted-rule {
  height: 4px;
  margin: 20px 0 24px;
  background-image: radial-gradient(circle, var(--cream) 2px, transparent 2.5px);
  background-position: 0 center;
  background-size: 14px 4px;
}

.pulse-corona {
  position: absolute;
  z-index: 8;
  top: -82.06px;
  left: 769.75px;
  width: 1278px;
  height: 1278px;
  background: url('public/assets/corona-punti-twinkle.svg?v=2') center / contain no-repeat;
  pointer-events: none;
}

.hand-screen .pulse-corona,
.loading-screen .pulse-corona {
  transform-origin: center;
  will-change: transform;
  backface-visibility: hidden;
  animation: start-corona-scale 2.8s ease-in-out infinite;
}

.loading-screen .pulse-corona {
  top: -82.06px;
  left: 729.07px;
}

.result-screen .pulse-corona {
  top: -121.31px;
  left: 686.88px;
}

.intro-copy {
  position: absolute;
  z-index: 20;
  top: 190px;
  left: 50%;
  width: 1420px;
  transform: translateX(-50%);
  text-align: center;
}

.intro-copy h1 {
  font-size: 156.4px;
  letter-spacing: -1.5px;
}

.intro-copy p {
  margin: 16px 0 0;
  font: 100 28px/1.25 'Ringside Extra Wide', Arial, sans-serif;
}

.intro-screen.is-active .intro-copy h1 {
  animation: intro-title-enter 900ms cubic-bezier(.16, 1, .3, 1) 160ms both;
}

.intro-screen.is-active .intro-copy p {
  animation: intro-subtitle-enter 720ms cubic-bezier(.22, 1, .36, 1) 620ms both;
}

.start-pulse {
  position: absolute;
  z-index: 35;
  left: 730px;
  top: 520px;
  width: 460px;
  height: 460px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.start-pulse img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform-origin: center;
  will-change: transform;
  backface-visibility: hidden;
  animation: start-corona-scale 2.8s ease-in-out infinite;
}

.start-pulse span {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font: 700 31px/1.18 'Roboto Condensed', Impact, sans-serif;
  text-align: center;
  animation: none;
}

.intro-screen.is-active .start-pulse span {
  animation: intro-cta-enter 620ms cubic-bezier(.22, 1, .36, 1) 1150ms both;
}

.start-pulse:active {
  transform: scale(.97);
}

.name-copy {
  top: 452px;
  left: 50%;
  width: 1000px;
  transform: translateX(-50%);
  text-align: center;
  transition: top 440ms cubic-bezier(.22, 1, .36, 1);
}

.name-copy h2 {
  font-size: 76px;
  line-height: 1;
  letter-spacing: .5px;
  white-space: nowrap;
}

.name-pad {
  position: absolute;
  z-index: 35;
  top: 565px;
  left: 50%;
  width: 780px;
  transform: translateX(-50%);
  transition: top 440ms cubic-bezier(.22, 1, .36, 1);
}

.guest-name {
  display: block;
  width: 100%;
  height: 115px;
  margin: 0;
  padding: 0 24px;
  overflow: hidden;
  border: 0;
  border-radius: 999px;
  background: var(--cream);
  color: var(--black);
  font: 700 68px/115px 'Roboto Condensed', Impact, sans-serif;
  letter-spacing: -1px;
  white-space: nowrap;
  text-overflow: ellipsis;
  text-align: center;
  cursor: text;
}

.name-keyboard {
  margin-top: 16px;
  visibility: hidden;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 240ms ease, transform 320ms ease, visibility 0s linear 320ms;
  pointer-events: none;
}

.name-screen.is-keyboard-open .name-copy {
  top: 282px;
}

.name-screen.is-keyboard-open .name-pad {
  top: 390px;
}

.name-screen.is-keyboard-open .name-keyboard {
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0s;
  pointer-events: auto;
}

.name-screen.is-keyboard-open .guest-name {
  outline: 3px solid var(--blue);
  outline-offset: 4px;
}

.name-keys {
  display: grid;
  gap: 8px;
}

.key-row {
  display: flex;
  justify-content: center;
  gap: 8px;
}

.name-key,
.name-continue {
  border: 0;
  border-radius: 0;
  cursor: pointer;
}

.name-key {
  width: 68px;
  height: 64px;
  padding: 0;
  color: var(--blue);
  background: var(--cream);
  font: 700 28px/1 'Roboto Condensed', Impact, sans-serif;
}

.name-key.is-wide {
  width: 148px;
  font-size: 24px;
}

.name-key.is-space {
  flex: 1;
  font-size: 24px;
}

.name-key:active,
.name-continue:active {
  transform: translateY(2px);
}

.name-continue {
  width: 100%;
  height: 74px;
  margin-top: 14px;
  color: var(--cream);
  background: var(--blue);
  font: 700 32px/1 'Roboto Condensed', Impact, sans-serif;
  letter-spacing: .4px;
  text-transform: uppercase;
}

.name-continue:disabled {
  opacity: .35;
  cursor: default;
  transform: none;
}

.hand-copy {
  top: 50%;
  width: 640px;
  transform: translateY(-50%);
}

.hand-copy h2 {
  font-size: 150px;
  white-space: nowrap;
}

.hand-copy .lead {
  margin-top: 24px;
  font-size: 31px;
  line-height: 1.33;
}

.hand-copy .dotted-rule {
  width: 516px;
}

.hand-copy .support {
  font-family: 'Ringside', Arial, sans-serif;
  font-size: 27px;
}

.hand-target {
  position: absolute;
  z-index: 35;
  top: 292px;
  left: 1259px;
  width: 370px;
  height: 487.65px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.hand-screen .hand-target {
  left: 1200px;
  transform: scale(.8);
  transform-origin: center;
}

.hand-target img {
  width: 100%;
  height: 100%;
  transform: scaleX(-1);
  transform-origin: center;
  animation: none;
}

.hand-target span {
  position: absolute;
  top: 326px;
  left: 64%;
  width: 190px;
  transform: translateX(-50%);
  font: 700 27px/1.16 'Roboto Condensed', Impact, sans-serif;
  text-align: center;
}

.loading-copy {
  top: 50%;
  width: 800px;
  transform: translateY(-50%);
}

.loading-copy h2 {
  font-size: 112px;
}

.loading-copy .lead {
  margin-top: 8px;
  font-size: 29px;
}

.loading-screen.is-active .loading-copy h2 {
  animation: intro-title-enter 900ms cubic-bezier(.16, 1, .3, 1) 160ms both;
}

.loading-screen.is-active .loading-copy .lead {
  animation: intro-subtitle-enter 720ms cubic-bezier(.22, 1, .36, 1) 620ms both;
}

.progress-wrap {
  position: absolute;
  z-index: 35;
  top: 288px;
  left: 1104px;
  width: 520px;
  height: 520px;
  animation: progress-float 2.15s ease-in-out infinite;
  touch-action: none;
}

.progress-ring {
  width: 100%;
  height: 100%;
  overflow: visible;
  transform: rotate(-90deg);
}

.progress-track,
.progress-value {
  fill: none;
  stroke-linecap: round;
}

.progress-track {
  stroke: var(--cream);
  stroke-width: 4px;
}

.progress-value {
  stroke: var(--blue);
  stroke-width: 31px;
  transition: stroke-dashoffset 80ms linear;
}

.measurement-readout {
  --beat-duration: .8s;
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.measurement-readout strong {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font: 700 142px/.82 'Roboto Condensed', Impact, sans-serif;
  letter-spacing: -5px;
}

.beat-pulse {
  display: flex;
  align-items: baseline;
  gap: 10px;
  position: absolute;
  top: -130px;
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  padding: 8px 22px 7px;
  border-radius: 999px;
  color: var(--cream);
  background: var(--blue);
  animation: none;
}

.beat-pulse span {
  min-width: 64px;
  font: 700 56px/.9 'Roboto Condensed', Impact, sans-serif;
  text-align: right;
}

.beat-pulse small {
  font: 700 24px/1 'Roboto Condensed', Impact, sans-serif;
  letter-spacing: 1px;
}

.ecg-line {
  position: absolute;
  top: -52px;
  left: 50%;
  width: 240px;
  height: 44px;
  margin: 0;
  transform: translateX(-50%);
  overflow: visible;
}

.ecg-line path {
  fill: none;
  stroke: var(--cream);
  stroke-width: 5px;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 270;
  animation: ecg-run var(--beat-duration) linear infinite;
}

.beat-pulse,
.ecg-line {
  display: none;
}

.loading-screen.is-waiting .progress-wrap {
  animation: none;
}

.loading-screen.is-waiting .beat-pulse {
  opacity: .62;
}

.loading-screen.is-waiting .ecg-line path {
  stroke-dasharray: none;
  stroke-dashoffset: 0;
  animation: none;
}

.result-copy {
  top: 312px;
  width: 760px;
}

.result-copy h2 {
  font-size: 165px;
}

.result-pickup {
  margin: 17px 0 0;
  font: 700 42px/1 'Roboto Condensed', Impact, sans-serif;
}

.result-copy .dotted-rule {
  width: 640px;
  margin: 16px 0 18px;
}

.result-copy .lead {
  font-size: 25px;
}

.home-button {
  display: block;
  margin: 26px 0 0 450px;
  width: 80px;
  height: 80px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
}

.home-button img {
  width: 100%;
  height: 100%;
}

.home-button:active {
  transform: scale(.93);
}

.card-wrap {
  position: absolute;
  z-index: 35;
  top: 155px;
  left: 1075px;
  width: 520px;
  height: 768px;
  box-shadow: 18px 18px 0 rgb(130 26 22 / 35%);
  animation: card-arrive 900ms cubic-bezier(.22, 1, .36, 1), card-idle 3.2s ease-in-out 900ms infinite;
}

.postcard {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  --card-top: #000;
  --card-bottom: #0f3a85;
  print-color-adjust: exact;
  -webkit-print-color-adjust: exact;
  background: linear-gradient(to bottom, var(--card-top) 0 37%, var(--card-bottom) 37% 100%);
}

.postcard[data-profile="calm"] {
  --card-top: #e1251b;
  --card-bottom: #f58e7d;
}

.postcard[data-profile="active"] {
  --card-top: #f58e7d;
  --card-bottom: #e1251b;
}

.postcard__artwork {
  position: absolute;
  z-index: 1;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: fill;
}

.postcard__branding {
  position: absolute;
  z-index: 2;
  right: 0;
  bottom: 0;
  left: 0;
  height: 15.5%;
  background: var(--card-bottom);
  pointer-events: none;
}

.postcard__branding img {
  position: absolute;
  bottom: 26%;
  display: block;
  height: auto;
}

.postcard__congress-logo {
  left: 7.5%;
  width: 19.5%;
}

.postcard__lilly-logo {
  right: 7.5%;
  width: 33%;
}

.card-copy {
  position: absolute;
  z-index: 2;
  inset: 0;
  margin: 0;
  color: #fff;
  text-align: center;
  pointer-events: none;
}

.card-copy__message {
  position: absolute;
  top: 4.8%;
  left: 6%;
  right: 6%;
  display: block;
  font: 700 44px/.78 'Ringside Bold', Arial, sans-serif;
  font-kerning: normal;
  font-feature-settings: 'kern' 1;
  letter-spacing: -.01em;
  text-align: left;
}

.card-copy__line {
  display: block;
  width: max-content;
  margin-inline: auto;
  white-space: nowrap;
}

.card-copy__line--1 {
  transform: translateX(-24px);
}

.card-copy__line--2 {
  transform: translateX(38px);
}

.card-copy__name {
  position: absolute;
  top: 75.5%;
  left: 5%;
  right: 5%;
  display: block;
  font: italic 500 54px/1 'Atacama VAR', 'Atacama', Georgia, serif;
  font-variation-settings: 'wdth' 100, 'wght' 500, 'CNTR' 0;
}

body.is-card-preview .stage {
  background: var(--black);
}

body.is-card-preview .frame,
body.is-card-preview .lilly-logo,
body.is-card-preview .result-copy,
body.is-card-preview .result-screen > .pulse-corona,
body.is-card-preview .volume-hotspot {
  display: none;
}

body.is-card-preview .card-wrap {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  animation: none;
}

.print-modal {
  position: absolute;
  inset: 0;
  z-index: 180;
  display: grid;
  place-items: center;
  padding: 96px;
  visibility: hidden;
  opacity: 0;
  background: rgb(16 18 15 / 76%);
  transition: opacity 280ms ease, visibility 0s linear 280ms;
  pointer-events: none;
}

.print-modal.is-visible {
  visibility: visible;
  opacity: 1;
  transition-delay: 0s;
  pointer-events: auto;
}

.print-modal__panel {
  width: 980px;
  min-height: 470px;
  padding: 65px 78px 58px;
  color: var(--black);
  border: 14px solid var(--blue);
  background: var(--cream);
  box-shadow: 24px 24px 0 rgb(16 18 15 / 32%);
  text-align: center;
}

.print-modal.is-visible .print-modal__panel {
  animation: print-panel-arrive 580ms cubic-bezier(.16, 1, .3, 1) both;
}

.print-modal__eyebrow {
  margin: 0 0 18px;
  color: var(--red);
  font: 700 30px/1 'Roboto Condensed', Impact, sans-serif;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.print-modal h2 {
  margin: 0;
  font: 700 76px/.94 'Roboto Condensed', Impact, sans-serif;
  letter-spacing: -2px;
  text-transform: uppercase;
}

.print-modal__panel > p:last-of-type {
  margin: 30px 0 0;
  font: 400 27px/1.35 'Ringside', Arial, sans-serif;
}

.print-modal__progress {
  position: relative;
  width: 610px;
  height: 12px;
  margin: 38px auto 0;
  overflow: hidden;
  background: rgb(15 58 133 / 18%);
}

.print-modal__progress span {
  position: absolute;
  inset: 0;
  width: 42%;
  background: var(--blue);
  animation: print-progress 1.7s ease-in-out infinite;
}

.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.print-sheet {
  display: none;
  position: relative;
}

@keyframes progress-float {
  0%, 100% { transform: translateY(3px) rotate(-.25deg); }
  50% { transform: translateY(-10px) rotate(.25deg); }
}

@keyframes intro-title-enter {
  from {
    clip-path: inset(0 0 100% 0);
    transform: translateY(46px);
    opacity: 0;
  }
  to {
    clip-path: inset(0 0 0 0);
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes intro-subtitle-enter {
  from { transform: translateY(22px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

@keyframes intro-cta-enter {
  from { transform: translateY(16px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

@keyframes start-corona-scale {
  0%, 100% { transform: scale(.975); }
  50% { transform: scale(1.025); }
}

@keyframes ecg-run {
  from { stroke-dashoffset: 270; }
  to { stroke-dashoffset: -270; }
}

@keyframes card-arrive {
  from { transform: translateY(80px) rotate(3deg); opacity: 0; }
  to { transform: translateY(0) rotate(0); opacity: 1; }
}

@keyframes card-idle {
  0%, 100% { transform: translateY(0) rotate(0); }
  50% { transform: translateY(-9px) rotate(.45deg); }
}

.volume-hotspot {
  position: absolute;
  z-index: 120;
  left: 0;
  bottom: 0;
  width: 134px;
  height: 134px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: default;
}

.volume-hotspot:focus {
  outline: none;
}

.volume-modal {
  position: absolute;
  inset: 0;
  z-index: 190;
  display: grid;
  place-items: center;
  padding: 96px;
  visibility: hidden;
  opacity: 0;
  background: rgb(16 18 15 / 76%);
  transition: opacity 280ms ease, visibility 0s linear 280ms;
  pointer-events: none;
}

.volume-modal.is-visible {
  visibility: visible;
  opacity: 1;
  transition-delay: 0s;
  pointer-events: auto;
}

.volume-modal__panel {
  width: 980px;
  min-height: 470px;
  padding: 65px 78px 58px;
  color: var(--black);
  border: 14px solid var(--blue);
  background: var(--cream);
  box-shadow: 24px 24px 0 rgb(16 18 15 / 32%);
  text-align: center;
}

.volume-modal.is-visible .volume-modal__panel {
  animation: print-panel-arrive 580ms cubic-bezier(.16, 1, .3, 1) both;
}

.volume-modal h2 {
  margin: 0;
  font: 700 76px/.94 'Roboto Condensed', Impact, sans-serif;
  letter-spacing: -2px;
  text-transform: uppercase;
}

.volume-level {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-top: 28px;
}

.volume-level input {
  flex: 1;
  height: 28px;
  accent-color: var(--blue);
}

.volume-level span {
  min-width: 4ch;
  font: 700 32px/1 'Roboto Condensed', Impact, sans-serif;
}

.volume-tests {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 28px;
}

.volume-tests button,
.volume-close {
  border: 0;
  cursor: pointer;
  color: var(--cream);
  background: var(--blue);
  font: 700 32px/1 'Roboto Condensed', Impact, sans-serif;
  letter-spacing: .4px;
  text-transform: uppercase;
}

.volume-tests button {
  width: 220px;
  height: 64px;
}

.volume-tests button.is-on {
  background: var(--red);
}

.volume-close {
  width: 100%;
  height: 74px;
  margin-top: 14px;
}

@keyframes print-panel-arrive {
  from { transform: translateY(42px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

@keyframes print-progress {
  0% { transform: translateX(-110%); }
  100% { transform: translateX(245%); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

@page {
  size: 100mm 148mm;
  margin: 0;
}

@media print {
  html,
  body {
    width: 100mm;
    height: 148mm;
    overflow: hidden;
    background: #fff;
  }

  .stage {
    display: none !important;
  }

  .stage-fit {
    display: none !important;
  }

  .kiosk-shell {
    position: static;
    display: block;
    width: 100mm;
    height: 148mm;
    background: #fff;
  }

  .print-sheet {
    display: block;
    width: 100mm;
    height: 148mm;
    overflow: hidden;
  }

  .print-sheet .postcard {
    width: 100mm;
    height: 148mm;
  }

  .print-sheet .card-copy {
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
  }

  .print-sheet .card-copy__message {
    top: 7mm;
    left: 6mm;
    right: 6mm;
    font-size: 8.5mm;
  }

  .print-sheet .card-copy__name {
    top: 111.7mm;
    left: 5mm;
    right: 5mm;
    font-size: 10.45mm;
  }

  .print-sheet .card-copy__line--1 {
    transform: translateX(-4.6mm);
  }

  .print-sheet .card-copy__line--2 {
    transform: translateX(7.3mm);
  }
}