/* The way in: the ticket window, the pass on the counter and the conductor's punch (signin.js).
   Everything is under .signin.ticket so the old time-clock wall's rules (board.css, still used inside the office) never
   reach it. */

.signin.ticket { background: #0b0806; }
.ticket .si-stage {
  position: absolute;
  inset: 0;
  transform-origin: 50% 46%;
  transition: transform 0.65s cubic-bezier(.4, 0, .6, 1), filter 0.65s ease;
}
/* Leaving: the window draws away from you into the dark, no jump. */
.signin.ticket.leaving .si-stage { transform: scale(0.93); filter: brightness(0.4); }

.ticket .si-frame { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
.ticket .si-plate { position: absolute; inset: 0; width: 100%; height: 100%; user-select: none; }

/* The lamp behind the grille breathes a little. */
.ticket .si-lamp {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 214, 150, 0.22), rgba(255, 170, 90, 0.07) 55%, transparent);
  mix-blend-mode: screen;
  pointer-events: none;
  animation: si-lamp 4.2s ease-in-out infinite;
}
@keyframes si-lamp { 0%, 100% { opacity: 0.7; transform: scale(1); } 40% { opacity: 1; transform: scale(1.04, 1.06); } 70% { opacity: 0.82; transform: scale(0.99); } }

/* The same picture out of focus behind the sharp one, when the window is taller than the picture (a phone held up). */
.ticket .si-haze { display: none; }
.ticket.short .si-haze {
  display: block;
  position: absolute;
  inset: -40px;
  background-size: cover;
  background-position: 50% 62%;
  filter: blur(18px) brightness(0.34) saturate(0.85);
  transform: scale(1.08);
}
.ticket.short .si-frame {
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(180deg, transparent, #000 8%, #000 92%, transparent);
}

/* ---------- The counter, in the photograph's perspective ---------- */

.ticket .si-desk { position: absolute; inset: 0; pointer-events: none; }
.ticket .si-desk.through { clip-path: var(--clip); }
.ticket .si-plane {
  position: absolute;
  left: 0;
  top: 0;
  transform-origin: 50% 50%;
  transform-style: preserve-3d;
}
.ticket .si-pass { position: absolute; left: 0; top: 0; width: 520px; height: 300px; }
/* Lying flat, the card's shadow is close and soft. */
.ticket .si-pass-shade {
  position: absolute;
  inset: 0;
  border-radius: 9px;
  background: rgba(16, 6, 0, 0.62);
  filter: blur(6px);
  transform: translate(3px, 9px) scale(1.01);
}
.ticket .si-pass-body {
  position: absolute;
  inset: 0;
  /* the lamp's warm light, and the card's own thickness (it also shows in the punched holes) */
  filter: drop-shadow(0 1.2px 0.6px rgba(26, 10, 0, 0.7)) brightness(0.86);
}

.ticket .si-card {
  all: unset;
  position: absolute;
  inset: 0;
  display: block;
  box-sizing: border-box;
  border-radius: 9px;
  color: #2a1e12;
  background-color: #e6d6b0;
  background-image:
    radial-gradient(120% 90% at 30% 0%, rgba(255, 248, 230, 0.35), transparent 60%),
    var(--img-paper, none);
  background-size: auto, 620px 620px;
  background-blend-mode: normal, multiply;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  font-family: var(--font-type);
  user-select: none;
  overflow: hidden;
}
.ticket .si-card::before { content: none; }
/* Further from the lamp, the near end of the card is a shade darker. */
.ticket .si-card::after {
  content: '';
  position: absolute;
  inset: 0;
  /* the lamp's warm light from behind the grille: strongest on the far edge, falling off toward you */
  background:
    radial-gradient(90% 70% at 40% -10%, rgba(255, 226, 180, 0.5), transparent 70%),
    linear-gradient(180deg, rgba(255, 200, 140, 0.55), rgba(196, 128, 72, 0.7));
  mix-blend-mode: multiply;
  pointer-events: none;
}

/* Printed in signal red: the double rule, the boxes, the kind of pass, the serial. */
.ticket .si-rule { position: absolute; inset: 11px; border: 2px solid rgba(150, 38, 26, 0.86); border-radius: 4px; }
.ticket .si-rule::after { content: ''; position: absolute; inset: 3px; border: 1px solid rgba(150, 38, 26, 0.7); border-radius: 2px; }
.ticket .si-head { position: absolute; left: 24px; right: 24px; top: 22px; text-align: center; }
.ticket .si-co {
  font-family: var(--font-deco);
  font-size: 24px;
  line-height: 28px;
  letter-spacing: 0.02em;
  color: #24170c;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: clip;
}
.ticket .si-kind {
  margin-top: 4px;
  font-family: var(--font-stencil);
  font-weight: 600;
  font-size: 13px;
  line-height: 16px;
  letter-spacing: 0.44em;
  text-transform: uppercase;
  color: rgba(150, 38, 26, 0.92);
}
.ticket .si-line {
  position: absolute;
  left: 34px;
  right: 34px;
  height: 22px;
  display: flex;
  align-items: flex-end;
  gap: 8px;
  font-family: var(--font-old);
  font-style: italic;
  font-size: 16px;
  line-height: 1;
}
.ticket .si-line b { flex: 1; border-bottom: 1px dotted rgba(42, 30, 18, 0.7); height: 1px; margin-bottom: 3px; }
.ticket .si-line.l1 { top: 78px; }
.ticket .si-line.l2 { top: 106px; }
.ticket .si-no { position: absolute; left: 40px; top: 176px; font-family: var(--font-old); font-size: 22px; font-style: italic; }
.ticket .si-box {
  position: absolute;
  box-sizing: border-box;
  border: 1.5px solid rgba(150, 38, 26, 0.78);
  border-radius: 2px;
  box-shadow: inset 0 0 0 3px rgba(150, 38, 26, 0.06);
}
.ticket .si-dash { position: absolute; width: 14px; height: 2px; background: rgba(42, 30, 18, 0.75); }
.ticket .si-hint {
  position: absolute;
  left: 0;
  right: 0;
  top: 233px;
  text-align: center;
  font-family: var(--font-stencil);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(42, 30, 18, 0.72);
}
.ticket .si-fine { position: absolute; left: 34px; bottom: 22px; font: italic 11px/1 var(--font-old); color: rgba(42, 30, 18, 0.7); }
.ticket .si-serial { position: absolute; right: 30px; bottom: 20px; font: 14px/1 var(--font-type); letter-spacing: 0.08em; color: rgba(150, 38, 26, 0.9); }
.ticket .si-card.read .si-hint, .ticket .si-card.spoiled .si-hint { opacity: 0; }

/* The fibres crushed round each punched hole. */
.ticket .si-rims { position: absolute; inset: 0; pointer-events: none; }
.ticket .si-rims circle { fill: none; stroke: rgba(74, 48, 22, 0.42); stroke-width: 1.1; }

/* A fresh blank laid over a box (Backspace). */
.ticket .si-patch {
  position: absolute;
  background-color: #efe6cc;
  background-image: var(--img-paper, none);
  background-size: 620px 620px;
  background-blend-mode: multiply;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}

/* What the agent puts on it. */
.ticket .si-ink { position: absolute; inset: 0; pointer-events: none; }
.ticket .si-ink .si-name {
  position: absolute;
  font-family: var(--font-hand);
  font-weight: 600;
  font-size: 30px;
  line-height: 1;
  white-space: nowrap;
  color: var(--ink-blue);
  mix-blend-mode: multiply;
  transform: rotate(-1.5deg);
}
.ticket .si-ink .si-rank {
  position: absolute;
  font-family: var(--font-hand);
  font-size: 25px;
  line-height: 1;
  letter-spacing: 0;
  text-transform: none;
  white-space: nowrap;
  color: var(--ink-blue);
  mix-blend-mode: multiply;
  transform: rotate(-1deg);
}
.ticket .si-ink .si-state {
  position: absolute;
  left: 30px;
  right: 30px;
  top: 226px;
  margin: 0;
  font-family: var(--font-hand);
  font-size: 21px;
  line-height: 1.02;
  text-align: center;
  color: var(--graphite);
  mix-blend-mode: multiply;
  transform: rotate(-1deg);
}
.ticket .si-stamp {
  position: absolute;
  left: 356px;
  top: 58px;
  width: 128px;
  height: 80px;
  box-sizing: border-box;
  display: grid;
  place-items: center;
  align-content: center;
  border: 3px solid currentColor;
  border-radius: 50%;
  box-shadow: inset 0 0 0 3px transparent, inset 0 0 0 4.5px currentColor;
  color: #4a2f7a;
  font-family: var(--font-stamp);
  line-height: 1;
  opacity: 0.86;
  mix-blend-mode: multiply;
  filter: url(#ink-bleed);
  transform: rotate(-11deg);
}
.ticket .si-stamp-co { font-size: 10px; letter-spacing: 0.24em; text-transform: uppercase; }
.ticket .si-stamp-day { margin: 3px 0; font-size: 24px; letter-spacing: 0.06em; }
.ticket .si-red {
  position: absolute;
  left: 56px;
  right: 40px;
  top: 64px;
  margin: 0;
  font-family: var(--font-hand);
  font-weight: 600;
  font-size: 34px;
  line-height: 0.98;
  text-align: center;
  text-wrap: balance;
  color: var(--ink-red);
  mix-blend-mode: multiply;
  transform: rotate(-5deg);
  filter: url(#pencil);
}
.ticket .si-strike { position: absolute; inset: 0; pointer-events: none; }
.ticket .si-strike path { fill: none; stroke: var(--ink-red); stroke-width: 3; stroke-linecap: round; opacity: 0.8; mix-blend-mode: multiply; }

/* Chads from the punch, on the counter. */
.ticket .si-chads { position: absolute; left: 0; top: 0; transform-style: preserve-3d; }
.ticket .si-chad {
  position: absolute;
  left: -1.8px;
  top: -1.8px;
  width: 3.6px;
  height: 3.6px;
  border-radius: 50%;
  background: #c4ab80;
  box-shadow: 0 0.6px 0.8px rgba(0, 0, 0, 0.5);
  opacity: 0;
}

/* The conductor's punch and its shadow. */
.ticket .si-punch, .ticket .si-punch-shade {
  position: absolute;
  left: 0;
  top: 0;
  max-width: none;
  user-select: none;
  pointer-events: none;
}
/* the nickel takes the lamp's warmth and the room's dimness */
.ticket .si-punch { filter: brightness(0.62) sepia(0.4) saturate(1.25) contrast(1.1); }

/* The field a phone types into: over the whole window, unseen. */
.ticket .si-input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 3;
  opacity: 0;
  border: 0;
  padding: 0;
  font-size: 16px;
  caret-color: transparent;
  cursor: default;
}
/* The answer, for screen readers (the eye reads it on the pass). */
.ticket .si-msg {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* The bell on the counter can be rung. */
.ticket .si-bell {
  position: absolute;
  z-index: 4;
  padding: 0;
  border: 0;
  border-radius: 45% 45% 30% 30%;
  background: none;
  cursor: pointer;
}
.ticket .si-bell i {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(40% 32% at 50% 48%, rgba(255, 220, 150, 0.32), transparent 70%);
  mix-blend-mode: screen;
  opacity: 0;
  transition: opacity 0.4s ease;
}
.ticket .si-bell:hover i, .ticket .si-bell:focus-visible i { opacity: 0.6; }
.ticket .si-bell.rung i { animation: si-ring 1.1s ease-out; }
@keyframes si-ring { 0% { opacity: 0.6; } 15% { opacity: 1; } 100% { opacity: 0.6; } }

@media (prefers-reduced-motion: reduce) {
  .ticket .si-lamp { animation: none; }
  .ticket .si-stage { transition-duration: 0.3s; }
  .signin.ticket.leaving .si-stage { transform: none; }
}

/* The blank laid over a box takes the same lamplight as the pass under it. */
.ticket .si-patch::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255, 200, 140, 0.6), rgba(214, 150, 92, 0.66));
  mix-blend-mode: multiply;
  pointer-events: none;
}