/* ============================================================================
   Chassidish Choir — ornament.css
   The round-4 visual system: the flowing staves (item 3), the musical marks
   (item 4), and the icon tile they share a language with (items 12/14/16).

   Read ornament.js first — it explains WHY the wave is a bent musical stave
   rather than the gold ripple on his reference site, and why the notes sit on
   it instead of beside it.

   Everything in here is decoration. It is all `pointer-events: none`, all
   `aria-hidden`, and all of it is injected after render. Delete this file and
   the site still works; it just stops singing.
   ========================================================================== */

/* ============================================================================
   1. THE LAYER
   ========================================================================== */

.orn {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  /* currentColor is what makes one stave serve both surfaces: on the dark
     sections --accent is gold-300, on the one cream section (.on-paper) it is
     gold-700, and the wave follows without a second rule. */
  color: var(--accent, var(--gold-300));
}

/* ⭐ An absolutely-positioned element with z-index 0 paints in step 7 of the
   painting order — ABOVE in-flow inline content, which is step 6. So the stave
   would sit on top of the words rather than behind them.

   The fix is to lift the content, not to sink the ornament: `z-index: -1` would
   put the stave behind the HOST'S OWN BACKGROUND and it would vanish entirely
   on every section that has one (which is all of them).

   Listed explicitly rather than as `.orn ~ *`. That sibling form also matches
   `.seal-watermark` in the footer, and setting `position: relative` on an
   element that is deliberately `position: absolute` drops it back into the flow
   — an 8px-wide seal suddenly in the middle of the footer links.

   ⚠️⚠️⚠️ ROUND 6 — THIS RULE SILENTLY KILLED A PINNED SECTION. READ BEFORE
   ADDING A SELECTOR HERE.

   `.about__stage`, `.booking__stage` and `.hero__stage` are the three elements
   on this site that go `position: sticky` so they HOLD STILL while the page
   scrolls past them. `position: relative` below overrode that sticky, and the
   failure was completely invisible: the About section still reserved a screen
   and a half of scrolling runway and simply had nothing to show in it, so every
   pixel of that runway came out as blank cream. **That was the "too much empty
   space" the client reported (R6-2) — and also why he twice said that section
   "doesn't move at all."** Two complaints, one cause, and neither pointed here.

   It is currently fixed in `home.css`, which re-asserts the sticky and wins.
   **That fix lives in another file, so this rule is still a loaded gun:**
   `.booking__stage` and `.hero__stage` have no such re-assertion, so **putting
   `data-orn` on the BOOK US section or the hero will kill those two pins the
   same silent way.** That was tested live during round 6, not guessed:
   adding the attribute flipped `sticky` to `relative` on the spot.

   If you need an ornament on either of those, re-assert the sticky in the
   stylesheet that owns that section — do not just delete a name from this list,
   because these selectors are what keeps the content painting ABOVE the staves
   rather than under them. */
[data-orn] > .wrap,
[data-orn] > .about__stage,
[data-orn] > .booking__stage,
[data-orn] > .hero__stage,
[data-orn] > .cta-band__inner {
  position: relative;
  z-index: 1;
}

/* ============================================================================
   2. THE STAVES
   ========================================================================== */

.orn__stave {
  position: absolute;
  left: -2%;
  width: 104%; /* the swell must never end mid-page at either edge */
  height: 100%;
  opacity: 0.16;
  overflow: visible;
}

/* ---- band: one stave across the top of a block ---------------------------
   Used on the interior page headers. This is the "only halfways" half of what
   he described — the ornament is present but it does not follow you down the
   page. */
.orn--band .orn__stave {
  top: 8%;
  height: 78%;
  opacity: 0.2;
}

/* ---- full: three staves down the whole block -----------------------------
   The "entire page" half. Three passes at different heights, opacities and
   horizontal offsets, so it reads as one drifting field rather than as a
   pattern repeating three times. */
.orn--full .orn__stave--a { top: -4%;  height: 46%; opacity: 0.15; }
.orn--full .orn__stave--b { top: 30%;  height: 52%; opacity: 0.11; left: -14%; width: 118%; transform: scaleY(-1); }
.orn--full .orn__stave--c { top: 66%;  height: 44%; opacity: 0.16; left: -6%;  width: 110%; }

/* ---- soft: one very faint stave, low in the block ------------------------ */
.orn--soft .orn__stave {
  top: 42%;
  height: 66%;
  opacity: 0.09;
}

/* On the cream section the same opacities read far heavier — dark ink on light
   paper has more contrast than gold on plum at the same alpha. Halved, or the
   About copy sits on visible scaffolding. */
/* ⚠️ R8-15 — .services-scope IS A PAPER SURFACE TOO AND WAS MISSING HERE.
   The Services section went cream in round 8 with its own token block
   (pages.css .services-scope) instead of .on-paper, so these two rules —
   which exist precisely because dark ink on light paper reads heavier —
   did not apply to it and its staves rendered at dark-page opacity.
   ⭐ THIRD TIME THIS SHAPE HAS BITTEN ON THIS PAGE: a component landing on
   the cream surface without its paper rule. The other two were the white
   hover icon and the cream-on-cream article title. */
.on-paper .orn__stave,
.services-scope .orn__stave,
.orn--paper .orn__stave { opacity: 0.09; }
.on-paper .orn--full .orn__stave--b,
.services-scope .orn--full .orn__stave--b { opacity: 0.06; }

/* ============================================================================
   3. THE MUSICAL MARKS
   "Like a few. Just to put it in the right place."  Never more than one per
   block, and only in blocks that have somewhere for it to go.
   ========================================================================== */

.orn__mark {
  position: absolute;
  color: var(--gold-300);
  opacity: 0.14;
  /* The dimensionality he liked in the icon screenshot, done with light rather
     than with a chrome bevel: the gradient gives the stroke a highlight and the
     shadow lifts the whole mark off the plum. */
  filter: drop-shadow(0 10px 24px rgba(0, 0, 0, 0.5));
}
.on-paper .orn__mark { color: var(--gold-700); opacity: 0.1; }

.orn__note { height: 100%; width: auto; }

/* ⭐ THIS IS THE ANSWER TO "IT SHOULDN'T LOOK THAT EMPTY".
   He sent the Videos page and said the header is "too big of a space… we gotta
   bring it more up", and named the waves as the reason they exist. Measured off
   his screenshot the heading occupied the left third and the right two-thirds
   were nothing at all. That is where the clef goes. */
.orn__mark--right { right: 4%;  top: 50%; height: 74%; translate: 0 -50%; }
.orn__mark--left  { left: 3%;   top: 50%; height: 62%; translate: 0 -50%; }
/* "far" hangs half off the edge — a crop, not a sticker. */
.orn__mark--far   { right: -3%; bottom: -12%; height: 86%; rotate: 8deg; }

/* A phone has no empty right-hand side to fill; the mark would land on the
   words. Below the two-column gate it goes. */
@media (max-width: 700px) {
  .orn__mark--right,
  .orn__mark--left { display: none; }
  .orn__mark--far { height: 54%; right: -14%; opacity: 0.08; }
  .orn--full .orn__stave--b { display: none; }
}

/* ============================================================================
   3b. THE BOOKING FORM — SOFTEST OF ALL. Round 6, R6-15b.
   ============================================================================
   "Behind the entire booking thing where they fill out the information, can
   you make some musical notes?"

   Yes — but this is the one section on the site where the ornament can
   actually do harm. A person is READING and TYPING here, not looking at
   decoration, and gold hairlines crossing behind an input box is the fastest
   way to make a form feel broken. So `soft` is softened again: two thirds of
   its usual weight on the staves, and the mark quieter and smaller than the
   `far` default.

   ⚠️ AND IT MUST NOT COLLIDE WITH THE SEAL. The "Or just call" panel already
   carries a large seal watermark in its top-right corner. `far` puts the mark
   at the BOTTOM right, in the empty band under that panel — two decorations
   fighting over one corner is worse than having neither. Measured on the page,
   not assumed: the seal sits in the panel's upper half, the mark below it. */
.contact .orn__stave { opacity: 0.055; }
.contact .orn__mark { opacity: 0.07; }
.contact .orn__mark--far { height: 58%; right: -5%; bottom: -4%; }

@media (prefers-reduced-motion: reduce) {
  .orn { transition: none; }
}

/* ============================================================================
   4. ICONS
   ========================================================================== */

.ic {
  display: block;
  width: 1em;
  height: 1em;
  flex: 0 0 auto;
  /* Icons that sit inline with text are set from the text, so they never drift
     out of scale with the label beside them. */
  font-size: inherit;
}

/* ---- the tile ------------------------------------------------------------
   Settled by him pointing at two screenshots. He turned DOWN "thin
   single-weight gold outline pictograms on flat black" and picked "richer icons
   on dark rounded cards — gold gradient rather than flat, more detail and a
   slight dimensionality."

   So the depth is built here, in four cheap layers, rather than by drawing
   bevelled artwork:
     1. a dark card that is not flat — a top-lit radial, so it reads as domed
     2. a gold gradient rim, brightest where the light is
     3. a one-pixel inner highlight along the top edge
     4. a cast shadow under the whole tile
   Together those are what separate this from the flat pictograms he rejected. */
.tile {
  position: relative;
  display: grid;
  place-items: center;
  width: 3.4em;
  height: 3.4em;
  flex: 0 0 auto;
  border-radius: 1.05em;
  background:
    radial-gradient(120% 110% at 32% 12%, rgba(227, 200, 119, 0.2), transparent 62%),
    linear-gradient(168deg, var(--plum-700), var(--plum-900) 68%);
  box-shadow:
    inset 0 1px 0 rgba(242, 227, 179, 0.28),
    inset 0 0 0 1px rgba(184, 137, 47, 0.28),
    0 10px 24px rgba(0, 0, 0, 0.34);
  color: var(--gold-200);
  transition: transform var(--dur-slow) var(--ease-out),
              box-shadow var(--dur-slow) var(--ease-out),
              color var(--dur) var(--ease-out);
}
/* The gradient rim. A plain border cannot hold a gradient, so it is painted as
   a ring and masked to the edge. */
.tile::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: var(--grad-gold);
  opacity: 0.55;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  pointer-events: none;
  transition: opacity var(--dur) var(--ease-out);
}
.tile .ic { width: 1.55em; height: 1.55em; }

/* On the cream section the dark card would be a hole punched in the paper. */
.on-paper .tile {
  background:
    radial-gradient(120% 110% at 32% 12%, rgba(255, 255, 255, 0.9), transparent 60%),
    linear-gradient(168deg, var(--paper), var(--paper-2) 72%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    inset 0 0 0 1px rgba(140, 101, 32, 0.24),
    0 8px 20px rgba(36, 21, 40, 0.12);
  color: var(--gold-700);
}

/* ---- inline contact icons (item 12) --------------------------------------
   "By the phone, by the WhatsApp, by the email, everything gets, like, a nice
   icon — something that this is email and this is phone." Small, quiet, and
   sized off the text so they hold their proportion at every breakpoint. */
.with-ic {
  display: inline-flex;
  align-items: center;
  gap: 0.62em;
}
.with-ic .ic {
  width: 1.12em;
  height: 1.12em;
  color: var(--gold-400);
  transition: color var(--dur) var(--ease-out);
}
.with-ic:hover .ic { color: var(--gold-200); }

/* The rail on the booking page prints its values at up to 1.9rem; an icon sized
   off THAT is a dinner plate. It is pegged to the little gold key above it. */
.rail__k .ic { width: 1.35em; height: 1.35em; }