/* FORMA v2 – dizaino kintamieji */
@font-face { font-family: "Archivo Fallback"; src: local("Arial Black"), local("Arial-Black"); font-weight: 700 900; size-adjust: 120.5%; ascent-override: 73%; descent-override: 17.5%; }
:root {
  --bg: #08090A; --bg-2: #0F1012; --ink: #F3F3F0; --ink-2: #B8BCC2; --ink-3: #8C9198; --line: #23262B;
  --accent: #FF3B30; --on-accent: #0A0101;
  --f-display: "Archivo", "Archivo Fallback", "Arial Black", sans-serif;
  --f-sans: "Manrope", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --pad: clamp(1.25rem, 4vw, 3.5rem);
  --ease: cubic-bezier(.16, 1, .3, 1);
  --r: 14px;
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { background: var(--bg); color-scheme: dark; -webkit-text-size-adjust: 100%; overflow-x: clip; }
.gal, .hero { overflow-x: clip; }
body { background: var(--bg); color: var(--ink); font: 400 1rem/1.6 var(--f-sans); -webkit-font-smoothing: antialiased; overflow-x: clip; }
img, video { display: block; max-width: 100%; }
a { color: inherit; }
ul, ol { list-style: none; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.skip { position: fixed; top: .75rem; left: .75rem; z-index: 200; padding: .6rem 1rem; background: var(--accent); color: var(--on-accent); font-weight: 700; transform: translateY(-200%); }
.skip:focus { transform: none; }
.display, .logo, h1, h2, .num, .loader-num, .hero-mask { font-family: var(--f-display); font-weight: 900; font-stretch: 125%; font-variation-settings: "wdth" 125; letter-spacing: -.02em; }
.logo { font-size: 1.5rem; text-decoration: none; } .logo i { color: var(--accent); font-style: normal; }

/* Mygtukai */
.btn { display: inline-flex; align-items: center; gap: .6rem; min-height: 46px; padding: 0 1.25rem; border: 0; border-radius: 999px; background: var(--accent); color: var(--on-accent); font: 700 .95rem/1 var(--f-sans); text-decoration: none; cursor: pointer; transition: background-color .3s, translate .6s var(--ease); translate: var(--tx, 0) var(--ty, 0); }
.btn:hover { background: #FF6A5F; }
.btn--xl { min-height: 64px; padding: 0 2rem; font-size: 1.15rem; }
.btn--full { width: 100%; justify-content: center; min-height: 56px; margin-top: 1.5rem; }
.lnk { color: var(--ink-2); text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size .5s var(--ease), color .3s; padding-bottom: 2px; }
.lnk:hover { color: var(--ink); background-size: 100% 1px; }

/* Preloader */
.loader { position: fixed; inset: 0; z-index: 150; background: var(--bg); display: none; align-items: flex-end; justify-content: flex-end; padding: var(--pad); }
.js .loader { display: flex; }
.loader-num { font-size: clamp(5rem, 22vw, 20rem); line-height: .8; font-variant-numeric: tabular-nums; }
.loader-bar { position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: var(--accent); transform-origin: left; transform: scaleX(0); }

/* Antraštė */
.hdr { position: fixed; inset: 0 0 auto; z-index: 60; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem var(--pad); padding-top: max(1rem, env(safe-area-inset-top)); mix-blend-mode: normal; }
.hdr::before { content: ""; position: absolute; inset: 0 0 -40px; z-index: -1; background: linear-gradient(var(--bg) 0%, transparent); opacity: .7; pointer-events: none; }
.hdr nav { display: none; gap: 2rem; font-size: .9rem; font-weight: 600; }
.hdr nav a { color: var(--ink-2); text-decoration: none; } .hdr nav a:hover { color: var(--ink); }
@media (min-width: 768px) { .hdr nav { display: flex; } }

/* HERO */
.hero { position: relative; height: 100svh; }
.js .hero { height: 260svh; } /* prisegama, kol priartėjama pro raides */
.hero-pin { position: sticky; top: 0; height: 100svh; overflow: hidden; display: grid; place-items: center; }
.hero-media, .hero-media img, .hero-media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-media video { opacity: 0; transition: opacity .8s; } .hero-media video.on { opacity: 1; }
/* Kaukė: juodas sluoksnis su BALTU tekstu + multiply → video matomas tik pro raides */
.hero-mask { position: absolute; inset: 0; display: grid; place-items: center; background: var(--bg); color: #fff; mix-blend-mode: multiply; will-change: transform; transform-origin: 50.5% 50%; }
.hero-mask span { font-size: 19.5vw; line-height: .8; letter-spacing: -.035em; }
.hero-tag { position: absolute; left: var(--pad); bottom: calc(var(--pad) + 2.5rem); font-size: clamp(1.4rem, 3.2vw, 3rem); line-height: 1; max-width: 14ch; }
.hero-tag span { display: block; } .hero-tag span + span { color: var(--accent); }
.hero-meta { position: absolute; left: var(--pad); bottom: var(--pad); color: var(--ink-2); font-size: .8rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; }
.hero-cue { position: absolute; right: var(--pad); bottom: var(--pad); color: var(--ink-3); font-size: .8rem; letter-spacing: .2em; text-transform: uppercase; }
@media (max-width: 767px) { .hero-mask span { font-size: 18.5vw; } .hero-cue { display: none; } }

/* Teiginys: žodžiai šviesėja slenkant */
.statement { padding: clamp(6rem, 18vh, 12rem) var(--pad); }
.words { font-family: var(--f-display); font-weight: 900; font-stretch: 112%; font-variation-settings: "wdth" 112; font-size: clamp(1.9rem, 5.2vw, 5rem); line-height: 1.02; letter-spacing: -.02em; max-width: 22ch; }
.words .wd { opacity: .14; }

/* Marquee */
.marquee { overflow: hidden; border-block: 1px solid var(--line); padding: 1.1rem 0; white-space: nowrap; }
.mq-track { display: inline-flex; will-change: transform; }
.mq-track span { font-family: var(--f-display); font-weight: 900; font-stretch: 125%; font-variation-settings: "wdth" 125; font-size: clamp(2.4rem, 8vw, 7rem); line-height: 1; text-transform: uppercase; padding-right: .3em; }
.mq-track i { color: var(--accent); font-style: normal; font-size: .5em; vertical-align: middle; }
.marquee--alt { background: var(--accent); color: var(--on-accent); border: 0; } .marquee--alt i { color: var(--on-accent); }

/* Kryptys */
.dirs { padding: clamp(5rem, 14vh, 10rem) var(--pad); display: grid; gap: clamp(6rem, 16vh, 12rem); }
.dir { display: grid; gap: 2rem; align-items: end; }
.dir h2 { font-size: min(8.2vw, 9rem); line-height: .86; text-transform: uppercase; margin: .5rem 0 1rem; white-space: nowrap; } /* „ARCHITEKTŪRA“ ≈ 10.7em → telpa */
.dir-txt > p:not(.num) { color: var(--ink-2); max-width: 36ch; font-size: 1.1rem; }
.num { color: var(--accent); font-size: 1rem; }
.meta { margin-top: .75rem; font-size: .9rem; } .meta b { color: var(--ink); font-family: var(--f-display); font-size: 1.3rem; }
.reveal { position: relative; aspect-ratio: 16 / 10; overflow: hidden; border-radius: var(--r); }
.reveal img, .reveal video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.reveal video { opacity: 0; transition: opacity .8s; } .reveal video.on { opacity: 1; }
@media (min-width: 900px) { .dir { grid-template-columns: 5fr 7fr; } .dir--r .dir-txt { order: 2; } .dir h2 { font-size: min(3.4vw, 4.4rem); } } /* 5fr stulpelis ≈ 38 % pločio */

/* Galerija */
.gal { position: relative; }
.gal-pin { padding: clamp(4rem, 10vh, 7rem) 0; overflow: hidden; }
.gal-h { padding: 0 var(--pad); font-size: clamp(2.5rem, 8vw, 7rem); line-height: .9; text-transform: uppercase; margin-bottom: 2rem; }
.gal-h sup { color: var(--accent); font-size: .3em; vertical-align: top; }
.gal-track { display: flex; gap: clamp(1rem, 2vw, 2rem); padding: 0 var(--pad); width: max-content; will-change: transform; }
.card { width: min(78vw, 560px); flex: none; }
.card img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--r); }
.card p { margin-top: .9rem; color: var(--ink-3); font-size: .9rem; } .card b { display: block; color: var(--ink); font-size: 1.15rem; }
.gal-note { padding: 1.5rem var(--pad) 0; color: var(--ink-3); font-size: .8rem; letter-spacing: .15em; text-transform: uppercase; }
/* Be prisegimo (telefonas / reduced motion / be JS): natūralus braukimas su snap */
.gal:not(.is-pinned) .gal-pin { overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.gal:not(.is-pinned) .card { scroll-snap-align: start; scroll-margin-left: var(--pad); }
.gal.is-pinned .gal-pin { height: 100svh; display: flex; flex-direction: column; justify-content: center; }

/* Eiga */
.steps { padding: clamp(5rem, 14vh, 10rem) var(--pad); }
.steps h2 { font-size: clamp(2.5rem, 9vw, 8rem); line-height: .88; text-transform: uppercase; } .steps em { font-style: normal; color: var(--accent); }
.steps ol { margin-top: 3rem; display: grid; gap: 1px; background: var(--line); border-block: 1px solid var(--line); }
.steps li { background: var(--bg); padding: 1.5rem 0; display: grid; grid-template-columns: 4rem 1fr; gap: .25rem 1rem; color: var(--ink-2); }
.steps li span { grid-row: span 2; color: var(--accent); font-family: var(--f-display); font-weight: 900; font-size: 1.5rem; }
.steps li b { color: var(--ink); font-size: 1.3rem; }
@media (min-width: 900px) { .steps ol { grid-template-columns: repeat(3, 1fr); } .steps li { padding: 2rem 1.5rem 2rem 0; } }

/* Kontaktai */
.contact { padding: clamp(6rem, 16vh, 11rem) var(--pad); border-top: 1px solid var(--line); }
.contact h2 { font-size: min(calc((100vw - 2 * var(--pad)) / 8.6), 15rem); line-height: .88; text-transform: uppercase; white-space: nowrap; } /* „PRADĖKIME.“ ≈ 8.0em */
.contact > p { margin-top: 1.5rem; color: var(--ink-2); font-size: 1.2rem; }
.contact-row { margin-top: 2.5rem; display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem 2rem; }
.ftr { padding: 2rem var(--pad) calc(2rem + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); color: var(--ink-3); font-size: .85rem; display: grid; gap: .5rem; }
.ftr .logo { font-size: 1.1rem; color: var(--ink); margin-right: .5rem; }

/* Žodžių kaukės antraštėms (main.js) */
/* padding viršuje/apačioje – kad kaukė nenukirptų Ė, Ū, Ą, Į, Ų nosinių ir taškų */
.split .w { display: inline-block; overflow: hidden; vertical-align: top; padding: .16em .02em .1em; margin: -.16em -.02em -.1em; }
.split .w > span { display: inline-block; }

/* Dialogas */
dialog { margin: auto; width: min(520px, calc(100% - 2rem)); border: 1px solid var(--line); border-radius: 20px; background: var(--bg-2); color: var(--ink); padding: clamp(1.5rem, 4vw, 2.25rem); }
dialog::backdrop { background: rgb(0 0 0 / .7); backdrop-filter: blur(4px); }
.dlg-top { display: flex; justify-content: space-between; gap: 1rem; margin-bottom: 1.5rem; }
dialog h2 { font-size: 1.9rem; line-height: 1; }
.eyebrow { color: var(--accent); font-size: .75rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; margin-bottom: .5rem; }
.x { width: 44px; height: 44px; flex: none; display: grid; place-items: center; border: 0; border-radius: 50%; background: transparent; color: var(--ink-2); cursor: pointer; } .x:hover { background: #1A1C1F; color: var(--ink); }
dialog label { display: block; margin: 1rem 0 .4rem; font-weight: 700; font-size: .9rem; }
dialog input { width: 100%; min-height: 52px; padding: 0 1rem; border: 1px solid #3B4048; border-radius: 12px; background: #1A1C1F; color: var(--ink); font: inherit; font-size: 1.05rem; }
dialog input[aria-invalid="true"] { border-color: #FF8A80; }
.field-error, .err { color: #FF8A80; font-size: .85rem; font-weight: 700; margin-top: .4rem; }
.small { margin-top: 1rem; color: var(--ink-3); font-size: .85rem; text-align: center; }

/* Kursorius (tik pelei) */
.cursor { display: none; }
@media (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .js .cursor { display: block; position: fixed; inset: 0; pointer-events: none; z-index: 120; }
  .cursor-dot, .cursor-ring { position: fixed; top: 0; left: 0; border-radius: 50%; pointer-events: none; opacity: 0; }
  .cursor-dot { width: 8px; height: 8px; margin: -4px 0 0 -4px; background: var(--accent); }
  .cursor-ring { width: 44px; height: 44px; margin: -22px 0 0 -22px; border: 1px solid rgb(255 255 255 / .5); display: grid; place-items: center; transition: width .4s var(--ease), height .4s var(--ease), margin .4s var(--ease), background-color .3s, border-color .3s; }
  .cursor-ring em { font: 700 .7rem/1 var(--f-sans); letter-spacing: .12em; text-transform: uppercase; font-style: normal; color: var(--on-accent); opacity: 0; transition: opacity .2s; }
  .cursor.is-link .cursor-ring { width: 70px; height: 70px; margin: -35px 0 0 -35px; border-color: transparent; background: rgb(255 255 255 / .15); }
  .cursor.is-label .cursor-ring { width: 96px; height: 96px; margin: -48px 0 0 -48px; border-color: transparent; background: var(--accent); }
  .cursor.is-label .cursor-ring em { opacity: 1; }
}

/* Be judesio: viskas statiška ir matoma */
@media (prefers-reduced-motion: reduce) {
  .js .hero { height: 100svh; } .js .loader { display: none; } .words .wd { opacity: 1; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}
