/* SAWW főoldal – filmszerű asztali scrollytelling (v3.43.0).
   A görgetéshez kötött szabályok a html.story-on alatt élnek (home-story.js kapcsolja be
   ≥1024px-es, egeres kijelzőn). Színek a téma (--bg, --card, --text, --border) és a
   kiemelőszín (--accent) változóiból jönnek: világos/sötét mód és színválasztó változatlan. */

/* Gépen kisebb hero-cím (JS nélkül is). */
@media (min-width: 1025px) {
    body.home-story #home h1 {
        font-size: clamp(1.9rem, 2.3vw, 2.5rem) !important;
        line-height: 1.16 !important;
        overflow: visible !important;
    }
}

/* Lenis */
html.lenis, html.lenis body { height: auto; }
html.lenis { scroll-behavior: auto !important; }
.lenis:not(.lenis-autoToggle).lenis-stopped { overflow: clip; }
.lenis [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-smooth iframe { pointer-events: none; }

html.story-on body.home-story {
    --story-ease: cubic-bezier(.22, 1, .36, 1);
    --story-slow: cubic-bezier(.16, 1, .3, 1);
    --story-glow: color-mix(in srgb, var(--accent) 38%, transparent);
    --story-tint: color-mix(in srgb, var(--accent) 12%, transparent);
}

/* ── Hero: mögöttes réteg, ráúszik a tartalom, közben elsötétül ───────── */
html.story-on body.home-story #home {
    position: sticky;
    top: 0;
    z-index: 0;
}
html.story-on body.home-story #home::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 5;
    background: #050608;
    opacity: calc(var(--p, 0) * .78);
    pointer-events: none;
}
html.story-on body.home-story #home .hero-content {
    opacity: calc(1 - var(--p, 0) * 1.6);
    translate: 0 calc(var(--p, 0) * -140px);
    scale: calc(1 - var(--p, 0) * .06);
    will-change: translate, opacity;
}
html.story-on body.home-story #home .hero-scroll { opacity: calc(1 - var(--p, 0) * 4); }
html.story-on body.home-story #home .hero-ticker { translate: calc(var(--p, 0) * -22vw) 0; }
html.story-on body.home-story #home .vertical-text-container,
html.story-on body.home-story #home .hero-separator { translate: 0 calc(var(--p, 0) * 220px); }
html body.home-story #home h1 span.story-chars,
html body.home-story #home h1 span.story-char {
    display: inline-block !important;
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
    margin: 0 !important;
    padding: 0 !important;
    width: auto !important;
}
html body.home-story #home h1 span.story-chars { white-space: nowrap; }
html body.home-story #home h1 span.story-char {
    translate: calc(var(--p, 0) * var(--d, 0) * 34px) calc(var(--p, 0) * var(--d, 0) * var(--d, 0) * -9px);
}

/* A hero fölé csúszó rétegek */
html.story-on body.home-story .story-scene,
html.story-on body.home-story .story-showcase,
html.story-on body.home-story footer {
    position: relative;
    z-index: 1;
}
html.story-on body.home-story .story-scene {
    overflow: clip !important;
    background-color: var(--bg) !important;
}
html.story-on body.home-story .story-curtain {
    border-radius: 40px 40px 0 0;
    box-shadow: 0 -40px 80px -30px rgba(0, 0, 0, .45);
}

/* ── Jelenetek: lassú, puha belépés és kilépés ───────────────────────── */
/* Csak translate + opacity (nincs scale, nincs blur): gyengébb gépen is simán fut. */
html.story-on body.home-story .story-scene > .container {
    translate: 0 calc((1 - var(--in, 1)) * 110px + var(--out, 0) * -60px);
    opacity: calc((.05 + var(--in, 1) * .95) * (1 - var(--out, 0) * .75));
    transition: translate .9s var(--story-slow), opacity .6s linear;
}
html.story-on body.home-story .story-scene .section-title {
    --t: min(1, calc(var(--in, 1) * 1.45));
    clip-path: inset(-20% calc((1 - var(--t)) * 50%) -40% calc((1 - var(--t)) * 50%));
    translate: 0 calc((1 - var(--t)) * 30px);
    transition: clip-path .9s var(--story-slow), translate 1s var(--story-slow);
}
html.story-on body.home-story #workflow .section-title { --t: 1; }

/* A régi egyszeri „reveal” animációt itt a görgetéshez kötött mozgás váltja. */
html.story-on body.home-story .story-scene [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
}

/* Kártyák: egymás után felúsznak */
html.story-on body.home-story .story-scene :is(.fit-card, .price-plan, .local-card, .saww-review-card, .contact-person-card, .mega-card, .svc-tile-item, .local-link) {
    --sp: clamp(0, calc(var(--in, 1) * 1.8 - var(--si, 0) * .13), 1);
    translate: 0 calc((1 - var(--sp)) * 110px);
    opacity: var(--sp) !important;
    transition: translate 1.1s var(--story-slow), opacity .7s linear, transform .45s var(--story-ease), box-shadow .45s var(--story-ease), border-color .3s ease, background-color .3s ease;
}
/* Árak: eltérő sebességű parallaxis */
html.story-on body.home-story #pricing .price-plan:nth-child(1) { translate: 0 calc((1 - var(--sp)) * 110px + (.5 - var(--p, .5)) * 60px); }
html.story-on body.home-story #pricing .price-plan:nth-child(2) { translate: 0 calc((1 - var(--sp)) * 110px + (.5 - var(--p, .5)) * -50px); }
html.story-on body.home-story #pricing .price-plan:nth-child(3) { translate: 0 calc((1 - var(--sp)) * 110px + (.5 - var(--p, .5)) * 100px); }

/* Óriás körvonalas háttérszavak (a kapcsolatoknál úszik, saját rétegen – nem rajzol újra) */
html.story-on body.home-story :is(#contacts .contacts-bg-word, #workflow .workflow-bg-word) {
    color: transparent !important;
    -webkit-text-fill-color: transparent !important;
    -webkit-text-stroke: 1px var(--border);
    opacity: 1 !important;
}
html.story-on body.home-story .contacts-bg-word {
    translate: calc(28vw - var(--p, .5) * 56vw) 0;
    will-change: translate;
}

/* Szavankénti kigyulladás, nagy „filmes” mondatok */
html.story-on body.home-story .story-word {
    opacity: .12;
    transition: opacity .7s ease;
}
html.story-on body.home-story .story-word.is-lit { opacity: 1; }
html.story-on body.home-story #kinek-ajanljuk .fit-subtitle {
    max-width: 920px;
    margin-left: auto !important;
    margin-right: auto !important;
    font-size: clamp(1.5rem, 1.25vw + 12px, 2.3rem) !important;
    font-weight: 700 !important;
    line-height: 1.32 !important;
    color: var(--text) !important;
}

/* ── Kitűzött jelenet: munkáink, teljes képernyőre nyíló képek ─────────── */
.story-showcase { display: none; }
html.story-on body.home-story .story-showcase {
    display: block;
    height: 300vh;
    background: var(--bg);
}
.story-show-sticky {
    --e: min(1, calc(var(--p, 0) * 2));
    --q: clamp(0, calc((var(--p, 0) - .45) * 4), 1);
    position: sticky;
    top: 0;
    height: 100vh;
    overflow: hidden;
    isolation: isolate;
    color: #fff;
}
.story-show-media {
    position: absolute;
    inset: 0;
    clip-path: inset(calc((1 - var(--e)) * 16%) calc((1 - var(--e)) * 26%) round calc((1 - var(--e)) * 36px));
    background: #050608;
}
.story-show-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 0;
    opacity: 0;
    scale: calc(1.25 - var(--e) * .25);
    transition: opacity 1s ease;
}
.story-show-img.is-current { opacity: 1; }
/* Sötét átmenet már a kép kinyílásával (--e), nem csak a szöveggel: világos képernyőképen is olvasható a felirat. */
.story-show-media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(5, 6, 8, .94) 0, rgba(5, 6, 8, .8) 42%, rgba(5, 6, 8, .4) 72%, rgba(5, 6, 8, .2) 100%);
    opacity: var(--e);
}
.story-show-copy { text-shadow: 0 2px 24px rgba(0, 0, 0, .55); }
/* A sablon témaszín-szabályai (!important, szürke/sötét bekezdésszín) ellen: a jelenet szövege
   mindig fehér a sötét átmeneten, világos témában is. */
html[data-theme] #story-showcase :is(.story-show-title, .story-show-now b) { color: #fff !important; -webkit-text-fill-color: #fff !important; }
html[data-theme] #story-showcase .story-show-now { color: rgba(255, 255, 255, .78) !important; -webkit-text-fill-color: rgba(255, 255, 255, .78) !important; }
html[data-theme] #story-showcase .story-show-kicker { color: var(--accent) !important; -webkit-text-fill-color: var(--accent) !important; }
html[data-theme] #story-showcase .story-show-cta { color: #0a0a0a !important; -webkit-text-fill-color: #0a0a0a !important; }
html[data-theme] #story-showcase .story-show-cta:hover { color: #fff !important; -webkit-text-fill-color: #fff !important; }
.story-show-copy {
    position: relative;
    z-index: 1;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 18px;
    width: min(1200px, 90%);
    margin: 0 auto;
    opacity: var(--q);
    translate: 0 calc((1 - var(--q)) * 50px);
}
.story-show-kicker {
    margin: 0;
    font: 800 .8rem/1 Orbitron, Inter, sans-serif;
    letter-spacing: .3em;
    text-transform: uppercase;
    color: var(--accent);
}
.story-show-title {
    margin: 0;
    font: 900 clamp(2.2rem, 4.2vw, 4rem)/1.05 Orbitron, Inter, sans-serif;
    letter-spacing: .01em;
    color: #fff;
    text-transform: uppercase;
}
.story-show-now { margin: 0; font: 600 1rem/1.4 Inter, sans-serif; color: rgba(255, 255, 255, .78); }
.story-show-now b { font: 800 1.6rem/1 Orbitron, sans-serif; color: #fff; margin-right: 4px; }
.story-show-now span { margin-left: 12px; padding-left: 12px; border-left: 1px solid rgba(255, 255, 255, .35); }
.story-show-cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 8px;
    padding: 14px 26px;
    border-radius: 999px;
    background: #fff;
    color: #0a0a0a;
    font: 800 .82rem/1 Inter, sans-serif;
    letter-spacing: .08em;
    text-transform: uppercase;
    text-decoration: none;
    transition: background-color .3s ease, color .3s ease;
}
.story-show-cta:hover { background: var(--accent); color: #fff; }

/* ── Munkafolyamat: kitűzött, vízszintesen gördülő idővonal ─────────────
   A szekció 280vh magas, a tartalom 100vh-s ragadós dobozban középen áll; görgetéskor a
   négy lépés balra úszik (JS: translate px), a vonal az aktív lépésig töltődik, a háttér
   óriás száma a lépést mutatja. 720px-nél alacsonyabb ablakban marad a sima 4 oszlop. */
.story-wf-meter { display: none; }
@media (min-height: 721px) {
    html.story-on body.home-story #workflow { height: 280vh; padding: 0 !important; }
    html.story-on body.home-story #workflow > .container {
        position: sticky;
        top: 0;
        height: 100vh;
        display: flex;
        flex-direction: column;
        justify-content: center;
        max-width: none !important;
        padding: 90px 0 0 !important; /* a rögzített fejléc alatt */
    }
    html.story-on body.home-story #workflow .workflow-bg-deco { position: sticky; inset: auto; top: 0; width: 100%; height: 100vh; margin-bottom: -100vh; }
    html.story-on body.home-story .story-wf-viewport {
        width: min(1240px, 100% - 2 * clamp(24px, 6vw, 110px));
        margin: 0 auto;
    }
    html.story-on body.home-story #workflow .workflow-timeline {
        display: flex !important;
        gap: clamp(24px, 3vw, 44px);
        width: max-content;
        padding: 22px 0 30px;
        will-change: translate;
    }
    html.story-on body.home-story #workflow .workflow-step {
        flex: 0 0 clamp(380px, 32vw, 520px);
        opacity: .42 !important;
        transform: none !important;
        scale: .94;
        transition: opacity .6s ease, scale .8s var(--story-slow);
    }
    html.story-on body.home-story #workflow .workflow-step.is-past { opacity: .6 !important; }
    html.story-on body.home-story #workflow .workflow-step.is-active { opacity: 1 !important; scale: 1; }
    html.story-on body.home-story #workflow .workflow-progress-line {
        left: 0 !important;
        right: 0 !important;
        top: calc(22px + 32px);
        overflow: visible;
    }
    html.story-on body.home-story #workflow .workflow-progress-line::after {
        transform: none !important;
        width: var(--fill, 0px) !important;
        transition: width .7s var(--story-slow) !important;
    }
    html.story-on body.home-story #workflow .workflow-progress-line::before {
        content: "";
        position: absolute;
        top: 50%;
        left: var(--fill, 0px);
        width: 12px;
        height: 12px;
        margin: -6px 0 0 -6px;
        border-radius: 50%;
        background: var(--accent);
        box-shadow: 0 0 0 6px var(--story-tint);
        transition: left .7s var(--story-slow);
    }
    html.story-on body.home-story #workflow .workflow-footer-cta { margin-top: 10px; }
}
html.story-on body.home-story #workflow .workflow-step.is-active .workflow-step-card {
    border-color: var(--accent) !important;
    box-shadow: 0 30px 70px -24px var(--story-glow) !important;
}
html.story-on body.home-story #workflow .workflow-step.is-active .workflow-step-node {
    background: var(--accent) !important;
    border-color: var(--accent) !important;
    box-shadow: 0 0 0 8px var(--story-tint);
}
html.story-on body.home-story #workflow .workflow-step.is-active .workflow-step-roman { color: #fff !important; -webkit-text-fill-color: #fff !important; }
html.story-on body.home-story #workflow .section-title { margin-bottom: 14px; }
html.story-on body.home-story #workflow .workflow-subtitle { margin: 0 auto 14px !important; }
html.story-on body.home-story #workflow .workflow-bg-word {
    font-size: clamp(10rem, 22vw, 20rem);
    -webkit-text-stroke: 1px color-mix(in srgb, var(--accent) 22%, var(--border));
    transition: opacity .4s ease;
}
html.story-on body.home-story #workflow .workflow-bg-word.is-swap { opacity: 0 !important; }
html.story-on body.home-story .story-wf-meter {
    display: flex;
    justify-content: center;
    align-items: baseline;
    gap: 14px;
    margin: 0 0 6px;
}
.story-wf-count { font: 800 1rem/1 Orbitron, sans-serif; color: var(--text-muted); letter-spacing: .08em; }
.story-wf-count b { font-size: 2.2rem; color: var(--accent); font-weight: 900; }
.story-wf-now { font: 700 1.15rem/1.3 Inter, sans-serif; color: var(--text); }
.story-wf-now::before { content: "— "; color: var(--text-muted); }

/* ── Könnyített mód: gyenge gépen (mért képkockaszám alapján) ─────────── */
html.story-lite body.home-story #home h1 span.story-char { translate: none; }
html.story-lite body.home-story .story-scene > .container,
html.story-lite body.home-story .story-scene :is(.fit-card, .price-plan, .local-card, .saww-review-card, .contact-person-card, .mega-card, .svc-tile-item, .local-link),
html.story-lite body.home-story .story-scene .section-title { transition: none; }
html.story-lite body.home-story .story-scene .section-title { clip-path: none; }
html.story-lite body.home-story .contacts-bg-word { translate: none; will-change: auto; }
html.story-lite body.home-story .story-curtain { box-shadow: none; }

/* ── Hover: dőlés, fénypont, kiemelőszínű keret ──────────────────────── */
html.story-on body.home-story :is(.fit-card, .price-plan, .local-card, .saww-review-card, .contact-person-card, .workflow-step-card, .mega-card) {
    transform-style: preserve-3d;
}
html.story-on body.home-story .story-scene :is(.fit-card, .price-plan, .local-card, .saww-review-card, .contact-person-card, .mega-card):hover,
html.story-on body.home-story #workflow .workflow-step-card:hover {
    transform: perspective(1100px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(-8px) !important;
    border-color: var(--accent) !important;
    box-shadow: 0 32px 70px -26px var(--story-glow), 0 0 0 1px var(--story-tint) !important;
}
html.story-on body.home-story :is(.fit-card, .local-card, .price-plan, .workflow-step-card) :is(i, .local-card-icon, .price-plan-icon, .workflow-step-icon-wrap) {
    transition: transform .45s var(--story-ease), color .3s ease;
}
html.story-on body.home-story :is(.fit-card, .local-card, .price-plan, .workflow-step-card):hover :is(.fit-card > i, .local-card-icon, .price-plan-icon, .workflow-step-icon-wrap) {
    transform: scale(1.14) rotate(-7deg);
}
html.story-on body.home-story .contact-person-card:hover .contact-photo-wrap img { transform: scale(1.06); }
html.story-on body.home-story .svc-tile { transition: transform .4s var(--story-ease), box-shadow .4s ease, border-color .3s ease, color .3s ease; }
html.story-on body.home-story .svc-tile:hover {
    transform: translateY(-6px);
    border-color: var(--accent) !important;
    box-shadow: 0 22px 40px -22px var(--story-glow);
}
html.story-on body.home-story .svc-tile:hover .svc-tile-icon { color: var(--accent); }
html.story-on body.home-story :is(.svc-ticker, .works-ticker, .partner-strip-ticker):hover :is(.svc-track, .works-track, .partner-strip-track) { animation-play-state: paused; }
html.story-on body.home-story :is(.works-ticker-item, .partner-strip-item) { transition: transform .4s var(--story-ease); }
html.story-on body.home-story :is(.works-ticker-item, .partner-strip-item):hover { transform: translateY(-6px) scale(1.04); }

/* ── Városkártyák gépen: 8 kártya 2 sorban (4 oszlop), kisebb kártyák ──── */
@media (min-width: 1025px) {
    body.home-story .local-section .local-grid {
        width: min(100%, 1180px);
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        gap: 16px;
    }
    body.home-story .local-section .local-card { min-height: 0 !important; padding: 22px 20px !important; }
    body.home-story .local-section .local-card-icon { width: 42px; height: 42px; margin-bottom: 14px; font-size: 1.05rem; }
    body.home-story .local-section .local-card::after { width: 50px; height: 50px; inset: auto 14px 14px auto; }
}