/* Floating scroll-driven genie — above WhatsApp (home storytelling character) */

.genie-stage {
  position: fixed;
  z-index: 40;
  top: auto;
  bottom: calc(88px + 54px + 10px + env(safe-area-inset-bottom, 0px));
  inset-inline-start: auto;
  inset-inline-end: max(8px, env(safe-area-inset-inline-end, 0px));
  width: min(360px, 40vw);
  height: auto;
  margin: 0;
  padding: 0;
  pointer-events: none;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  overflow: visible;
  filter: drop-shadow(0 12px 28px rgba(88, 28, 180, 0.28));
}

.genie-stage canvas {
  display: block;
  width: 100%;
  height: auto;
  max-height: min(58vh, 480px);
  transform-origin: center bottom;
  will-change: transform;
}

.genie-scroll-hint {
  position: fixed;
  z-index: 41;
  left: 50%;
  bottom: calc(22px + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  margin: 0;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid rgba(138, 43, 226, 0.35);
  background: rgba(10, 6, 24, 0.78);
  color: #d9c9ff;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  pointer-events: none;
  opacity: 1;
  transition: opacity 280ms ease;
}

.genie-scroll-hint.is-hidden {
  opacity: 0;
  visibility: hidden;
}

body.has-genie-bg .site-header {
  position: relative;
  z-index: 80;
}

body.has-genie-bg .scroll-progress {
  z-index: 200;
}

body.has-genie-bg .page-loader {
  z-index: 9999;
}

body.has-genie-bg .bg-shapes {
  z-index: 1;
  opacity: 0.28;
}

body.has-genie-bg main,
body.has-genie-bg .site-footer {
  position: relative;
  z-index: 10;
}

body.has-genie-bg .chatbot-wrap,
body.has-genie-bg .whatsapp-float,
body.has-genie-bg .back-to-top {
  z-index: 90;
}

body.has-genie-bg .cookie-banner {
  z-index: 95;
}

body.has-genie-bg:not(.genie-reduced) .about-visual {
  display: none;
}

body.has-genie-bg:not(.genie-reduced) .about-shell {
  grid-template-columns: 1fr;
}

body.has-hero-video .hero-shell {
  align-items: center;
}

body.has-hero-video .hero-visual {
  align-self: center;
  display: grid !important;
  place-items: center;
  min-height: 100%;
}

body.has-hero-video:not(.genie-reduced) .hero-shell {
  grid-template-columns: 1.05fr 0.95fr;
  max-width: none;
}

/* Avoid two genies overlapping the hero */
body.has-hero-video.hero-in-view .genie-stage {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

@media (max-width: 920px) {
  body.has-hero-video:not(.genie-reduced) .hero-shell {
    grid-template-columns: 1fr;
  }
}

@media (min-width: 1200px) {
  .genie-stage {
    width: min(420px, 34vw);
    inset-inline-end: max(12px, env(safe-area-inset-inline-end, 0px));
  }
}

@media (max-width: 900px) {
  .genie-stage {
    width: min(300px, 72vw);
    bottom: calc(72px + 54px + 8px + env(safe-area-inset-bottom, 0px));
    inset-inline-end: max(2px, env(safe-area-inset-inline-end, 0px));
    opacity: 0.96;
  }

  .genie-stage canvas {
    max-height: 46vh;
  }

  .genie-scroll-hint {
    bottom: calc(14px + env(safe-area-inset-bottom, 0px));
    font-size: 0.72rem;
  }
}

@media (max-width: 560px) {
  .genie-stage {
    width: min(280px, 78vw);
    bottom: calc(72px + 54px + 6px + env(safe-area-inset-bottom, 0px));
    opacity: 0.95;
  }

  .genie-stage canvas {
    max-height: 50vh;
  }
}

@media (prefers-reduced-motion: reduce) {
  .genie-scroll-hint {
    display: none;
  }
}