/* Home page only: the 3D sequence takes over the viewport, so native page
   scrolling is disabled (the wheel drives the camera instead). Loaded last so
   it can undo the `overflow:auto` that the inner pages rely on. */

body.home-3d {
  overflow: hidden !important;
  overscroll-behavior: none;
  height: 100%;
  background-color: #4F6688 !important;
}

html:has(body.home-3d) { overflow: hidden; height: 100%; }

/* Canvas sits behind every overlay. */
body.home-3d #canvas-container > canvas {
  max-width: 100vw;
  max-height: 100vh;
  display: block;
}

/* Panels fade in/out as the camera enters and leaves their zone. */
body.home-3d .overlay-active {
  pointer-events: none !important;
  opacity: 1 !important;
}
body.home-3d .overlay-active a,
body.home-3d .overlay-active button {
  pointer-events: auto !important;
}
body.home-3d .overlay-inactive {
  pointer-events: none !important;
  opacity: 0 !important;
}

/* Keeps the copy legible where it crosses bright geometry. */
@media (min-width: 768px) {
  body.home-3d #overlay-container h1,
  body.home-3d #overlay-container p {
    text-shadow:
      0 0 20px rgba(46, 62, 82, 0.9),
      0 0 20px rgba(46, 62, 82, 0.9),
      0 0 30px rgba(46, 62, 82, 0.7);
  }
}
body.home-3d .no-shadow { text-shadow: none !important; }

/* The hint sits over the logo panels while they are still centre-stage. */
body.home-3d #scroll-hint span {
  text-shadow: 0 2px 12px rgba(46, 62, 82, 0.85), 0 0 24px rgba(46, 62, 82, 0.7);
}

@media (max-width: 767px) {
  body.home-3d .overlay-gradient {
    background: linear-gradient(
      0deg,
      rgba(46, 62, 82, 0.9),
      rgba(46, 62, 82, 0.9) 75%,
      rgba(46, 62, 82, 0)
    );
  }
}

/* The services ticker only animates while its panel is on screen. */
body.home-3d .ticker-paused { animation-play-state: paused; }

/* ---------------------------------------------------------------------------
   Brand colour utilities.

   real-tailwind.css is a pre-built stylesheet, so it only contains the
   arbitrary-value classes that existed when it was compiled. Any LUVR hex we
   introduce has to be declared here or it silently does nothing.
   -------------------------------------------------------------------------- */
.bg-\[\#F6F6EE\] { background-color: #F6F6EE; }
.bg-\[\#DCE3EA\] { background-color: #DCE3EA; }
.bg-\[\#92A3BE\] { background-color: #92A3BE; }
.bg-\[\#4F6688\] { background-color: #4F6688; }
.bg-\[\#2E3E52\] { background-color: #2E3E52; }
.bg-\[\#C64233\] { background-color: #C64233; }
.bg-\[\#8C2E22\] { background-color: #8C2E22; }
.bg-\[\#D9776A\] { background-color: #D9776A; }

.text-\[\#F6F6EE\] { color: #F6F6EE; }
.text-\[\#DCE3EA\] { color: #DCE3EA; }
.text-\[\#92A3BE\] { color: #92A3BE; }
.text-\[\#4F6688\] { color: #4F6688; }
.text-\[\#2E3E52\] { color: #2E3E52; }
.text-\[\#C64233\] { color: #C64233; }
.text-\[\#8C2E22\] { color: #8C2E22; }

/* Step buttons are solid pills on touch, bare arrows from md up. These
   responsive resets aren't present in the pre-built stylesheet either. */
@media (min-width: 768px) {
  .md\:bg-transparent { background-color: transparent; }
  .md\:p-0 { padding: 0; }
  .md\:rounded-none { border-radius: 0; }
}

.hover\:bg-\[\#F6F6EE\]:hover { background-color: #F6F6EE; }
.hover\:bg-\[\#2E3E52\]:hover { background-color: #2E3E52; }
.hover\:text-\[\#92A3BE\]:hover { color: #92A3BE; }
.hover\:text-\[\#C64233\]:hover { color: #C64233; }