/**
 * Shimmer Effect - Wiederverwendbare Utility
 * 
 * Anwendung:
 * 1. Klasse .has-shimmer auf Element setzen, ODER
 * 2. Selektor unten in "AUTOMATISCHE ANWENDUNG" eintragen
 * 
 * Voraussetzung: Element braucht position: relative + overflow: hidden
 * 
 * @package Abisko Werkstatt
 * @version 1.1.0
 * @build "Relative Color Shimmer"
 * @changed 2026-02-17
 */


/* ========================================
   KONFIGURATION
   Hier alle Werte zentral anpassen
   ======================================== */

:root {
  --shimmer-angle: 8deg;           /* Neigung des Streifens */
  --shimmer-opacity: 0.75;         /* Helligkeit (0-1) */
  --shimmer-width-start: 45%;      /* Streifen-Start (Position) */
  --shimmer-width-end: 55%;        /* Streifen-Ende (Position) */
  --shimmer-duration: 0.4s;        /* Animations-Dauer */
  --shimmer-delay: 0.3s;           /* Verzögerung nach Hover */
  --shimmer-easing: ease-in;       /* Animations-Kurve */
  --shimmer-lightness-boost: 0.55; /* Wie viel heller (OKLCH L +0.55, max wäre ~0.7) */
}


/* ========================================
   KEYFRAMES
   ======================================== */

@keyframes shimmer {
  0% {
    transform: translateY(0);
    opacity: 1;
  }
  100% {
    transform: translateY(-150%);
    opacity: 0;
  }
}


/* ========================================
   BASIS-KLASSE
   ======================================== */

/**
 * .has-shimmer - Utility-Klasse
 * Element braucht: position: relative; overflow: hidden;
 * Nutzt weiß als Fallback
 */
.has-shimmer {
  position: relative;
  overflow: hidden;
}

.has-shimmer::after {
  content: '';
  position: absolute;
  top: 100%;
  left: -50%;
  width: 200%;
  height: 200%;
  pointer-events: none;
  opacity: 0;
  transform: translateY(0);
  
  background: linear-gradient(
    var(--shimmer-angle),
    transparent var(--shimmer-width-start),
    rgba(255, 255, 255, var(--shimmer-opacity)) 50%,
    transparent var(--shimmer-width-end)
  );
}

.has-shimmer:hover::after {
  animation: shimmer var(--shimmer-duration) var(--shimmer-easing) var(--shimmer-delay) forwards;
}


/* ========================================
   AUTOMATISCHE ANWENDUNG
   Elemente die Shimmer bekommen ohne Klasse
   ======================================== */

/**
 * Navigation Top-Level Links
 * 
 * RELATIVE COLOR SYNTAX:
 * oklch(from [base-color] calc(l + 0.3) c h / 0.75)
 * → nimmt die Hover-Hintergrundfarbe und erhöht Lightness um 0.3
 * → Shimmer passt sich automatisch an die Theme-Farbe an
 */
.wp-block-navigation-item > a {
  position: relative;
  overflow: hidden;
}

.wp-block-navigation-item > a::after {
  content: '';
  position: absolute;
  top: 100%;
  left: -50%;
  width: 200%;
  height: 200%;
  pointer-events: none;
  opacity: 0;
  transform: translateY(0);
  
  /* Relative Color: Hover-BG aufgehellt */
  background: linear-gradient(
    var(--shimmer-angle),
    transparent var(--shimmer-width-start),
    oklch(from var(--wp--preset--color--foreground) calc(l + var(--shimmer-lightness-boost)) c h / var(--shimmer-opacity)) 50%,
    transparent var(--shimmer-width-end)
  );
}

.wp-block-navigation-item > a:hover::after {
  animation: shimmer var(--shimmer-duration) var(--shimmer-easing) var(--shimmer-delay) forwards;
}

/* Kein Shimmer auf Submenu-Items */
.wp-block-navigation__submenu-container .wp-block-navigation-item a::after {
  display: none;
}


/**
 * Post-Titel H1 (Artikel + Seiten)
 * 
 * Kein Hover-Hintergrund → nutzt weiß
 * (alternativ könnte man Textfarbe aufhellen)
 */
.single .entry-title,
.single .wp-block-post-title,
.page .entry-title,
.page .wp-block-post-title {
  position: relative;
  overflow: hidden;
  display: inline-block;  /* damit overflow wirkt */
}

.single .entry-title::after,
.single .wp-block-post-title::after,
.page .entry-title::after,
.page .wp-block-post-title::after {
  content: '';
  position: absolute;
  top: 100%;
  left: -50%;
  width: 200%;
  height: 200%;
  pointer-events: none;
  opacity: 0;
  transform: translateY(0);
  
  /* Weiß für H1 (kein Hover-Hintergrund vorhanden) */
  background: linear-gradient(
    var(--shimmer-angle),
    transparent var(--shimmer-width-start),
    rgba(255, 255, 255, var(--shimmer-opacity)) 50%,
    transparent var(--shimmer-width-end)
  );
}

.single .entry-title:hover::after,
.single .wp-block-post-title:hover::after,
.page .entry-title:hover::after,
.page .wp-block-post-title:hover::after {
  animation: shimmer var(--shimmer-duration) var(--shimmer-easing) var(--shimmer-delay) forwards;
}