/* =========================================================================
   Ciano Meubles — the reveal stack, shared
   Lifted out of home-sections.css so the home page is no longer the only
   page that can have it. Any page that pins the hero (.dhero + .dhero-stage
   from hero.css) puts its body content in a .dsheet, and js/reveal-stack.js
   turns each direct child of that sheet into a panel — so this file has to
   load on every one of them, not just the home page.

   Load order: tokens.css, hero.css, then this. Nothing here decides a colour
   of its own; --x-* comes from tokens.css.
   ========================================================================= */


/* =========================================================================
   SECTION REVEAL
   The hero's reveal, repeated at every seam. Each panel is opaque and carries
   the same shadow lip the sheet uses over the hero, so the arriving section
   reads as a sheet sliding over the one before it; the outgoing one holds
   back, recedes and dims under `--rvs-*`, painted by js/reveal-stack.js.

   `isolation: isolate` keeps each panel's own stacking context intact, so the
   z-index ladder does not disturb anything positioned inside a section.
   ========================================================================= */

.rvs {
  position: relative;
  isolation: isolate;
  background-color: var(--color-bg, var(--x-paper));
  /* Translate only. A scale here shrank the panel away from its own layout
     box and opened a strip of sheet background at the seam — the exact white
     bar this section is supposed to hide. The holds ramp in seam order, so
     an outgoing panel is always held further than the one arriving and the
     two can only ever overlap, never part. */
  transform: translate3d(0, var(--rvs-hold, 0px), 0);
  will-change: transform;
  box-shadow: 0 -34px 70px rgba(var(--x-dark-rgb), 0.30);
}

/* The section's own background wins over the fallback above.

   All three dark panels now share --x-dark. The services band still reads as
   lifted off its neighbours, but by the warm radial light it already carries
   rather than by a second near-black two L* away from the first. Light does
   the lifting; the hex does not have to.

   .phl is absent here on purpose: it now lives inside .dclose rather than
   being a panel of its own, so it is never given .rvs. */
.rvs.dsvc { background-color: var(--x-dark); }
.rvs.apx  { background-color: var(--x-dark); }

/* Dims as it is covered, exactly as the hero stage does. */
.rvs::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 9;
  pointer-events: none;
  background: var(--x-dark);
  opacity: var(--rvs-dim, 0);
}

/* Philosophy, the CTA and the footer are one panel, so the reveal never runs
   between blocks that share a ground — which showed only as a shadow and a
   dim drifting across flat colour.

   The panel and all three of its children carry the same ground, paper at
   95%. Keep the two rules below in step — if the ground changes, it changes
   in both, or the close goes back to reading as separate sections.

   Written through --x-paper-rgb rather than as a literal rgba(247, 242, 234,
   0.95) so the translucent value cannot drift away from the solid --x-paper
   it is derived from; that is exactly what the channel triples in tokens.css
   exist for. The 5% is live: .dclose is the last panel in the reveal stack
   and the dark collections panel passes under it, so the ground cools very
   slightly as that panel is covered. Because the children repaint the same
   95% over the panel's own 95%, the close sits at ~99.75% effective opacity
   where they cover it — near-flat, and uniform since the three between them
   cover the panel's full height. */
/* `> *` rather than a list of the three block names the home page happens to
   use. What goes in the close differs by page — philosophy + CTA + footer on
   home, contact + footer on about, CTA + footer on collections — and the rule
   is the same for all of them: whatever is in here shares the panel's ground.
   Naming the blocks meant every new page had to remember to come back and add
   itself, and a block that forgot showed up as the one stripe of a different
   cream in the close. */
.dclose { background-color: rgba(var(--x-paper-rgb), 0.95); }
.dclose > * { background: rgba(var(--x-paper-rgb), 0.95); }

/* Seamless close: no rule anywhere inside it, and the last section before the
   footer gives up most of its bottom padding so the two meet rather than sit
   120px apart on the same colour. footer's border-top comes from style.css and
   is cancelled here only, so every other page keeps it. */
.dclose > section {
  padding-bottom: clamp(30px, 4vw, 56px);
  border-top: 0;
  border-bottom: 0;
}
.dclose > footer { border-top: 0; }

/* Nothing is covering the last panel, so it never needs the lip or the veil. */
.dsheet > .rvs:last-child { box-shadow: none; }
.dsheet > .rvs:last-child::after { display: none; }

@media (prefers-reduced-motion: reduce) {
  .rvs { transform: none !important; box-shadow: none; }
  .rvs::after { display: none; }
}