/* Feature landing page nfc-qr-system only (its mock UI from src/features/nfc-qr-system.ts).
   Split from the former site.css; rules keep their original order. Page types and files: Base.astro. */
.nv1 { --w: 620; --h: 600; max-width: 620px; margin-left: auto; }
.nv1 .nfh__app > * { opacity: 1; translate: none; }
.nv1__chair { position: absolute; left: 18px; top: 64px; width: 320px; opacity: 0; translate: 0 40px; transition: opacity .9s var(--ease-out), translate 1.3s var(--ease-out); }
.nv1__chair img { display: block; width: 100%; height: auto; filter: drop-shadow(0 28px 26px rgba(20, 20, 50, .16)); }
.nv1__tag { position: absolute; left: 35%; top: 23%; width: 92px; height: 92px; translate: -50% -50%; }
.nv1.is-in .nv1__chair, .nv1.is-in .nv1__toast { opacity: 1; translate: 0 0; }
.nv1__phone { position: absolute; left: 330px; top: 26px; width: 270px; height: 540px; padding: 10px; border-radius: 44px; background: #fff; box-shadow: var(--shadow-frame), 0 0 0 1px var(--line-100); opacity: 0; rotate: -4deg; }
.nv1.is-in .nv1__phone { animation: nv1Tap 3.8s var(--ease-out) .5s forwards; }
.nv1 .nfh__screen { position: relative; }
.nv1__lock { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; gap: 18px; padding: 70px 12px 0; border-radius: 35px; color: #fff; background: radial-gradient(120% 70% at 100% 0%, rgba(157, 191, 245, .6), transparent 60%), linear-gradient(170deg, #2e3a8c, #10102a); transition: opacity .6s var(--ease-out) 2.7s; z-index: 2; }
.nv1__lock > b { font-size: 54px; font-weight: 400; letter-spacing: -0.04em; }
.nv1__banner { width: 100%; display: flex; align-items: center; gap: 10px; padding: 11px 12px; border-radius: 16px; background: rgba(255, 255, 255, .8); color: var(--ink-900); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); opacity: 0; translate: 0 -14px; transition: opacity .6s var(--ease-out) 1.2s, translate .7s var(--ease-out) 1.2s; }
.nv1__banner img { border-radius: 7px; }
.nv1__banner > span { display: flex; flex-direction: column; font-size: 13.5px; }
.nv1__banner small { font-size: 11px; color: var(--ink-450); }
.nv1__banner b { font-weight: 500; }
.nv1.is-in .nv1__banner { opacity: 1; translate: 0 0; }
.nv1.is-in .nv1__lock { opacity: 0; }
.nv1.is-in .nfh__rings i { animation: nfRing 2s var(--ease-out) 2.2s 3; }
.nv1__toast { position: absolute; left: 40px; top: 470px; width: 250px; display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 18px; text-align: left; box-shadow: var(--shadow-float); background: rgba(255, 255, 255, .78); border: 1px solid rgba(255, 255, 255, .85); -webkit-backdrop-filter: blur(18px) saturate(1.6); backdrop-filter: blur(18px) saturate(1.6); opacity: 0; translate: 0 16px; transition: opacity .7s var(--ease-out) 3.6s, translate .9s var(--ease-out) 3.6s; }
.nv1__toast > span:last-child { display: flex; flex-direction: column; font-size: 14px; }
.nv1__toast b { font-weight: 500; }
.nv1__toast small { font-size: 12px; color: var(--ink-450); }
.reduce-motion .nv1__chair, .reduce-motion .nv1__toast, .reduce-motion .nv1__banner { opacity: 1; translate: none; transition: none; }
.reduce-motion .nv1__phone { opacity: 1; animation: none; }
.reduce-motion .nv1__lock { opacity: 0; transition: none; }
.nfh__tag { position: relative; width: 124px; height: 124px; display: flex; align-items: center; justify-content: center; }
.nfh__chip { position: relative; z-index: 1; width: 100%; height: 100%; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; background: #fff; color: var(--blue-500); box-shadow: 0 10px 30px rgba(0, 0, 0, .25); }
.nfh__chip small { font-size: 12px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-700); }
.nfh__rings i { position: absolute; inset: 0; border-radius: 50%; border: 2px solid rgba(125, 171, 247, .7); opacity: 0; }
.nf-story.is-in .nfh__rings i { animation: nfRing 2.4s var(--ease-out) 1.2s infinite; }
.nfh__rings i:nth-child(2) { animation-delay: 2s !important; }
.nfh__rings i:nth-child(3) { animation-delay: 2.8s !important; }
.nfh__app { display: flex; flex-direction: column; gap: 14px; }
.nfh__app > * { opacity: 0; translate: 0 10px; transition: opacity .6s var(--ease-out), translate .7s var(--ease-out); }
.nfh__app > :nth-child(1) { transition-delay: 1.6s; }
.nfh__app > :nth-child(2) { transition-delay: 1.75s; }
.nfh__app > :nth-child(3) { transition-delay: 1.9s; }
.nfh__app > :nth-child(4) { transition-delay: 2.05s; }
.nfh__brand { display: flex; align-items: center; gap: 10px; margin-top: 8px; font-size: 16px; }
.nfh__brand img { border-radius: 8px; }
.nfh__brand b { font-weight: 500; }
.nfh__hello { display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: 20px; background: #fff; }
.nfh__hello > span:last-child { display: flex; flex-direction: column; font-size: 14px; }
.nfh__hello b { font-weight: 500; }
.nfh__hello small { font-size: 12px; color: var(--ink-450); }
.nfh__hello .mk-av { width: 40px; height: 40px; }
.nfh__cta { display: flex; align-items: center; justify-content: center; gap: 8px; height: 50px; border-radius: 999px; background: var(--blue-500); color: #fff; font-size: 15px; }
.nfh__tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.nfh__tiles span { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 14px 6px; border-radius: 18px; background: #fff; font-size: 12.5px; color: var(--ink-700); }
.nfh__tiles i { width: 38px; height: 38px; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: var(--surface-1); color: var(--ink-700); }
.reduce-motion .nfh__app > * { opacity: 1; translate: none; filter: none; transition: none; }
.nf-tags { max-width: 480px; }
.nf-tags__row { display: flex; align-items: center; gap: 12px; margin-top: 8px; padding: 10px 12px; border-radius: 14px; background: var(--surface-0); font-size: 14px; }
.nf-tags__row b { flex: 1; font-weight: 500; }
.nf-tags__row > .i { color: var(--ink-350); }
.nf-tags__kind { width: 34px; height: 34px; flex: none; border-radius: 10px; display: flex; align-items: center; justify-content: center; background: #fff; border: 1px solid var(--line-200); color: var(--ink-700); }
.nf-tags__kind--nfc { background: var(--blue-500); border-color: var(--blue-500); color: #fff; }
.nf-map { max-width: 480px; }
.nf-map__count { font-size: 13px; color: var(--ink-450); }
.nf-map__stage { margin: 4px auto 16px; width: 60%; padding: 6px 0; border-radius: 0 0 40px 40px; background: var(--surface-1); text-align: center; font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-400); }
.nf-map__seats { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 6px; }
.nf-map__seats i { aspect-ratio: 1; border-radius: 6px 6px 3px 3px; background: var(--surface-3); transition: background .5s var(--ease-out); transition-delay: var(--d, 0ms); }
.nf-map__seats.is-in i.is-on, .reduce-motion .nf-map__seats i.is-on { background: var(--blue-500); }
.nf-map__legend { display: flex; gap: 16px; margin-top: 16px; font-size: 12.5px; color: var(--ink-450); }
.nf-map__legend span { display: flex; align-items: center; gap: 6px; }
.nf-map__legend i { width: 10px; height: 10px; border-radius: 3px; background: var(--surface-3); }
.nf-map__legend i.is-on { background: var(--blue-500); }
.nf-dyn { max-width: 460px; }
.nf-dyn__code { display: flex; align-items: center; gap: 16px; margin-bottom: 18px; }
.nf-dyn__qr { width: 84px; height: 84px; flex: none; border-radius: 16px; display: flex; align-items: center; justify-content: center; background: var(--surface-1); color: var(--ink-900); }
.nf-dyn__code > span:last-child { display: flex; flex-direction: column; gap: 2px; }
.nf-dyn__code small { font-size: 12.5px; color: var(--ink-450); }
.nf-dyn__code b { font-size: 17px; font-weight: 500; }
.nf-dyn__row { display: flex; align-items: center; gap: 10px; margin-top: 8px; padding: 12px 14px; border-radius: 14px; background: var(--surface-0); border: 1px solid transparent; font-size: 14px; }
.nf-dyn__row > span { display: inline-flex; align-items: center; gap: 6px; width: 120px; color: var(--ink-450); }
.nf-dyn__row b { font-weight: 500; }
.nf-dyn__row.is-now { border-color: var(--blue-500); background: #fff; box-shadow: 0 0 0 1px var(--blue-500); }
.nf-dyn.is-in .nf-dyn__row { animation: nfNow 7.5s var(--ease-out) infinite; animation-delay: calc(var(--k) * 2.5s); }
.nf-dyn.is-in .nf-dyn__row.is-now { border-color: transparent; background: var(--surface-0); box-shadow: none; }
.nf-prof { max-width: 460px; }
.nf-prof__who { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.nf-prof__who > span:nth-child(2) { flex: 1; display: flex; flex-direction: column; font-size: 16px; }
.nf-prof__who b { font-weight: 500; }
.nf-prof__who small { font-size: 12.5px; color: var(--ink-450); }
.nf-prof__who .mk-av { width: 44px; height: 44px; }
.nf-prof__row { display: flex; align-items: center; gap: 12px; margin-top: 8px; padding: 10px 12px; border-radius: 14px; background: var(--surface-0); }
.nf-prof__row > span:last-child { display: flex; flex-direction: column; font-size: 14px; }
.nf-prof__row b { font-weight: 500; }
.nf-prof__row small { font-size: 12px; color: var(--ink-450); }
.nf-prof__auto { display: flex; align-items: center; gap: 8px; margin-top: 14px; padding: 10px 14px; border-radius: 12px; background: var(--blue-100); color: var(--blue-600); font-size: 13.5px; }
.nf-story { width: 100%; max-width: 520px; }
.nf-story__screen { position: relative; aspect-ratio: 16 / 10; border-radius: 26px; overflow: hidden; background: radial-gradient(120% 80% at 100% 0%, rgba(157, 191, 245, .5), transparent 60%), linear-gradient(160deg, #2e3a8c, #10102a); box-shadow: var(--shadow-ink-card); }
.nf-story__frame { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; color: #fff; opacity: 0; }
.nf-story__frame b { font-size: 22px; font-weight: 400; letter-spacing: -0.02em; }
.nf-story__frame small { font-size: 14px; color: var(--ink-300); }
.nf-story__frame img { border-radius: 16px; box-shadow: 0 14px 34px rgba(37, 99, 235, .4); }
.nf-story__frame .ev-ok { width: 54px; height: 54px; }
.nfh__tag--sm { width: 92px; height: 92px; }
.nf-story.is-in .nf-story__frame { animation: nfFrame 7.5s infinite; }
.nf-story.is-in .nf-story__frame--1 { animation-delay: 2.5s; }
.nf-story.is-in .nf-story__frame--2 { animation-delay: 5s; }
.nf-story__steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 16px; }
.nf-story__step { display: flex; flex-direction: column; gap: 8px; font-size: 14px; color: var(--ink-450); }
.nf-story__step i { height: 3px; border-radius: 2px; background: var(--line-200); background-image: linear-gradient(var(--blue-500), var(--blue-500)); background-repeat: no-repeat; background-size: 0% 100%; }
.nf-story.is-in .nf-story__step i { animation: nfStep 7.5s linear infinite; }
.nf-story.is-in .nf-story__step--1 i { animation-delay: 2.5s; }
.nf-story.is-in .nf-story__step--2 i { animation-delay: 5s; }
.reduce-motion .nf-story__frame, .reduce-motion .nf-story__step i, .reduce-motion .nf-dyn__row { animation: none !important; }
.reduce-motion .nf-story__frame--2 { opacity: 1; }
.nf-floor { position: relative; width: 100%; max-width: 480px; aspect-ratio: 480 / 380; }
.nf-floor__label { position: absolute; left: 0; top: 0; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-300); }
.nf-floor__room { position: absolute; border: 1px solid rgba(255, 255, 255, .16); border-radius: 18px; background: rgba(255, 255, 255, .05); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.nf-floor__room--hall { left: 0; top: 30px; width: calc(65% - 14px); height: calc(100% - 30px); }
.nf-floor__room--lobby { right: 0; top: 30px; width: 35%; height: calc((100% - 44px) * .56); }
.nf-floor__room--kids { right: 0; bottom: 0; width: 35%; height: calc((100% - 44px) * .44); }
.nf-floor__pin { position: absolute; display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px 5px 5px; border-radius: 999px; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .16); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); font-size: 13px; color: #fff; opacity: 0; translate: 0 8px; transition: opacity .6s var(--ease-out), translate .7s var(--ease-out); transition-delay: calc(var(--k) * .15s); }
.nf-floor.is-in .nf-floor__pin { opacity: 1; translate: 0 0; }
.nf-floor__dot { position: relative; width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--blue-500); color: #fff; }
.nf-floor__dot::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--blue-380); opacity: 0; }
.nf-floor.is-in .nf-floor__dot::after { animation: nfRing 2.4s var(--ease-out) infinite; animation-delay: calc(var(--k) * .6s); }
.nf-floor__pin--0 { left: 12%; top: 46%; }
.nf-floor__pin--1 { left: 30%; top: 14%; }
.nf-floor__pin--2 { right: 6%; top: 28%; }
.nf-floor__pin--3 { right: 8%; bottom: 14%; }
.reduce-motion .nf-floor__pin { opacity: 1; translate: none; transition: none; }
@keyframes nv1Tap { 0% { opacity: 0; translate: 90px 30px; rotate: 8deg; } 22% { opacity: 1; translate: 0 0; rotate: -4deg; } 42%, 56% { opacity: 1; translate: -150px 50px; rotate: -16deg; } 80%, 100% { opacity: 1; translate: 0 0; rotate: -4deg; } }
@keyframes nfRing { from { opacity: .9; scale: 1; } to { opacity: 0; scale: 1.9; } }
@keyframes nfNow { 0%, 30% { border-color: var(--blue-500); background: #fff; box-shadow: 0 0 0 1px var(--blue-500); } 34%, 100% { border-color: transparent; background: var(--surface-0); box-shadow: none; } }
@keyframes nfFrame { 0% { opacity: 0; scale: .96; } 5%, 30% { opacity: 1; scale: 1; } 35%, 100% { opacity: 0; scale: 1.02; } }
@keyframes nfStep { 0% { background-size: 0% 100%; } 33% { background-size: 100% 100%; } 34%, 100% { background-size: 0% 100%; } }
@media (max-width: 720px) {
  .nv1 { --w: 440; --h: 660; }
  .nv1__chair { left: 0; top: 120px; scale: .85; transform-origin: 0 0; }
  .nv1__phone { left: 170px; top: 0; }
  .nv1__toast { left: 0; top: 590px; }
}