@font-face {
  font-family: Manrope;
  src: url("assets/fonts/manrope.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light;
  --paper: #f5f5f0;
  --surface: #fffefa;
  --ink: #183e36;
  --muted: #65736b;
  --line: #dcdfd6;
  --accent: #e1ebc6;
  --radius: 28px;
  --sans: Manrope, Arial, sans-serif;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --press-duration: 160ms;
  --flow-duration: 240ms;
}
:where(html, body, div, section, aside, main, nav, article, footer, button, input, dialog, span, p) { box-sizing: border-box; }
html, body { width: 100%; height: 100%; overflow: hidden; }
body { display: grid; place-items: center; margin: 0; background: #172a25; color: var(--ink); font: 400 1.25rem/1.5 var(--sans); -webkit-font-smoothing: antialiased; }
button, input { font: inherit; color: inherit; }
button, a { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
button { cursor: pointer; user-select: none; }
button:disabled { cursor: not-allowed; }
button, input { border-radius: 0; }
a { color: inherit; }
img { display: block; max-width: 100%; }
button img { flex: none; }
button:focus-visible, a:focus-visible, input:focus-visible { outline: 3px solid #8b672e; outline-offset: 6px; }
h1:focus { outline: none; }
h1, h2, p { margin: 0; }
h1, h2 { font-weight: 400; letter-spacing: -.055em; line-height: 1.12; text-wrap: balance; }
[hidden] { display: none !important; }

/* A valódi kioszk geometriája nem változik a böngészőablakkal. */
.stage { position: relative; width: calc(1080px * var(--kiosk-scale, 1)); height: calc(1920px * var(--kiosk-scale, 1)); }
.kiosk { position: relative; display: flex; flex-direction: column; width: 1080px; height: 1920px; overflow: hidden; background: var(--paper); transform: scale(var(--kiosk-scale, 1)); transform-origin: top left; }

/* Egy márkajel, egy kép; a fejléc és a munkaterület helye minden lépésen azonos. */
.visual { flex: none; height: 708px; padding: 0 40px; }
.visual-top { height: 172px; padding: 30px 24px; display: flex; align-items: center; justify-content: space-between; }
.brand { display: block; width: 128px; }
.brand img { width: 100%; height: auto; mix-blend-mode: multiply; }
.demo-badge { color: var(--muted); font-size: 1rem; }
.motion-toggle { display: grid; place-items: center; flex: none; width: 64px; height: 64px; padding: 0; border: 1px solid var(--line); border-radius: 50%; background: transparent; }
.hero-frame { position: relative; height: 520px; overflow: hidden; border-radius: 32px; isolation: isolate; background: var(--ink); }
.hero-photo, .visual-shade { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero-photo { object-fit: cover; object-position: center 58%; }
.visual-shade { background: linear-gradient(180deg, transparent 30%, rgb(9 38 31 / 12%) 50%, rgb(9 38 31 / 75%) 100%); }
.hero-title { position: absolute; left: 40px; right: 40px; bottom: 32px; color: #fffefa; font-size: 4.75rem; letter-spacing: -.055em; line-height: 1.1; }

.main { display: flex; flex-direction: column; flex: 1; min-height: 0; padding: 32px 64px 32px; }
.journey { flex: none; margin-bottom: 44px; }
.journey ol { display: flex; gap: 28px; list-style: none; padding: 0; margin: 0; }
.journey li { display: flex; align-items: center; flex: 1; gap: 12px; color: var(--muted); font-size: 1.125rem; }
.journey li:not(:last-child)::after { content: ""; flex: 1; height: 1px; background: var(--line); margin-inline-start: 16px; }
.step-number { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 50%; font-size: .875rem; font-variant-numeric: tabular-nums; }
.journey [aria-current="step"] { color: var(--ink); }
.journey [aria-current="step"] .step-number { background: var(--ink); color: var(--surface); }
.journey .complete .step-number { background: #e6ebde; color: var(--ink); }
.screen { display: flex; flex: 1; min-height: 0; flex-direction: column; view-transition-name: flow; }
.section-heading { flex: none; margin-bottom: 36px; }
h1 { font-size: 4rem; }

.experiences { display: grid; gap: 16px; }
.experience-card { display: flex; align-items: center; gap: 32px; width: 100%; height: 194px; padding: 12px 28px 12px 12px; border: 2px solid transparent; border-radius: var(--radius); background: var(--surface); text-align: left; }
.card-image { display: block; align-self: stretch; flex: none; width: 232px; overflow: hidden; border-radius: 16px; }
.card-image img { width: 100%; height: 100%; object-fit: cover; }
.card-title { font-size: 2rem; letter-spacing: -.035em; line-height: 1.25; }
.selection-mark { display: grid; place-items: center; width: 40px; height: 40px; flex: none; margin-inline-start: auto; border: 1px solid #aeb9ae; border-radius: 50%; }
.selection-mark img { opacity: 0; transform: scale(.9); transition: opacity var(--press-duration) var(--ease-out), transform var(--press-duration) var(--ease-out); }
:is(.experience-card, .visitor-card)[aria-pressed="true"] { background: var(--ink); color: var(--surface); }
[aria-pressed="true"] .selection-mark { background: var(--accent); border-color: var(--accent); }
[aria-pressed="true"] .selection-mark img { opacity: 1; transform: scale(1); }

.screen-actions { flex: none; min-height: 204px; margin-top: auto; padding-top: 32px; }
.button { display: flex; align-items: center; justify-content: space-between; gap: 24px; width: 100%; min-height: 96px; padding: 24px 32px; border: 0; border-radius: 24px; font-size: 1.5rem; letter-spacing: -.02em; line-height: 1.3; }
.button > span { display: flex; align-items: center; gap: 16px; }
.button.primary { background: var(--ink); color: var(--surface); }
.button.primary img { filter: brightness(0) invert(1); }
.button:disabled { background: #e2e5dc; color: #687364; }
.button:disabled img { filter: none; opacity: .6; }
.text-button, .back-button, .reader-link { display: flex; align-items: center; justify-content: center; gap: 12px; min-height: 64px; border: 0; background: transparent; padding: 16px; font-size: 1.25rem; }
.text-button { text-decoration: underline; text-underline-offset: 5px; }
.back-button { margin: 12px auto 0; }
.footer { display: flex; align-items: center; justify-content: center; flex: none; margin-top: 24px; min-height: 72px; }
.reader-link { color: #405e50; }

/* A létszámnak saját, nagy érintőfelülete van. */
.chosen-experience { display: flex; align-items: center; gap: 20px; padding-bottom: 24px; margin-bottom: 32px; border-bottom: 1px solid var(--line); }
.chosen-experience > img { width: 64px; height: 64px; object-fit: cover; border-radius: 12px; }
.chosen-experience .chosen-name { font-size: 1.5rem; letter-spacing: -.025em; }
.chosen-experience .text-button { margin-inline-start: auto; padding-inline-end: 0; color: var(--muted); }
.visitor-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.visitor-card { display: flex; flex-direction: column; min-height: 408px; padding: 36px; border: 2px solid transparent; border-radius: var(--radius); background: var(--surface); text-align: left; }
.visitor-top { display: flex; align-items: center; justify-content: space-between; width: 100%; }
.visitor-icon { opacity: .8; }
.visitor-card[aria-pressed="true"] .visitor-icon { filter: brightness(0) invert(1); }
.visitor-count { display: flex; align-items: baseline; gap: 20px; margin-top: 36px; font-size: 8rem; line-height: 1.1; letter-spacing: -.075em; font-variant-numeric: tabular-nums; }
.visitor-count > span { font-size: 1.5rem; letter-spacing: -.02em; }
.visitor-title { margin-top: auto; padding-top: 24px; font-size: 1.75rem; letter-spacing: -.03em; }

/* A QR körül nincs dekoráció: fehér alapon, sértetlen csendes zónával. */
.ticket { flex: none; width: 100%; padding-top: 36px; background: var(--surface); border-radius: var(--radius); box-shadow: 0 14px 40px rgb(24 62 54 / 5%); overflow: hidden; }
.ticket-header { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; padding: 0 40px; }
.ticket-header .chosen-name { font-size: 2rem; letter-spacing: -.035em; }
.ticket-visitors { font-size: 1.5rem; }
.ticket-code { display: flex; align-items: center; flex-direction: column; gap: 12px; padding: 32px 40px 36px; }
.qr-image { image-rendering: pixelated; object-fit: contain; background: white; flex: none; }
.qr-value { font: 400 1.25rem/1.4 ui-monospace, monospace; letter-spacing: .1em; }
.ticket-perforation { height: 1px; margin: 0 24px; border-top: 1px dashed #c5cebe; position: relative; }
.ticket-perforation::before, .ticket-perforation::after { content: ""; position: absolute; top: -15px; width: 28px; height: 28px; border-radius: 50%; background: var(--paper); }
.ticket-perforation::before { left: -38px; }
.ticket-perforation::after { right: -38px; }
.ticket-bottom { display: flex; justify-content: space-between; gap: 24px; padding: 24px 40px; color: var(--muted); font-size: 1.125rem; }
.ticket-demo { font-size: 1rem; }
.ticket-delivery { flex: none; position: relative; padding-top: 16px; }
.printer-slot { position: relative; z-index: 1; width: 456px; height: 14px; margin: 0 auto; border-radius: 50px; background: #233e33; box-shadow: 0 3px 0 #d7ddd0; }
.paper-window { padding: 0 0 32px; overflow: hidden; }
.mini-ticket { display: flex; flex-direction: column; align-items: center; position: relative; width: 352px; padding: 28px 28px 24px; margin: -4px auto 0; background: var(--surface); box-shadow: 0 12px 24px rgb(24 62 54 / 8%); }
.mini-ticket::after { content: ""; position: absolute; height: 10px; left: 0; right: 0; bottom: -10px; background: linear-gradient(135deg, var(--surface) 25%, transparent 25%) -7px 0 / 14px 14px, linear-gradient(225deg, var(--surface) 25%, transparent 25%) -7px 0 / 14px 14px; }
.mini-wordmark { font-size: 1.75rem; letter-spacing: -.05em; }
.mini-ticket .chosen-name { font-size: 1.5rem; font-weight: 400; margin-top: 24px; text-align: center; }
.mini-ticket .ticket-visitors { font-size: 1.125rem; margin: 8px 0 24px; }
.mini-ticket .qr-value { font-size: 1rem; margin-top: 12px; }
.mini-demo { font-size: .875rem; color: var(--muted); margin-top: 20px; }
.next-stop { display: flex; align-items: center; justify-content: center; gap: 16px; min-height: 64px; color: #405e50; font-size: 1.25rem; }

/* Nyugodt, teljes képes nyitókép. Csak ez a díszítő háttér mozog. */
.screensaver { position: absolute; inset: 0; z-index: 20; overflow: hidden; isolation: isolate; background: var(--ink); color: var(--surface); }
.saver-photo, .saver-shade { position: absolute; inset: 0; width: 100%; height: 100%; }
.saver-photo { object-fit: cover; object-position: 47% center; }
.saver-shade { background: linear-gradient(180deg, rgb(5 28 24 / 12%), rgb(5 28 24 / 66%) 28%, rgb(5 28 24 / 76%) 72%, #133b30 100%); }
.saver-brand { position: absolute; top: 64px; left: 64px; width: 152px; padding: 18px; background: var(--surface); border-radius: 24px; }
.saver-brand img { width: 100%; height: auto; mix-blend-mode: multiply; }
.saver-motion { position: absolute; top: 64px; right: 64px; z-index: 3; background: rgb(13 43 33 / 55%); border-color: rgb(255 255 255 / 50%); }
.saver-motion img { filter: brightness(0) invert(1); }
.saver-copy { position: absolute; left: 72px; right: 72px; top: 672px; pointer-events: none; z-index: 2; }
.saver-copy h1 { font-size: 6rem; letter-spacing: -.06em; line-height: 1.12; }
.welcome-weekday { margin-top: 16px; font-size: 2rem; }
/* Az adatok közvetlenül a fotón állnak, külön kártyafelület nélkül. */
.welcome-board { margin-top: 56px; }
.welcome-board-top { display: flex; align-items: center; justify-content: space-between; gap: 24px; font-size: 1.5rem; }
.welcome-day { display: grid; grid-template-columns: 1fr 244px; gap: 48px; margin-top: 32px; }
.daily-offer { align-self: center; }
.daily-offer h2 { font-size: 4rem; letter-spacing: -.045em; line-height: 1.2; }
.daily-offer p { margin-top: 16px; font-size: 1.5rem; }
.welcome-weather > span, .welcome-weather p { font-size: 1.375rem; }
.welcome-weather > div { display: flex; align-items: center; gap: 12px; margin: 8px 0 4px; }
.welcome-weather img { filter: brightness(0) invert(1); }
.welcome-weather strong { font-size: 4.5rem; font-weight: 400; letter-spacing: -.06em; line-height: 1.2; }
.welcome-weather strong > span { font-size: 1.75rem; margin-inline-start: 8px; letter-spacing: 0; }
.welcome-pools { margin-top: 40px; padding-top: 32px; border-top: 1px solid rgb(255 254 250 / 30%); }
.welcome-pools h2 { font-size: 1.5rem; letter-spacing: 0; line-height: 1.5; }
.pool-temperatures { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; margin: 24px 0 0; }
.pool-temperatures dt { font-size: 1.5rem; }
.pool-temperatures dd { margin: 12px 0 0; font-size: 6rem; letter-spacing: -.06em; line-height: 1.2; font-variant-numeric: tabular-nums; }
.pool-temperatures dd > span { font-size: 1.75rem; margin-inline-start: 8px; letter-spacing: 0; }
.saver-wake { position: absolute; inset: 0; width: 100%; padding: 0; border: 0; background: transparent; color: inherit; z-index: 1; }
.saver-call { position: absolute; left: 72px; right: 72px; bottom: 200px; display: flex; align-items: center; justify-content: space-between; padding: 22px 24px 22px 36px; border-radius: 32px; background: var(--accent); color: var(--ink); font-size: 2rem; letter-spacing: -.025em; }
.saver-touch { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: var(--ink); }
.saver-touch img { filter: brightness(0) invert(1); }
.saver-wake:focus-visible { outline: none; }
.saver-wake:focus-visible .saver-call { outline: 3px solid var(--surface); outline-offset: 8px; }
@media (prefers-reduced-motion: no-preference) {
  .screensaver:not([hidden]) .saver-photo { animation: saver-drift 24s ease-in-out infinite alternate; }
  /* A lassabb mozgás itt a papír útját mutatja, nem a használatot késlelteti. */
  html[data-input="pointer"] #done:not([hidden]) .mini-ticket { animation: ticket-release 900ms var(--ease-out) both; }
}
/* A maximális közelítés a natív felbontás alatt marad Full HD-n, 2× pixelsűrűségnél is. */
@keyframes saver-drift { from { transform: scale(1.02) translateX(-.5%); } to { transform: scale(1.04) translateX(.5%); } }
@keyframes ticket-release { from { transform: translateY(-100%); opacity: .2; } to { transform: translateY(0); opacity: 1; } }
.motion-paused .saver-photo { animation-play-state: paused !important; }

.idle-warning { position: absolute; top: 32px; left: 64px; right: 64px; padding: 24px 28px; border: 1px solid #c9b17f; border-radius: 20px; background: #fff6df; color: #514325; font-size: 1.25rem; z-index: 15; }
.reader-idle-warning { position: static; margin-top: 20px; }

/* Natív párbeszédablak: a fókuszt és az Escape-et a böngésző kezeli. */
dialog { position: fixed; left: 50%; top: 50%; right: auto; bottom: auto; width: 800px; max-width: none; max-height: 1600px; margin: 0; padding: 56px; overflow: auto; border: 0; border-radius: 36px; background: var(--paper); color: var(--ink); transform: translate(-50%, -50%) scale(var(--kiosk-scale, 1)); box-shadow: 0 32px 100px rgb(8 29 21 / 20%); }
dialog::backdrop { background: rgb(9 32 24 / 60%); }
.dialog-close { position: absolute; top: 28px; right: 28px; display: grid; place-items: center; width: 64px; height: 64px; padding: 0; border: 0; border-radius: 50%; background: #e7eae0; font-size: 2rem; line-height: 1; }
.scan-symbol { margin-bottom: 36px; }
dialog h2 { font-size: 3rem; margin-bottom: 40px; }
#reader-form { display: grid; gap: 16px; }
#reader-form label { font-size: 1.25rem; }
#demo-code { width: 100%; min-height: 88px; border: 1px solid #a6b3a3; border-radius: 20px; padding: 20px 24px; background: var(--surface); font-size: 1.75rem; letter-spacing: .05em; }
#reader-form .button { margin-top: 8px; }
.demo-examples { display: flex; gap: 16px; margin-top: 24px; }
.demo-examples > button { min-width: 96px; min-height: 64px; padding: 12px 24px; border: 1px solid var(--line); border-radius: 20px; background: transparent; font-size: 1.125rem; }
#reader-result { min-height: 80px; margin-top: 24px; padding: 24px; border-radius: 20px; font-size: 1.25rem; }
#reader-result[data-error="false"] { color: #24523a; background: #e5eddc; }
#reader-result[data-error="true"] { color: #944529; background: #f8e8de; }
@supports (overlay: auto) and (transition-behavior: allow-discrete) {
  html[data-input="pointer"] dialog { opacity: 0; transform: translate(-50%, -50%) scale(calc(var(--kiosk-scale, 1) * .96)); transition: opacity 160ms var(--ease-out), transform 160ms var(--ease-out), display 160ms, overlay 160ms; transition-behavior: allow-discrete; }
  html[data-input="pointer"] dialog[open] { opacity: 1; transform: translate(-50%, -50%) scale(var(--kiosk-scale, 1)); transition-duration: var(--flow-duration); }
  html[data-input="pointer"] dialog::backdrop { opacity: 0; transition: opacity 160ms var(--ease-out), display 160ms, overlay 160ms; transition-behavior: allow-discrete; }
  html[data-input="pointer"] dialog[open]::backdrop { opacity: 1; transition-duration: var(--flow-duration); }
  @starting-style {
    html[data-input="pointer"] dialog[open] { opacity: 0; transform: translate(-50%, -50%) scale(calc(var(--kiosk-scale, 1) * .96)); }
    html[data-input="pointer"] dialog[open]::backdrop { opacity: 0; }
  }
  @media (prefers-reduced-motion: reduce) {
    html[data-input="pointer"] dialog,
    html[data-input="pointer"] dialog[open] { transform: translate(-50%, -50%) scale(var(--kiosk-scale, 1)); transition-duration: 100ms; }
    html[data-input="pointer"] dialog::backdrop,
    html[data-input="pointer"] dialog[open]::backdrop { transition-duration: 100ms; }
    @starting-style { html[data-input="pointer"] dialog[open] { transform: translate(-50%, -50%) scale(var(--kiosk-scale, 1)); } }
  }
  html:has(.screensaver:not([hidden])) dialog,
  html:has(.screensaver:not([hidden])) dialog::backdrop { transition: none; }
}

/* Gyors, megszakítható érintési visszajelzés, billentyűzetről mozgás nélkül. */
button:not(.saver-wake) { transition: transform var(--press-duration) var(--ease-out); }
html[data-input="pointer"] button:not(:disabled, .saver-wake):active { transform: scale(.97); }
html[data-input="keyboard"] button, html[data-input="keyboard"] .selection-mark img { transition: none; }
@media (hover: hover) and (pointer: fine) {
  :is(.experience-card, .visitor-card):not([aria-pressed="true"]):hover { border-color: #a6b6a4; }
  .button.primary:not(:disabled):hover { background: #285347; }
  :is(.back-button, .text-button, .reader-link):hover { color: #245a40; }
}

/* A teljes munkaterület geometriája azonos, ezért csak a tartalom mozdul. */
::view-transition-old(root), ::view-transition-new(root) { animation: none; }
::view-transition-group(flow) { animation: none; }
::view-transition-old(flow) { animation: flow-out 160ms var(--ease-out) both; }
::view-transition-new(flow) { animation: flow-in var(--flow-duration) var(--ease-out) both; }
html[data-direction="back"] { --flow-enter: -18px; --flow-exit: 10px; }
@keyframes flow-out { to { opacity: 0; transform: translateX(var(--flow-exit, -10px)); } }
@keyframes flow-in { from { opacity: 0; transform: translateX(var(--flow-enter, 18px)); } }
html[data-input="keyboard"]::view-transition-group(*),
html[data-input="keyboard"]::view-transition-old(*),
html[data-input="keyboard"]::view-transition-new(*) { animation: none !important; }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
  html[data-input="pointer"] button:not(.saver-wake):active { transform: none; }
  .selection-mark img { transform: none; transition-property: opacity; }
  [aria-pressed="true"] .selection-mark img { transform: none; }
}
@media (forced-colors: active) {
  .saver-photo { visibility: hidden; }
  .welcome-weather img { filter: none; }
  :is(.experience-card, .visitor-card)[aria-pressed="true"] { border-color: Highlight; }
  .selection-mark { border-color: ButtonText; }
  [aria-pressed="true"] .selection-mark { background: Highlight; }
}
@media print { body { display: none; } }