/**
 * UNDERDOCK - Hero Section & Follow Cursor Action
 * 
 * Spezifikation:
 * - Hintergrund: UD Green (#229C6C)
 * - Papierstruktur: Liegt ÜBER Slogan & Tags (z-index 3, mix-blend-mode: OVERLAY)
 * - Slogan: hero_slogan_content_driven.png (FILL & linksbündig)
 * - Abstand zwischen Slogan und Tags: Deutlich kleiner (1rem)
 * - Services: Unter dem Slogan in Vina Sans mit '/' Trennern, linksbündig
 * - Follow Cursor: 
 *   - Position: RECHTS OBEN vom Cursor
 *   - Quadratisch 280x280px
 *   - 10px Outline, Shadow, 10px Corner Radius
 *   - Liegt ÜBER der Papierstruktur (z-index 30)
 *   - Bild-Slider: Bilder sind in Tag-Reihenfolge angeordnet und sliden von rechts/links
 *     zur passenden Position beim Wechsel der Wörter
 */

.hero {
  position: relative;
  background-color: var(--ud-green);
  width: 100%;
  aspect-ratio: 1 / 1;
  height: min(100vw, 100vh);
  height: min(100vw, 100dvh);
  max-height: 100vh;
  max-height: 100dvh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start; /* Linksbündig */
  text-align: left;        /* Linksbündig */
  padding: 140px 40px 180px; /* Spezifikation: 140px oben, 180px unten */
  box-sizing: border-box;
  overflow: hidden;
  container-type: inline-size;
}

/* Hero auf Unterseiten (Leistungen & Company): Maximal 90% vH */
.hero--subpage {
  height: min(100vw, 90vh);
  height: min(100vw, 90dvh);
  max-height: 90vh;
  max-height: 90dvh;
}

/* 1. Papierstruktur über Slogan und Tags (z-index 3, Overlay) */
.hero__paper-texture {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: max(2000px, 100%);
  height: 100%;
  background: url('../assets/backgrounds/paperstructure_2500x2500px.webp') no-repeat center top;
  background-size: max(2000px, 100%) auto;
  pointer-events: none; /* Klicks gehen durch */
  user-select: none;
  z-index: 3; /* Liegt ÜBER Slogan & Tags (z-index 2), damit die Textur darauf wirkt */
  mix-blend-mode: overlay; /* Spezifikation: Overlay! */
  opacity: 0.95;
}

/* 2. Hero Inhalt: z-index 2 (unter der Papierstruktur, damit diese auf den Text wirkt) */
.hero__content {
  position: relative;
  z-index: 2;
  width: 100%; /* FILL */
  max-width: none;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  box-sizing: border-box;
}

/* Slogan H1 (Vina Sans, UD Pink, Vertical Trim: Cap Height to Baseline, Line-Height: 0.85em) */
.hero__slogan {
  font-family: var(--font-heading);
  line-height: 0.85em; /* Spezifikation: 0.85em Line-Height bei allen Slogans */
  text-transform: none; /* Überschreibt h1 text-transform: uppercase aus style.css */
  color: var(--ud-pink);
  margin: 0 0 0.4rem 0;
  padding: 0;
  text-align: left;
  letter-spacing: 0;
  -webkit-text-box-trim: trim-both;
  -webkit-text-box-edge: cap alphabetic;
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
}

/* Home: Textfeld 1255px auf 1700px Screen (73.82vw) - längste Zeile "Content driven." Advance 5.572 */
.hero__slogan--home {
  width: calc(1255 / 1700 * 100vw);
  font-size: calc((1255 / 1700 * 100vw) / 5.572);
  margin-bottom: calc(0.4rem + 15px); /* Abstand zwischen Slogan und Tags um 15px vergrößert */
}

/* Leistungen: Textfeld 1468px auf 1700px Screen (86.35vw) - längste Zeile "um deinen Content" Advance 6.494 */
.hero__slogan--leistungen {
  width: calc(1468 / 1700 * 100vw);
  font-size: calc((1468 / 1700 * 100vw) / 6.494);
}

/* Company: Textfeld 1380px auf 1700px Screen (81.18vw) - längste Zeile "dein powerhouse." Advance 6.141 */
.hero__slogan--company {
  width: calc(1380 / 1700 * 100vw);
  font-size: calc((1380 / 1700 * 100vw) / 6.141);
}

.hero__slogan-line {
  display: block;
  white-space: nowrap;
  text-transform: none;
}

.hero__slogan-line--mobile {
  display: none;
}

/* Hero Titel auf Unterseiten (in Vina Sans nach Vorgabe) */
.hero__title {
  font-family: var(--font-heading);
  font-size: 140px;
  line-height: 140px;
  text-transform: uppercase;
  color: var(--ud-white);
  margin: 0;
  letter-spacing: 0.02em;
}

/* Tags Container: nicht größer als 1650px */
.hero__tags-container {
  width: 100%;
  max-width: 1650px;
  box-sizing: border-box;
}

/* Services Liste / Wordcloud (linksbündig) */
.hero__services-cloud {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start; /* Linksbündig */
  align-items: baseline;
  text-align: left;
  gap: 10px 9px; /* Spacing um 5px verringert (14px -> 9px) */
  width: 100%;
  margin: 0;
}

.hero__tag-group {
  display: inline-flex;
  align-items: baseline;
  gap: inherit;
  white-space: nowrap;
}

.hero__service-item {
  font-family: var(--font-heading);
  font-size: 60px; /* Standard Desktop: 60px */
  line-height: 0.8em; /* Spezifikation: 0.8em Line-Height */
  text-transform: uppercase;
  color: rgba(248, 247, 245, 0.55); /* 10% weniger Opacity (von 0.65 auf 0.55) */
  cursor: pointer;
  transition: color 0.18s ease;
  user-select: none;
  position: relative;
}

.hero__service-item:hover {
  color: var(--ud-white);
}

.hero__service-sep {
  font-family: var(--font-heading);
  font-size: 60px; /* Standard Desktop: 60px */
  line-height: 0.8em; /* Spezifikation: 0.8em Line-Height */
  color: rgba(248, 247, 245, 0.4);
  user-select: none;
}

/* ====================================================
   TAGS SCREEN-GRÖSSEN / BREAKPOINTS
   - Screengröße >= 1200px: 60px (Wort/Trenner Gap: 14px, Zeilenabstand: 10px)
   - Screengröße < 1200px:  45px (Wort/Trenner Gap: 10px, Zeilenabstand: 8px)
   - Screengröße < 800px:   30px (Wort/Trenner Gap: 7px, Zeilenabstand: 6px)
   ==================================================== */
@media (max-width: 1199px) {
  .hero {
    padding: clamp(70px, 17.5vw - 70px, 140px) 40px clamp(90px, 22.5vw - 90px, 180px);
  }
  .hero__services-cloud {
    gap: 8px 10px;
  }
  .hero__service-item,
  .hero__service-sep {
    font-size: 45px;
  }
}

@media (max-width: 799px) {
  .hero__paper-texture {
    width: max(1500px, 100%);
    background-size: max(1500px, 100%) auto;
  }

  .hero__services-cloud {
    gap: 6px 7px;
  }
  .hero__service-item,
  .hero__service-sep {
    font-size: 30px;
  }
}

/* Auf mobilen Geräten und Touchscreens: Tags sind reiner Fließtext ohne Hover/Cursor & ohne Follow-Cursor Popup */
@media (max-width: 799px), (hover: none) {
  .hero__service-item {
    cursor: default;
  }
  .hero__service-item:hover {
    color: rgba(248, 247, 245, 0.55);
  }
  .cursor-follow {
    display: none !important;
  }
}

/* ====================================================
   3. FLOATING FOLLOW CURSOR AKTION
   Spezifikation:
   - Rechts oben vom Cursor
   - 280x280px
   - 10px Outline, Shadow, 10px Corner Radius
   - z-index 30 (liegt über der Papierstruktur und dem Header)
   - Slider-Track für nahtloses Rein-Sliden von rechts
   ==================================================== */
.cursor-follow {
  position: fixed;
  top: 0;
  left: 0;
  pointer-events: none;
  user-select: none;
  z-index: 30; /* Liegt über allen Seitenelementen */
  
  width: 280px;
  height: 280px;
  box-sizing: border-box;
  
  /* Start-Status: Unsichtbar */
  opacity: 0;
  visibility: hidden;
  
  /* Position: ZENTRIERT OBEN über dem Cursor (horizontal -50%, vertikal 45px oberhalb) */
  transform: translate(-50%, calc(-100% - 45px)) scale(0.92);
  transition: opacity 0.22s ease, 
              transform 0.22s cubic-bezier(0.16, 1, 0.3, 1),
              visibility 0.22s ease;
  
  /* Styling nach Spezifikation */
  background-color: var(--ud-white);
  outline: 10px solid var(--ud-white);
  border-radius: 10px;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.35);
  overflow: hidden;
  line-height: 0;
}

/* Aktivierter Zustand beim Hover */
.cursor-follow.is-active {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, calc(-100% - 45px)) scale(1);
}

/* Horizontaler Slider-Track für alle 13 Bilder */
.cursor-follow__track {
  display: flex;
  width: calc(280px * 13);
  height: 280px;
  /* Sanfte Slide-Animation beim Wechsel zwischen den Tags */
  transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
  will-change: transform;
}

.cursor-follow__track img {
  width: 280px;
  height: 280px;
  flex-shrink: 0;
  object-fit: cover;
  display: block;
}

/* Mobile Anpassung: horizontales Padding auf 25px, vertikal +30px Mindestabstand oben & unten garantiert */
@media (max-width: 799px) {
  .hero {
    aspect-ratio: auto;
    height: auto;
    min-height: min(100vw, 100vh);
    min-height: min(100vw, 100dvh);
    max-height: none;
    padding: clamp(126px, calc(8.75vw + 70px), 140px) 25px clamp(142px, calc(11.25vw + 70px), 160px);
  }

  .hero--subpage {
    min-height: min(100vw, 90vh);
    min-height: min(100vw, 90dvh);
  }
}

/* Auf schmalen Mobile-Screens (<= 680px): 3-zeiliger Umbruch für Leistungen & Company Hero, läuft breiter */
@media (max-width: 680px) {
  .hero__slogan-line--desktop {
    display: none;
  }

  .hero__slogan-line--mobile {
    display: block;
  }

  .hero__slogan--leistungen {
    width: 100%;
    font-size: calc((100vw - 50px) / 5.65);
  }

  .hero__slogan--company {
    width: 100%;
    font-size: calc((100vw - 50px) / 4.45);
  }
}