/* T2 owns this file: envelope scene styles.
   Every layer sits in one 1536×1024 (3:2) box so the PNGs register (see docs/notes/assets.md).
   Percentages below are image pixels ÷ 1536 (x) or ÷ 1024 / ÷ 1536 (y), noted next to each. */

/* The envelope PNGs have a #fefefe paper-white background; match it so no image edge shows. */
#scene-envelope { --envelope-bg: #fefefe; }

.env-stage {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /* extra room on top for the opened flap and the rising bouquet */
  padding: 14vh 0 6vh;   /* fallback: browsers without svh (old iOS / LINE WebViews) */
  padding: 14svh 0 6svh;
}

.env-open {
  /* The box is wider than the phone: only white paper margin is cropped, the envelope stays fully visible. */
  /* vh first: a custom property is never "invalid" at parse time, so an unsupported svh would make
     var(--box-w) fail later and collapse the box. Only switch to svh where it is supported. */
  --box-w: min(132vw, 720px, 96vh);
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  -webkit-tap-highlight-color: transparent;
}
@supports (height: 1svh) {
  .env-open { --box-w: min(132vw, 720px, 96svh); }
}
.env-open:focus-visible { outline: none; }
.env-open:focus-visible .env-box::after {
  /* focus ring hugging the envelope body (x 261–1272, y 210–876) */
  content: "";
  position: absolute;
  left: 16.5%; right: 16.6%; top: 19.5%; bottom: 13.5%;
  outline: 3px solid var(--ink);
  outline-offset: 6px;
  border-radius: 6px;
}

.env-box {
  position: relative;
  display: block;
  width: var(--box-w);
  margin-left: calc(50% - var(--box-w) / 2);
  aspect-ratio: 3 / 2;
  perspective: 1100px;
  perspective-origin: 50% 30%;
}

.env-layer {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  user-select: none;
  -webkit-user-select: none;
  pointer-events: none;
  /* Feather the image box so the paper edge (not uniformly #fefefe) never shows as a faint rectangle.
     Envelope body is x 17–83 %, y 20–86 % of the box: the fades stay well outside it. */
  --feather-x: linear-gradient(to right, transparent 0, #000 12%, #000 88%, transparent 100%);
  --feather-y: linear-gradient(to bottom, transparent 0, #000 14%, #000 92%, transparent 100%);
  -webkit-mask-image: var(--feather-x), var(--feather-y);
  -webkit-mask-composite: source-in;
  mask-image: var(--feather-x), var(--feather-y);
  mask-composite: intersect;
}

/* envelope_open_empty_tall.png is 1536×1536; its rows 420…1444 = box rows 0…1024. */
.env-tall {
  height: 150%;
  top: -41.016%;
  /* Same feather in tall-image rows: flap tip ≈ row 280 (18.2 %) stays opaque; the bottom fade matches
     the 3:2 layers (box rows 942…1024 = tall 88.7…94 %). */
  --feather-y: linear-gradient(to bottom, transparent 0, #000 15%, #000 88.7%, transparent 94.01%);
}

/* Flap, open side: rows 0…640 of the tall image. Starts edge-on (invisible), hinged at row 640. */
.env-open-flap {
  clip-path: inset(0 0 58.333% 0);
  transform-origin: 50% 41.667%;
  transform: rotateX(-90deg);
  opacity: 0;
}
/* Inside + front of the open envelope: rows 640…1444. */
.env-open-body { clip-path: inset(41.667% 0 5.99% 0); }

/* Front pocket + side folds, redrawn on top so the bouquet rises from BEHIND them.
   Polygon in tall-image pixels: (230,640) (264,640) (652,932) (893,932) (1268,640) (1306,640) (1306,1444) (230,1444). */
.env-pocket {
  clip-path: polygon(15% 41.667%, 17.19% 41.667%, 42.45% 60.68%, 58.14% 60.68%, 82.55% 41.667%, 85% 41.667%, 85% 94.01%, 15% 94.01%);
}

/* Bouquet window: from far above the box down to box row 860 (just above the envelope bottom), so the
   bouquet never shows below the envelope while it is still tucked inside. */
.env-bouquet-clip {
  position: absolute;
  left: 0;
  right: 0;
  top: -60%;
  bottom: 16%;
  overflow: hidden;
  pointer-events: none;
}
.env-bouquet {
  position: absolute;
  left: 50%;
  width: 52%;             /* of the clip box = box width (≈257 CSS px on a phone) */
  max-width: none;
  margin-left: -26%;
  /* Rests with its stem ends at box row ≈594 (tall-image row ≈1014), i.e. ~80 image px BELOW the
     front pocket's top edge (tall row 932): the stems visibly go down into the envelope. */
  bottom: 18.06%;
  opacity: 0;
  transform: translateY(88%); /* starts fully behind the pocket (top at box row ≈522) */
}

/* Closed envelope (seal removed), split into the flap triangle and the rest.
   Flap triangle in box pixels: (258,205) (1278,205) tip (773,592). */
.env-closed-rest {
  clip-path: polygon(0 20.02%, 16.8% 20.02%, 50.33% 57.81%, 83.2% 20.02%, 100% 20.02%, 100% 100%, 0 100%);
}
.env-closed-flap {
  clip-path: polygon(16.8% 20.02%, 83.2% 20.02%, 50.33% 57.81%);
  transform-origin: 50% 20.02%;
}

/* Tapped while the images are still loading: a soft pulse so the tap visibly registered. */
.env-stage.is-waiting .env-box { animation: env-waiting 1.6s ease-in-out infinite; }
.env-stage.is-waiting .env-hint { animation: env-waiting-hint 1.6s ease-in-out infinite; }
@keyframes env-waiting { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .82; transform: scale(.985); } }
@keyframes env-waiting-hint { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
@media (prefers-reduced-motion: reduce) {
  .env-stage.is-waiting .env-box { animation: none; }
}

.env-hint {
  margin: 4px 0 0;
  padding: 0 16px;
  font-size: 20px;
  font-style: italic;
  color: var(--ink-soft);
  text-align: center;
}