/* ==============================================
   Home — Hero & Startseiten Styles
   ============================================== */

/* ======== SPLASH SCREEN ======== */
.splash {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: #0a0a0a;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  transition: opacity .7s ease-out, visibility .7s;
}

.splash--hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* Centered ambient glow */
.splash__glow {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 400px;
  height: 400px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(220,38,38,.08) 0%, transparent 70%);
  pointer-events: none;
  animation: splashGlowPulse 2s ease-in-out .5s infinite;
}

/* Logo */
.splash__logo-wrap {
  position: relative;
  z-index: 2;
}

.splash__logo {
  display: block;
  width: clamp(140px, 30vw, 280px);
  height: auto;
  animation: splashLogoIn .8s cubic-bezier(.22,1,.36,1) .3s both,
             splashPulse 2s ease-in-out 1s infinite;
}

/* ---- Splash Lasers ---- */
.splash__laser {
  position: absolute;
  pointer-events: none;
  opacity: 0;
}

/* Laser 1: Top — left to right, fast */
.splash__laser--1 {
  top: 18%;
  left: 0;
  width: 250px;
  height: 2px;
  background: linear-gradient(90deg, transparent, #dc2626, #ef4444, transparent);
  box-shadow: 0 0 15px #dc2626, 0 0 40px rgba(220,38,38,.4);
  animation: laserSweep 1.8s cubic-bezier(.22,1,.36,1) .1s both;
}

/* Laser 2: Bottom — right to left */
.splash__laser--2 {
  top: 82%;
  right: 0;
  width: 200px;
  height: 2px;
  background: linear-gradient(270deg, transparent, #dc2626, #ef4444, transparent);
  box-shadow: 0 0 15px #dc2626, 0 0 40px rgba(220,38,38,.4);
  animation: laserSweepReverse 2s cubic-bezier(.22,1,.36,1) .4s both;
}

/* Laser 3: Diagonal descending */
.splash__laser--3 {
  top: 35%;
  left: 0;
  width: 180px;
  height: 1px;
  background: linear-gradient(90deg, transparent, #ef4444, transparent);
  box-shadow: 0 0 10px #dc2626, 0 0 25px rgba(220,38,38,.3);
  animation: laserDiagonal 2.2s cubic-bezier(.22,1,.36,1) .2s both;
}

/* Laser 4: Center — thicker, brighter, dramatic */
.splash__laser--4 {
  top: 50%;
  left: 0;
  width: 300px;
  height: 3px;
  background: linear-gradient(90deg, transparent 0%, #dc2626 30%, #ef4444 50%, #dc2626 70%, transparent 100%);
  box-shadow: 0 0 20px #dc2626, 0 0 60px rgba(220,38,38,.5);
  animation: laserSweep 1.6s cubic-bezier(.22,1,.36,1) .7s both;
}

/* Laser 5: Upper — reverse diagonal */
.splash__laser--5 {
  top: 28%;
  right: 0;
  width: 160px;
  height: 1px;
  background: linear-gradient(270deg, transparent, #ef4444, transparent);
  box-shadow: 0 0 8px #dc2626, 0 0 20px rgba(220,38,38,.3);
  animation: splashDiagReverse 2.3s cubic-bezier(.22,1,.36,1) .9s both;
}

/* Laser 6: Lower — left to right, delayed */
.splash__laser--6 {
  top: 68%;
  left: 0;
  width: 220px;
  height: 2px;
  background: linear-gradient(90deg, transparent, #dc2626, #ef4444, transparent);
  box-shadow: 0 0 12px #dc2626, 0 0 30px rgba(220,38,38,.4);
  animation: laserSweep 2.4s cubic-bezier(.22,1,.36,1) 1.1s both;
}

/* ---- Splash Keyframes ---- */
@keyframes splashLogoIn {
  from { opacity: 0; transform: scale(.85); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes splashPulse {
  0%, 100% {
    transform: scale(1);
    filter: drop-shadow(0 0 20px rgba(220,38,38,.4)) drop-shadow(0 0 50px rgba(220,38,38,.15));
  }
  50% {
    transform: scale(1.04);
    filter: drop-shadow(0 0 35px rgba(220,38,38,.6)) drop-shadow(0 0 80px rgba(220,38,38,.3));
  }
}

@keyframes splashGlowPulse {
  0%, 100% { opacity: .6; transform: translate(-50%, -50%) scale(1); }
  50%      { opacity: 1; transform: translate(-50%, -50%) scale(1.15); }
}

@keyframes splashDiagReverse {
  0%   { transform: translateX(100vw) rotate(8deg); opacity: 0; }
  10%  { opacity: .8; }
  90%  { opacity: .8; }
  100% { transform: translateX(-100%) rotate(8deg); opacity: 0; }
}

/* ======== HERO ======== */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
  background: var(--black);
  padding: calc(var(--nav-height) + var(--sp-xl)) var(--sp-lg) var(--sp-3xl);
}

.hero__bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 50% 30%, rgba(232,160,32,.05) 0%, transparent 50%),
    radial-gradient(ellipse at 20% 80%, rgba(220,38,38,.06) 0%, transparent 40%),
    radial-gradient(ellipse at 80% 70%, rgba(37,99,235,.03) 0%, transparent 40%);
  pointer-events: none;
}

/* Laser line effect */
.hero__laser {
  position: absolute;
  top: 45%;
  left: 0;
  width: 200px;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--red), var(--red-light), transparent);
  box-shadow: 0 0 12px var(--red), 0 0 30px rgba(220,38,38,.4);
  animation: laserSweep 4s var(--ease-out) infinite;
  animation-delay: 1.5s;
  opacity: 0;
  pointer-events: none;
}

/* Second laser — right to left */
.hero__laser-2 {
  position: absolute;
  top: 60%;
  right: 0;
  width: 160px;
  height: 2px;
  background: linear-gradient(270deg, transparent, var(--red), var(--red-light), transparent);
  box-shadow: 0 0 12px var(--red), 0 0 30px rgba(220,38,38,.4);
  animation: laserSweepReverse 5s var(--ease-out) infinite;
  animation-delay: 3s;
  opacity: 0;
  pointer-events: none;
}

/* Third laser — diagonal, thinner, faster */
.hero__laser-3 {
  position: absolute;
  top: 35%;
  left: 0;
  width: 120px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--red-light), transparent);
  box-shadow: 0 0 8px var(--red), 0 0 20px rgba(220,38,38,.3);
  animation: laserDiagonal 3.5s var(--ease-out) infinite;
  animation-delay: 2s;
  opacity: 0;
  pointer-events: none;
}

/* Sparks container */
.hero__sparks {
  position: absolute;
  bottom: 30%;
  left: 50%;
  transform: translateX(-50%);
  width: 200px;
  height: 80px;
  pointer-events: none;
  z-index: 2;
}

.hero__sparks span {
  position: absolute;
  bottom: 0;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: var(--red-light);
  box-shadow: 0 0 4px var(--red), 0 0 8px rgba(220,38,38,.5);
  animation: sparkFloat 2s ease-out infinite;
}

.hero__sparks span:nth-child(1) { left: 15%; animation-delay: 0s; animation-duration: 1.8s; }
.hero__sparks span:nth-child(2) { left: 35%; animation-delay: .4s; animation-duration: 2.2s; }
.hero__sparks span:nth-child(3) { left: 50%; animation-delay: .8s; animation-duration: 1.6s; }
.hero__sparks span:nth-child(4) { left: 65%; animation-delay: .2s; animation-duration: 2s; }
.hero__sparks span:nth-child(5) { left: 80%; animation-delay: .6s; animation-duration: 1.9s; }
.hero__sparks span:nth-child(6) { left: 95%; animation-delay: 1s; animation-duration: 2.1s; }

.hero__content {
  position: relative;
  z-index: 1;
  padding: var(--sp-xl);
  max-width: 800px;
}

.hero__logo {
  display: block;
  width: clamp(180px, 35vw, 340px);
  height: auto;
  margin-inline: auto;
  margin-bottom: var(--sp-xl);
  filter: drop-shadow(0 0 20px rgba(220, 38, 38, .3)) drop-shadow(0 0 40px rgba(220, 38, 38, .15));
  animation: fadeInUp .8s var(--ease-out) both;
}

.hero__title {
  font-size: var(--fs-3xl);
  font-weight: var(--fw-bold);
  margin-bottom: var(--sp-md);
  animation: fadeInUp .8s var(--ease-out) .15s both;
}

.hero__title span {
  background: var(--grad-orange);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.hero__tagline {
  font-size: var(--fs-lg);
  color: var(--gray);
  margin-bottom: var(--sp-2xl);
  animation: fadeInUp .8s var(--ease-out) .3s both;
}

.hero__actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-md);
  flex-wrap: wrap;
  animation: fadeInUp .8s var(--ease-out) .45s both;
}

/* ======== RESPONSIVE — HERO & HOME ======== */
@media (max-width: 767px) {
  .hero {
    padding: calc(var(--nav-height) + var(--sp-md)) var(--sp-md) var(--sp-2xl);
  }

  .hero__content {
    padding: var(--sp-lg);
  }

  .hero__actions {
    flex-direction: column;
    align-items: center;
  }

  .hero__actions .btn {
    width: 100%;
    max-width: 300px;
  }

  .hero__laser-3 {
    display: none;
  }

  .hero__sparks {
    width: 120px;
    bottom: 22%;
  }

  .feature {
    padding: var(--sp-md);
    gap: var(--sp-md);
  }
}

@media (max-width: 374px) {
  .hero__sparks {
    display: none;
  }

  .hero__laser-2 {
    display: none;
  }
}

/* ======== SERVICES PREVIEW ======== */
.services-preview .card__icon--laser {
  background: rgba(220, 38, 38, .12);
  color: var(--red-light);
}

.services-preview .card__icon--cut {
  background: rgba(37, 99, 235, .12);
  color: var(--blue-light);
}

.services-preview .card__icon--print {
  background: var(--orange-dim);
  color: var(--orange);
}

.services-preview .card:hover .card__icon--laser {
  box-shadow: 0 0 15px rgba(220, 38, 38, .25);
}

.services-preview .card:hover .card__icon--cut {
  box-shadow: 0 0 15px rgba(37, 99, 235, .25);
}

.services-preview .card:hover .card__icon--print {
  box-shadow: 0 0 15px rgba(232, 160, 32, .25);
}

/* ======== WHY WINNI'S ======== */
.features {
  counter-reset: feature;
}

.feature {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-lg);
  padding: var(--sp-lg);
  border-radius: var(--border-radius);
  background: var(--dark-2);
  border: 1px solid var(--dark-3);
  transition: border-color var(--dur-base);
}

.feature:hover {
  border-color: var(--dark-4);
}

.feature__number {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--orange-dim);
  color: var(--orange);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
}

.feature__title {
  font-size: var(--fs-md);
  margin-bottom: var(--sp-xs);
}

.feature__text {
  font-size: var(--fs-sm);
  color: var(--gray);
}