/* Fahrschul-App V14 - public components added in V14 (loaded after style.css and themes.css).
   Brand-coloured social icons, driving hours, creator credit, responsive <picture> hero. */

/* ---------- hero / class tile: <picture> (AVIF + WebP) keeps the image sizing of V13.4 */
.hero__media picture,
.class-tile__media picture {
  display: contents;
}

/* Managed home-hero rotator: only this background layer changes; foreground copy and CTAs keep
   their original stacking and dimensions. The first slide is visible without JavaScript. */
.hero__media[data-hero-rotator] {
  background: var(--c-graphite-800);
  isolation: isolate;
}

.hero__slide {
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0;
  pointer-events: none;
  transform: none;
  clip-path: inset(0);
}

.hero__slide.is-active {
  z-index: 1;
  opacity: 1;
}

.hero__slide.is-leaving {
  z-index: 2;
}

.hero__slide img {
  display: block;
}

.hero__media[data-hero-rotator]::before {
  content: "";
  position: absolute;
  inset: -12%;
  z-index: 3;
  pointer-events: none;
  opacity: 0;
  transform: translateX(-75%) skewX(-12deg);
  background: linear-gradient(105deg, transparent 34%, rgb(255 244 211 / 0.05) 44%, rgb(255 221 145 / 0.3) 50%, rgb(255 249 230 / 0.08) 57%, transparent 67%);
}

.hero__media[data-hero-rotator]::after {
  z-index: 4;
  pointer-events: none;
}

/* One rotator engine, nine GPU-friendly transition profiles. */
[data-rotator-state="running"][data-hero-transition="cinematic-crossfade"] .hero__slide {
  transform: scale(1.025);
  transition: opacity 1200ms ease, transform 1200ms cubic-bezier(0.22, 1, 0.36, 1);
}
[data-rotator-state="running"][data-hero-transition="cinematic-crossfade"] .hero__slide.is-active { transform: scale(1); }
[data-rotator-state="running"][data-hero-transition="cinematic-crossfade"] .hero__slide.is-leaving { transform: scale(1.01); }

[data-rotator-state="running"][data-hero-transition="luxury-glass-wipe"] .hero__slide {
  clip-path: inset(0 100% 0 0);
  transform: scale(1.012);
  transition: clip-path 1350ms cubic-bezier(0.22, 1, 0.36, 1), opacity 800ms ease, transform 1350ms ease;
}
[data-rotator-state="running"][data-hero-transition="luxury-glass-wipe"] .hero__slide.is-active { clip-path: inset(0); transform: scale(1); }
[data-rotator-state="running"][data-hero-transition="luxury-glass-wipe"] .hero__slide.is-leaving { z-index: 0; clip-path: inset(0); opacity: 0; }
[data-hero-transition="luxury-glass-wipe"].is-transitioning::before { animation: hero-light-sweep 1350ms cubic-bezier(0.22, 1, 0.36, 1) both; }

[data-rotator-state="running"][data-hero-transition="soft-focus-morph"] .hero__slide {
  filter: blur(4px);
  transform: scale(1.025);
  transition: opacity 1400ms ease, transform 1400ms cubic-bezier(0.22, 1, 0.36, 1), filter 1400ms ease;
}
[data-rotator-state="running"][data-hero-transition="soft-focus-morph"] .hero__slide.is-active { filter: blur(0); transform: scale(1); }
[data-rotator-state="running"][data-hero-transition="soft-focus-morph"] .hero__slide.is-leaving { filter: blur(2px); transform: scale(0.992); }

[data-rotator-state="running"][data-hero-transition="parallax-slide"] .hero__slide {
  transform: translate3d(4%, 0, 0) scale(1.006);
  transition: opacity 1150ms ease, transform 1150ms cubic-bezier(0.22, 1, 0.36, 1);
}
[data-rotator-state="running"][data-hero-transition="parallax-slide"] .hero__slide.is-active { transform: translate3d(0, 0, 0) scale(1); }
[data-rotator-state="running"][data-hero-transition="parallax-slide"] .hero__slide.is-leaving { transform: translate3d(-2%, 0, 0) scale(0.996); }

[data-rotator-state="running"][data-hero-transition="film-lens-dissolve"] .hero__slide {
  filter: blur(5px) brightness(1.12);
  transform: scale(1.028);
  transition: opacity 1500ms ease, transform 1500ms cubic-bezier(0.22, 1, 0.36, 1), filter 1500ms ease;
}
[data-rotator-state="running"][data-hero-transition="film-lens-dissolve"] .hero__slide.is-active { filter: blur(0) brightness(1); transform: scale(1); }
[data-rotator-state="running"][data-hero-transition="film-lens-dissolve"] .hero__slide.is-leaving { filter: blur(3px) brightness(1.06); transform: scale(0.99); }
[data-hero-transition="film-lens-dissolve"].is-transitioning::before { animation: hero-lens-glow 1500ms ease both; }

[data-rotator-state="running"][data-hero-transition="golden-light-sweep"] .hero__slide {
  transform: scale(1.012);
  transition: opacity 1400ms ease, transform 1400ms cubic-bezier(0.22, 1, 0.36, 1);
}
[data-rotator-state="running"][data-hero-transition="golden-light-sweep"] .hero__slide.is-active { transform: scale(1); }
[data-hero-transition="golden-light-sweep"].is-transitioning::before { animation: hero-light-sweep 1400ms cubic-bezier(0.22, 1, 0.36, 1) both; }

[data-rotator-state="running"][data-hero-transition="silk-vertical-reveal"] .hero__slide {
  clip-path: inset(0 0 100% 0);
  transform: scale(1.012);
  transition: clip-path 1300ms cubic-bezier(0.22, 1, 0.36, 1), opacity 900ms ease, transform 1300ms ease;
}
[data-rotator-state="running"][data-hero-transition="silk-vertical-reveal"] .hero__slide.is-active { clip-path: inset(0); transform: scale(1); }
[data-rotator-state="running"][data-hero-transition="silk-vertical-reveal"] .hero__slide.is-leaving { z-index: 0; clip-path: inset(0); opacity: 0; }

[data-rotator-state="running"][data-hero-transition="depth-zoom-dissolve"] .hero__slide {
  transform: scale(1.035);
  transition: opacity 1350ms ease, transform 1350ms cubic-bezier(0.22, 1, 0.36, 1);
}
[data-rotator-state="running"][data-hero-transition="depth-zoom-dissolve"] .hero__slide.is-active { transform: scale(1); }
[data-rotator-state="running"][data-hero-transition="depth-zoom-dissolve"] .hero__slide.is-leaving { transform: scale(0.975); }

[data-rotator-state="running"][data-hero-transition="split-lens-reveal"] .hero__slide {
  clip-path: inset(0 50% 0 50%);
  transform: scale(1.01);
  transition: clip-path 1300ms cubic-bezier(0.22, 1, 0.36, 1), opacity 850ms ease, transform 1300ms ease;
}
[data-rotator-state="running"][data-hero-transition="split-lens-reveal"] .hero__slide.is-active { clip-path: inset(0); transform: scale(1); }
[data-rotator-state="running"][data-hero-transition="split-lens-reveal"] .hero__slide.is-leaving { z-index: 0; clip-path: inset(0); opacity: 0; }
[data-hero-transition="split-lens-reveal"].is-transitioning::before { animation: hero-split-glow 1300ms ease both; }

@keyframes hero-light-sweep {
  0% { opacity: 0; transform: translateX(-75%) skewX(-12deg); }
  34% { opacity: 0.8; }
  100% { opacity: 0; transform: translateX(75%) skewX(-12deg); }
}

@keyframes hero-lens-glow {
  0%, 100% { opacity: 0; transform: translateX(-18%) scale(0.95); }
  48% { opacity: 0.55; transform: translateX(12%) scale(1.04); }
}

@keyframes hero-split-glow {
  0%, 100% { opacity: 0; transform: translateX(0) scaleX(0.08); }
  46% { opacity: 0.38; transform: translateX(0) scaleX(0.28); }
}

@media (prefers-reduced-motion: reduce) {
  .hero__slide {
    transition: none !important;
    transform: none !important;
    filter: none !important;
    clip-path: inset(0) !important;
  }
  .hero__media[data-hero-rotator]::before {
    animation: none !important;
    opacity: 0 !important;
  }
}

/* ---------- social icons in their platform colours (header, menu panel, footer) */
.social-link--instagram .icon,
.social-link--tiktok .icon,
.social-link--facebook .icon,
.footer-social .icon {
  box-sizing: border-box;
  border-radius: 0.55rem;
  color: #fff;
  transition: transform var(--dur-2) var(--ease-out), filter var(--dur-2) ease, box-shadow var(--dur-2) ease;
}

.social-link--instagram .icon,
.social-link--tiktok .icon,
.social-link--facebook .icon {
  width: 1.875rem;
  height: 1.875rem;
  padding: 0.34rem;
}

.social-link--instagram .icon,
.footer-social--instagram .icon {
  background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 6%, #fd5949 45%, #d6249f 62%, #285aeb 92%);
}

.social-link--tiktok .icon,
.footer-social--tiktok .icon {
  background: #0b0b0d;
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.16);
}

.social-link--tiktok .icon use,
.footer-social--tiktok .icon use {
  filter: drop-shadow(-1.1px -1.1px 0 #25f4ee) drop-shadow(1.1px 1.1px 0 #fe2c55);
}

.social-link--facebook .icon,
.footer-social--facebook .icon {
  background: #1877f2;
}

.social-link--instagram:hover,
.social-link--tiktok:hover,
.social-link--facebook:hover {
  background: rgb(247 243 237 / 0.06);
  color: var(--c-light);
}

.social-link--instagram:hover .icon,
.social-link--tiktok:hover .icon,
.social-link--facebook:hover .icon,
.footer-social:hover .icon {
  transform: translateY(-1px);
  filter: saturate(1.12) brightness(1.06);
  box-shadow: 0 6px 16px -8px rgb(0 0 0 / 0.6);
}

.nav-social .social-link--instagram .icon,
.nav-social .social-link--tiktok .icon,
.nav-social .social-link--facebook .icon {
  width: 1.6rem;
  height: 1.6rem;
  padding: 0.28rem;
  border-radius: 0.45rem;
}

.footer-social .icon {
  width: 1.45rem;
  height: 1.45rem;
  padding: 0.24rem;
  border-radius: 0.4rem;
}

@media (prefers-reduced-motion: reduce) {
  .social-link .icon,
  .footer-social .icon {
    transition: none;
  }
  .social-link:hover .icon,
  .footer-social:hover .icon {
    transform: none;
  }
}

/* ---------- driving hours (kontakt: full table, start page: one line) */
.driving-hours {
  margin-top: var(--space-5);
  padding-top: var(--space-5);
  border-top: 1px solid var(--line);
}

.driving-hours__title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 var(--space-2);
  font-size: var(--fs-h3);
}

.driving-hours__title .icon {
  width: 1.25rem;
  height: 1.25rem;
  color: var(--accent-ink);
}

.driving-hours__note {
  margin: 0 0 var(--space-3);
  color: var(--fg-2);
  font-size: var(--fs-small);
}

.driving-hours-compact {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin: var(--space-3) 0 0;
  color: var(--fg-2);
  font-size: var(--fs-small);
  line-height: 1.5;
}

.driving-hours-compact .icon {
  flex: none;
  width: 1.05rem;
  height: 1.05rem;
  margin-top: 0.15rem;
  color: var(--accent-ink);
}

.driving-hours-compact strong {
  color: var(--fg);
  font-weight: 650;
}

/* ---------- optional creator credit (only present in the HTML when enabled) */
.creator-credit {
  width: 100%;
  margin: var(--space-4) 0 0;
  color: var(--fg-2);
  font-size: var(--fs-xs);
  letter-spacing: 0.02em;
  text-align: center;
  opacity: 0.85;
}

.creator-credit a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.creator-credit a:hover,
.creator-credit a:focus-visible {
  color: var(--fg);
}