:root {
  color-scheme: light;
  --page-background: #e9e3d8;
  background: var(--page-background);
  --artwork-ratio: 1575 / 3408;
  --desktop-invitation-width: 430px;
}
* { box-sizing: border-box; }
html, body { margin: 0; min-width: 0; }
body {
  background: var(--page-background);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  place-items: center;
  min-height: 100vh;
  min-height: 100svh;
}
.invitation {
  width: 100%;
  min-width: 0;
  aspect-ratio: var(--artwork-ratio);
  position: relative;
}
.invitation:focus { outline: none; }
@media (min-width: 768px) and (hover: hover) and (pointer: fine) {
  .invitation { width: min(100%, var(--desktop-invitation-width)); }
}
.invitation__canvas {
  margin: 0;
  width: 100%;
  aspect-ratio: var(--artwork-ratio);
  background: url('./assets/fondo-flores-v7.jpg') center / 100% 100% no-repeat;
}
.invitation__artwork {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: var(--artwork-ratio);
  user-select: none;
  -webkit-user-drag: none;
}
.opening-trigger {
  position: fixed;
  inset: 0;
  z-index: 20;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: transparent;
  cursor: pointer;
  touch-action: pan-y pinch-zoom;
  -webkit-tap-highlight-color: transparent;
}
.opening-trigger:focus-visible { outline: 2px solid #947331; outline-offset: -8px; }
.opening-trigger:disabled { cursor: default; }
.opening-trigger[hidden] { display: none; }
html.is-opening { overflow: hidden; }
html.is-ready { --page-background: var(--paper, #fff); }
html.is-transitioning { --page-background: #fff; }
.invitation[data-state="fading"] { background: #fff; }
html.is-revealing .invitation-content { opacity: 0; }
.invitation[data-state="ready"] {
  width: 100%;
  aspect-ratio: auto;
  min-height: 100vh;
  min-height: 100svh;
}
.white-transition {
  position: fixed;
  inset: 0;
  z-index: 40;
  /* Input shield only: the actual document fades, including behind Safari UI. */
  background: transparent;
  touch-action: none;
  overscroll-behavior: contain;
}
.white-transition[hidden] { display: none; }
.cinema {
  position: fixed;
  z-index: 30;
  overflow: hidden;
  isolation: isolate;
  background: #e9e3d8;
  touch-action: none;
  overscroll-behavior: contain;
}
.cinema__world {
  font-size: 1px;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
  --hinge-x: 785em;
  --hinge-y: 1170em;
  --hinge-overlap: 12em;
  position: absolute;
  left: 0;
  top: 0;
  width: 1575em;
  height: 3408em;
  transform-origin: 0 0;
  will-change: transform;
}
.cinema img { display: block; max-width: none; user-select: none; pointer-events: none; }
.cinema__background, .cinema__plate, .envelope-body {
  position: absolute;
  inset: 0;
  width: 1575em;
  height: 3408em;
}
.cinema__background { z-index: 0; }
.cinema__plate { z-index: 5; }
.cinema__plate--open { z-index: 6; opacity: 0; }
/* Clip the envelope directly instead of allocating full-image SVG mask layers. */
.invitation__artwork, .cinema__plate--closed {
  clip-path: var(--sobre-cerrado);
}
.invitation[data-state="open"] .invitation__artwork,
.invitation[data-state="fading"] .invitation__artwork,
.cinema__plate--open {
  clip-path: var(--sobre-abierto);
}
.envelope-depth {
  position: absolute;
  inset: 0;
  z-index: 2;
  perspective: 5000em;
  perspective-origin: var(--hinge-x) var(--hinge-y);
  transform-style: preserve-3d;
}
.envelope-body {
  z-index: 1;
  /* Keep the registered body beneath the pivot and its antialiased edge. */
  clip-path: var(--sobre-cuerpo);
  transform: translateZ(0);
}
/* The supplied transparent interior is registered to the same 1575 × 3408
   scene in both the moving plate and the canvas that fades to white. */
.envelope-interior-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  clip-path: var(--sobre-cuerpo);
  pointer-events: none;
}
.envelope-interior-image {
  position: absolute;
  left: -0.977778%;
  top: 33.49912%;
  width: 103.106667%;
  height: auto;
  display: block;
  max-width: none;
  user-select: none;
  -webkit-user-drag: none;
}
.invitation__canvas > .envelope-interior-layer { display: none; }
.invitation[data-state="open"] .invitation__canvas > .envelope-interior-layer,
.invitation[data-state="fading"] .invitation__canvas > .envelope-interior-layer { display: block; }
.envelope-flap, .flap-face {
  position: absolute;
  inset: 0;
  transform-origin: var(--hinge-x) var(--hinge-y);
  transform-style: preserve-3d;
}
.envelope-flap { will-change: transform; }
.flap-face { backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.flap-face--front { transform: translateZ(.6em); filter: drop-shadow(0 7em 5em rgba(22, 27, 16, .26)); }
.flap-face--back { transform: rotateX(180deg) translateZ(.6em); }
.flap-texture { position: absolute; overflow: hidden; mask-repeat: no-repeat; -webkit-mask-repeat: no-repeat; mask-size: 100% 100%; -webkit-mask-size: 100% 100%; }
/* Original alpha silhouettes registered against the reference pixels.
   Solapa already contains its seal. We never stack a second seal on it. */
.flap-texture--front {
  left: -28em;
  top: 1112em;
  width: 1628em;
  height: 1185em;
  mask-image: url('./assets/solapa.png');
  -webkit-mask-image: url('./assets/solapa.png');
}
.flap-source { position: absolute; width: 1575em; height: 3408em; }
.flap-source--front { left: 28em; top: -1112em; }
.flap-texture--back {
  left: 0;
  top: 600em;
  width: 1575em;
  height: 600em;
  /* Exact open-reference silhouette, traced against the supplied background. */
  clip-path: polygon(763em 16em, 749em 20em, 739em 24em, 732em 28em, 725em 32em, 720em 36em, 714em 40em, 710em 44em, 705em 48em, 701em 52em, 697em 56em, 694em 60em, 691em 64em, 690em 68em, 687em 72em, 684em 76em, 682em 80em, 680em 84em, 678em 88em, 676em 92em, 674em 96em, 673em 100em, 671em 104em, 671em 108em, 661em 112em, 654em 116em, 648em 120em, 641em 124em, 634em 128em, 628em 132em, 623em 136em, 615em 140em, 609em 144em, 601em 148em, 595em 152em, 589em 156em, 582em 160em, 575em 164em, 569em 168em, 562em 172em, 555em 176em, 551em 180em, 543em 184em, 537em 188em, 530em 192em, 523em 196em, 516em 200em, 510em 204em, 502em 208em, 495em 212em, 488em 216em, 482em 220em, 475em 224em, 469em 228em, 462em 232em, 455em 236em, 449em 240em, 442em 244em, 436em 248em, 429em 252em, 422em 256em, 415em 260em, 409em 264em, 402em 268em, 396em 272em, 389em 276em, 382em 280em, 375em 284em, 369em 288em, 363em 292em, 356em 296em, 350em 300em, 344em 304em, 337em 308em, 330em 312em, 324em 316em, 317em 320em, 310em 324em, 304em 328em, 298em 332em, 291em 336em, 284em 340em, 278em 344em, 271em 348em, 264em 352em, 257em 356em, 252em 360em, 245em 364em, 238em 368em, 231em 372em, 224em 376em, 218em 380em, 211em 384em, 204em 388em, 198em 392em, 191em 396em, 184em 400em, 178em 404em, 171em 408em, 165em 412em, 158em 416em, 151em 420em, 144em 424em, 138em 428em, 131em 432em, 124em 436em, 118em 440em, 114em 444em, 108em 448em, 101em 452em, 95em 456em, 88em 460em, 82em 464em, 75em 468em, 68em 472em, 62em 476em, 56em 480em, 52em 484em, 48em 488em, 45em 492em, 43em 496em, 40em 500em, 38em 504em, 36em 508em, 35em 512em, 34em 516em, 32em 520em, 31em 524em, 31em 528em, 30em 532em, 29em 536em, 29em 540em, 29em 544em, 29em 548em, 29em 552em, 29em 556em, 29em 560em, 29em 564em, 29em 568em, 29em 572em, 29em 576em, 29em 580em, 29em 584em, 29em 588em, 30em 592em, 30em 596em, 28em 600em, 1561em 600em, 1560em 596em, 1560em 592em, 1560em 588em, 1559em 584em, 1557em 580em, 1554em 576em, 1547em 572em, 1546em 568em, 1546em 564em, 1546em 560em, 1546em 556em, 1546em 552em, 1546em 548em, 1546em 544em, 1547em 540em, 1546em 536em, 1546em 532em, 1545em 528em, 1544em 524em, 1544em 520em, 1542em 516em, 1541em 512em, 1540em 508em, 1538em 504em, 1536em 500em, 1535em 496em, 1532em 492em, 1529em 488em, 1526em 484em, 1522em 480em, 1516em 476em, 1511em 472em, 1504em 468em, 1497em 464em, 1491em 460em, 1485em 456em, 1478em 452em, 1471em 448em, 1465em 444em, 1458em 440em, 1451em 436em, 1445em 432em, 1438em 428em, 1432em 424em, 1425em 420em, 1418em 416em, 1412em 412em, 1405em 408em, 1398em 404em, 1391em 400em, 1385em 396em, 1378em 392em, 1372em 388em, 1365em 384em, 1359em 380em, 1351em 376em, 1345em 372em, 1339em 368em, 1332em 364em, 1325em 360em, 1318em 356em, 1312em 352em, 1305em 348em, 1298em 344em, 1291em 340em, 1284em 336em, 1278em 332em, 1272em 328em, 1265em 324em, 1259em 320em, 1252em 316em, 1245em 312em, 1238em 308em, 1232em 304em, 1226em 300em, 1219em 296em, 1213em 292em, 1206em 288em, 1199em 284em, 1192em 280em, 1185em 276em, 1180em 272em, 1173em 268em, 1167em 264em, 1159em 260em, 1154em 256em, 1147em 252em, 1140em 248em, 1134em 244em, 1127em 240em, 1120em 236em, 1114em 232em, 1107em 228em, 1100em 224em, 1093em 220em, 1087em 216em, 1080em 212em, 1074em 208em, 1066em 204em, 1060em 200em, 1054em 196em, 1047em 192em, 1041em 188em, 1034em 184em, 1027em 180em, 1020em 176em, 1014em 172em, 1007em 168em, 1000em 164em, 994em 160em, 987em 156em, 980em 152em, 973em 148em, 966em 144em, 961em 140em, 953em 136em, 946em 132em, 940em 128em, 934em 124em, 927em 120em, 920em 116em, 913em 112em, 906em 108em, 904em 104em, 903em 100em, 902em 96em, 900em 92em, 898em 88em, 896em 84em, 893em 80em, 891em 76em, 889em 72em, 885em 68em, 883em 64em, 880em 60em, 877em 56em, 873em 52em, 869em 48em, 865em 44em, 860em 40em, 855em 36em, 849em 32em, 842em 28em, 833em 24em, 822em 20em, 807em 16em);
}
.flap-source--back { left: 0; top: -600em; }
.envelope-shadow {
  z-index: 1;
  position: absolute;
  left: 25em;
  top: var(--hinge-y);
  width: 1528em;
  height: 757em;
  background: #182010;
  clip-path: polygon(0 0,100% 0,50% 100%);
  transform-origin: 50% 0;
  opacity: .08;
  pointer-events: none;
}
.seal-light {
  position: absolute;
  left: 663em;
  top: 1663em;
  width: 247em;
  height: 251em;
  border-radius: 50%;
  background: linear-gradient(128deg, transparent 27%, rgba(255,247,194,.75) 47%, transparent 66%);
  mix-blend-mode: screen;
  opacity: 0;
  transform: translateZ(1em);
}
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
@media (prefers-reduced-motion: reduce) {
  .cinema { display: none; }
}