/* scenes/door.css -- styles for js/motion/scenes/door.js (the palace doors gate).
   OWNER: the door motion agent (edit only this file + its JS).

   Everything here styles DOM that door.js creates at runtime, and door.js only runs
   with motion (kit.reduced -> no overlays), so reduced motion / no JS is the exact
   PSD frame. At rest every overlay is opacity 0, so before invite:open the slide is
   pixel-identical to the PSD too.

   STATES (classes on the door .stage, set by door.js)
     .dr-lit     entered: seep-in, then the idle loops (seam / jali / floor line /
                 beams / bloom / pool breathe on staggered periods)
     .dr-open    the open resting state (one-shot; WAAPI plays closed -> open on top
                 and lands exactly on these values, then the open loops start)
     .dr-paused  slide off screen: every loop here is paused
   Stack (z): base · .dr-portal 1 (light, leaves, seam) · .dr-spill 2 (floor line,
   pool, beams, rays, bloom, motes canvas) · .dr-hit 2 · couple 3 (+ rim inside) ·
   palms 4/5 · .dr-burst 60 · .dr-petals 61 · .dr-cta / .dr-cue 70.
   iOS: transform/opacity only; the biggest node (.dr-rays/.dr-beams/.dr-bloom) is
   at most stage-wide; no filter / will-change / mix-blend-mode anywhere. */

.dr-portal, .dr-spill, .dr-spill > *, .dr-hit, .dr-petals, .dr-burst,
.dr-jali, .dr-shade, .dr-rim, .dr-pot, .dr-light, .dr-light > * {
  position: absolute;
  pointer-events: none;
}

/* ------------------------------------------------------------ the doorway */
.dr-portal {
  z-index: 1;
  /* a small perspective box: the leaves swing in 3D about their hinges */
  perspective: calc(1000 * var(--u));
  perspective-origin: 50% 46%;
}
.dr-leaf { backface-visibility: hidden; }
.dr-jali, .dr-shade, .dr-rim, .dr-pot { left: 0; top: 0; width: 100%; height: 100%; }
.dr-jali { opacity: 0; }
/* the leaf turning away from the hall: darker toward the hinge, lit at the free
   edge where the light wraps round it (masked to the leaf's own silhouette) */
.dr-shade {
  opacity: 0;
  -webkit-mask: var(--dr-mask) 0 0 / 100% 100% no-repeat;
  mask: var(--dr-mask) 0 0 / 100% 100% no-repeat;
}
.dr-leaf--l .dr-shade {
  background:
    linear-gradient(90deg, rgba(36, 18, 6, 0.5) 0%, rgba(36, 18, 6, 0.18) 70%, rgba(255, 226, 170, 0.55) 97%);
}
.dr-leaf--r .dr-shade {
  background:
    linear-gradient(270deg, rgba(36, 18, 6, 0.5) 0%, rgba(36, 18, 6, 0.18) 70%, rgba(255, 226, 170, 0.55) 97%);
}

/* The cut-out doorway becomes light. Masked to the two leaves' own silhouettes, so
   it covers exactly the blank paper (and its seam line / ragged edges). */
.dr-light {
  inset: 0;
  opacity: 0;
  overflow: hidden;
  background:
    radial-gradient(ellipse 70% 42% at 50% 100%, rgba(255, 214, 150, 0.9), rgba(255, 214, 150, 0) 70%),
    linear-gradient(180deg, #f3cf93 0%, #fae3b8 34%, #fff2d8 62%, #fbe2b2 100%);
  /* left leaf + right leaf + two solid strips over their butt joint: two anti-aliased
     edges meeting would let the paper's seam line through. The narrow strip reaches
     up to the leaves' tops at the apex (the paper's dark seam runs y 440-470 at x 542; strip = x 534-548, y 443-483),
     the wide one covers the rest of the joint. */
  --dr-strip: linear-gradient(#000, #000);
  -webkit-mask-image: var(--dr-mask-l), var(--dr-mask-r), var(--dr-strip), var(--dr-strip);
  mask-image: var(--dr-mask-l), var(--dr-mask-r), var(--dr-strip), var(--dr-strip);
  -webkit-mask-size: calc(255 * var(--u)) calc(746 * var(--u)), calc(246 * var(--u)) calc(739 * var(--u)), calc(40 * var(--u)) calc(712 * var(--u)), calc(14 * var(--u)) calc(40 * var(--u));
  mask-size: calc(255 * var(--u)) calc(746 * var(--u)), calc(246 * var(--u)) calc(739 * var(--u)), calc(40 * var(--u)) calc(712 * var(--u)), calc(14 * var(--u)) calc(40 * var(--u));
  -webkit-mask-position: 0 0, calc(240 * var(--u)) calc(7 * var(--u)), calc(221 * var(--u)) calc(24 * var(--u)), calc(231 * var(--u)) calc(6 * var(--u));
  mask-position: 0 0, calc(240 * var(--u)) calc(7 * var(--u)), calc(221 * var(--u)) calc(24 * var(--u)), calc(231 * var(--u)) calc(6 * var(--u));
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}
.dr-light__core {
  left: -20%; right: -20%; top: 10%; height: 90%;
  background: radial-gradient(ellipse 50% 50% at 50% 55%,
    #fffefa 0%, #fff8e8 22%, rgba(255, 240, 206, 0.75) 45%, rgba(255, 228, 176, 0) 78%);
}
.dr-light__rays {                /* broad, soft, slowly turning: radiance, never a stripe */
  left: -60%; top: -20%; width: 220%; height: 160%;
  opacity: 0.34;
  background: repeating-conic-gradient(from 0deg at 50% 52%,
    rgba(255, 252, 238, 0) 0deg, rgba(255, 252, 238, 0.4) 6deg, rgba(255, 252, 238, 0) 12deg,
    rgba(255, 252, 238, 0) 15deg, rgba(255, 246, 222, 0.26) 19deg, rgba(255, 246, 222, 0) 24deg);
  -webkit-mask-image: radial-gradient(closest-side, transparent 8%, #000 40%);
  mask-image: radial-gradient(closest-side, transparent 8%, #000 40%);
}
.dr-seam {
  position: absolute;
  z-index: 3;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(90deg,
    rgba(255, 214, 150, 0) 0%, rgba(255, 214, 150, 0.16) 30%, rgba(255, 236, 196, 0.62) 45%,
    #fff9ec 50%, rgba(255, 236, 196, 0.62) 55%, rgba(255, 214, 150, 0.16) 70%, rgba(255, 214, 150, 0) 100%);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 9%, #000 88%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 9%, #000 88%, transparent 100%);
}

/* ------------------------------------------------------------ the hall's light */
.dr-spill { z-index: 2; inset: 0; }
.dr-floor {                      /* the line of light under the closed doors */
  opacity: 0;
  background: radial-gradient(ellipse 50% 50% at 50% 50%,
    rgba(255, 244, 214, 0.95) 0%, rgba(255, 226, 168, 0.45) 40%, rgba(255, 214, 150, 0) 100%);
}
.dr-pool {                       /* light lying on the carpet */
  opacity: 0;
  transform-origin: 50% 0;
  background: radial-gradient(ellipse 50% 70% at 50% 0%,
    rgba(255, 238, 200, 0.85) 0%, rgba(255, 222, 165, 0.4) 42%, rgba(255, 214, 150, 0) 78%);
}
.dr-beams {                      /* shafts falling from the jali toward the guest */
  opacity: 0;
  transform-origin: 50.56% 4%;
  background: conic-gradient(from 180deg at 50.56% 4%,
    rgba(255, 236, 200, 0) -34deg,
    rgba(255, 236, 200, 0.4) -30deg, rgba(255, 236, 200, 0) -25deg,
    rgba(255, 236, 200, 0) -19deg, rgba(255, 240, 210, 0.5) -15deg, rgba(255, 236, 200, 0) -9deg,
    rgba(255, 236, 200, 0) 10deg, rgba(255, 240, 210, 0.48) 15deg, rgba(255, 236, 200, 0) 21deg,
    rgba(255, 236, 200, 0) 26deg, rgba(255, 236, 200, 0.36) 30deg, rgba(255, 236, 200, 0) 35deg);
  -webkit-mask-image: radial-gradient(ellipse 60% 92% at 50.56% 4%, #000 0%, rgba(0, 0, 0, 0.55) 45%, transparent 100%);
  mask-image: radial-gradient(ellipse 60% 92% at 50.56% 4%, #000 0%, rgba(0, 0, 0, 0.55) 45%, transparent 100%);
}
.dr-rays {                       /* radiance all round the open doorway */
  opacity: 0;
  border-radius: 50%;
  background: conic-gradient(from 0deg at 50% 50%,
    rgba(255, 240, 210, 0) 0deg, rgba(255, 240, 210, 0.5) 6deg, rgba(255, 240, 210, 0) 13deg,
    rgba(255, 240, 210, 0) 24deg, rgba(255, 244, 220, 0.4) 29deg, rgba(255, 240, 210, 0) 34deg,
    rgba(255, 240, 210, 0) 47deg, rgba(255, 240, 210, 0.55) 55deg, rgba(255, 240, 210, 0) 62deg,
    rgba(255, 240, 210, 0) 78deg, rgba(255, 244, 220, 0.38) 83deg, rgba(255, 240, 210, 0) 88deg,
    rgba(255, 240, 210, 0) 102deg, rgba(255, 240, 210, 0.5) 110deg, rgba(255, 240, 210, 0) 118deg,
    rgba(255, 240, 210, 0) 133deg, rgba(255, 244, 220, 0.42) 139deg, rgba(255, 240, 210, 0) 145deg,
    rgba(255, 240, 210, 0) 158deg, rgba(255, 240, 210, 0.6) 167deg, rgba(255, 240, 210, 0.6) 172deg, rgba(255, 240, 210, 0) 181deg,
    rgba(255, 240, 210, 0) 190deg, rgba(255, 244, 220, 0.5) 197deg, rgba(255, 240, 210, 0) 204deg,
    rgba(255, 240, 210, 0) 219deg, rgba(255, 240, 210, 0.45) 226deg, rgba(255, 240, 210, 0) 232deg,
    rgba(255, 240, 210, 0) 248deg, rgba(255, 244, 220, 0.38) 254deg, rgba(255, 240, 210, 0) 260deg,
    rgba(255, 240, 210, 0) 276deg, rgba(255, 240, 210, 0.5) 284deg, rgba(255, 240, 210, 0) 291deg,
    rgba(255, 240, 210, 0) 306deg, rgba(255, 244, 220, 0.42) 312deg, rgba(255, 240, 210, 0) 318deg,
    rgba(255, 240, 210, 0) 333deg, rgba(255, 240, 210, 0.52) 341deg, rgba(255, 240, 210, 0) 349deg);
  -webkit-mask-image: radial-gradient(closest-side, transparent 22%, #000 34%, rgba(0, 0, 0, 0.45) 62%, transparent 100%);
  mask-image: radial-gradient(closest-side, transparent 22%, #000 34%, rgba(0, 0, 0, 0.45) 62%, transparent 100%);
}
.dr-bloom {                      /* the glare round the doorway (hides its rim) */
  opacity: 0;
  border-radius: 50%;
  background: radial-gradient(closest-side,
    rgba(255, 251, 238, 0.95) 0%, rgba(255, 242, 214, 0.78) 30%, rgba(255, 228, 182, 0.3) 62%, rgba(255, 220, 170, 0) 100%);
}
.dr-motes { left: 0; top: 0; }
.dr-rim { opacity: 0; }

/* ------------------------------------------------------------ interaction */
.dr-hit {
  z-index: 2;
  pointer-events: auto;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.dr-open .dr-hit { display: none; }

/* The pill: hardik-nandini / intro style (warm dark glass, glowing dot, slow pulse),
   centred on the plinth below the couple -- never over the heads or the doors. */
.dr-cta {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(22 * var(--u));
  z-index: 70;
  width: max-content;
  min-height: 44px;
  margin: 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  padding: 0.62em 1.35em;
  border: 1px solid rgba(255, 232, 196, 0.38);
  border-radius: 999px;
  background: rgba(64, 40, 22, 0.62);
  box-shadow: 0 8px 26px rgba(40, 24, 12, 0.32), 0 0 0 0 rgba(255, 214, 150, 0.4);
  color: #fff8f0;
  font-family: "Quattrocento", Georgia, "Times New Roman", serif;
  font-size: max(14px, calc(31 * var(--u)));
  letter-spacing: 0.05em;
  line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity 0.7s ease, transform 0.9s cubic-bezier(0.16, 1, 0.3, 1), visibility 0s linear 0.7s;
}
.dr-cta__dot {
  width: 0.58em;
  height: 0.58em;
  border-radius: 50%;
  background: #ffd9a8;
  box-shadow: 0 0 10px rgba(255, 201, 132, 0.9);
}
.dr-cta.is-on {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity 0.7s ease, transform 0.9s cubic-bezier(0.16, 1, 0.3, 1), visibility 0s;
  animation: dr-cta-pulse 2.6s ease-in-out 0.9s infinite;
}
.dr-cta.is-on .dr-cta__dot { animation: dr-dot 2.6s ease-in-out 0.9s infinite; }
.dr-cta.is-gone {
  opacity: 0;
  visibility: hidden;
  transform: scale(0.92);
  animation: none;
  transition: opacity 0.28s ease, transform 0.4s ease, visibility 0s linear 0.4s;
}
.dr-cta:focus-visible { outline: 3px solid #fff8f0; outline-offset: 3px; }
@keyframes dr-cta-pulse {
  0%, 100% { transform: scale(1); box-shadow: 0 8px 26px rgba(40, 24, 12, 0.32), 0 0 0 0 rgba(255, 214, 150, 0.38); }
  50%      { transform: scale(1.045); box-shadow: 0 8px 26px rgba(40, 24, 12, 0.32), 0 0 0 7px rgba(255, 214, 150, 0); }
}
@keyframes dr-dot {
  0%, 100% { opacity: 0.7; }
  50%      { opacity: 1; }
}

.dr-cue {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(30 * var(--u));
  z-index: 70;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35em;
  pointer-events: none;
  color: #fffaf0;
  font-family: "Quattrocento", Georgia, "Times New Roman", serif;
  font-size: max(12px, calc(26 * var(--u)));
  letter-spacing: 0.22em;
  text-transform: uppercase;
  text-shadow: 0 1px 6px rgba(50, 28, 10, 0.75), 0 0 18px rgba(50, 28, 10, 0.45);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.9s ease, transform 1.1s cubic-bezier(0.16, 1, 0.3, 1);
}
.dr-cue.is-on { opacity: 1; transform: none; }
.dr-cue.is-gone { opacity: 0; transform: translateY(-6px); transition: opacity 0.45s ease, transform 0.6s ease; }
.dr-cue__chev {
  width: 0.7em;
  height: 0.7em;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  filter: drop-shadow(0 1px 3px rgba(50, 28, 10, 0.7));   /* tiny node */
  animation: dr-chev 1.8s ease-in-out infinite;
}
@keyframes dr-chev {
  0%, 100% { transform: translateY(-2px) rotate(45deg); opacity: 0.65; }
  50%      { transform: translateY(5px) rotate(45deg); opacity: 1; }
}

/* ------------------------------------------------------------ petals + burst */
.dr-petals { inset: 0; z-index: 61; }
.dr-petal { position: absolute; height: auto; opacity: 0; pointer-events: none; user-select: none; -webkit-user-drag: none; }
.dr-burst { z-index: 60; }

/* ------------------------------------------------------------ idle (.dr-lit) */
.dr-lit .dr-seam  { animation: dr-seep-seam 1.8s ease-out 0.5s both, dr-seam 4.2s ease-in-out 2.3s infinite; }
.dr-lit .dr-jali  { animation: dr-seep-jali 2.2s ease-out 0.7s both, dr-jali 5.6s ease-in-out 2.9s infinite; }
.dr-lit .dr-leaf--r .dr-jali { animation-delay: 0.85s, 3.6s; }
.dr-lit .dr-floor { animation: dr-seep-floor 2s ease-out 0.6s both, dr-floor 4.8s ease-in-out 2.6s infinite; }
.dr-lit .dr-beams { animation: dr-seep-beams 2.6s ease-out 1s both, dr-beams 7.4s ease-in-out 3.6s infinite; }
.dr-lit .dr-pool  { animation: dr-seep-pool 2.4s ease-out 0.9s both, dr-pool 6.2s ease-in-out 3.3s infinite; }
.dr-lit .dr-bloom { animation: dr-seep-bloom 2.4s ease-out 0.8s both, dr-bloom 6.8s ease-in-out 3.2s infinite; }

@keyframes dr-seep-seam  { from { opacity: 0; } to { opacity: 0.6; } }
@keyframes dr-seam       { 0%, 100% { opacity: 0.6; } 50% { opacity: 0.95; } }
@keyframes dr-seep-jali  { from { opacity: 0; } to { opacity: 0.7; } }
@keyframes dr-jali       { 0%, 100% { opacity: 0.7; } 45% { opacity: 1; } }
@keyframes dr-seep-floor { from { opacity: 0; } to { opacity: 0.7; } }
@keyframes dr-floor      { 0%, 100% { opacity: 0.7; } 50% { opacity: 1; } }
@keyframes dr-seep-beams { from { opacity: 0; } to { opacity: 0.38; } }
@keyframes dr-beams      { 0%, 100% { opacity: 0.38; transform: rotate(0deg); } 50% { opacity: 0.58; transform: rotate(1.2deg); } }
@keyframes dr-seep-pool  { from { opacity: 0; } to { opacity: 0.26; } }
@keyframes dr-pool       { 0%, 100% { opacity: 0.26; } 50% { opacity: 0.38; } }
@keyframes dr-seep-bloom { from { opacity: 0; } to { opacity: 0.1; } }
@keyframes dr-bloom      { 0%, 100% { opacity: 0.1; } 50% { opacity: 0.17; } }

/* ------------------------------------------------------------ open (.dr-open) */
/* resting values = the last WAAPI keyframe in door.js open(); loops start after it */
.dr-open .dr-leaf--l { transform: rotateY(74deg); }
.dr-open .dr-leaf--r { transform: rotateY(-74deg); }
.dr-open .dr-shade { opacity: 1; }
.dr-open .dr-jali  { opacity: 0.4; animation: none; }
.dr-open .dr-seam  { opacity: 0; animation: none; }
.dr-open .dr-floor { opacity: 0; animation: none; }
.dr-open .dr-light { opacity: 1; }
.dr-open .dr-light__core  { animation: dr-core 5.4s ease-in-out 2.9s infinite; }
.dr-open .dr-light__rays  { animation: dr-spin 46s linear 2.9s infinite; }
.dr-open .dr-beams { opacity: 0.7; animation: dr-beams-open 7.4s ease-in-out 3.2s infinite; }
.dr-open .dr-rays  { opacity: 0.5; animation: dr-rays 11s ease-in-out 3.4s infinite; }
.dr-open .dr-pool  { opacity: 0.72; animation: dr-pool-open 6.2s ease-in-out 3s infinite; }
.dr-open .dr-bloom { opacity: 0.5; animation: dr-bloom-open 6.8s ease-in-out 3.3s infinite; }
.dr-open .dr-rim   { opacity: 0.42; animation: dr-rim 6.8s ease-in-out 3.1s infinite; }

@keyframes dr-core       { 0%, 100% { transform: none; opacity: 1; } 50% { transform: scale(1.05); opacity: 0.9; } }
@keyframes dr-spin       { to { transform: rotate(360deg); } }
@keyframes dr-beams-open { 0%, 100% { opacity: 0.7; transform: rotate(0deg); } 50% { opacity: 0.86; transform: rotate(1deg); } }
@keyframes dr-rays       { 0%, 100% { opacity: 0.5; transform: rotate(0deg); } 50% { opacity: 0.66; transform: rotate(3deg); } }
@keyframes dr-pool-open  { 0%, 100% { opacity: 0.72; } 50% { opacity: 0.84; } }
@keyframes dr-bloom-open { 0%, 100% { opacity: 0.5; transform: none; } 50% { opacity: 0.6; transform: scale(1.03); } }
@keyframes dr-rim        { 0%, 100% { opacity: 0.42; } 50% { opacity: 0.54; } }

.dr-paused .dr-portal *, .dr-paused .dr-spill *, .dr-paused .dr-rim,
.dr-paused .dr-cta, .dr-paused .dr-cta *, .dr-paused .dr-cue * { animation-play-state: paused; }

@media (prefers-reduced-motion: reduce) {
  /* door.js never builds these under reduced motion; belt and braces */
  .dr-spill, .dr-burst, .dr-petals, .dr-cta, .dr-cue, .dr-hit { display: none; }
}