/* ==========================================================================
   cvstage.css — "career.log" · scroll-driven kariérna scéna
   Ján Halanda · V4 · nahrádza pôvodnú kariérnu krivku

   Koncept: celá sekcia je editor kódu. Hore lišta so signálovou stopou
   (logic analyzer / git log), pod ňou okno, v ktorom sa podľa scrollu
   prehráva kariéra scéna po scéne. Markup generuje js/cvstage.js.
   ========================================================================== */

.stage-section { padding-block: 72px 0; }

.stage {
  --pin-top: calc(var(--nav-h, 68px) + 10px);
  --scene-scroll: 62vh;              /* koľko scrollu dostane jedna scéna */
  --ease: cubic-bezier(.22, 1, .36, 1);
  --ease-soft: cubic-bezier(.4, 0, .2, 1);
  perspective: 1200px;
}

/* Výška tejto vrstvy = dĺžka scrollu, počas ktorej scéna beží */
.stage__rail { height: calc(var(--scenes, 10) * var(--scene-scroll) + 100vh); }

.stage__pin {
  position: sticky;
  top: var(--pin-top);
  height: calc(100vh - var(--pin-top) - 16px);
  display: flex;
  align-items: stretch;          /* okno má vyplniť celú pripnutú výšku */
  padding-block: 4px 12px;
  transform-style: preserve-3d;
}
@supports (height: 100dvh) {
  .stage__pin { height: calc(100dvh - var(--pin-top) - 16px); }
}
.stage__inner {
  width: 100%;
  height: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 0;
}

/* ==========================================================================
   1) SIGNÁLOVÁ STOPA — logic analyzer nad oknom
   ========================================================================== */
.trace {
  position: relative;
  background: var(--panel);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: 10px 14px 6px;
  flex: none;
}
.trace__head {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: .68rem;
  letter-spacing: .1em;
  color: var(--ink-60);
  margin-bottom: 4px;
  white-space: nowrap;
  overflow: hidden;
}
.trace__prompt { color: var(--signal-dark); font-weight: 500; }
.trace__cmd { color: var(--ink-60); }
.trace__caret {
  display: inline-block;
  width: 7px; height: 13px;
  background: var(--signal);
  animation: stageCaret 1.1s steps(1) infinite;
  vertical-align: -2px;
}
.trace__spacer { flex: 1; }
.trace__readout { color: var(--ink); font-weight: 500; }
.trace__readout b { color: var(--signal-dark); }

.trace__svg { display: block; width: 100%; height: 84px; overflow: visible; }
.trace__grid line { stroke: var(--line-soft); stroke-width: 1; }
.trace__base { fill: none; stroke: var(--line); stroke-width: 1.5; opacity: .55; }
.trace__fill { fill: url(#stageFill); }
.trace__live { fill: none; stroke: var(--signal); stroke-width: 2.2; stroke-linejoin: round; }
.trace__nodes circle {
  fill: var(--panel);
  stroke: var(--line);
  stroke-width: 1.6;
  transition: fill .3s var(--ease-soft), stroke .3s var(--ease-soft), r .3s var(--ease);
}
.trace__nodes circle.is-lit { stroke: var(--signal); fill: var(--signal-soft); }
.trace__nodes circle.is-key { stroke-width: 2.2; }
.trace__nodes circle.is-now {
  fill: var(--amber); stroke: #fff; stroke-width: 2.4;
  filter: drop-shadow(0 0 6px rgba(232, 161, 60, .95));
}
.trace__scan { stroke: var(--amber); stroke-width: 1.2; opacity: .5; stroke-dasharray: 3 4; }
.trace__beam { fill: var(--amber); filter: drop-shadow(0 0 7px rgba(232, 161, 60, .95)); }

.trace__years {
  display: flex;
  justify-content: space-between;
  font-size: .62rem;
  letter-spacing: .08em;
  color: var(--ink-60);
  padding-top: 2px;
}

@keyframes stageCaret { 0%, 50% { opacity: 1; } 51%, 100% { opacity: 0; } }

/* ==========================================================================
   2) OKNO — editor, v ktorom sa prehráva kariéra
   ========================================================================== */
.win {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: linear-gradient(168deg, #12291F 0%, #0B1A14 58%, #0E1F19 100%);
  border: 1px solid rgba(14, 138, 95, .34);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 2px 6px rgba(6, 18, 13, .3), 0 40px 80px -32px rgba(6, 18, 13, .6);
  color: #ECF5F0;
  transform-style: preserve-3d;
}

/* Titulná lišta */
.win__bar {
  flex: none;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
  background: rgba(255, 255, 255, .03);
  font-size: .68rem;
  letter-spacing: .08em;
  color: #8FB3A2;
}
.win__lights { display: flex; gap: 6px; flex: none; }
.win__lights i { width: 10px; height: 10px; border-radius: 50%; background: rgba(255, 255, 255, .16); }
.win__lights i:nth-child(1) { background: #E8695B; }
.win__lights i:nth-child(2) { background: var(--amber); }
.win__lights i:nth-child(3) { background: var(--signal); }
.win__tab {
  padding: 3px 10px;
  border-radius: 6px 6px 0 0;
  background: rgba(255, 255, 255, .07);
  color: #DDEFE5;
}
.win__spacer { flex: 1; }
.win__badge {
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid currentColor;
  color: var(--scene-color, var(--signal));
  transition: color .45s var(--ease-soft);
  white-space: nowrap;
}

/* Telo okna */
.win__body {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  transform-style: preserve-3d;
}

/* Číslovanie riadkov — čistá dekorácia, drží "editor" ilúziu */
.win__gutter {
  flex: none;
  width: 46px;
  padding: 18px 0;
  text-align: right;
  font-size: .64rem;
  line-height: 1.9;
  color: rgba(143, 179, 162, .38);
  border-right: 1px solid rgba(255, 255, 255, .06);
  user-select: none;
  overflow: hidden;
}
.win__gutter span { display: block; padding-right: 10px; }

.win__view {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  transform-style: preserve-3d;
}

/* Obrovský rok v pozadí — parallax podľa scrollu */
.win__ghost {
  position: absolute;
  right: 2%;
  bottom: -6%;
  font-family: var(--font-display);
  font-size: clamp(7rem, 21vw, 17rem);
  font-weight: 900;
  line-height: .8;
  letter-spacing: -.04em;
  color: rgba(255, 255, 255, .045);
  pointer-events: none;
  user-select: none;
  transition: color .5s var(--ease-soft);
  will-change: transform;
}

/* ==========================================================================
   3) SCÉNY
   ========================================================================== */
.scene {
  position: absolute;
  inset: 0;
  padding: clamp(18px, 3.2vh, 34px) clamp(18px, 3vw, 40px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(6px, 1.1vh, 12px);
  max-width: 58%;                    /* zvyšok patrí letiacim ikonám */
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
}
.scene.is-active { opacity: 1; visibility: visible; pointer-events: auto; }

/* Choreografia: prvky nabiehajú zdola s odstupňovaným oneskorením.
   Odchádzajúca scéna zmizne rýchlo, prichádzajúca sa poskladá — Apple pattern. */
.scene > * {
  opacity: 0;
  transform: translate3d(0, 22px, 0);
  filter: blur(6px);
  transition:
    opacity .5s var(--ease-soft),
    transform .7s var(--ease),
    filter .5s var(--ease-soft);
}
.scene.is-active > * { opacity: 1; transform: none; filter: blur(0); }
.scene.is-active > *:nth-child(1) { transition-delay: .06s; }
.scene.is-active > *:nth-child(2) { transition-delay: .12s; }
.scene.is-active > *:nth-child(3) { transition-delay: .18s; }
.scene.is-active > *:nth-child(4) { transition-delay: .24s; }
.scene.is-active > *:nth-child(5) { transition-delay: .30s; }
.scene.is-active > *:nth-child(6) { transition-delay: .36s; }

.scene__kicker {
  display: flex; align-items: center; gap: 9px;
  font-size: .66rem; letter-spacing: .16em;
  color: var(--scene-color, var(--signal));
}
.scene__dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 9px currentColor;
  flex: none;
}
.scene__title {
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 2.6vw, 2.15rem);
  font-weight: 850;
  line-height: 1.08;
  letter-spacing: -.02em;
  color: #fff;
  margin: 0;
  text-wrap: balance;
}
.scene__org { font-size: .72rem; letter-spacing: .04em; color: #8FB3A2; }
.scene__text {
  font-size: clamp(.82rem, 1.05vw, .95rem);
  line-height: 1.55;
  color: #B6D2C6;
  max-width: 54ch;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  line-clamp: 4;
  overflow: hidden;
}

.scene__metrics { display: flex; flex-wrap: wrap; gap: 10px 22px; }
.scene__metrics div { line-height: 1.15; }
.scene__metrics b {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 2vw, 1.7rem);
  font-weight: 850;
  color: var(--scene-color, var(--signal));
  letter-spacing: -.01em;
}
.scene__metrics small {
  font-family: var(--font-mono);
  font-size: .6rem;
  letter-spacing: .07em;
  color: #7FA694;
}

.scene__stack { display: flex; flex-wrap: wrap; gap: 5px; list-style: none; }
.scene__stack li {
  font-size: .6rem;
  letter-spacing: .07em;
  padding: 3px 8px;
  border-radius: 5px;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .09);
  color: #C7DED3;
}

/* ==========================================================================
   4) IKONY, KTORÉ VYLETIA Z OBRAZOVKY
   ========================================================================== */
.win__chips {
  position: absolute;
  inset: 0;
  pointer-events: none;
  transform-style: preserve-3d;
}
.chip {
  position: absolute;
  left: var(--x); top: var(--y);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px 8px 9px;
  border-radius: 11px;
  background: rgba(18, 41, 31, .72);
  border: 1px solid rgba(255, 255, 255, .12);
  box-shadow: 0 12px 30px -12px rgba(0, 0, 0, .7);
  backdrop-filter: blur(7px);
  color: #DDEFE5;
  font-family: var(--font-mono);
  font-size: .62rem;
  letter-spacing: .07em;
  white-space: nowrap;
  /* východiskový stav: ďaleko v hĺbke, rozmazaná */
  opacity: 0;
  transform: translate3d(-50%, -50%, -460px) scale(.5);
  filter: blur(9px);
  transition:
    opacity .55s var(--ease-soft),
    transform .85s var(--ease),
    filter .55s var(--ease-soft);
  will-change: transform, opacity;
}
.chip svg { width: 17px; height: 17px; flex: none; stroke: var(--scene-color, var(--signal)); }
/* Dlhý názov technológie nesmie vytlačiť ikonu z okna */
.chip { max-width: min(46%, 250px); }
.chip__label { min-width: 0; overflow: hidden; text-overflow: ellipsis; font-weight: 400; }

/* Sloty: --x/--y je pozícia v okne, --ox/--oy smer odletu "cez kameru",
   --orot náklon. Zámerne rozhádzané, aby to nevyzeralo ako mriežka.
   Pravý okraj drž na 88 % — inak dlhý názov vylezie z okna. */
.chip[data-slot="0"] { --x: 68%; --y: 16%; --ox: 101px; --oy: -143px; --orot: -6deg; }
.chip[data-slot="1"] { --x: 86%; --y: 30%; --ox: 202px; --oy:  -84px; --orot:  9deg; }
.chip[data-slot="2"] { --x: 70%; --y: 46%; --ox: 112px; --oy:  -17px; --orot: -12deg; }
.chip[data-slot="3"] { --x: 88%; --y: 62%; --ox: 213px; --oy:   50px; --orot: 15deg; }
.chip[data-slot="4"] { --x: 68%; --y: 78%; --ox: 101px; --oy:  118px; --orot: -18deg; }
.chip[data-slot="5"] { --x: 84%; --y: 90%; --ox: 190px; --oy:  168px; --orot: 21deg; }
.chip.is-in {
  opacity: 1;
  transform: translate3d(-50%, -50%, 0) scale(1);
  filter: blur(0);
}
/* Odchod: ikona sa rozletí smerom von a prekročí rovinu obrazovky */
.chip.is-out {
  opacity: 0;
  transform:
    translate3d(calc(-50% + var(--ox, 0px)), calc(-50% + var(--oy, 0px)), 620px)
    scale(2.6) rotate(var(--orot, 0deg));
  filter: blur(11px);
  transition:
    opacity .5s var(--ease-soft),
    transform .72s cubic-bezier(.5, 0, .9, .35),
    filter .5s var(--ease-soft);
}

/* ==========================================================================
   5) STAVOVÝ RIADOK
   ========================================================================== */
.win__status {
  flex: none;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 7px 14px;
  border-top: 1px solid rgba(255, 255, 255, .08);
  background: rgba(0, 0, 0, .22);
  font-size: .62rem;
  letter-spacing: .09em;
  color: #7FA694;
  overflow: hidden;
  white-space: nowrap;
}
.win__status b { color: #DDEFE5; font-weight: 500; }
.win__gauge { color: var(--scene-color, var(--signal)); letter-spacing: 0; }
.win__status .win__spacer { flex: 1; }
.win__hint { display: flex; align-items: center; gap: 6px; }
.win__hint i {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--signal);
  animation: stagePulse 1.6s ease-in-out infinite;
}
@keyframes stagePulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

/* ==========================================================================
   6) RESPONZÍVNE
   ========================================================================== */
@media (max-width: 900px) {
  .win__ghost { opacity: .6; }
  .chip { font-size: .58rem; padding: 7px 10px 7px 8px; }
  .chip[data-slot="3"], .chip[data-slot="4"], .chip[data-slot="5"] { display: none; }
  /* Užší text a ikony ďalej vpravo — na tablete sa inak prekrývali.
     Šírka ikony je zhora obmedzená, aby ani dlhý názov nevyliezol z okna. */
  .scene { max-width: 56%; }
  .chip { max-width: 200px; }
  .chip[data-slot="0"] { --x: 70%; --y: 18%; }
  .chip[data-slot="1"] { --x: 80%; --y: 40%; }
  .chip[data-slot="2"] { --x: 72%; --y: 62%; }
}

@media (max-width: 620px) {
  .stage-section { padding-block: 48px 0; }
  .stage { --scene-scroll: 56vh; }
  .win__gutter { display: none; }
  .trace__head { font-size: .6rem; }
  .trace__cmd, .trace__readout { display: none; }
  .trace__svg { height: 64px; }
  .scene { max-width: 82%; }
  .scene__text { -webkit-line-clamp: 3; line-clamp: 3; }
  .scene__stack li:nth-child(n+5) { display: none; }
  .win__status span:nth-child(3) { display: none; }
  /* Na mobile ostáva len samotná ikona — popis je aj tak v zozname
     technológií v scéne a s textom by sa nezmestila do okna. */
  .chip { max-width: none; padding: 9px; gap: 0; }
  .chip__label { display: none; }
  .chip[data-slot="0"] { --x: 84%; --y: 17%; }
  .chip[data-slot="1"] { --x: 92%; --y: 36%; }
  .chip[data-slot="2"] { --x: 85%; --y: 55%; }
}

/* Nízke okná — text má prednosť pred dekoráciou */
@media (max-height: 620px) {
  .trace { display: none; }
  .scene__text { -webkit-line-clamp: 2; line-clamp: 2; }
}

/* ==========================================================================
   7) BEZ ANIMÁCIÍ — scény sa vypíšu pod seba ako obyčajný zoznam
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .stage { perspective: none; }
  .stage__rail { height: auto; }
  .stage__pin { position: static; height: auto; display: block; }
  .win { min-height: 0; }
  .win__body { display: block; }
  .win__gutter, .win__ghost, .win__chips { display: none; }
  .win__view { min-height: 0; }
  .scene {
    position: static;
    opacity: 1;
    visibility: visible;
    max-width: 100%;
    pointer-events: auto;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
  }
  .scene > * { opacity: 1; transform: none; filter: none; transition: none; }
  .scene__text { -webkit-line-clamp: none; line-clamp: none; display: block; }
  .trace__caret, .win__hint i { animation: none; }
  .trace__live { display: none; }
  .trace__base { opacity: 1; stroke: var(--signal); }
}

/* ==========================================================================
   8) TLAČ — scéna je čisto obrazovková, v PDF nemá čo robiť
   ========================================================================== */
@media print {
  .stage-section { display: none !important; }
}