/* ============================================================
   OPENING — "The Sacred Scene"
   ------------------------------------------------------------
   A depth composition laid over the finished invitation.

   THE ONE RULE THAT MATTERS HERE

   .opening (the root) is TRANSPARENT. Only .opening__scene
   carries artwork. If the root held a colour, then clipping or
   fading the scene would uncover that flat colour rather than
   the Hero — which is exactly how an opening ends up reading as
   "a white panel scaling away". The Hero must be what is behind
   the scene at every moment of the exit.

   Sizing uses 100svh. On mobile, 100vh is the viewport at its
   tallest, so with the address bar showing a 100vh overlay runs
   past the screen and the CTA falls below the fold.
   ============================================================ */

.opening {
  position: fixed;
  inset: 0;
  z-index: 100;
  overflow: hidden;
  background: transparent;      /* never a colour — see above */
  --o: clamp(1.13px, 0.18vw, 2.6px);
}

.opening--gone {
  display: none;
}

.opening__defs {
  position: absolute;
  width: 0;
  height: 0;
  pointer-events: none;
}

/* ---- the scene ---------------------------------------------------------- */

.opening__scene {
  position: absolute;
  inset: 0;
  overflow: hidden;
  transform-origin: 50% 52%;
  will-change: transform, opacity;
}

.opening__layer {
  position: absolute;
  inset: 0;
  will-change: transform, opacity, filter;
}

.opening__layer--fore {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}

/* ---- FAR: parchment + light --------------------------------------------- */

.opening__paper {
  position: absolute;
  inset: 0;
  background-color: var(--paper, #fcf3dc);
  background-image: url("../images/bg.png");
  background-size: cover;
  background-position: center;
}

.opening__paper::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(135% 105% at 50% 88%, rgba(255, 241, 208, 0.42) 0%, rgba(252, 243, 220, 0) 78%);
}

/* Sunlight crossing textured paper — warm, faint, never a glow. */
.opening__light {
  position: absolute;
  top: -25%;
  left: -45%;
  width: 72%;
  height: 150%;
  opacity: 0;
  background: radial-gradient(closest-side, rgba(255, 234, 180, 0.95), rgba(255, 234, 180, 0) 100%);
  filter: blur(34px);
  will-change: transform, opacity;
}

/* ---- MID: the sacred environment ----------------------------------------
   The temple is the horizon, not the subject: a band across the lower
   screen so the pale upper half stays clear for the identity. */

.opening__temple-pic {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 54svh;
}

.opening__temple {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 26%;
  /* The artwork dissolves into whatever is behind it, rather than being
     covered by a painted band. The previous approach laid an opaque strip
     of --paper (#fcf3dc) over bg.png's cooler texture, so two different
     creams met at a hard horizontal line. A mask makes no assumption about
     the colour underneath, so there is no seam to mismatch. */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.25) 10%, rgba(0, 0, 0, 0.75) 24%, #000 40%);
  mask-image: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.25) 10%, rgba(0, 0, 0, 0.75) 24%, #000 40%);
  will-change: transform, opacity, filter;
}

@media (min-width: 901px) {
  .opening__temple-pic { height: 58svh; }
}

/* ---- atmosphere ---------------------------------------------------------- */

.opening__flowers {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.opening__flower {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  will-change: transform, opacity;
}

.opening__flower img {
  display: block;
  width: 100%;
  height: auto;
  will-change: transform;
}

/* ---- NEAR: bells ---------------------------------------------------------
   Big + small paired on BOTH sides. Pivot is the chain, never the body. */

.opening__bells {
  position: absolute;
  top: 0;
  display: flex;
  align-items: flex-start;
  gap: calc(6 * var(--o));
}

.opening__bells--left { left: clamp(4px, 3.4vw, 74px); }
.opening__bells--right { right: clamp(4px, 3.4vw, 74px); }

.opening__bell {
  display: block;
  height: auto;
  opacity: 0;
  transform-origin: 50% 0%;
  will-change: transform, opacity;
}

.opening__bell--big { width: calc(30 * var(--o)); }
.opening__bell--small { width: calc(22 * var(--o)); margin-top: calc(-2 * var(--o)); }

/* ---- FORE: identity ------------------------------------------------------ */

.opening__content {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: 100%;
  padding-inline: clamp(16px, 5vw, 48px);
  padding-top: clamp(24px, 6.5svh, 74px);
}

.opening__ganpati {
  display: block;
  width: clamp(46px, 8vw, 96px);
  height: auto;
  opacity: 0;
  will-change: transform, opacity, filter;
}

/* Each line sits in its own mask: the span rises out of a clipped box, so
   the type is uncovered rather than faded on. */
.opening__eyebrow,
.opening__deities,
.opening__names {
  margin: 0;
  overflow: hidden;
}

.opening__eyebrow > span,
.opening__deities > span,
.opening__names > span {
  display: block;
  will-change: transform;
}

.opening__eyebrow {
  margin-top: clamp(10px, 1.6vw, 20px);
  font-family: 'Montserrat', 'Segoe UI', system-ui, sans-serif;
  font-weight: 600;
  font-size: clamp(9px, 1vw, 13px);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-navy-soft, #2f567b);
}

.opening__deities {
  margin-top: clamp(4px, 0.8vw, 10px);
  font-family: 'Roaster Brush', 'Brush Script MT', cursive;
  font-weight: 400;
  font-size: clamp(30px, 4.3vw, 55px);
  line-height: 1.15;
  color: var(--ink-navy, #17395c);
}

.opening__names {
  margin-top: clamp(6px, 1vw, 12px);
  font-family: 'Akshar', 'Segoe UI', system-ui, sans-serif;
  font-weight: 500;
  font-size: clamp(15px, 1.75vw, 24px);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-navy-soft, #2f567b);
}

.opening__rule {
  display: block;
  width: clamp(56px, 8vw, 104px);
  height: auto;
  margin-top: clamp(8px, 1.2vw, 14px);
  opacity: 0;
}

.opening__rule--under { width: clamp(70px, 10vw, 132px); }

/* ---- CTA -----------------------------------------------------------------
   Set into the invitation: ink on gold hairline, no pill bulk, no glow. */

.opening__cta {
  position: relative;
  margin-top: clamp(16px, 2.6vw, 30px);
  padding: clamp(9px, 1vw, 13px) clamp(20px, 2.4vw, 34px);
  font-family: 'Montserrat', 'Segoe UI', system-ui, sans-serif;
  font-weight: 600;
  font-size: clamp(9.5px, 0.95vw, 12px);
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--ink-navy, #17395c);
  /* Its own sheet of paper. Transparent, the label sat on carved stone and
     could not be read; this keeps it legible wherever the horizon lands. */
  background: rgba(252, 243, 220, 0.88);
  border: 1px solid rgba(189, 151, 54, 0.6);
  box-shadow: 0 2px 14px rgba(92, 68, 30, 0.08);
  border-radius: 2px;
  cursor: pointer;
  opacity: 0;
  transition: color 0.4s ease, border-color 0.4s ease;
  will-change: transform, opacity;
}

/* The fill wipes in from below on hover rather than the whole button
   changing colour — quieter, and it reads as ink soaking into paper. */
.opening__cta::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--ink-navy, #17395c);
  transform: scaleY(0);
  transform-origin: 50% 100%;
  transition: transform 0.4s cubic-bezier(0.22, 0.61, 0.24, 1);
}

.opening__cta-label {
  position: relative;
  z-index: 1;
}

.opening__cta:hover {
  color: #fdf6e7;
  border-color: rgba(211, 178, 105, 0.95);
}

.opening__cta:hover::before { transform: scaleY(1); }

.opening__cta:focus-visible {
  outline: 2px solid var(--gold, #bd9736);
  outline-offset: 4px;
}

.opening--leaving .opening__cta { pointer-events: none; }

/* Scroll is held only while the opening is present. */
body.is-opening { overflow: hidden; }

/* ---- reduced motion ------------------------------------------------------
   No ceremony, and nothing gated behind one: the overlay never renders and
   the invitation is available immediately. */

@media (prefers-reduced-motion: reduce) {
  .opening { display: none !important; }
  body.is-opening { overflow: visible; }
}