/* Login: a ticket under the follow spots, inside the big top. */

.login {
  min-height: 100vh; min-height: 100dvh; background: var(--ct-dark); color: #fff; overflow: hidden;
  display: grid; grid-template-rows: auto 1fr auto; position: relative;
}

/* looking up into the tent: stripes running to the king pole */
.tent {
  position: fixed; inset: -10% -20% 0; pointer-events: none;
  background: repeating-conic-gradient(from 3.75deg at 50% 0%, rgba(254, 58, 36, .13) 0 7.5deg, transparent 7.5deg 15deg);
  -webkit-mask: radial-gradient(ellipse 75% 95% at 50% 0%, #000 0%, rgba(0, 0, 0, .55) 45%, transparent 100%);
          mask: radial-gradient(ellipse 75% 95% at 50% 0%, #000 0%, rgba(0, 0, 0, .55) 45%, transparent 100%);
  animation: tentIn 1.2s ease both;
}
@keyframes tentIn { from { opacity: 0; } }

.beam {
  position: fixed; left: 0; top: 0; width: 420px; height: 900px; margin-left: -210px; pointer-events: none;
  transform-origin: 50% 0; will-change: transform, height;
  background: linear-gradient(to bottom, rgba(255, 241, 224, .30), rgba(255, 241, 224, .09) 55%, rgba(255, 241, 224, 0));
  clip-path: polygon(47.5% 0, 52.5% 0, 100% 100%, 0 100%);
  filter: blur(7px); mix-blend-mode: screen;
  animation: lampOn .9s steps(1) both;
}
.beam--right { animation-delay: .12s; }
@keyframes lampOn { 0% { opacity: 0; } 18% { opacity: .9; } 26% { opacity: .2; } 38% { opacity: 1; } 100% { opacity: 1; } }

.pool {
  position: fixed; left: 0; top: 0; width: 760px; height: 760px; margin: -380px 0 0 -380px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(255, 238, 214, .20) 0%, rgba(255, 238, 214, .07) 38%, transparent 66%);
  will-change: transform; animation: tentIn .9s .3s ease both;
}

.login__top, .login__foot, .login__stage { position: relative; z-index: 2; }
.login__top { display: flex; align-items: center; justify-content: flex-end; padding: 26px 32px; min-height: 63px; }
.login__door { font: 600 11px/1 var(--ct-font); letter-spacing: .08em; text-transform: uppercase; color: var(--ct-n-500); }
.login__foot { padding: 22px 32px 26px; text-align: center; font: 600 12px/1.3 var(--ct-font); color: var(--ct-n-700); }

.login__stage { display: grid; place-items: center; padding: 8px 20px; }

/* ---------- the ticket ---------- */
.pass { width: min(800px, 100%); perspective: 1500px; animation: passIn .8s cubic-bezier(.16, 1, .3, 1) both .1s; }
@keyframes passIn { from { opacity: 0; transform: translateY(60px) rotate(-3deg) scale(.96); } }
.pass.shake { animation: shake .4s ease; }
@keyframes shake { 20% { transform: translateX(-9px); } 40% { transform: translateX(8px); } 60% { transform: translateX(-5px); } 80% { transform: translateX(3px); } }

.pass__tilt {
  --rx: 0deg; --ry: 0deg; --sx: 50%;
  display: grid; grid-template-columns: minmax(0, 1fr) 232px;
  transform: rotateX(var(--rx)) rotateY(var(--ry));
  filter: drop-shadow(0 40px 50px rgba(0, 0, 0, .55));
}

.pass__main {
  position: relative; overflow: hidden; background: var(--ct-surface); color: var(--ct-ink);
  border-radius: 28px 0 0 28px; padding: 38px 40px 34px; display: flex; flex-direction: column;
  -webkit-mask: radial-gradient(circle 14px at 100% 0, #0000 97%, #000), radial-gradient(circle 14px at 100% 100%, #0000 97%, #000);
          mask: radial-gradient(circle 14px at 100% 0, #0000 97%, #000), radial-gradient(circle 14px at 100% 100%, #0000 97%, #000);
  -webkit-mask-composite: source-in; mask-composite: intersect;
}
.pass__sheen {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, transparent calc(var(--sx) - 26%), rgba(254, 58, 36, .07) var(--sx), transparent calc(var(--sx) + 26%));
}
.pass__brand { margin: auto 0; padding: 26px 0 30px; display: grid; justify-items: start; gap: 14px; position: relative; }
.pass__logo { display: block; width: min(100%, 440px); height: auto; }
.pass__title {
  font-size: 40px; line-height: 1; letter-spacing: .02em; color: var(--ct-red);
  padding-left: 2px; /* lines the B up with the C of the logo */
}
.pass__how { font: 500 13px/1.4 var(--ct-font); color: var(--ct-ink-3); position: relative; }
.pass__error { margin: 8px 0 0; font: 600 13px/1.4 var(--ct-font); color: var(--ct-red-ink, #c4321c); position: relative; }


/* ---------- the stub ---------- */
.pass__stub {
  position: relative; overflow: hidden; background: var(--ct-red); color: #fff; border-radius: 0 28px 28px 0; padding: 34px 24px 26px 26px;
  display: flex; flex-direction: column; gap: 18px; border-left: 2px dashed rgba(255, 255, 255, .6);
  -webkit-mask: radial-gradient(circle 14px at 0 0, #0000 97%, #000), radial-gradient(circle 14px at 0 100%, #0000 97%, #000);
          mask: radial-gradient(circle 14px at 0 0, #0000 97%, #000), radial-gradient(circle 14px at 0 100%, #0000 97%, #000);
  -webkit-mask-composite: source-in; mask-composite: intersect;
  transform-origin: 0 0; transition: background .2s;
}
.stub__admit { font-size: 50px; line-height: .86; }
.stub__facts { margin: 0; display: grid; gap: 10px; }
.stub__facts div { display: grid; gap: 3px; }
.stub__facts dt { font: 600 9.5px/1 var(--ct-font); letter-spacing: .1em; text-transform: uppercase; color: rgba(255, 255, 255, .78); }
.stub__facts dd { margin: 0; font: 700 14px/1.2 var(--ct-font); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stub__code { margin-top: auto; height: 46px; display: flex; gap: 0; background: #fff; border-radius: 8px; padding: 7px 9px; }
.stub__code i { background: var(--ct-ink); display: block; }
.stub__go { width: 100%; height: 46px; font-size: 14px; gap: 9px; text-decoration: none; }
.stub__g { width: 18px; height: 18px; flex: none; transition: transform .2s var(--ease); }
.stub__go:hover .stub__g { transform: rotate(-12deg) scale(1.08); }

.stub__scan {
  position: absolute; left: 0; right: 0; top: -30%; height: 28%; pointer-events: none; opacity: 0;
  background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, .55) 88%, #fff 100%);
}
.stub__valid {
  position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 8px; background: var(--ct-green);
  font: 700 15px/1 var(--ct-font); opacity: 0; pointer-events: none; transition: opacity .12s;
}
.stub__valid .ms { font-size: 54px; transform: scale(.4); transition: transform .28s cubic-bezier(.34, 1.56, .64, 1); }

.is-scanning .stub__scan { opacity: 1; animation: scan .32s linear both; }
@keyframes scan { to { top: 100%; } }
.is-valid .stub__valid { opacity: 1; }
.is-valid .stub__valid .ms { transform: scale(1); }
.is-torn .pass__stub { animation: tear .5s cubic-bezier(.5, 0, .9, .4) both; }
@keyframes tear {
  12% { transform: translate(5px, -3px) rotate(-1.5deg); }
  100% { transform: translate(70px, 190px) rotate(16deg); opacity: 0; }
}
.is-torn .pass__main { animation: recoil .45s var(--ease) both; }
@keyframes recoil { 30% { transform: translateX(-7px) rotate(-.5deg); } }

.curtain {
  --cx: 50%; --cy: 50%;
  position: fixed; inset: 0; z-index: 50; background: var(--ct-red); pointer-events: none;
  clip-path: circle(0 at var(--cx) var(--cy)); transition: clip-path .46s cubic-bezier(.6, 0, .9, .5);
}
.curtain.is-closing { clip-path: circle(150vmax at var(--cx) var(--cy)); }

/* ---------- small screens: the stub hangs below ---------- */
@media (max-width: 720px) {
  .login { overflow-y: auto; }
  .login__top { padding: 20px; }
  .pass__tilt { grid-template-columns: minmax(0, 1fr); transform: none; }
  .pass__main {
    border-radius: 24px 24px 0 0; padding: 28px 24px 26px;
    -webkit-mask: radial-gradient(circle 13px at 0 100%, #0000 97%, #000), radial-gradient(circle 13px at 100% 100%, #0000 97%, #000);
            mask: radial-gradient(circle 13px at 0 100%, #0000 97%, #000), radial-gradient(circle 13px at 100% 100%, #0000 97%, #000);
    -webkit-mask-composite: source-in; mask-composite: intersect;
  }
  .pass__brand { padding: 18px 0 22px; }
  .pass__title { font-size: 32px; }
  .pass__stub {
    border-radius: 0 0 24px 24px; border-left: 0; border-top: 2px dashed rgba(255, 255, 255, .6); padding: 22px 24px; gap: 14px;
    -webkit-mask: radial-gradient(circle 13px at 0 0, #0000 97%, #000), radial-gradient(circle 13px at 100% 0, #0000 97%, #000);
            mask: radial-gradient(circle 13px at 0 0, #0000 97%, #000), radial-gradient(circle 13px at 100% 0, #0000 97%, #000);
    -webkit-mask-composite: source-in; mask-composite: intersect;
  }
  .stub__admit { font-size: 38px; }
  .stub__facts { grid-template-columns: repeat(3, auto); justify-content: space-between; }
  .stub__code { display: none; }
  .beam { display: none; }
}