/* Feature landing page events-tickets only (its mock UI from src/features/events-tickets.ts).
   Split from the former site.css; rules keep their original order. Page types and files: Base.astro. */
.evh { --w: 620; --h: 600; max-width: 620px; margin-left: auto; }
.evh.is-in .evh__obj { opacity: 1; translate: 0 0; filter: none; }
.evh__phone { left: 170px; top: 0; width: 300px; height: 600px; padding: 11px; border-radius: 48px; background: #fff; box-shadow: var(--shadow-frame), 0 0 0 1px var(--line-100); }
.evh__screen { height: 100%; display: flex; flex-direction: column; gap: 12px; padding: 12px 14px 16px; border-radius: 38px; background: var(--surface-0); overflow: hidden; text-align: left; }
.evh__poster { position: relative; height: 196px; flex: none; display: flex; flex-direction: column; justify-content: flex-end; gap: 4px; padding: 18px; border-radius: 26px; color: #fff; background: radial-gradient(120% 80% at 100% 0%, #9dbff5 0%, rgba(157, 191, 245, 0) 55%), linear-gradient(160deg, #2563eb 0%, #1d3fb8 55%, #10102a 100%); }
.evh__poster small { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: rgba(255, 255, 255, .72); }
.evh__poster b { font-size: 28px; line-height: 1.02; font-weight: 400; letter-spacing: -0.035em; }
.evh__poster span { font-size: 13px; color: rgba(255, 255, 255, .8); }
.evh__info { display: flex; flex-direction: column; gap: 9px; padding: 4px 6px; font-size: 13.5px; color: var(--ink-700); }
.evh__info span { display: flex; align-items: center; gap: 9px; }
.evh__info .i { color: var(--ink-400); }
.evh__reg { display: flex; align-items: center; gap: 10px; padding: 0 6px; font-size: 13px; color: var(--ink-450); }
.evh__reg .mk-stack { margin: 0 0 0 8px; }
.evh__reg b { color: var(--ink-900); font-weight: 500; }
.evh__tix { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; border-radius: 18px; background: #fff; }
.evh__tix > span:first-child { display: flex; flex-direction: column; font-size: 14px; }
.evh__tix b { font-weight: 500; }
.evh__tix small { font-size: 11.5px; color: var(--ink-400); }
.evh__tix .ev-qty { gap: 10px; font-size: 14px; }
.evh__tix .ev-qty i { width: 24px; height: 24px; }
.evh__cta { margin-top: auto; height: 48px; flex: none; display: flex; align-items: center; justify-content: center; border-radius: 999px; background: var(--blue-500); color: #fff; font-size: 15px; }
.evh.is-in .evh__cta { animation: evhTap .5s var(--ease-out) 1.25s both; }
.evh__date { left: 40px; top: 74px; --r: -7deg; width: 86px; padding: 12px 0 14px; display: flex; flex-direction: column; align-items: center; border-radius: 22px; background: #fff; box-shadow: var(--shadow-float); }
.evh__date small { font-size: 11px; letter-spacing: .08em; color: var(--blue-500); font-weight: 500; }
.evh__date b { font-size: 38px; line-height: 1; font-weight: 400; letter-spacing: -0.04em; }
.evh__ticket-main { width: 252px; display: flex; flex-direction: column; gap: 3px; padding: 18px 18px 16px 20px; text-align: left; border-right: 2px dashed rgba(16, 17, 28, .12); }
.evh__ticket-main small { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--blue-500); font-weight: 500; }
.evh__ticket-main b { font-size: 21px; font-weight: 400; letter-spacing: -0.03em; }
.evh__ticket-main > span { font-size: 13px; color: var(--ink-450); }
.evh__ticket-main .evh__holder { display: flex; align-items: center; gap: 8px; margin-top: 10px; color: var(--ink-900); }
.evh__holder .mk-av { width: 26px; height: 26px; font-size: 10px; }
.evh__stub { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 14px 10px; }
.evh__stub small { font-size: 11px; color: var(--ink-450); }
.evh__qr { position: relative; width: 74px; height: 74px; padding: 6px; border-radius: 10px; background: #fff; overflow: hidden; }
.evh__qr svg { display: block; width: 100%; height: 100%; fill: var(--ink-900); }
.evh__scan { position: absolute; left: 4px; right: 4px; top: 4px; height: 2px; border-radius: 2px; background: var(--blue-500); box-shadow: 0 0 12px rgba(37, 99, 235, .7); opacity: 0; }
.evh.is-in .evh__scan { animation: evhScan 1.1s ease-in-out 2.4s 2 alternate both; }
.evh__toast > span:last-child { display: flex; flex-direction: column; font-size: 14px; }
.evh__toast b { font-weight: 500; }
.evh__toast small { font-size: 12px; color: var(--ink-450); }
.evh.is-in .evh__date, .evh.is-in .evh__toast { animation: evhFloat 6s ease-in-out 5s infinite alternate; }
.evh.is-in .evh__ticket { animation: evhFloat 7s ease-in-out 3.5s infinite alternate-reverse; }
.reduce-motion .evh__obj { opacity: 1; translate: none; filter: none; transition: none; }
.reduce-motion .evh__date, .reduce-motion .evh__toast, .reduce-motion .evh__ticket, .reduce-motion .evh__cta { animation: none !important; }
.ev-seg { position: static; height: 34px; margin-left: auto; min-width: 230px; font-size: 12px; }
.ev-seg span.is-on { width: auto; flex: 1; gap: 5px; }
.ev-seg--wide { margin: 0; min-width: 0; width: 100%; height: 38px; }
.ev-edit, .ev-reg, .ev-scan, .ev-ai, .ev-notes, .ev-aud, .ev-series { max-width: 460px; }
.ev-edit__row { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 12px; margin-top: 12px; }
.ev-edit__img { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; border-radius: 14px; background: linear-gradient(135deg, #e9e4f9, #f7edf3); color: var(--lavender-500); }
.ev-edit__dates .mk-field:first-child { margin-top: 0; }
.ev-reg__field { margin-top: 12px; }
.ev-reg__field > span { display: flex; align-items: center; justify-content: space-between; gap: 10px; height: 44px; margin-top: 6px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--line-150); font-size: 14px; position: relative; overflow: hidden; }
.ev-reg__field b { font-weight: 500; opacity: 0; transition: opacity .5s var(--ease-out) var(--d); }
.ev-reg__field em { display: inline-flex; align-items: center; gap: 4px; font-style: normal; font-size: 11px; color: var(--blue-600); opacity: 0; transition: opacity .5s var(--ease-out) calc(var(--d) + .2s); }
.ev-reg__field > span::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(37, 99, 235, .12), transparent); transform: translateX(-100%); }
.ev-reg.is-in .ev-reg__field b, .ev-reg.is-in .ev-reg__field em { opacity: 1; }
.ev-reg.is-in .ev-reg__field > span::after { animation: sweepIn 1s var(--ease-out) var(--d) both; }
.ev-rsvp { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 16px; }
.ev-rsvp span { display: flex; align-items: center; justify-content: center; gap: 5px; height: 38px; border-radius: 999px; border: 1px solid var(--line-200); font-size: 13px; color: var(--ink-600); }
.ev-rsvp .is-on { background: var(--ink-950); border-color: var(--ink-950); color: #fff; }
.ev-reg__btn, .ev-pay__btn, .ev-ai__btn { width: 100%; height: 46px; margin-top: 14px; font-size: 15px; gap: 8px; }
.ev-pay { position: relative; width: 100%; max-width: 440px; padding-bottom: 54px; }
.ev-pay__line { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; margin-top: 8px; border-radius: 12px; background: var(--surface-1); font-size: 15px; }
.ev-pay__line > span:first-child { display: flex; flex-direction: column; }
.ev-pay__total { display: flex; justify-content: space-between; margin-top: 16px; padding: 0 4px; font-size: 15px; color: var(--ink-500); }
.ev-pay__total b { font-size: 22px; font-weight: 500; letter-spacing: -0.045em; color: var(--ink-900); }
.ev-pay__ticket { position: absolute; right: -18px; bottom: 0; width: 280px; display: flex; align-items: center; gap: 12px; padding: 12px 14px; box-shadow: var(--shadow-float); opacity: 0; transform: translateY(16px); transition: opacity .7s var(--ease-out) .5s, transform .7s var(--ease-out) .5s; }
.ev-pay__ticket > span:nth-child(2) { flex: 1; display: flex; flex-direction: column; font-size: 14px; }
.ev-pay.is-in .ev-pay__ticket { opacity: 1; transform: none; }
.ev-qr--light { background: #fff; }
.ev-scan__view { display: flex; justify-content: center; padding: 18px 0; border-radius: 16px; background: linear-gradient(180deg, #10102a, #23244a); }
.ev-scan__frame { position: relative; display: flex; padding: 18px; border-radius: 14px; background: #fff; color: var(--ink-900); overflow: hidden; }
.ev-scan__frame::before { content: ""; position: absolute; inset: 6px; border: 2px solid var(--blue-500); border-radius: 10px; -webkit-mask: linear-gradient(#000 0 0) top left / 22px 22px no-repeat, linear-gradient(#000 0 0) top right / 22px 22px no-repeat, linear-gradient(#000 0 0) bottom left / 22px 22px no-repeat, linear-gradient(#000 0 0) bottom right / 22px 22px no-repeat; mask: linear-gradient(#000 0 0) top left / 22px 22px no-repeat, linear-gradient(#000 0 0) top right / 22px 22px no-repeat, linear-gradient(#000 0 0) bottom left / 22px 22px no-repeat, linear-gradient(#000 0 0) bottom right / 22px 22px no-repeat; }
.ev-scan__line { position: absolute; left: 10px; right: 10px; top: 14px; height: 2px; border-radius: 2px; background: var(--blue-500); box-shadow: 0 0 12px rgba(37, 99, 235, .6); animation: scanLine 2.2s ease-in-out infinite alternate; }
.ev-scan__ok { display: flex; align-items: center; gap: 12px; margin-top: 14px; padding: 12px; border-radius: 12px; background: var(--blue-100); }
.ev-scan__ok > span:last-child { display: flex; flex-direction: column; font-size: 14px; }
.ev-scan .tix__foot { margin-top: 16px; font-size: 14px; }
.ev-scan .tix__foot b { font-size: 16px; }
.ev-scan__split { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 14px; }
.ev-scan__split div { padding: 10px 12px; border-radius: 12px; background: var(--surface-1); }
.ev-scan__split b { display: block; font-size: 22px; font-weight: 500; letter-spacing: -0.045em; }
.reduce-motion .ev-scan__line { animation: none; top: 50%; }
.ev-qrgen { position: relative; width: 100%; max-width: 460px; padding: 0 0 70px; }
.ev-poster { position: relative; display: flex; flex-direction: column; gap: 8px; width: 78%; aspect-ratio: 4 / 5; padding: 26px; border-radius: 20px; color: #fff; overflow: hidden; background: radial-gradient(120% 80% at 100% 0%, #9dbff5 0%, rgba(157, 191, 245, 0) 55%), linear-gradient(160deg, #2563eb 0%, #1d3fb8 55%, #10102a 100%); box-shadow: var(--shadow-ink-card); transform-origin: 50% 0; }
.ev-poster small { font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: rgba(255, 255, 255, .7); }
.ev-poster b { font-size: 34px; line-height: 1.02; font-weight: 400; letter-spacing: -0.035em; }
.ev-poster > span { font-size: 15px; color: rgba(255, 255, 255, .8); }
.ev-poster__qr { position: absolute; left: 22px; bottom: 22px; display: flex; align-items: center; gap: 10px; }
.ev-poster__qr em { font-style: normal; font-size: 12px; color: rgba(255, 255, 255, .85); max-width: 90px; }
.ev-qrgen__panel { position: absolute; right: 0; bottom: 0; width: 64%; box-shadow: var(--shadow-float); }
.ev-link { display: flex; align-items: center; gap: 6px; margin: 6px 0 12px; font-size: 14px; color: var(--blue-600); }
.ev-ai__spark { width: 26px; height: 26px; border-radius: 8px; background: var(--blue-100); color: var(--blue-500); display: inline-flex; align-items: center; justify-content: center; }
.ev-ai__out { min-height: 132px; margin-top: 14px; padding: 14px 16px; border-radius: 14px; background: var(--surface-1); font-size: 15px; line-height: 23px; color: var(--ink-800); }
.ev-live { position: relative; width: 100%; max-width: 380px; padding-top: 44px; }
.ev-live__notif > span:last-child { display: flex; flex-direction: column; font-size: 14px; }
.ev-live__icon { width: 36px; height: 36px; border-radius: 10px; background: var(--surface-1); display: flex; align-items: center; justify-content: center; }
.ev-live.is-in .ev-live__notif { opacity: 1; transform: none; }
.ev-live__app { padding-top: 30px; }
.ev-tabs { display: flex; gap: 6px; overflow: hidden; }
.ev-tabs span { height: 30px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--line-200); font-size: 12px; display: flex; align-items: center; white-space: nowrap; color: var(--ink-600); }
.ev-tabs .is-on { background: var(--ink-950); border-color: var(--ink-950); color: #fff; }
.ev-live__card { display: flex; flex-direction: column; gap: 6px; margin-top: 14px; padding: 18px; border-radius: 16px; color: #fff; background: radial-gradient(90% 90% at 100% 0%, rgba(157, 191, 245, .55), transparent 60%), linear-gradient(160deg, #2563eb, #10102a); }
.ev-live__card .tag { align-self: flex-start; gap: 6px; background: #fff; color: var(--blue-600); }
.ev-live__card .tag .live__pulse { background: var(--blue-500); }
.ev-live__card b { margin-top: 26px; font-size: 22px; font-weight: 400; letter-spacing: -0.02em; }
.ev-live__card small { display: flex; align-items: center; gap: 6px; color: rgba(255, 255, 255, .8); }
.ev-live__next { display: flex; align-items: center; justify-content: space-between; margin-top: 12px; padding: 12px 14px; border-radius: 12px; background: var(--surface-1); font-size: 14px; }
.ev-live__next span { display: flex; align-items: center; gap: 6px; }
.ev-aud { padding: 10px; }
.ev-aud__opt { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 14px; border: 1.5px solid transparent; transition: border-color .5s var(--ease-out), background .5s var(--ease-out); }
.ev-aud__opt > span:nth-child(2) { flex: 1; display: flex; flex-direction: column; font-size: 15px; }
.ev-aud__opt b { font-weight: 500; }
.ev-radio { width: 20px; height: 20px; flex: none; border-radius: 50%; border: 1.5px solid var(--line-300); transition: border .4s var(--ease-out); }
.ev-aud.is-in .ev-aud__opt:nth-child(2) { border-color: var(--blue-500); background: #f6f9ff; }
.ev-aud.is-in .ev-aud__opt:nth-child(2) .ev-radio { border: 6px solid var(--blue-500); }
.ev-aud__opt:nth-child(2) { transition-delay: .6s; }
.ev-aud__opt:nth-child(2) .ev-radio { transition-delay: .6s; }
.ev-series { padding: 12px; }
.ev-series__cover { position: relative; display: flex; flex-direction: column; justify-content: flex-end; gap: 4px; height: 150px; padding: 18px; border-radius: 14px; color: #fff; background: radial-gradient(90% 90% at 0% 0%, rgba(242, 179, 211, .55), transparent 60%), linear-gradient(160deg, #5b3fcf, #10102a); }
.ev-series__cover small { color: rgba(255, 255, 255, .75); }
.ev-series__cover b { font-size: 24px; font-weight: 400; letter-spacing: -0.03em; }
.ev-series__saved { position: absolute; right: 12px; top: 12px; gap: 4px; background: rgba(255, 255, 255, .92); border: 0; color: var(--ink-900); }
.ev-ep { display: flex; align-items: center; gap: 12px; padding: 10px 6px; font-size: 14px; }
.ev-ep > span:nth-child(2) { flex: 1; }
.ev-ep em { font-style: normal; font-size: 12px; color: var(--ink-350); }
.ev-ep__play { width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--line-200); display: flex; align-items: center; justify-content: center; color: var(--ink-600); }
.ev-ep__play.is-done { background: var(--blue-100); border-color: var(--blue-100); color: var(--blue-600); }
.ev-aa { display: flex; align-items: center; gap: 6px; }
.ev-aa span { width: 26px; height: 26px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 12px; color: var(--ink-500); }
.ev-aa span.is-on { font-size: 16px; background: var(--surface-3); color: var(--ink-900); }
.ev-notes__fill { padding: 16px; border-radius: 14px; background: var(--surface-1); font-size: 17px; line-height: 28px; }
.ev-notes__pts { margin: 14px 0 0; padding-left: 18px; list-style: disc; font-size: 14px; line-height: 24px; color: var(--ink-600); }
.ev-toggle { display: flex; align-items: center; justify-content: space-between; margin-top: 16px; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line-150); font-size: 14px; }
.ev-toggle span { display: flex; align-items: center; gap: 8px; }
.ev-toggle i { position: relative; width: 38px; height: 22px; border-radius: 999px; background: var(--line-300); }
.ev-toggle i::after { content: ""; position: absolute; left: 3px; top: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform .3s var(--ease-out); }
.ev-toggle i.is-on { background: var(--blue-500); }
.ev-toggle i.is-on::after { transform: translateX(16px); }
.reduce-motion .ev-reg__field b, .reduce-motion .ev-reg__field em, .reduce-motion .ev-pay__ticket, .reduce-motion .ev-live__notif { opacity: 1; transform: none; transition: none; }
.ev-series__saved { -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); background: rgba(255, 255, 255, .78); }
.ev-qrgen__panel, .ev-live__notif { background: rgba(255, 255, 255, .9); }
.ev-qrgen__panel small { color: var(--ink-500); }
@keyframes evhTap { 40% { transform: scale(.95); background: var(--blue-600); } }
@keyframes evhScan { 0% { opacity: 1; top: 4px; } 100% { opacity: 1; top: calc(100% - 6px); } }
@keyframes evhFloat { to { transform: translateY(-10px); } }
@keyframes sweepIn { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
@keyframes scanLine { to { top: calc(100% - 16px); } }
@media (max-width: 1100px) {
  .evh { margin: 0 auto; }
}
@media (max-width: 720px) {
  .evh { --w: 440; --h: 620; }
  .evh__phone { left: 70px; }
  .evh__date { left: 0; top: 40px; }
  .evh__ticket { left: 0; top: 352px; }
  .evh__toast { left: 212px; top: 92px; }
  .ev-pay__ticket { right: 0; width: 88%; }
  .ev-live__notif { left: -6px; right: 6px; }
  .ev-poster b { font-size: 26px; }
  .ev-qrgen { padding-bottom: 128px; }
  .ev-poster { width: 86%; }
  .ev-qrgen__panel { width: 82%; }
  .ev-aa small { display: none; }
  .ev-tabs { -webkit-mask: linear-gradient(90deg, #000 78%, transparent); mask: linear-gradient(90deg, #000 78%, transparent); }
}