/* Fiestrella sealed envelope: the tap-to-open cover shared by the standard and the story-led (VIP) invitation.
   Original design (wax seal with the celebrant's initials, pointed flap, rising card). Theme colours come from the
   invitation's data-theme. Served under style-src 'self'; no inline styles are needed. All motion respects
   prefers-reduced-motion, and the cover is never shown without JavaScript (it stays [hidden] until invitation.js or
   vip-invitation.js enables it). */

@font-face { font-family: "VF Script"; src: url("vip-script.woff2") format("woff2"); font-display: swap; }

:root {
  --env-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --env-script: "VF Script", "Great Vibes", "Snell Roundhand", "Segoe Script", "Apple Chancery", Gabriola, cursive;
  --env-grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .55 0'/></filter><rect width='160' height='160' filter='url(%23n)' opacity='.13'/></svg>");
  /* rosa-dorada (default) */
  --env-paper: #EDD7CC;
  --env-flap: #E6CBBE;
  --env-shade: #DCBBAC;
  --env-liner: #8C2E44;
  --env-liner-2: #A4435B;
  --env-card: #FFF9F5;
  --env-card-ink: #4A2530;
  --env-foil: #B7875A;
  --env-wax: #8A2C43;
  --env-wax-hi: #C4637B;
  --env-wax-lo: #561828;
  --env-wax-ink: #F4D8C8;
  --env-text: #4A2530;
  --env-text-soft: #7B5660;
  /* Focus rings are drawn in the theme's own ink (at least 3:1 against the paper), so the ring shown after the seal
     is focused on load reads as part of the design while staying clear for keyboard users. */
  --env-focus: #6E2236;
}
html[data-theme="noche-azul"] {
  --env-paper: #22346B;
  --env-flap: #1D2D5E;
  --env-shade: #19285A;
  --env-liner: #C9A35A;
  --env-liner-2: #E0C07E;
  --env-card: #FBF6EA;
  --env-card-ink: #1B2548;
  --env-foil: #B08A43;
  --env-wax: #C39A4D;
  --env-wax-hi: #F0D38F;
  --env-wax-lo: #7E5F26;
  --env-wax-ink: #5E4518;
  --env-text: #F2E6C8;
  --env-text-soft: #C9BFA6;
  --env-focus: #FFE08A;
}
html[data-theme="jardin-esmeralda"] {
  --env-paper: #DCE7D3;
  --env-flap: #D2DEC6;
  --env-shade: #C5D4B8;
  --env-liner: #245C47;
  --env-liner-2: #347A5F;
  --env-card: #FCFDF9;
  --env-card-ink: #173A2E;
  --env-foil: #A8894F;
  --env-wax: #245C47;
  --env-wax-hi: #4E9476;
  --env-wax-lo: #123527;
  --env-wax-ink: #D5E9DD;
  --env-text: #173A2E;
  --env-text-soft: #4B6A5D;
  --env-focus: #1D4A39;
}
html[data-theme="marfil-oro"] {
  --env-paper: #F3EAD6;
  --env-flap: #EDE2CA;
  --env-shade: #E3D6B8;
  --env-liner: #7A5A1E;
  --env-liner-2: #9C7A36;
  --env-card: #FFFDF7;
  --env-card-ink: #2E261A;
  --env-foil: #B8964D;
  --env-wax: #7A5A1E;
  --env-wax-hi: #B8964D;
  --env-wax-lo: #4E380C;
  --env-wax-ink: #F7E9C9;
  --env-text: #2E261A;
  --env-text-soft: #5E5140;
  --env-focus: #4E380C;
}
html[data-theme="azul-cielo"] {
  --env-paper: #DCE8F4;
  --env-flap: #D2E1F0;
  --env-shade: #C3D6EA;
  --env-liner: #285A8A;
  --env-liner-2: #3E74A8;
  --env-card: #FAFCFE;
  --env-card-ink: #15304A;
  --env-foil: #B08A45;
  --env-wax: #285A8A;
  --env-wax-hi: #5C8FC2;
  --env-wax-lo: #163A5E;
  --env-wax-ink: #DCEBF8;
  --env-text: #15304A;
  --env-text-soft: #3D5670;
  --env-focus: #163A5E;
}
html[data-theme="lavanda"] {
  --env-paper: #E8DEF3;
  --env-flap: #E0D4EE;
  --env-shade: #D3C3E6;
  --env-liner: #5E3F8F;
  --env-liner-2: #7A5AAB;
  --env-card: #FDFBFF;
  --env-card-ink: #2E2244;
  --env-foil: #B08A45;
  --env-wax: #5E3F8F;
  --env-wax-hi: #9275C2;
  --env-wax-lo: #3A245E;
  --env-wax-ink: #EEE3FA;
  --env-text: #2E2244;
  --env-text-soft: #584A70;
  --env-focus: #3A245E;
}
html[data-theme="borgona"] {
  --env-paper: #4A1A28;
  --env-flap: #421723;
  --env-shade: #3A1420;
  --env-liner: #C9A35A;
  --env-liner-2: #E0C07E;
  --env-card: #FBF6EA;
  --env-card-ink: #2A0E17;
  --env-foil: #B08A43;
  --env-wax: #C39A4D;
  --env-wax-hi: #F0D38F;
  --env-wax-lo: #7E5F26;
  --env-wax-ink: #5E4518;
  --env-text: #F8EEE6;
  --env-text-soft: #E3CFC9;
  --env-focus: #FFE08A;
}
/* The cinematic story-led treatment is always dark: light text over its atmosphere. The focus ring keeps the theme's
   ink, because it is drawn on the envelope paper, not on the dark atmosphere. */
html.vip-cinematic { --env-text: #F7EFE6; --env-text-soft: #E5D6CB; }

/* ---------------------------------------------------------------- standard-layout cover ---------------------------------------------------------------- */
.env-cover {
  position: fixed; inset: 0; z-index: 80; display: flex; align-items: center; justify-content: center; overflow: auto;
  padding: max(24px, env(safe-area-inset-top, 0px)) 16px max(24px, env(safe-area-inset-bottom, 0px));
  background: var(--bg, #FBF3EF); background-image: var(--paper, none);
  transition: opacity 0.5s var(--env-ease), visibility 0.5s;
}
.env-cover.is-done { opacity: 0; visibility: hidden; }
html.env-locked, html.env-locked body { overflow: hidden; }
.env-stage { display: flex; flex-direction: column; align-items: center; gap: 18px; width: 100%; max-width: 460px; }

/* ---------------------------------------------------------------- shared envelope ---------------------------------------------------------------- */
.env-greeting { margin: 0; font-family: var(--env-script); font-size: clamp(2rem, 8.5vw, 2.8rem); line-height: 1.15; text-align: center; color: var(--env-text); text-wrap: balance; transition: opacity 0.35s ease; overflow-wrap: anywhere; }
.env-hint { margin: 0; font-size: 0.82rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--env-text-soft); transition: opacity 0.35s ease; }
.env-quiet { border: 0; background: none; padding: 6px 12px; font: inherit; font-size: 0.95rem; color: var(--env-text-soft); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.env-quiet:hover { color: var(--env-text); }
.is-opening .env-greeting, .is-opening .env-hint, .is-opening .env-quiet { opacity: 0; }

.env-shadow { filter: drop-shadow(0 22px 26px rgba(30, 12, 16, 0.2)) drop-shadow(0 3px 5px rgba(30, 12, 16, 0.12)); transition: transform 0.6s var(--env-ease); }
.is-opening .env-shadow { transform: translateY(22%); }
.env { position: relative; width: min(84vw, 400px); aspect-ratio: 1.42; perspective: 1500px; }
.env-back { position: absolute; inset: 0; border-radius: 7px; background-color: var(--env-liner); background-image: var(--env-grain), repeating-linear-gradient(135deg, transparent 0 14px, var(--env-liner-2) 14px 15px); }
.env-card {
  position: absolute; left: 6.5%; right: 6.5%; top: 7%; height: 84%; z-index: 2; border-radius: 4px;
  display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 7% 6% 0; text-align: center;
  background-color: var(--env-card); background-image: var(--env-grain); color: var(--env-card-ink); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  transition: transform 0.85s cubic-bezier(0.18, 0.8, 0.24, 1);
}
.env-card-eyebrow { font-size: 0.72rem; letter-spacing: 0.26em; text-transform: uppercase; color: var(--env-foil); }
.env-card-name { font-family: var(--env-script); font-size: clamp(1.6rem, 7.4vw, 2.25rem); line-height: 1.05; overflow-wrap: anywhere; }
.env.is-rising .env-card { transform: translateY(-58%); }
.env-pocket { position: absolute; inset: 0; z-index: 3; border-radius: 7px; background-color: var(--env-paper); background-image: var(--env-grain); clip-path: polygon(0 0, 50% 57%, 100% 0, 100% 100%, 0 100%); }
.env-pocket::before { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(0, 0, 0, 0.07), transparent 18%), var(--env-shade); clip-path: polygon(0 100%, 50% 43%, 100% 100%); opacity: 0.7; }
.env-pocket::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to right, rgba(0, 0, 0, 0.05), transparent 30%, transparent 70%, rgba(0, 0, 0, 0.05)); }
.env-flap { position: absolute; left: 0; right: 0; top: 0; height: 63%; z-index: 4; transform-origin: 50% 0; transform-style: preserve-3d; transition: transform 0.78s cubic-bezier(0.5, 0.05, 0.3, 1); }
.env.flap-behind .env-flap { z-index: 1; }
.env-flap-face { position: absolute; inset: 0; clip-path: polygon(0 0, 100% 0, 50% 100%); -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.env-flap-front { background: linear-gradient(to bottom, rgba(255, 255, 255, 0.1), rgba(0, 0, 0, 0.06)), var(--env-grain), var(--env-flap); }
.env-flap-inside { transform: rotateX(180deg); background-color: var(--env-liner); background-image: var(--env-grain), repeating-linear-gradient(135deg, transparent 0 14px, var(--env-liner-2) 14px 15px); }
.env.is-open .env-flap { transform: rotateX(180deg); }

.env-seal {
  position: absolute; left: 50%; top: 63%; width: 24%; min-width: 64px; aspect-ratio: 1; z-index: 5; transform: translate(-50%, -50%);
  border: 0; padding: 0; margin: 0; background: none; border-radius: 50%; cursor: pointer; transition: transform 0.12s ease; -webkit-tap-highlight-color: transparent;
}
.env-seal:focus-visible { outline: 3px solid var(--env-focus); outline-offset: 3px; border-radius: 50%; }
.env-seal.is-pressing { transform: translate(-50%, -50%) scale(0.92); }
.env-seal::after { content: ""; position: absolute; inset: -9%; border-radius: 50%; border: 2px solid var(--env-wax-hi); opacity: 0; animation: env-seal-ring 2.6s ease-out 1s infinite; }
.env.is-open .env-seal::after { display: none; }
.env-seal-half { position: absolute; inset: 0; transition: transform 0.5s cubic-bezier(0.3, 0.6, 0.3, 1), opacity 0.5s ease; }
.env-seal-left { clip-path: polygon(0 0, 53% 0, 47% 38%, 54% 62%, 49% 100%, 0 100%); }
.env-seal-right { clip-path: polygon(53% 0, 100% 0, 100% 100%, 49% 100%, 54% 62%, 47% 38%); }
.env.is-open .env-seal-left { transform: translate(-16%, 14%) rotate(-16deg); opacity: 0; }
.env.is-open .env-seal-right { transform: translate(16%, 14%) rotate(16deg); opacity: 0; }
.env-seal-art { display: block; width: 100%; height: 100%; overflow: visible; }
.env-stop-hi { stop-color: var(--env-wax-hi); }
.env-stop-mid { stop-color: var(--env-wax); }
.env-stop-lo { stop-color: var(--env-wax-lo); }
.env-seal-pool { fill: var(--env-wax-lo); opacity: 0.18; }
.env-seal-ring { fill: none; stroke: var(--env-wax-lo); stroke-width: 2.2; opacity: 0.55; }
.env-seal-ring-light { fill: none; stroke: var(--env-wax-hi); stroke-width: 1; opacity: 0.45; }
.env-seal-letters, .env-seal-shadow { font-family: var(--env-script); text-anchor: middle; }
.env-seal-letters { fill: var(--env-wax-ink); opacity: 0.92; }
.env-seal-shadow { fill: var(--env-wax-lo); opacity: 0.85; }
.env-seal-n1 .env-seal-letters, .env-seal-n1 .env-seal-shadow { font-size: 44px; }
.env-seal-n2 .env-seal-letters, .env-seal-n2 .env-seal-shadow { font-size: 34px; }
.env-seal-n3 .env-seal-letters, .env-seal-n3 .env-seal-shadow { font-size: 27px; }
@keyframes env-seal-ring { 0% { transform: scale(0.92); opacity: 0.55; } 70%, 100% { transform: scale(1.22); opacity: 0; } }

/* ---------------------------------------------------------------- story-led (VIP) opening ---------------------------------------------------------------- */
.vip-opening .env-stage { gap: 14px; }
.vip-opening .env { width: min(78vw, 380px); }
.vip-envelope-on .vip-opening .vip-crest { display: none; }

/* After opening, the heading receives focus for screen readers; a programmatically focused heading needs no ring. */
h1[tabindex="-1"]:focus { outline: none; }

@media (prefers-reduced-motion: reduce) {
  .env-seal::after { animation: none; }
  .env-cover, .env-shadow, .env-card, .env-flap, .env-seal, .env-seal-half, .env-greeting, .env-hint { transition: none !important; }
}
@media print { .env-cover { display: none !important; } }