@property --shine-x {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 50%;
}

@property --shine-y {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 0%;
}

html,
body {
  min-height: 100%;
}

.home-page {
  font-size: 10px;
}

main {
  min-height: 80svh;
  padding: 84px 28px 28px;
  zoom: 1.25;
}

.card {
  --tilt-x: 0deg;
  --tilt-y: 0deg;
  --lift: 0px;
  --card-scale: 1;
  --shadow-x: 0px;
  --shadow-y: 16px;
  --shine-x: 50%;
  --shine-y: 0%;
  --holo-opacity: .3;
  --stub-width: 60px;
  --soot: #041c14;
  --clay: #15392d;
  --ash: #31594c;
  position: relative;
  width: min(456px, 100%);
  height: 240px;
  transition:
    --shine-x 620ms cubic-bezier(.22, .48, .28, 1),
    --shine-y 620ms cubic-bezier(.22, .48, .28, 1);
}

.card.is-interacting {
  transition-duration: 220ms, 220ms;
  transition-timing-function: cubic-bezier(.2, .68, .2, 1), cubic-bezier(.2, .68, .2, 1);
}

.card__visual {
  position: relative;
  width: 100%;
  height: 100%;
  filter:
    drop-shadow(var(--shadow-x) var(--shadow-y) 24px #246c5530)
    drop-shadow(0 2px 5px #15372d21);
  transform: perspective(500px) translateY(var(--lift)) scale(var(--card-scale)) rotateX(var(--tilt-x)) rotateY(var(--tilt-y));
  transform-origin: center;
  transform-style: preserve-3d;
  transition:
    transform 620ms cubic-bezier(.22, .48, .28, 1),
    filter 520ms ease-out;
  will-change: transform, filter;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.card.is-interacting .card__visual {
  transition-duration: 300ms, 260ms;
  transition-timing-function: cubic-bezier(.2, .68, .2, 1), ease-out;
}

.pass {
  position: relative;
  display: grid;
  width: 100%;
  height: 100%;
  overflow: visible;
  color: var(--soot);
  background: transparent;
  grid-template-columns: minmax(0, 1fr) var(--stub-width);
  transform: translateZ(8px);
  transform-style: preserve-3d;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.card.stub-removed .pass {
  width: calc(100% - var(--stub-width));
  margin-left: calc(var(--stub-width) / 2);
  grid-template-columns: minmax(0, 1fr);
}

.pass__main {
  position: relative;
  display: flex;
  min-width: 0;
  overflow: hidden;
  background:
    radial-gradient(circle at var(--shine-x) var(--shine-y), #fff 0, #dff8edcc 13%, transparent 43%),
    linear-gradient(135deg, #f2fbf7 0%, #a7dac4 16%, #e2f5ec 31%, #72ba9c 47%, #c8e7d8 63%, #8acbb1 80%, #f4fbf7 100%);
  box-shadow:
    inset 0 0 22px #ffffffad,
    inset 0 -18px 32px #2175581f;
  clip-path: polygon(9px 0, 100% 0, 100% 100%, 9px 100%, 0 calc(100% - 9px), 0 9px);
  flex-direction: column;
  -webkit-mask-image:
    radial-gradient(circle at 100% 0, transparent 0 6px, #000 6.5px),
    radial-gradient(circle at 100% 100%, transparent 0 6px, #000 6.5px);
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-composite: source-in;
  mask-image:
    radial-gradient(circle at 100% 0, transparent 0 6px, #000 6.5px),
    radial-gradient(circle at 100% 100%, transparent 0 6px, #000 6.5px);
  mask-repeat: no-repeat;
  mask-composite: intersect;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.pass__main::after,
.stub::after {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(circle at var(--shine-x) var(--shine-y), #fff 0 2%, #bdf5ddd6 7%, transparent 21%),
    conic-gradient(from 210deg at var(--shine-x) var(--shine-y), #c9f5df8f, #83cdb382, #c2e4d785, #d7f1df8c, #69b79f8a, #c9f5df8f),
    linear-gradient(112deg, transparent 18%, #fffffff2 38%, #a7ead0a6 45%, #d2f4e59c 51%, #c5eedcad 57%, transparent 72%),
    repeating-linear-gradient(125deg, #ffffff00 0 3px, #ffffff45 3px 4px, #9bd9c235 4px 6px);
  background-position: center, center, var(--shine-x) var(--shine-y), center;
  background-size: 100% 100%, 100% 100%, 230% 230%, 7px 7px;
  content: "";
  filter: saturate(.98) contrast(1.08);
  mix-blend-mode: screen;
  opacity: var(--holo-opacity);
  pointer-events: none;
  transition: opacity 420ms ease-out;
}

.card.is-interacting .pass__main::after,
.card.is-interacting .stub::after {
  transition-duration: 240ms;
}

.pass__main > *,
.stub > div,
.stub > p {
  position: relative;
  z-index: 2;
}

h1,
p,
dl,
dt,
dd {
  margin: 0;
}

.label {
  color: var(--clay);
  font-size: 8.75px;
  letter-spacing: .06em;
  line-height: 1.25;
  text-transform: uppercase;
}

.pass__header {
  display: flex;
  padding: 11px 14px 8px;
  border-bottom: 1px solid var(--ash);
  align-items: center;
  justify-content: space-between;
}

.pass__type {
  font-size: 15px;
  line-height: 1;
}

.ticket-number {
  color: var(--ash);
  font-size: 10px;
}

.summary {
  padding: 11px 14px 12px;
}

h1 {
  margin-top: 4px;
  font-size: clamp(35px, 10vw, 40px);
  font-weight: 400;
  letter-spacing: -.05em;
  line-height: 1;
}

.details {
  display: grid;
  margin: 0 14px;
  border-top: 1px solid #73736c8c;
  border-bottom: 1px solid #73736c4f;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.detail {
  min-width: 0;
  padding: 6px 8px 7px 0;
  border-right: 1px solid var(--ash);
}

.detail:nth-child(3n) {
  padding-right: 0;
  padding-left: 8px;
  border-right: 0;
}

.detail:nth-child(3n + 2) {
  padding-left: 8px;
}

.detail:nth-child(n + 4) {
  border-top: 1px solid var(--ash);
}

.detail__value {
  margin-top: 2px;
  overflow: hidden;
  font-size: 10px;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pass__footer {
  display: flex;
  margin-top: auto;
  padding: 10px 14px 11px;
  align-items: flex-end;
  justify-content: space-between;
  gap: 10px;
}

.notes {
  display: grid;
  min-width: 0;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 4px 7px;
}

.notes__value,
.notes a {
  overflow: hidden;
  color: var(--clay);
  font-size: 8.75px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.notes a {
  color: var(--soot);
  text-decoration-color: var(--ash);
  text-underline-offset: 2px;
}

.barcode {
  display: block;
  width: 42%;
  max-width: 166px;
  height: 32px;
  overflow: visible;
  flex: 0 1 166px;
  shape-rendering: crispEdges;
}

.stub {
  position: relative;
  display: flex;
  padding: 12px 7px;
  border-left: 1px dashed var(--ash);
  background:
    radial-gradient(circle at var(--shine-x) var(--shine-y), #fff 0, #d8f5e9ad 18%, transparent 50%),
    linear-gradient(155deg, #f3fbf7 0%, #91cdb4 38%, #cee9dc 68%, #68b394 100%);
  clip-path: polygon(0 0, calc(100% - 9px) 0, 100% 9px, 100% calc(100% - 9px), calc(100% - 9px) 100%, 0 100%);
  cursor: grab;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  text-align: center;
  -webkit-mask-image:
    radial-gradient(circle at 0 0, transparent 0 6px, #000 6.5px),
    radial-gradient(circle at 0 100%, transparent 0 6px, #000 6.5px);
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-composite: source-in;
  mask-image:
    radial-gradient(circle at 0 0, transparent 0 6px, #000 6.5px),
    radial-gradient(circle at 0 100%, transparent 0 6px, #000 6.5px);
  mask-repeat: no-repeat;
  mask-composite: intersect;
  touch-action: none;
  transform-origin: left center;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transition: transform 180ms ease;
}


.stub.is-dragging {
  cursor: grabbing;
  transform: perspective(380px)
    translate3d(var(--drag-x, 0), var(--drag-y, 0), var(--drag-z, 0))
    rotateY(var(--bend, 0deg))
    rotateZ(var(--twist, 0deg))
    skewY(var(--skew, 0deg))
    scaleX(var(--squash, 1));
  transition: none;
  transform-style: preserve-3d;
}

.stub.is-detaching,
.stub.is-drag-completing {
  pointer-events: none;
  transform-style: preserve-3d;
}

.stub.is-detaching {
  animation: tear-stub 1100ms cubic-bezier(.42, 0, .18, 1) forwards;
}

.paper-curl {
  position: absolute;
  inset: 0;
  z-index: 3;
  background: linear-gradient(90deg, transparent 0 7%, #ffffff9e 18%, #a8ead15c 29%, #164f3d2e 44%, transparent 70%);
  box-shadow: inset 6px 0 10px #ffffff4a, inset -7px 0 12px #164f3d20;
  opacity: 0;
  pointer-events: none;
  transform: translateX(-22%);
  transform-origin: left center;
}

.stub.is-detaching .paper-curl {
  animation: paper-curl 1100ms cubic-bezier(.42, 0, .18, 1) forwards;
}

.stub.is-dragging .paper-curl {
  opacity: var(--curl-opacity, 0);
  transform: translateX(var(--curl-x, -22%));
}


.cut-progress {
  display: none;
  position: absolute;
  top: 0;
  left: -2px;
  z-index: 3;
  width: 4px;
  height: 0;
  background: repeating-linear-gradient(155deg, var(--soot) 0 3px, transparent 3px 5px, var(--soot) 5px 8px);
  opacity: 0;
  pointer-events: none;
}

.stub.is-detaching .cut-progress {
  animation: tear-perforation 900ms linear forwards;
}

.stub.is-dragging .cut-progress {
  height: var(--cut-height, 0%);
  opacity: var(--cut-opacity, 0);
}

.stub.is-drag-completing .cut-progress {
  animation: finish-perforation 420ms linear forwards;
}

.stub.is-torn {
  z-index: 2;
  cursor: default;
  pointer-events: none;
  box-shadow: 0 12px 28px #246c5532;
  transform: perspective(380px)
    translate3d(var(--rest-x, 36px), var(--rest-y, 6px), 8px)
    rotateY(0)
    rotateZ(var(--rest-rotation, 3deg));
  transition: none;
}

@keyframes tear-perforation {
  0% { height: 0; opacity: 1; }
  92% { height: 100%; opacity: 1; }
  100% { height: 100%; opacity: 0; }
}

@keyframes paper-curl {
  0% { opacity: 0; transform: translateX(-22%) scaleX(.96); }
  24% { opacity: .16; }
  52% { opacity: .38; transform: translateX(-10%) scaleX(.92); }
  76% { opacity: .5; transform: translateX(-2%) scaleX(.88); }
  100% { opacity: 0; transform: translateX(6%) scaleX(.94); }
}

@keyframes finish-perforation {
  from { height: var(--cut-height, 45%); opacity: 1; }
  88% { height: 100%; opacity: 1; }
  to { height: 100%; opacity: 0; }
}

@keyframes tear-stub {
  0% {
    box-shadow: inset 0 0 0 #0000;
    transform: perspective(380px) translate3d(0, 0, 0) rotateY(0) rotateZ(0) skewY(0) scaleX(1);
  }
  16% {
    box-shadow: inset 1px 0 3px #0000000b;
    transform: perspective(380px) translate3d(1px, 0, 2px) rotateY(3deg) rotateZ(0) skewY(-.08deg) scaleX(1);
  }
  38% {
    box-shadow: inset 4px 0 7px #00000017;
    transform: perspective(380px) translate3d(10px, 0, 6px) rotateY(14deg) rotateZ(.4deg) skewY(-.25deg) scaleX(.99);
  }
  64% {
    box-shadow: inset 7px 0 11px #00000024;
    transform: perspective(380px) translate3d(27px, 1px, 11px) rotateY(28deg) rotateZ(1.1deg) skewY(-.4deg) scaleX(.97);
  }
  82% {
    box-shadow: inset 5px 0 9px #0000001d;
    transform: perspective(380px) translate3d(42px, 3px, 13px) rotateY(18deg) rotateZ(2deg) skewY(-.2deg) scaleX(.985);
  }
  100% {
    box-shadow: inset 0 0 0 #0000;
    transform: perspective(380px) translate3d(48px, 6px, 8px) rotateY(0) rotateZ(3deg) skewY(0) scaleX(1);
  }
}


.stub__gate {
  margin-top: 5px;
  font-size: 17px;
  letter-spacing: -.03em;
  line-height: 1;
}

.stub__route {
  color: var(--clay);
  font-size: 8.75px;
  letter-spacing: .08em;
  line-height: 1.5;
  writing-mode: vertical-rl;
}

.stub__number {
  color: var(--ash);
  font-size: 10px;
}

@media (max-width: 700px) {
  main {
    min-height: 100svh;
    zoom: 1;
  }
}

@media (max-width: 560px) {
  .card {
    width: min(350px, calc(100vw - 40px));
    height: 400px;
  }

  .pass {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) 72px;
  }

  .pass__main {
    clip-path: polygon(9px 0, calc(100% - 9px) 0, 100% 9px, 100% 100%, 0 100%, 0 9px);
    -webkit-mask-image:
      radial-gradient(circle at 0 100%, transparent 0 6px, #000 6.5px),
      radial-gradient(circle at 100% 100%, transparent 0 6px, #000 6.5px);
    mask-image:
      radial-gradient(circle at 0 100%, transparent 0 6px, #000 6.5px),
      radial-gradient(circle at 100% 100%, transparent 0 6px, #000 6.5px);
  }

  h1 {
    font-size: 40px;
  }

  .details {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .detail:nth-child(n) {
    padding: 8px 10px 8px 0;
    border-right: 1px solid var(--ash);
  }

  .detail:nth-child(2n) {
    padding-right: 0;
    padding-left: 10px;
    border-right: 0;
  }

  .detail:nth-child(2n + 1) {
    padding-left: 0;
  }

  .detail:nth-child(n + 3) {
    border-top: 1px solid var(--ash);
  }

  .stub {
    padding: 10px 14px;
    border-top: 1px dashed var(--ash);
    border-left: 0;
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 9px), calc(100% - 9px) 100%, 9px 100%, 0 calc(100% - 9px));
    flex-direction: row;
    text-align: left;
    transform-origin: center top;
    -webkit-mask-image:
      radial-gradient(circle at 0 0, transparent 0 6px, #000 6.5px),
      radial-gradient(circle at 100% 0, transparent 0 6px, #000 6.5px);
    mask-image:
      radial-gradient(circle at 0 0, transparent 0 6px, #000 6.5px),
      radial-gradient(circle at 100% 0, transparent 0 6px, #000 6.5px);
  }

  .stub.is-dragging {
    transform: perspective(380px)
      translate3d(var(--drag-x, 0), var(--drag-y, 0), var(--drag-z, 0))
      rotateX(var(--bend, 0deg))
      rotateZ(var(--twist, 0deg))
      skewX(var(--skew, 0deg))
      scaleY(var(--squash, 1));
  }

  .paper-curl {
    background: linear-gradient(180deg, transparent 0 7%, #ffffff9e 18%, #a8ead15c 29%, #164f3d2e 44%, transparent 70%);
    box-shadow: inset 0 6px 10px #ffffff4a, inset 0 -7px 12px #164f3d20;
    transform: translateY(-22%);
    transform-origin: center top;
  }

  .stub.is-dragging .paper-curl {
    transform: translateY(var(--curl-y, -22%));
  }

  .stub__gate {
    margin-top: 3px;
  }

  .stub__route {
    writing-mode: horizontal-tb;
  }
}

@media (max-width: 420px) {
  main {
    padding: 68px 20px 20px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .card__visual {
    filter: drop-shadow(0 12px 18px #2530392e);
    transform: none;
    transition: none;
  }

  .pass__main::after,
  .stub::after {
    opacity: .16;
    transition: none;
  }

  .stub,
  .stub.is-detaching,
  .stub.is-drag-completing,
  .stub.is-torn {
    animation: none;
    transition: none;
  }
}