/* The opening: a dark room, the envelope under one warm light, the card that becomes the hall's door
   (envelope.js, envelope_stage.js). Logical properties only, so dir="rtl" mirrors the flow; the 3D
   overlay (words, seal target) is placed in screen pixels by script and needs no mirroring. */

.env-scene {
  background: #070B17;
  color: var(--cream);
  isolation: isolate;
}
.env-stage { position: absolute; inset: 0; z-index: 0; }
/* the room's corners fall away into the dark, so the light reads as one lamp over the table */
.env-stage::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(85% 70% at 50% 46%, transparent 45%, rgba(4, 6, 14, 0.55) 80%, rgba(3, 4, 10, 0.85) 100%);
}
.env-gl { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; display: block; touch-action: manipulation; }

/* the words above the envelope */
.env-head {
  position: absolute; z-index: 2; inset-inline: 0; inset-block-start: 0;
  padding: calc(var(--safe-t) + clamp(28px, 6vh, 64px)) var(--s5) 0;
  display: flex; flex-direction: column; align-items: center; gap: var(--s3); text-align: center;
  pointer-events: none;
}
.env-eyebrow { color: rgba(232, 222, 200, 0.72); }
.env-to {
  font: 400 var(--t-show)/1.15 var(--f-display); color: #F6EEDD; letter-spacing: -0.005em;
  max-inline-size: 20ch; text-wrap: balance;
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.5);
}
html[lang="ar"] .env-to { font: 500 var(--t-h1)/1.5 var(--f-ar); letter-spacing: 0; }

/* sound: off by default, always visible, quiet */
.env-sound {
  position: absolute; z-index: 3;
  inset-block-start: calc(var(--safe-t) + var(--s3)); inset-inline-start: var(--s3);
  display: inline-flex; align-items: center; gap: var(--s2);
  min-block-size: 44px; padding-inline: var(--s3) var(--s4);
  border: 0; border-radius: var(--r-full);
  background: rgba(246, 240, 230, 0.07); color: rgba(232, 222, 200, 0.78);
  font: 600 var(--t-label)/1 var(--f-ui); letter-spacing: .04em;
  transition: background var(--d-small) var(--ease-arrive);
}
.env-sound svg { inline-size: 20px; block-size: 20px; }
.env-sound .w1, .env-sound .w2 { opacity: 0; }
.env-sound.on .w1, .env-sound.on .w2 { opacity: 1; }
.env-sound.on .x { opacity: 0; }
.env-sound.on { color: var(--gold); }
@media (hover: hover) { .env-sound:hover { background: rgba(246, 240, 230, 0.14); } }

/* the seal itself is a button: an invisible target laid over the wax */
.env-sealhit {
  position: absolute; z-index: 2; inset-block-start: 0; left: 0;
  inline-size: 80px; block-size: 80px; padding: 0; border: 0; border-radius: 50%;
  background: transparent; transform-origin: 0 0;
}
.env-sealhit:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* the words printed on the card's lower page; script scales this 320 px block onto the 3D page */
.env-words {
  position: absolute; z-index: 1; top: 0; left: 0;
  inline-size: 320px; block-size: 219px; padding: 20px 26px 18px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  transform-origin: 0 0; text-align: center; color: #1E3168;
  opacity: 0; pointer-events: none;
}
.env-words .w-star { color: #B8913F; display: block; inline-size: 18px; block-size: 18px; margin-block-end: 4px; }
.env-words .w-star svg { inline-size: 100%; block-size: 100%; display: block; }
.env-words .w-fam { font: 600 10px/1.3 var(--f-ui); letter-spacing: .1em; font-variant-caps: all-small-caps; color: #7A5A1E; font-size: 12px; }
.env-words .w-line { font: italic 400 12.5px/1.35 var(--f-display); color: #3A4A78; }
.env-words .w-couple { font: 400 31px/1.12 var(--f-display); color: #1E3168; margin-block: 4px 6px; letter-spacing: -0.01em; }
.env-words .w-to { font: 600 9.5px/1.3 var(--f-ui); letter-spacing: .12em; font-variant-caps: all-small-caps; color: #7A5A1E; font-size: 11px; padding-block-start: 6px; border-block-start: 1px solid rgba(184, 145, 63, 0.55); }
html[lang="ar"] .env-words .w-fam,
html[lang="ar"] .env-words .w-to { font: 500 11.5px/1.5 var(--f-ar); letter-spacing: 0; font-variant-caps: normal; }
html[lang="ar"] .env-words .w-line { font: 500 12px/1.6 var(--f-ar); font-style: normal; }
html[lang="ar"] .env-words .w-couple { font: 500 26px/1.5 var(--f-ar); letter-spacing: 0; }

/* the foot: one hint line and the one button */
.env-foot {
  position: absolute; z-index: 2; inset-inline: 0; inset-block-end: 0;
  margin-inline: auto; max-inline-size: 420px;
  padding: 0 var(--s5) calc(var(--safe-b) + clamp(20px, 4vh, 40px));
  display: flex; flex-direction: column; align-items: stretch; gap: var(--s3);
}
.env-status { text-align: center; font: 400 var(--t-small)/1.45 var(--f-ui); color: rgba(232, 222, 200, 0.72); min-block-size: 1.45em; }
.env-bar { display: block; block-size: 2px; border-radius: 2px; background: rgba(214, 181, 101, 0.18); overflow: hidden; opacity: 0; margin-inline: 25%; }
.env-bar i { display: block; block-size: 100%; background: var(--gold); transform: scaleX(0); transform-origin: left center; transition: transform .4s var(--ease-arrive); }
html[dir="rtl"] .env-bar i { transform-origin: right center; }
.env-waiting .env-foot { pointer-events: none; }
.env-mini { position: relative; inline-size: 20px; block-size: 20px; flex: none; }
.env-mini .mh { position: absolute; inset: 0; display: block; }
.env-mini .mh svg { inline-size: 20px; block-size: 20px; display: block; }
.env-mini .a { clip-path: polygon(0 0, 54% 0, 44% 42%, 56% 64%, 46% 100%, 0 100%); }
.env-mini .b { clip-path: polygon(54% 0, 100% 0, 100% 100%, 46% 100%, 56% 64%, 44% 42%); }

/* the warm light at the doorway, which the flight comes out of */
.env-veil {
  position: absolute; inset: 0; z-index: 4; pointer-events: none; opacity: 0;
  background: radial-gradient(120% 90% at 50% 45%, #FFF3DE 0%, #FFE2B8 38%, #FFC98A 78%, #E9A866 100%);
}

.env-scene .sr-only { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* no WebGL: the card lies open on the dark cloth, words and button as usual */
.env-flat .env-stage {
  background:
    radial-gradient(60% 45% at 50% 48%, rgba(255, 201, 138, 0.22), transparent 70%),
    #0B1226;
}
.env-flat .env-words {
  opacity: 1; left: 50%; top: 50%; transform: translate(-50%, -50%) scale(1.05);
  background: #F7F1E6; border-radius: 3px;
  box-shadow: inset 0 0 0 6px #F7F1E6, inset 0 0 0 8px #D6B565, 0 24px 60px rgba(0, 0, 0, 0.55);
}
.env-flat .env-sealhit { display: none; }