/* ============================================================
   SCREEN WORLD — Demo-Galerie "innerhalb" des Laptop-Bildschirms
   ============================================================ */

.screen-world {
  position: relative;
  /* --work-transition (tokens.css) spans this section's full rendered
     height: eases straight up from black at the very top (matching the
     hero journey's last frame, without holding a flat plateau there —
     see the comment on --work-transition) to a dark anthracite/blue in
     the middle, then back down to black at the bottom (matching the
     outro journey's first frame) — no border, no flat color block. */
  background: var(--work-transition);
  /* Without this, the last benefits row sits flush against the outro
     journey section that follows and reads as clipped. */
  padding-bottom: var(--sp-32);
}

/* Dithers the gradient above with the same fine noise used for
   .journey-grain — at these near-black values, screens quantize a smooth
   CSS gradient into a handful of visible bands, which is exactly what
   reads as a hard "line" cutting across the section rather than a
   continuous fade. This breaks that banding up without changing the
   underlying colors at all. */
.screen-world::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.09;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='90' height='90'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

/* Lifts the actual content above .section-bg-video (z-index:0) — a
   positioned z-index:0 child otherwise paints over static in-flow
   content per CSS stacking rules. */
.screen-world > .container { position: relative; z-index: 1; }

.screen-intro {
  /* Kept tight on purpose: the previous large top gap left a stretch of
     empty screen right after the pinned camera fahrt releases, which
     reads as a dead cut before the gallery content ever appears. */
  padding-top: calc(var(--sp-16) + var(--sp-4));
  text-align: center;
}
.screen-intro .eyebrow { display: block; margin-bottom: var(--sp-3); }
.screen-intro h2 { font-size: var(--fs-h1); max-width: 18ch; margin-inline: auto; }
.screen-intro p { max-width: 56ch; margin: var(--sp-4) auto 0; color: var(--ink-dim); }

/* Filter pills */
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  justify-content: center;
  margin-top: var(--sp-12);
}
.filter-pill {
  padding: 0.55em 1.2em;
  border-radius: var(--radius-pill);
  border: 1px solid var(--line-strong);
  font-size: var(--fs-small);
  color: var(--ink-dim);
  transition: all var(--dur-fast) var(--ease-out);
}
.filter-pill:hover { color: var(--ink); border-color: var(--ink-dim); }
/* .filter-pill's own "transition: all" would otherwise win over .reveal-pop's
   entrance timing (equal specificity, later in cascade) — this combined
   selector restores the slower pop-in while hover/active still snap fast. */
.filter-pill.reveal-pop {
  transition: opacity 0.5s var(--ease-out), transform 0.5s var(--ease-out),
              color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out);
}
.filter-pill.reveal-pop.is-in {
  transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out);
}
.filter-pill.is-active {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
}

/* Project grid */
.project-grid {
  margin-top: var(--sp-16);
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: var(--sp-6);
}

.project-card {
  --mx: 50%;
  --my: 50%;
  position: relative;
  border-radius: var(--radius-m);
  overflow: hidden;
  background: var(--bg-elevated);
  border: 1px solid var(--line);
  cursor: pointer;
  opacity: 0;
  transform: translateY(28px);
  transition: transform 0.6s var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-med) var(--ease-out),
              opacity 0.6s var(--ease-out);
}
.project-card.is-in { opacity: 1; transform: translateY(0); }
.project-card:hover {
  transform: translateY(-6px);
  border-color: rgba(138, 245, 255, 0.35);
  box-shadow: 0 24px 48px -24px rgba(0, 0, 0, 0.6);
  transition-duration: 0.35s;
}
.project-card.is-in:hover { transform: translateY(-6px); }

/* Cursor-tracking spotlight — follows the pointer, screen-blended so it
   reads as a light catching the glass rather than a flat color wash. */
.project-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background: radial-gradient(280px circle at var(--mx) var(--my), rgba(138, 245, 255, 0.16), transparent 70%);
  opacity: 0;
  mix-blend-mode: screen;
  transition: opacity var(--dur-fast) var(--ease-out);
}
.project-card:hover::before { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .project-card { opacity: 1; transform: none; }
}

.project-card.is-featured { grid-column: span 2; }
@media (max-width: 760px) { .project-card.is-featured { grid-column: span 1; } }

.project-media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--bg-elevated-2);
}
.project-card.is-featured .project-media { aspect-ratio: 16 / 9; }

.project-media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform var(--dur-slow) var(--ease-out);
}
.project-card:hover .project-media img { transform: scale(1.05); }

.project-media video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity var(--dur-med) var(--ease-out);
}
.project-card.is-playing .project-media video { opacity: 1; }

.placeholder-badge {
  position: absolute;
  top: var(--sp-3); left: var(--sp-3);
  z-index: 2;
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.35em 0.7em;
  border-radius: var(--radius-pill);
  background: rgba(4,4,8,0.65);
  border: 1px solid var(--line-strong);
  color: var(--ink-dim);
  backdrop-filter: blur(6px);
}

.project-category {
  position: absolute;
  top: var(--sp-3); right: var(--sp-3);
  z-index: 2;
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.35em 0.7em;
  border-radius: var(--radius-pill);
  background: rgba(91,108,255,0.18);
  color: var(--accent-2);
  border: 1px solid rgba(91,108,255,0.3);
}

.project-body { padding: var(--sp-5, 1.25rem) var(--sp-6) var(--sp-6); }
.project-body h3 { font-size: var(--fs-h3); }
.project-body p { margin-top: var(--sp-2); color: var(--ink-dim); font-size: var(--fs-small); }

.project-tech {
  display: flex; flex-wrap: wrap; gap: var(--sp-2);
  margin-top: var(--sp-4);
}
.project-tech span {
  font-size: 0.75rem;
  padding: 0.3em 0.65em;
  border-radius: var(--radius-pill);
  border: 1px solid var(--line);
  color: var(--ink-faint);
}

.project-link {
  margin-top: var(--sp-5, 1.25rem);
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--ink);
}
.project-link svg { width: 14px; height: 14px; transition: transform var(--dur-fast) var(--ease-out); }
.project-card:hover .project-link svg { transform: translate(2px, -2px); }

/* Trust / benefits strip */
.benefits {
  margin-top: var(--sp-32);
}
.benefits-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--sp-6);
}

.benefit-item {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-l);
  background: linear-gradient(160deg, rgba(244, 243, 239, 0.035), transparent 55%), var(--bg-elevated);
  padding: var(--sp-8) var(--sp-6) var(--sp-6);
  opacity: 0;
  transform: translateY(28px);
  transition: transform 0.6s var(--ease-out), opacity 0.6s var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
}
.benefit-item.is-in { opacity: 1; transform: translateY(0); }
.benefit-item:hover { border-color: var(--line-strong); transition-duration: 0.35s; }
.benefit-item.is-in:hover { transform: translateY(-4px); }

@media (prefers-reduced-motion: reduce) {
  .benefit-item { opacity: 1; transform: none; }
}

/* Oversized ghost numeral watermark — the same "01/02/…" language used in
   the nav and hero, scaled up as background texture rather than a label. */
.benefit-item .num {
  position: absolute;
  top: -0.12em;
  right: var(--sp-5);
  z-index: 0;
  font-family: var(--font-display);
  font-size: 4.5rem;
  font-weight: 700;
  line-height: 1;
  color: var(--line-strong);
  pointer-events: none;
  transition: color var(--dur-med) var(--ease-out);
}
.benefit-item:hover .num { color: rgba(138, 245, 255, 0.4); }

.benefit-item h3 { position: relative; z-index: 1; margin-top: var(--sp-3); font-size: 1.15rem; max-width: 22ch; }
.benefit-item p { position: relative; z-index: 1; margin-top: var(--sp-2); color: var(--ink-dim); font-size: var(--fs-small); }

/* Accent underline sweeps in from the left on hover */
.benefit-item::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-med) var(--ease-out);
}
.benefit-item:hover::after { transform: scaleX(1); }

/* Project detail overlay */
.project-overlay {
  position: fixed;
  inset: 0;
  z-index: 900;
  background: rgba(5,5,9,0.9);
  backdrop-filter: blur(10px);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  overflow-y: auto;
  padding: calc(var(--safe-top) + var(--sp-8)) var(--container-pad) calc(var(--safe-bottom) + var(--sp-8));
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-med) var(--ease-out);
}
.project-overlay.is-open { opacity: 1; pointer-events: auto; }
.project-panel {
  width: 100%;
  max-width: 920px;
  background: var(--bg-elevated);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-l);
  overflow: hidden;
  transform: translateY(24px) scale(0.98);
  transition: transform var(--dur-med) var(--ease-out);
}
.project-overlay.is-open .project-panel { transform: translateY(0) scale(1); }
.project-panel-media { aspect-ratio: 16/9; background: var(--bg-elevated-2); }
.project-panel-media img { width: 100%; height: 100%; object-fit: cover; }
.project-panel-body { padding: var(--sp-8); }
.project-panel-close {
  position: absolute;
  top: var(--sp-6); right: var(--sp-6);
  width: 42px; height: 42px;
  border-radius: 50%;
  background: rgba(7,7,11,0.7);
  border: 1px solid var(--line-strong);
  display: flex; align-items: center; justify-content: center;
  z-index: 2;
}