/* ================================================================
   Foliencenter NRW – styles.css
   Custom styles complementing TailwindCSS
   ================================================================ */

/* ----------------------------------------------------------------
   Base
   ---------------------------------------------------------------- */
*, *::before, *::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Barlow Condensed – automotive display font tuning */
.font-display {
  letter-spacing: 0.04em;
  line-height: 0.92;
}

h1.font-display,
h2.font-display {
  letter-spacing: 0.03em;
}

/* Outline / Stroke text – automotive hero style */
.hero-outline-text {
  color: transparent;
  -webkit-text-stroke: 1px rgba(255, 255, 255, 0.55);
  text-stroke: 1px rgba(255, 255, 255, 0.55);
}

@media (min-width: 1024px) {
  .hero-outline-text {
    -webkit-text-stroke: 1.5px rgba(255, 255, 255, 0.50);
  }
}

/* ----------------------------------------------------------------
   Hero Slider – top-layer fade-out technique
   Next slide sits below (z:1), already fully visible.
   Outgoing slide sits on top (z:2) and fades out over it.
   No black flash ever.
   ---------------------------------------------------------------- */

/* All slides hidden by default */
#hero-slider .hero-slide {
  opacity: 0;
  z-index: 0;
  will-change: opacity;
  transition: none;
}

/* First slide visible immediately on load */
#hero-slider .hero-slide.hero-slide--first {
  opacity: 1;
  z-index: 1;
}

/* Active (incoming) slide: visible, sits below outgoing */
#hero-slider .hero-slide.is-active {
  opacity: 1;
  z-index: 1;
  transition: none;
}

/* Outgoing slide: on top, fades away */
#hero-slider .hero-slide.is-leaving {
  opacity: 0;
  z-index: 2;
  transition: opacity 1.4s cubic-bezier(0.4, 0, 0.2, 1);
}



/* ----------------------------------------------------------------
   Selection
   ---------------------------------------------------------------- */
::selection {
  background: #E31E24;
  color: #fff;
}

/* ----------------------------------------------------------------
   Navbar
   ---------------------------------------------------------------- */
#navbar {
  background: transparent;
}

#navbar.navbar-scrolled {
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

/* Active nav link */
.nav-link--active {
  color: #fff !important;
}

.nav-link--active::after {
  content: '';
  display: block;
  width: 100%;
  height: 1px;
  background: #E31E24;
  margin-top: 2px;
}

/* ----------------------------------------------------------------
   Fade-up animation
   ---------------------------------------------------------------- */
.fade-up {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.fade-up--visible {
  opacity: 1;
  transform: translateY(0);
}

/* ----------------------------------------------------------------
   USP Cards
   ---------------------------------------------------------------- */
.usp-card {
  opacity: 0;
  transform: translateY(24px) scale(0.98);
  transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.6s cubic-bezier(0.22, 1, 0.36, 1),
              border-color 0.4s ease;
}

.usp-card--visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* ----------------------------------------------------------------
   Service Cards – cursor glow
   ---------------------------------------------------------------- */
.service-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(
    circle 200px at var(--mouse-x, 50%) var(--mouse-y, 50%),
    rgba(227, 30, 36, 0.08) 0%,
    transparent 70%
  );
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
  z-index: 5;
}

.service-card:hover::before {
  opacity: 1;
}

/* ----------------------------------------------------------------
   Gallery Items
   ---------------------------------------------------------------- */
.gallery-item {
  opacity: 0;
  transform: scale(0.96);
  transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.gallery-item--visible {
  opacity: 1;
  transform: scale(1);
}

/* ----------------------------------------------------------------
   Process Steps
   ---------------------------------------------------------------- */
.process-step {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.55s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.55s cubic-bezier(0.22, 1, 0.36, 1),
              background-color 0.4s ease,
              border-color 0.4s ease;
}

.process-step--visible {
  opacity: 1;
  transform: translateY(0);
}

/* Round the top indicator bar correctly inside rounded card */
.process-step .absolute.top-0 {
  border-radius: 16px 16px 0 0;
}

/* ----------------------------------------------------------------
   Scroll line animation in hero
   ---------------------------------------------------------------- */
.scroll-line {
  animation: scrollPulse 2.5s ease-in-out infinite;
}

@keyframes scrollPulse {
  0%, 100% { opacity: 0.2; transform: scaleY(1); }
  50%       { opacity: 0.7; transform: scaleY(1.2); }
}

/* ----------------------------------------------------------------
   Partner logos shimmer
   ---------------------------------------------------------------- */
.partner-logo {
  transition: color 0.3s ease, text-shadow 0.3s ease;
  letter-spacing: 0.15em;
}

/* ----------------------------------------------------------------
   CTA button glow on hover
   ---------------------------------------------------------------- */
a.group:hover [data-icon="arrow"],
button:hover [data-icon="arrow"] {
  transform: translateX(4px);
}

/* ----------------------------------------------------------------
   Custom scrollbar
   ---------------------------------------------------------------- */
::-webkit-scrollbar {
  width: 6px;
}

::-webkit-scrollbar-track {
  background: #0a0a0a;
}

::-webkit-scrollbar-thumb {
  background: #333;
  border-radius: 9999px;
}

::-webkit-scrollbar-thumb:hover {
  background: #E31E24;
}

/* ----------------------------------------------------------------
   Focus styles (accessibility)
   ---------------------------------------------------------------- */
a:focus-visible,
button:focus-visible {
  outline: 2px solid #E31E24;
  outline-offset: 3px;
}

/* ----------------------------------------------------------------
   Reduced motion support
   ---------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .fade-up,
  .usp-card,
  .gallery-item,
  .process-step {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .scroll-line {
    animation: none;
    opacity: 0.4;
  }
}

/* ----------------------------------------------------------------
   Mobile adjustments
   ---------------------------------------------------------------- */
@media (max-width: 640px) {
  .hero-slide {
    background-position: center;
    background-size: cover;
  }
}

/* ----------------------------------------------------------------
   Print
   ---------------------------------------------------------------- */
@media print {
  #navbar,
  #scroll-progress,
  .scroll-line {
    display: none;
  }

  body {
    background: white;
    color: black;
  }
}