/* The opening (V4 first visit, about 4.9 s; V5 later visits, 1.2 s): copied from the portal's css/parts/opening.css.
   Written in index.html itself, so it covers the page from the first paint. js/quiet.js (in the head) sets data-opening on <html>.
   Hidden unless its animation runs: "reduce motion" or a weak connection shows nothing. A tap anywhere skips it. */
.opening { position: fixed; inset: 0; z-index: var(--z-toast); display: none; visibility: hidden; cursor: pointer; }
[data-opening] .opening { display: block; animation: opening-live var(--dur-opening) linear both; }
[data-opening="first"] .opening { --dur-opening: var(--dur-open-first); }
[data-opening="return"] .opening { --dur-opening: var(--dur-open-return); }
[data-quiet] .opening { display: none; }
.opening.is-skipped { animation: opening-skip var(--dur-base) var(--ease-soft) both; pointer-events: none; }
[data-opening="return"] .open-first, [data-opening="first"] .open-return { display: none; }

.open-first { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: var(--sp-4); padding: var(--sp-5); background: var(--c-bg); }
.open-box { position: relative; display: block; line-height: 0; }
.open-img { display: block; inline-size: 100%; block-size: auto; }
.soft-edge { -webkit-mask-image: var(--edge-soft); mask-image: var(--edge-soft); -webkit-mask-size: var(--edge-size) 100%; mask-size: var(--edge-size) 100%;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: 0 0; mask-position: 0 0; }
.open-name { inline-size: min(var(--open-name-w), 72vw); }
.open-flower { position: absolute; inset: 0; margin: auto; inline-size: var(--open-flower); block-size: var(--open-flower); }
.opening .open-slogan { font-size: var(--fs-open-slogan); line-height: var(--lh-tight); white-space: nowrap; padding: 0.15em 0.4em; animation: slogan-up var(--open-slogan) var(--ease-soft) var(--open-slogan-at) both; }
.open-flower .open-img { animation: edge-out var(--open-wipe) var(--ease-soft) var(--open-wipe-at) both; }
.open-flower .shine { -webkit-mask-image: url("../img/flower.png"); mask-image: url("../img/flower.png");
  animation: shine-pass-rev calc(var(--open-wipe) - 100ms) var(--ease-soft) calc(var(--open-wipe-at) + 50ms) both; }
.open-name .open-img { animation: edge-in var(--open-name) var(--ease-soft) var(--open-name-at) both; }
.open-name .shine { -webkit-mask-image: url("../img/logo.png"); mask-image: url("../img/logo.png");
  animation: shine-pass var(--open-shine) var(--ease-soft) calc(var(--open-name-at) + var(--open-shine-lag)) both; }

.open-return { position: absolute; inset: 0; }
.ret-cover { position: absolute; inset: 0; background: var(--c-bg); clip-path: circle(0% at 50% 50%); animation: ret-close var(--dur-open-return) var(--ease-soft) both; }
.ret-flower { position: absolute; inset: 0; margin: auto; inline-size: var(--turn-flower); block-size: var(--turn-flower); opacity: 0;
  animation: ret-turn var(--dur-open-return) var(--ease-turn) both, ret-fade var(--dur-open-return) ease both; }
/* The opening keeps the brand's mocha slogan colour (it is brief, and it is the bride page's look); the page below uses the deeper text colour. */
.opening .open-slogan { color: var(--c-slogan); }