/* ==========================================================================
   "Broken Chains" — scroll-scrubbed 3D section (LIGHT MODE)
   VI Caribbean Cultural Center

   This section was originally built dark. It has been converted to light mode
   because the dark block broke the flow of the page — every other section
   here is cream and plum, and a near-black interruption read as a different
   website. It now sits on the same cream surface as the rest of the page and
   uses the DESIGN.md tokens directly, so it reads as one continuous site.

   Everything is a real brand token. No colour is invented:
     Plum  #692364  — headings, accents, the CTA
     Deep gold #6b4b00 — the small command tags (the light-mode stand-in for
                         Golden Sun, which is unreadable as text on cream)
     #50434c — body copy
     #fbf9f8 / #ffffff — surfaces
   The bronze/copper/rust of the sculpture itself carries the warmth instead
   of glowing highlights — in light mode there is no bloom and no emissive
   glow, because additive light on a cream background just washes out.

   Contrast (verified, not estimated), all against #fbf9f8:
     Plum #692364      9.20:1   AA and AAA for body text
     Deep gold #6b4b00 8.03:1   AA and AAA for body text
     Body #50434c      8.15:1   AA and AAA for body text
     White on plum     8.63:1   the CTA
   All clear of the 4.5:1 threshold for normal text.

   Per project rule, the Madras plaid/tartan pattern is NOT used here.

   Architecture: a sticky-background section that works with NO JavaScript.
   The sculpture image sits in the sticky stage and the five scene blocks
   scroll over it with fade-ins. The WebGL canvas is a progressive
   enhancement, enabled only by adding .bc--3d.
   ========================================================================== */

.bc {
  --bc-surface:   #fbf9f8; /* --color-surface */
  --bc-panel:     rgba(255, 255, 255, 0.92);
  --bc-plum:      #692364; /* --color-primary */
  --bc-plum-deep: #4f074c; /* --color-primary-hover */
  --bc-gold-deep: #6b4b00; /* --color-on-secondary-container */
  --bc-ink:       #1b1c1c; /* --color-on-surface */
  --bc-ink-soft:  #50434c; /* --color-on-surface-variant */
  --bc-line:      #d4c1cd; /* --color-outline-variant */

  position: relative;
  background: var(--bc-surface);
  color: var(--bc-ink);
  isolation: isolate;
}

/* ---------- The sticky stage (holds either the canvas or the still image) -- */

.bc-stage {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  width: 100%;
  overflow: hidden;
  z-index: 0;
  /* A whisper of plum warmth behind the sculpture — flat radial tint, not a
     decorative gradient, and far too subtle to affect text contrast. */
  background:
    radial-gradient(ellipse 62% 50% at 50% 52%, rgba(105, 35, 100, 0.07) 0%, rgba(105, 35, 100, 0) 70%),
    var(--bc-surface);
}

.bc-canvas {
  display: none; /* enabled only on the 3D path */
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.bc--3d .bc-canvas { display: block; }

/* ---------- Static / no-JS / low-power stage image ---------- */

.bc-stage-img {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  height: 78%;
  width: auto;
  max-width: 88vw;
  object-fit: contain;
  /* Grounds the cutout on the cream background so it doesn't look pasted on. */
  filter: drop-shadow(0 22px 34px rgba(79, 7, 76, 0.18));
}

.bc--3d .bc-stage-img { display: none; }

/* ---------- Scene flow: pulled up over the sticky stage ---------- */

.bc-flow {
  position: relative;
  z-index: 2;
  margin-top: -100vh;
  margin-top: -100svh;
}

.bc-scene {
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding: 12vh var(--margin-desktop, 64px);
  max-width: var(--container-max, 1200px);
  margin: 0 auto;
}

/* Alternate sides so the sculpture stays readable behind the copy */
.bc-scene:nth-child(even) { justify-content: flex-end; }

/* First scene sits high instead of centred. Centring it left roughly a third
   of a screen of empty cream between the end of the About section and the
   first line of copy — the reader scrolled into the section and met nothing.
   The offset below clears the sticky site header and no more. */
.bc-scene:first-child {
  align-items: flex-start;
  padding-top: calc(var(--bc-header-clearance, 76px) + 3vh);
}

.bc-scene-inner {
  max-width: 34rem;
  /* Near-opaque white panel. The copy must never depend on what the 3D scene
     happens to be showing behind it at that moment, so this is a real surface
     rather than a light tint. */
  background: var(--bc-panel);
  border: 1px solid var(--bc-line);
  border-left: 3px solid var(--bc-plum);
  border-radius: var(--radius-lg, 0.75rem);
  padding: 2rem 2.25rem;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 10px 34px rgba(27, 28, 28, 0.1);
}

/* ---------- Fade-in ---------- */

.bc-scene-inner {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.75s ease, transform 0.75s ease;
}

.bc-scene.is-visible .bc-scene-inner {
  opacity: 1;
  transform: none;
}

/* If JS never runs at all, show everything — never hide content behind JS. */
.bc:not(.bc--enhanced) .bc-scene-inner {
  opacity: 1;
  transform: none;
}

/* ---------- Typography ---------- */

/* The /// SCENE_0X.SYS command tags were removed at Jhodge's direction.
   Bungee was loaded solely for them and has been dropped from the Google
   Fonts request in index.html — don't re-add the font without re-adding a
   use for it. */

.bc-title {
  font-family: var(--font-display, 'Literata', Georgia, serif);
  font-weight: 800;
  font-size: clamp(2rem, 4.6vw, 3.25rem);
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--bc-plum);
  margin: 0 0 0.6em;
  text-wrap: balance;
}

.bc-title .bc-title-accent {
  color: var(--bc-gold-deep);
  display: block;
}

.bc-body {
  font-family: var(--font-label, 'Hanken Grotesk', system-ui, sans-serif);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--bc-ink-soft);
  margin: 0 0 1em;
}

.bc-body:last-child { margin-bottom: 0; }

.bc-attrib {
  font-family: var(--font-label, 'Hanken Grotesk', system-ui, sans-serif);
  font-size: 0.9375rem;
  letter-spacing: 0.02em;
  color: var(--bc-gold-deep);
  margin: 0 0 1.25em;
}

/* ---------- CTA (scene 5) — matches the site's primary button ---------- */

.bc-cta {
  display: inline-block;
  margin-top: 0.75rem;
  padding: 0.9rem 1.9rem;
  min-height: 48px; /* WCAG target size, same as .btn */
  font-family: var(--font-label, 'Hanken Grotesk', system-ui, sans-serif);
  font-size: 1.0625rem;
  font-weight: 700;
  color: #ffffff;
  background: var(--bc-plum);
  border-radius: var(--radius-pill, 9999px);
  text-decoration: none;
  transition: background 0.2s ease, transform 0.2s ease;
}

.bc-cta:hover,
.bc-cta:focus-visible {
  background: var(--bc-plum-deep);
  transform: translateY(-2px);
}

.bc-cta:focus-visible,
.bc-scene a:focus-visible {
  outline: 3px solid var(--bc-plum);
  outline-offset: 3px;
}

/* ---------- Responsive ---------- */

@media (max-width: 900px) {
  .bc-scene {
    padding: 10vh var(--margin-mobile, 16px);
    justify-content: center;
  }
  .bc-scene:nth-child(even) { justify-content: center; }
  .bc-scene-inner {
    max-width: 100%;
    padding: 1.5rem 1.375rem;
  }
  .bc-stage-img { height: 62%; }
}

/* ---------- Reduced motion: no transforms, no fades, no 3D ---------- */

@media (prefers-reduced-motion: reduce) {
  .bc-scene-inner {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .bc-cta { transition: none; }
  .bc-cta:hover,
  .bc-cta:focus-visible { transform: none; }
}

/* ---------- Forced colours / Windows High Contrast ---------- */

@media (forced-colors: active) {
  .bc-scene-inner {
    background: Canvas;
    border: 1px solid CanvasText;
  }
  .bc-canvas { display: none; }
}