/* ============================================================
   CULVAY deck · holo liquid glass
   Loaded LAST so it wins over slides.css surface rules.

   The brief was "holo liquid glass, keep the brand colors", and the
   design system's rule is that grays carry structure while cherry
   carries meaning. Those pull against each other, so the split here
   is deliberate:

     - The IRIDESCENCE is light, not paint. It lives on 1px panel
       edges and top specular highlights, never inside a panel where
       it would sit behind text.
     - Every hue in the holo spectrum is drawn from the token file
       (cherry ramp + blue-500 + white). Nothing off-palette.
     - Cherry stays the signal: exactly one saturated cherry bloom
       per slide, and .glass-card--signal is still the only solid
       cherry fill on a slide.

   Product screenshots (.mock) stay flat and opaque on purpose —
   the marketing/product boundary in the design system says product
   UI gets no gradients or glows, and a crisp product panel reads as
   more real next to the glass chrome.
   ============================================================ */

:root {
  --glass-blur: 44px;
  --glass-sat: 155%;

  /* Iridescent sweep — cherry ramp + one cool token + white. */
  --holo: conic-gradient(from 200deg,
      var(--cherry-300) 0deg,
      #ffffff 52deg,
      var(--cherry-200) 104deg,
      var(--blue-500) 168deg,
      var(--cherry-500) 232deg,
      #ffffff 296deg,
      var(--cherry-300) 360deg);
}

/* ---- Stage: the light the glass has to catch ------------------ */

#stage {
  background: #050506;
  overflow: hidden;
}

/* Two drifting blooms. The cherry one is the signal light source;
   the cool one only exists so the glass edges have something other
   than cherry to refract, which is what stops it reading as a pink
   gradient deck. */
#stage::before,
#stage::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  will-change: transform;
}
#stage::before {
  width: 62vw; height: 62vw;
  top: -22vw; left: -12vw;
  background: radial-gradient(circle, rgba(164, 19, 60, .58), rgba(164, 19, 60, 0) 70%);
  animation: drift-a 26s var(--ease-in-out) infinite alternate;
}
#stage::after {
  width: 54vw; height: 54vw;
  right: -14vw; bottom: -20vw;
  background: radial-gradient(circle, rgba(58, 110, 165, .34), rgba(110, 13, 42, .30) 45%, rgba(5, 5, 6, 0) 72%);
  animation: drift-b 32s var(--ease-in-out) infinite alternate;
}

@keyframes drift-a {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(9vw, 7vh, 0) scale(1.14); }
}
@keyframes drift-b {
  from { transform: translate3d(0, 0, 0) scale(1.06); }
  to   { transform: translate3d(-8vw, -6vh, 0) scale(1); }
}

/* ---- Panel primitives ---------------------------------------- */

/* Inner surfaces need a positioning context for their rim/sheen pseudo-elements.
   The slide itself is deliberately NOT in this list: deck.css positions it
   absolutely to centre it on the stage, and `position: relative` here would
   override that (same specificity, later sheet) and drop every slide back into
   normal flow. It is already a positioned element, so its pseudos work as-is. */
.glass-card,
.step,
.pill,
.brand {
  position: relative;
  isolation: isolate;
}

/* 1px iridescent rim, drawn as a masked gradient border so it stays
   crisp at any scale. This is where the "holo" actually lives. */
.glass::before,
.glass-card::before,
.step::before,
.brand::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: var(--holo);
  opacity: var(--rim, .5);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
  z-index: 6;
}

/* Specular sheen across the top edge — the "liquid" read. Kept in the
   top third and under the content layer so it never sits behind text. */
.glass::after,
.glass-card::after,
.step::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(178deg,
      rgba(255, 255, 255, var(--sheen, .13)) 0%,
      rgba(255, 255, 255, .03) 26%,
      transparent 46%);
  pointer-events: none;
  /* Negative, so it paints above the panel's own background but below all
     content. Do NOT instead promote the children with `position: relative` —
     that would override .slide-rail's absolute positioning and drop the rail
     photo into normal flow. Each of these panels already establishes a
     stacking context, so -1 cannot escape the panel. */
  z-index: -1;
}

/* ---- The slide card ------------------------------------------ */

.slide {
  background: var(--surface);
  color: var(--ink);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
          backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  box-shadow:
    0 40px 120px -24px rgba(0, 0, 0, .72),
    inset 0 1px 0 rgba(255, 255, 255, .10);
  --rim: .58;
  --sheen: .12;
}

/* Dark glass — the deck's default voice. */
.glass--dark {
  --surface: rgba(14, 14, 18, .62);
  --ink: #FFFFFF;
  --ink-soft: rgba(255, 255, 255, .74);
  --ink-mute: rgba(255, 255, 255, .46);
  --hairline: rgba(255, 255, 255, .14);
  --card: rgba(255, 255, 255, .055);
  --card-border: transparent;
  --accent-ink: var(--cherry-200);
}

/* Light glass — frosted, for the title, proof and close slides. */
.glass--light {
  --surface: rgba(248, 246, 247, .82);
  --ink: var(--black);
  --ink-soft: var(--gray-700);
  --ink-mute: var(--gray-600);
  --hairline: rgba(10, 10, 10, .12);
  --card: rgba(255, 255, 255, .58);
  --card-border: transparent;
  --accent-ink: var(--cherry-500);
  --sheen: .34;
}

/* ---- Cards --------------------------------------------------- */

.glass-card {
  border-radius: 16px;
  background: var(--card);
  border: 0;
  -webkit-backdrop-filter: blur(16px) saturate(130%);
          backdrop-filter: blur(16px) saturate(130%);
  --rim: .34;
  --sheen: .10;
}
.glass--light .glass-card { --rim: .26; --sheen: .30; }

/* The one card per slide that carries the point. Still a solid cherry
   fill — this is the signal, and signal does not get diluted. */
.glass-card--signal {
  background: var(--cherry-500);
  -webkit-backdrop-filter: none;
          backdrop-filter: none;
  --ink: #fff;
  --ink-soft: rgba(255, 255, 255, .86);
  --ink-mute: rgba(255, 255, 255, .70);
  --hairline: rgba(255, 255, 255, .26);
  --accent-ink: #fff;
  --rim: .70;
  --sheen: .16;
  color: #fff;
  box-shadow: 0 18px 48px -16px rgba(164, 19, 60, .68);
}
.glass-card--signal .card-no { color: rgba(255, 255, 255, .78) !important; }
.glass-card--signal .stat,
.glass-card--signal .signal,
.glass-card--signal h3 { color: #fff; }

/* ---- Steps rail ---------------------------------------------- */

.step {
  background: var(--card);
  -webkit-backdrop-filter: blur(14px) saturate(130%);
          backdrop-filter: blur(14px) saturate(130%);
  --rim: .30;
  --sheen: .10;
}
.step--on {
  background: var(--cherry-500);
  -webkit-backdrop-filter: none;
          backdrop-filter: none;
  --rim: .66;
  box-shadow: 0 16px 40px -18px rgba(164, 19, 60, .70);
}

/* ---- Chrome -------------------------------------------------- */

.pill {
  background: rgba(255, 255, 255, .07);
  border-color: transparent;
  -webkit-backdrop-filter: blur(12px);
          backdrop-filter: blur(12px);
  --rim: .40;
}
.glass--light .pill { background: rgba(255, 255, 255, .55); }
.pill--solid { background: var(--black); color: #fff; --rim: .55; }
.glass--dark .pill--solid { background: #fff; color: var(--black); }
.pill--soon { background: var(--cherry-100); color: var(--cherry-600); --rim: .5; }

.brand {
  border-color: transparent;
  background: rgba(255, 255, 255, .06);
  -webkit-backdrop-filter: blur(12px);
          backdrop-filter: blur(12px);
  --rim: .5;
}
.glass--light .brand { background: rgba(255, 255, 255, .5); }

.btn--brand { box-shadow: 0 12px 30px -10px rgba(164, 19, 60, .7); }
.btn--ghost {
  background: rgba(255, 255, 255, .07);
  -webkit-backdrop-filter: blur(12px);
          backdrop-filter: blur(12px);
}
.glass--light .btn--ghost { background: rgba(255, 255, 255, .5); }

/* Bars read as light through glass rather than painted blocks. */
.bar-track { background: var(--hairline); }
.bar-fill  { box-shadow: 0 0 12px -2px currentColor; }
.bar--signal .bar-fill {
  background: linear-gradient(90deg, var(--cherry-500), var(--cherry-300));
}

/* ---- Product UI stays flat ------------------------------------ */
/* Design system: product surfaces get no gradients or glows. A crisp
   opaque panel also reads as a real screenshot beside the glass. */
.mock {
  background: #fff;
  border: 1px solid var(--gray-200);
  -webkit-backdrop-filter: none;
          backdrop-filter: none;
  box-shadow: 0 24px 60px -20px rgba(0, 0, 0, .55);
  color: var(--black);
  --ink: var(--black);
  --ink-soft: var(--gray-600);
  --ink-mute: var(--gray-500);
  --hairline: var(--gray-200);
}
.mock::before, .mock::after { display: none; }

/* ---- Photography --------------------------------------------- */

.photo, .slide-rail, .banner {
  box-shadow: 0 24px 60px -22px rgba(0, 0, 0, .6);
}

@media (prefers-reduced-motion: reduce) {
  #stage::before, #stage::after { animation: none; }
}