/* ============================================
   IRIS Festival – Hero Section
   ============================================ */

.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 80px 1rem 40px;
}

.bg-stars {
  position: absolute;
  inset: 0;
  background: url("../starsbackground-up-comp.png");
  background-size: cover;
  background-position: center;
  opacity: 0.5;
  z-index: 1;
}

.bg-parallax {
  position: absolute;
  inset: 0;
  background: radial-gradient(
    circle at 50% 50%,
    rgba(212, 175, 55, 0.15) 0%,
    rgba(233, 30, 140, 0.1) 30%,
    rgba(74, 10, 90, 0.15) 60%,
    transparent 100%
  );
  z-index: 2;
}

/* Rays */
/* rays z-index von 3 zu 0 geändert */
.rays {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

/* Reformatted .ray-pattern with improved readability */
.ray-pattern {
  position: absolute;
  top: 70%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 200%;
  height: 200%;
  background: conic-gradient(
    from 0deg,
    transparent 0deg,
    rgba(212, 175, 55, 0.25) 15deg,
    transparent 30deg,
    rgba(255, 107, 53, 0.22) 45deg,
    transparent 60deg,
    rgba(255, 20, 147, 0.2) 75deg,
    transparent 90deg,
    rgba(138, 43, 226, 0.18) 105deg,
    transparent 120deg,
    rgba(212, 175, 55, 0.25) 135deg,
    transparent 150deg,
    rgba(255, 107, 53, 0.22) 165deg,
    transparent 180deg,
    rgba(255, 20, 147, 0.2) 195deg,
    transparent 210deg,
    rgba(138, 43, 226, 0.18) 225deg,
    transparent 240deg,
    rgba(212, 175, 55, 0.25) 255deg,
    transparent 270deg,
    rgba(255, 107, 53, 0.22) 285deg,
    transparent 300deg,
    rgba(255, 20, 147, 0.2) 315deg,
    transparent 330deg,
    rgba(138, 43, 226, 0.18) 345deg,
    transparent 360deg
  );
  animation: rotate 80s linear infinite;
}

.halo-deep {
  animation-duration: 120s;
  opacity: 0.6;
  filter: blur(3px);
}

.halo-near {
  animation-duration: 90s;
  animation-direction: reverse;
  opacity: 0.5;
}

.sharp-layer {
  background: repeating-conic-gradient(from 0deg, rgba(212, 175, 55, 0.25) 0deg 1.5deg, transparent 1.5deg 8deg);
  animation-duration: 60s;
  opacity: 0.4;
}

.center-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 900px;
  height: 900px;
  background: radial-gradient(
    circle,
    rgba(212, 175, 55, 0.6) 0%,
    rgba(255, 107, 53, 0.4) 25%,
    rgba(255, 20, 147, 0.3) 50%,
    rgba(138, 43, 226, 0.2) 70%,
    transparent 90%
  );
  filter: blur(90px);
  animation: pulse 12s ease-in-out infinite;
}

@keyframes rotate {
  from {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

@keyframes pulse {
  0%,
  100% {
    opacity: 0.5;
    transform: translate(-50%, -50%) scale(1);
  }
  50% {
    opacity: 0.7;
    transform: translate(-50%, -50%) scale(1.2);
  }
}

.hero__content {
  position: relative;
  z-index: 10;
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 clamp(1rem, 4vw, 2rem);
}

.hero__center {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3rem;
  text-align: center;
}

.hero__brandSlot {
  text-align: center;
  height: 206px;
}

/* ============================================
   KOMPLETT NEUES BRAND DESIGN
   Ohne Dipsnitch Logo, moderner Schriftzug
   ============================================ */
.brand--hero {
  display: block;
  text-decoration: none;
  position: relative;
  will-change: transform, opacity;
}

/* brand__text-container kompakter gemacht */
.brand--hero .brand__text-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 1.5rem 2rem;
  width: 100%;
}

/* Entfernen von letter-spacing und padding aus brand__title für bessere Zentrierung */
.brand--hero .brand__title {
  font-family: "Cinzel", serif;
  font-size: clamp(4.5rem, 14vw, 8rem);
  font-weight: 700;
  text-transform: uppercase;
  text-align: center;
  color: var(--c-gold);
  text-shadow: 0 0 60px rgba(212, 175, 55, 0.9), 0 0 100px rgba(212, 175, 55, 0.6), 0 4px 8px rgba(0, 0, 0, 0.8), 2px
    2px 4px rgba(0, 0, 0, 0.9);
  line-height: 1;
  opacity: 1;
  transition: text-shadow 0.4s ease, opacity 2s ease;
  display: inline-block;
}


.brand--hero .brand__title.is-hidden {
  opacity: 0;
  pointer-events: none;
}
.brand--hero:hover .brand__title {
  text-shadow: 0 0 80px rgba(212, 175, 55, 1), 0 0 140px rgba(212, 175, 55, 0.7), 0 4px 8px rgba(0, 0, 0, 0.8);
}

.brand--hero .brand__date {
  font-family: "Cinzel", serif;
  /* Schriftgrösse erhöht und mehr Kontrast */
  font-size: clamp(1.6rem, 4.5vw, 2.4rem);
  font-weight: 500;
  letter-spacing: 0.3em;
  color: var(--c-gold);
  text-transform: uppercase;
  /* Stärkerer Text-Shadow für besseren Kontrast */
  text-shadow: 0 0 40px rgba(212, 175, 55, 0.8), 0 0 80px rgba(212, 175, 55, 0.5), 0 2px 6px rgba(0, 0, 0, 0.8);
}

/* Scroll Transition State */
.brand--transitioning {
  pointer-events: none;
  z-index: 9999;
  transition: transform 2s cubic-bezier(0.22, 1, 0.36, 1), opacity 1.5s cubic-bezier(0.22, 1, 0.36, 1);
}

/* ============================================
   Iris Halo Canvas Wrapper
   ============================================ */
/* Reformatted .iris-halo-wrapper with improved readability */
/* Zurück zu position: relative; statt fixed */
.iris-halo-wrapper {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: clamp(300.6px, 45vw, 450px);
  height: clamp(220px, 45vw, 450px);
  transition: all 2s ease;
}

.iris-halo-wrapper:hover {
  scale:1.2;
  transition: all 2s ease;
}
.iris-halo-canvas {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  pointer-events: none;
  animation: haloRotate 60s linear infinite;

}

@keyframes haloRotate {
  from {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}
.hero__iris:hover {
  scale:1.05;
  transition: all 2s ease;
}

.hero__iris {
  position: relative;
  z-index: 2;
  width: clamp(160px, 32vw, 320px);
  height: auto;
  filter: drop-shadow(0 0 50px rgba(233, 30, 140, 0.8)) drop-shadow(0 0 30px rgba(212, 175, 55, 0.6));
  animation: float 6s ease-in-out infinite;
  transition: all 2s ease;
}

@keyframes float {
  0%,
  100% {
    transform: translateY(0) scale(1);
  }
  50% {
    transform: translateY(-15px) scale(1.03);
  }
}

.hero__right {
  width: 100%;
  display: flex;
  justify-content: center;
  order: 2;
}

@media (min-width: 1024px) {
  .hero__right {
    order: 0;
  }
}

/* DJ List */
.hero__djlist {
  background: linear-gradient(135deg, rgba(0, 0, 0, 0.6), rgba(26, 0, 31, 0.5));
  backdrop-filter: blur(16px);
  border-radius: var(--radius-xl);
  padding: clamp(0.8rem, 2vw, 1.2rem);
  border: 2px solid rgba(212, 175, 55, 0.3);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
  width: 100%;
  max-width: 320px;
  position: relative;
}

.hero__djlist::before,
.hero__djlist::after {
  content: "";
  position: absolute;
  width: 16px;
  height: 16px;
  border: 2px solid var(--c-gold);
  opacity: 0.5;
}

.hero__djlist::before {
  top: 6px;
  right: 6px;
  border-left: none;
  border-bottom: none;
  border-top-right-radius: var(--radius-sm);
}

.hero__djlist::after {
  bottom: 6px;
  left: 6px;
  border-right: none;
  border-top: none;
  border-bottom-left-radius: var(--radius-sm);
}

.hero__djs {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.djitem {
  opacity: 0;
  transform: translateX(-20px);
  animation: slideInRight 0.5s ease-out forwards;
}

.djitem:nth-child(1) {
  animation-delay: 0.1s;
}
.djitem:nth-child(2) {
  animation-delay: 0.2s;
}
.djitem:nth-child(3) {
  animation-delay: 0.3s;
}
.djitem:nth-child(4) {
  animation-delay: 0.4s;
}
.djitem:nth-child(5) {
  animation-delay: 0.5s;
}

@keyframes slideInRight {
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Headliner gesondert und grösser */
.djitem--headliner {
  margin-bottom: 0.5rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid rgba(212, 175, 55, 0.3);
}

.dj {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem 0.8rem;
  background: rgba(212, 175, 55, 0.05);
  border: 1px solid rgba(212, 175, 55, 0.2);
  border-radius: var(--radius-md);
  transition: all var(--transition-base);
  min-height: 40px;
  cursor: pointer;
}

.dj:hover {
  background: rgba(212, 175, 55, 0.15);
  border-color: var(--c-gold);
  transform: translateX(8px);
}

.dj--headliner {
  background: linear-gradient(135deg, rgba(212, 175, 55, 0.2), rgba(233, 30, 140, 0.15));
  border: 2px solid var(--c-gold);
  padding: 0.8rem 1rem;
  min-height: 60px;
}

.dj__logo {
  max-height: 22px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
}

/* Headliner Logo GRÖSSER */
.dj__logo--headliner {
  max-height: 40px;
}

.dj__name {
  font-family: "Cinzel", serif;
  font-size: clamp(0.8rem, 1vw, 0.9rem);
  font-weight: 600;
  color: var(--c-white);
  text-align: center;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* ============================================
   Countdown Badge - Above the fold, top-right
   ============================================ */
.countdown-badge {
  position: absolute;
  bottom: 90px;
  z-index: 20;
}

.countdown-badge__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0.5rem 0.8rem;
  background: rgba(13, 0, 21, 0.8);
  border: 1px solid rgba(212, 175, 55, 0.5);
  border-radius: 6px;
  backdrop-filter: blur(8px);
}

.countdown-badge__label {
  font-family: "Cinzel", serif;
  font-size: 0.55rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: rgba(212, 175, 55, 0.8);
  margin-bottom: 0.15rem;
}

.countdown-badge__timer {
  display: flex;
  align-items: center;
  gap: 0.1rem;
}

.countdown-badge__item {
  display: flex;
  align-items: baseline;
  gap: 0.02rem;
}

.countdown-badge__num {
  font-family: "Cinzel", serif;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--c-gold);
  line-height: 1;
  min-width: 2ch;
  text-align: right;
}

.countdown-badge__unit {
  font-family: "Inter", sans-serif;
  font-size: 0.45rem;
  color: rgba(212, 175, 55, 0.6);
  text-transform: uppercase;
}

.countdown-badge__sep {
  font-family: "Cinzel", serif;
  font-size: 0.7rem;
  color: rgba(212, 175, 55, 0.4);
  margin: 0 0.02rem;
  animation: blink 1s step-end infinite;
}

@keyframes blink {
  0%,
  100% {
    opacity: 0.5;
  }
  50% {
    opacity: 0;
  }
}

.hero__fade {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100px;
  background: linear-gradient(to top, var(--c-deep), transparent);
  z-index: 5;
}

/* Administrierbarer Countdown-Endtext */
.countdown-badge__end {
  max-width: min(70vw, 360px);
  padding: 0.15rem 0.25rem;
  font-family: "Cinzel", serif;
  font-size: clamp(0.8rem, 2vw, 1rem);
  font-weight: 600;
  line-height: 1.35;
  color: var(--c-gold);
  text-align: center;
}

/* Absagemodus: gleiche visuelle Bühne, aber nur die wichtige Information */
.hero--cancelled {
  min-height: calc(100vh - 70px);
  display: grid;
  place-items: center;
}

.event-cancelled {
  position: relative;
  z-index: 20;
  width: min(92vw, 820px);
  margin: 0 auto;
  padding: clamp(2rem, 6vw, 4rem);
  border: 1px solid rgba(212, 175, 55, 0.45);
  border-radius: 18px;
  background: rgba(13, 0, 21, 0.82);
  backdrop-filter: blur(12px);
  text-align: center;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.38);
}

.event-cancelled__title {
  margin: 0 0 1.25rem;
  font-family: "Cinzel", serif;
  font-size: clamp(2rem, 7vw, 4.5rem);
  line-height: 1.05;
  color: var(--c-gold);
}

.event-cancelled__text {
  font-size: clamp(1rem, 2.5vw, 1.3rem);
  line-height: 1.65;
  color: var(--c-white);
}

.event-cancelled__actions {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: clamp(1.5rem, 4vw, 2.25rem);
}

.event-cancelled__actions .btn {
  min-width: min(100%, 220px);
}

@media (max-width: 520px) {
  .event-cancelled__actions {
    flex-direction: column;
    align-items: stretch;
  }

  .event-cancelled__actions .btn {
    width: 100%;
    min-width: 0;
  }
}