/* ============================================================
   SMARDEN.CORE — Cinematic Video-Hero
   Primitive: Hero-Shell, Scrim-Layer, Sound-Toggle, Scroll-Cue,
   Nav-Overlay (transparent über Hero, hell beim Scrollen).
   Marken-Tokens kommen aus smarden.css.
   ============================================================ */

/* ---------- Hero shell ---------- */
.hero-v {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  overflow: hidden;
  background: #06070a;
  color: #fff;
  display: flex;
  isolation: isolate;
}
.hero-v__bg { position: absolute; inset: 0; z-index: 0; }
.hero-v__bg video,
.hero-v__bg img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  display: block;
}
/* sanfter Slow-Zoom, damit der Loop nicht statisch wirkt */
.hero-v__bg video { animation: heroDrift 26s var(--ease) infinite alternate; }
@keyframes heroDrift { from { transform: scale(1.02); } to { transform: scale(1.10); } }

.hero-v__scrim { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.hero-v__inner { position: relative; z-index: 2; width: 100%; }

/* ---------- Nav: transparent über dem Hero, hell beim Scrollen ---------- */
.navbar--over {
  position: fixed; left: 0; right: 0; top: 0;
  background: transparent;
  border-bottom-color: transparent;
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
/* Über dem Video: weiße Branding-Farben (Shop-Button .btn ausgenommen) */
.navbar--over .logo-type b { color: #fff; }
.navbar--over .logo-type b span { color: #fff; }
.navbar--over .logo-type small { color: rgba(255,255,255,0.55); }
.navbar--over .nav-links a:not(.btn) { color: rgba(255,255,255,0.80); }
.navbar--over .nav-links a:not(.btn):hover { color: #fff; }
.navbar--over .hamburger span { background: #fff; }
.navbar--over .hamburger.active span { background: var(--ink); }

/* Gescrollt (heller Bereich): zurück zur gewohnten hellen Navbar */
.navbar--over.scrolled {
  background: rgba(244,243,237,0.86);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-bottom-color: var(--line);
}
.navbar--over.scrolled .logo-type b { color: var(--green-700); }
.navbar--over.scrolled .logo-type b span { color: var(--ink); }
.navbar--over.scrolled .logo-type small { color: var(--green-700); }
.navbar--over.scrolled .nav-links a:not(.btn) { color: var(--ink-soft); }
.navbar--over.scrolled .nav-links a:not(.btn):hover,
.navbar--over.scrolled .nav-links a:not(.btn).active { color: var(--ink); }
.navbar--over.scrolled .hamburger span { background: var(--ink); }

/* Mobile: immer solide helle Leiste (markentreu, vermeidet Drawer-/Backdrop-Bugs) */
@media (max-width: 820px) {
  .navbar--over,
  .navbar--over.scrolled {
    background: var(--paper);
    -webkit-backdrop-filter: none; backdrop-filter: none;
    border-bottom-color: var(--line);
  }
  .navbar--over .logo-type b { color: var(--green-700); }
  .navbar--over .logo-type b span { color: var(--ink); }
  .navbar--over .logo-type small { color: var(--green-700); }
  .navbar--over .nav-links a:not(.btn) { color: var(--ink-soft); }
  .navbar--over .nav-links a:not(.btn):hover,
  .navbar--over .nav-links a:not(.btn).active { color: var(--ink); }
  .navbar--over .hamburger span { background: var(--ink); }
}

/* ---------- Sound toggle ---------- */
.sound-toggle {
  display: inline-flex; align-items: center; gap: 11px;
  font-family: var(--font-mono);
  font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: #fff;
  padding: 11px 18px 11px 13px;
  background: rgba(10,12,11,0.42);
  border: 1px solid rgba(255,255,255,0.28);
  border-radius: 50px;
  cursor: pointer;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  transition: background .3s var(--ease), border-color .3s var(--ease), transform .3s var(--ease);
}
.sound-toggle:hover { background: rgba(70,168,43,0.30); border-color: var(--green); transform: translateY(-2px); }
.sound-toggle .ico { width: 18px; height: 18px; flex: none; display: block; }
.sound-toggle .ico-on  { display: none; }
.is-sound-on .sound-toggle .ico-off { display: none; }
.is-sound-on .sound-toggle .ico-on  { display: block; }
.is-sound-on .sound-toggle { border-color: var(--green); background: rgba(70,168,43,0.22); }

/* Pulsiert bis zur ersten Interaktion */
.sound-toggle.hint { animation: soundPulse 2.2s var(--ease) infinite; }
@keyframes soundPulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(70,168,43,0.0); }
  50%     { box-shadow: 0 0 0 8px rgba(70,168,43,0.18); border-color: var(--green); }
}

/* ---------- Scroll cue ---------- */
.scrollcue {
  position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%);
  z-index: 3;
  display: inline-flex; flex-direction: column; align-items: center; gap: 9px;
  font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.32em;
  text-transform: uppercase; color: rgba(255,255,255,0.6);
  text-decoration: none;
}
.scrollcue .bar { width: 1px; height: 42px; background: linear-gradient(rgba(255,255,255,0.0), var(--green-glow)); animation: cueSlide 1.8s var(--ease) infinite; }
@keyframes cueSlide { 0%,100% { opacity: .25; transform: scaleY(.6); transform-origin: top; } 50% { opacity: 1; transform: scaleY(1); } }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .hero-v__bg video { animation: none; }
  .scrollcue .bar { animation: none; }
  .sound-toggle.hint { animation: none; }
}
@media (max-width: 720px) {
  .scrollcue { display: none; }
}