/* ============================================================
   Vibe Morph Hero — remove static poster bg, cinematic particles
   Appended as last-layer overrides (craft-polish companion)
   ============================================================ */

/* Kill the photographic hero background completely */
#page-home .cinema-media,
.cinema-media,
html[data-theme="light"] #page-home .cinema-media,
html[data-theme="cyber"] #page-home .cinema-media,
html:not([data-theme="light"]) #page-home .cinema-media {
  background:
    radial-gradient(ellipse 70% 55% at 72% 42%, rgba(48, 110, 210, 0.22), transparent 62%),
    radial-gradient(ellipse 50% 45% at 18% 78%, rgba(110, 70, 210, 0.14), transparent 58%),
    radial-gradient(ellipse 90% 70% at 50% 100%, rgba(8, 20, 48, 0.55), transparent 70%),
    linear-gradient(160deg, #050a16 0%, #0a1630 42%, #071022 100%) !important;
  filter: none !important;
  opacity: 1 !important;
  visibility: visible !important;
  z-index: 0 !important;
}

#page-home .cinema-media::before,
#page-home .cinema-media::after,
.cinema-media::before,
.cinema-media::after {
  display: none !important;
  background: none !important;
  backdrop-filter: none !important;
  content: none !important;
}

#page-home .cinema-hero,
.cinema-hero {
  background:
    radial-gradient(ellipse 80% 60% at 70% 40%, rgba(40, 100, 200, 0.16), transparent 60%),
    #050a16 !important;
  isolation: isolate !important;
}

/* Particle canvas becomes the star */
#page-home .vibe-particle-field,
.vibe-particle-field {
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  width: 100% !important;
  height: 100% !important;
  pointer-events: none !important;
  mix-blend-mode: screen !important;
  opacity: 1 !important;
}

/* Content above particles */
#page-home .cinema-content,
#page-home .cinema-copy {
  position: relative !important;
  z-index: 4 !important;
}

/* Soft left-side readability scrim (no photo needed) */
#page-home .cinema-content::before {
  content: "" !important;
  position: absolute !important;
  inset: -80px -40px -60px -70px !important;
  z-index: -1 !important;
  pointer-events: none !important;
  background:
    radial-gradient(ellipse 70% 80% at 20% 40%, rgba(5, 10, 22, 0.72), rgba(5, 10, 22, 0.18) 55%, transparent 75%) !important;
  filter: blur(2px);
}

/* Title remains bright white for contrast on particle field */
#page-home .cinema-title,
html[data-theme="light"] #page-home .cinema-title {
  color: #f4f8ff !important;
  -webkit-text-fill-color: #f4f8ff !important;
  background: none !important;
  text-shadow:
    0 1px 0 rgba(255, 255, 255, 0.1),
    0 14px 40px rgba(0, 10, 30, 0.55) !important;
}

#page-home .cinema-intro {
  color: rgba(230, 240, 255, 0.86) !important;
  text-shadow: 0 10px 28px rgba(0, 10, 30, 0.4) !important;
}

/* Morph shape label (bottom-right of hero) */
.morph-shape-label {
  position: absolute;
  right: clamp(16px, 3vw, 36px);
  bottom: clamp(18px, 4vh, 42px);
  z-index: 5;
  padding: 8px 14px;
  border-radius: 999px;
  font-family: ui-monospace, "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: rgba(210, 235, 255, 0.78);
  background: rgba(8, 16, 36, 0.42);
  border: 1px solid rgba(160, 210, 255, 0.18);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 10px 30px rgba(0, 10, 30, 0.28);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.5s ease, transform 0.55s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
  user-select: none;
}
.morph-shape-label.is-on {
  opacity: 1;
  transform: translateY(0);
}
.morph-shape-label::before {
  content: "◈ ";
  color: #b8f24a;
}

/* Stats glass on particle void */
#page-home .home-hero-stats div {
  background: rgba(8, 16, 36, 0.42) !important;
  border-color: rgba(160, 210, 255, 0.18) !important;
  backdrop-filter: blur(16px) !important;
}

/* ---------- Site-wide ambient upgrade ---------- */
.site-ambient {
  z-index: 0 !important;
  pointer-events: none !important;
}

.site-ambient-canvas {
  opacity: 0.55 !important;
}
html[data-theme="cyber"] .site-ambient-canvas,
html:not([data-theme="light"]) .site-ambient-canvas {
  opacity: 0.7 !important;
}
html[data-theme="light"] .site-ambient-canvas {
  opacity: 0.4 !important;
}

/* Soft floating code glyphs decoration across site */
.site-ambient::after {
  content: "</>  ·  VIBE  ·  AI  ·  SHIP  ·  REMIX  ·  AWARD  ·  PROMPT  ·  BUILD";
  position: fixed;
  left: -10vw;
  bottom: 8vh;
  width: 140vw;
  font-family: ui-monospace, "JetBrains Mono", Menlo, Consolas, monospace;
  font-size: clamp(11px, 1.1vw, 13px);
  font-weight: 700;
  letter-spacing: 0.42em;
  color: rgba(140, 190, 255, 0.07);
  white-space: nowrap;
  pointer-events: none;
  z-index: 0;
  animation: vibeTicker 48s linear infinite;
}
html[data-theme="light"] .site-ambient::after {
  color: rgba(40, 90, 160, 0.06);
}
@keyframes vibeTicker {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(-20%, 0, 0); }
}

/* Corner constellation dots */
.site-ambient-orbs {
  opacity: 0.55 !important;
  filter: blur(40px) !important;
}
html[data-theme="light"] .site-ambient-orbs {
  opacity: 0.28 !important;
}

.site-orb-a {
  background: radial-gradient(circle, rgba(184, 242, 74, 0.55), transparent 68%) !important;
}
.site-orb-b {
  background: radial-gradient(circle, rgba(126, 215, 255, 0.5), transparent 68%) !important;
}
.site-orb-c {
  background: radial-gradient(circle, rgba(155, 140, 255, 0.45), transparent 68%) !important;
}

/* Subtle scanline over whole ambient (very soft) */
.site-exhibit-scan {
  opacity: 0.035 !important;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 3px,
    rgba(180, 220, 255, 0.35) 3px,
    rgba(180, 220, 255, 0.35) 4px
  ) !important;
  mix-blend-mode: soft-light;
}

/* Keep app above ambient */
body > .app {
  position: relative;
  z-index: 1;
}

/* Mobile: calm it down a bit */
@media (max-width: 820px) {
  .morph-shape-label {
    right: 12px;
    bottom: 14px;
    font-size: 10px;
    letter-spacing: 0.1em;
    padding: 6px 10px;
  }
  .site-ambient::after {
    bottom: 4vh;
    letter-spacing: 0.28em;
    opacity: 0.8;
  }
  .site-ambient-canvas {
    opacity: 0.35 !important;
  }
  #page-home .cinema-content::before {
    inset: -40px -20px -40px -30px !important;
    background:
      radial-gradient(ellipse 90% 70% at 30% 30%, rgba(5, 10, 22, 0.78), rgba(5, 10, 22, 0.25) 60%, transparent 80%) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .morph-shape-label {
    opacity: 0.85 !important;
    transform: none !important;
    transition: none !important;
  }
  .site-ambient::after {
    animation: none !important;
  }
  .site-orb,
  .site-ambient-grid {
    animation: none !important;
  }
  .vibe-particle-field {
    opacity: 0.85 !important;
  }
}