html { scroll-behavior: smooth; }
html, body { margin: 0; padding: 0; background: #0b0b0c; }
body { -webkit-font-smoothing: antialiased; }
::selection { background: oklch(0.72 0.09 74); color: #0b0b0c; }
a { color: oklch(0.86 0.03 74); text-decoration: none; }
a:hover { color: #fff; }
img { display: block; }
[hidden] { display: none !important; }

@keyframes kfade { from { opacity: 0 } to { opacity: 1 } }
@keyframes kreveal { from { opacity: 0.001; transform: translateY(30px) scale(0.985); clip-path: inset(12% 0 0 0) } to { opacity: 1; transform: none; clip-path: inset(0 0 0 0) } }
@keyframes kin-down { from { opacity: 0.001; transform: translateY(-8px) } to { opacity: 1; transform: none } }

[data-page="1"] { background: #0b0b0c; color: oklch(0.93 0.008 74); font-family: Archivo, Helvetica, sans-serif; font-weight: 300; min-height: 100vh; overflow-x: hidden; }

/* ---- Nyitás: betöltésjelző felvillanó képekkel, majd a kép kinyílik ---- */
[data-loader] { position: fixed; inset: 0; z-index: 70; background: #0b0b0c; pointer-events: none; transition: background-color 0.9s ease; font-family: Archivo, Helvetica, sans-serif; color: oklch(0.93 0.008 74); }
[data-loader] [data-ld="bar"] { position: absolute; left: 28px; right: 28px; top: 50%; height: 1px; background: rgba(255,255,255,0.12); }
[data-loader] [data-ld="fill"] { position: absolute; inset: 0; background: rgba(255,255,255,0.85); transform-origin: left center; transform: scaleX(0); }
[data-loader] [data-ld="name"], [data-loader] [data-ld="count"] { position: absolute; top: calc(50% - 30px); font-size: 10px; letter-spacing: 0.3em; text-transform: uppercase; color: rgba(255,255,255,0.7); transition: opacity 0.5s ease; }
[data-loader] [data-ld="name"] { left: 28px; }
[data-loader] [data-ld="count"] { right: 28px; letter-spacing: 0.12em; font-variant-numeric: tabular-nums; }
[data-loader] [data-ld="frame"] { position: absolute; left: 28px; top: 50%; width: var(--tw, 168px); height: var(--th, 112px); transform: translate(-50%, 16px); overflow: hidden; background: #141416; opacity: 0; transition: opacity 0.25s ease; }
[data-loader] [data-ld="frame"] img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.06); }
[data-loader][data-state="out"] { background-color: rgba(11,11,12,0); }
[data-loader][data-state="gone"] { display: none; }
[data-loader] [data-ld="stamp"] { position: absolute; top: 50%; width: var(--sw, 40px); height: var(--sh, 30px); transform: translate(-50%, 16px); object-fit: cover; filter: grayscale(1) contrast(1.06); opacity: 0.55; pointer-events: none; animation: kstamp 1.1s ease-out forwards; }
@keyframes kstamp { 0% { opacity: 0.6; translate: 0 0 } 100% { opacity: 0; translate: 0 -8px } }
@media (max-width: 600px) {
  [data-loader] [data-ld="bar"] { left: 18px; right: 18px; }
  [data-loader] [data-ld="name"] { left: 18px; }
  [data-loader] [data-ld="count"] { right: 18px; }
}

[data-hd="nav"] { animation: kin-down 1s cubic-bezier(0.16, 0.84, 0.24, 1) 0.35s both; }
html:not([data-intro]) [data-hd="nav"] { animation-play-state: paused !important; }
html:not([data-intro]) figure[data-reveal] { opacity: 0; }

/* ---- Fejléc ---- */
[data-head="1"] { position: fixed; top: 0; left: 0; right: 0; z-index: 60; height: 64px; background: rgba(11,11,12,0.42); -webkit-backdrop-filter: blur(18px) saturate(1.15); backdrop-filter: blur(18px) saturate(1.15); transition: background-color 0.8s ease; }
[data-hd="name"] { position: absolute; left: 28px; top: 22px; font-family: Archivo, Helvetica, sans-serif; font-size: 10px; line-height: 1.2; letter-spacing: 0.3em; text-transform: uppercase; color: rgba(255,255,255,0.78); }
[data-hd="name"]:hover { color: #fff; }
[data-hd="nav"] { position: absolute; right: 122px; top: 18px; display: flex; align-items: center; gap: 24px; font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; }
[data-hd="nav"] > * { border: 0; background: none; padding: 2px 0; cursor: pointer; font-family: Archivo, Helvetica, sans-serif; font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: oklch(0.78 0.012 74); border-bottom: 1px solid transparent; transition: color 0.35s ease, border-color 0.35s ease; }
[data-hd="nav"] > *:hover { color: #fff; }
[data-hd="nav"] > .on { color: #fff; border-bottom-color: rgba(255,255,255,0.85); }
[data-hd="count"] { position: absolute; right: 28px; top: 22px; font-size: 10px; line-height: 1.2; letter-spacing: 0.12em; font-variant-numeric: tabular-nums; color: rgba(255,255,255,0.78); }
[data-hd="line"] { position: absolute; left: 28px; right: 28px; top: 52px; height: 1px; background: rgba(255,255,255,0.12); }
[data-hd="fill"] { position: absolute; inset: 0; background: rgba(255,255,255,0.85); transform-origin: left center; transform: scaleX(0); }
html:not([data-intro="done"]) [data-head="1"] { background-color: rgba(11,11,12,0); -webkit-backdrop-filter: none; backdrop-filter: none; }
html:not([data-intro="done"]) [data-hd="name"], html:not([data-intro="done"]) [data-hd="count"], html:not([data-intro="done"]) [data-hd="line"] { visibility: hidden; }
@media (max-width: 600px) {
  [data-hd="name"] { left: 18px; }
  [data-hd="line"] { left: 18px; right: 18px; }
  [data-hd="count"] { display: none; }
  [data-hd="nav"] { right: 18px; gap: 14px; }
  [data-hd="nav"] > * { letter-spacing: 0.12em !important; }
}

/* A név játéka */
[data-hd="name"], [data-ld="name"] { display: inline-flex; align-items: baseline; white-space: nowrap; }
[data-c] { display: inline-block; will-change: transform, opacity; }
[data-hd="name"] { perspective: 120px; overflow: visible; }
html[data-tone="bw"] { --dot: oklch(0.86 0.02 250); }
[data-gadget] { position: absolute; pointer-events: none; overflow: visible; }
[data-gwrap] { position: absolute; left: 100%; top: -6px; width: 30px; height: 22px; overflow: hidden; pointer-events: none; }
[data-gadget="sun"], [data-gadget="moon"] { width: 18px; height: 18px; left: 8px; top: 2px; opacity: 0; }
[data-gadget="hiker"] { width: 7px; height: 11px; left: 0; bottom: 1px; opacity: 0; }
[data-gadget] .sun-rays { transform-origin: 0 0; }
[data-gadget] .leg-a, [data-gadget] .leg-b { transform-origin: 0 6px; }
@keyframes kn-legs { 0%, 100% { transform: rotate(22deg) } 50% { transform: rotate(-22deg) } }
[data-gadget="hiker"] .leg-a { animation: kn-legs 0.38s ease-in-out infinite; }
[data-gadget="hiker"] .leg-b { animation: kn-legs 0.38s ease-in-out infinite reverse; }
@keyframes kn-twinkle { 0%, 100% { opacity: 0; transform: scale(0.3) } 50% { opacity: 1; transform: scale(1) } }
[data-gadget="moon"] .star { transform-box: fill-box; transform-origin: center; opacity: 0; }
[data-hd="name"][data-anim="moon"] [data-gadget="moon"] .star-a { animation: kn-twinkle 1.6s ease 1.5s both; }
[data-hd="name"][data-anim="moon"] [data-gadget="moon"] .star-b { animation: kn-twinkle 1.6s ease 2.4s both; }

/* ---- Galéria: oszlopos mozaik, a képek a legrövidebb oszlopba kerülnek ---- */
#kepek { padding: 92px 0 40px; scroll-margin-top: 84px; }
.gallery { display: flex; gap: 14px; padding: 0 28px; align-items: flex-start; }
.gallery .col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
figure[data-reveal] { margin: 0; width: 100%; }
figure[data-reveal] button { position: relative; display: block; width: 100%; padding: 0; border: 0; background: #141416; cursor: zoom-in; overflow: hidden; }
figure[data-reveal] img { width: 100%; height: auto; background-size: cover; background-position: center; transition: transform 0.9s cubic-bezier(0.16,0.84,0.24,1); }
figure[data-reveal] button::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(8,8,9,0.5), rgba(8,8,9,0) 55%); opacity: 0; transition: opacity 0.6s ease; pointer-events: none; }
figure[data-reveal] button:hover img { transform: scale(1.045); }
figure[data-reveal] button:hover::after { opacity: 1; }
figure[data-reveal] button:focus-visible { outline: 1px solid #fff; outline-offset: 3px; }
#sentinel { height: 1px; }
.loading { margin: 30px 28px 0; text-align: center; font-size: 10px; letter-spacing: 0.3em; text-transform: uppercase; color: oklch(0.6 0.012 74); }
@media (max-width: 600px) {
  .gallery { padding: 0 14px; gap: 10px; }
  .gallery .col { gap: 10px; }
}

.empty { margin: 0 28px 40px; padding: 64px 28px; border: 1px solid rgba(255,255,255,0.1); display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
.empty-title { margin: 0; font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 300; font-size: 28px; color: #fff; }
.empty-sub { margin: 0; font-size: 13px; line-height: 1.7; color: oklch(0.74 0.012 74); }

/* ---- Rólam ---- */
#rolam { scroll-margin-top: 104px; display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 56px; align-items: start; padding: 110px 28px 90px; border-top: 1px solid rgba(255,255,255,0.08); margin-top: 60px; }
#rolam .eyebrow { margin: 0 0 24px; font-size: 10px; letter-spacing: 0.3em; text-transform: uppercase; color: oklch(0.74 0.012 74); }
#rolam .lead { margin: 0 0 20px; font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 300; font-size: clamp(28px, 2.8vw, 42px); line-height: 1.25; letter-spacing: 0.005em; color: #fff; text-wrap: pretty; }
#rolam .body { margin: 0 0 16px; max-width: 46ch; font-size: 14px; line-height: 1.75; color: oklch(0.75 0.015 74); text-wrap: pretty; }
#rolam .body:last-child { margin: 0; }
#rolam .facts { display: flex; flex-direction: column; gap: 14px; font-size: 13px; line-height: 1.8; color: oklch(0.75 0.015 74); }
#rolam .facts > div { display: flex; justify-content: space-between; gap: 16px; border-bottom: 1px solid rgba(255,255,255,0.08); padding-bottom: 12px; }
#rolam .facts > div:last-child { border-bottom: 0; padding-bottom: 0; }
#rolam .facts .v, #rolam .facts a { color: #fff; }
@media (max-width: 600px) { #rolam { padding: 80px 18px 70px; gap: 40px; grid-template-columns: 1fr; } }

footer { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; padding: 26px 28px 34px; border-top: 1px solid rgba(255,255,255,0.08); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: oklch(0.74 0.012 74); }

/* ---- Nézegető ---- */
.lightbox { position: fixed; inset: 0; z-index: 200; background: rgba(8,8,9,0.97); display: flex; align-items: center; justify-content: center; cursor: zoom-out; animation: kfade 0.35s ease forwards; font-family: Archivo, Helvetica, sans-serif; }
.lightbox > img { max-width: 92vw; max-height: 86vh; object-fit: contain; cursor: zoom-in; position: relative; z-index: 1; }
.lightbox > img.in { animation: kfade 0.45s ease forwards; }
.lb-prev, .lb-next { position: absolute; top: 0; bottom: 0; width: 22vw; border: 0; background: none; z-index: 2; }
.lb-prev { left: 0; cursor: w-resize; }
.lb-next { right: 0; cursor: e-resize; }
.lb-counter { position: absolute; bottom: 24px; left: 0; right: 0; text-align: center; font-size: 11px; letter-spacing: 0.22em; color: oklch(0.74 0.012 74); pointer-events: none; }
.lb-tools { position: absolute; top: 20px; right: 24px; display: flex; gap: 22px; z-index: 3; }
.lb-tools button { border: 0; background: none; padding: 0; color: rgba(255,255,255,0.6); font-family: inherit; font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; cursor: pointer; }
.lb-tools button:hover { color: #fff; }
.lb-zoom { position: absolute; inset: 0; z-index: 4; overflow: auto; background: #08080a; cursor: grab; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.lb-zoom.drag { cursor: grabbing; }
.lb-zoom img { max-width: none; display: block; margin: auto; background-size: 100% 100%; }
.lightbox.zoomed .lb-tools { z-index: 5; }
.lightbox.zoomed .lb-counter { display: none; }

@media (prefers-reduced-motion: reduce), print { * { animation: none !important; transition: none !important } }