/* ========================================================================== */
/* FILE: /css/library/clear-min.css */
/* ========================================================================== */



/* ========================================================================== */
/* FILE: /css/core/core.css */
/* ========================================================================== */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

a{
    color:inherit;
    text-decoration:none;
}


.overflow-hidden{overflow: hidden;}

.relative{position:relative;}
.absolute{position:absolute;}
.fixed{position:fixed;}

.hide{display:none !important;opacity:0;}
.flex{display:flex}
.align-start{align-items:flex-start!important;}
.align-center{align-items:center!important;}
.justify-start{justify-content:flex-start!important;}
.justify-center{justify-content:center!important;}
.justify-between{justify-content:space-between!important;}
.fwidth{width:100%;}
.fheight{height:100%;}
.height-100vh{height:100vh;}
.flex.column{flex-direction:column;}
.flex-wrap{flex-wrap:wrap;}

/**/
.align-center{margin:0 auto;}

/*spaces*/
.gap-12{gap:12px;}
.gap-24{gap:24px;}
.space-v-large{padding:70px 0px;}

/*text*/
.color-white{color:#ffffff}
.color-grey{color:#999}
.font-s{font-size:12px}
.font-m{font-size:18px}
.font-l{font-size:24px}
.font-xl{font-size:36px}
.font-xxl{font-size:64px}
.text-center{text-align:center;}
.text-align-center{text-align:center;}
.tilted{font-style: italic;}
.uppercase {text-transform: uppercase;}

.relative{position:relative !important}

.desktop{display:block !important;}
.flex-desktop{display:flex !important;}
.mobile{display:none !important;}
.flex-mobile{display:none !important;}

@media(max-width:780px){
    .mobile{display:block !important;}
    .flex-mobile{display:flex !important;}
    .desktop{display:none !important;}
    .flex-desktop{display:none !important;}
    .flex-tablet-wrap{flex-wrap:wrap;}
}

@media(max-width:780px){
    .responsive-column{flex-direction:column;}
    .responsive-wrap{flex-wrap:wrap;}
}

/*.max-width-480px{max-width:480px !important}*/
/*.max-width-700px{max-width:700px !important}*/


/* ========================================================================== */
/* FILE: /css/core/coref.css */
/* ========================================================================== */

/* ╔══════════════════════════════════════════════════════════════════╗
   ║  EMLÉKEZET FALA — EGYSÉGES ATOMI CSS RENDSZER                      ║
   ║  Egy osztály = egy tulajdonság. Új szekciót ezekből az             ║
   ║  építőkockákból raksz össze (a HTML-ben kombinálod őket).          ║
   ║                                                                    ║
   ║  CSOPORTOK:                                                        ║
   ║   0) TOKENEK            6) MÉRET (w/h)                             ║
   ║   1) RESET + alap        7) TÉRKÖZ (margin/padding)               ║
   ║   2) ⚑ GSAP-REVEAL       8) TIPOGRÁFIA (family/size/weight/…)     ║
   ║   3) MEGJELENÉS (display)9) SZÍN                                   ║
   ║   4) FLEX / GRID        10) KERET / SUGÁR                          ║
   ║   5) POZÍCIÓ            11) EFFEKT (opacity/blur/transform/…)      ║
   ║                        12) ÖSSZETETT KOMPONENSEK (btn/panel/tag)   ║
   ╚══════════════════════════════════════════════════════════════════╝ */

/* ═══════════ 0) TOKENEK ═══════════ */

:root {
    --bg: #0c0b09;
    --ink: #f2ead8;
    --ink2: #b3a78f;
    --ink3: #6e6452;
    --ink4: #3b362b;
    --gold: #d3b078;
    --red: #c4604a;
    --line: rgba(211, 176, 120, .13);
    --line2: rgba(211, 176, 120, .3);
    --cardbg: #15120e;
    --d: 'Fraunces', Georgia, serif;
    /* display */
    --s: 'Inter', sans-serif;
    /* body */
    --m: 'JetBrains Mono', monospace;
    /* utility/mono */
    --eo: cubic-bezier(.16, 1, .3, 1);
    --ei: cubic-bezier(.83, 0, .17, 1);
}

/* világos ("megbékélés") mód — a body.lux a régi rendszerből */

body.lux {
    --bg: #eee7d8;
    --ink: #16130f;
    --ink2: #564c3b;
    --ink3: #8d8068;
    --ink4: #c2b69c;
    --gold: #8d6a3c;
    --red: #a8503c;
    --line: rgba(22, 19, 15, .13);
    --line2: rgba(22, 19, 15, .3);
    --cardbg: #efe6d3;
}

/* ═══════════ 1) RESET + ALAP ═══════════ */

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0
}

html {
    scroll-behavior: auto
}

body {
    background: var(--bg);
    color: var(--ink);
    font: 300 15px/1.8 var(--s);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
    transition: background 2.2s var(--ei), color 2.2s var(--ei)
}

body.lock {
    overflow: hidden
}

a {
    color: inherit;
    text-decoration: none
}

button {
    font: inherit;
    color: inherit;
    background: none;
    border: none;
    cursor: pointer
}

::selection {
    background: var(--gold);
    color: var(--bg)
}

/* az <em> a kiemelés mindenhol: dőlt + arany (a te vizuális nyelved) */

em {
    font-style: italic;
    color: var(--gold)
}

strong {
    font-weight: 300;
    color: var(--ink)
}

/* ═══════════ 2) ⚑ GSAP-REVEAL — A LEGFONTOSABB ═══════════
   Minden elem, amit a GSAP úsztat be, kapja a .gsap osztályt.
   Alapból opacity:0 (rejtett). GSAP NÉLKÜL kétféleképp látsz mindent:
     A) írd át EZT a sort opacity:1-re  ← egyetlen osztály átírása
     B) tedd a <body>-ra a "reveal" osztályt (semmit nem kell átírni)  */

.gsap {
    opacity: 0
}

body.reveal .gsap {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important
}

/* ═══════════ 3) MEGJELENÉS ═══════════ */

.block {
    display: block
}

.inline {
    display: inline
}

.iblock {
    display: inline-block
}

.flex {
    display: flex
}

.sticky{
    position:sticky;
}

.iflex {
    display: inline-flex
}

.grid {
    display: grid
}

.hidden {
    display: none
}

/* ═══════════ 4) FLEX / GRID ═══════════ */

.fdc {
    flex-direction: column
}

.fdr {
    flex-direction: row
}

.fww {
    flex-wrap: wrap
}

.aic {
    align-items: center
}

.aib {
    align-items: baseline
}

.aie {
    align-items: flex-end
}

.ais {
    align-items: flex-start
}

.jcc {
    justify-content: center
}

.jcsb {
    justify-content: space-between
}

.jcfe {
    justify-content: flex-end
}

.f1 {
    flex: 1
}

.f0 {
    flex: 0 0 auto
}

/* gap (egy tulajdonság) */

.gap-xs {
    gap: 8px
}

.gap-s {
    gap: 14px
}

.gap-m {
    gap: 24px
}

.gap-l {
    gap: 40px
}

.gap-xl {
    gap: 64px
}

/* grid-oszlopok */

.gc-2 {
    grid-template-columns: 1fr 1fr
}

.gc-3 {
    grid-template-columns: repeat(3, 1fr)
}

.gc-4 {
    grid-template-columns: repeat(4, 1fr)
}

.gc-auto {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr))
}

@media(max-width:760px) {
    .gc-2,
    .gc-3,
    .gc-4 {
        grid-template-columns: 1fr
    }
}

/* ═══════════ 5) POZÍCIÓ ═══════════ */

.pos-r {
    position: relative
}

.pos-a {
    position: absolute
}

.pos-f {
    position: fixed
}

.pos-s {
    position: sticky
}

.inset-0 {
    inset: 0
}

.top-0 {
    top: 0
}

.bottom-0 {
    bottom: 0
}

.left-0 {
    left: 0
}

.right-0 {
    right: 0
}

.z-0 {
    z-index: 0
}

.z-1 {
    z-index: 1
}

.z-2 {
    z-index: 2
}

.z-5 {
    z-index: 5
}

.z-nav {
    z-index: 790
}

.z-head {
    z-index: 800
}

.z-top {
    z-index: 900
}

.z-under {
    z-index: -1
}

/* ═══════════ 6) MÉRET ═══════════ */

.w-100 {
    width: 100%
}

.w-auto {
    width: auto
}

.h-100 {
    height: 100%
}

.h-svh {
    height: 100svh
}

.minh-svh {
    min-height: 100svh
}

.maxw-xs {
    max-width: 36ch
}

.maxw-s {
    max-width: 48ch
}

.maxw-m {
    max-width: 60ch
}

.maxw-narrow {
    max-width: 760px
}

.maxw-wide {
    max-width: 1240px
}

.mw-none {
    max-width: none
}

/* ═══════════ 7) TÉRKÖZ ═══════════
   Skála: xs8 · s16 · m28 · l48 · xl80 · sec(clamp).
   Egy-tulajdonságos oldalankénti osztályok (pt/pb/pl/pr, mt/mb).
   A px-/py-/mx-/my- kényelmi (két tulajdonságot állít — jelölve). */

.p-0 {
    padding: 0
}

.m-0 {
    margin: 0
}

.pt-s {
    padding-top: 16px
}

.pt-m {
    padding-top: 28px
}

.pt-l {
    padding-top: 48px
}

.pt-xl {
    padding-top: 80px
}

.pb-s {
    padding-bottom: 16px
}

.pb-m {
    padding-bottom: 28px
}

.pb-l {
    padding-bottom: 48px
}

.pb-xl {
    padding-bottom: 80px
}

.pt-sec {
    padding-top: clamp(120px, 18vh, 240px)
}

.pb-sec {
    padding-bottom: clamp(110px, 16vh, 200px)
}

.mt-s {
    margin-top: 16px
}

.mt-m {
    margin-top: 28px
}

.mt-l {
    margin-top: 48px
}

.mt-xl {
    margin-top: 80px
}

.mb-s {
    margin-bottom: 16px
}

.mb-m {
    margin-bottom: 28px
}

.mb-l {
    margin-bottom: 48px
}

.mb-xl {
    margin-bottom: 80px
}

.mx-auto {
    margin-left: auto;
    margin-right: auto
}

/* kényelmi: 2 tulajdonság */

.py-sec {
    padding-top: clamp(120px, 18vh, 240px);
    padding-bottom: clamp(110px, 16vh, 200px)
}

/* kényelmi */

.px-gut {
    padding-left: clamp(22px, 5vw, 64px);
    padding-right: clamp(22px, 5vw, 64px)
}

/* kényelmi: oldalmargó */

.px-page {
    padding-left: clamp(22px, 8vw, 160px);
    padding-right: clamp(22px, 8vw, 160px)
}

/* kényelmi: széles margó */

/* ═══════════ 8) TIPOGRÁFIA ═══════════ */

/* család */

.ff-d {
    font-family: var(--d)
}

.ff-s {
    font-family: var(--s)
}

.ff-m {
    font-family: var(--m)
}

/* súly */

.fw-200 {
    font-weight: 200
}

.fw-300 {
    font-weight: 300
}

.fw-400 {
    font-weight: 400
}

/* stílus */

.fst-i {
    font-style: italic
}

.fst-n {
    font-style: normal
}

/* méret (csak font-size) */

.fz-hero {
    font-size: clamp(46px, 11vw, 158px)
}

.fz-display {
    font-size: clamp(38px, 8vw, 108px)
}

.fz-h1 {
    font-size: clamp(34px, 5.6vw, 72px)
}

.fz-h2 {
    font-size: clamp(30px, 5vw, 68px)
}

.fz-h3 {
    font-size: clamp(26px, 3.8vw, 46px)
}

.fz-lead {
    font-size: clamp(18px, 2.4vw, 30px)
}

.fz-body {
    font-size: 15px
}

.fz-s {
    font-size: 14px
}

.fz-cap {
    font-size: 10px
}

/* sortáv */

.lh-0 {
    line-height: .92
}

.lh-1 {
    line-height: 1
}

.lh-tight {
    line-height: 1.1
}

.lh-norm {
    line-height: 1.5
}

.lh-body {
    line-height: 1.8
}

.lh-loose {
    line-height: 2.1
}

/* betűköz */

.ls-tag {
    letter-spacing: .36em
}

.ls-cap {
    letter-spacing: .3em
}

.ls-0 {
    letter-spacing: 0
}

.ls-tight {
    letter-spacing: -.03em
}

.ls-tighter {
    letter-spacing: -.04em
}

/* transzformáció / igazítás */

.tt-up {
    text-transform: uppercase
}

.tac {
    text-align: center
}

.tal {
    text-align: left
}

.tar {
    text-align: right
}

.taj {
    text-align: justify
}

.nowrap {
    white-space: nowrap
}

.tnum {
    font-variant-numeric: tabular-nums
}

/* ═══════════ 9) SZÍN ═══════════ */

.c-ink {
    color: var(--ink)
}

.c-ink2 {
    color: var(--ink2)
}

.c-ink3 {
    color: var(--ink3)
}

.c-ink4 {
    color: var(--ink4)
}

.c-gold {
    color: var(--gold)
}

.c-red {
    color: var(--red)
}

.c-bg {
    color: var(--bg)
}

.bg-bg {
    background: var(--bg)
}

.bg-card {
    background: var(--cardbg)
}

.bg-gold {
    background: var(--gold)
}

.bg-none {
    background: none
}

/* ═══════════ 10) KERET / SUGÁR ═══════════ */

.bd {
    border: 1px solid var(--line)
}

.bd2 {
    border: 1px solid var(--line2)
}

.bdt {
    border-top: 1px solid var(--line)
}

.bdb {
    border-bottom: 1px solid var(--line)
}

.bd-none {
    border: none
}

.br-0 {
    border-radius: 0
}

.br-s {
    border-radius: 4px
}

.br-pill {
    border-radius: 100px
}

/* ═══════════ 11) EFFEKT ═══════════ */

.op-0 {
    opacity: 0
}

.op-12 {
    opacity: .12
}

.op-50 {
    opacity: .5
}

.op-100 {
    opacity: 1
}

.blur-2 {
    filter: blur(2px)
}

.blur-haze {
    filter: blur(8px)
}

.pe-none {
    pointer-events: none
}

.pe-auto {
    pointer-events: auto
}

.ovh {
    overflow: hidden
}

.ova {
    overflow: auto
}

.cur-p {
    cursor: pointer
}

.tr {
    transition: all .4s var(--eo)
}

.tr-slow {
    transition: all .9s var(--eo)
}

.will-t {
    will-change: transform, opacity
}

.ty-20 {
    transform: translateY(20px)
}

/* gyakori GSAP kiindulás */

.ty-30 {
    transform: translateY(30px)
}

/* ═══════════ 12) ÖSSZETETT KOMPONENSEK ═══════════
   Ezek pseudo-elemet/hovert igényelnek → nem bonthatók egyetlen
   tulajdonságra. Kevés van belőlük, és jelölve vannak. */

/* eyebrow / címke */

.tag {
    font: 400 10px/1 var(--m);
    letter-spacing: .36em;
    text-transform: uppercase;
    color: var(--gold)
}

/* pill-gomb (keretes, hover-kitöltés) */

.btn {
    position: relative;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    gap: 11px;
    font: italic 300 16px var(--d);
    padding: 15px 32px;
    border: 1px solid var(--line2);
    border-radius: 100px;
    transition: border-color .4s
}

.btn>span {
    position: relative;
    z-index: 1;
    transition: color .35s
}

.btn::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 100px;
    background: var(--gold);
    transform: translateY(102%);
    transition: transform .5s var(--eo)
}

.btn:hover::before {
    transform: none
}

.btn:hover>span {
    color: var(--bg)
}

.btn:hover {
    border-color: var(--gold)
}

.btn.is-primary {
    background: var(--gold);
    border-color: var(--gold)
}

.btn.is-primary>span {
    color: var(--bg)
}

.btn.is-primary::before {
    background: var(--ink)
}

/* térben úszó panel (sarok-zárójelekkel) — grafikonokhoz/UI-hoz */

.panel {
    position: relative;
    border: 1px solid var(--line);
    padding: clamp(22px, 3.5vw, 40px);
    background: linear-gradient(160deg, rgba(211, 176, 120, .04), transparent 60%)
}

.panel::before,
.panel::after {
    content: '';
    position: absolute;
    width: 12px;
    height: 12px;
    border: 1px solid var(--gold);
    opacity: .6
}

.panel::before {
    top: -1px;
    left: -1px;
    border-right: none;
    border-bottom: none
}

.panel::after {
    bottom: -1px;
    right: -1px;
    border-left: none;
    border-top: none
}

.panel-lab {
    position: absolute;
    top: -7px;
    left: 24px;
    padding: 0 10px;
    background: var(--bg);
    font: 400 8px/14px var(--m);
    letter-spacing: .3em;
    text-transform: uppercase;
    color: var(--gold)
}

/* szekció-váz: magas jelenet + tapadó pin (a Scenes motorhoz) */

.scene {
    position: relative
}

.scene>.pin {
    position: sticky;
    top: 0;
    height: 100svh;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center
}

/* háttér-canvas réteg (#fog) */

#fog {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none
}

/* reduced-motion: a GSAP-elemek azonnal láthatók (ne maradjon rejtve) */

@media (prefers-reduced-motion: reduce) {
    .gsap {
        opacity: 1 !important;
        transform: none !important;
        filter: none !important
    }
}


/* ========================================================================== */
/* FILE: /js/core/engine/gsap-core.css */
/* ========================================================================== */

.space-container {
  perspective: 1200px;
  background-color: #050811; /* Sötét, üres tér háttér */
  overflow-x: hidden;
}

/* A memória blokkok alapállapota */
.memory-block {
  /* Fontos, hogy a 3D transzformációk ne szétcsússzanak */
  transform-style: preserve-3d;
  backface-visibility: hidden;
  will-change: transform, opacity, filter;
}

/* Az animált elemekre */
[data-animate="depth-fade"] {
  will-change: transform, opacity, filter;
  transform-style: preserve-3d;
  backface-visibility: hidden;
}