/* hop432.com: Joel's contact card. Gold on black like his logo and his dot.cards profile, set in
   the same three families as the full site. A laminated backstage pass hangs on a lanyard, its clasp
   hooked through the slot; the room behind it takes the colour of whatever photo is in the window. */

@font-face { font-family: "Archivo"; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/archivo-400.woff2) format("woff2"); }
@font-face { font-family: "Archivo"; font-style: normal; font-weight: 500; font-display: swap; src: url(/fonts/archivo-500.woff2) format("woff2"); }
@font-face { font-family: "Archivo"; font-style: normal; font-weight: 700; font-display: swap; src: url(/fonts/archivo-700.woff2) format("woff2"); }
@font-face { font-family: "Anybody"; font-style: normal; font-weight: 100 900; font-stretch: 50% 150%; font-display: swap; src: url(/fonts/anybody.woff2) format("woff2-variations"), url(/fonts/anybody.woff2) format("woff2"); }
@font-face { font-family: "Martian Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/martian-400.woff2) format("woff2"); }
@font-face { font-family: "Martian Mono"; font-style: normal; font-weight: 600; font-display: swap; src: url(/fonts/martian-600.woff2) format("woff2"); }

@property --tint { syntax: "<color>"; inherits: true; initial-value: #3f8fe8; }

:root {
  color-scheme: dark;
  --ink: #09090a;
  --fg: #f4efe4; --dim: #a8a296; --faint: #6e695f;
  --line: rgba(255, 255, 255, .09); --line-2: rgba(255, 255, 255, .17);
  --gold: #dcb44c; --gold-hi: #f5dc8c; --gold-ink: #171104;
  --foil: linear-gradient(112deg, #8a6412 0%, #d0a13a 16%, #f8e396 30%, #d9aa3e 44%, #94701a 58%, #ecca6c 74%, #a47a1b 88%, #f3da8e 100%);
  --wide: "Anybody", "Archivo", system-ui, sans-serif;
  --sans: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Martian Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --tint: #3f8fe8;
  --pivot: 150px;
  transition: --tint 1.6s ease;
}

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--ink); -webkit-text-size-adjust: 100%; }
body { margin: 0; min-height: 100vh; min-height: 100svh; background: var(--ink); color: var(--fg); font-family: var(--sans); font-size: 16px; line-height: 1.55;
  overflow-x: hidden; -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; }
html.is-locked, html.is-locked body { overflow: hidden; }
img { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--gold-hi); outline-offset: 3px; }
.i { width: 20px; height: 20px; flex: none; }

/* ---------- the room ---------- */
.stage { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden;
  background:
    radial-gradient(110% 60% at 50% -8%, color-mix(in oklab, var(--tint) 34%, transparent), transparent 62%),
    radial-gradient(80% 50% at 50% 108%, rgba(220, 180, 76, .07), transparent 70%),
    var(--ink); }
.beam { position: absolute; top: -4vh; width: 90vmax; height: 130vh; transform-origin: 50% 0; opacity: .5;
  background: conic-gradient(from 180deg at 50% 0%, transparent 0deg 168deg, color-mix(in oklab, var(--tint) 42%, transparent) 180deg, transparent 192deg 360deg); }
.beam--l { left: calc(-45vmax + 6vw); transform: rotate(-24deg); animation: sweep-l 13s ease-in-out infinite alternate; }
.beam--r { right: calc(-45vmax + 6vw); transform: rotate(24deg); animation: sweep-r 11s ease-in-out infinite alternate; }
@keyframes sweep-l { from { transform: rotate(-34deg); } to { transform: rotate(-12deg); } }
@keyframes sweep-r { from { transform: rotate(12deg); } to { transform: rotate(34deg); } }
.haze { position: absolute; inset: 0; opacity: .07;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .6 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

/* ---------- top line ---------- */
.top { position: relative; z-index: 6; display: flex; justify-content: flex-end; max-width: 1240px; margin: 0 auto;
  padding: max(12px, env(safe-area-inset-top)) max(14px, env(safe-area-inset-right)) 0 max(14px, env(safe-area-inset-left)); }
.pill { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 13px; border-radius: 99px; border: 1px solid var(--line); cursor: pointer;
  background: rgba(12, 12, 13, .7); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: var(--fg); font-size: 13.5px; font-weight: 500; }
.pill .i { width: 17px; height: 17px; color: var(--gold); }
.pill:hover { border-color: var(--line-2); }

/* ---------- the pass on its lanyard ---------- */
.page { position: relative; z-index: 2; }
.hero { position: relative; display: flex; flex-direction: column; align-items: center; padding: 76px 16px 0; }
.drop { animation: drop 1.05s cubic-bezier(.2, .9, .25, 1.12) both; }
@keyframes drop { from { transform: translateY(-120%); } to { transform: none; } }
/* A size container, so the straps can be measured in hundredths of the card's width (cqw) and meet
   the clasp at the same point whatever size the card is drawn at. */
.rig { position: relative; width: clamp(232px, min(80vw, calc((100svh - 250px) * .714)), 330px); perspective: 1500px; container-type: inline-size;
  transform-origin: 50% calc(-1 * var(--pivot)); transform: rotate(var(--swing, 0deg)); }
.rig::before { content: ""; position: absolute; inset: 14% -22% -8%; z-index: -1; border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in oklab, var(--tint) 30%, transparent), transparent); }

.lanyard { position: absolute; left: 50%; top: 0; width: 0; height: 0; z-index: 1; pointer-events: none; }
.strap { position: absolute; bottom: 15cqw; width: 6.4cqw; height: 70vh; transform-origin: 50% 100%; overflow: hidden;
  background:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, .045) 0 1px, transparent 1px 3px),
    linear-gradient(90deg, #0c0c0d, #1e1e22 50%, #0c0c0d);
  border-left: 1px solid rgba(220, 180, 76, .45); border-right: 1px solid rgba(220, 180, 76, .45);
  box-shadow: 0 10px 18px rgba(0, 0, 0, .55); }
.strap--l { left: -5cqw; transform: rotate(-7deg); }
.strap--r { left: -1.4cqw; transform: rotate(7deg); }
.strap-t { position: absolute; left: 0; right: 0; bottom: 6px; writing-mode: vertical-rl; transform: rotate(180deg);
  font-family: var(--mono); font-weight: 600; font-size: 2.7cqw; letter-spacing: .32em; line-height: calc(6.4cqw - 2px); white-space: nowrap; color: var(--gold); }
.strap--r .strap-t { transform: none; top: 6px; bottom: auto; }
.strap-t b { font-weight: 400; color: rgba(245, 220, 140, .6); }

.pass { position: relative; z-index: 2; width: 100%; aspect-ratio: 5 / 7; container-type: inline-size; transform-style: preserve-3d;
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .7s cubic-bezier(.2, .8, .2, 1);
  touch-action: pan-y; cursor: grab; -webkit-user-select: none; user-select: none; }
.pass.is-live { transition: none; }
.pass.is-dragging { cursor: grabbing; }
/* the clear laminate sleeve, a little bigger than the card, behind it */
.pass::before { content: ""; position: absolute; inset: -1.8cqw; border-radius: 7cqw; transform: translateZ(-2px);
  background: linear-gradient(155deg, rgba(255, 255, 255, .2), rgba(255, 255, 255, .05) 34%, rgba(255, 255, 255, .02) 66%, rgba(255, 255, 255, .13));
  border: 1px solid rgba(255, 255, 255, .24);
  box-shadow: 0 50px 70px -38px rgba(0, 0, 0, .95), 0 34px 70px -34px color-mix(in oklab, var(--tint) 60%, transparent); }
/* The crimp and the lobster clasp (see card-page.js). It lives inside the pass so it tilts with the
   card, but outside the part that flips, so it stays put while the card turns over. */
.clasp { position: absolute; left: 44cqw; top: -17cqw; width: 12cqw; height: 22cqw; z-index: 3; pointer-events: none;
  transform: translateZ(3px); filter: drop-shadow(0 .5cqw .45cqw rgba(0, 0, 0, .6)); }
.pass-in { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform 1s cubic-bezier(.3, .7, .2, 1.06); }
.pass.is-flipped .pass-in { transform: rotateY(180deg); }

.face { position: absolute; inset: 0; display: flex; flex-direction: column; overflow: hidden; border-radius: 5.4cqw;
  padding: 12cqw 4.8cqw 4.6cqw; -webkit-backface-visibility: hidden; backface-visibility: hidden;
  background: radial-gradient(130% 70% at 50% 0%, #212125 0%, #121214 52%, #0b0b0c 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); }
/* fine guilloche lines in the corner, like a printed credential */
.face::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .85;
  background: repeating-radial-gradient(circle at 112% -6%, rgba(220, 180, 76, .085) 0 1px, transparent 1px 6px); }
.back { transform: rotateY(180deg); }
.face > * { position: relative; }

/* The slot, punched through the card. The clasp's hook passes through it: its legs come down over the
   card and are cut off at the slot's top edge (the SVG's clip), and here they carry on inside the hole,
   in the hole's shadow, turning under as a U. */
.slot { position: absolute !important; left: 50%; top: 3.2cqw; width: 20cqw; height: 4.8cqw; margin-left: -10cqw; border-radius: 99px; overflow: hidden;
  background: radial-gradient(120% 150% at 50% 0%, #000 0 45%, #0d0d10 100%);
  box-shadow: inset 0 1px 2.5px rgba(0, 0, 0, .95), 0 1px 0 rgba(255, 255, 255, .12); }
.slot::after { content: ""; position: absolute; left: 50%; top: -.6cqw; width: 5.3cqw; height: 3.5cqw; margin-left: -2.65cqw;
  border: 1.1cqw solid; border-top: 0; border-color: #a9aeb5 #6f737a #585c62 #8d9299; border-radius: 0 0 2.65cqw 2.65cqw; }
.slot::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(to bottom, rgba(0, 0, 0, .7), rgba(0, 0, 0, .15) 55%, transparent); }

.band { display: flex; align-items: center; justify-content: space-between; gap: 3cqw; margin: 0 -4.8cqw; padding: 2.5cqw 4.8cqw 2.3cqw;
  background: var(--foil); background-size: 240% 100%; background-position: var(--mx, 35%) 0; color: #140e02;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), inset 0 -1px 0 rgba(0, 0, 0, .35); overflow: hidden; }
.band::after { content: ""; position: absolute; inset: 0; pointer-events: none; mix-blend-mode: overlay; background-size: 260% 100%; background-position: var(--mx, 35%) 0;
  background-image: linear-gradient(100deg, transparent 18%, rgba(255, 110, 210, .5) 34%, rgba(110, 230, 255, .5) 50%, rgba(255, 245, 150, .55) 66%, transparent 82%); }
.band-a { font-family: var(--wide); font-stretch: 150%; font-weight: 900; font-size: 7.3cqw; line-height: .9; letter-spacing: -.01em; text-transform: uppercase; white-space: nowrap; }
.band-b { flex: none; font-family: var(--mono); font-weight: 600; font-size: 2.2cqw; line-height: 1.25; letter-spacing: .12em; text-transform: uppercase; text-align: right; }

.window { margin: 4.2cqw 0 0; aspect-ratio: 16 / 10.2; border-radius: 2.8cqw; overflow: hidden; background: #000;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .1), 0 8px 18px -10px rgba(0, 0, 0, .9); }
.window img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1.3s ease; }
.window img.is-on { opacity: 1; animation: kb 7.5s ease-out both; }
.window img:nth-of-type(2n) { --kx: -2.5%; --ky: 1%; }
.window img:nth-of-type(3n) { --kx: 1.5%; --ky: -2%; }
@keyframes kb { from { transform: scale(1.14) translate3d(var(--kx, 2%), var(--ky, 1.5%), 0); } to { transform: scale(1.02); } }
.window-cap { position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: space-between; padding: 7cqw 2.8cqw 2.2cqw;
  background: linear-gradient(to top, rgba(0, 0, 0, .66), transparent); font-family: var(--mono); font-size: 2.3cqw; letter-spacing: .16em; text-transform: uppercase; color: #fff; }
.window-btn { position: absolute; top: 2.4cqw; right: 2.4cqw; width: max(28px, 8.4cqw); height: max(28px, 8.4cqw); border-radius: 50%; padding: 0; cursor: pointer;
  display: grid; place-items: center; background: rgba(0, 0, 0, .45); border: 1px solid rgba(255, 255, 255, .28); color: #fff; }
.window-btn .i { width: 55%; height: 55%; stroke-width: 2.4; }

.name { margin: 4.4cqw 0 0; font-family: var(--wide); font-stretch: 150%; font-weight: 900; font-size: 13.2cqw; line-height: .86; letter-spacing: -.012em; text-transform: uppercase; }
.name span { display: block; }
.name-last, .back-url { background: linear-gradient(100deg, #a77d1e 0%, #f8e5a4 24%, #cf9f38 44%, #fff4c8 58%, #aa811f 78%, #f0cf78 100%);
  background-size: 230% 100%; background-position: var(--mx, 40%) 0; -webkit-background-clip: text; background-clip: text; color: transparent; }
.org { margin: 2.6cqw 0 0; font-size: 4.7cqw; font-weight: 700; line-height: 1.1; letter-spacing: .005em; }
.meta { margin: 1.4cqw 0 0; font-family: var(--mono); font-size: 2.55cqw; letter-spacing: .14em; text-transform: uppercase; color: #b4ae9f; }
.meta b { font-weight: 400; color: var(--gold); }

.pass-foot { margin-top: auto; display: flex; align-items: flex-end; justify-content: space-between; gap: 4cqw; }
.code { display: grid; gap: 1.4cqw; width: 50cqw; color: #e2dbcb; }
.barcode { width: 100%; height: 8cqw; opacity: .88; }
.serial { font-family: var(--mono); font-size: 2.2cqw; letter-spacing: .16em; text-transform: uppercase; color: #9d978a; white-space: nowrap; }
.seal { position: relative; width: 17.5cqw; aspect-ratio: 1; flex: none; border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(circle, #0c0c0d 0 57%, transparent 58.5%), conic-gradient(from var(--holo, 20deg), #ff9bd9, #ffd66e, #8dffd6, #86b9ff, #cf9dff, #ff9bd9);
  box-shadow: 0 0 0 .7cqw rgba(255, 255, 255, .1), 0 4px 10px rgba(0, 0, 0, .6); }
.seal::after { content: ""; position: absolute; inset: 0; border-radius: 50%; pointer-events: none; mix-blend-mode: overlay;
  background: repeating-conic-gradient(from var(--holo, 20deg), rgba(255, 255, 255, .5) 0 2deg, transparent 2deg 10deg); }
.seal img { width: 68%; height: auto; }

.sheen { position: absolute !important; inset: 0; pointer-events: none; border-radius: inherit; background-size: 280% 100%; background-position: var(--mx, 100%) 0;
  background-image: linear-gradient(112deg, transparent 36%, rgba(255, 255, 255, .15) 46%, rgba(255, 255, 255, .04) 52%, transparent 62%); }
.pass:not(.is-live) .sheen { animation: sheen 7s ease-in-out 1.2s infinite; }
@keyframes sheen { 0%, 55% { background-position: 110% 0; } 85%, 100% { background-position: -10% 0; } }

/* the back */
.band--back .band-a { font-size: 8.2cqw; }
.qr { width: 60cqw; margin: 5.6cqw auto 0; border-radius: 4.2cqw; background: #f8f3e6; box-shadow: 0 0 0 1px rgba(255, 255, 255, .25), 0 12px 26px -12px rgba(0, 0, 0, .95); }
.qr > img { width: 100%; height: auto; }
.qr-badge { position: absolute; left: 50%; top: 50%; width: 13.5cqw; height: 13.5cqw; transform: translate(-50%, -50%); border-radius: 3cqw;
  background: #0b0b0c; display: grid; place-items: center; box-shadow: 0 0 0 1.3cqw #f8f3e6; }
.qr-badge img { width: 80%; height: auto; }
.back-url { margin: 4.6cqw 0 0; text-align: center; font-family: var(--wide); font-stretch: 150%; font-weight: 900; font-size: 8.8cqw; line-height: 1; letter-spacing: -.01em; }
.back-k { margin: 3.8cqw 0 0; text-align: center; font-family: var(--mono); font-size: 2.3cqw; line-height: 1.3; letter-spacing: .16em; text-transform: uppercase; color: #9d978a; }
.back-list { margin: 1.6cqw 1.5cqw 0; text-align: center; font-size: 3.5cqw; line-height: 1.45; color: #ebe5d8; }
.back-fine { margin: auto 0 0; text-align: center; font-family: var(--mono); font-size: 2.3cqw; letter-spacing: .2em; text-transform: uppercase; color: var(--gold); }

.hint { margin: 20px 0 0; font-family: var(--mono); font-size: 9px; letter-spacing: .12em; text-transform: uppercase; color: var(--faint); text-align: center; }
.hint-mouse { display: none; }
@media (hover: hover) and (pointer: fine) { .hint-touch { display: none; } .hint-mouse { display: inline; } }

/* ---------- the ways to reach him ---------- */
.flow { position: relative; width: min(400px, calc(100% - 32px)); margin: 0 auto; padding: 16px 0 max(36px, env(safe-area-inset-bottom)); }
.acts { display: grid; grid-template-columns: minmax(0, 1fr) 58px; gap: 10px; }
.btn-save, .btn-gold { display: flex; align-items: center; justify-content: center; gap: 9px; min-height: 58px; padding: 0 14px; border-radius: 16px; text-decoration: none;
  background: var(--foil); background-size: 220% 100%; background-position: 25% 0; color: var(--gold-ink);
  font-family: var(--wide); font-stretch: 110%; font-weight: 800; font-size: clamp(14.5px, 4.1vw, 16.5px); letter-spacing: .005em; line-height: 1.1; text-align: center; white-space: nowrap;
  box-shadow: 0 14px 34px -16px rgba(236, 196, 92, .75), inset 0 1px 0 rgba(255, 255, 255, .6), inset 0 -2px 0 rgba(90, 60, 5, .35);
  transition: background-position .7s ease, transform .15s ease; }
.btn-save:hover, .btn-gold:hover { background-position: 75% 0; }
.btn-save:active, .btn-gold:active, .quick a:active, .rows a:active { transform: scale(.975); }
.btn-save .i, .btn-gold .i { width: 22px; height: 22px; stroke-width: 2.1; }
.btn-qr { display: grid; place-items: center; min-height: 58px; border-radius: 16px; border: 1px solid var(--line-2); background: rgba(255, 255, 255, .05); color: var(--gold); cursor: pointer; padding: 0; transition: background .2s, color .2s; }
.btn-qr .i { width: 24px; height: 24px; }
.btn-qr[aria-pressed="true"] { background: var(--gold); border-color: var(--gold); color: var(--gold-ink); }

.quick { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 10px; }
.quick a { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 2px 11px; border-radius: 16px; text-decoration: none;
  background: rgba(255, 255, 255, .045); border: 1px solid var(--line); color: var(--fg); font-size: 12.5px; font-weight: 500; transition: background .2s, border-color .2s, transform .15s; }
.quick a:hover { background: rgba(255, 255, 255, .08); border-color: var(--line-2); }
.quick .i { width: 22px; height: 22px; color: var(--gold); }

.links { margin-top: 34px; }
.kick { display: flex; align-items: center; gap: 12px; margin: 0 0 12px; font-family: var(--mono); font-size: 10px; font-weight: 400; letter-spacing: .18em; text-transform: uppercase; color: var(--gold); }
.kick::after { content: ""; flex: 1; height: 1px; background: linear-gradient(to right, rgba(220, 180, 76, .45), transparent); }
.rows { list-style: none; display: grid; gap: 8px; margin: 0; padding: 0; }
.rows li[hidden] { display: none; }
.rows a { display: grid; grid-template-columns: 48px minmax(0, 1fr) 18px; align-items: center; gap: 14px; min-height: 66px; padding: 8px 16px 8px 9px; border-radius: 18px;
  text-decoration: none; color: var(--fg); background: linear-gradient(90deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .025)); border: 1px solid var(--line); transition: border-color .2s, transform .15s; }
.rows a:hover { border-color: rgba(220, 180, 76, .45); }
.rows a:hover .row-go, .btn-line:hover .i { transform: translateX(3px); }
.row-i { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 13px; color: var(--gold-ink);
  background: var(--foil); background-size: 220% 100%; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55); }
.row-i .i { width: 23px; height: 23px; stroke-width: 2; }
.row-t { min-width: 0; font-weight: 700; font-size: 16px; line-height: 1.2; }
.row-t small { display: block; margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 400; font-size: 13px; color: var(--dim); }
.row-go { width: 18px; height: 18px; color: var(--dim); transition: transform .2s; }

.foot { display: grid; gap: 4px; margin-top: 30px; padding-top: 18px; border-top: 1px solid var(--line); }
.foot p { margin: 0; color: var(--dim); font-size: 13px; line-height: 1.55; }
.foot a { color: var(--fg); text-underline-offset: 3px; }
.foot .foot-reach { color: var(--fg); font-size: 14.5px; overflow-wrap: anywhere; }
.foot .foot-reach a { text-decoration: none; }
.foot .foot-reach b { font-weight: 400; color: var(--gold); }
.foot .foot-fine { color: var(--faint); font-size: 12px; }

/* ---------- things that float ---------- */
.btn-line { display: inline-flex; align-items: center; gap: 10px; padding: 13px 18px; border-radius: 14px; text-decoration: none; cursor: pointer;
  border: 1px solid var(--line-2); background: rgba(255, 255, 255, .035); color: var(--fg); font-weight: 600; font-size: 14.5px; line-height: 1.25; }
.btn-line:hover { border-color: rgba(220, 180, 76, .5); }
.btn-line .i { width: 18px; height: 18px; color: var(--gold); transition: transform .2s; }

.toast { position: fixed; z-index: 95; left: 50%; top: max(14px, env(safe-area-inset-top)); max-width: calc(100% - 32px); padding: 11px 16px; border-radius: 14px;
  background: #f4efe4; color: #121212; font-weight: 600; font-size: 14px; line-height: 1.35; box-shadow: 0 16px 34px -12px rgba(0, 0, 0, .75);
  transform: translate(-50%, -180%); transition: transform .4s cubic-bezier(.2, .8, .2, 1); pointer-events: none; }
.toast.is-on { transform: translate(-50%, 0); }

.flash { position: fixed; inset: 0; z-index: 94; background: #fff; opacity: 0; pointer-events: none; }
.flash.is-on { animation: flash .55s ease-out; }
@keyframes flash { 0% { opacity: 0; } 8% { opacity: .8; } 100% { opacity: 0; } }

.sheet { position: fixed; inset: 0; z-index: 92; display: grid; align-items: end; background: rgba(0, 0, 0, .62); }
.sheet[hidden] { display: none; }
.sheet-in { display: grid; gap: 12px; width: 100%; max-width: 560px; margin: 0 auto; padding: 24px 20px max(22px, env(safe-area-inset-bottom)); border-radius: 22px 22px 0 0; background: #141416; border-top: 1px solid var(--line-2); }
.sheet-in h2 { margin: 0; font-family: var(--wide); font-stretch: 120%; font-weight: 800; font-size: 22px; line-height: 1.1; }
.sheet-in p { margin: 0; color: var(--dim); font-size: 15px; }
.sheet-in .btn-line { margin: 0; justify-content: center; }
.sheet-in .btn-gold { width: 100%; }

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

/* ---------- a bigger screen: the pass on the left, the ways to reach him on the right ---------- */
@media (max-width: 979px) {
  /* the glow and the swing may reach past the screen edge; phones must not zoom out for it */
  .hero { overflow-x: clip; }
}
@media (min-width: 980px) {
  .top { position: fixed; left: 0; right: 0; top: 0; max-width: none; padding-left: 28px; padding-right: 28px; }
  .page { display: grid; grid-template-columns: minmax(420px, 1fr) minmax(0, 420px); column-gap: clamp(40px, 7vw, 110px); max-width: 1120px; margin: 0 auto; padding: 0 40px; }
  .hero { height: 100vh; height: 100svh; justify-content: center; padding: 64px 0 24px; }
  .rig { width: clamp(260px, calc((100svh - 240px) * .714), 390px); }
  .flow { width: auto; margin: 0; min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; justify-content: center; padding: 72px 0 40px; }
}
@media (min-width: 980px) and (max-height: 640px) { .hint { display: none; } }

@media (prefers-reduced-motion: reduce) {
  :root { transition: none; }
  .drop, .beam, .pass:not(.is-live) .sheen, .window img.is-on { animation: none; }
  .pass, .pass-in, .toast { transition: none; }
}