/* ============================================================
   home.css — index.html only
   ============================================================ */

/* ============================================================
   hero
   ------------------------------------------------------------
   A dark room with light gathering in it. The lattice and the lit
   modules are the subject matter itself, so the hero works before
   any photography exists — and the real footage drops in behind.
   ============================================================ */
.hero {
  position: relative;
  min-block-size: min(100svh, 900px);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  padding-block-start: calc(68px + var(--sp-7));
  border-block-end: 1px solid var(--line);
}
@media (min-width: 1024px) { .hero { padding-block-start: calc(84px + var(--sp-8)); } }

/* Layer 0 — the eventual video / still. Sits furthest back. */
.hero__media { position: absolute; inset: 0; z-index: 0; }
.hero__media .slot { block-size: 100%; border: 0; border-radius: 0; background: transparent; }
.hero__media .slot::before { opacity: 0.18; }

.hero__media img,
.hero__media video { display: block; inline-size: 100%; block-size: 100%; object-fit: cover; opacity: 0.4; }

/* Layer 1 — the lattice (from base.css) */
.hero .lattice { z-index: 1; }

/* Layer 2 — the lit modules, placed by js/hero.js */
.hero__field { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.pixel {
  position: absolute;
  display: block;
  background: var(--accent);
  opacity: var(--lum, 0.3);
}
.pixel--ignite {
  opacity: 0;
  animation: pixel-ignite 0.9s var(--ease) var(--ignite-delay, 0s) forwards;
}
@keyframes pixel-ignite {
  0%   { opacity: 0;                      transform: scale(0.4); }
  55%  { opacity: calc(var(--lum) * 1.7); transform: scale(1); }
  100% { opacity: var(--lum);             transform: scale(1); }
}

/* Breathers run both: ignite fills forwards until breathe's delay
   elapses, then breathe takes over (last active animation wins on a
   shared property). js/hero.js guarantees breathe-delay starts after
   the sweep has finished, so the two never overlap. */
.pixel--breathe {
  opacity: 0;
  animation:
    pixel-ignite  0.9s var(--ease) var(--ignite-delay, 0s) forwards,
    pixel-breathe var(--breathe-dur, 6s) ease-in-out var(--breathe-delay, 3s) infinite;
}
@keyframes pixel-breathe {
  0%, 100% { opacity: var(--lum); }
  50%      { opacity: calc(var(--lum) * 0.25); }
}

/* Layer 3 — a floor of shadow so type never fights the field */
.hero::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  block-size: 65%;
  z-index: 3;
  background: linear-gradient(to top, var(--bg) 8%, rgba(10, 15, 22, 0.72) 45%, transparent 100%);
  pointer-events: none;
}

.hero__content { position: relative; z-index: 4; padding-block-end: var(--sp-7); }
.hero__title { margin-block-end: var(--sp-5); max-width: 16ch; }
.hero__lead  { max-width: 40ch; }
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
  margin-block-start: var(--sp-6);
}

/* ---- the plinth: hard numbers the headline stands on ---- */
.hero__plinth {
  position: relative;
  z-index: 4;
  border-block-start: 1px solid var(--line);
  padding-block: var(--sp-5);
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-5) var(--sp-4);
}
@media (min-width: 768px)  { .hero__plinth { grid-template-columns: repeat(4, 1fr); gap: var(--sp-6); } }
.hero__plinth .spec__value { font-size: clamp(1.5rem, 1rem + 1.8vw, 2.25rem); }

/* ============================================================
   the two disciplines
   ------------------------------------------------------------
   Mediasystem's own framing, carried over from German:
   "medientechnische Pflicht" and "audiovisuelle Kür" — what must
   be right, and what makes it memorable.
   ============================================================ */
.disc__grid { display: grid; gap: var(--sp-8); }
@media (min-width: 900px) {
  .disc__grid { grid-template-columns: 1fr 1fr; gap: 0; }
  .disc__col + .disc__col {
    border-inline-start: 1px solid var(--line);
    padding-inline-start: var(--sp-8);
    margin-inline-start: var(--sp-8);
  }
}
.disc__kicker {
  font-family: var(--font-mono);
  font-size: var(--step-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-block: var(--sp-3) var(--sp-5);
}
.disc__body { color: var(--muted); max-width: 44ch; }
.disc__list { margin-block-start: var(--sp-6); display: flex; flex-direction: column; }
.disc__list li {
  display: flex;
  gap: var(--sp-4);
  align-items: baseline;
  padding-block: var(--sp-3);
  border-block-start: 1px solid var(--line);
  font-size: var(--step-sm);
}
.disc__list li::before {
  content: "";
  inline-size: 6px;
  block-size: 6px;
  background: var(--accent);
  flex: none;
  transform: translateY(-2px);
}

/* ============================================================
   capabilities — four verticals, 2 x 2
   ============================================================ */
.cap__grid { display: grid; gap: var(--sp-5); margin-block-start: var(--sp-7); }
@media (min-width: 720px) { .cap__grid { grid-template-columns: 1fr 1fr; gap: var(--sp-6); } }

.cap {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  text-decoration: none;
  color: var(--text);
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.cap:hover { border-color: var(--accent); background: var(--surface-2); color: var(--text); }
.cap:focus-visible { outline-offset: 2px; }

.cap__media { position: relative; }
.cap__media .slot { border: 0; border-radius: 0; }
.cap__media .slot::before { transition: opacity var(--dur) var(--ease); }
.cap:hover .cap__media .slot::before { opacity: 0.9; }

.cap__img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.cap__body { padding: var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-3); flex: 1; }
@media (min-width: 720px) { .cap__body { padding: var(--sp-6); } }
.cap__label {
  font-family: var(--font-mono);
  font-size: var(--step-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-hi);
}
.cap__desc { color: var(--muted); font-size: var(--step-sm); flex: 1; }
.cap__more {
  font-family: var(--font-mono);
  font-size: var(--step-xs);
  letter-spacing: 0.08em;
  color: var(--text);
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  margin-block-start: var(--sp-2);
}
.cap__more span { transition: transform var(--dur) var(--ease); }
.cap:hover .cap__more span { transform: translateX(4px); }
@media (prefers-reduced-motion: reduce) { .cap__more span { transition: none; } .cap:hover .cap__more span { transform: none; } }

/* ============================================================
   selected projects — one lead, two supporting
   ============================================================ */
.proj__head {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: space-between;
  gap: var(--sp-5);
  margin-block-end: var(--sp-7);
}
.proj__grid { display: grid; gap: var(--sp-6); }
@media (min-width: 900px) {
  .proj__grid { grid-template-columns: 1.35fr 1fr; grid-template-rows: auto auto; gap: var(--sp-6); }
  .proj--lead { grid-row: span 2; }
}

.proj {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  text-decoration: none;
  color: var(--text);
}
.proj__media { position: relative; overflow: hidden; border-radius: var(--radius); aspect-ratio: 16 / 9; }
.proj--lead .proj__media { aspect-ratio: 4 / 3; }

.proj__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  inset: 0;
}
.proj__meta {
  font-family: var(--font-mono);
  font-size: var(--step-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent-hi);
}
.proj__title { font-size: var(--step-m); }
.proj--lead .proj__title { font-size: var(--step-l); }
.proj__note { color: var(--muted); font-size: var(--step-sm); max-width: 46ch; }
.proj:hover .proj__title { color: var(--accent-hi); }

/* ============================================================
   partners — set as type, not as a strip of borrowed logos
   ============================================================ */
.partners__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  border-block-start: 1px solid var(--line);
  border-inline-start: 1px solid var(--line);
  margin-block-start: var(--sp-7);
}
@media (min-width: 640px)  { .partners__grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .partners__grid { grid-template-columns: repeat(5, 1fr); } }

.partners__item {
  border-block-end: 1px solid var(--line);
  border-inline-end: 1px solid var(--line);
  padding: var(--sp-5) var(--sp-4);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  min-block-size: 108px;
  justify-content: center;
}
.partners__name {
  font-family: var(--font-display);
  font-stretch: 104%;
  font-weight: 600;
  font-size: var(--step-sm);
  letter-spacing: 0.01em;
}
.partners__role {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

.certs {
  margin-block-start: var(--sp-7);
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  align-items: center;
}
.certs__label {
  font-family: var(--font-mono);
  font-size: var(--step-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-inline-end: var(--sp-2);
}
.cert {
  font-family: var(--font-mono);
  font-size: var(--step-xs);
  letter-spacing: 0.06em;
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  color: var(--text);
}

/* ============================================================
   why Austrian engineering in the Gulf
   ============================================================ */
.why__grid { display: grid; gap: var(--sp-7); }
@media (min-width: 900px) { .why__grid { grid-template-columns: 1fr 1fr; gap: var(--sp-9); align-items: start; } }
.why__points { display: flex; flex-direction: column; }
.why__point {
  padding-block: var(--sp-5);
  border-block-start: 1px solid var(--line);
  display: grid;
  gap: var(--sp-2);
}
.why__point:last-child { border-block-end: 1px solid var(--line); }
.why__point h3 { font-size: var(--step-m); font-stretch: 100%; }
.why__point p { color: var(--muted); font-size: var(--step-sm); }