/* Smooth scroll */
html {
  scroll-behavior: smooth;
  scroll-padding-top: 100px;
}

/* Alpine.js cloak */
[x-cloak] {
  display: none !important;
}

/* Scroll reveal animations */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1),
              transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.reveal.revealed {
  opacity: 1;
  transform: translateY(0);
}

.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }
.reveal-delay-4 { transition-delay: 0.4s; }

/* Counter animation pulse */
@keyframes counter-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

.counter-animated {
  animation: counter-pulse 0.3s ease-out;
}

/* Form focus ring override */
input:focus,
select:focus,
textarea:focus {
  box-shadow: 0 0 0 3px rgba(0, 255, 223, 0.2);
}

/* Custom checkbox */
input[type="checkbox"] {
  accent-color: #00ffdf;
}

/* Selection color */
::selection {
  background: rgba(0, 255, 223, 0.3);
  color: #1F1F1F;
}

/* AI Logo floating animation */
@keyframes ai-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

.ai-float {
  animation: ai-float 3s ease-in-out infinite;
  animation-delay: var(--float-delay, 0s);
  will-change: transform;
}

/* Logo marquee — eager attrs + min-width on imgs avoid 0-width before SVG decode (broken -50% loop on mobile) */
.logo-marquee {
  display: flex;
  width: max-content;
  animation: marquee 60s linear infinite;
}

/* Einheitliches „Brand-Wall Cell" Prinzip: jedes Logo bekommt dieselbe 
   quadratische Bounding-Box (height + max-width). Square-Badges fuellen die 
   Zelle (240x240), Wordmarks nutzen die volle Breite und sind proportional 
   kuerzer – alle Logos haben so gleiches visuelles Gewicht. */
.logo-marquee img {
  object-fit: contain;
  object-position: center;
  flex-shrink: 0;
  /* Fixer quadratischer Container damit alle Logos an derselben horizontalen
     Mittelachse haengen - Inhalt wird via object-fit:contain proportional
     skaliert und vertikal/horizontal zentriert. */
  width: 7rem;
  height: 7rem;
  /* Vereinheitlicht alle Kundenlogos auf WESEO-Schwarz (#1D1D1B ≈ brightness 0.11) */
  filter: brightness(0) saturate(100%);
  opacity: 0.75;
  transition: opacity 0.25s ease;
}

.logo-marquee img:hover {
  opacity: 1;
}

@media (min-width: 640px) {
  .logo-marquee img { width: 8rem; height: 8rem; }
}
@media (min-width: 768px) {
  .logo-marquee img { width: 9rem; height: 9rem; }
}
@media (min-width: 1024px) {
  .logo-marquee img { width: 15rem; height: 15rem; }
}

/* Saubermacher-Logo ist ein sehr dichter Wordmark ohne Whitespace-Padding im 
   viewBox, waehrend andere SVGs ~60% Whitespace haben. Ohne diesen Override 
   wirkt Saubermacher optisch groesser als alle anderen. */
.logo-marquee img[src*="saubermacher"] { width: 5rem; height: 5rem; }
@media (min-width: 640px)  { .logo-marquee img[src*="saubermacher"] { width: 6rem;  height: 6rem; } }
@media (min-width: 768px)  { .logo-marquee img[src*="saubermacher"] { width: 7rem;  height: 7rem; } }
@media (min-width: 1024px) { .logo-marquee img[src*="saubermacher"] { width: 10rem; height: 10rem; } }

/* Murexin 15% kleiner als Standard-Zelle */
.logo-marquee img[src*="murexin"] { width: 5.95rem; height: 5.95rem; }
@media (min-width: 640px)  { .logo-marquee img[src*="murexin"] { width: 6.8rem;   height: 6.8rem; } }
@media (min-width: 768px)  { .logo-marquee img[src*="murexin"] { width: 7.65rem;  height: 7.65rem; } }
@media (min-width: 1024px) { .logo-marquee img[src*="murexin"] { width: 12.75rem; height: 12.75rem; } }

@media (max-width: 767.98px) {
  .logo-marquee img {
    min-width: 4.25rem;
  }

  .logo-marquee {
    animation-duration: 42s;
  }
}

@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* Announcement bar slide down */
@keyframes slideDown {
  from {
    transform: translateY(-100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.announcement-enter {
  animation: slideDown 0.4s ease-out;
}

/* Accordion smooth transitions — let the plugin handle height, we only refine duration */
[x-collapse] {
  overflow: hidden !important;
}

[x-collapse][style*="height"] {
  transition: height 0.45s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Card hover lift */
.card-lift {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card-lift:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.08);
}

/* Yellow underline highlight */
.highlight-underline {
  position: relative;
  display: inline-block;
}

.highlight-underline::after {
  content: '';
  position: absolute;
  bottom: 2px;
  left: 0;
  width: 100%;
  height: 0.2em;
  background: rgba(252, 255, 0, 0.4);
  z-index: -1;
}


/* Responsive adjustments */
@media (max-width: 768px) {
  .hero-title {
    font-size: 2.5rem;
  }
}

/* Button ripple */
.btn-ripple {
  position: relative;
  overflow: hidden;
}

.btn-ripple::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at var(--x, 50%) var(--y, 50%), rgba(255,255,255,0.2) 0%, transparent 60%);
  opacity: 0;
  transition: opacity 0.3s;
}

.btn-ripple:hover::after {
  opacity: 1;
}