/* Hero backdrop that merges into the next section — see assets/hero-merge.js (preview: hero-preview.php) */
@property --tone { syntax: '<color>'; inherits: true; initial-value: #2a1b18; }

.hero-merge { --tone: #2a1b18; --hero-h: clamp(600px, 100svh, 1100px); position: relative; isolation: isolate; transition: --tone 1.4s ease; }
.hero-merge .hero { background: transparent; }

/* ═══ A · Colour wash (bluestone.com) ═══
   hero + USP sit on a solid tone sampled from the slide; the Collections section starts on that tone
   and fades to the page colour, so its heading reads in white and the cards finish on the light page */
.hero-merge--a { background: var(--bg); }
.hero-merge--a .hero { background: var(--tone); }
.hero-merge--b .v2-promise { background: transparent; }
/* hero photo melts into the tone at its foot */
.hero-merge--a .hero:not(.hero--split) .slide-media::after {
  background: linear-gradient(to bottom, rgba(0,0,0,.22) 0%, transparent 22%, transparent 58%,
              color-mix(in srgb, var(--tone) 45%, transparent) 78%, color-mix(in srgb, var(--tone) 88%, transparent) 92%, var(--tone) 100%);
}
.hero-merge--a .section--cube { padding-top: clamp(24px, 3vw, 40px); padding-bottom: clamp(28px, 3vw, 44px);
  /* eased (smoothstep) fade — a linear start shows as a hard line under the USP band */
  background: linear-gradient(to bottom, var(--tone) 0,
              color-mix(in srgb, var(--tone) 98%, var(--bg)) 8%,
              color-mix(in srgb, var(--tone) 91%, var(--bg)) 16%,
              color-mix(in srgb, var(--tone) 82%, var(--bg)) 24%,
              color-mix(in srgb, var(--tone) 70%, var(--bg)) 32%,
              color-mix(in srgb, var(--tone) 57%, var(--bg)) 40%,
              color-mix(in srgb, var(--tone) 43%, var(--bg)) 48%,
              color-mix(in srgb, var(--tone) 30%, var(--bg)) 56%,
              color-mix(in srgb, var(--tone) 18%, var(--bg)) 64%,
              color-mix(in srgb, var(--tone) 9%, var(--bg)) 72%,
              color-mix(in srgb, var(--tone) 2%, var(--bg)) 80%,
              var(--bg) 88%); }
.hero-merge--a .section--cube .sec-head { color: #fff; --ink: #fff; --dim: rgba(255,255,255,.75); --accent-text: rgba(255,255,255,.85); }
/* cube faces float on the backdrop instead of white panels; the turn shading moves to a filter */
.hero-merge .cube-face { background: transparent; }
.hero-merge .cube.is-ready .cube-face::after { display: none; }
.hero-merge .cube.is-ready .cube-face { filter: brightness(calc(1 - var(--shade, 0) * 1.3)); }
.hero-merge-fade { display: none; }

/* ═══ B · Ambient glow ═══ */
.hero-merge--b { background: var(--bg); }
.hero-ambient { position: absolute; z-index: -1; left: 0; right: 0; top: 0; height: calc(var(--hero-h) + 560px); overflow: hidden; background: #111;
  -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 calc(var(--hero-h) + 120px), transparent 100%);
          mask-image: linear-gradient(to bottom, #000 0, #000 calc(var(--hero-h) + 120px), transparent 100%); }
.hero-ambient img { position: absolute; inset: -12%; width: 124%; height: 124%; object-fit: cover; opacity: 0;
  filter: blur(64px) saturate(1.5) brightness(.6); transform: scaleY(1.25); transform-origin: top; transition: opacity 1.4s ease; }
.hero-ambient img.is-on { opacity: 1; }
/* the photo itself dissolves into its own blurred glow */
.hero-merge--b .slide-media { -webkit-mask-image: linear-gradient(to bottom, #000 58%, transparent 100%); mask-image: linear-gradient(to bottom, #000 58%, transparent 100%); }
.hero-merge--b .hero:not(.hero--split) .slide-media::after { background: linear-gradient(to bottom, rgba(0,0,0,.28), transparent 30%); }
.hero-merge--b .section--cube { background: transparent; padding-top: clamp(24px, 3vw, 40px); }
.hero-merge--b:not(:has(.v2-promise)) .section--cube .sec-head { color: #fff; --accent-text: #c5c5c5; text-shadow: 0 1px 18px rgba(0,0,0,.25); }

/* tabs on a dark backdrop (both) */
:is(.hero-merge--a, .hero-merge--b:not(:has(.v2-promise))) .cube-tabs .chip { color: #fff; border-color: rgba(255,255,255,.35); background: rgba(255,255,255,.06); }
:is(.hero-merge--a, .hero-merge--b:not(:has(.v2-promise))) .cube-tabs .chip:hover { border-color: #fff; }
:is(.hero-merge--a, .hero-merge--b:not(:has(.v2-promise))) .cube-tabs .chip.is-on { background: #fff; color: var(--ink-dark, #1b1b1b); border-color: #fff; }

.hero-merge--d { background: var(--bg); }

/* ═══ D · Pearl glow — light and airy, made from the slide photo itself ═══
   the slide image (Admin → Hero slider) is blurred, lifted and veiled in pearl; the photo melts into
   that glow, which runs behind the USP strip and the Collections heading and fades to the page colour.
   Text stays in dark ink. The glow cross-fades with the slider (hero-merge.js). */
.hero-merge--d { --pearl: color-mix(in srgb, var(--tone) 8%, #f7f5f1); }
.hero-merge--d .hero { background: transparent; }
.hero-merge--d .hero-ambient { height: calc(var(--usp-end, 1200px) + 560px); background: var(--pearl);
  -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 calc(var(--usp-end, 1200px) - 40px), rgba(0,0,0,.55) calc(var(--usp-end, 1200px) + 200px), transparent 100%);
          mask-image: linear-gradient(to bottom, #000 0, #000 calc(var(--usp-end, 1200px) - 40px), rgba(0,0,0,.55) calc(var(--usp-end, 1200px) + 200px), transparent 100%); }
.hero-merge--d .hero-ambient img { filter: blur(80px) saturate(1.15) brightness(1.12); transform: scale(1.2, 1.45); }
.hero-merge--d .hero-ambient::after { content: ""; position: absolute; inset: 0; background: color-mix(in srgb, var(--pearl) 58%, transparent); }   /* pearl veil keeps dark text readable */
/* the photo dissolves into its glow along an eased curve, starting two-thirds down */
.hero-merge--d .slide-media { -webkit-mask-image: linear-gradient(to bottom, #000 64%, rgba(0,0,0,.8) 74%, rgba(0,0,0,.45) 84%, rgba(0,0,0,.15) 93%, transparent 100%);
                                      mask-image: linear-gradient(to bottom, #000 64%, rgba(0,0,0,.8) 74%, rgba(0,0,0,.45) 84%, rgba(0,0,0,.15) 93%, transparent 100%); }
.hero-merge--d .hero:not(.hero--split) .slide-media::after { background: linear-gradient(to bottom, rgba(0,0,0,.24), transparent 22%); }
.hero-merge--d .v2-promise { background: transparent; }
.hero-merge--d .v2-promise-ico { box-shadow: inset 0 0 0 1px var(--silver), 0 14px 28px -16px rgba(0,0,0,.28); }
.hero-merge--d .section--cube { background: transparent; padding-top: clamp(28px, 3vw, 44px); padding-bottom: clamp(28px, 3vw, 44px); }

/* slider controls sit on the light pearl → dark ink */
.hero-merge--d .hero-ui { color: #1b1b1b; }
.hero-merge--d .hero-bar span { background: rgba(0,0,0,.18); }
.hero-merge--d .hero-bar span::after { background: #1b1b1b; }
.hero-merge--d .hero-arrow { border-color: rgba(0,0,0,.35); }
.hero-merge--d .hero-arrow:hover { background: #1b1b1b; color: #fff; border-color: #1b1b1b; }
.hero-merge--d .hero-sound { background: rgba(0,0,0,.08); }

/* ═══ Preview switcher (hero-preview.php only) ═══ */
.pv-switch { position: fixed; z-index: 95; left: 50%; bottom: 18px; transform: translateX(-50%); display: flex; align-items: center; gap: 4px; padding: 5px; border-radius: 999px;
  background: rgba(27,27,27, .92); color: #fff; font-size: 13px; box-shadow: 0 12px 30px -12px rgba(0,0,0,.5); backdrop-filter: blur(10px); white-space: nowrap; }
.pv-switch span { padding: 0 10px 0 12px; opacity: .6; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; }
.pv-switch a { padding: 8px 14px; border-radius: 999px; }
.pv-switch a:hover { background: rgba(255,255,255,.12); }
.pv-switch a[aria-current] { background: #fff; color: #1b1b1b; font-weight: 600; }
@media (max-width: 599px) { .pv-switch span { display: none; } .pv-switch { font-size: 12px; } .pv-switch a { padding: 8px 10px; } }

/* index.php — USP strip between the hero and Collections, sitting on the colour wash in light ink */
.hero-merge .v2-promise { padding-block: clamp(8px, 2vw, 24px) clamp(16px, 2vw, 28px); }
.hero-merge .v2-promise::before, .hero-merge .v2-promise::after { display: none; }
.hero-merge--a .v2-promise { background: var(--tone); color: #fff; --dim: rgba(255,255,255,.72); }
.hero-merge--a .v2-promise-item + .v2-promise-item::before { background: linear-gradient(180deg, transparent, rgba(255,255,255,.28), transparent); }