/* Közös a három demóoldalon: a BaluDesign sáv és a "ez demó" ablak.
   A demók saját színeit a CSS-változók adják (--d-bg, --d-ink, --d-accent, --d-font). */
@font-face {
    font-family: "JetBrains Mono";
    src: url("../fonts/jetbrains-mono.woff") format("woff");
    font-weight: 100 800;
    font-style: normal;
    font-display: swap;
}

:root { --bar-h: 42px; }

/* Csak a demó saját területén (.bd-demo), nulla súllyal: a Pencil és a WordPress felületei érintetlenek maradnak. */
:where(.bd-demo), :where(.bd-demo) *, :where(.bd-demo) *::before, :where(.bd-demo) *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--bar-h) + 76px); -webkit-text-size-adjust: 100%; }
body { margin: 0; overflow-x: clip; -webkit-font-smoothing: antialiased; }
#fo { overflow-x: clip; }
:where(.bd-demo) :is(img, svg) { max-width: 100%; }
[hidden] { display: none !important; }

.demo-bar {
    position: sticky; top: 0; z-index: 200; height: var(--bar-h);
    display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 0 clamp(12px, 2.5vw, 28px);
    background: #111; color: #fff; border-bottom: 2px solid #c8f031;
    font: 500 11.5px/1 "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace; letter-spacing: .06em; text-transform: uppercase;
}
.admin-bar .demo-bar { top: 32px; }
.demo-bar a { color: inherit; text-decoration: none; white-space: nowrap; }
.demo-bar__back:hover { color: #c8f031; }
.demo-bar__msg { color: #bdbdb3; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.demo-bar__msg b { color: #c8f031; font-weight: 700; }
.demo-bar__cta { padding: 9px 12px; background: #c8f031; color: #111 !important; font-weight: 800; }
.demo-bar__cta:hover { background: #fff; }

.demo-dialog { max-width: min(520px, calc(100vw - 32px)); padding: 0; border: 3px solid var(--d-ink, #111); background: var(--d-bg, #fff); color: var(--d-ink, #111); box-shadow: 10px 10px 0 var(--d-accent, #111); }
.demo-dialog::backdrop { background: rgba(10, 10, 10, .62); }
.demo-dialog__in { padding: clamp(22px, 4vw, 36px); display: grid; gap: 14px; font-family: var(--d-font, system-ui, sans-serif); }
.demo-dialog__kicker { margin: 0; font: 700 11.5px "JetBrains Mono", monospace; letter-spacing: .08em; text-transform: uppercase; color: var(--d-accent, #111); }
.demo-dialog h2 { margin: 0; font: var(--d-display, 800 40px/1 system-ui); letter-spacing: -.02em; }
.demo-dialog p { margin: 0; line-height: 1.5; font-size: 17px; }
.demo-dialog__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }
.demo-dialog__primary, .demo-dialog__close { padding: 14px 18px; border: 2px solid var(--d-ink, #111); font: 700 15px var(--d-font, system-ui); cursor: pointer; text-decoration: none; }
.demo-dialog__primary { background: var(--d-ink, #111); color: var(--d-bg, #fff); }
.demo-dialog__close { background: transparent; color: var(--d-ink, #111); }
.demo-dialog__primary:hover, .demo-dialog__close:hover { background: var(--d-accent, #111); color: var(--d-on-accent, #fff); border-color: var(--d-accent, #111); }

.demo-skip { position: absolute; left: 12px; top: -80px; z-index: 300; padding: 10px 14px; background: #111; color: #fff; }
.demo-skip:focus { top: 54px; }

@media (max-width: 720px) {
    .demo-bar__long { display: none; }
    :root { --bar-h: 40px; }
}
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .bd-demo *, .bd-demo *::before, .bd-demo *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}

/* Beúszó elemek: a [data-rv] elemek görgetésre úsznak be (demo.js). A rejtett állapot csak a .rv-on
   osztállyal él, amit a szkript tesz fel, így JS nélkül és csökkentett mozgásnál minden látszik. */
.rv-on [data-rv] {
    opacity: 0; transform: translate3d(0, 28px, 0);
    transition: opacity .8s cubic-bezier(.22, .8, .24, 1), transform .9s cubic-bezier(.22, .8, .24, 1);
    transition-delay: calc(var(--i, 0) * 90ms);
}
.rv-on [data-rv="zoom"] { transform: translate3d(0, 20px, 0) scale(.96); }
.rv-on [data-rv="left"] { transform: translate3d(-36px, 0, 0); }
.rv-on [data-rv="right"] { transform: translate3d(36px, 0, 0); }
.rv-on [data-rv].is-in { opacity: 1; transform: none; }
@media print { .rv-on [data-rv] { opacity: 1 !important; transform: none !important; } }