/* Watercolour card (.t-aqu): quiet stationery. Ivory paper, lots of white space, one serif for everything, names in script,
   no boxes and no frames. Watercolour flowers grow in from two corners (big bouquet top right, small sprig bottom left).
   The guest page starts with a closed envelope sealed with wax.

   WATERCOLOUR IMAGES - the flowers are drawn placeholders (lib/invitation/decor.ts, watercolorHTML) until real artwork exists.
   To switch to real images:
     1. Put transparent PNG/WebP files in public/watercolor/ :
          bouquet.webp  big bouquet that grows out of the TOP-RIGHT corner (about 1000 px wide)
          sprig.webp    small sprig that grows out of the BOTTOM-LEFT corner (about 600 px wide)
     2. Remove the comment marks around the block "REAL IMAGES" at the end of this file. It hides the drawn placeholders
        and shows the two images. Different flowers per palette: add rules that start with .inv.t-aqu[style*="#b9727f"]
        (the palette's --sea value). */

/* ---------- sections: no boxes, no frames, just air ---------- */

/* ---------- cover: monogram, a line of greeting, names in script, date, place ---------- */

/* ---------- watercolour: bouquet top right, sprig bottom left (placeholders) ---------- */
.inv.t-aqu .deco-wc { display: block; position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.inv.t-aqu .wc { position: absolute; mix-blend-mode: multiply; overflow: visible; filter: blur(.35px); }
.inv.t-aqu .wc-tl, .inv.t-aqu .wc-br { display: none; }
.inv.t-aqu .wc-tr { right: -40px; top: -34px; width: 250px; height: 250px; transform: scaleX(-1) rotate(4deg); }
.inv.t-aqu .wc-bl { left: -44px; bottom: -34px; width: 190px; height: 190px; transform: scaleY(-1) rotate(-6deg); }
.inv.t-aqu .wf { fill: var(--sea); fill-opacity: .2; stroke: var(--sea); stroke-opacity: .32; stroke-width: .7; }
.inv.t-aqu .wd { fill: color-mix(in srgb, var(--sea) 55%, var(--ink)); fill-opacity: .6; }
.inv.t-aqu .wl1 { fill: color-mix(in srgb, var(--leaf) 80%, var(--ink)); fill-opacity: .24; stroke: var(--leaf); stroke-opacity: .3; stroke-width: .6; }
.inv.t-aqu .wl2 { fill: color-mix(in srgb, var(--leaf) 62%, var(--bg)); fill-opacity: .4; stroke: var(--leaf); stroke-opacity: .25; stroke-width: .6; }
.inv.t-aqu .wr { fill: none; stroke: color-mix(in srgb, var(--leaf) 70%, var(--ink)); stroke-opacity: .28; stroke-width: .7; }
.inv.t-aqu .wst { fill: none; stroke: color-mix(in srgb, var(--leaf) 70%, var(--ink)); stroke-width: 1; stroke-opacity: .4; stroke-linecap: round; }
.inv.t-aqu .wb { fill: var(--sea); fill-opacity: .3; }

/* ---------- content ---------- */

/* ---------- RSVP ---------- */

/* ---------- the closed envelope: first screen of the guest page ----------
   A 5 s film (public/envelope/aqu.mp4, first frame public/envelope/aqu.jpg) shows the flap lifting and the card sliding out.
   The monogram is drawn on top by code (it differs for every couple) and fades out when the film starts. */

.inv.t-aqu.env-closed { background: var(--strip); }
.inv.t-aqu.env-closed .hero { height: var(--vh, min(100svh, 740px)); min-height: 0; padding: 0; } /* --vh = the measured visible height (screen, or the phone frame of a preview), so the envelope fills it to the last pixel; the old 740 px cap left a strip of the page colour under the envelope in taller frames */
.inv.t-aqu .env { --ep: color-mix(in srgb, var(--sea) 58%, var(--bg)); position: absolute; inset: 0; z-index: 30; margin: 0; padding: 0; border: 0; border-radius: 0; color: var(--ink); font: inherit; cursor: pointer; overflow: hidden; -webkit-tap-highlight-color: transparent; text-align: center; background: color-mix(in srgb, var(--sea) 70%, var(--bg)); }
.inv.t-aqu .env:focus-visible { outline: 1px solid var(--bg); outline-offset: -10px; }
.inv.t-aqu .env-video, .inv.t-aqu .env-hold { position: absolute; top: 0; left: 50%; height: 100%; width: auto; max-width: none; aspect-ratio: 9 / 16; transform: translateX(-50%); object-fit: cover; display: block; }
.inv.t-aqu .env-hold { visibility: hidden; }
.inv.t-aqu .env-hold-t { clip-path: inset(0 0 71% 0); }
.inv.t-aqu .env-hold-b { clip-path: inset(29% 0 0 0); }
.inv.t-aqu .env.ended { background: transparent; pointer-events: none; }
.inv.t-aqu .env.ended .env-video { visibility: hidden; }
.inv.t-aqu .env.ended .env-hold { visibility: visible; }
.inv.t-aqu .env-monowrap { position: absolute; inset: 0; pointer-events: none; transform-origin: 50% 21.8%; }
.inv.t-aqu .env-mono { position: absolute; left: 50%; top: 24%; width: min(44%, 200px); height: auto; margin-left: calc(min(44%, 200px) / -2); aspect-ratio: 240 / 330; overflow: visible; }
.inv.t-aqu .env-mono .emb { filter: drop-shadow(-1.1px -1.1px .5px rgba(255, 255, 255, .8)) drop-shadow(1.2px 1.4px .9px rgba(25, 40, 55, .5)); }
.inv.t-aqu .env-mono .l1, .inv.t-aqu .env-mono .l2, .inv.t-aqu .env-mono .l3, .inv.t-aqu .env-mono .orn { fill: none; stroke: color-mix(in srgb, var(--ep) 90%, #fff); stroke-linecap: round; }
.inv.t-aqu .env-mono .l1 { stroke-width: 2.4; } .inv.t-aqu .env-mono .l2 { stroke-width: 1.5; } .inv.t-aqu .env-mono .l3 { stroke-width: 1; } .inv.t-aqu .env-mono .orn { stroke-width: 1.7; }
.inv.t-aqu .env-mono text { fill: color-mix(in srgb, var(--ep) 90%, #fff); font-family: var(--fn), serif; font-size: 118px; }
.inv.t-aqu .env-mono .m2 { font-size: 104px; }
.inv.t-aqu .env-tap { position: absolute; left: 0; right: 0; bottom: 11%; font-family: var(--fh), serif; letter-spacing: .34em; font-size: 12.5px; font-weight: 500; text-transform: uppercase; color: color-mix(in srgb, var(--ink) 78%, var(--ep)); opacity: .9; }
.inv.t-aqu .env.open { pointer-events: none; }
/* The closed envelope is shown zoomed in a little (envelope + monogram together) so that only the envelope paper fills the screen,
   without the darker table border of the film. When the film starts, the picture eases back to full size. */
.inv.t-aqu .env-zoom { position: absolute; inset: 0; transform: scale(1.18); transform-origin: 50% 50%; }
.inv.t-aqu .env.open .env-zoom { transform: none; transition: transform .9s cubic-bezier(.3, .1, .2, 1); }
/* thumbnail (still image of the closed envelope) */
.inv.t-aqu .env.static { cursor: default; }
.inv.t-aqu .env.static .env-video { left: 0; width: 100%; height: 100%; aspect-ratio: auto; transform: none; object-fit: cover; }
/* in the phone preview the envelope is taller than in the thumbnail: the monogram sits lower and bigger, still only on the flap */
.inv.t-aqu .env:not(.static) .env-mono { top: 28.5%; width: min(57%, 240px); margin-left: calc(min(57%, 240px) / -2); }

/* ---------- wide screens ---------- */
@container invshell (min-width: 900px) {
  .inv.t-aqu .hero { min-height: max(860px, var(--vh, 0px)); padding-block: 170px 150px; }
  .inv.inv.t-aqu .hero .names { font-size: calc(clamp(76px, 8cqw, 124px) * var(--zn) * var(--kn)); }
  .inv.t-aqu .wc-tr { width: 520px; height: 520px; right: 4%; }
  .inv.t-aqu .wc-bl { width: 320px; height: 320px; left: 4%; }
  .inv.t-aqu .block { padding-block: 130px 120px; }
  .inv.t-aqu .tt, .inv.t-aqu .places, .inv.t-aqu .facts2, .inv.t-aqu details, .inv.t-aqu .contacts { max-width: 640px; margin-inline: auto; }
  .inv.t-aqu .gal.n1 .ph { max-width: 520px; margin-inline: auto; height: 400px; }
}

/* ---------- motion ---------- */
@media (prefers-reduced-motion: no-preference) {
  .inv.t-aqu.env-on { --aqd: .55s; }
  .inv.t-aqu.play .wc { animation: aqbloom 2.2s calc(var(--aqd, 0s) + .1s) var(--ease2) backwards; }
  .inv.t-aqu.play .hero::before { animation: aqrise 1s calc(var(--aqd, 0s) + .2s) var(--ease2) backwards; }
  .inv.t-aqu.play .hero .kicker { animation: aqrise 1s calc(var(--aqd, 0s) + .45s) var(--ease2) backwards; }
  .inv.t-aqu.play .hero .names span { opacity: 1; animation: aqname 1.6s calc(var(--aqd, 0s) + .7s) var(--ease2) backwards; }
  .inv.t-aqu.play .hero .names span:nth-child(2) { animation-delay: calc(var(--aqd, 0s) + 1.05s); }
  .inv.t-aqu.play .hero .rule, .inv.t-aqu.play .hero .date, .inv.t-aqu.play .hero .place, .inv.t-aqu.play .hero .cd { animation: aqrise 1.2s calc(var(--aqd, 0s) + 1.4s) var(--ease2) backwards; }
  .inv.t-aqu .env.open .env-monowrap { animation: aqmono 2.1s linear forwards; }
  .inv.t-aqu .env.open .env-tap { animation: aqfadeout .5s forwards; }
  .inv.t-aqu .env.ended .env-hold-t { animation: aqfadeout .9s .05s ease-out forwards; }
  .inv.t-aqu .env.ended .env-hold-b { animation: aqslide 1.6s cubic-bezier(.55, .05, .4, 1) forwards; }
  .inv.done.t-aqu .thanks { animation: aqrise 1s var(--ease2) backwards; }
  .inv.done.t-aqu .cf-fl .cp { transform-box: fill-box; transform-origin: 50% 100%; animation: aqpetal .9s calc(.3s + var(--i) * .12s) var(--ease2) backwards; }
  .inv.done.t-aqu .bub { animation: aqfall 3.2s calc(var(--i) * .12s) cubic-bezier(.3, .5, .6, 1) forwards; }
  .inv.done.t-aqu .bub:nth-child(even) { animation-name: aqfall2; }
  @keyframes aqbloom { from { opacity: 0; filter: blur(6px); } }
  @keyframes aqrise { from { opacity: 0; transform: translateY(14px); } }
  @keyframes aqname { from { opacity: 0; transform: translateY(10px); filter: blur(4px); } }
  @keyframes aqflapback { 0%, 48% { fill: color-mix(in srgb, var(--ep) 64%, #000); } 100% { fill: color-mix(in srgb, var(--ep) 86%, #000); } }
  @keyframes aqmono { 0% { transform: perspective(6000px) rotateX(0deg); opacity: 1; } 19% { transform: perspective(6000px) rotateX(6deg); } 38% { transform: perspective(6000px) rotateX(22deg); } 57% { transform: perspective(6000px) rotateX(38deg); } 67% { transform: perspective(6000px) rotateX(49deg); } 76% { transform: perspective(6000px) rotateX(58deg); } 86% { transform: perspective(6000px) rotateX(69deg); opacity: 1; } 95% { transform: perspective(6000px) rotateX(88deg); opacity: .9; } 100% { transform: perspective(6000px) rotateX(90deg); opacity: 0; } }
  @keyframes aqfadeout { to { opacity: 0; } }
  @keyframes aqslide { from { transform: translateX(-50%) translateY(0); } to { transform: translateX(-50%) translateY(105%); } }
  @keyframes aqpetal { from { opacity: 0; transform: scale(0) rotate(-30deg); } }
  @keyframes aqfall { 0% { opacity: 0; transform: translateY(0) rotate(0); } 12% { opacity: .95; } 100% { opacity: 0; transform: translate(34px, 200px) rotate(380deg); } }
  @keyframes aqfall2 { 0% { opacity: 0; transform: translateY(0) rotate(0); } 12% { opacity: .95; } 100% { opacity: 0; transform: translate(-38px, 200px) rotate(-340deg); } }
}
@media (prefers-reduced-motion: reduce) {
  .inv.t-aqu .env.open { animation: aqfadeout .3s forwards; }
}

/* ---------- REAL IMAGES (switch on when public/watercolor/bouquet.webp and sprig.webp exist) ----------
.inv.t-aqu .wc > * { display: none; }
.inv.t-aqu .wc { filter: none; }
.inv.t-aqu .wc-tr { width: 330px; height: 330px; right: -20px; top: -10px; transform: none; background: url("/watercolor/bouquet.webp") right top / contain no-repeat; }
.inv.t-aqu .wc-bl { width: 210px; height: 210px; left: -16px; bottom: -10px; transform: none; background: url("/watercolor/sprig.webp") left bottom / contain no-repeat; }
-------------------------------------------------------------------------------------------- */