/* Adriatic shutters (.t-ada): quiet stationery in olive and lavender. The cover is a view through an old window onto the Croatian coast (island, calm sea,
   olive trees, an old stone house) with the names in the sky; the guest page starts with closed wooden shutters that
   swing open when tapped. Images: public/envelope/ada-cover.jpg (the view) and ada-open-green.mp4 / ada-open-green.jpg (the opening film and its first frame). */

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

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

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

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

/* ---------- cover: the Croatian coast, names in the sky ---------- */
.inv.t-ada .deco-wc { display: none; }
.inv.t-ada .hero {
  --hl: color-mix(in srgb, var(--ink) 38%, transparent); --txt: var(--ink); --sea-t: var(--ink);
  min-height: 780px; align-content: start; padding: 84px 30px 40px; gap: 6px; color: var(--ink);
  /* the picture (a 9:16 crop of the film's last frame, zoomed in) is scaled exactly like the opening film (the 9:16 box that covers the visible screen, top edge at the top), so the film hands over to the cover without a jump. The size must not depend on the height of the cover: the cover is shorter while the shutters are closed (--vh) and grows when they are open, which used to move the horizon down at the end of the opening */
  background: url("/envelope/ada-cover.jpg?v=12") center top / auto calc(max(var(--vh, 682px), var(--vw, 322px) / .5625)) no-repeat, var(--soft);
}
.inv.t-ada .hero::before { box-shadow: inset 0 0 0 1px var(--hl), inset 0 0 0 5px transparent, inset 0 0 0 6px var(--hl); }
.inv.t-ada .hero::before, .inv.t-ada .hero .kicker, .inv.t-ada .hero .names, .inv.t-ada .hero .date, .inv.t-ada .hero .place { text-shadow: 0 0 22px rgba(255, 255, 255, .6); }
.inv.t-ada .hero .names { font-size: calc(56px * var(--zn) * var(--kn)); }
.inv.t-ada .hero .rule { background: var(--ink); opacity: .6; }
.inv.t-ada .hero .cd { position: absolute !important; left: 22px; right: auto; width: calc(100% - 44px) !important; box-sizing: border-box; top: calc(max(var(--vh, 682px), var(--vw, 322px) / .5625) * .648); margin: 0; padding: 16px 8px 12px; border-radius: 16px; background: color-mix(in srgb, var(--bg) 74%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); } /* a frosted plate: the countdown sits over dark olive trees, and on a short screen over the plain colour below the picture */
.inv.t-ada .hero .names + svg, .inv.t-ada .hero .rule { display: none; }
.inv.t-ada .hero .ph, .inv.t-ada .hero .cover-photo { display: none !important; } /* the cover is the view through the window, not a photo of the couple */ /* the wave and the little ornament line would lie over the dark island */
.inv.t-ada .hero .date, .inv.t-ada .hero .place { justify-self: center; padding: 3px 16px 5px; border-radius: 14px; text-shadow: none; background: color-mix(in srgb, var(--bg) 66%, transparent); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); } /* date and place can fall on the dark island, the sea or the pale sky depending on the length of the names: frosted plates keep them readable */
.inv.t-ada .hero .cd b, .inv.t-ada .hero .cd small { color: var(--ink); text-shadow: none; }
.inv.t-ada .hero .cd div + div { border-left-color: color-mix(in srgb, var(--ink) 35%, transparent); }
.inv.t-ada .hero .cd div { max-width: none; }
.inv.t-ada .hero[data-cd-flow] .cd { position: static !important; width: auto !important; margin-top: 18px; } /* very long names: the countdown follows the text instead of lying on it (set in InvitationView) */ /* the four fields share the whole plate equally: with the old 74 px limit the plate padding looked like two wider outer fields */

/* ---------- the closed shutters: first screen of the guest page (a film, see below) ---------- */

.inv.t-ada.env-closed { background: var(--bg); }
.inv.t-ada.env-closed .hero { height: var(--vh, 100svh); min-height: 0; padding: 0; }
.inv.t-ada.env-closed .hero > :not(.env) { opacity: 0; }
.inv.t-ada.env-closed .hero::before { opacity: 0; }
.inv.t-ada .env { position: absolute; inset: 0; z-index: 30; margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; color: #fff; font: inherit; cursor: pointer; overflow: hidden; display: flex; justify-content: center; -webkit-tap-highlight-color: transparent; text-align: center; }
.inv.t-ada .env:focus-visible { outline: 1px solid #fff; outline-offset: -10px; }
/* the opening is a film (see InvitationView, ADA_ZOOM_AT).
   The film is 9:16 and is fitted like a "cover" picture whose top edge stays at the top (the box below). When the shutters are almost open it zooms into the
   window, ending together with the film: the crop x 236..844, y 490..1570 of the 1080 x 1920 last frame (= public/envelope/ada-cover.jpg) grows to the full box,
   scale = 1080 / 608; the transform origin follows from "crop corner stays at the box corner": o = f * S / (S - 1). */
.inv.t-ada .shw-v .env-video { --bw: max(100cqw, 56.25cqh); position: absolute; top: 0; left: calc((100cqw - var(--bw)) / 2); width: var(--bw); height: calc(var(--bw) / .5625); max-width: none; object-fit: fill; display: block; transform-origin: 50% 58.4%; }
@media (prefers-reduced-motion: no-preference) {
  .inv.t-ada .env.zoom .shw-v .env-video { transform: scale(1.7763); transition: transform var(--zd, 4.2s) cubic-bezier(.37, 0, .63, 1); } /* --zd is set in InvitationView: the time left in the film when the zoom starts */
}
.inv.t-ada .env.ended .shw-v { opacity: 0; }
.inv.t-ada.env-on:not(.env-closed) .hero > :not(.env) { z-index: 31 !important; } /* the names, date and countdown appear over the film while it is still zooming (see ADA_TEXT_AT) */
@media (prefers-reduced-motion: no-preference) { .inv.t-ada .shw-v { transition: opacity .7s ease; } }
.inv.t-ada .shw { position: relative; flex: none; width: 100%; height: 100%; container-type: size; } /* the film is sized in cqw/cqh of this box */
@container invshell (min-width: 900px) { .inv.t-ada .shw { width: min(100%, calc(var(--vh, 780px) * .62)); } } /* computer screens: a pair of shutters in phone proportions, centred in front of the coast */
.inv.t-ada .env-tap { position: absolute; left: 50%; bottom: 7%; transform: translateX(-50%); white-space: nowrap; padding: 11px 20px 10px; border-radius: 999px; background: rgba(22, 26, 12, .68); font-family: var(--fb), serif; font-style: normal; letter-spacing: .26em; font-size: 12px; font-weight: 600; text-transform: uppercase; color: #fff; }
.inv.t-ada .env.open, .inv.t-ada .env.ended { pointer-events: none; }
.inv.t-ada .env.open .env-tap { opacity: 0; transition: opacity .4s; }

/* ---------- wide screens ---------- */
@container invshell (min-width: 900px) {
  .inv.t-ada .hero .cd { position: static !important; width: auto !important; margin-top: auto; }
  .inv.t-ada .hero { min-height: max(860px, var(--vh, 0px)); padding-block: 150px 60px; background-size: cover; background-position: center calc(0.7 * (860px - 100cqw * 1.7778)); } /* same position as "center 70%" at a cover height of 860 px, but independent of the real height */
  .inv.inv.t-ada .hero .names { font-size: calc(clamp(76px, 8cqw, 124px) * var(--zn) * var(--kn)); }
  .inv.t-ada .block { padding-block: 130px 120px; }
  .inv.t-ada .tt, .inv.t-ada .places, .inv.t-ada .facts2, .inv.t-ada details, .inv.t-ada .contacts { max-width: 640px; margin-inline: auto; }
  .inv.t-ada .gal.n1 .ph { max-width: 520px; margin-inline: auto; height: 400px; }
}

/* ---------- motion ---------- */
@media (prefers-reduced-motion: no-preference) {
  .inv.t-ada.env-on { --add: 0s; }
  .inv.t-ada.play .hero::before { animation: adrise 1s calc(var(--add, 0s) + .2s) var(--ease2) backwards; }
  .inv.t-ada.play .hero .kicker { animation: adrise 1s calc(var(--add, 0s) + .45s) var(--ease2) backwards; }
  .inv.t-ada.play .hero .names span { opacity: 1; animation: adname 1.6s calc(var(--add, 0s) + .7s) var(--ease2) backwards; }
  .inv.t-ada.play .hero .names span:nth-child(2) { animation-delay: calc(var(--add, 0s) + 1.05s); }
  .inv.t-ada.play .hero .rule, .inv.t-ada.play .hero .date, .inv.t-ada.play .hero .place, .inv.t-ada.play .hero .cd { animation: adrise 1.2s calc(var(--add, 0s) + 1.4s) var(--ease2) backwards; }
  .inv.done.t-ada .thanks { animation: adrise 1s var(--ease2) backwards; }
  .inv.done.t-ada .cf-fl .cp { transform-box: fill-box; transform-origin: 50% 100%; animation: adpetal .9s calc(.3s + var(--i) * .12s) var(--ease2) backwards; }
  .inv.done.t-ada .bub { animation: adfall 3.2s calc(var(--i) * .12s) cubic-bezier(.3, .5, .6, 1) forwards; }
  .inv.done.t-ada .bub:nth-child(even) { animation-name: adfall2; }
  @keyframes adrise { from { opacity: 0; transform: translateY(14px); } }
  @keyframes adname { from { opacity: 0; transform: translateY(10px); filter: blur(4px); } }
  @keyframes adfadeout { to { opacity: 0; } }
  @keyframes adpetal { from { opacity: 0; transform: scale(0) rotate(-30deg); } }
  @keyframes adfall { 0% { opacity: 0; transform: translateY(0) rotate(0); } 12% { opacity: .95; } 100% { opacity: 0; transform: translate(34px, 200px) rotate(380deg); } }
  @keyframes adfall2 { 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-ada .env.open { animation: adfadeout .3s forwards; }
}