/* Vendégház-választó — közös mindkét oldalon (Csicsergő bal, Röpke jobb) */
@property --hz-a { syntax: '<percentage>'; inherits: true; initial-value: 56%; }
@property --hz-b { syntax: '<percentage>'; inherits: true; initial-value: 44%; }

#hz-splash { display: none; }
html.hz-open { overflow: hidden; }
html.hz-open #hz-splash {
  display: block; position: fixed; inset: 0; z-index: 100000; overflow: hidden;
  background: #1d1915; color: #FEFAE0;
  font-family: 'Inter', 'Open Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --hz-a: 56%; --hz-b: 44%;
  transition: --hz-a .45s cubic-bezier(.3,.7,.2,1), --hz-b .45s cubic-bezier(.3,.7,.2,1), transform .5s cubic-bezier(.7,0,.2,1), opacity .3s ease .15s;
  -webkit-font-smoothing: antialiased;
}
html.hz-seen #hz-splash { display: none !important; }
html.hz-open #hz-splash[data-focus="left"] { --hz-a: 63%; --hz-b: 51%; }
html.hz-open #hz-splash[data-focus="right"] { --hz-a: 49%; --hz-b: 37%; }
html.hz-leaving #hz-splash { transform: translateY(-100%); opacity: 0; pointer-events: none; }
#hz-splash *, #hz-splash *::before, #hz-splash *::after { box-sizing: border-box; }


#hz-splash .hz-head {
  position: absolute; z-index: 6; top: 0; left: 0; right: 0; pointer-events: none;
  padding: clamp(28px, 6vh, 64px) 24px 120px; text-align: center;
  background: linear-gradient(180deg, rgba(20,16,12,.72) 0%, rgba(20,16,12,.38) 55%, rgba(20,16,12,0) 100%);
}
#hz-splash .hz-eyebrow { margin: 0 0 14px; font-size: 13px; font-weight: 500; letter-spacing: .06em; color: rgba(254,250,224,.82); }
#hz-splash .hz-title {
  margin: 0 auto 14px; max-width: 900px;
  font-family: 'Playfair Display', Georgia, serif; font-weight: 500;
  font-size: clamp(30px, 3.4vw, 50px); line-height: 1.12; letter-spacing: -.015em; color: #fff;
  text-wrap: balance; text-shadow: 0 2px 18px rgba(0,0,0,.35);
}
#hz-splash .hz-title em { font-style: italic; font-weight: 500; }
#hz-splash .hz-sub {
  margin: 0 auto; max-width: 60ch; font-size: clamp(14.5px, 1.15vw, 17px); line-height: 1.6;
  color: rgba(254,250,224,.9); text-wrap: pretty; text-shadow: 0 1px 10px rgba(0,0,0,.4);
}


#hz-splash .hz-panels { position: absolute; inset: 0; }
#hz-splash .hz-panel { position: absolute; inset: 0; overflow: hidden;  }
#hz-splash .hz-left { --acc: #A65B37; --tile: #BF724B; clip-path: polygon(0 0, var(--hz-a) 0, var(--hz-b) 100%, 0 100%); background: linear-gradient(140deg, #BF724B 0%, #5b3624 55%, #2B2419 100%); }
#hz-splash .hz-right { --acc: #456F7F; --tile: #5A8697; clip-path: polygon(var(--hz-a) 0, 100% 0, 100% 100%, var(--hz-b) 100%); background: linear-gradient(220deg, #5A8697 0%, #33505c 55%, #2A2520 100%); }
#hz-splash .hz-bg {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; max-width: none;
  filter: saturate(1.04); transform: scale(1.001); transition: transform .6s ease;
}
#hz-splash .hz-panel::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(0,0,0,.08) 30%, rgba(0,0,0,.2) 55%, rgba(18,14,10,.78) 100%);
}
#hz-splash[data-focus="left"] .hz-left .hz-bg, #hz-splash[data-focus="right"] .hz-right .hz-bg { transform: scale(1.035); }
#hz-splash .hz-stretch { position: absolute; inset: 0; z-index: 2; }
#hz-splash .hz-divider {
  position: absolute; inset: 0; z-index: 5; pointer-events: none;
  background: rgba(254,250,224,.55);
  clip-path: polygon(calc(var(--hz-a) - 1px) 0, calc(var(--hz-a) + 1px) 0, calc(var(--hz-b) + 1px) 100%, calc(var(--hz-b) - 1px) 100%);
}


#hz-splash .hz-body { position: absolute; z-index: 3; bottom: clamp(36px, 8vh, 80px); max-width: min(480px, 38vw); }
#hz-splash .hz-left .hz-body { left: clamp(28px, 5vw, 72px); }
#hz-splash .hz-right .hz-body { right: clamp(28px, 5vw, 72px); text-align: right; }
#hz-splash .hz-lockup { display: flex; align-items: center; gap: 18px; margin: 0 0 16px; }
#hz-splash .hz-right .hz-lockup { flex-direction: row-reverse; }
#hz-splash .hz-tile {
  flex: none; display: grid; place-items: center; width: clamp(56px, 5vw, 72px); aspect-ratio: 1; border-radius: 16px;
  background: var(--tile); box-shadow: 0 10px 30px rgba(0,0,0,.28), inset 0 0 0 1px rgba(255,255,255,.18);
}
#hz-splash .hz-tile svg { width: 52%; height: 52%; fill: none; stroke: #FEFAE0; stroke-width: 1.6; stroke-linejoin: round; }
#hz-splash .hz-logo { display: block; max-height: clamp(72px, 9vw, 120px); max-width: 100%; width: auto; filter: drop-shadow(0 6px 24px rgba(0,0,0,.35)); }
#hz-splash .hz-right .hz-logo { margin-left: auto; }
#hz-splash .hz-name { display: flex; flex-direction: column; min-width: 0; }
#hz-splash .hz-word { color: #fff; line-height: .95; text-shadow: 0 4px 28px rgba(0,0,0,.4); white-space: nowrap; }
#hz-splash .hz-left .hz-word { font-family: 'Playfair Display', Georgia, serif; font-weight: 600; font-size: clamp(46px, 5.6vw, 88px); letter-spacing: -.025em; }
#hz-splash .hz-right .hz-word { font-family: 'Cinzel', 'Times New Roman', serif; font-weight: 500; font-size: clamp(40px, 4.8vw, 74px); letter-spacing: .07em; text-transform: uppercase; }
#hz-splash .hz-kind { margin-top: 8px; font-size: 14px; font-weight: 500; color: rgba(254,250,224,.78); letter-spacing: .04em; }
#hz-splash .hz-desc { margin: 0 0 24px; font-size: clamp(15px, 1.2vw, 17px); color: rgba(254,250,224,.94); text-shadow: 0 1px 12px rgba(0,0,0,.5); }
#hz-splash .hz-actions { display: flex; align-items: center; gap: 10px 22px; flex-wrap: wrap; }
#hz-splash .hz-right .hz-actions { flex-direction: row-reverse; }
#hz-splash .hz-btn {
  position: relative; z-index: 4; display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 26px; border-radius: 999px; background: var(--acc); color: #fff !important; text-decoration: none !important;
  font-size: 15.5px; font-weight: 600; box-shadow: 0 10px 28px rgba(0,0,0,.3); transition: background .25s, transform .25s;
}
#hz-splash .hz-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .25s; }
#hz-splash .hz-btn:hover { background: #fff; color: #2A2520 !important; }
#hz-splash .hz-btn:hover svg { transform: translateX(4px); }
#hz-splash .hz-look {
  position: relative; z-index: 4; color: #FEFAE0 !important; font-size: 15px; font-weight: 500;
  text-decoration: underline !important; text-decoration-color: rgba(254,250,224,.45) !important; text-underline-offset: 5px;
}
#hz-splash .hz-look:hover { text-decoration-color: #FEFAE0 !important; }
#hz-splash .hz-btn:focus-visible, #hz-splash .hz-look:focus-visible { outline: 2px solid #FEFAE0; outline-offset: 3px; }


@keyframes hz-in-l { from { clip-path: polygon(0 0, 0 0, 0 100%, 0 100%); } }
@keyframes hz-in-r { from { clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%); } }
@keyframes hz-fade { from { opacity: 0; } }


html.hz-open #hz-splash .hz-head, html.hz-open #hz-splash .hz-body { animation: hz-fade .35s ease-out both; }


@media (max-width: 1100px) { #hz-splash .hz-body { max-width: 42vw; } }


@media (max-width: 860px) {
  html.hz-open #hz-splash { overflow-y: auto; -webkit-overflow-scrolling: touch; }
  #hz-splash .hz-head { position: relative; padding: 36px 20px 26px; background: #1d1915; }
  #hz-splash .hz-eyebrow { font-size: 12px; margin-bottom: 10px; }
  #hz-splash .hz-title { font-size: clamp(26px, 7.2vw, 34px); }
  #hz-splash .hz-sub { font-size: 14.5px; }
  #hz-splash .hz-panels { position: relative; inset: auto; }
  #hz-splash .hz-panel { position: relative; inset: auto; clip-path: none !important; min-height: max(290px, 35svh); animation: none !important; }
  #hz-splash .hz-panel + .hz-panel { border-top: 1px solid rgba(254,250,224,.35); }
  #hz-splash .hz-divider { display: none; }
  #hz-splash .hz-body { left: 22px !important; right: 22px !important; bottom: 26px; max-width: none; text-align: left !important; }
  #hz-splash .hz-right .hz-lockup, #hz-splash .hz-right .hz-actions { flex-direction: row; }
  #hz-splash .hz-right .hz-logo { margin-left: 0; }
  #hz-splash .hz-lockup { gap: 14px; margin-bottom: 12px; }
  #hz-splash .hz-tile { width: 52px; border-radius: 13px; }
  #hz-splash .hz-left .hz-word { font-size: clamp(40px, 12vw, 54px); }
  #hz-splash .hz-right .hz-word { font-size: clamp(34px, 10vw, 46px); }
  #hz-splash .hz-kind { font-size: 13px; margin-top: 6px; }
  #hz-splash .hz-desc { margin-bottom: 18px; }
  #hz-splash .hz-btn { padding: 13px 22px; font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) {
  html.hz-open #hz-splash, #hz-splash .hz-panel, #hz-splash .hz-bg, #hz-splash .hz-btn, #hz-splash .hz-btn svg { transition: none !important; animation: none !important; }
  html.hz-open #hz-splash .hz-left, html.hz-open #hz-splash .hz-right, html.hz-open #hz-splash .hz-head, html.hz-open #hz-splash .hz-body { animation: none !important; }
}

#hz-splash .hz-fallback { display: contents; }
#hz-splash .hz-fallback[hidden], #hz-splash .hz-logo[hidden] { display: none; }
