/* ============================================================
   HOME PAGE — CLEANED (NO HERO CROWN LOGIC)
============================================================ */

@import url("cinematic.css");

/* ============================================================
   1. CINEMATIC BACKGROUND
============================================================ */

#cc-background {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: -10;
  pointer-events: none;
  overflow: hidden;
}

.day-background,
.night-background {
  position: fixed;
  top: 0;
  left: 0;
  width: 140vw;
  height: 140vh;
  z-index: -999;
  pointer-events: none;
  opacity: 0;
  transition: opacity 8s ease;
}

.day-background {
  background: linear-gradient(
    180deg,
    rgba(200,60,40,0.55) 0%,
    rgba(220,50,100,0.50) 22%,
    rgba(200,30,140,0.45) 45%,
    rgba(150,20,170,0.42) 70%,
    rgba(90,10,150,0.40) 100%
  );
  opacity: 1;
}

.night-background {
  background: radial-gradient(
    circle at 50% 20%,
    rgba(200,80,255,0.60) 0%,
    rgba(140,40,220,0.55) 18%,
    rgba(80,0,160,0.55) 40%,
    rgba(30,0,80,0.85) 70%,
    rgba(5,0,25,0.97) 100%
  );
}

body.dark-mode .day-background { opacity: 0; }
body.dark-mode .night-background { opacity: 1; }

.day-clouds,
.night-nebula {
  position: fixed;
  top: 0;
  left: 0;
  width: 160vw;
  height: 160vh;
  pointer-events: none;
  z-index: -998;
  opacity: 0.35;
  filter: blur(25px);
}

.day-clouds {
  animation: cloudDrift 60s linear infinite;
}

.night-nebula {
  opacity: 0;
  filter: blur(40px);
  animation: nebulaShift 80s ease-in-out infinite alternate;
}

body.dark-mode .day-clouds { opacity: 0; }
body.dark-mode .night-nebula { opacity: 1; }

/* ============================================================
   2. HERO SECTION
============================================================ */

.hero-section {
  position: relative;
  padding: 80px 0 80px;
  text-align: center;
  z-index: 3;
}

/* ============================================================
   3. HERO GALLERY
============================================================ */

.hero-flex {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: clamp(40px, 6vw, 120px);
  width: 100%;
  max-width: 1600px;
  margin: 0 auto 40px auto;
  z-index: 4;
}

.gallery-lane {
  flex: 0 1 clamp(180px, 22vw, 320px);
  height: 260px;
  border-radius: 16px;
  overflow: hidden;
  background-color: rgba(0,0,0,0.3);
  box-shadow: 0 0 20px rgba(0,0,0,0.5);
  position: relative;
}

.gallery-lane-inner {
  width: 100%;
  height: 100%;
  position: relative;
}

.gallery-image {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 2s ease;
}

.gallery-image.active { opacity: 1; }

@media (max-width: 768px) {
  .hero-flex {
    flex-direction: column;
    gap: 20px;
  }
  .gallery-lane {
    width: 90vw;
    height: 200px;
  }
}

/* ============================================================
   4. TAGLINE CARDS
============================================================ */

.tagline-cards {
  display: flex;
  justify-content: center;
  gap: 40px;
  margin-top: 40px;
  flex-wrap: wrap;
  z-index: 4;
}

.tag-card {
  background: rgba(255,255,255,0.08);
  backdrop-filter: blur(12px) saturate(180%);
  padding: 24px 32px;
  border-radius: 18px;
  width: clamp(240px, 28vw, 340px);
  text-align: center;
  color: #fff;
  box-shadow: 0 0 18px rgba(0,0,0,0.4);
  border: 1px solid rgba(255,255,255,0.15);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.tag-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 0 28px rgba(255,255,255,0.25);
}

/* ============================================================
   5. MOTHER v5 — INTEGRITY MARKERS
============================================================ */

.hero-section { --mother: 1; }
.hero-flex { --mother: 1; }
.gallery-lane { --mother: 1; }
.tagline-cards { --mother: 1; }

#cc-master,
#master-container {
  overflow: visible !important;
  height: auto !important;
}
.hero-section {
  position: relative;
  z-index: 10;
}
/* ============================================
   HERO SECTION SPACING TUNING (30mm upward)
   ============================================ */

/* Move hero crown + gallery up by 30mm */
.hero-section .hero-flex {
    margin-top: -30mm; /* pulls crown + gallery upward */
}

/* Pull tagline cards upward to follow the hero */
.tagline-cards {
    margin-top: -20mm; /* reduces gap without touching ticker/footer */
}

/* Ensure gallery stays aligned behind crown after shift */
.gallery-lane {
    transform: translateY(-15mm); /* subtle upward correction */
}
/* ============================================================
   HERO SECTION — NARROW + MOVE LANES INWARD SAFELY
   ============================================================ */

/* Narrow the entire hero content area */
.hero-flex {
    max-width: 1200px;   /* was effectively full width */
    margin: 0 auto;      /* center it perfectly */
}

/* Pull gallery lanes inward without touching the crown */
.gallery-left {
    margin-right: 25mm;  /* inward shift */
}

.gallery-right {
    margin-left: 25mm;   /* inward shift */
}

/* Ensure crown remains dominant and untouched */
.hero-crown-wrapper {
    z-index: 50;         /* stays above gallery lanes */
    position: relative;
}