/* pelera — Komponenten */

/* ---------- Wortmarke ----------
   Als Maske geladen: nimmt currentColor an und muss nicht in jede Seite
   kopiert werden. */

.wordmark {
  display: block;
}

.wordmark__glyph {
  display: block;
  height: 100%;
  aspect-ratio: 2162.9 / 974.18;
  background-color: currentColor;
  -webkit-mask: url('../assets/pelera-wordmark.svg') no-repeat center / contain;
  mask: url('../assets/pelera-wordmark.svg') no-repeat center / contain;
}

.site-head .wordmark {
  height: clamp(20px, 2.6vw, 26px);
}

.hero .wordmark {
  height: var(--fs-mark);
}

.site-foot .wordmark {
  height: clamp(56px, 11vw, 132px);
}

/* ---------- Geschmolzenes Feld ----------
   Drei weiche Lichtquellen, die per transform driften. Transform ist
   compositor-seitig, deshalb kostet die Dauerbewegung praktisch nichts. */

/* Der Basisverlauf liegt hier und nicht auf der Sektion: mix-blend-mode
   mischt nur innerhalb des eigenen Stacking-Kontexts. Läge der Verlauf
   darunter, blendeten die Lichtquellen gegen Transparenz und wirkten flau. */
.molten {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  background: var(--grad-crust);
}

/* screen-Blending lässt die Lichtquellen leuchten statt sich zu Braun zu
   überlagern — deckende Verläufe übereinander ergeben Matsch. */
.molten__glow {
  position: absolute;
  mix-blend-mode: screen;
  will-change: transform;
}

/* Die drei Quellen überlappen bewusst zu einer fließenden Masse an der
   rechten Kante — drei getrennte Kreise läsen sich als Deko. */
.molten__glow--a {
  width: 74vw;
  aspect-ratio: 1.15;
  right: -20%;
  top: -34%;
  background: radial-gradient(
    closest-side,
    var(--c-flame) 0%,
    rgba(217, 100, 31, 0.6) 36%,
    rgba(217, 100, 31, 0) 74%
  );
  opacity: 0.95;
  animation: drift-a 27s var(--ease-soft) infinite alternate;
}

.molten__glow--b {
  width: 40vw;
  aspect-ratio: 1;
  right: 4%;
  top: 6%;
  background: radial-gradient(
    closest-side,
    var(--c-amber) 0%,
    rgba(233, 162, 39, 0.5) 34%,
    rgba(233, 162, 39, 0) 70%
  );
  opacity: 0.85;
  animation: drift-b 34s var(--ease-soft) infinite alternate;
}

.molten__glow--c {
  width: 70vw;
  aspect-ratio: 1.3;
  right: -26%;
  bottom: -42%;
  background: radial-gradient(
    closest-side,
    var(--c-ember) 0%,
    rgba(185, 59, 27, 0.55) 38%,
    rgba(185, 59, 27, 0) 76%
  );
  opacity: 0.8;
  animation: drift-c 41s var(--ease-soft) infinite alternate;
}

/* Auf schmalen Viewports sind vw-Breiten absolut klein — ohne Vergrößerung
   bliebe von der Glut ein Punkt statt eines Feldes. */
@media (max-width: 899px) {
  .molten__glow--a {
    width: 135vw;
    right: -32%;
    top: -16%;
  }

  .molten__glow--b {
    width: 88vw;
    right: -12%;
    top: 10%;
  }

  .molten__glow--c {
    width: 125vw;
    right: -40%;
    bottom: -22%;
  }

  .molten__veil {
    background: linear-gradient(
      168deg,
      rgba(15, 2, 3, 0.5) 0%,
      rgba(15, 2, 3, 0.72) 46%,
      rgba(15, 2, 3, 0.92) 100%
    );
  }
}

@keyframes drift-a {
  to {
    transform: translate3d(-9%, 12%, 0) scale(1.16);
  }
}

@keyframes drift-b {
  to {
    transform: translate3d(-14%, -8%, 0) scale(0.88);
  }
}

@keyframes drift-c {
  to {
    transform: translate3d(16%, -10%, 0) scale(1.12);
  }
}

/* Schleier über dem Feld: sichert den Kontrast dort, wo Text steht, und
   lässt die Glut an der freien Seite stehen. */
.molten__veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    100deg,
    rgba(15, 2, 3, 0.94) 0%,
    rgba(15, 2, 3, 0.82) 30%,
    rgba(15, 2, 3, 0.52) 58%,
    rgba(15, 2, 3, 0.16) 80%,
    rgba(15, 2, 3, 0) 94%
  );
}

/* Textspalten enden vor der hellen Zone. Über der vollen Glut fiele Creme
   unter 4.5:1 — die Begrenzung sichert den Kontrast, ohne den Verlauf
   abzudunkeln. */
@media (min-width: 900px) {
  .hero__statement,
  .case-hero__title,
  .case-hero .lead {
    max-width: min(20ch, 60%);
  }

  .case-hero__title {
    max-width: min(15ch, 62%);
  }
}

/* ---------- Kopfzeile ---------- */

.site-head {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  color: var(--c-cream);
  transition: transform 0.45s var(--ease-soft), background-color 0.35s linear,
    color 0.35s linear;
}

.site-head[data-context='cream'] {
  color: var(--c-void);
}

.site-head[data-pinned='true'] {
  background: rgba(36, 5, 6, 0.82);
  backdrop-filter: blur(14px);
}

.site-head[data-pinned='true'][data-context='cream'] {
  background: rgba(245, 234, 215, 0.86);
}

.site-head[data-hidden='true'] {
  transform: translateY(-100%);
}

.site-head__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gutter);
  width: min(100% - var(--gutter) * 2, var(--maxw));
  margin-inline: auto;
  padding-block: clamp(1rem, 2vw, 1.4rem);
}

.nav {
  display: none;
  align-items: center;
  gap: clamp(1.5rem, 2.6vw, 2.75rem);
  font-size: var(--fs-meta);
  font-weight: 500;
}

@media (min-width: 860px) {
  .nav {
    display: flex;
  }
}

.nav a {
  position: relative;
  padding-block: 0.3rem;
}

.nav a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background: var(--c-flame);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.32s var(--ease-out);
}

.nav a:hover::after,
.nav a:focus-visible::after,
.nav a[aria-current='page']::after {
  transform: scaleX(1);
}

/* ---------- Mobiles Menü ---------- */

.nav-toggle {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 0;
  font-size: var(--fs-meta);
  font-weight: 500;
}

@media (min-width: 860px) {
  .nav-toggle {
    display: none;
  }
}

.nav-toggle__bars {
  display: grid;
  gap: 4px;
  width: 20px;
}

.nav-toggle__bars span {
  height: 2px;
  background: currentColor;
}

.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 150;
  display: grid;
  align-content: center;
  gap: 0.35rem;
  padding: var(--gutter);
  background: var(--grad-crust);
  color: var(--c-cream);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s var(--ease-soft);
}

.mobile-menu[data-open='true'] {
  opacity: 1;
  pointer-events: auto;
}

.mobile-menu a {
  font-family: var(--font-mark);
  font-size: clamp(2.25rem, 12vw, 4.5rem);
  line-height: 1.12;
}

.mobile-menu a:hover,
.mobile-menu a:focus-visible {
  color: var(--c-gold);
}

.mobile-menu__close {
  position: absolute;
  top: clamp(1rem, 2vw, 1.4rem);
  right: var(--gutter);
  font-size: var(--fs-meta);
  font-weight: 500;
}

.mobile-menu__meta {
  margin-top: 2.5rem;
  color: var(--c-cream-dim);
  font-size: var(--fs-meta);
}

/* ---------- Hero ---------- */

.hero {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 100svh;
  padding-block: clamp(7rem, 13vw, 10rem) clamp(3rem, 6vw, 5rem);
  overflow: hidden;
  background: var(--grad-crust);
  text-align: center;
}

/* Shader liegt über dem CSS-Feld und verdeckt es, sobald WebGL läuft.
   Fällt WebGL aus, bleibt das Feld darunter sichtbar. */
.mesh {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  display: block;
}

.mesh--lost {
  opacity: 0;
}

/* Sichert den Kontrast in der Bildmitte, wo der Text steht. */
.mesh__veil {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    radial-gradient(60% 50% at 50% 55%, rgba(12, 2, 3, 0.78) 0%, rgba(12, 2, 3, 0.54) 70%, rgba(12, 2, 3, 0) 100%),
    linear-gradient(180deg, rgba(12, 2, 3, 0.42) 0%, rgba(12, 2, 3, 0) 30%, rgba(12, 2, 3, 0.45) 100%);
}

.hero__inner {
  position: relative;
  z-index: 3;
  display: grid;
  justify-items: center;
}

.hero__mark {
  color: var(--c-cream);
}

.hero__statement {
  max-width: 24ch;
  margin-top: clamp(1.5rem, 3.5vw, 2.5rem);
  font-size: var(--fs-statement);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: var(--ls-tight);
  text-wrap: balance;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.875rem 1.75rem;
  margin-top: clamp(2rem, 4vw, 3rem);
}

/* ---------- Auftritt ----------
   Eine inszenierte Sequenz beim Laden. Die Staffelung läuft über Wörter,
   nicht über Buchstaben: Bei einem deutschen Satz dieser Länge wäre
   Buchstabe für Buchstabe mehrere Sekunden lang und zerlegt die Komposita
   optisch in Einzelteile. */

.hero__mark,
.hero__actions {
  animation: rise 0.9s var(--ease-out) backwards;
}

.hero__mark { animation-delay: 0.1s; }
.hero__actions { animation-delay: 0.62s; }

.word {
  display: inline-block;
  animation: rise 0.62s var(--ease-out) backwards;
  animation-delay: calc(0.3s + var(--i) * 0.055s);
}

@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(22px);
  }
}

/* ---------- Buttons & Links ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  padding: 0.9rem 1.85rem;
  font-size: var(--fs-meta);
  font-weight: 600;
  border-radius: 999px;
  transition: transform 0.28s var(--ease-out), box-shadow 0.28s var(--ease-out),
    background-position 0.5s var(--ease-soft);
}

.btn--heat {
  color: var(--c-void);
  background: var(--grad-heat);
  background-size: 200% 100%;
  background-position: 0% 50%;
}

.btn--heat:hover,
.btn--heat:focus-visible {
  background-position: 100% 50%;
  transform: translateY(-2px);
  box-shadow: 0 10px 32px -10px rgba(217, 100, 31, 0.75);
}

.btn--quiet {
  border: 1px solid var(--line);
  color: var(--fg);
}

.btn--quiet:hover,
.btn--quiet:focus-visible {
  border-color: var(--accent);
  color: var(--accent);
}

.link-inline {
  color: var(--accent);
  font-weight: 500;
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
  transition: opacity 0.24s var(--ease-out);
}

.link-inline:hover,
.link-inline:focus-visible {
  opacity: 0.72;
}

/* ---------- Referenzen ----------
   Ein leiser Streifen echter Kundenlogos, keine eigene Sektion mit vollem
   Rhythmus - er stützt den Hero, verlangt aber keine eigene Aufmerksamkeit.
   Alle Logos laufen als CSS-Maske in einer einzigen Farbe (Creme), damit sie
   als ein zusammengehoeriges Set lesen statt als bunte Fremdkoerper auf dem
   Markenrot. Gedämpft in Ruhe, voll deckend bei Hover auf das
   jeweilige Logo - reagiert auf die Handlung der Person, nicht auf Scrollen. */

.refs {
  position: relative;
  z-index: 2;
  padding-block: clamp(1.5rem, 3vw, 2.25rem);
  border-top: 1px solid var(--c-cream-line);
  border-bottom: 1px solid var(--c-cream-line);
  background: var(--c-void);
}

.refs__row {
  display: flex;
  align-items: center;
  gap: clamp(1.5rem, 4vw, 3rem);
}

@media (max-width: 640px) {
  .refs__row {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
  }

  .refs__viewport {
    width: 100%;
  }
}

.refs__label {
  flex: none;
  max-width: 20ch;
  color: var(--c-cream-dim);
  font-size: var(--fs-meta);
}

.refs__viewport {
  flex: 1;
  overflow: hidden;
  mask-image: linear-gradient(
    90deg,
    transparent 0%,
    #000 6%,
    #000 94%,
    transparent 100%
  );
  -webkit-mask-image: linear-gradient(
    90deg,
    transparent 0%,
    #000 6%,
    #000 94%,
    transparent 100%
  );
}

.refs__track {
  display: flex;
  align-items: center;
  gap: clamp(2.5rem, 6vw, 4.5rem);
  width: max-content;
  /* Läuft von rechts nach links. --refs-set-width (Breite eines einzelnen
     Logo-Satzes in px) und die Kopienzahl kommen von JS, die genau um eine
     Satzbreite verschiebende Animation macht den Uebergang unsichtbar --
     unabhaengig davon, wie viele Kopien noetig waren, um die Spur breiter
     als der Viewport zu machen (siehe main.js). */
  animation: refs-scroll linear infinite;
  animation-duration: var(--refs-duration, 26s);
}

.refs__viewport:hover .refs__track {
  animation-play-state: paused;
}

@keyframes refs-scroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(calc(-1 * var(--refs-set-width, 0px)));
  }
}

.refs__logo {
  flex: none;
  display: block;
  height: clamp(26px, 3.6vw, 40px);
  min-width: 44px;
  background-color: var(--c-cream-dim);
  transition: background-color 0.3s var(--ease-out);
}

.refs__logo:hover {
  background-color: var(--c-cream);
}

.refs__logo--only-pizza {
  aspect-ratio: 3134 / 1838;
  -webkit-mask: url('../assets/logos/only-pizza.png') no-repeat center / contain;
  mask: url('../assets/logos/only-pizza.png') no-repeat center / contain;
}

.refs__logo--myn {
  aspect-ratio: 1250 / 1762;
  -webkit-mask: url('../assets/logos/myn.png') no-repeat center / contain;
  mask: url('../assets/logos/myn.png') no-repeat center / contain;
}

.refs__logo--pizza-unica {
  aspect-ratio: 2000 / 370;
  -webkit-mask: url('../assets/logos/pizza-unica.png') no-repeat center / contain;
  mask: url('../assets/logos/pizza-unica.png') no-repeat center / contain;
}

.refs__logo--prestige,
.refs__logo--sain {
  height: clamp(36px, 5vw, 56px);
}

.refs__logo--prestige {
  aspect-ratio: 1030 / 1279;
  -webkit-mask: url('../assets/logos/prestige.png') no-repeat center / contain;
  mask: url('../assets/logos/prestige.png') no-repeat center / contain;
}

.refs__logo--sain {
  aspect-ratio: 1433 / 728;
  -webkit-mask: url('../assets/logos/sain.png') no-repeat center / contain;
  mask: url('../assets/logos/sain.png') no-repeat center / contain;
}

/* ---------- Leistungen ---------- */

.offer {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--gutter);
  padding-block: clamp(1.75rem, 3.5vw, 2.5rem);
  border-top: 1px solid var(--line);
}

.offer:last-child {
  border-bottom: 1px solid var(--line);
}

.offer__name {
  grid-column: 1 / -1;
}

.offer__text {
  grid-column: 1 / -1;
  color: var(--fg-dim);
  max-width: 54ch;
}

@media (min-width: 900px) {
  .offer__name {
    grid-column: 1 / 5;
  }

  .offer__text {
    grid-column: 6 / 12;
  }
}

/* ---------- Zwei Wege ---------- */

.path h3 {
  margin-bottom: 0.85rem;
}

.path p {
  color: var(--fg-dim);
  margin-bottom: 1.5rem;
  max-width: 42ch;
}

.path--solo {
  max-width: 34rem;
}

/* ---------- Fallstudie ---------- */

.case-hero {
  padding-top: clamp(8rem, 15vw, 13rem);
  overflow: hidden;
}

.case-hero__title {
  max-width: 15ch;
  position: relative;
  z-index: 2;
}

.case-hero .lead {
  position: relative;
  z-index: 2;
  margin-top: 1.5rem;
}

/* ---------- Kontakt ---------- */

.contact-list {
  border-top: 1px solid var(--line);
}

.contact-list a,
.contact-list p {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  padding-block: clamp(1.1rem, 2.2vw, 1.6rem);
  border-bottom: 1px solid var(--line);
}

.contact-list__label {
  color: var(--fg-dim);
  font-size: var(--fs-meta);
}

.contact-list__value {
  font-weight: 700;
  font-size: clamp(1.25rem, 2.4vw, 1.75rem);
  letter-spacing: var(--ls-tight);
}

.contact-list a:hover .contact-list__value,
.contact-list a:focus-visible .contact-list__value {
  color: var(--accent);
}

/* ---------- Fußzeile ---------- */

.site-foot {
  position: relative;
  overflow: hidden;
  padding-block: clamp(3.5rem, 7vw, 5.5rem) clamp(1.5rem, 3vw, 2.5rem);
  background: var(--grad-crust);
  color: var(--c-cream);
  --fg: var(--c-cream);
  --fg-dim: var(--c-cream-dim);
  --line: var(--c-cream-line);
  --accent: var(--c-gold);
}

.site-foot__top {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--gutter);
  align-items: end;
}

.site-foot__mark {
  grid-column: 1 / -1;
}

.site-foot__links {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.75rem;
  font-size: var(--fs-meta);
}

@media (min-width: 900px) {
  .site-foot__mark {
    grid-column: 1 / 7;
  }

  .site-foot__links {
    grid-column: 8 / 13;
    justify-content: flex-end;
  }
}

.site-foot__links a:hover,
.site-foot__bottom a:hover {
  color: var(--c-gold);
}

.site-foot__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-top: clamp(2.5rem, 5vw, 4rem);
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
  color: var(--fg-dim);
  font-size: var(--fs-meta);
}

.social-link {
  display: inline-flex;
  color: inherit;
  transition: color 0.24s;
}

.icon-instagram {
  width: 20px;
  height: 20px;
  display: block;
}

/* ---------- Bewegung reduzieren ---------- */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }

  .molten__glow {
    animation: none;
  }

  .refs__track {
    animation: none;
  }
}