/* Hallmark · macrostructure: Cinematic acts (Vollbild-Hero → alternierende
   Medien-Akte → ruhiger Katalog-Beweis → nummerierte Handlung) · genre:
   atmospheric/editorial · theme: custom (Aurora-Token-Schicht, tokens.css)
   pre-emit critique: P5 H4 E4 S4 R4 V4 · audit 2026-07-24: Eyebrows auf
   3 ordinale Akt-Marker reduziert, Reveals auf Hero + Marken-Mediengrammatik
   begrenzt (Genre-Ausnahme: 3 Akt-Marker statt Cap 2 — echte Kapitel). */
/* ============================================================
   CINEMA — Cinematic Homepage (Phase 4, R-001)
   „Ein Ereignis. Ein Vorgang. Alles verbunden." — als Licht erzählt.
   Vier Akte: Zündung · Drei Kräfte · Beweis · Handlung.
   Grammatik: Licht führt · Rahmen fokussieren · Sword trennt ·
   Northcore verbindet. Dunkelraum ist Bühne, Licht ist Akteur.
   ============================================================ */

/* ---------- Akt 1 · Die Zündung (Hero) ---------- */

.cine-hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  background: var(--bg-deep);
  overflow: hidden;
  isolation: isolate;
}

.cine-hero__stage {
  position: absolute;
  inset: 0;
  z-index: var(--z-field);
}

/* Poster-First: das <picture> ist das LCP-Element (AVIF zuerst).
   Das Video legt sich später darüber und blendet weich ein. */
.cine-hero__poster,
.cine-hero__stage video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cine-hero__stage video {
  opacity: 0;
  transition: opacity var(--t-chapter) var(--ease-light);
}

.cine-hero__stage video.is-playing {
  opacity: 1;
}

/* Aurora-Engine (aurora.js): interaktives Nordlicht, verschmilzt additiv
   mit dem Video. Halb aufgelöst gerendert, CSS skaliert weich hoch. */
.cine-hero__aurora {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  mix-blend-mode: screen;
  pointer-events: none;
}

.cine-hero__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: var(--scrim-hero);
  pointer-events: none;
}

.cine-hero__inner {
  position: relative;
  z-index: var(--z-content);
  padding-bottom: clamp(72px, 12vh, 128px);
  padding-top: calc(var(--nav-h) + 48px);
}

.cine-hero__title {
  max-width: 13ch;
  margin: 18px 0 22px;
}

.cine-hero__title strong {
  color: var(--aurora-bright);
  font-weight: inherit;
}

.cine-hero__lead {
  max-width: 56ch;
  font-size: var(--fs-lead);
  color: var(--text-secondary);
  line-height: var(--lh-body);
  margin-bottom: 34px;
}

.cine-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 18px;
  align-items: center;
}

/* Der Dreiklang als stilles Payoff unter den Aktionen */
.cine-hero__triad {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 28px;
  margin-top: 44px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
  font-size: var(--fs-meta);
  letter-spacing: 0.06em;
  color: var(--text-muted);
}

.cine-hero__triad b {
  font-weight: 600;
  color: var(--text-secondary);
}

.cine-hero__triad [data-force="northcore"] b { color: var(--aurora); }
.cine-hero__triad [data-force="nlf"] b       { color: var(--ignite); }
.cine-hero__triad [data-force="sword"] b     { color: var(--steel); }

.cine-hero__cue {
  position: absolute;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  z-index: var(--z-content);
  font-family: var(--font-mono);
  font-size: var(--fs-meta);
  letter-spacing: 0.14em;
  color: var(--text-muted);
  animation: cue-breathe 4s var(--ease-light) infinite;
}

@keyframes cue-breathe {
  0%, 100% { opacity: 0.45; transform: translateX(-50%) translateY(0); }
  50%      { opacity: 0.9;  transform: translateX(-50%) translateY(6px); }
}

/* ---------- Akt 2 · Drei Kräfte ---------- */

.force {
  position: relative;
  padding: var(--section-pad) 0;
  background: var(--bg-primary);
}

.force + .force {
  padding-top: 0;
}

.force__grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(28px, 4.5vw, 64px);
  align-items: center;
}

.force--flip .force__grid {
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
}

.force--flip .force__media { order: 2; }
.force--flip .force__body  { order: 1; }

.force__media {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: var(--surface-deep);
  border: 1px solid var(--line);
}

.force__media picture,
.force__media img,
.force__media video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.force__media video {
  opacity: 0;
  transition: opacity var(--t-morph) var(--ease-light);
}

.force__media video.is-playing {
  opacity: 1;
}

/* Zustands-Overlay: Die Motion-Grammatik je Marke lebt als AKTIVER Zustand,
   nicht als sichtbare Beschriftung. Spielt das Video (.is-live), hebt sich
   der Scrim und die Lichtkante der Marke wacht auf — Zustand triggert
   Overlay-Veränderung. */
.force__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--scrim-panel);
  opacity: 1;
  transition: opacity var(--t-chapter) var(--ease-light);
  pointer-events: none;
}

.force__media.is-live::after {
  opacity: 0.35;
}

/* Lumen (lumen.js): markenfarbener Lichtkegel folgt dem Zeiger über der
   Medienfläche — über dem Scrim (z 2), unter nichts Klickbarem. */
.force__media::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  opacity: var(--lo, 0);
  background: radial-gradient(
    38% 52% at calc(var(--lx, 50) * 1%) calc(var(--ly, 50) * 1%),
    color-mix(in srgb, var(--force-accent) 26%, transparent),
    transparent 72%
  );
  mix-blend-mode: screen;
  transition: opacity var(--t-comp) var(--ease-light);
  pointer-events: none;
}

.force__media::after {
  z-index: 1;
}

.force__media {
  transition: border-color var(--t-morph) var(--ease-light), box-shadow var(--t-morph) var(--ease-light);
}

.force--northcore .force__media.is-live { box-shadow: var(--glow-aurora); border-color: var(--aurora-dim); }
.force--nlf .force__media.is-live       { box-shadow: var(--glow-ignite); border-color: var(--ignite-dim); }
.force--sword .force__media.is-live     { box-shadow: var(--glow-steel); border-color: var(--steel-dim); }

.force__body h2 {
  margin: 0 0 14px;
}

.force__body .lead {
  color: var(--text-body);
  max-width: 48ch;
}

.force__points {
  list-style: none;
  padding: 0;
  margin: 26px 0 30px;
  display: grid;
  gap: 12px;
}

.force__points li {
  display: flex;
  gap: 12px;
  align-items: baseline;
  font-size: var(--fs-body);
  color: var(--text-secondary);
}

.force__points b {
  font-weight: 600;
  color: var(--text-primary);
}

.force__points li::before {
  content: "";
  flex: 0 0 8px;
  height: 8px;
  border-radius: 50%;
  transform: translateY(-1px);
}

/* Lichtsignaturen: Akzent je Kraft */
.force--northcore { --force-accent: var(--aurora);  --force-dim: var(--aurora-dim); }
.force--nlf       { --force-accent: var(--ignite);  --force-dim: var(--ignite-dim); }
.force--sword     { --force-accent: var(--steel);   --force-dim: var(--steel-dim);  }

.force .force__points li::before { background: var(--force-dim); box-shadow: 0 0 0 1px var(--force-accent) inset; }
.force .force__media { border-color: color-mix(in srgb, var(--force-accent) 24%, transparent); }

/* Reveal-Charaktere — die Grammatik je Marke.
   Northcore: eine Fahrt (weiches Aufgleiten, nichts schneidet). */
.force--northcore .force__media[data-reveal] {
  transform: translateY(28px);
  transition-timing-function: var(--ease-core);
}

/* Northlightframe: Apertur — Licht öffnet den Rahmen. */
.force--nlf .force__media[data-reveal] {
  clip-path: inset(12% 10% 12% 10% round var(--radius-lg));
  transform: none;
  transition: clip-path var(--t-chapter) var(--ease-light), opacity var(--t-chapter) var(--ease-light), border-color var(--t-morph) var(--ease-light), box-shadow var(--t-morph) var(--ease-light);
}

.force--nlf .force__media[data-reveal].is-in {
  clip-path: inset(0 0 0 0 round var(--radius-lg));
}

/* Sword: ein präziser Move — schnelle, gerichtete Kante, dann Ruhe. */
.force--sword .force__media[data-reveal] {
  clip-path: inset(0 100% 0 0);
  transform: none;
  transition: clip-path var(--t-morph) var(--ease-sword), opacity var(--t-micro) linear, border-color var(--t-morph) var(--ease-light), box-shadow var(--t-morph) var(--ease-light);
}

.force--sword .force__media[data-reveal].is-in {
  clip-path: inset(0 0 0 0);
}

/* ---------- Akt 3 · Beweis (Sechs Branchen) ---------- */

.proof {
  padding: var(--section-pad) 0;
  background: var(--bg-secondary);
  border-top: 1px solid var(--line);
}

.proof__head {
  max-width: 62ch;
  margin-bottom: clamp(40px, 6vh, 64px);
}

.proof__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gap-grid);
}

.proof-card {
  display: block;
  padding: 26px 24px 24px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  text-decoration: none;
  color: inherit;
  transition: border-color var(--t-comp) var(--ease-core), transform var(--t-comp) var(--ease-core);
}

.proof-card:hover,
.proof-card:focus-visible {
  border-color: var(--aurora-dim);
  transform: translateY(-3px);
}

/* Lumen auf Beweis-Karten: kaum sichtbarer Aurora-Schein unterm Zeiger —
   die ruhige Sektion bleibt ruhig, das Licht bestätigt nur die Hand. */
.proof-card {
  position: relative;
}

.proof-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--radius-lg);
  opacity: var(--lo, 0);
  background: radial-gradient(
    220px circle at calc(var(--lx, 50) * 1%) calc(var(--ly, 50) * 1%),
    var(--aurora-faint),
    transparent 70%
  );
  transition: opacity var(--t-comp) var(--ease-light);
  pointer-events: none;
}

.proof-card h3 {
  font-size: var(--fs-h3);
  font-family: var(--font-display);
  letter-spacing: -0.01em;
  margin: 0 0 8px;
  color: var(--text-primary);
}

.proof-card p {
  margin: 0 0 16px;
  font-size: var(--fs-body);
  color: var(--text-body);
  line-height: var(--lh-body);
}

.proof-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  font-family: var(--font-mono);
  font-size: var(--fs-meta);
  color: var(--text-muted);
}

/* ---------- Akt 4 · Handlung ---------- */

.cine-cta {
  padding: var(--section-pad) 0;
  background: var(--bg-deep);
  border-top: 1px solid var(--line);
}

.cine-cta__inner {
  max-width: 720px;
}

.cine-cta__steps {
  list-style: none;
  counter-reset: step;
  padding: 0;
  margin: 30px 0 36px;
  display: grid;
  gap: 14px;
}

.cine-cta__steps li {
  counter-increment: step;
  display: flex;
  gap: 16px;
  align-items: baseline;
  color: var(--text-secondary);
}

.cine-cta__steps li::before {
  content: counter(step, decimal-leading-zero);
  font-family: var(--font-mono);
  font-size: var(--fs-meta);
  color: var(--ignite);
}

/* ---------- Geräteklassen & Reduced Motion ---------- */

@media (max-width: 900px) {
  .force__grid,
  .force--flip .force__grid {
    grid-template-columns: 1fr;
  }

  .force--flip .force__media { order: 1; }
  .force--flip .force__body  { order: 2; }

  .proof__grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 900px) and (orientation: portrait) {
  .cine-hero {
    min-height: 88svh;
  }
}

/* Reduced Motion: vollwertige Still-Fassung — Poster tragen die Erzählung,
   keine Fahrten, keine Apertur-/Klingen-Reveals, kein Video (cinema.js lädt keins). */
@media (prefers-reduced-motion: reduce) {
  .cine-hero__stage video,
  .force__media video,
  .cine-hero__aurora,
  .force__media::before,
  .proof-card::after {
    display: none;
  }

  .cine-hero__cue {
    animation: none;
    opacity: 0.6;
  }

  .force--nlf .force__media[data-reveal],
  .force--sword .force__media[data-reveal],
  .force--northcore .force__media[data-reveal] {
    clip-path: none;
    transform: none;
    transition: opacity var(--t-micro) linear;
  }

  .proof-card,
  .proof-card:hover {
    transform: none;
  }
}

/* ---------- Element-Bühne (elements3d.js) ----------
   DaVinci-Plates, lokal in Frames zerlegt, via Three.js additiv
   wieder zusammengesetzt. Poster ist Fallback UND LCP-Anker;
   die Engine blendet es aus, sobald das Objekt lebt. */
.element3d {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

.element3d .element3d__poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: opacity var(--t-comp) var(--ease-light);
}

.element3d.is-live .element3d__poster {
  opacity: 0;
}

.element3d__canvas {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  /* ponytail: ohne pan-y frisst der Canvas mobiles Scrollen über der Bühne */
  touch-action: pan-y;
}

@media (prefers-reduced-motion: reduce) {
  .element3d__canvas { display: none; }
  .element3d.is-live .element3d__poster { opacity: 1; }
}