/* Mono Space · varianta «Vizorul camerei» (Premium, atmosferă)
   Sala ca platou: întuneric verde-grafit, o singură lumină caldă de lampă, text crem.
   Forme: tot ce e cadru e drept (colțuri 0, ca în vizor); tot ce se apasă e pastilă. */

:root {
  --negru: #0a0e0d;          /* Sirius adus spre negru */
  --grafit: #101614;
  --grafit-2: #161e1b;
  --grafit-3: #1d2724;
  --linie: rgba(236, 228, 210, 0.13);
  --linie-tare: rgba(236, 228, 210, 0.26);
  --crem: #ece4d2;
  --crem-2: #bdb6a5;
  --crem-3: #908b7e;
  --lampa: #f2b15e;          /* lumina caldă: singurul accent */
  --lampa-vie: #ffc678;
  --lampa-umbra: rgba(242, 177, 94, 0.16);
  --pe-lampa: #1c1308;
  --rec: #e8473a;            /* doar starea REC (înregistrare / în așteptare) */
  --sirius: #56655f;
  --gri-inchis: #2a2e30;

  --titlu: "Bricolage Grotesque", "Avenir Next", system-ui, sans-serif;
  --mono: "DM Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --usor: cubic-bezier(0.16, 1, 0.3, 1);        /* ieșire lungă */
  --film: cubic-bezier(0.22, 0.61, 0.36, 1);
  --fixare: cubic-bezier(0.3, 1.32, 0.55, 1);    /* depășire mică, ca o focalizare */
  --cadere: cubic-bezier(0.55, 0, 0.9, 0.4);     /* brațul claketei cade */

  --margine: clamp(20px, 4vw, 56px);
  --sectiune: clamp(96px, 12vw, 168px);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 72px; background: var(--negru); }
body {
  margin: 0; background: var(--negru); color: var(--crem);
  font-family: var(--titlu); font-size: 17px; line-height: 1.55; font-weight: 400;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  font-optical-sizing: auto;
}
@media (max-width: 759px) { body { font-size: 16px; } }
img, svg, canvas { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3, p, ol, ul, dl, dd, figure { margin: 0; }
ol, ul { padding: 0; list-style: none; }
button, input { font: inherit; color: inherit; }
::selection { background: var(--lampa); color: var(--pe-lampa); }
:focus-visible { outline: 2px solid var(--lampa); outline-offset: 3px; }

/* granulația peliculei: fixă, peste tot, nu se repictează la derulare */
body::after {
  content: ""; position: fixed; inset: 0; z-index: 90; pointer-events: none; opacity: 0.06; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.sari { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--lampa); color: var(--pe-lampa); padding: 10px 16px; border-radius: 999px; text-decoration: none; font-weight: 600; }
.sari:focus { top: 12px; }

/* ---------- butoane ---------- */
.buton {
  --h: 54px;
  display: inline-flex; align-items: center; gap: 14px; min-height: var(--h);
  padding: 7px 7px 7px 26px; border-radius: 999px; border: 0; cursor: pointer;
  background: var(--lampa); color: var(--pe-lampa); text-decoration: none; white-space: nowrap;
  font-family: var(--titlu); font-weight: 600; font-size: 17px; letter-spacing: -0.005em;
  box-shadow: inset 0 1px 0 rgba(255, 244, 222, 0.55), 0 14px 34px -18px rgba(242, 177, 94, 0.7);
  transition: background-color 0.25s var(--usor), transform 0.16s var(--usor), box-shadow 0.3s var(--usor);
  -webkit-tap-highlight-color: transparent;
}
.buton__miez {
  display: grid; place-items: center; width: 40px; height: 40px; border-radius: 999px;
  background: rgba(28, 19, 8, 0.12); transition: transform 0.3s var(--usor);
}
.buton__miez svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.buton:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) {
  .buton:hover { background: var(--lampa-vie); }
  .buton:hover .buton__miez { transform: translateX(3px); }
}
.buton[disabled] { cursor: not-allowed; background: var(--grafit-3); color: var(--crem-3); box-shadow: inset 0 0 0 1px var(--linie); }
.buton[disabled] .buton__miez { background: rgba(236, 228, 210, 0.06); transform: none; }
.buton--antet { --h: 42px; padding: 0 20px; font-size: 15px; box-shadow: none; }
.buton--lat { width: 100%; justify-content: space-between; }
.link-sec {
  display: inline-flex; align-items: center; min-height: 48px; padding: 0 6px;
  color: var(--crem); text-decoration: underline; text-decoration-color: var(--linie-tare); text-underline-offset: 6px; text-decoration-thickness: 1px;
  font-weight: 500; transition: text-decoration-color 0.25s var(--usor), color 0.25s var(--usor);
}
@media (hover: hover) and (pointer: fine) { .link-sec:hover { text-decoration-color: var(--lampa); color: #fff7e8; } }

/* ---------- antetul ---------- */
.antet {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50; height: 68px;
  display: flex; align-items: center; gap: 28px; padding: 0 var(--margine);
  transition: background-color 0.4s var(--usor), box-shadow 0.4s var(--usor);
}
.antet.e-plin { background: rgba(10, 14, 13, 0.72); -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2); box-shadow: 0 1px 0 var(--linie); }
.marca { font-weight: 700; font-size: 19px; letter-spacing: -0.03em; text-decoration: none; margin-right: auto; padding: 8px 0; }
.antet__nav ul { display: flex; gap: 4px; }
.antet__nav a { display: block; padding: 10px 14px; text-decoration: none; color: var(--crem-2); font-size: 15px; border-radius: 999px; transition: color 0.2s var(--usor), background-color 0.2s var(--usor); }
@media (hover: hover) and (pointer: fine) { .antet__nav a:hover { color: var(--crem); background: rgba(236, 228, 210, 0.07); } }
@media (max-width: 899px) { .antet__nav { display: none; } }
@media (max-width: 759px) {
  .antet { height: 56px; }
  .antet .buton--antet { display: none; }
  .antet.e-plin .buton--antet { display: inline-flex; --h: 38px; padding: 0 16px; font-size: 14px; }
}

/* ---------- 1. vizorul ---------- */
.vizor { position: relative; min-height: 100vh; min-height: 100svh; overflow: hidden; isolation: isolate; background: var(--negru); }
.vizor__scena { position: absolute; inset: 0; z-index: 0; }
.vizor__scena picture, .vizor__poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.vizor__scena canvas { position: absolute; inset: 0; width: 100% !important; height: 100% !important; opacity: 0; transition: opacity 0.9s var(--usor); }
.vizor__scena.e-3d canvas { opacity: 1; }
.vizor__umbra {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(120% 90% at 62% 42%, transparent 52%, rgba(6, 9, 8, 0.65) 100%),
    linear-gradient(90deg, rgba(8, 11, 10, 0.82) 0%, rgba(8, 11, 10, 0.45) 34%, transparent 58%),
    linear-gradient(0deg, rgba(8, 11, 10, 0.7) 0%, transparent 34%);
}
@media (max-width: 759px) {
  .vizor__umbra { background:
    radial-gradient(130% 70% at 50% 28%, transparent 50%, rgba(6, 9, 8, 0.6) 100%),
    linear-gradient(0deg, rgba(8, 11, 10, 0.96) 0%, rgba(8, 11, 10, 0.82) 40%, rgba(8, 11, 10, 0.1) 62%, transparent 72%); }
}

/* cadrul camerei: colțurile de încadrare și afișajul */
.vizor__cadru { position: absolute; z-index: 2; inset: 80px 28px 26px; pointer-events: none; }
.colt { position: absolute; width: 34px; height: 34px; border: 0 solid rgba(236, 228, 210, 0.82); }
.colt--ss { top: 0; left: 0; border-top-width: 1.5px; border-left-width: 1.5px; }
.colt--sd { top: 0; right: 0; border-top-width: 1.5px; border-right-width: 1.5px; }
.colt--js { bottom: 0; left: 0; border-bottom-width: 1.5px; border-left-width: 1.5px; }
.colt--jd { bottom: 0; right: 0; border-bottom-width: 1.5px; border-right-width: 1.5px; }
.osd { position: absolute; left: 22px; right: 22px; top: 18px; display: flex; justify-content: space-between; align-items: flex-start; gap: 16px;
  font-family: var(--mono); font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(236, 228, 210, 0.9); }
.osd__rec { display: flex; align-items: center; gap: 10px; font-variant-numeric: tabular-nums; }
.tc { letter-spacing: 0.06em; color: var(--crem); }
.rec { width: 10px; height: 10px; border-radius: 50%; background: var(--rec); box-shadow: 0 0 0 0 transparent; }
.osd__cam { text-align: right; display: flex; gap: 10px; }
.osd__cam span:last-child { color: var(--lampa); }
.vizor__text { position: absolute; z-index: 3; left: calc(28px + clamp(24px, 3.4vw, 52px)); bottom: calc(26px + clamp(40px, 6vh, 72px)); width: min(620px, 52vw); }
.vizor__titlu {
  font-size: clamp(42px, 2.2rem + 3.1vw, 88px); line-height: 1.02; letter-spacing: -0.04em; font-weight: 600;
  font-variation-settings: "wdth" 100; text-wrap: balance; color: #f4ecdb;
}
.vizor__sub { margin-top: 22px; max-width: 44ch; color: var(--crem-2); font-size: clamp(16px, 0.95rem + 0.25vw, 19px); line-height: 1.5; text-wrap: pretty; }
.vizor__butoane { margin-top: 30px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; }
.vizor__regie { position: absolute; z-index: 3; right: calc(28px + 22px); bottom: calc(26px + 22px); display: flex; flex-direction: column; align-items: flex-end; gap: 12px; }
.osd__dreapta { display: grid; justify-items: end; gap: 6px; }
.osd__nota { font-size: 12px; letter-spacing: 0.02em; text-transform: none; color: rgba(236, 228, 210, 0.62); text-align: right; }
.unghiuri { display: flex; gap: 4px; padding: 4px; border-radius: 999px; background: rgba(10, 14, 13, 0.62); box-shadow: inset 0 0 0 1px var(--linie), inset 0 1px 0 rgba(236, 228, 210, 0.06); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.unghi {
  position: relative; display: inline-flex; align-items: center; gap: 9px; min-height: 40px; padding: 0 16px 0 13px; border: 0; border-radius: 999px; cursor: pointer;
  background: transparent; color: var(--crem-2); font-family: var(--mono); font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase;
  transition: background-color 0.2s var(--usor), color 0.2s var(--usor), transform 0.16s var(--usor);
}
.unghi__tally { width: 7px; height: 7px; border-radius: 50%; background: rgba(236, 228, 210, 0.22); transition: background-color 0.2s var(--usor); }
.unghi[aria-pressed="true"] { background: rgba(236, 228, 210, 0.1); color: var(--crem); }
.unghi[aria-pressed="true"] .unghi__tally { background: var(--lampa); }
.unghi:active { transform: scale(0.96); }
@media (hover: hover) and (pointer: fine) { .unghi:hover { color: var(--crem); } }
.no-js .vizor__regie .unghiuri { display: none; }

@media (max-width: 759px) {
  .vizor { min-height: 100svh; }
  .vizor__cadru { inset: 62px 12px 12px; }
  .colt { width: 24px; height: 24px; }
  .osd { left: 14px; right: 14px; top: 12px; font-size: 12px; }
  .vizor__text { left: 26px; right: 26px; width: auto; bottom: 86px; }
  .vizor__titlu { font-size: clamp(34px, 9.6vw, 44px); line-height: 1.04; }
  .vizor__sub { margin-top: 14px; font-size: 15.5px; }
  .vizor__butoane { margin-top: 20px; gap: 10px 18px; }
  .vizor__butoane .buton { flex: 1 1 auto; justify-content: space-between; }
  .vizor__regie { left: 24px; right: 24px; bottom: 24px; align-items: stretch; }
  .unghiuri { justify-content: space-between; }
  .unghi { flex: 1; justify-content: center; min-height: 40px; padding: 0 10px; font-size: 12px; }
}
@media (max-width: 759px) and (max-height: 620px) {
  .vizor__sub { display: none; }
}

/* intrarea: din negru, colțurile vin din afară și se fixează, apoi pornește REC */
.js .vizor__scena { opacity: 0; }
.js .vizor .colt { opacity: 0; }
.js .vizor .colt--ss { transform: translate(-30px, -30px); }
.js .vizor .colt--sd { transform: translate(30px, -30px); }
.js .vizor .colt--js { transform: translate(-30px, 30px); }
.js .vizor .colt--jd { transform: translate(30px, 30px); }
.js .vizor .osd, .js .vizor__regie { opacity: 0; }
.js .vizor__titlu, .js .vizor__sub, .js .vizor__butoane { opacity: 0; transform: translateY(18px); filter: blur(8px); }
.js .rec { background: transparent; box-shadow: inset 0 0 0 1.5px rgba(232, 71, 58, 0.7); }
.vizor.e-gata .vizor__scena { opacity: 1; transition: opacity 0.9s var(--usor); }
.vizor.e-gata .colt { opacity: 1; transform: none; transition: transform 0.75s var(--fixare) 0.35s, opacity 0.35s linear 0.35s; }
.vizor.e-gata .osd, .vizor.e-gata .vizor__regie { opacity: 1; transition: opacity 0.6s var(--usor) 0.9s; }
.vizor.e-gata .vizor__titlu, .vizor.e-gata .vizor__sub, .vizor.e-gata .vizor__butoane { opacity: 1; transform: none; filter: none; transition: opacity 0.9s var(--usor), transform 0.9s var(--usor), filter 0.9s var(--usor); }
.vizor.e-gata .vizor__titlu { transition-delay: 0.45s; }
.vizor.e-gata .vizor__sub { transition-delay: 0.6s; }
.vizor.e-gata .vizor__butoane { transition-delay: 0.72s; }
.vizor.e-rec .rec { background: var(--rec); box-shadow: inset 0 0 0 1.5px var(--rec); transition: background-color 0.12s linear; }

/* tăietura între unghiuri: colțurile se strâng cu 6 px și revin, imaginea își caută focusul */
.vizor.e-taie .colt--ss { animation: strange-ss 0.26s var(--usor); }
.vizor.e-taie .colt--sd { animation: strange-sd 0.26s var(--usor); }
.vizor.e-taie .colt--js { animation: strange-js 0.26s var(--usor); }
.vizor.e-taie .colt--jd { animation: strange-jd 0.26s var(--usor); }
.vizor.e-taie .vizor__scena canvas, .vizor.e-taie .vizor__poster { animation: focus 0.34s var(--usor); }
@keyframes strange-ss { 40% { transform: translate(6px, 6px); } }
@keyframes strange-sd { 40% { transform: translate(-6px, 6px); } }
@keyframes strange-js { 40% { transform: translate(6px, -6px); } }
@keyframes strange-jd { 40% { transform: translate(-6px, -6px); } }
@keyframes focus { 0% { filter: blur(5px) brightness(0.86); } 100% { filter: none; } }

/* ---------- secțiuni ---------- */
.sectiune__cap { max-width: 760px; }
.titlu-sectiune { font-size: clamp(34px, 1.6rem + 2.6vw, 64px); line-height: 1.04; letter-spacing: -0.035em; font-weight: 600; text-wrap: balance; color: #f4ecdb; }
.sectiune__intro { margin-top: 18px; max-width: 52ch; color: var(--crem-2); font-size: clamp(16px, 0.95rem + 0.2vw, 18px); text-wrap: pretty; }

/* ---------- 2. pistele ---------- */
.piste { padding: var(--sectiune) var(--margine) calc(var(--sectiune) * 0.8); }
.piste__lista { position: relative; margin-top: clamp(48px, 6vw, 80px); isolation: isolate; }
.piste__lista::before {   /* lumina caldă care urmărește cursorul, cu întârziere */
  content: ""; position: absolute; z-index: -1; inset: 0; pointer-events: none; opacity: 0; transition: opacity 0.6s var(--usor);
  background: radial-gradient(420px 260px at var(--lx, 30%) var(--ly, 50%), rgba(242, 177, 94, 0.13), transparent 70%);
}
.piste__lista.e-lumina::before { opacity: 1; }
.pista {
  display: grid; grid-template-columns: minmax(0, 4.2fr) minmax(0, 4fr) minmax(0, 3.4fr) 212px; gap: 12px 40px; align-items: baseline;
  padding: 34px 0 36px; border-top: 1px solid var(--linie);
}
.pista:last-child { border-bottom: 1px solid var(--linie); }
.pista__nume { font-size: clamp(26px, 1.2rem + 1.5vw, 40px); line-height: 1.08; letter-spacing: -0.03em; font-weight: 600; transition: color 0.3s var(--usor); }
.pista__cine { color: var(--crem-2); max-width: 38ch; }
.pista__date { display: grid; gap: 6px; font-family: var(--mono); font-size: 13px; letter-spacing: 0.02em; }
.pista__date div { display: flex; gap: 10px; flex-wrap: wrap; }
.pista__date dt { color: var(--crem-3); min-width: 16ch; }
.pista__date dd { color: var(--crem); }
.pista__buton {
  align-self: center; justify-self: end; display: inline-flex; align-items: center; min-height: 46px; padding: 0 20px; border-radius: 999px; white-space: nowrap;
  text-decoration: none; font-weight: 600; font-size: 15px; color: var(--crem); box-shadow: inset 0 0 0 1px var(--linie-tare);
  transition: background-color 0.25s var(--usor), color 0.25s var(--usor), box-shadow 0.25s var(--usor), transform 0.16s var(--usor);
}
.pista__buton:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) {
  .pista:hover .pista__nume { color: var(--lampa-vie); }
  .pista__buton:hover { background: var(--lampa); color: var(--pe-lampa); box-shadow: inset 0 0 0 1px var(--lampa); }
}
@media (max-width: 999px) {
  .pista { grid-template-columns: 1fr auto; gap: 10px 24px; }
  .pista__buton { justify-self: end; }
  .pista__nume { grid-column: 1; }
  .pista__cine { grid-column: 1 / -1; }
  .pista__date { grid-column: 1 / -1; }
  .pista__buton { grid-column: 2; grid-row: 1; align-self: center; }
}
@media (max-width: 599px) {
  .pista { grid-template-columns: 1fr; padding: 28px 0 30px; }
  .pista__buton { grid-column: 1; grid-row: auto; justify-content: center; width: 100%; margin-top: 8px; min-height: 48px; }
}

/* ---------- 3. sala ---------- */
.sala { padding: calc(var(--sectiune) * 0.6) var(--margine) var(--sectiune); }
.cadre { margin-top: clamp(48px, 7vw, 96px); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(16px, 2.4vw, 36px); align-items: start; }
.cadru--negru { grid-column: 1 / span 5; }
.cadru--sirius { grid-column: 6 / span 4; margin-top: clamp(80px, 12vw, 180px); }
.cadru--gri { grid-column: 10 / span 3; margin-top: clamp(24px, 4vw, 60px); }
.cadru__loc { position: relative; overflow: hidden; }
.cadru--negru .cadru__loc { aspect-ratio: 4 / 5; background: #060807; }
.cadru--sirius .cadru__loc { aspect-ratio: 3 / 4; background: var(--sirius); }
.cadru--gri .cadru__loc { aspect-ratio: 2 / 3; background: var(--gri-inchis); }
.cadru__loc::before {    /* lumina lămpii căzând pe mostră, de sus */
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(90% 60% at 50% -6%, rgba(255, 196, 128, 0.32), transparent 70%), linear-gradient(180deg, transparent 55%, rgba(0, 0, 0, 0.38));
}
.cadru--negru .cadru__loc::before { background: radial-gradient(90% 60% at 50% -6%, rgba(255, 196, 128, 0.16), transparent 70%), linear-gradient(180deg, transparent 55%, rgba(0, 0, 0, 0.5)); }
.cadru__colturi { position: absolute; inset: 14px; width: calc(100% - 28px); height: calc(100% - 28px); overflow: visible; }
.cadru__colturi path { fill: none; stroke: rgba(236, 228, 210, 0.78); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.cadru__ton { position: absolute; left: 26px; bottom: 22px; font-family: var(--mono); font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(244, 236, 219, 0.92); }
.cadru figcaption { margin-top: 16px; display: flex; flex-direction: column; gap: 4px; }
.cadru__ce { font-size: 16px; line-height: 1.4; }
.cadru__stare { font-family: var(--mono); font-size: 12px; letter-spacing: 0.04em; color: var(--crem-3); }
.fisa { margin-top: clamp(56px, 8vw, 110px); display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 32px clamp(32px, 5vw, 80px); align-items: end; }
.fisa__date { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.fisa__date div { display: grid; gap: 6px; padding-top: 14px; border-top: 1px solid var(--linie); }
.fisa__date dt { font-family: var(--mono); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--crem-3); }
.fisa__date dd { font-size: 16px; line-height: 1.35; }
.fisa__nota { color: var(--crem-2); max-width: 40ch; }
@media (max-width: 899px) {
  .cadre { grid-template-columns: repeat(6, minmax(0, 1fr)); row-gap: 40px; }
  .cadru--negru { grid-column: 1 / -1; }
  .cadru--sirius { grid-column: 1 / span 4; margin-top: 0; }
  .cadru--gri { grid-column: 3 / -1; margin-top: 0; }
  .cadru--negru .cadru__loc { aspect-ratio: 4 / 3; }
  .fisa { grid-template-columns: 1fr; }
  .fisa__date { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- 4. rezervarea ---------- */
.rezerva { padding: var(--sectiune) var(--margine); background: linear-gradient(180deg, var(--negru), var(--grafit) 18%, var(--grafit) 82%, var(--negru)); }
.rezerva__grila { margin-top: clamp(40px, 6vw, 80px); display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(32px, 5vw, 88px); align-items: start; }
.alegeri { display: grid; gap: 34px; }
.alegere { border: 0; padding: 0; margin: 0; min-width: 0; }
.alegere legend { padding: 0; margin-bottom: 14px; font-weight: 600; font-size: 18px; letter-spacing: -0.01em; }
.alegere__sub { display: block; margin-top: 2px; font-family: var(--mono); font-weight: 400; font-size: 12px; letter-spacing: 0.02em; color: var(--crem-3); }
.pastile { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.pastila { position: relative; cursor: pointer; }
.pastila input, .zi input[type="radio"], .ora input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.pastila span {
  display: flex; flex-direction: column; gap: 2px; min-height: 64px; justify-content: center; padding: 10px 22px; border-radius: 999px;
  box-shadow: inset 0 0 0 1px var(--linie-tare); font-weight: 600; font-size: 16px; line-height: 1.25;
  transition: background-color 0.2s var(--usor), box-shadow 0.2s var(--usor), color 0.2s var(--usor), transform 0.16s var(--usor);
}
.pastila small { font-family: var(--mono); font-weight: 400; font-size: 12px; color: var(--crem-3); letter-spacing: 0.02em; }
.pastila input:checked + span { background: rgba(242, 177, 94, 0.12); box-shadow: inset 0 0 0 1.5px var(--lampa); color: #fff3df; }
.pastila input:checked + span small { color: var(--crem-2); }
.pastila input:focus-visible + span, .zi input:focus-visible + span, .ora input:focus-visible + span { outline: 2px solid var(--lampa); outline-offset: 3px; }
.pastila:active span { transform: scale(0.98); }
.zile { display: flex; gap: 8px; overflow-x: auto; scroll-snap-type: x proximity; padding: 2px 2px 8px; margin: -2px -2px 0; scrollbar-width: none; }
.zile::-webkit-scrollbar { display: none; }
.zi { position: relative; flex: 0 0 auto; scroll-snap-align: start; cursor: pointer; }
.zi > span {
  display: grid; justify-items: center; gap: 2px; width: 74px; padding: 12px 0 11px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--linie-tare);
  transition: background-color 0.2s var(--usor), box-shadow 0.2s var(--usor), transform 0.16s var(--usor);
}
.zi b { font-size: 22px; font-weight: 600; line-height: 1.1; letter-spacing: -0.02em; }
.zi small { font-family: var(--mono); font-size: 12px; letter-spacing: 0.04em; color: var(--crem-3); text-transform: lowercase; }
.zi input:checked + span { background: var(--lampa); color: var(--pe-lampa); box-shadow: none; }
.zi input:checked + span small { color: rgba(28, 19, 8, 0.75); }
.zi:active > span { transform: scale(0.96); }
.zi input[type="date"] { min-height: 48px; padding: 0 16px; border-radius: 999px; border: 0; background: transparent; box-shadow: inset 0 0 0 1px var(--linie-tare); color-scheme: dark; }
.ore { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 8px; }
.ora { position: relative; cursor: pointer; }
.ora span {
  display: grid; place-items: center; min-height: 46px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--linie-tare);
  font-family: var(--mono); font-size: 14px; letter-spacing: 0.02em; transition: background-color 0.2s var(--usor), box-shadow 0.2s var(--usor), transform 0.16s var(--usor);
}
.ora input:checked + span { background: var(--lampa); color: var(--pe-lampa); box-shadow: none; }
.ora input:disabled + span { cursor: not-allowed; color: var(--crem-3); box-shadow: none; background: repeating-linear-gradient(-45deg, rgba(236, 228, 210, 0.07) 0 5px, transparent 5px 10px); }
.ora:active input:not(:disabled) + span { transform: scale(0.95); }
@media (hover: hover) and (pointer: fine) {
  .pastila:hover input:not(:checked) + span, .zi:hover input:not(:checked) + span, .ora:hover input:not(:checked):not(:disabled) + span { box-shadow: inset 0 0 0 1px rgba(242, 177, 94, 0.7); }
}
.ore__legenda { margin-top: 12px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-family: var(--mono); font-size: 12px; color: var(--crem-3); }
.ore__semn { width: 18px; height: 12px; border-radius: 999px; display: inline-block; }
.ore__semn--liber { box-shadow: inset 0 0 0 1px var(--linie-tare); }
.ore__semn--ocupat { margin-left: 8px; background: repeating-linear-gradient(-45deg, rgba(236, 228, 210, 0.22) 0 3px, transparent 3px 6px); }
.camp { display: grid; gap: 10px; }
.camp__eticheta { font-weight: 600; font-size: 18px; }
.camp input { min-height: 52px; padding: 0 22px; border-radius: 999px; border: 0; background: rgba(236, 228, 210, 0.04); box-shadow: inset 0 0 0 1px var(--linie-tare); transition: box-shadow 0.2s var(--usor); }
.camp input::placeholder { color: var(--crem-3); }
.camp input:focus { outline: none; box-shadow: inset 0 0 0 1.5px var(--lampa); }
@media (max-width: 999px) {
  .rezerva__grila { grid-template-columns: 1fr; }
  .ore { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 420px) { .pastila span { padding: 10px 16px; font-size: 15px; } }

/* claketa: tabla neagră cu cretă crem, brațul cu dungi, balamaua în stânga */
.claketa-loc { position: sticky; top: 96px; display: grid; gap: 22px; }
.claketa { position: relative; padding-top: 58px; filter: drop-shadow(0 30px 40px rgba(0, 0, 0, 0.45)); }
.claketa__brat { position: absolute; left: 0; right: 0; top: 0; height: 58px; }
.claketa__bara {
  position: absolute; left: 0; right: 0; height: 26px; border-radius: 3px;
  background: repeating-linear-gradient(-58deg, #ece4d2 0 22px, #141a18 22px 44px);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
.claketa__bara--jos { bottom: 2px; }
.claketa__bara--sus { bottom: 30px; transform-origin: 13px 100%; transform: rotate(-13deg); background: repeating-linear-gradient(58deg, #ece4d2 0 22px, #141a18 22px 44px); }
.claketa__balama { position: absolute; left: 6px; bottom: 22px; width: 14px; height: 14px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #d9dcdc, #6c7271); box-shadow: 0 0 0 2px #0d1110; }
.claketa__tabla {
  position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-radius: 3px; overflow: hidden;
  background: radial-gradient(120% 80% at 30% 0%, #1b2320, #0e1312 70%); box-shadow: inset 0 0 0 1px rgba(236, 228, 210, 0.14);
  font-family: var(--mono); color: #efe7d5;
}
.claketa__rand { display: grid; gap: 4px; padding: 14px 16px 15px; border-right: 1px solid rgba(236, 228, 210, 0.22); border-bottom: 1px solid rgba(236, 228, 210, 0.22); min-width: 0; }
.claketa__rand:nth-child(3), .claketa__rand:nth-child(5) { border-right: 0; }
.claketa__rand--prod { grid-column: 1 / -1; border-right: 0; }
.claketa__rand:nth-child(2), .claketa__rand:nth-child(4) { grid-column: span 2; }
.claketa__et { font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(236, 228, 210, 0.62); }
.claketa__val { font-family: var(--titlu); font-weight: 600; font-size: 21px; line-height: 1.2; letter-spacing: -0.01em; overflow-wrap: anywhere; transition: opacity 0.2s var(--usor), transform 0.25s var(--usor); }
.claketa__rand--prod .claketa__val { font-size: 26px; }
.claketa__val.e-schimba { animation: creta 0.32s var(--usor); }
@keyframes creta { 0% { opacity: 0; transform: translateY(6px); } }
.claketa__tc { grid-column: 1 / -1; display: flex; align-items: center; justify-content: center; gap: 12px; padding: 14px 16px 10px; font-size: clamp(24px, 1.2rem + 1vw, 32px); letter-spacing: 0.08em; color: #ff6a4d; font-variant-numeric: tabular-nums; text-shadow: 0 0 14px rgba(255, 90, 60, 0.35); background: #070a09; }
.claketa__durata { grid-column: 1 / -1; height: 3px; background: rgba(236, 228, 210, 0.08); }
.claketa__durata span { display: block; height: 100%; width: 100%; background: var(--lampa); transform: scaleX(0); transform-origin: left; transition: transform 1.2s var(--film); }
.claketa__durata.e-plin span { transform: scaleX(1); }
.claketa__marca { grid-column: 1 / -1; padding: 10px 16px 12px; background: #070a09; font-family: var(--titlu); font-weight: 700; font-size: 13px; letter-spacing: -0.01em; color: rgba(236, 228, 210, 0.55); text-align: right; }
.rec--mic { width: 9px; height: 9px; flex: none; }
.js .claketa .rec--mic { background: var(--rec); box-shadow: inset 0 0 0 1.5px var(--rec); }
.claketa.e-clap .claketa__bara--sus { transform: rotate(0deg); transition: transform 0.17s var(--cadere); }
.claketa.e-clap { animation: lovitura 0.22s var(--usor) 0.17s; }
@keyframes lovitura { 30% { transform: translateY(2px); } }
.claketa.e-asteapta .claketa__bara--sus { transform: rotate(0deg); }
.js .claketa.e-asteapta [data-c-rec] { background: transparent; box-shadow: inset 0 0 0 1.5px var(--rec); animation: asteapta 2.4s ease-in-out infinite; }
@keyframes asteapta { 50% { opacity: 0.35; } }
.trimite { display: grid; gap: 12px; }
.trimite__nota { color: var(--crem-2); font-size: 15px; }
.trimite__nota strong { color: var(--crem); font-weight: 600; }
.trimite__macheta { font-family: var(--mono); font-size: 12px; color: var(--crem-3); }
@media (max-width: 999px) { .claketa-loc { position: static; max-width: 520px; margin-top: 12%; } }
@media (max-width: 599px) {
  .claketa-loc { margin-top: 18%; }
  .claketa__rand { padding: 12px 12px 13px; }
  .claketa__val { font-size: 17px; }
  .claketa__rand--prod .claketa__val { font-size: 22px; }
}

/* cei trei pași, legați de un semnal */
.pasi { position: relative; margin-top: clamp(72px, 9vw, 128px); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.pasi__semnal { position: absolute; left: 0; right: 0; top: -14px; width: 100%; height: 40px; overflow: visible; }
.pasi__semnal path { fill: none; stroke: rgba(242, 177, 94, 0.55); stroke-width: 1.5; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 0; }
.pas { position: relative; padding-top: 34px; }
.pas__nod { position: absolute; top: 0; left: 0; width: 14px; height: 14px; border-radius: 50%; background: var(--negru); box-shadow: inset 0 0 0 1.5px var(--lampa); }
.pas h3 { font-size: 22px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.2; }
.pas p { margin-top: 8px; color: var(--crem-2); max-width: 32ch; }
@media (max-width: 759px) {
  .pasi { grid-template-columns: 1fr; gap: 30px; padding-left: 30px; }
  .pasi__semnal { display: none; }
  .pasi::before { content: ""; position: absolute; left: 6px; top: 8px; bottom: 8px; width: 1.5px; background: linear-gradient(var(--lampa), rgba(242, 177, 94, 0.15)); transform-origin: top; }
  .pas { padding-top: 0; margin-top: 0 !important; }
  .pas__nod { left: -30px; top: 6px; }
}

/* ---------- 5. cum ajungi ---------- */
.drum { padding: var(--sectiune) var(--margine) calc(var(--sectiune) * 0.7); display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 40px clamp(40px, 6vw, 110px); align-items: end; }
.drum__strada { margin-top: 26px; font-size: 22px; line-height: 1.35; font-weight: 500; }
.drum__text { margin-top: 14px; color: var(--crem-2); max-width: 40ch; }
.drum__butoane { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.harta {
  display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 18px; row-gap: 4px; align-items: center;
  min-height: 108px; padding: 24px 28px; border-radius: 999px; text-decoration: none; box-shadow: inset 0 0 0 1px var(--linie-tare);
}
.harta svg { grid-row: 1 / span 2; width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.harta__nume { font-weight: 600; font-size: 19px; letter-spacing: -0.01em; }
.harta__stare { font-family: var(--mono); font-size: 12px; color: var(--crem-3); }
.harta--off { cursor: not-allowed; color: var(--crem-2); background: repeating-linear-gradient(-45deg, rgba(236, 228, 210, 0.025) 0 6px, transparent 6px 12px); }
@media (max-width: 899px) {
  .drum { grid-template-columns: 1fr; align-items: start; }
  .drum__butoane { grid-template-columns: 1fr; }
  .harta { min-height: 88px; padding: 18px 24px; }
}

/* ---------- 6. finalul: se închide în cadru, ca la început ---------- */
.final { padding: calc(var(--sectiune) * 0.5) var(--margine) var(--sectiune); }
.final__cadru { position: relative; padding: clamp(64px, 9vw, 128px) clamp(28px, 6vw, 96px); display: grid; justify-items: center; text-align: center; gap: 22px; }
.final__titlu { font-size: clamp(30px, 1.4rem + 2vw, 54px); line-height: 1.06; letter-spacing: -0.035em; font-weight: 600; max-width: 18ch; text-wrap: balance; }
.final__nota { color: var(--crem-2); max-width: 42ch; font-size: 18px; }
.final__cadru .buton { margin-top: 12px; }
.final .colt { border-color: rgba(236, 228, 210, 0.5); }

/* ---------- subsolul ---------- */
.subsol { padding: 40px var(--margine) 48px; border-top: 1px solid var(--linie); display: grid; grid-template-columns: auto 1fr 1fr auto; gap: 14px 40px; align-items: baseline; font-size: 14px; color: var(--crem-3); }
.subsol__marca { font-weight: 700; color: var(--crem); font-size: 16px; letter-spacing: -0.02em; }
.subsol__legal { display: flex; gap: 6px 20px; flex-wrap: wrap; }
.subsol a { color: var(--crem-2); text-underline-offset: 4px; }
@media (max-width: 899px) { .subsol { grid-template-columns: 1fr; padding-bottom: 104px; } }

/* ---------- bara de jos, pe telefon ---------- */
.bara-jos { display: none; }
@media (max-width: 759px) {
  .bara-jos {
    position: fixed; z-index: 60; left: 12px; right: 12px; bottom: max(12px, env(safe-area-inset-bottom)); display: flex; gap: 8px; align-items: center;
    padding: 6px; border-radius: 999px; background: rgba(14, 19, 17, 0.86); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
    box-shadow: inset 0 0 0 1px var(--linie), 0 18px 40px -16px rgba(0, 0, 0, 0.7);
    transform: translateY(140%); transition: transform 0.45s var(--usor);
  }
  .bara-jos.e-vizibil { transform: none; }
  .buton--bara { --h: 48px; flex: 1; justify-content: center; padding: 0 18px; font-size: 16px; box-shadow: none; }
  .bara-jos__sec { display: grid; place-items: center; min-height: 48px; padding: 0 18px; border-radius: 999px; text-decoration: none; font-weight: 600; font-size: 15px; color: var(--crem); box-shadow: inset 0 0 0 1px var(--linie-tare); }
}

/* ---------- apariții la derulare (doar cu JS și cu mișcare) ---------- */
.js [data-apare] { opacity: 0; transform: translateY(22px); filter: blur(6px); transition: opacity 0.9s var(--usor), transform 0.9s var(--usor), filter 0.9s var(--usor); transition-delay: var(--intarziere, 0s); }
.js [data-apare].e-vazut { opacity: 1; transform: none; filter: none; }
.js .cadru[data-apare] { transform: none; filter: none; opacity: 1; }
.js .cadru .cadru__colturi path { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 0.8s var(--film) var(--intarziere, 0s); }
.js .cadru.e-vazut .cadru__colturi path { stroke-dashoffset: 0; }
.js .cadru .cadru__loc { background-color: #050706; }
.js .cadru .cadru__loc::before, .js .cadru .cadru__ton { opacity: 0; transition: opacity 1.1s var(--usor) calc(var(--intarziere, 0s) + 0.45s); }
.js .cadru.e-vazut .cadru__loc::before, .js .cadru.e-vazut .cadru__ton { opacity: 1; }
.js .cadru .cadru__loc { transition: background-color 1.4s var(--usor) calc(var(--intarziere, 0s) + 0.35s); }
.js .cadru--sirius.e-vazut .cadru__loc { background-color: var(--sirius); }
.js .cadru--gri.e-vazut .cadru__loc { background-color: var(--gri-inchis); }
.js .cadru--negru.e-vazut .cadru__loc { background-color: #060807; }
.js .cadru figcaption { opacity: 0; transform: translateY(10px); transition: opacity 0.8s var(--usor) calc(var(--intarziere, 0s) + 0.7s), transform 0.8s var(--usor) calc(var(--intarziere, 0s) + 0.7s); }
.js .cadru.e-vazut figcaption { opacity: 1; transform: none; }
.js .pasi .pasi__semnal path { stroke-dashoffset: 1; transition: stroke-dashoffset 1.6s var(--film) 0.2s; }
.js .pasi.e-vazut .pasi__semnal path { stroke-dashoffset: 0; }
.js .pasi .pas__nod { background: var(--negru); transition: background-color 0.4s var(--usor); }
.js .pasi.e-vazut .pas:nth-of-type(1) .pas__nod { background: var(--lampa); transition-delay: 0.3s; }
.js .pasi.e-vazut .pas:nth-of-type(2) .pas__nod { background: var(--lampa); transition-delay: 0.9s; }
.js .pasi.e-vazut .pas:nth-of-type(3) .pas__nod { background: var(--lampa); transition-delay: 1.5s; }

/* ---------- mișcare redusă: totul așezat, tăieturi fără efect, timecode oprit ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition-duration: 0.01ms !important; transition-delay: 0s !important; }
  .js .vizor__scena, .js .vizor .colt, .js .vizor .osd, .js .vizor__regie, .js .vizor__titlu, .js .vizor__sub, .js .vizor__butoane { opacity: 1; transform: none; filter: none; }
  .js [data-apare] { opacity: 1; transform: none; filter: none; }
  .js .cadru .cadru__colturi path, .js .pasi .pasi__semnal path { stroke-dashoffset: 0; }
  .js .cadru .cadru__loc::before, .js .cadru .cadru__ton, .js .cadru figcaption { opacity: 1; transform: none; }
  .js .cadru--sirius .cadru__loc { background-color: var(--sirius); }
  .js .cadru--gri .cadru__loc { background-color: var(--gri-inchis); }
  .js .pasi .pas__nod { background: var(--lampa); }
  .js .rec { background: var(--rec); box-shadow: inset 0 0 0 1.5px var(--rec); }
  .claketa.e-asteapta [data-c-rec] { opacity: 1; }
}