/* =========================================================================
   HyperVision by Erik – Startseite (index.html)
   Ergänzt css/base.css, ändert dort nichts.
   Bewegung: alles hängt an --p (0 → 1), das js/main.js auf der Sticky-Sektion
   setzt. Nichts ist zeitgesteuert, rückwärts scrollen dreht alles zurück.
   ========================================================================= */

/* ---------- Signatur «Render → Real» ---------- */

/* Mit JavaScript startet --p bei 0, bis main.js den ersten Wert schreibt
   (sonst blitzen die Headline-Zeilen beim Laden kurz auf). */
.js .hero { --p: 0; }

.hero {
  /* Wisch-Position 0 → 1: kurzer Halt am Anfang, ab --p .83 ist das Foto ganz da.
     Zeile 1 erscheint bei --p .4 (Wisch ca. 46 %), Zeile 2 bei --p .7 (ca. 84 %). */
  --w: clamp(0, calc((var(--p, 0) - .03) / .8), 1);
}

/* Hochformat (Handy, Tablet hoch): Bild und Text als Gruppe senkrecht zentriert.
   --fs = Grösse der Headline, --hero-text-h = Platz, den der Textblock braucht. */
.hero-stage {
  --fs: min(clamp(2.5rem, calc((100vw - 2 * var(--gutter)) * .13), 6.5rem), 8svh);
  --hero-text-h: calc(2.1 * var(--fs) + 7rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: var(--nav-h);
  /* durchsichtig: Boden und Glühen aus css/motion.css scheinen durch (ohne JS: --bg von html) */
  background: transparent;
}

/* ältere Browser ohne svh: Headline-Grösse aus vh */
@supports not (height: 1svh) {
  .hero-stage { --fs: min(clamp(2.5rem, calc((100vw - 2 * var(--gutter)) * .13), 6.5rem), 8vh); }
}

.hero-media-area {
  display: flex;
  justify-content: center;
  min-height: 0;
}

.hero-media {
  position: relative;
  flex: none;
  /* bis 110 % der Breite: die Kamera (11–89 % des Bildes) bleibt ganz sichtbar */
  width: min(110vw, calc(100vh - var(--nav-h) - var(--hero-text-h)));   /* ältere Browser ohne svh */
  width: min(110vw, calc(100svh - var(--nav-h) - var(--hero-text-h)));
  aspect-ratio: 1;
  overflow: hidden;
  /* Ränder des blauen Hintergrunds weich in --bg auslaufen lassen.
     Die Kamera liegt zwischen 11 und 89 % Breite, sie bleibt unberührt. */
  -webkit-mask-image:
    linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%),
    linear-gradient(180deg, transparent 0, #000 8%, #000 92%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%),
    linear-gradient(180deg, transparent 0, #000 8%, #000 92%, transparent 100%);
  mask-composite: intersect;
}

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

/* Foto-Version liegt oben und ist nur links der Scan-Linie sichtbar */
.hero-img-real {
  clip-path: inset(0 calc(100% - var(--w) * 100%) 0 0);
}

/* Scan-Linie: Verlauf Cyan → Magenta (wie das Drahtgitter im Profilbild) */
.hero-scan {
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(var(--w) * 100%);
  width: 2px;
  margin-left: -1px;
  background: linear-gradient(180deg, var(--cyan), var(--magenta));
  box-shadow:
    0 0 8px 1px rgba(25, 211, 255, .6),
    0 0 26px 3px rgba(255, 79, 208, .3);
  pointer-events: none;
}
/* Schwacher Nachlauf auf der schon gescannten Seite */
.hero-scan::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  right: 2px;
  width: clamp(36px, 9vw, 120px);
  background: linear-gradient(90deg, rgba(25, 211, 255, 0), rgba(25, 211, 255, .14));
}

/* Beschriftung, die an der Linie hängt: links «Foto», rechts «Render» */
.hero-tag {
  position: absolute;
  bottom: 13%;
  padding: .3rem .6rem;
  border-radius: var(--r-pill);
  background: rgba(7, 8, 11, .62);
  color: var(--text);
  font-family: var(--font-mono);
  font-size: .75rem;
  line-height: 1.2;
  letter-spacing: .08em;
  text-transform: uppercase;
  white-space: nowrap;
  pointer-events: none;
}
/* nie näher als 9 % an den Rand (dort blendet die Maske aus, auf dem Handy ist das Bild 110 % breit) */
.hero-tag-real { right: max(calc(100% - var(--w) * 100% + 12px), 9%); }
.hero-tag-render { left: max(calc(var(--w) * 100% + 12px), 9%); }

/* Text unter dem Bild (Handy, Hochformat) */
.hero-text {
  position: relative;
  padding: .75rem var(--gutter) calc(1rem + env(safe-area-inset-bottom));
}

.hero-title { font-size: var(--fs); }
.hero-line { display: block; }

.hero-caption {
  margin-top: 1rem;
  /* 54ch: auf breiten Fenstern zwei statt drei Zeilen (die Sperrung .02em macht jede Zeile breiter als ihre ch-Zahl) */
  max-width: 54ch;
}
/* Umbruch nur zwischen den Teilen, der Punkt bleibt am Zeilenende */
.hero-caption > span { white-space: nowrap; }

/* Hinweis «Scrollen»: liegt, wo später Zeile 1 erscheint, und blendet bis --p .12 aus */
.hero-hint {
  position: absolute;
  top: .75rem;
  left: var(--gutter);
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  min-height: 44px;
  margin: 0;
  color: var(--text-2);
  opacity: calc(1 - clamp(0, var(--p, 0) / .12, 1));
  pointer-events: none;
}
.hero-hint svg { width: 16px; height: 16px; }

/* Querformat (Laptop, Desktop, Tablet quer): Text links, Bild rechts */
@media (min-width: 900px) and (min-aspect-ratio: 5 / 4) {
  .hero-stage {
    display: grid;
    grid-template-areas: "text media";
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: minmax(0, 1fr);
  }
  /* Das Quadrat nimmt höchstens 60 % der Breite und die ganze freie Höhe, der Text den Rest */
  .hero-media-area {
    grid-area: media;
    align-items: center;
  }
  .hero-media {
    width: min(60vw, calc(100vh - var(--nav-h) - 2 * clamp(.5rem, 2vh, 1.5rem)));
    width: min(60vw, calc(100svh - var(--nav-h) - 2 * clamp(.5rem, 2vh, 1.5rem)));
  }
  .hero-text {
    grid-area: text;
    align-self: end;
    container-type: inline-size;
    padding: 0 clamp(1rem, 2vw, 2rem) clamp(2.5rem, 10vh, 6.5rem) max(var(--gutter), calc((100vw - var(--max-wide)) / 2));
  }
  /* «fotografiert.» ist rund 6.6em breit: 13 % der Spaltenbreite passt immer */
  .hero-title {
    font-size: clamp(2.5rem, 4.6vw, 5.5rem);          /* ohne Container-Einheiten */
    font-size: clamp(2.5rem, 13cqi, 6.5rem);
  }
  .hero-hint { top: 0; left: max(var(--gutter), calc((100vw - var(--max-wide)) / 2)); }
}

/* Ohne JavaScript: kein Scroll-Motor → keine leere Strecke, Wisch auf halber Breite */
html:not(.js) .hero.sticky-section { height: auto; }
html:not(.js) .hero .sticky-stage { position: relative; }
html:not(.js) .hero { --w: .5; }
html:not(.js) .hero-hint { display: none; }

/* Bewegung reduzieren: Wisch fest auf 50 %, beide Zeilen sichtbar (base.css), kein Hinweis */
@media (prefers-reduced-motion: reduce) {
  .hero { --w: .5; }
  .hero-hint { display: none; }
}

/* ---------- Kacheln ---------- */
/* Rallye-Audi sitzt in der unteren Bildhälfte: mehr Decke als Boden wegnehmen, das Auto rückt in die Mitte */
.tile-media-fotos img { object-position: 50% 65%; }
/* Video-Poster: oberen Teil mit dem Titel zeigen */
.tile-media-top img { object-position: 50% 12%; }
.tile-media-3d img { object-position: 50% 42%; }

/* Tablet (2 Spalten): die dritte Kachel nimmt die ganze Breite */
@media (min-width: 768px) and (max-width: 1099.98px) {
  .tiles > .tile:last-child { grid-column: 1 / -1; }
  .tiles > .tile:last-child .tile-media { aspect-ratio: 2 / 1; }
}

/* ---------- Neueste Arbeit ---------- */
/* Handy: das Tunnelbild gross, die zwei Details nebeneinander. Ab 768 px drei Spalten. */
.gallery-latest { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.gallery-latest > .gallery-item:first-child { grid-column: 1 / -1; }
/* Gemeinsamer Rahmen 2:3, damit Unterkanten und Bildzeilen auf einer Linie liegen.
   Die drei Hochformate sind 2:2.88 bis 2:3.04: Es fallen höchstens 2 % pro Seite weg
   (IMG_5356 links und rechts, Heckflügel und Frontspoiler bleiben ganz). Die Lightbox zeigt das ganze Bild. */
.gallery-latest .gallery-frame { aspect-ratio: 2 / 3; }
.gallery-latest .gallery-frame img { height: 100%; object-fit: cover; }
@media (min-width: 768px) {
  .gallery-latest { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .gallery-latest > .gallery-item:first-child { grid-column: auto; }
}

.latest-actions { margin-top: clamp(2rem, 5vw, 3rem); gap: .75rem 1.5rem; }