/* KD Studio · Repertoár oldal
   A styles.css tokenjeire épül, nem írja felül őket. */

.rep-hero {
  padding: clamp(120px, 17vh, 210px) var(--gutter) clamp(50px, 7vh, 90px);
  max-width: var(--content-max);
  margin: 0 auto;
}
.rep-hero__kicker {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}
.rep-hero h1 { font-size: var(--fs-hero); margin: 0.5em 0 0; max-width: 16ch; }
.rep-hero__lead { font-size: var(--fs-lead); color: var(--ink-2); max-width: 46ch; margin-top: 1.1em; line-height: 1.5; }
.rep-hero__meta {
  display: flex; flex-wrap: wrap; gap: 0.6em; margin-top: 2em;
  font-family: var(--mono); font-size: 0.73rem; letter-spacing: 0.04em; color: var(--muted);
}
.rep-hero__meta span { border: 1px solid var(--line); border-radius: var(--r-btn); padding: 0.45em 0.95em; }

/* --- Közös demó keret --- */
.demo { padding: clamp(70px, 10vh, 130px) 0; border-top: 1px solid var(--hairline); }
.demo__head { max-width: var(--content-max); margin: 0 auto; padding: 0 var(--gutter); }
.demo__n {
  font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--muted);
}
.demo__title { font-size: var(--fs-h2); margin: 0.35em 0 0; max-width: 20ch; }
.demo__lead { font-size: 1.08rem; color: var(--ink-2); max-width: 54ch; margin-top: 0.9em; line-height: 1.55; }
.demo__note {
  max-width: 64ch; margin: 1.6em auto 0; padding: 0 var(--gutter);
  font-size: 0.92rem; color: var(--muted);
}
.demo__stage { margin-top: clamp(30px, 5vh, 56px); }

/* --- 1 · Diszperziós üveg --- */
.glass { background: var(--bg-2); }
.glass__stage {
  position: relative; height: clamp(360px, 58vh, 620px); margin-top: clamp(30px, 5vh, 56px);
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); overflow: hidden;
}
.glass__stage canvas { display: block; width: 100%; height: 100%; }
.glass__fallback {
  position: absolute; inset: 0; display: grid; place-items: center; text-align: center;
  padding: 0 var(--gutter); color: var(--muted); font-size: 0.95rem;
}
.glass__stage.is-live .glass__fallback,
.glass__stage.is-nogl canvas { display: none; }
.glass__ctrl {
  max-width: var(--content-max); margin: 1.4em auto 0; padding: 0 var(--gutter);
  display: flex; align-items: center; gap: 1em; flex-wrap: wrap;
  font-family: var(--mono); font-size: 0.74rem; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--muted);
}
.glass__ctrl input[type="range"] {
  -webkit-appearance: none; appearance: none; width: min(300px, 55vw); height: 2px;
  background: var(--line-2); border-radius: 2px; outline: none;
}
.glass__ctrl input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 16px; height: 16px; border-radius: 50%;
  background: var(--ink); border: 3px solid var(--bg-2); box-shadow: var(--shadow-btn); cursor: grab;
}
.glass__ctrl input[type="range"]::-moz-range-thumb {
  width: 16px; height: 16px; border-radius: 50%; background: var(--ink);
  border: 3px solid var(--bg-2); cursor: grab;
}
.glass__ctrl b { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }

/* --- 2 · Kitűzött vízszintes sor --- */
.seq { overflow: hidden; }
.seq__viewport { margin-top: clamp(30px, 5vh, 56px); }
.seq__track { display: flex; gap: clamp(18px, 2.4vw, 34px); padding: 0 var(--gutter); will-change: transform; }
.seq__panel {
  flex: 0 0 min(430px, 78vw); border: 1px solid var(--line); border-radius: var(--r-shell);
  background: var(--bg); padding: clamp(26px, 3.2vw, 42px); min-height: clamp(280px, 38vh, 380px);
  display: flex; flex-direction: column; justify-content: space-between;
}
.seq__panel i {
  font-family: var(--mono); font-style: normal; font-size: 0.72rem;
  letter-spacing: 0.16em; color: var(--muted);
}
.seq__panel h3 { font-size: clamp(1.3rem, 2.1vw, 1.75rem); margin: 0.6em 0 0; }
.seq__panel p { color: var(--ink-2); margin-top: 0.7em; font-size: 1rem; line-height: 1.55; }
.seq__panel { transition: border-color .4s var(--ease-out), background .4s var(--ease-out); }
.seq__panel.is-near { border-color: var(--line-2); background: var(--bg-2); }
.seq__panel.is-near i { color: var(--ink); }
.seq__rule {
  max-width: var(--content-max); margin: clamp(26px, 4vh, 44px) auto 0; padding: 0 var(--gutter);
  display: flex; align-items: center; gap: 1em;
}
.seq__rule span { flex: 1; height: 2px; background: var(--line); position: relative; overflow: hidden; }
.seq__rule span i {
  display: block; height: 100%; background: var(--ink);
  transform: scaleX(0); transform-origin: left;
}
.seq__rule b {
  font-family: var(--mono); font-size: 0.74rem; letter-spacing: 0.1em;
  color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums;
}
.seq.is-static .seq__viewport { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.seq.is-static .seq__track { padding-bottom: 14px; }

/* --- 3 · Flip --- */
.flip__grid {
  max-width: var(--content-max); margin: clamp(30px, 5vh, 56px) auto 0; padding: 0 var(--gutter);
  display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(12px, 1.6vw, 20px);
}
.flip__tile {
  position: relative; border: 1px solid var(--line); border-radius: var(--r-core); background: var(--bg-2);
  aspect-ratio: 1 / 1; padding: clamp(16px, 2vw, 24px); text-align: left; cursor: pointer;
  display: flex; flex-direction: column; justify-content: flex-end; gap: 0.3em;
  font: inherit; color: inherit; overflow: hidden;
}
.flip__tile i {
  font-family: var(--mono); font-style: normal; font-size: 0.68rem;
  letter-spacing: 0.14em; color: var(--muted);
}
.flip__tile strong { font-size: 1.02rem; font-weight: 600; }
.flip__tile p { color: var(--ink-2); font-size: 0.94rem; line-height: 1.5; margin-top: 0.4em; display: none; }
.flip__grid.is-open .flip__tile { opacity: 0.4; }
.flip__grid .flip__tile.is-active {
  grid-column: 1 / -1; grid-row: 1; aspect-ratio: 16 / 7; opacity: 1;
  background: var(--ink); color: #fff; border-color: var(--ink);
}
.flip__grid .flip__tile.is-active i { color: rgba(255,255,255,0.56); }
.flip__grid .flip__tile.is-active p { display: block; color: rgba(255,255,255,0.78); max-width: 52ch; }
.flip__hint {
  max-width: var(--content-max); margin: 1.1em auto 0; padding: 0 var(--gutter);
  font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--muted);
}

/* --- 4 · Kinetikus tipográfia --- */
.kin { background: var(--bg-2); }
.kin__wrap { max-width: var(--content-max); margin: 0 auto; padding: 0 var(--gutter); }
.kin__head {
  font-size: clamp(2rem, 5.4vw, 4.2rem); font-weight: 600; letter-spacing: -0.03em;
  line-height: 1.04; max-width: 15ch; margin: clamp(30px, 5vh, 56px) 0 0;
}
.kin__body {
  font-size: clamp(1.1rem, 1.7vw, 1.45rem); line-height: 1.6; max-width: 48ch;
  margin-top: 1.4em; color: var(--ink);
}
.kin__line { overflow: clip; }

/* --- 5 · Lendület --- */
.throw__rail {
  position: relative; margin-top: clamp(30px, 5vh, 56px); overflow: hidden;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  padding: clamp(26px, 3.4vw, 44px) 0; touch-action: pan-y;
}
.throw__strip { display: flex; gap: clamp(12px, 1.6vw, 20px); padding: 0 var(--gutter); width: max-content; will-change: transform; }
.throw__card {
  flex: 0 0 clamp(190px, 23vw, 270px); aspect-ratio: 3 / 4; border: 1px solid var(--line);
  border-radius: var(--r-core); background: var(--bg); padding: clamp(16px, 2vw, 22px);
  display: flex; flex-direction: column; justify-content: space-between;
  transition: border-color .3s var(--ease-out), background .3s var(--ease-out), transform .3s var(--ease-out);
  -webkit-user-select: none; user-select: none;
}
.throw__card.is-on { border-color: var(--ink); background: var(--bg-2); }
.throw__card i {
  font-family: var(--mono); font-style: normal; font-size: 0.68rem;
  letter-spacing: 0.14em; color: var(--muted);
}
.throw__card strong { font-size: 1.05rem; font-weight: 600; letter-spacing: -0.02em; }
.throw__card span { color: var(--ink-2); font-size: 0.92rem; line-height: 1.45; }
.throw__hint {
  position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%);
  font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--muted); pointer-events: none;
}

/* --- Zárás --- */
.rep-end {
  max-width: var(--content-max); margin: 0 auto; padding: clamp(80px, 12vh, 150px) var(--gutter);
  border-top: 1px solid var(--hairline); text-align: center;
}
.rep-end h2 { font-size: var(--fs-h2); max-width: 20ch; margin: 0 auto; }
.rep-end p { color: var(--ink-2); max-width: 48ch; margin: 1em auto 0; font-size: 1.08rem; }
.rep-end .btn { margin-top: 1.8em; }

@media (max-width: 760px) {
  .flip__grid { grid-template-columns: repeat(2, 1fr); }
  .flip__grid .flip__tile.is-active { aspect-ratio: 4 / 3; }
}

@media (hover: hover) and (pointer: fine) {
  .flip__tile:hover { border-color: var(--line-2); }
  .flip__grid.is-open .flip__tile:hover { opacity: 0.7; }
  .flip__grid .flip__tile.is-active:hover { opacity: 1; }
  .throw__card:hover { border-color: var(--line-2); }
}

@media (prefers-reduced-motion: reduce) {
  .throw__card { transition: none; }
  .seq__track { transform: none !important; }
}

/* --- Második rész, a főoldalon is futó kézjegyek --- */
.rep-split {
  max-width: var(--content-max); margin: 0 auto;
  padding: clamp(90px, 14vh, 170px) var(--gutter) clamp(20px, 3vh, 40px);
  border-top: 1px solid var(--line-2);
}
.rep-split .demo__title { max-width: 18ch; }
.rep-split .demo__lead { max-width: 54ch; }

/* 06 · Földgömb */
.gl__stage {
  position: relative; height: clamp(380px, 62vh, 680px); margin-top: clamp(30px, 5vh, 56px);
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); overflow: hidden;
}
.gl__stage canvas { display: block; width: 100%; height: 100%; }
.demo__note code {
  font-family: var(--mono); font-size: 0.86em; background: var(--bg-3);
  padding: 0.15em 0.45em; border-radius: 4px;
}

/* 07 · Fény-sweep, a szekció a saját styles.css szabályait hozza magával */
#sweep + .moment { margin-top: clamp(10px, 2vh, 24px); }

/* 08 · Felület */
.surface__wrap { max-width: var(--content-max); margin: clamp(30px, 5vh, 56px) auto 0; padding: 0 var(--gutter); }