/* ============================================
   Luvo Studios — Stylesheet
   Stil: cleane One-Page-Landingpage
   – großes Logo mittig, Glas-Menü oben rechts,
     Projekt-Laufband unten
   (inspiriert von freshman.agency)
   ============================================ */

/* ----- Reset & Grundlagen ----- */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  /* Farben */
  --bg: #0a0a0a;
  --text: #f4f2ee;
  --text-dim: #9a968e;

  /* Schriften */
  --font-sans: "Archivo", system-ui, sans-serif;
  --font-serif: "Instrument Serif", Georgia, serif;

  /* Abstände */
  --pad: clamp(1.25rem, 3vw, 2.5rem);
}

html,
body {
  height: 100%;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  overflow: hidden; /* One-Pager: kein Scrollen nötig */
  display: flex;
  flex-direction: column;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  cursor: pointer;
}

/* ----- Hintergrund ----- */
/* Platzhalter: dunkler, filmischer Verlauf mit Vignette.
   Wenn du später ein Video einsetzt, liegt es an gleicher Stelle. */
.bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(120% 80% at 70% 20%, #2a2320 0%, transparent 60%),
    radial-gradient(100% 70% at 20% 85%, #1c1a24 0%, transparent 55%),
    linear-gradient(180deg, #131211 0%, #0a0a0a 100%);
}

.bg__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Deckkraft: kleiner = dunkler = mehr Kontrast zum Inhalt */
  opacity: 0.7;
}

/* Vignette: dunkelt die Ränder ab, damit Text überall lesbar ist */
.bg__vignette {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(10, 10, 10, 0.55) 0%, transparent 25%),
    linear-gradient(0deg, rgba(10, 10, 10, 0.75) 0%, transparent 30%),
    radial-gradient(90% 90% at 50% 50%, transparent 55%, rgba(10, 10, 10, 0.5) 100%);
}

/* ----- Header ----- */
.header {
  position: relative;
  z-index: 10;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: var(--pad);
}

.header__logo img {
  height: clamp(28px, 3.5vw, 40px); /* Logo-Größe oben links */
  width: auto;
  display: block;
}

.header__right {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

/* ----- Sprach-Schalter (Glas-Optik) ----- */
.lang__btn {
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  padding: 0.5rem 0.9rem;
  border-radius: 999px;

  background: rgba(255, 255, 255, 0.07);
  backdrop-filter: blur(24px) saturate(140%);
  -webkit-backdrop-filter: blur(24px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, 0.15);
  transition: background 0.3s ease;
}

.lang__btn:hover {
  background: rgba(255, 255, 255, 0.14);
}

/* inaktive Sprache gedimmt, aktive hell */
.lang__btn span {
  opacity: 0.4;
  transition: opacity 0.25s ease;
}

.lang__btn span.is-active {
  opacity: 1;
}

/* ----- Menü (Glas-Optik) ----- */
.menu {
  position: relative;
  text-align: right;
}

.menu__btn {
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.5rem 0.9rem;
  border-radius: 999px;
  transition: background 0.3s ease;
}

.menu__btn:hover {
  background: rgba(255, 255, 255, 0.08);
}

/* Das aufklappbare Panel in Glas-Optik:
   halbtransparent + backdrop-filter = Milchglas-Effekt */
.menu__panel {
  position: absolute;
  top: calc(100% + 0.75rem);
  right: 0;
  min-width: 240px;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  text-align: left;

  background: rgba(255, 255, 255, 0.07);
  backdrop-filter: blur(24px) saturate(140%);
  -webkit-backdrop-filter: blur(24px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45);

  /* zu: unsichtbar + leicht nach oben verschoben */
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity 0.35s ease, transform 0.35s ease, visibility 0.35s;
}

.menu__panel.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.menu__panel a {
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.3;
  color: var(--text);
  transition: opacity 0.25s ease, padding-left 0.25s ease;
}

.menu__panel a:hover {
  opacity: 0.6;
  padding-left: 0.4rem;
}

.menu__panel-footer {
  display: flex;
  gap: 1rem;
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
}

.menu__panel-footer a {
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--text-dim);
}

/* ----- Mitte: großes Logo ----- */
.center {
  position: relative;
  z-index: 5;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 0 var(--pad);
}

.center__logo img {
  width: clamp(280px, 55vw, 720px); /* Größe der Wortmarke in der Mitte */
  height: auto;
  display: block;
  filter: drop-shadow(0 8px 40px rgba(0, 0, 0, 0.45)); /* hebt sie vom Video ab */
}

.center__subline {
  margin-top: 1.25rem;
  font-family: var(--font-serif);
  font-size: clamp(0.9rem, 1.6vw, 1.1rem);
  line-height: 1.5;
  color: var(--text);
  opacity: 0.9;
}

.center__tagline {
  margin-top: 1.25rem;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 0.85rem;
  color: var(--text-dim);
}

/* ----- Standort-Zeile mit Uhr (oben mittig im Header) ----- */
/* Gleiche Schrift wie die Beschreibung unter der Wortmarke
   (Instrument Serif) */
.location {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  gap: 0.75rem;
  white-space: nowrap;
  font-family: var(--font-serif);
  font-size: 0.95rem;
  color: var(--text);
  opacity: 0.9;
}

#clock {
  font-variant-numeric: tabular-nums; /* Ziffern gleich breit → Uhr "springt" nicht */
}

/* ----- Projekt-Laufband unten ----- */
.strip {
  position: relative;
  z-index: 5;
  overflow: hidden;
  padding: 1rem 0 1.25rem;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(10, 10, 10, 0.35);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.strip__track {
  display: flex;
  gap: 3rem;
  width: max-content;
  animation: marquee 35s linear infinite;
}

/* Der Track enthält die Projektliste mehrfach (js/main.js
   dupliziert sie, bis der Bildschirm sicher gefüllt ist) —
   bei -50% ist genau die halbe Strecke durch, dann springt
   die Animation unsichtbar auf den Anfang zurück */
@keyframes marquee {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

.strip__item {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  flex-shrink: 0;
}

.strip__thumb {
  width: 72px;
  aspect-ratio: 16 / 10;
  border-radius: 4px;
  background: var(--img, #222);
  background-size: cover;
  background-position: center;
  transition: transform 0.4s ease;
}

.strip__item:hover .strip__thumb {
  transform: scale(1.08);
}

.strip__text {
  display: flex;
  flex-direction: column;
  line-height: 1.35;
}

.strip__text strong {
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.strip__text em {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 0.85rem;
  color: var(--text-dim);
}

/* ----- Eigener Maus-Cursor (Glas-Kreis) ----- */
/* Der echte Cursor wird versteckt, ein Glas-Kreis folgt
   der Maus (Position setzt js/main.js). Auf Touch-Geräten
   ohne Maus bleibt alles beim Standard. */
@media (hover: hover) and (pointer: fine) {
  body {
    cursor: none;
  }

  a,
  button {
    cursor: none;
  }
}

.cursor {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
  width: 36px;
  height: 36px;
  margin: -18px 0 0 -18px; /* zentriert den Kreis auf der Mausspitze */
  border-radius: 50%;
  pointer-events: none; /* Klicks gehen durch den Kreis hindurch */

  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(6px) saturate(150%);
  -webkit-backdrop-filter: blur(6px) saturate(150%);
  border: 1px solid rgba(255, 255, 255, 0.35);
  box-shadow: inset 0 0 12px rgba(255, 255, 255, 0.12);

  transition: width 0.25s ease, height 0.25s ease, margin 0.25s ease;
}

/* Über Links/Buttons wird der Kreis größer */
.cursor.is-hover {
  width: 56px;
  height: 56px;
  margin: -28px 0 0 -28px;
}

/* Beim Ziehen an der Dreh-Leiste wird der Kreis ausgeblendet */
.cursor {
  transition: width 0.25s ease, height 0.25s ease, margin 0.25s ease, opacity 0.2s ease;
}

.cursor.is-hidden {
  opacity: 0;
}

/* Auf Touch-Geräten ausblenden */
@media (hover: none), (pointer: coarse) {
  .cursor {
    display: none;
  }
}

/* ============================================
   Works-Seite: 3D-Karussell
   ============================================ */
.works-page {
  background: #111;
}

.carousel {
  position: relative;
  z-index: 5;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Perspektive = wie stark die 3D-Tiefe wirkt */
  perspective: 1400px;
  user-select: none;
  touch-action: pan-y;
}

/* Der Ring hält alle Karten und wird per JS gedreht */
.carousel__ring {
  position: relative;
  width: min(460px, 82vw); /* Karten-Größe */
  height: auto;
  aspect-ratio: 4 / 5;     /* passend zu Bildern in 1080 × 1350 */
  transform-style: preserve-3d; /* Kinder behalten ihre 3D-Position */
}

.card {
  position: absolute;
  inset: 0;
  display: block;
  border-radius: 6px;
  overflow: hidden;
  background: var(--card-bg, #222);
  background-size: cover;
  background-position: center;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55);
  backface-visibility: hidden; /* Rückseite unsichtbar beim Drehen */
}

.card__cat,
.card__year {
  position: absolute;
  top: 0.9rem;
  z-index: 1;
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.card__cat {
  left: 1rem;
}

.card__year {
  right: 1rem;
}

.card__title {
  position: absolute;
  left: 1.25rem;
  right: 1.25rem;
  bottom: 1rem;
  z-index: 1;
  font-size: clamp(2.4rem, 5vw, 3.8rem);
  font-weight: 900;
  line-height: 0.95;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}

/* ----- Dreh-Leiste unten ----- */
.scrub {
  position: relative;
  z-index: 5;
  display: flex;
  justify-content: center;
  /* Abstand nach unten = wie hoch die Leiste sitzt */
  padding: 0 var(--pad) clamp(3.5rem, 9vh, 6rem);
}

.scrub__track {
  position: relative;
  width: min(320px, 70vw);
  height: 22px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.18);
}

/* Der Griff, den man zieht */
.scrub__handle {
  position: absolute;
  top: 50%;
  left: 0;
  width: 48px;
  height: 14px;
  margin-top: -7px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.85);
  transition: background 0.25s ease;
}

.scrub__track:hover .scrub__handle {
  background: #fff;
}

/* ============================================
   Projekt-Detailseite: horizontale Slideshow
   ============================================ */
.project-page {
  background: #0a0a0a;
}

.gallery {
  position: relative;
  z-index: 5;
  flex: 1;
  display: flex;
  align-items: center;
  gap: 0.75rem; /* kleiner Freiraum zwischen den Slides */
  padding: 0 var(--pad);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none; /* Scrollbalken ausblenden (Firefox) */
}

.gallery::-webkit-scrollbar {
  display: none; /* Scrollbalken ausblenden (Chrome/Safari) */
}

.slide {
  position: relative;
  flex: 0 0 auto;
  height: min(56vh, 560px); /* etwas kleiner, damit der Titel oben Platz hat */
  aspect-ratio: 4 / 5;      /* passend zu Bildern in 1080 × 1350 */
  background: var(--img, #222);
  background-size: cover;
  background-position: center;
  transition: transform 0.4s ease;
}

/* Breite Slides für Querformat-Bilder (2560 × 1440) */
.slide--wide {
  aspect-ratio: 16 / 9;
}

.slide:hover {
  transform: scale(0.99);
}

/* kleine Bildunterschrift oben links im Bild */
.slide figcaption {
  position: absolute;
  top: 0.8rem;
  left: 0.9rem;
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.5;
  opacity: 0.9;
}

/* Der große Projektname über der Slideshow */
.project-title {
  position: relative;
  z-index: 5;
  text-align: center;                    /* mittig */
  padding: clamp(2rem, 6vh, 4rem) var(--pad) 0; /* Abstand nach oben = tiefer gesetzt */
  font-size: clamp(2.2rem, 5.5vw, 4.5rem);
  font-weight: 900;
  font-style: italic;
  line-height: 0.95;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}

/* ----- Untere Infoleiste ----- */
.project-bar {
  position: relative;
  z-index: 5;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.25rem var(--pad);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.project-bar a {
  transition: color 0.25s ease;
}

.project-bar a:hover {
  color: var(--text);
}

/* ----- Lightbox (vergrößerte Ansicht) ----- */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  background: rgba(5, 5, 5, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);

  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s ease, visibility 0.35s;
}

.lightbox.is-open {
  opacity: 1;
  visibility: visible;
}

.lightbox__img {
  width: min(86vw, 1100px);
  height: min(82vh, 900px);
  /* das Bild setzt js/project.js beim Öffnen als background-image */
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  /* Bild "wächst" beim Öffnen leicht heran */
  transform: scale(0.96);
  transition: transform 0.35s ease;
}

.lightbox.is-open .lightbox__img {
  transform: scale(1);
}

.lightbox__hint {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 0.85rem;
  color: var(--text-dim);
}

/* ============================================
   About-Seite
   ============================================ */
.about-page {
  background: #0a0a0a;
}

.about-wrap {
  position: relative;
  z-index: 5;
  flex: 1;
  overflow-y: auto; /* falls der Text mal länger wird */
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0 var(--pad) 3rem;
}

/* Großes Serifen-Statement */
.about-lead {
  margin-top: clamp(2rem, 5vh, 3.5rem);
  max-width: 22ch;
  font-family: var(--font-serif);
  font-size: clamp(1.6rem, 3.2vw, 2.6rem);
  line-height: 1.3;
}

/* Fließtext */
.about-text {
  margin-top: clamp(2rem, 5vh, 3.5rem);
  max-width: 58ch;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  font-size: 0.95rem;
  line-height: 1.7;
  color: rgba(244, 242, 238, 0.88); /* heller für bessere Lesbarkeit auf dem Video */
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.6); /* hebt den Text zusätzlich vom Bild ab */
}

/* Abschluss-Zeile (Serif, kursiv) */
.about-closing {
  margin-top: clamp(1.5rem, 4vh, 2.5rem);
  max-width: 38ch;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(1.1rem, 2vw, 1.4rem);
  line-height: 1.4;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.6);
}

/* Services-Liste */
.about-services {
  margin-top: clamp(2rem, 5vh, 3.5rem);
}

.about-services__label {
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.about-services ul {
  margin-top: 1rem;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  font-size: 0.95rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.6);
}

/* Kontakt-Zeile */
.about-mail {
  margin-top: clamp(2.5rem, 6vh, 4rem);
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.15rem;
  transition: opacity 0.25s ease;
}

.about-mail:hover {
  opacity: 0.6;
}

/* ============================================
   Responsive: Tablet & Handy
   ============================================ */

/* ----- bis 1024px (Tablets) ----- */
@media (max-width: 1024px) {
  /* Works-Karussell: Karten über Breite UND Höhe begrenzen,
     damit sie nie Header oder Dreh-Leiste überdecken */
  .carousel__ring {
    width: min(400px, 60vw, 40vh);
    height: auto;
    aspect-ratio: 4 / 5;
  }
}

/* ----- bis 760px (Handys, kleine Tablets) ----- */
@media (max-width: 760px) {
  /* Header: Standort-Zeile rutscht in eine eigene Zeile
     unter Logo und Menü, statt mit ihnen zu kollidieren */
  .header {
    flex-wrap: wrap;
    row-gap: 0.6rem;
  }

  .location {
    position: static;
    transform: none;
    order: 3;
    width: 100%;
    justify-content: center;
    font-size: 0.85rem;
  }

  /* Infoleiste der Projektseite: kleiner + Abstand,
     damit die drei Einträge sich nicht berühren */
  .project-bar {
    font-size: 0.6rem;
    gap: 0.75rem;
  }

  /* Menü-Panel nie breiter als der Bildschirm */
  .menu__panel {
    max-width: calc(100vw - 2 * var(--pad));
  }
}

/* ----- bis 640px (Handys) ----- */
@media (max-width: 640px) {
  .center__subline br {
    display: none; /* Zeilenumbruch auf kleinen Screens weglassen */
  }

  .strip__track {
    gap: 2rem;
  }

  /* Works-Karussell: Karten kleiner, damit die vordere
     Karte nicht den ganzen Bildschirm füllt */
  .carousel__ring {
    width: min(460px, 62vw, 40vh);
    height: auto;
    aspect-ratio: 4 / 5;
  }

  .card__title {
    font-size: clamp(1.6rem, 8vw, 2.4rem);
  }
}