/* proiecte.css · pagina dedicată proiectelor Tektyum
   Reutilizează identitatea vizuală a homepage-ului (Geist, Bodoni Moda, paletă ultraviolet). */

:root {
  --ink: #030509;
  --fog: #06090f;
  --dust: #93a4ae;
  --lilac: #c9d8e2;
  --accent: #e8f2f8;
  --hot: #bfe0f5;
  --title: #F6FAFF;   /* ice white pentru titluri */
  --text: #F2F6FC;   /* ice white */
  --dim: #A7B0BE;    /* icy cool gray, secundar */
  --hairline: rgba(210, 235, 248, 0.14);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

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

html {
  scrollbar-width: thin;
  scrollbar-color: rgba(210,235,248,.25) transparent;
  scroll-behavior: smooth;
}

body {
  background: var(--ink);
  color: var(--text);
  font-family: "Geist", system-ui, -apple-system, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  min-height: 100vh;
}

::selection { background: var(--accent); color: var(--ink); }
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 2px solid var(--hot); outline-offset: 4px; border-radius: 2px; }
img { display: block; max-width: 100%; }

/* ---------- texture overlays (din homepage) ---------- */
.vignette {
  position: fixed; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(120% 90% at 50% 50%, transparent 52%, rgba(7, 5, 11, 0.62) 100%),
    linear-gradient(rgba(7, 5, 11, 0.35), transparent 18%);
}
.grain {
  position: fixed; inset: -32px; z-index: 8; pointer-events: none; opacity: 0.05;
  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='0.92' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 160px 160px;
}

/* ---------- header ---------- */
.pg-nav {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; justify-content: space-between;
  padding: 22px clamp(20px, 5vw, 64px);
  background: linear-gradient(var(--ink), rgba(11,9,16,0));
}
.pg-brand {
  font-family: "Geist Mono", ui-monospace, monospace;
  font-weight: 600; letter-spacing: 0.22em; font-size: 0.92rem; color: var(--text);
}
.pg-back {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: "Geist Mono", ui-monospace, monospace;
  font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--dim);
  transition: color 0.3s var(--ease-out);
}
.pg-back:hover { color: var(--text); }

/* ---------- shell ---------- */
.pg {
  position: relative; z-index: 2;
  width: min(1200px, 92vw); margin: 0 auto;
  padding-bottom: clamp(80px, 12vw, 160px);
}

/* ---------- hero ---------- */
.pg-hero { padding: clamp(48px, 9vw, 120px) 0 clamp(40px, 6vw, 80px); }
.pg-kicker {
  font-family: "Geist Mono", ui-monospace, monospace;
  font-size: 0.78rem; letter-spacing: 0.16em; color: var(--dim); margin-bottom: 22px;
}
.pg-title {
  font-family: "Bodoni Moda", "Playfair Display", Georgia, serif;
  font-weight: 600; line-height: 1.0; color: var(--title); letter-spacing: 0;
  font-size: clamp(3rem, 9vw, 7rem);
}
.pg-intro {
  margin-top: 26px; max-width: 52ch; color: var(--dim);
  font-size: clamp(1rem, 1.4vw, 1.16rem);
}

/* ---------- work grid (poză sus, detalii dedesubt) ---------- */
.work {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(48px, 5vw, 76px) clamp(28px, 4vw, 56px);
  margin-top: clamp(20px, 4vw, 50px);
  align-items: start;
}
.work-row { display: flex; flex-direction: column; }
.work-body { margin-top: 22px; }

.work-media {
  position: relative; border: 1px solid var(--hairline); border-radius: 4px;
  overflow: hidden; background: var(--fog);
}
.work-media::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: 4px;
  box-shadow: inset 0 0 0 1px rgba(210,235,248,0.08);
}
.work-media img {
  width: 100%; height: auto; display: block;
  transition: transform 0.8s var(--ease-out);
}
.work-row:hover .work-media img { transform: scale(1.03); }

.work-meta {
  display: flex; flex-wrap: wrap; gap: 18px; align-items: center;
  font-family: "Geist Mono", ui-monospace, monospace;
  font-size: 0.76rem; letter-spacing: 0.04em; color: var(--dim);
}
.work-status {
  padding: 4px 11px; border-radius: 999px; border: 1px solid var(--hairline);
  font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--dim);
}
/* proiect livrat și online · lime, ca pe homepage (text lime pe fundal închis = contrast AA) */
.work-status.is-done {
  color: #99cc33; border-color: rgba(153, 204, 51, 0.32);
  background: rgba(153, 204, 51, 0.06);
}
.work-title {
  margin-top: 16px;
  font-family: "Bodoni Moda", "Playfair Display", Georgia, serif;
  font-weight: 600; line-height: 1.04; color: var(--title);
  font-size: clamp(1.9rem, 3.6vw, 3rem);
}
.work-desc {
  margin-top: 16px; max-width: 46ch; color: var(--dim);
  font-size: clamp(0.98rem, 1.2vw, 1.08rem);
}
.work-sub {
  margin-top: 26px;
  font-family: "Geist Mono", ui-monospace, monospace;
  font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--lilac);
}
.work-list { list-style: none; margin-top: 12px; }
.work-list li {
  position: relative; padding: 10px 0 10px 22px;
  border-top: 1px solid var(--hairline);
  font-size: clamp(0.92rem, 1.05vw, 1rem); color: var(--text); line-height: 1.4;
}
.work-list li:last-child { border-bottom: 1px solid var(--hairline); }
.work-list li::before {
  content: ""; position: absolute; left: 0; top: 1.05em;
  width: 10px; height: 1px; background: var(--accent);
}

/* live CTA (rezervat; afișat doar când proiectul are domeniu) */
.work-cta {
  display: inline-flex; align-items: center; gap: 14px; margin-top: 28px;
  padding: 13px 22px; border-radius: 999px; border: 1px solid var(--hairline); color: var(--text);
  /* premium fill (same recipe as the gate's "Enter with sound") */
  background-image: linear-gradient(#f2f8fc, #c9d8e2);
  background-repeat: no-repeat; background-position: center bottom; background-size: 100% 0%; background-color: transparent;
  font-family: "Geist Mono", ui-monospace, monospace;
  font-size: 0.72rem; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase;
  transition: background-size 0.5s var(--ease-out), color 0.4s var(--ease-out),
              border-color 0.4s var(--ease-out), transform 0.4s var(--ease-out);
}
.work-cta .arrow { transition: transform 0.4s var(--ease-out); }
.work-cta:hover, .work-cta:focus-visible {
  background-size: 100% 100%; border-color: rgba(236, 231, 255, 0.85);
  color: #04121c; transform: translateY(-1px); outline: none;
}
.work-cta:hover .arrow { transform: translateX(5px); }

/* ---------- footer CTA ---------- */
.pg-foot {
  margin-top: clamp(80px, 12vw, 160px); padding-top: clamp(40px, 6vw, 70px);
  border-top: 1px solid var(--hairline); text-align: center;
}
.pg-foot-title {
  font-family: "Bodoni Moda", "Playfair Display", Georgia, serif;
  font-weight: 600; color: var(--title); font-size: clamp(1.8rem, 4vw, 3rem);
}
.pg-foot-cta {
  display: inline-flex; align-items: center; gap: 14px; margin-top: 28px;
  padding: 15px 30px; border-radius: 999px;
  /* premium fill (same recipe as the gate's "Enter with sound") */
  background-image: linear-gradient(#f2f8fc, #c9d8e2);
  background-repeat: no-repeat; background-position: center bottom; background-size: 100% 0%; background-color: transparent;
  border: 1px solid rgba(210, 235, 248, 0.42); color: var(--text);
  font-weight: 600; font-size: 0.95rem;
  transition: background-size 0.5s var(--ease-out), color 0.4s var(--ease-out),
              border-color 0.35s var(--ease-out), transform 0.35s var(--ease-out);
}
.pg-foot-cta:hover, .pg-foot-cta:focus-visible {
  background-size: 100% 100%; color: #04121c;
  border-color: rgba(236, 231, 255, 0.85); transform: translateY(-2px); outline: none;
}
.pg-foot-cta .arrow { transition: transform 0.35s var(--ease-out); }
.pg-foot-cta:hover .arrow { transform: translateX(5px); }

/* ---------- reveal-on-scroll ---------- */
.reveal {
  opacity: 0; transform: translateY(26px);
  transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
}
.reveal.is-in { opacity: 1; transform: none; }

/* ---------- responsive ---------- */
@media (max-width: 820px) {
  .work { grid-template-columns: 1fr; gap: clamp(48px, 9vw, 64px); }
  .work-desc, .pg-intro { max-width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .work-media img, .work-row:hover .work-media img { transform: none; transition: none; }
}

/* card border glow: traveling ice light on the media frames (shared signature) */
.work-media { transition: transform .35s var(--ease-out, ease), border-color .35s ease; }
.work-row:hover .work-media { transform: translateY(-3px); border-color: rgba(210, 235, 248, 0.38); }
.card-trace { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; z-index: 3; }
.card-trace rect { fill: none; stroke: rgba(191, 224, 245, 0.55); stroke-width: 1.2;
  stroke-dasharray: 20 80; opacity: 0.35;
  filter: drop-shadow(0 0 5px rgba(185, 225, 248, 0.5));
  transition: opacity .4s ease, filter .4s ease; }
.work-row:hover .card-trace rect {
  opacity: 1; filter: drop-shadow(0 0 9px rgba(185, 225, 248, 0.9)) drop-shadow(0 0 26px rgba(185, 225, 248, 0.35)); }
@media (prefers-reduced-motion: reduce) { .card-trace rect { stroke-dasharray: none; opacity: 0; } .work-row:hover .card-trace rect { opacity: 0.6; } }