/* Gorgetesre tekert hero (a 2026-09-28-i hero-motor prototipus eles valtozata).
   Mindket temaban grafit, alatta hosszu atmenet a lapba. A mozgas csak html.hero-scrub alatt el
   (a <head> inline scriptje teszi ki, ha nincs csokkentett mozgas); nelkule allo kep, teljes szoveg. */

.hero{--hero-len:280;--hero-ink:#f1efe9;--focus:#a9e4ec;position:relative;background:var(--graphite);color:var(--hero-ink)}
.stage{position:relative;height:100vh;height:100dvh;min-height:560px;overflow:hidden;background:var(--graphite)}
html.hero-scrub .hero{height:calc(var(--hero-len) * 1vh);height:calc(var(--hero-len) * 1dvh)}
html.hero-scrub .stage{position:sticky;top:0}

.hero-kep,.hero-kep img,.hero-video{position:absolute;inset:0;width:100%;height:100%}
.hero-kep img,.hero-video{object-fit:cover;object-position:center;display:block}
.hero-video{opacity:0;transition:opacity 400ms var(--ease)}
.stage.kesz .hero-video{opacity:1}

/* olvashatosag: WCAG AA a szoveg teruleten */
.scrim{position:absolute;inset:0;pointer-events:none}
.scrim.alap{background:
  linear-gradient(180deg,rgba(28,33,34,.55) 0%,rgba(28,33,34,0) 22%),
  linear-gradient(0deg,rgba(28,33,34,.94) 0%,rgba(28,33,34,.78) 26%,rgba(28,33,34,.28) 48%,rgba(28,33,34,0) 66%)}
@media(min-width:900px){
  .scrim.alap{background:
    linear-gradient(180deg,rgba(28,33,34,.45) 0%,rgba(28,33,34,0) 18%),
    linear-gradient(90deg,rgba(28,33,34,.9) 0%,rgba(28,33,34,.72) 30%,rgba(28,33,34,.1) 62%,rgba(28,33,34,0) 80%),
    linear-gradient(0deg,rgba(28,33,34,.7) 0%,rgba(28,33,34,0) 40%)}
}
.scrim.veg{background:linear-gradient(0deg,var(--graphite) 0%,rgba(28,33,34,.85) 30%,rgba(28,33,34,0) 70%);opacity:.6}
html.hero-scrub .scrim.veg{opacity:0}

/* szoveg */
.hero-szoveg{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;justify-content:flex-end;padding:var(--hdr-h) var(--gutter) calc(var(--gutter) + 8px);pointer-events:none}
.hero-belso{max-width:720px;pointer-events:auto;will-change:opacity,transform}
.hero .eyebrow{font-family:var(--font);font-weight:500;font-size:15px;line-height:1.4;letter-spacing:0;color:#a9e4ec;margin:0 0 14px}
.hero .h1{font-size:clamp(34px,2.4vw + 22px,56px);line-height:1.04;letter-spacing:-.03em;font-weight:600;margin:0;color:var(--hero-ink);text-wrap:balance}
.hero .sub{font-size:clamp(16px,.4vw + 14px,19px);font-weight:400;line-height:1.5;letter-spacing:0;color:rgba(241,239,233,.84);max-width:560px;margin:18px 0 0;text-wrap:pretty}
.hero .hero-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}
.hero .micro{margin-top:14px;font-size:14px;line-height:1.45;color:rgba(241,239,233,.72);max-width:48ch}
.hero .btn.p{background:#a9e4ec;color:#1c2122;border-color:transparent}
.hero .btn.s{border-color:rgba(241,239,233,.45);color:var(--hero-ink);background:transparent}
@media(hover:hover) and (pointer:fine){
  .hero .btn.p:hover{background:#c4edf2;color:#1c2122}
  .hero .btn.s:hover{border-color:rgba(241,239,233,.85);background:rgba(241,239,233,.06)}
}
/* nyito kep: cimke + cim + fo gomb; a tortenet vegen: cimke + cim + alcim + mindket gomb.
   A valtas akkor tortenik, amikor a szoveg nem lathato (hero.js, .veg osztaly). */
html.hero-scrub .hero-szoveg:not(.veg) .sub,
html.hero-scrub .hero-szoveg:not(.veg) .btn.s,
html.hero-scrub .hero-szoveg:not(.veg) .micro{display:none}

/* betoltes: vekony cian sav a szinpad aljan, amig a video memoriaba jon */
.hero-tolt{position:absolute;left:0;right:0;bottom:0;height:2px;z-index:3;background:rgba(241,239,233,.12);opacity:0;transition:opacity 600ms var(--ease);pointer-events:none}
.hero-tolt i{position:absolute;inset:0;background:#a9e4ec;transform-origin:left;transform:scaleX(0);transition:transform 300ms var(--ease)}
.hero-tolt.fut{opacity:1}

/* Lenis mellett a bongeszo sajat sima gorgetese ki (a style.css :root szabalya ellen) */
html.lenis{scroll-behavior:auto}

@media(max-width:899px){
  .hero .hero-actions .btn{width:100%;justify-content:center}
}
@media(prefers-reduced-motion:reduce){
  .hero-video,.hero-tolt,.hero-tolt i{transition:none}
}
@media print{
  html.hero-scrub .hero{height:auto}
  html.hero-scrub .stage{position:relative}
}
