/* ============================================================
   Rich Cutz — 3D clipper background overlay styles
   Adds a fixed full-viewport canvas BEHIND every section. Dark
   sections become semi-transparent so the clipper shows through;
   cream sections stay opaque so they hide it cleanly.
   ============================================================ */

/* The canvas itself */
#rc-canvas {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: 0;
  pointer-events: none;
  display: block;
  /* slight desaturation so it reads as an atmospheric backdrop, not a hero element */
  opacity: 0.92;
}

/* Body keeps its navy fallback (so even before WebGL inits there's no flash). */
body {
  background: var(--ink-2);
}

/* All sections need to sit ABOVE the canvas, but dark ones need to
   be partially transparent so the 3D shows through. */
.hero,
.about,
.visit,
.footer,
.marquee {
  position: relative;
  z-index: 1;
}
.services,
.gallery {
  position: relative;
  z-index: 1;   /* same plane as dark sections — trimmer flows through */
}
.nav,
.sheet,
.mobile-cta {
  z-index: 50;  /* nav always on top */
}

/* ---------- Cream sections — softly translucent so the trimmer
   keeps flowing visibly behind them. The cream wash stays dominant
   (text reads cleanly) but the dark trimmer drifts through softly,
   matching the continuous-motion feel of the dark sections. */
.services {
  background:
    linear-gradient(180deg, rgba(246, 242, 233, 0.92) 0%, rgba(246, 242, 233, 0.94) 100%) !important;
}
.gallery {
  background:
    linear-gradient(180deg, rgba(246, 242, 233, 0.94) 0%, rgba(246, 242, 233, 0.92) 100%) !important;
}
/* Service rows + gallery cells stay opaque so the trimmer doesn't
   bleed through their content cards. */
.svc-row,
.services__head,
.gallery__cell {
  position: relative;
  z-index: 1;
}
.gallery__cell { background: var(--ink-3); }   /* opaque cell BG */

/* ---------- Dark section transparency ----------
   We KEEP the navy-feeling colour, but drop it to ~58–72% so the
   clipper reads through subtly. Where text legibility matters
   (about copy, hours table) we layer a localised scrim. */

.hero {
  /* keep hero feeling deep — but let the trimmer read clearly through it */
  background:
    radial-gradient(ellipse 80% 70% at 30% 50%, rgba(7,16,29,0.55), rgba(7,16,29,0.30) 60%, rgba(7,16,29,0.18) 100%);
}

.about {
  background:
    linear-gradient(180deg, rgba(12,19,34,0.35) 0%, rgba(12,19,34,0.55) 50%, rgba(12,19,34,0.35) 100%);
}

.visit {
  background:
    linear-gradient(180deg, rgba(7,16,29,0.40) 0%, rgba(7,16,29,0.58) 55%, rgba(7,16,29,0.40) 100%);
}

.footer {
  background:
    linear-gradient(180deg, rgba(4,10,20,0.35) 0%, rgba(4,10,20,0.65) 100%);
}

.marquee {
  background: rgba(12,19,34,0.62);
  backdrop-filter: blur(4px);
}

/* The hero scrim already exists in markup — keep a soft pool of darkness
   anchored UNDER the headline only, so the trimmer reads on the right side. */
.hero__scrim {
  background:
    radial-gradient(ellipse 55% 50% at 28% 60%, rgba(0,0,0,0.42), transparent 72%),
    linear-gradient(180deg, rgba(7,16,29,0.0) 0%, rgba(7,16,29,0.30) 100%);
}

/* Hero placeholder media was a flat-colour fill — let it be more transparent
   so the 3D shows. (If/when a real photo lands, this override can go.) */
.hero__media {
  opacity: 0.0; /* hide the placeholder fill entirely — the 3D + scrim are the backdrop */
}
.hero__placeholder-tag { display: none; }

/* The .grain paper-texture overlay sits on top of dark sections — pull
   its opacity down a notch so the 3D isn't muddied by paper noise. */
.grain::before {
  opacity: 0.35;
}

/* About card has its own dark panel — keep that opaque so the photo
   sits cleanly and isn't fighting the 3D behind it. */
.about__photo {
  background: var(--ink-3);
}
/* Hours-block visit-card likewise opaque */
.visit-card {
  background: rgba(7, 16, 29, 0.85);
  backdrop-filter: blur(8px);
}

/* ---------- Mobile — keep the 3D, lighten the load ----------
   The trimmer reads through on mobile too; pose scaling + a smaller
   DPR (handled in clipper-scene.js) keep it visible and frugal. */
@media (max-width: 720px) {
  /* Lift the dark sections a touch on mobile so the trimmer reads
     against the smaller viewport without washing out content. */
  .hero {
    background:
      radial-gradient(ellipse 110% 75% at 50% 50%, rgba(7,16,29,0.62), rgba(7,16,29,0.42) 65%, rgba(7,16,29,0.28) 100%);
  }
  .about {
    background:
      linear-gradient(180deg, rgba(12,19,34,0.55) 0%, rgba(12,19,34,0.72) 50%, rgba(12,19,34,0.55) 100%);
  }
  .visit {
    background:
      linear-gradient(180deg, rgba(7,16,29,0.62) 0%, rgba(7,16,29,0.78) 55%, rgba(7,16,29,0.62) 100%);
  }
  .footer {
    background:
      linear-gradient(180deg, rgba(4,10,20,0.55) 0%, rgba(4,10,20,0.78) 100%);
  }
  .marquee { background: rgba(12,19,34,0.78); }
  /* Hero placeholder fill stays hidden so the 3D + scrim are the backdrop. */
  .hero__media { opacity: 0; }
  /* Soften the hero scrim on mobile so the trimmer reads behind the type. */
  .hero__scrim {
    background:
      radial-gradient(ellipse 100% 60% at 50% 78%, rgba(0,0,0,0.55), transparent 75%),
      linear-gradient(180deg, rgba(7,16,29,0.0) 0%, rgba(7,16,29,0.35) 100%);
  }
}

/* Respect reduced-motion users by keeping the canvas static (the scene
   already handles this internally) — no CSS change needed, but we
   slightly tone exposure down so the still frame reads as backdrop. */
@media (prefers-reduced-motion: reduce) {
  #rc-canvas { opacity: 0.72; }
}