/* Scan-at-the-door demo + ticket card, shared by /event-tickets and the branded preview page.
   Brand colors come from --scan-top / --scan-bot / --scan-soft / --scan-ink (purple by default). */
/* The hero is the product itself: a ticket card, drawn in CSS, where the other landing pages show a person */
.ev-ticket {
	width: 250px;
	/* The shadow sits on the wrapper so it follows the card's notch */
	filter: drop-shadow(0 0 1px rgba(0,0,0,0.25)) drop-shadow(0 12px 18px rgba(0,0,0,0.16));
	text-align: center;
	box-sizing: border-box;
	font-family: 'Open Sans', Helvetica, Arial, sans-serif;
}
/* A half-circle bitten out of the bottom edge, like a ticket stub */
.ev-ticket-card {
	background: #fff;
	border-radius: 14px;
	padding: 18px 16px 26px;
	-webkit-mask: radial-gradient(circle at 50% 100%, transparent 13px, #000 14px);
	mask: radial-gradient(circle at 50% 100%, transparent 13px, #000 14px);
}
.ev-ticket-label { font-size: 10px; letter-spacing: .14em; color: #999; }
.ev-ticket-title { font-size: 20px; font-weight: 800; color: #222; margin: 4px 0 4px; }
.ev-ticket-when { font-size: 13px; color: #555; line-height: 1.45; }
.ev-ticket-tier { font-size: 13px; color: #666; margin-top: 8px; }
.ev-ticket-name { font-size: 14px; font-weight: 600; color: #333; margin-top: 2px; }
.ev-qr { display: block; width: 140px; height: 140px; margin: 12px auto 0; }
.ev-ticket-date { font-size: 12px; font-weight: 600; color: #444; margin-top: 8px; }
.ev-ticket-num { font-size: 12px; color: #666; margin-top: 8px; letter-spacing: .04em; }
.ev-ticket-band { margin: 10px 0 0; padding: 9px 10px; border-radius: 8px; background: var(--scan-soft, #e7e2f4); color: var(--scan-ink, #5f4b8b); font-size: 12px; font-weight: 700; letter-spacing: .04em; }
.ev-ticket-band span { display: block; margin-top: 4px; font-size: 11px; opacity: .75; }
.ev-scan-stage { position: relative; flex: 0 0 300px; width: 300px; height: 640px; text-align: center; box-sizing: content-box; }
.ev-scan-stage .ev-ticket, .ev-scan-stage .ev-ticket * { box-sizing: border-box; }
.ev-phone { box-sizing: content-box; position: absolute; z-index: 2; left: 50%; top: 30px; transform: translateX(-50%); width: 260px; height: 540px; border-radius: 34px; border: 9px solid #16161a; background: #0d0d10; overflow: hidden; box-shadow: 0 18px 52px rgba(0,0,0,.30); font-family: 'Open Sans', Helvetica, Arial, sans-serif; }
.ev-screen { position: absolute; inset: 0; display: flex; flex-direction: column; opacity: 0; transition: opacity .45s ease; }
.ev-scan-stage[data-phase="roster"] .ev-roster, .ev-scan-stage[data-phase="checked"] .ev-roster { opacity: 1; }
.ev-scan-stage[data-phase="scan"] .ev-camera, .ev-scan-stage[data-phase="found"] .ev-camera { opacity: 1; }
.ev-roster { background: #f5f5f8; }
.ev-appbar { background: linear-gradient(90deg, var(--scan-top, #6a4b9e), var(--scan-bot, #4923a5)); color: #fff; font-weight: 700; font-size: 14px; padding: 16px 14px 12px; text-align: center; letter-spacing: .4px; }
.ev-appbar small { display: block; font-weight: 600; font-size: 11px; opacity: .8; letter-spacing: .3px; margin-top: 2px; }
.ev-count { margin: 14px 14px 8px; background: #fff; border-radius: 12px; padding: 12px 14px; box-shadow: 0 1px 3px rgba(0,0,0,.08); text-align: left; }
.ev-count-label { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: #999; }
.ev-count-value { font-size: 26px; font-weight: 800; color: #1c1c22; font-variant-numeric: tabular-nums; }
.ev-count-value span { font-size: 14px; font-weight: 600; color: #888; }
.ev-row { display: flex; align-items: center; gap: 10px; margin: 0 14px; padding: 11px 12px; background: #fff; border-radius: 10px; margin-bottom: 8px; text-align: left; box-shadow: 0 1px 3px rgba(0,0,0,.06); transition: background .4s ease; }
.ev-row-av { width: 32px; height: 32px; border-radius: 50%; background: var(--scan-soft, #d9d3ea); color: var(--scan-bot, #4923a5); font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex: none; }
.ev-row-name { font-size: 13px; font-weight: 700; color: #1c1c22; }
.ev-row-tier { font-size: 11px; color: #888; }
.ev-row-state { margin-left: auto; font-size: 10px; font-weight: 700; letter-spacing: .06em; color: #999; border: 1px solid #ddd; border-radius: 10px; padding: 3px 8px; white-space: nowrap; }
.ev-row.in .ev-row-state { color: #fff; background: #1e7a44; border-color: #1e7a44; }
.ev-row.hot { background: #eef7ef; }
.ev-row-state.just { width: 24px; height: 24px; padding: 0; border: 0; border-radius: 50%; background: #1e7a44; color: #fff; font-size: 13px; letter-spacing: 0; display: flex; align-items: center; justify-content: center; animation: evjust .4s cubic-bezier(.2,.9,.3,1.4); }
@keyframes evjust { 0% { transform: scale(.4); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
.ev-scanbtn { margin: auto 14px 16px; border-radius: 12px; padding: 14px; font-size: 15px; font-weight: 700; color: #fff; background: var(--scan-bot, #4923a5); text-align: center; transition: transform .18s ease, filter .18s ease; }
.ev-scan-stage[data-phase="press"] .ev-roster { opacity: 1; }
.ev-scan-stage[data-phase="press"] .ev-scanbtn { transform: scale(.94); filter: brightness(.82); }
.ev-camera { background: radial-gradient(120% 90% at 50% 20%, #1b1b22, #08080b); align-items: center; justify-content: center; color: #fff; }
.ev-cam-title { position: absolute; z-index: 2; top: 20px; left: 0; right: 0; text-align: center; font-size: 13px; font-weight: 700; letter-spacing: .3px; color: rgba(255,255,255,.85); }
.ev-frame { position: relative; z-index: 2; width: 170px; height: 170px; }
.ev-frame::before, .ev-frame::after, .ev-frame i::before, .ev-frame i::after { content: ''; position: absolute; width: 28px; height: 28px; border: 4px solid rgba(255,255,255,.9); }
.ev-frame::before { top: 0; left: 0; border-right: 0; border-bottom: 0; border-radius: 6px 0 0 0; }
.ev-frame::after { top: 0; right: 0; border-left: 0; border-bottom: 0; border-radius: 0 6px 0 0; }
.ev-frame i::before { bottom: 0; left: 0; border-right: 0; border-top: 0; border-radius: 0 0 0 6px; }
.ev-frame i::after { bottom: 0; right: 0; border-left: 0; border-top: 0; border-radius: 0 0 6px 0; }
.ev-laser { position: absolute; left: 8px; right: 8px; top: 8px; height: 3px; background: #6ee7a0; box-shadow: 0 0 10px #6ee7a0; opacity: 0; border-radius: 2px; }
.ev-scan-stage[data-phase="scan"] .ev-laser { opacity: 1; animation: evlaser 1.2s ease-in-out infinite alternate; }
@keyframes evlaser { 0% { top: 8px; } 100% { top: 158px; } }
.ev-scan-stage[data-phase="found"] .ev-frame { animation: evframe .5s ease-out forwards; }
@keyframes evframe { 0% { transform: scale(1); } 100% { transform: scale(1.08); } }
.ev-scan-stage[data-phase="found"] .ev-frame::before, .ev-scan-stage[data-phase="found"] .ev-frame::after, .ev-scan-stage[data-phase="found"] .ev-frame i::before, .ev-scan-stage[data-phase="found"] .ev-frame i::after { border-color: #6ee7a0; }
.ev-found { position: absolute; left: 50%; top: 50%; width: 64px; height: 64px; margin: -32px 0 0 -32px; border-radius: 50%; background: #1e7a44; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 34px; font-weight: 700; opacity: 0; transform: scale(.5); transition: opacity .35s ease, transform .4s cubic-bezier(.2,.9,.3,1.4); z-index: 2; }
.ev-scan-stage[data-phase="found"] .ev-found { opacity: 1; transform: scale(1); }
.ev-cam-who { position: absolute; z-index: 2; bottom: 34px; left: 0; right: 0; text-align: center; opacity: 0; transition: opacity .4s ease; }
.ev-scan-stage[data-phase="found"] .ev-cam-who { opacity: 1; }
.ev-cam-name { font-size: 18px; font-weight: 800; }
.ev-cam-tier { font-size: 13px; color: rgba(255,255,255,.75); margin-top: 2px; }
.ev-notify { position: absolute; top: 16px; left: 12px; right: 12px; background: #1e7a44; color: #fff; border-radius: 13px; padding: 13px 15px; font-weight: 700; font-size: 14px; display: flex; align-items: center; gap: 9px; transform: translateY(-100px); opacity: 0; transition: transform .5s cubic-bezier(.2,.9,.3,1.2), opacity .4s ease; z-index: 3; box-shadow: 0 10px 26px rgba(0,0,0,.35); }
.ev-notify-check { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: rgba(255,255,255,.25); font-size: 13px; flex: none; }
.ev-scan-stage[data-phase="checked"] .ev-notify { transform: translateY(0); opacity: 1; }
/* The guest's ticket: rests beside the phone, then slides under the camera */
/* The guest's ticket rests at the phone's bottom right, tucked behind it, and slides under the phone
   to be scanned. A copy inside the screen moves on the same path, offset by the phone's screen origin
   (20px, 39px), and sits above the black camera background but under the scan frame, so the camera
   seems to see the ticket passing beneath. Both follow --tx/--ty/--tr, so they never drift apart. */
/* Resting spot: under the copy's bottom right (--rest-x/--rest-y, measured by script); the phone's corner as fallback */
.ev-scan-stage { --tx: var(--rest-x, 262px); --ty: var(--rest-y, 600px); --tr: -6deg; }
/* Scan position: the script measures --scan-y so the QR lands on the frame center whatever the page's fonts */
.ev-scan-stage[data-phase="scan"], .ev-scan-stage[data-phase="found"], .ev-scan-stage.ev-stacked[data-phase="scan"], .ev-scan-stage.ev-stacked[data-phase="found"] { --tx: 150px; --ty: var(--scan-y, 291px); --tr: 0deg; }
.ev-scan-stage .ev-ticket { width: 190px; }
/* The guest's phone: a branded screen (studio colors, top to bottom) with the ticket centered on it. The phone
   and its ticket move as one; centered on the ticket, so the ticket lands where the camera copy expects it */
.ev-scan-stage .ev-guest { position: absolute; z-index: 1; left: var(--tx); top: var(--ty); width: 236px; height: 450px; box-sizing: border-box; border-radius: 32px; border: 7px solid #16161a; background: linear-gradient(180deg, var(--scan-top, #6a4b9e), var(--scan-bot, #4923a5)); box-shadow: 0 14px 34px rgba(0,0,0,.28); display: flex; align-items: center; justify-content: center; transform: translate(-50%, -50%) rotate(var(--tr)); transition: top 1.2s cubic-bezier(.5,0,.25,1), left 1.2s cubic-bezier(.5,0,.25,1), transform 1.2s ease; }
.ev-scan-stage .ev-guest::before { content: ''; position: absolute; top: 8px; left: 50%; width: 54px; height: 6px; margin-left: -27px; border-radius: 3px; background: rgba(0,0,0,.35); }
.ev-scan-stage .ev-guest .ev-ticket { position: relative; }
.ev-scan-stage .ev-cam-ticket { position: absolute; transform: translate(-50%, -50%) rotate(var(--tr)); transition: top 1.2s cubic-bezier(.5,0,.25,1), left 1.2s cubic-bezier(.5,0,.25,1), transform 1.2s ease; }
.ev-scan-stage .ev-cam-ticket { z-index: 1; left: calc(var(--tx) - 20px); top: calc(var(--ty) - 39px); filter: brightness(.9) contrast(1.05); } /* the camera sees only the ticket */
.ev-scan-stage .ev-ticket .ev-ticket-title { font-size: 16px; }
.ev-scan-stage .ev-ticket .ev-qr { width: 100px; height: 100px; margin-top: 8px; }
.ev-scan-stage .ev-ticket .ev-ticket-card { padding: 12px 12px 24px; }
.ev-scan-stage .ev-ticket .ev-ticket-band { display: none; }
.ev-scan-stage .ev-ticket .ev-ticket-num { margin-top: 4px; font-size: 11px; }
/* Stacked layouts (copy below the phone; set by the script): the ticket rests just below the phone */
/* (the scan rule above lists .ev-stacked too: this rule alone has the same specificity and would win) */
.ev-scan-stage.ev-stacked { height: 1100px; --tx: var(--rest-x, 180px); --ty: var(--rest-y, 845px); }
/* Once the guest is checked in (with the green check pill) their ticket shows it: QR faded, a green line */
.ev-ticket-used-line { display: none; margin: 8px auto 0; padding: 4px 10px; width: max-content; border-radius: 12px; background: #1e7a44; color: #fff; font-size: 11px; font-weight: 700; letter-spacing: .04em; }
.ev-guest .ev-ticket-used .ev-ticket-used-line { display: block; animation: evjust .4s cubic-bezier(.2,.9,.3,1.4); }
.ev-guest .ev-ticket .ev-qr { transition: opacity .4s ease; }
.ev-guest .ev-ticket-used .ev-qr { opacity: .25; }