/* ============================================================================
   garderoba.css — elementul-semnătură: pagina îmbracă, pe rând, costumele clienților.

   Fiecare costum își aduce culorile (măsurate de noi pe site-ul lui: tokens.css-ul clientului),
   fontul și, în garderoba.js, felul în care se mișcă. Valorile de mai jos sunt COPIATE din
   clients/<client>/tokens.css — dacă se schimbă acolo, se schimbă și aici.

   Fără JS sau cu mișcare redusă: atelierul, cele cinci costume una sub alta (cu un cadru static
   din scenă) și finalul — tot textul vizibil. Clasa .js-garderoba (pusă din JS) le suprapune.
   ========================================================================= */

/* cu JS: fonturile costumului se cer abia când costumul se apropie (.k-pregatit) */
.js-garderoba .costum:not(.k-pregatit) { --k-f-display: var(--f-display); --k-f-text: var(--f-text); --k-f-mono: var(--f-mono); }

/* ---------- straturile, ca secțiuni normale (varianta fără JS) ---------- */
.strat { position: relative; overflow: hidden; }
.strat-atelier { background: var(--c-hartie); padding: calc(72px + var(--sp-7)) 0 var(--sp-8); }
.strat-atelier .cadru { display: grid; gap: var(--sp-5); }
.strat-atelier .eticheta { color: var(--c-carmin-adanc); }
.strat-atelier h2 { font-size: var(--step-6); max-width: 11ch; }
.strat-atelier h2 em { font-style: normal; color: var(--c-carmin); }
.strat-atelier p { font-size: var(--step-1); color: var(--c-cerneala-2); max-width: 46ch; }

/* umerașele din atelier: câte o mostră din fiecare costum */
.mostre-costume { display: flex; gap: clamp(.75rem, 2vw, 1.5rem); list-style: none; margin-top: var(--sp-5); flex-wrap: wrap; }
.mostra-costum { display: grid; justify-items: center; gap: .35rem; width: clamp(64px, 9vw, 112px); }
.mostra-costum svg { width: 48%; color: var(--c-cerneala-2); }
.mostra-costum .tesatura {
  width: 100%; aspect-ratio: 3 / 4; border-radius: 4px 4px 10px 10px; background: var(--k-fond);
  color: var(--k-cerneala); display: grid; place-items: center; box-shadow: var(--umbra-2);
  font: var(--k-greutate) clamp(1.5rem, 3vw, 2.4rem)/1 var(--k-f-display); letter-spacing: var(--k-ls);
  border-bottom: 6px solid var(--k-accent); margin-top: -6px;
}
.mostra-costum .cine { font: 500 .6875rem/1.2 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--c-cerneala-2); text-align: center; }
.mostra-costum--goala .tesatura { background: transparent; border: 1.5px dashed var(--c-cerneala-3); box-shadow: none; color: var(--c-cerneala-2); font: 500 .75rem/1.3 var(--f-mono); text-align: center; padding: .4rem; }

.costum {
  background: var(--k-fond); color: var(--k-cerneala); font-family: var(--k-f-text);
  padding: calc(72px + var(--sp-6)) var(--gutter) var(--sp-8);
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  grid-template-areas: "cap dev" "corp dev"; align-content: center; align-items: center;
  gap: var(--sp-4) clamp(2rem, 4vw, 4.5rem); min-height: 100vh;
}
.c-cap { grid-area: cap; align-self: end; display: grid; gap: var(--sp-3); position: relative; z-index: 2; }
.c-corp { grid-area: corp; align-self: start; display: grid; gap: var(--sp-4); position: relative; z-index: 2; }
.costum .c-nume { font-size: clamp(2.6rem, 1rem + 5.2vw, 7rem); }
.c-desc { font-size: var(--step-1); line-height: 1.45; max-width: 38ch; }
.c-fapte { display: flex; flex-wrap: wrap; gap: .45rem; list-style: none; }
.c-fapte li { font: 500 .8125rem/1 var(--k-f-mono); padding: .55em .85em; border: 1px solid color-mix(in srgb, var(--k-cerneala) 32%, transparent); border-radius: 999px; }
.c-jos { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--sp-4); margin-top: var(--sp-2); }
.c-cifra { display: grid; gap: .2rem; text-align: right; }
.c-cifra span:first-child { font: 500 .6875rem/1 var(--k-f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--k-cerneala-2); }
.c-cifra output { font: 600 var(--step-2)/1 var(--k-f-mono); color: var(--k-accent-text); font-variant-numeric: tabular-nums; white-space: nowrap; }
.c-cifra sup { font-size: .55em; vertical-align: .75em; line-height: 0; }

.c-device { grid-area: dev; position: relative; z-index: 2; width: 100%; justify-self: center; max-width: 880px; }

.c-ambient { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.c-ambient canvas { width: 100%; height: 100%; }
.costum--happy-smile .c-ambient {   /* lumina din dreapta-sus a cabinetului + bobul fin al fotografiei */
  background: radial-gradient(120% 90% at 92% 0%, rgb(255 236 200 / .55), transparent 55%);
}
.costum--happy-smile .c-ambient::after {
  content: ""; position: absolute; inset: 0; opacity: .22; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .2 0 0 0 0 .1 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* finalul: înapoi în atelier, pe carmin */
.strat-final { background: var(--c-carmin); color: var(--c-pe-carmin); padding: calc(72px + var(--sp-7)) 0 var(--sp-8); }
.strat-final .cadru { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--sp-6); align-items: center; min-height: calc(100vh - 72px - var(--sp-7) - var(--sp-8)); }
.strat-final h2 { font-size: var(--step-7); max-width: 9ch; }
.strat-final p { font-size: var(--step-1); max-width: 40ch; margin-block: var(--sp-5) var(--sp-6); }
.umeras-gol { width: clamp(140px, 22vw, 320px); color: var(--c-pe-carmin); }
.umeras-gol path { stroke-width: 1.4; }

/* banda pensulei și umerașele: doar cu JS */
.g-pensula, .g-umeras { display: none; }

@media (max-width: 760px) {
  .costum { grid-template-columns: minmax(0, 1fr); grid-template-areas: "cap" "dev" "corp"; padding-top: calc(64px + var(--sp-5)); }
  .c-device { max-width: 300px; }
  .costum .c-ecran { aspect-ratio: 360 / 780; padding: 3.2%; border-radius: 15% / 6.9%; background: linear-gradient(160deg, var(--c-ram-1), var(--c-ram-2) 45%); }
  .costum .c-ecran::before { top: 1.6%; width: 26%; height: 2.2%; margin-left: -13%; border-radius: 99px; background: var(--c-ram-2); z-index: 2; }
  .costum .c-pixeli { border-radius: 12.5% / 5.8%; }
  .costum .c-baza { display: none; }
  .c-desc { font-size: var(--step-0); }
  .strat-final .cadru { grid-template-columns: minmax(0, 1fr); }
  .umeras-gol { order: -1; width: 120px; }
}

/* =================== cu JS: scena fixată, straturile suprapuse =================== */
.js-garderoba .g-scena { position: relative; height: 100vh; height: 100svh; overflow: hidden; background: var(--c-hartie); }
.js-garderoba .strat { position: absolute; inset: 0; min-height: 0; isolation: isolate; z-index: 0; }
/* isolation: fiecare costum își ține textul (z-index 2) în stratul lui. Fără ea, textul costumului de
   dedesubt trecea peste fundalul celui nou, cât trecea pensula (prins de Niki, 09.10). */
.js-garderoba .strat-atelier, .js-garderoba .strat-final { display: grid; align-content: center; padding-block: 72px 88px; }
.js-garderoba .strat-final .cadru { min-height: 0; }
.js-garderoba .costum { padding-block: calc(72px + var(--sp-4)) calc(76px + var(--sp-4)); gap: var(--sp-3) clamp(2rem, 4vw, 4.5rem); }
.js-garderoba .strat.ascuns { visibility: hidden; }
.js-garderoba .g-pensula {
  display: block; position: absolute; left: 50%; top: 50%; z-index: 30; pointer-events: none;
  width: var(--pensula-l, 2000px); height: var(--pensula-h, 300px); margin: calc(var(--pensula-h, 300px) / -2) 0 0 calc(var(--pensula-l, 2000px) / -2);
  opacity: 0; will-change: transform;
}
.js-garderoba .g-pensula img { width: 100%; height: 100%; }
.js-garderoba .g-umeras {
  display: flex; position: absolute; left: 50%; bottom: calc(14px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); z-index: 40;
  align-items: end; gap: clamp(.4rem, 1.4vw, 1rem); color: var(--umeras-culoare, var(--c-cerneala)); transition: color .4s;
  padding: .45rem .9rem .4rem; border-radius: 999px; background: color-mix(in srgb, var(--umeras-fond, var(--c-hartie)) 80%, transparent);
}
.g-umeras::before { content: ""; position: absolute; left: .9rem; right: .9rem; top: .78rem; height: 1.5px; background: currentColor; opacity: .35; }
.g-umeras button {
  position: relative; display: grid; justify-items: center; gap: .15rem; padding: 0; border: 0; background: none; color: inherit; cursor: pointer;
  font: 500 .625rem/1 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; opacity: .55; transition: opacity .3s;
}
.g-umeras button svg { width: 26px; transition: transform .35s var(--e-iesire); }
.g-umeras button[aria-current="true"] { opacity: 1; }
.g-umeras button[aria-current="true"] svg { transform: translateY(3px) rotate(-6deg); }
.g-umeras button span { max-width: 9ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 760px) {
  .js-garderoba .costum { padding-block: calc(64px + var(--sp-2)) calc(64px + var(--sp-2)); gap: var(--sp-2); align-content: start; }
  .js-garderoba .c-device { width: auto; height: min(42svh, 400px); aspect-ratio: auto; max-width: none; }
  .js-garderoba .c-device .c-ecran { height: 100%; width: auto; aspect-ratio: 360 / 780; margin-inline: auto; }
  .js-garderoba .costum .c-nume { font-size: clamp(2.2rem, 10vw, 3.2rem); }
  .js-garderoba .c-desc { font-size: .9375rem; line-height: 1.4; }
  .js-garderoba .c-fapte { display: none; }
  .js-garderoba .c-cifra output { font-size: var(--step-1); }
  .g-umeras button span { display: none; }
}
@media (max-width: 760px), (max-height: 720px) {
  .js-garderoba .strat-atelier .cadru { gap: var(--sp-3); }
  .js-garderoba .strat-atelier h2 { font-size: clamp(2.6rem, 1rem + 7vw, 5rem); }
  .js-garderoba .strat-atelier p { font-size: var(--step-0); }
  .js-garderoba .mostre-costume { margin-top: var(--sp-2); gap: .5rem; }
  .js-garderoba .mostra-costum { width: clamp(44px, 12vw, 72px); }
  .js-garderoba .mostra-costum .tesatura { font-size: 1.15rem; }
  .js-garderoba .strat-final h2 { font-size: clamp(3.4rem, 1rem + 11vw, 6rem); }
  .js-garderoba .strat-final p { margin-block: var(--sp-3) var(--sp-4); font-size: var(--step-0); }
}
/* atelierul și finalul încap în orice înălțime de ecran: titlul se măsoară și pe verticală */
.js-garderoba .strat-atelier h2 { font-size: min(var(--step-6), 12.5svh); }
.js-garderoba .mostra-costum { width: min(clamp(64px, 9vw, 112px), 10.5svh); }
.js-garderoba .strat-final h2 { font-size: min(var(--step-7), 19svh); }
@media (max-width: 760px) {
  .js-garderoba .mostre-costume { flex-wrap: nowrap; }
  .js-garderoba .mostra-costum { width: calc((100vw - 2 * var(--gutter) - 2.5rem) / 6); }
  .js-garderoba .mostra-costum .cine { font-size: .5625rem; }
}
@media (max-width: 760px) and (max-height: 720px) {
  .js-garderoba .c-device { height: 34svh; }
  .js-garderoba .c-eticheta { display: none; }
}
/* etichetele lungi de sub umerașe („Als Nächstes", „Dental Concept") se rup, nu ies din ecran (audit 09.10, DE @360) */
.mostra-costum { min-width: 0; }
.mostra-costum .cine { max-width: 100%; overflow-wrap: anywhere; hyphens: auto; }
.mostra-costum--goala .tesatura { overflow-wrap: anywhere; }
@media (max-width: 760px) { .js-garderoba .mostra-costum--goala .tesatura { font-size: .5625rem; padding: .15rem; } }