/*
Theme Name: Pralaya
Template: twentytwentyfive
Description: Die Marke Pralaya auf Twenty Twenty-Five — Vintage Sci-Fi in der Wueste: Startseite mit Billboard-Hero und Shirt-Galerie, Schriften lokal (Space Grotesk, Inter, IBM Plex Mono, OFL).
Version: 1.1.0
Text Domain: pralaya
*/

/* verwaltet von Pfau (A-044) — markierte Kopie der Tokens aus puff:pfau/tokens/pralaya.css,
 * Beschreibung der Marke: puff:pfau/kb/pralaya-theme.md. Aenderungen an der Marke dort, hier nachziehen.
 * Palette, Schriften, Groessen und Abstaende fuer den Editor stehen in theme.json (abgeleitet aus derselben Datei). */
:root {
  --pr-nachthimmel: #14292b;
  --pr-tiefsee:     #173a3d;
  --pr-pergament:   #ece0c9;
  --pr-terrakotta:  #cf835a;
  --pr-horizont:    #9ec4b6;
  --pr-tuerkis:     #63a892;
  --pr-moos:        #8fa39a;
  --pr-hero-schleier: linear-gradient(180deg, rgba(20,41,43,0) 45%, rgba(20,41,43,.85) 100%);
  --pr-linie:  color-mix(in srgb, #ece0c9 18%, transparent);
  --pr-korn:   .06;
  --pr-font-display: "Space Grotesk", "Inter", ui-sans-serif, system-ui, sans-serif;
  --pr-font-mono:    "IBM Plex Mono", "JetBrains Mono", ui-monospace, monospace;
  --pr-size-mega:  clamp(4.5rem, 14vw, 16rem);
  --pr-size-label: clamp(.7rem, .8vw, .9rem);
  --pr-track-mega:  -.05em;
  --pr-track-label: .14em;
  --pr-leading-mega: .88;
  --pr-rand:   clamp(1rem, 4vw, 4rem);
  --pr-luft:   clamp(4rem, 12vh, 10rem);
  --pr-radius: 2px;
  --pr-ease:     cubic-bezier(.16, 1, .3, 1);
  --pr-dauer:    .9s;
  --pr-parallax: .25;
}

/* ── Hero: Billboard bildschirmfuellend ─────────────────────────────── */
.pr-hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: var(--pr-rand);
  margin: 0;
  isolation: isolate;
}
.pr-hero-bild {
  position: absolute;
  inset: 0;
  z-index: -2;
  margin: 0;
  will-change: transform;
}
.pr-hero-bild picture,
.pr-hero-bild img {
  display: block;
  width: 100%;
  height: 100%;
}
.pr-hero-bild img {
  object-fit: cover;
  object-position: 50% 40%;
}
/* Schleier nach unten */
.pr-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--pr-hero-schleier);
  pointer-events: none;
}
/* Film-Koernung: SVG-Rauschen als Daten-URL, kein Fremd-Host */
.pr-hero::after {
  content: "";
  position: absolute;
  inset: -50%;
  z-index: -1;
  opacity: var(--pr-korn);
  pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='k'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23k)'/></svg>");
  animation: pr-korn 1.2s steps(6) infinite;
}
@keyframes pr-korn {
  0%   { transform: translate(0, 0); }
  50%  { transform: translate(-4%, 3%); }
  100% { transform: translate(3%, -2%); }
}
.pr-hero-titel {
  font-family: var(--pr-font-display);
  font-size: var(--pr-size-mega);
  letter-spacing: var(--pr-track-mega);
  line-height: var(--pr-leading-mega);
  text-transform: uppercase;
  color: var(--pr-pergament);
  margin: 0;
}
.pr-label {
  font-family: var(--pr-font-mono);
  font-size: var(--pr-size-label);
  letter-spacing: var(--pr-track-label);
  text-transform: uppercase;
  color: var(--pr-horizont);
  margin: 0;
}
.pr-hero .wp-block-button__link {
  border-radius: var(--pr-radius);
  background: var(--pr-terrakotta);
  color: var(--pr-nachthimmel);
}

/* ── Zeilenweises Einblenden (nur wenn das Bewegungs-Skript laeuft) ── */
.pr-bewegung .pr-einblenden {
  opacity: 0;
  transform: translateY(.6em);
  transition: opacity var(--pr-dauer) var(--pr-ease), transform var(--pr-dauer) var(--pr-ease);
  transition-delay: calc(var(--pr-zeile, 0) * 120ms);
}
.pr-bewegung .pr-einblenden.ist-sichtbar {
  opacity: 1;
  transform: none;
}

/* ── Galerie: ein bis zwei grosse Kacheln je Zeile ─────────────────── */
.pr-galerie-abschnitt {
  padding: var(--pr-luft) var(--pr-rand);
  border-top: 1px solid var(--pr-linie);
}
.pr-galerie .wc-block-product-template,
.pr-galerie ul.wc-block-product-template {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--pr-rand);
  list-style: none;
  padding: 0;
}
@media (min-width: 782px) {
  .pr-galerie .wc-block-product-template,
  .pr-galerie ul.wc-block-product-template {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.pr-galerie .wc-block-components-product-image img,
.pr-galerie .wc-block-product img {
  width: 100%;
  height: auto;
  border-radius: var(--pr-radius);
  box-shadow: none;
}
.pr-galerie .wp-block-post-title,
.pr-galerie .wc-block-components-product-price {
  font-family: var(--pr-font-mono);
  font-size: var(--pr-size-label);
  letter-spacing: var(--pr-track-label);
  text-transform: uppercase;
  text-align: left;
}
.pr-galerie .wc-block-components-product-price { color: var(--pr-terrakotta); }

/* ── Reduzierte Bewegung: Parallax und Einblenden aus, alles sichtbar ── */
@media (prefers-reduced-motion: reduce) {
  :root { --pr-dauer: 0s; --pr-parallax: 0; }
  .pr-hero-bild { transform: none !important; will-change: auto; }
  .pr-hero::after { animation: none; }
  .pr-bewegung .pr-einblenden,
  .pr-einblenden {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}