/* ==========================================================================
   braj-wash.css — one continuous wash for radhatrilogy.com
   Load AFTER css/style.css:
     <link rel="stylesheet" href="css/style.css">
     <link rel="stylesheet" href="css/braj-wash.css">   ← add this line

   WHAT THIS REPLACES
   style.css gives .saga, .parvas, .firstlook__bg::after, .credits and
   .footer each their own full-width linear-gradient(180deg, …). Five
   separate gradients butted end to end — that is what makes a hard seam
   at every section boundary, and why the middle reads as a solid yellow
   band right across the page.

   WHAT IT DOES INSTEAD
   One gradient on main#top, spanning everything below the hero:
     vertical   bhagwa → peetambar → shyam-rang, evenly stepped, one ramp
     horizontal solid at both edges, dissolving to nothing by the centre
   Sections become transparent and simply sit on different parts of it,
   so there is nothing left that *can* break at a boundary.
   The centre stays Krishna blue. No HTML change, no JS.
   ========================================================================== */

:root {
  /* the three notes, sampled from the Holi key art */
  --w-bhagwa:    #E8801A;
  --w-peetambar: #E9B417;
  --w-violet:    #7C2BBE;
  --w-blue:      #2A4FB0;
  --w-ground:    #0b1638;   /* the Krishna blue that must stay in the centre */

  /* left → centre → right. Opaque at the edge, gone by 50%.
     Lower the 0%/100% alpha below .82 for an even softer frame. */
  --w-edge: linear-gradient(90deg,
    rgb(0 0 0/.82) 0%,   rgb(0 0 0/.80) 2.5%,
    rgb(0 0 0/.62) 5%,   rgb(0 0 0/.42) 8%,
    rgb(0 0 0/.25) 11.5%, rgb(0 0 0/.14) 15.5%,
    rgb(0 0 0/.072) 20%, rgb(0 0 0/.032) 25.5%,
    rgb(0 0 0/.012) 32%, rgb(0 0 0/.004) 40%,
    transparent 50%,
    rgb(0 0 0/.004) 60%, rgb(0 0 0/.012) 68%,
    rgb(0 0 0/.032) 74.5%, rgb(0 0 0/.072) 80%,
    rgb(0 0 0/.14) 84.5%, rgb(0 0 0/.25) 88.5%,
    rgb(0 0 0/.42) 92%,  rgb(0 0 0/.62) 95%,
    rgb(0 0 0/.80) 97.5%, rgb(0 0 0/.82) 100%);

  /* the mirror of it — for the section photographs, so they hold the
     centre and fade out at the edges where the wash takes over */
  --w-edge-inv: linear-gradient(90deg,
    transparent 0%, rgb(0 0 0/.22) 8%, rgb(0 0 0/.66) 18%,
    #000 30%, #000 70%,
    rgb(0 0 0/.66) 82%, rgb(0 0 0/.22) 92%, transparent 100%);
}

body { background: var(--w-ground); }

/* ---------- the wash ---------- */
main#top { position: relative; }

main#top::after {
  content: "";
  position: absolute;
  top: 100svh;                      /* starts where the hero ends */
  left: 0; right: 0; bottom: 0;
  z-index: 0;
  pointer-events: none;

  background: linear-gradient(180deg in oklab,
    var(--w-bhagwa)     0%,         /* saga        */
    var(--w-peetambar) 50%,         /* parvas      */
    var(--w-violet)    80%,         /* first look  */
    var(--w-blue)     100%);        /* credits + footer */

  /* layer 1 = the left/right dissolve
     layer 2 = a soft entry, so the wash arrives under the hero instead
               of starting on a line. intersect multiplies the two. */
  -webkit-mask-image: var(--w-edge), linear-gradient(180deg, transparent 0%, #000 5%, #000 100%);
          mask-image: var(--w-edge), linear-gradient(180deg, transparent 0%, #000 5%, #000 100%);
  -webkit-mask-composite: source-in;
          mask-composite: intersect;
}

/* Firefox < 137 has no mask-composite; it takes the first layer only,
   which is the horizontal dissolve — correct, just without the soft entry. */

/* ---------- sections sit ON the wash, they no longer paint it ---------- */
.saga,
.parvas,
.firstlook,
.credits,
.footer {
  position: relative;
  z-index: 1;
  background: transparent;
}

/* the silk sheen was tied to the yellow band that no longer exists */
.parvas::after { display: none; }

/* photographs keep the centre and hand the edges back to the wash */
.parvas__bg,
.firstlook__bg,
.credits__strip {
  -webkit-mask-image: var(--w-edge-inv);
          mask-image: var(--w-edge-inv);
}

/* their overlays were colour ramps of their own — neutral scrim instead,
   so they darken the photo for legibility without tinting the page */
.parvas__bg::after,
.firstlook__bg::after,
.credits__strip::after {
  background: linear-gradient(180deg,
    rgb(11 22 56 / .88) 0%,
    rgb(11 22 56 / .62) 30%,
    rgb(11 22 56 / .62) 70%,
    rgb(11 22 56 / .88) 100%);
}
.parvas__bg img      { filter: saturate(.3) brightness(.34) blur(1.5px); mix-blend-mode: normal; opacity: .55; }
.firstlook__bg img   { filter: saturate(.4) brightness(.42) blur(.5px); }
.credits__strip img  { filter: saturate(.25) brightness(.24) blur(2px); }

/* ---------- rules that cut across the full width are breaks too ---------- */
.footer { border-top: 0; }
.ticker { border-top: 0; border-bottom: 0; }

/* cards carry their own ground so type stays legible over the wash */
.parva {
  background: linear-gradient(180deg, rgb(18 28 69 / .82), rgb(11 19 48 / .88));
  border-color: rgb(233 196 106 / .34);
  box-shadow: none;
}
.parva--active { border-color: rgb(233 196 106 / .6); }

/* the parvas title went pale for the yellow band it no longer sits on */
.parvas .sec-title__hi { color: #F4EDE0; text-shadow: 0 2px 18px rgb(7 12 34 / .8); }
.parvas .sec-title__en,
.parvas .sec-title::before { color: var(--bhagwa-l, #ffb35c); }

@media (prefers-reduced-motion: reduce) {
  main#top::after { transition: none; }
}

/* ---------- hand-off from style.css (added by the site build) ----------
   style.css still carries the earlier fixed .matte layer and a few !important
   overlays from previous passes; this file supersedes them. */
.matte { display: none !important; }
.fabric { background: transparent !important; }
.credits__strip { display: block; }
.fabric > * { position: relative; }
main#top > .fabric { z-index: 1; }
/* section photographs also fade top/bottom, so their scrim never draws a line at a section boundary */
.parvas__bg, .firstlook__bg, .credits__strip {
  -webkit-mask-image: var(--w-edge-inv), linear-gradient(180deg, transparent 0%, #000 22%, #000 78%, transparent 100%);
          mask-image: var(--w-edge-inv), linear-gradient(180deg, transparent 0%, #000 22%, #000 78%, transparent 100%);
  -webkit-mask-composite: source-in;
          mask-composite: intersect;
}
/* softer edges: lower overall wash opacity so the border reads transparent */
main#top::after { opacity: .55; }
/* a little softer, a little wider band */
main#top::after { opacity: .45; }
:root {
  --w-edge: linear-gradient(90deg,
    rgb(0 0 0/.86) 0%,   rgb(0 0 0/.84) 3.5%,
    rgb(0 0 0/.68) 7%,   rgb(0 0 0/.5) 11%,
    rgb(0 0 0/.34) 15.5%, rgb(0 0 0/.22) 20.5%,
    rgb(0 0 0/.13) 26%,  rgb(0 0 0/.07) 32%,
    rgb(0 0 0/.03) 39%,  rgb(0 0 0/.01) 45%,
    transparent 50%,
    rgb(0 0 0/.01) 55%,  rgb(0 0 0/.03) 61%,
    rgb(0 0 0/.07) 68%,  rgb(0 0 0/.13) 74%,
    rgb(0 0 0/.22) 79.5%, rgb(0 0 0/.34) 84.5%,
    rgb(0 0 0/.5) 89%,   rgb(0 0 0/.68) 93%,
    rgb(0 0 0/.84) 96.5%, rgb(0 0 0/.86) 100%);
}

main#top::after { opacity: .36; }

main#top::after { opacity: .28; }
/* first look: let the Holi key art show through a little more */
.firstlook__bg img { filter: saturate(.75) brightness(.62) blur(0); opacity: .6; }
.firstlook__bg::after { background: linear-gradient(180deg, rgb(11 22 56 / .7) 0%, rgb(11 22 56 / .38) 30%, rgb(11 22 56 / .38) 70%, rgb(11 22 56 / .7) 100%); }
/* parvas: let the temple key art show through a little more */
.parvas__bg img { filter: saturate(.7) brightness(.6) blur(0); opacity: .6; }
.parvas__bg::after { background: linear-gradient(180deg, rgb(11 22 56 / .7) 0%, rgb(11 22 56 / .4) 30%, rgb(11 22 56 / .4) 70%, rgb(11 22 56 / .7) 100%); }
/* parvas: keep Krishna's crown in frame — anchor the photo to its top, softer top fade */
.parvas__bg img { object-position: 50% 0%; }
.parvas__bg {
  -webkit-mask-image: var(--w-edge-inv), linear-gradient(180deg, transparent 0%, #000 9%, #000 78%, transparent 100%);
          mask-image: var(--w-edge-inv), linear-gradient(180deg, transparent 0%, #000 9%, #000 78%, transparent 100%);
}
.parvas__bg::after { background: linear-gradient(180deg, rgb(11 22 56 / .45) 0%, rgb(11 22 56 / .38) 30%, rgb(11 22 56 / .4) 70%, rgb(11 22 56 / .7) 100%); }
/* parvas: Krishna's face fully visible above the title — no top fade, clear scrim at the top, title pushed below the face */
.parvas { padding-top: clamp(300px, 26vw, 400px); }
.parvas__bg img { object-position: 50% 0%; filter: saturate(.85) brightness(.72); opacity: .7; }
.parvas__bg {
  -webkit-mask-image: var(--w-edge-inv), linear-gradient(180deg, #000 0%, #000 60%, transparent 100%);
          mask-image: var(--w-edge-inv), linear-gradient(180deg, #000 0%, #000 60%, transparent 100%);
}
.parvas__bg::after { background: linear-gradient(180deg, rgb(11 22 56 / .12) 0%, rgb(11 22 56 / .18) 30%, rgb(11 22 56 / .5) 60%, rgb(11 22 56 / .8) 100%); }
.parvas .sec-title { margin-bottom: clamp(36px, 5vw, 60px); }
@media (max-width: 767px) { .parvas { padding-top: 200px; } }
/* photos more visible (less transparent) — parvas + first look, same treatment */
.parvas__bg img { opacity: .88; filter: saturate(.9) brightness(.8); }
.parvas__bg::after { background: linear-gradient(180deg, rgb(11 22 56 / .06) 0%, rgb(11 22 56 / .12) 30%, rgb(11 22 56 / .45) 60%, rgb(11 22 56 / .8) 100%); }

.firstlook { padding-top: clamp(300px, 26vw, 400px); }
.firstlook__bg img { object-position: 50% 0%; opacity: .88; filter: saturate(.9) brightness(.8) blur(0); }
.firstlook__bg {
  -webkit-mask-image: var(--w-edge-inv), linear-gradient(180deg, #000 0%, #000 60%, transparent 100%);
          mask-image: var(--w-edge-inv), linear-gradient(180deg, #000 0%, #000 60%, transparent 100%);
}
.firstlook__bg::after { background: linear-gradient(180deg, rgb(11 22 56 / .06) 0%, rgb(11 22 56 / .12) 30%, rgb(11 22 56 / .45) 60%, rgb(11 22 56 / .8) 100%); }
.firstlook .divider { margin-bottom: 28px; }
@media (max-width: 767px) { .firstlook { padding-top: 200px; } }