/* ============================================================
   HOME PAGE — CROWN CREATIVES
   Corrected + Stabilised + Cinematic
============================================================ */

@import url("core-shared.css");

/* ------------------------------------------------------------
   1. GLOBAL HERO BACKGROUND LAYERS
------------------------------------------------------------ */

.day-background,
.night-background {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  object-fit: cover;
  z-index: 1;
  transition: opacity 1.5s ease;
  overflow: hidden; /* Prevent scrollbars */
}

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

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

/* Clouds / Nebula */
.day-clouds,
.night-nebula {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  object-fit: cover;
  opacity: 0.6;
  z-index: 2;
  transition: opacity 1.5s ease;
  overflow: hidden; /* Prevent scrollbars */
}

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

/* ------------------------------------------------------------
   2. HERO SECTION WRAPPER
------------------------------------------------------------ */

.hero-section {
  position: relative;
  padding-top: 10px;
  padding-bottom: 10px;
  text-align: center;
  z-index: 3;
}

/* ------------------------------------------------------------
   3. HERO CROWN — 20% LARGER + MOVED DOWN 10MM
------------------------------------------------------------ */

.hero-crown-wrapper {
  position: absolute;
  top: calc(50% + 38px);
  left: 50%;
  transform: translate(-50%, -50%);
  width: 504px;
  height: 504px;
  margin: 0;
  z-index: 5;
  pointer-events: none; /* Prevent blocking header icons */
}

.hero-crown {
  position: absolute;
  top: calc(50% + 38px);
  left: 50%;
  width: 504px;
  height: 504px;
  transform: translate(-50%, -50%);
  object-fit: contain;
  opacity: 0;
  transition: opacity 8s ease, filter 8s ease;
  filter: drop-shadow(0 0 25px rgba(255,255,255,0.9));
  pointer-events: none; /* Prevent blocking header icons */
}

.crown-day { opacity: 1; }
.crown-night { opacity: 0; }

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

/* Responsive crown scaling */
@media (max-width: 900px) {
  .hero-crown-wrapper,
  .hero-crown {
    width: 380px;
    height: 380px;
  }
}

@media (max-width: 600px) {
  .hero-crown-wrapper,
  .hero-crown {
    width: 300px;
    height: 300px;
  }
}

@media (max-width: 400px) {
  .hero-crown-wrapper,
  .hero-crown {
    width: 240px;
    height: 240px;
  }
}

/* ------------------------------------------------------------
   4. HERO GALLERY — STABLE, RESPONSIVE, CINEMATIC
------------------------------------------------------------ */

.hero-flex {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: clamp(40px, 6vw, 120px);
  margin-top: -57px;
  width: 100%;
  max-width: 1600px;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  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;
  background-repeat: no-repeat;
  opacity: 0;
  transition: opacity 2s ease;
}

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

@media (max-width: 768px) {
  .hero-flex {
    flex-direction: column;
    gap: 20px;
    margin-top: 0;
  }

  .gallery-lane {
    width: 90vw;
    height: 200px;
  }
}

/* ------------------------------------------------------------
   5. FOOTER SPACING (HOME PAGE ONLY)
------------------------------------------------------------ */

.cc-footer {
  margin-top: 80px;
  z-index: 10;
}

/* ------------------------------------------------------------
   MOTHER v5 — HERO INTEGRITY MARKERS (non-empty, non-visual)
------------------------------------------------------------ */

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