/* =========================================================
   DEEPONTRACK – OVERDRIVE.CSS
   High-End Event / Automotive Landingpage
   Design & Engineering: Comline GbR
   ========================================================= */

/* ================= FONT ================= */
@font-face {
  font-family: 'Inter Tight';
  src: url('../fonts/InterTight-Regular.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Inter Tight';
  src: url('../fonts/InterTight-Bold.woff2') format('woff2');
  font-weight: 700;
  font-display: swap;
}
/* ================= CARD TEXT COLOR CONTROL ================= */

/* Grundfarbe: Weiß */
.cardx h2,
.cardx h3 {
  color: #ffffff;
  transition: color 0.35s ease;
}

/* Hover-Farbe: Orange */
a:hover .cardx h2,
a:hover .cardx h3 {
  color: #ffa600;
}

/* ================= ROOT COLORS ================= */
:root {
  --pink:   #ff2f92;
  --cyan:   #00e0c6;
  --yellow: #ffd300;
  --violet: #7f4dff;
  --dark:   #030009;
}

/* ================= BASE ================= */
body {
  font-family: 'Inter Tight', system-ui, sans-serif;
  background: var(--dark);
  color: #ffffff;
  overflow-x: hidden;
}

/* ================= EVENT INTRO ================= */
#intro {
  position: fixed;
  inset: 0;
  background: #000;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: introFade 3s ease forwards;
}

#intro img {
  width: 280px;
  filter: drop-shadow(0 0 40px var(--pink));
  animation: introLogo 3s ease forwards;
}

@keyframes introLogo {
  0%   { opacity: 0; transform: scale(.8); }
  30%  { opacity: 1; transform: scale(1); }
  80%  { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes introFade {
  85% { opacity: 1; }
  100% { opacity: 0; visibility: hidden; }
}

/* ================= BACKGROUND IMAGE (KEN BURNS) ================= */
.bg-image {
  position: fixed;
  inset: 0;
  z-index: -5;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  filter: brightness(.55) saturate(1.15);
  animation: kenburns 40s ease-in-out infinite alternate;
}

@keyframes kenburns {
  from { transform: scale(1) translateY(0); }
  to   { transform: scale(1.08) translateY(-2%); }
}

/* ================= NEON GLOW LAYER ================= */
.bg-glow {
  position: fixed;
  inset: 0;
  z-index: -4;
  background:
    radial-gradient(circle at 20% 25%, rgba(255,47,146,.35), transparent 40%),
    radial-gradient(circle at 80% 30%, rgba(0,224,198,.35), transparent 45%),
    radial-gradient(circle at 60% 85%, rgba(255,211,0,.25), transparent 45%),
    radial-gradient(circle at 40% 70%, rgba(127,77,255,.25), transparent 45%);
  animation: hueShift 24s ease-in-out infinite alternate;
}

@keyframes hueShift {
  to { filter: hue-rotate(28deg); }
}

/* ================= PARTICLES ================= */
.particles {
  position: fixed;
  inset: 0;
  z-index: -3;
  pointer-events: none;
}

.p {
  position: absolute;
  border-radius: 50%;
  opacity: .45;
  filter: blur(.6px);
  animation: rise linear infinite;
}

@keyframes rise {
  from { transform: translateY(120vh) translateX(0); }
  to   { transform: translateY(-20vh) translateX(var(--drift)); }
}

/* ================= HERO ================= */
.hero {
  padding: 160px 0 120px;
  text-align: center;
}

.hero-logo img {
  max-width: 390px;
  animation: float 4s ease-in-out infinite, glowPulse 3s ease-in-out infinite;
}

@keyframes float {
  50% { transform: translateY(-12px); }
}

@keyframes glowPulse {
  50% {
    filter:
      drop-shadow(0 0 60px var(--cyan))
      drop-shadow(0 0 90px var(--pink));
  }
}

.hero h1 {
  font-size: 3.6rem;
  margin-top: 40px;
}

.hero p {
  font-size: 1.45rem;
  margin-top: 20px;
}

/* ================= COUNTDOWN ================= */
.countdown {
  margin-top: 55px;
  display: flex;
  gap: 30px;
  justify-content: center;
  flex-wrap: wrap;
}

.cd {
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(18px);
  padding: 24px 28px;
  border-radius: 22px;
  box-shadow: 0 0 45px rgba(0,224,198,.45);
}

.cd span {
  font-size: 2.6rem;
  font-weight: 700;
}

/* ================= GLASSMORPHISM CARDS ================= */
.section {
  padding: 130px 0;
}

.cardx {
  height: 100%;
  background: linear-gradient(135deg,
    rgba(0,0,0,.70),
    rgba(0,0,0,.40)
  );
  backdrop-filter: blur(26px);
  border-radius: 32px;
  padding: 38px;
  box-shadow: 0 70px 160px rgba(0,0,0,.7);
  transform: translateY(70px);
  opacity: 0;
  transition: all .9s ease;
}

.cardx.visible {
  transform: none;
  opacity: 1;
}

.cardx:hover {
  transform: translateY(-20px) scale(1.06);
  box-shadow: 0 90px 220px rgba(255,47,146,.7);
}

.cardx img {
  border-radius: 24px;
  margin-bottom: 28px;
}

.cardx h2 {
  font-weight: 700;
  margin-top: 35px;
}

/* ================= ICON GRADIENT ================= */
.icon {
  font-size: 3.6rem;
  background: linear-gradient(
    45deg,
    var(--cyan),
    var(--pink),
    var(--yellow),
    var(--violet)
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 22px;
}

/* ================= FOOTER ================= */
footer {
  padding: 90px 0;
  text-align: center;
  background: linear-gradient(180deg, transparent, #010004);
}

footer img {
  height: 50px;
  margin-left: 10px;
}

/* ================= MOBILE ================= */
@media (max-width: 768px) {
  .hero-logo img { max-width: 240px; }
  .hero h1 { font-size: 2.3rem; }
  .hero p { font-size: 1.1rem; }
  .bg-image { animation: none; }
}