/* ============================================================
   CROWN CREATIVES — CINEMATIC GLOBAL CORE v2.1 (CLEANED)
   Modular • Stable • No Hero Crown Logic
============================================================ */

/* ------------------------------------------------------------
   0. GLOBAL FONT — CINZEL DECORATIVE
------------------------------------------------------------ */
@import url('https://fonts.googleapis.com/css2?family=Cinzel+Decorative:wght@400;700;900&display=swap');

/* ------------------------------------------------------------
   1. GLOBAL RESET + TYPOGRAPHY + BASELINE
------------------------------------------------------------ */

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  min-height: 100%;
  overflow-x: hidden;
  font-family: 'Cinzel Decorative', serif;
  letter-spacing: 0.4px;
  text-align: center;
  transition: background 1s ease, color 1s ease;
}

/* ------------------------------------------------------------
   2. GLOBAL SHIMMER / SWEEP / SPARKLE
   (NO LONGER APPLIES TO HERO CROWNS)
------------------------------------------------------------ */

img:not(.hero-crown)[src*="crown"],
svg:not(.hero-crown)[src*="crown"] {
  position: relative;
  filter: drop-shadow(0 0 12px rgba(255,255,255,0.6));
  animation: globalCrownShimmer 6s ease-in-out infinite;
  transition: filter 2s ease, transform 2s ease;
  z-index: 5;
  pointer-events: none;
}

@keyframes globalCrownShimmer {
  0%   { filter: drop-shadow(0 0 10px rgba(255,255,255,0.4)); }
  50%  { filter: drop-shadow(0 0 18px rgba(255,255,255,0.9)); }
  100% { filter: drop-shadow(0 0 10px rgba(255,255,255,0.4)); }
}

/* Sweep */
img:not(.hero-crown)[src*="crown"]::after,
svg:not(.hero-crown)[src*="crown"]::after {
  content: "";
  position: absolute;
  top: 0;
  left: -150%;
  width: 80%;
  height: 100%;
  background: linear-gradient(
    120deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,0.6) 50%,
    rgba(255,255,255,0) 100%
  );
  transform: skewX(-20deg);
  animation: globalCrownSweep 8s ease-in-out infinite;
  pointer-events: none;
}

@keyframes globalCrownSweep {
  0%   { left: -150%; opacity: 0; }
  40%  { left: -150%; opacity: 0; }
  55%  { left: 150%; opacity: 0.8; }
  70%  { left: 150%; opacity: 0; }
  100% { left: -150%; opacity: 0; }
}

/* Sparkle */
img:not(.hero-crown)[src*="crown"]::before,
svg:not(.hero-crown)[src*="crown"]::before {
  content: "";
  position: absolute;
  top: -10%;
  left: -10%;
  width: 120%;
  height: 120%;
  background:
    radial-gradient(circle, rgba(255,255,255,0.8) 0%, rgba(255,255,255,0) 60%) 20% 30% / 6px 6px,
    radial-gradient(circle, rgba(255,255,255,0.7) 0%, rgba(255,255,255,0) 60%) 70% 60% / 4px 4px,
    radial-gradient(circle, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0) 60%) 50% 80% / 5px 5px;
  background-repeat: no-repeat;
  opacity: 0;
  animation: globalSparkleTwinkle 10s ease-in-out infinite;
  pointer-events: none;
}

@keyframes globalSparkleTwinkle {
  0%, 20%   { opacity: 0; transform: scale(1); }
  25%       { opacity: 0.6; transform: scale(1.05); }
  30%       { opacity: 0; transform: scale(1); }
  60%       { opacity: 0; }
  65%       { opacity: 0.5; transform: scale(1.03); }
  70%       { opacity: 0; transform: scale(1); }
  100%      { opacity: 0; }
}

/* ------------------------------------------------------------
   3. GLOBAL HEADER FADE
------------------------------------------------------------ */

main {
  position: relative;
  z-index: 2;
}

body.fade-header main {
  mask-image: linear-gradient(to top, rgba(0,0,0,1) 78%, rgba(0,0,0,0) 100%);
  -webkit-mask-image: linear-gradient(to top, rgba(0,0,0,1) 78%, rgba(0,0,0,0) 100%);
}

/* ------------------------------------------------------------
   4. SAFETY OVERRIDES
------------------------------------------------------------ */

#evolve-panel,
#evolve-orb {
  z-index: 999999 !important;
  pointer-events: auto !important;
}

.videos-hero,
.videos-hero * {
  pointer-events: none !important;
}
/* HERO GALLERY CONTAINER */
.hero-gallery {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    max-width: 1600px;
    transform: translate(-50%, -50%);
    display: flex;
    justify-content: space-between;
    pointer-events: none;
    z-index: 1; /* Behind crown */
}

/* GALLERY LANES */
.gallery-lane {
    width: 180px;
    height: 420px;
    overflow: hidden;
    position: relative;
    mask-image: linear-gradient(to bottom, transparent, white 20%, white 80%, transparent);
}

/* LEFT + RIGHT POSITIONING */
.lane-left {
    margin-right: 80px; /* distance from crown */
}

.lane-right {
    margin-left: 80px; /* distance from crown */
}

/* IMAGES INSIDE LANES */
.gallery-lane img {
    width: 100%;
    height: auto;
    display: block;
    position: absolute;
    animation: galleryScroll 18s linear infinite;
    opacity: 0.85;
    border-radius: 6px;
}

/* SCROLL ANIMATION */
@keyframes galleryScroll {
    0% { transform: translateY(100%); }
    100% { transform: translateY(-120%); }
}

/* RESPONSIVE TUNING */
@media (max-width: 1200px) {
    .gallery-lane {
        width: 140px;
        height: 360px;
    }
}

@media (max-width: 900px) {
    .hero-gallery {
        display: none; /* hide on mobile for clarity */
    }
}