/* ==========================================================================
   MAHARASHTRA WEDDING — Opening / entrance sequence
   --------------------------------------------------------------------------
   Geometry notes (all figures measured from entrance-1-wide-pc-screen.png,
   1774 x 887, the single plate the whole outside world comes from):

   * The closed doors occupy x 741..1030, split down the middle at x 885.5,
     with a cusped arch topping out at y 323 and a foot at y 735.
   * The leaf boxes run to y 742 — a few pixels onto the threshold — so that
     the way perspective lifts a leaf's bottom edge as it swings can never
     uncover the opening behind it.
   * The arch silhouette below was traced column by column off the artwork,
     symmetrised, and kept a couple of pixels INSIDE the timber: a clip that
     falls slightly short hides under the reveal shadow, whereas an over-wide
     one would spill courtyard onto the stone surround.
   ========================================================================== */

:root {
  --plate-aspect: 2;                 /* 1774 / 887 */

  /* --- the door opening, as fractions of the plate ----------------------- */
  --door-left: 41.7700%;             /* x 741 / 1774 */
  --door-width: 16.2909%;            /* 289   / 1774 */
  --door-top: 36.3021%;              /* y 322 / 887  */
  --door-height: 47.3506%;           /* 420   / 887  */

  /* --- interior artwork: entrance-2-inside is an exact crop of
         entrance-2-inside-big at x 31.528%..70.833%, y 16.667%..100% ------ */
  --inside-left: 31.5278%;
  --inside-top: 16.6667%;
  --inside-width: 39.3056%;
  --inside-height: 83.3333%;

  /* set by JS on resize */
  --stage-w: 0px;
  --stage-h: 0px;
  --stage-x: 0px;
  --stage-y: 0px;
  --perspective: 1000px;
  --perspective-x: 50%;
  --perspective-y: 25%;

  --ink: #2a1a10;
  --sky: #b9dcf0;                    /* matches the sky in the plate */
}

/* --------------------------------------------------------------------------
   Page shell
   -------------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html {
  /* The experience is vertical; never allow sideways drift. This must be
     `clip` rather than `hidden`: `overflow-x: hidden` silently turns the
     element into a scroll container, which breaks `position: sticky` on
     every descendant — and the pinned camera scene depends on it. */
  overflow-x: clip;
}

body {
  margin: 0;
  background: var(--sky);
  color: var(--ink);
  font-family: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* --------------------------------------------------------------------------
   Scroll track + pinned scene
   -------------------------------------------------------------------------- */

.wada-opening {
  position: relative;
  height: 420vh;
  background: var(--sky);
}

.wada-scene {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  background: var(--sky);
  /* hidden until the artwork has decoded, so no blank or half-drawn frames */
  opacity: 0;
  transition: opacity 900ms ease;
}

.wada-scene.is-ready { opacity: 1; }

/* Promote the moving layers only while the opening is on screen, so the rest
   of the page never pays for compositing it. */
.wada-scene.is-live .wada-stage,
.wada-scene.is-live .wada-courtyard,
.wada-scene.is-live .wada-door { will-change: transform; }

/* --------------------------------------------------------------------------
   Layer 0 — the courtyard, seen through the doorway
   The portal is never transformed, so JS can clip it to the arch in plain
   viewport coordinates as the camera moves; the courtyard inside carries its
   own, much slower transform.
   -------------------------------------------------------------------------- */

/* Above the plate, not behind it: the plate is a complete opaque scene, so
   the interior is uncovered by clipping it to the opening rather than by
   showing through a hole. */
.wada-portal {
  position: absolute;
  inset: 0;
  z-index: 2;
}

.wada-courtyard {
  position: absolute;
  top: 0; left: 0;
  transform-origin: 50% 50%;
}

.wada-courtyard img {
  position: absolute;
  display: block;
  /* Each image is given exactly its own aspect ratio, so nothing stretches:
     the near crop is 0.7076 wide-to-tall and so is the box it is placed in. */
  object-fit: fill;
}

.wada-courtyard img.wada-courtyard__far {
  inset: 0;
  width: 100%;
  height: 100%;
}

/* The near interior is laid into the exact rectangle of the far one that it
   was cropped from, so the two are always the same view of the same space. */
.wada-courtyard img.wada-courtyard__near {
  left: var(--inside-left);
  top: var(--inside-top);
  width: var(--inside-width);
  height: var(--inside-height);
}

/* warm interior light; only ever seen through the doorway */
.wada-courtyard__glow {
  position: absolute;
  left: 50%; top: 58%;
  width: 120%; height: 120%;
  transform: translate(-50%, -50%);
  background: radial-gradient(
    ellipse at 50% 50%,
    rgba(255, 205, 140, 0.20) 0%,
    rgba(255, 184, 110, 0.09) 38%,
    rgba(255, 160, 80, 0) 70%
  );
  opacity: 0;
  pointer-events: none;
}

/* The gateway has thickness: its jambs and soffit fall into shadow. Sized and
   placed by JS onto the door opening; the portal's clip gives it the arch. */
.wada-reveal {
  position: absolute;
  pointer-events: none;
  background:
    linear-gradient(to bottom, rgba(26, 13, 5, 0.62) 0%, rgba(26, 13, 5, 0) 26%),
    linear-gradient(to right,
      rgba(26, 13, 5, 0.55) 0%, rgba(26, 13, 5, 0) 13%,
      rgba(26, 13, 5, 0) 87%, rgba(26, 13, 5, 0.55) 100%);
}

/* --------------------------------------------------------------------------
   Layer 1 — the Wada. One opaque plate: sky, hills, walls, foreground.
   -------------------------------------------------------------------------- */

.wada-stage {
  position: absolute;
  left: var(--stage-x);
  top: var(--stage-y);
  width: var(--stage-w);
  height: var(--stage-h);
  z-index: 1;
  /* the camera flies at the doorway, so everything scales about it */
  transform-origin: 49.9154% 59.6392%;
}

.wada-plate {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* --------------------------------------------------------------------------
   Layer 2 — the doors
   Two leaves cut from the plate, hung on their outer edges. They cover the
   opening exactly when shut, so the closed doors you see at rest ARE the
   leaves; swinging them uncovers the courtyard behind.
   -------------------------------------------------------------------------- */

.wada-doorway {
  position: absolute;
  z-index: 3;
  perspective: var(--perspective);
  perspective-origin: var(--perspective-x) var(--perspective-y);
  transform-style: preserve-3d;
}

.wada-door {
  position: absolute;
  top: 0;
  width: 50%;
  height: 100%;
  overflow: hidden;
  backface-visibility: hidden;
}

/* The leaf's darkening as it turns from the light (opacity set by JS). Inside
   the leaf, so the leaf's arch clip trims it exactly as it trims the timber. */
.wada-door__shade {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: #000;
  opacity: 0;
  pointer-events: none;
}

.wada-door img {
  position: absolute;
  /* the leaf is a window onto the full-size plate */
  width: 1227.6817%;                 /* 1774 / 144.5 */
  height: 211.1905%;                 /* 887  / 420   */
  top: -76.6667%;                    /* -322 / 420   */
  display: block;
  max-width: none;
}

/* Silhouettes traced from the arched top of the closed doors */
.wada-door--left {
  left: 0;
  transform-origin: 0% 50%;
  clip-path: polygon(0.000% 26.455%, 5.536% 24.524%, 11.073% 18.810%, 16.609% 14.339%, 22.145% 13.095%, 27.682% 13.175%, 33.218% 10.661%, 38.754% 9.603%, 44.291% 9.418%, 49.827% 8.254%, 55.363% 6.508%, 60.900% 5.952%, 66.436% 5.899%, 71.972% 6.005%, 77.509% 4.259%, 83.045% 3.519%, 88.581% 2.593%, 94.118% 0.238%, 99.654% 0.238%, 100.000% 0.238%, 100% 100%, 0% 100%);
}
.wada-door--left img { left: -512.8028%; }   /* -741 / 144.5 */

.wada-door--right {
  left: 50%;
  transform-origin: 100% 50%;
  clip-path: polygon(0.000% 0.238%, 5.190% 0.238%, 10.727% 2.249%, 16.263% 3.492%, 21.799% 3.677%, 27.336% 5.794%, 32.872% 5.899%, 38.408% 5.899%, 43.945% 6.402%, 49.481% 8.069%, 55.017% 9.286%, 60.554% 9.550%, 66.090% 10.582%, 71.626% 13.545%, 77.163% 12.937%, 82.699% 13.651%, 88.235% 17.857%, 93.772% 23.280%, 99.308% 26.349%, 100.000% 26.455%, 100% 100%, 0% 100%);
}
.wada-door--right img { left: -612.8028%; }  /* -885.5 / 144.5 */

/* --------------------------------------------------------------------------
   Layer 3 — passing under the gateway: a brief, restrained darkening
   -------------------------------------------------------------------------- */

.wada-passage {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  opacity: 0;
  background:
    radial-gradient(ellipse 78% 66% at 50% 52%,
      rgba(28, 14, 6, 0) 42%,
      rgba(28, 14, 6, 0.55) 100%),
    linear-gradient(rgba(30, 16, 7, 0.35), rgba(30, 16, 7, 0.35));
}

/* --------------------------------------------------------------------------
   Layer 4 — scroll cue
   -------------------------------------------------------------------------- */

.wada-cue {
  position: absolute;
  left: 50%;
  bottom: clamp(18px, 4vh, 46px);
  z-index: 6;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  pointer-events: none;
  /* The cue sits over the doorway, so it has to read against dark timber and
     pale stone alike: warm cream with a soft shadow does both. */
  color: rgba(252, 245, 233, 0.92);
  text-shadow: 0 1px 7px rgba(38, 19, 7, 0.75);
}

.wada-cue__word {
  font-size: 11px;
  letter-spacing: 0.42em;
  text-indent: 0.42em;
  text-transform: lowercase;
}

.wada-cue__line {
  width: 1px;
  height: clamp(26px, 5vh, 46px);
  background: linear-gradient(rgba(252, 245, 233, 0.9), rgba(252, 245, 233, 0));
  box-shadow: 0 0 7px rgba(38, 19, 7, 0.7);
  transform-origin: 50% 0;
  animation: wada-cue-breathe 2600ms ease-in-out infinite;
}

@keyframes wada-cue-breathe {
  0%, 100% { transform: scaleY(0.55); opacity: 0.45; }
  50%      { transform: scaleY(1);    opacity: 1; }
}

/* --------------------------------------------------------------------------
   Reduced motion
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .wada-opening { height: 220vh; }
  .wada-cue__line { animation: none; transform: scaleY(1); opacity: 0.7; }
  .wada-scene { transition-duration: 1ms; }
}