/* ============================================================
   ORNAMENTS
   Two things that belong to the whole page rather than a section:

     .sp-frieze          the temple frieze (below-temple-minar), one at
                         every join between sections
     .invitation__damru  Shiva's drum, which plays when it is touched
   ============================================================ */

/* ---- The temple frieze ----------------------------------------------------
   The same painted frieze the invitation opens and closes with, at the same
   scale — 27.4 × min(0.27933vw, 3px). ONE frieze at every join between two
   sections: each section after the venue opens with one hanging down (the
   invitation's own lower frieze serves the venue), and the footer closes the
   page with one pointing back up. In the flow of the page, so it never sits
   on a heading. */

/* shared with the zone under each frieze, which gives the overlap back */
:root {
  --frieze-h: max(24px, min(7.654vw, 82px));
  --frieze-overlap: calc(var(--frieze-h) * 0.3);
}

.sp-frieze {
  /* The painting's lower ~27% is open air between the pendants. That part
     is laid OVER the start of the next zone (and the paper there given the
     room back), so the gaps show the parchment's own texture instead of the
     plain, lighter page colour behind the frieze's box — which read as a
     white strip under every frieze. */
  position: relative;
  z-index: 6;
  display: block;
  width: 100%;
  height: var(--frieze-h);
  margin-bottom: calc(-1 * var(--frieze-overlap));
  background-image: url("../images/below-temple-minar.png");
  background-repeat: repeat-x;
  background-position: center top;
  background-size: auto 100%;
  pointer-events: none;
}

/* pendants point back up along a lower edge, so its open side overlaps upward */
.sp-frieze--bottom {
  margin-top: calc(-1 * var(--frieze-overlap));
  margin-bottom: 0;
  transform: scaleY(-1);
}

/* The parchment sections' own top padding was set for a bare edge; with a
   frieze above, a little less keeps the heading where the eye expects it
   (plus the strip the pendants now hang over). */
.sp-frieze--top + .venue__parchment,
.sp-frieze--top + .story__parchment,
.sp-frieze--top + .events__parchment {
  padding-top: calc(clamp(1.8rem, 4.5vw, 3.6rem) + var(--frieze-overlap));
}

/* Unfurls from its centre as it comes into view (ornaments.js). Only hidden
   once the script has said it will reveal it, so without JS it simply shows. */
.sp-frieze.is-waiting {
  opacity: 0;
}

.sp-frieze.is-in {
  animation: friezeUnfurl 1.4s var(--ease-settle, ease-out) both;
}

/* ---- The damru ------------------------------------------------------------
   Hover it and it shakes for as long as the pointer stays on it: a steady,
   even twist about its waist, the drum lifted a little into a soft warm
   light, a faint ring of sound spreading from it now and then. A tap shakes
   it for a moment.

   The rattle runs on the individual `rotate`, `translate` and `scale`
   properties, which compose with the entrance animation's `transform`
   instead of fighting it. */

.invitation__damru-stage {
  position: relative;
  isolation: isolate;
  display: block;
  margin-top: calc(10 * var(--u));
  cursor: pointer;
  outline: none;
  border-radius: 14px;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.invitation__damru-stage:focus-visible {
  outline: 2px dashed var(--gold, #bd9736);
  outline-offset: 8px;
}

.invitation__damru-stage .invitation__damru {
  position: relative;
  z-index: 1;
  transition: filter 0.2s ease-in;
}

.invitation__damru-stage.is-playing .invitation__damru {
  filter: drop-shadow(0 calc(2 * var(--u)) calc(4 * var(--u)) rgba(201, 140, 40, 0.35));
  transition: filter 0.35s ease-out;
}

/* a soft pool of warm light behind the drum */
.invitation__damru-aura {
  position: absolute;
  inset: -12% -8%;
  z-index: 0;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 214, 140, 0.45), rgba(255, 214, 140, 0) 70%);
  opacity: 0;
  transition: opacity 0.2s ease-in;
  pointer-events: none;
}

.invitation__damru-stage.is-playing .invitation__damru-aura {
  opacity: 1;
  transition: opacity 0.4s ease-out;
}

/* the ring of sound is spawned here by ornaments.js */
.invitation__damru-fx {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: visible;
  pointer-events: none;
}

/* Width and both margins are shares of the stage's WIDTH, so it is a true
   circle centred on the point it is placed at. */
.damru-ring {
  position: absolute;
  left: 50%;
  top: 45%;
  width: 60%;
  aspect-ratio: 1;
  margin: -30% 0 0 -30%;
  border-radius: 50%;
  border: 1.5px solid rgba(189, 151, 54, 0.55);
  opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
  .sp-frieze.is-waiting,
  .sp-frieze.is-in {
    opacity: 1;
    animation: none;
  }
}