/* The Riviera Blossom opening: the dove brings a letter the guest signs (js/riviera-opening.js).
   The layer fills its container (the page's #opening); the films are cropped to fill it, like the scenes (cover).
   Type and colours are Riviera's (css/signature-riviera-blossom.css): maiolica cobalt ink, terracotta, ivory;
   Playfair Display for the title and names, EB Garamond for reading, DM Sans for the controls.
   --u is 1% of the open letter's width on screen, set by the script, so the words are sized with the paper. */
/* the page's #opening slot (riviera-blossom.html): fills the hero window above the hero; it fades out quickly when the
   invitation opens, because film B's last frame IS the hero's first frame underneath (nothing to cross-fade) */
#opening.rvo-host{position:absolute;inset:0;transition:opacity .4s ease;background:#ddd2bd}
/* round 2 (11 Oct): film A's first frame, in the page from the first paint (riviera-blossom.html), under the module's
   layer; the layer itself is transparent until its own pictures arrive, so nothing else (the hero, a blank sky
   colour) shows before the opening. The hero is hidden while the opening is up and while the page prepares. */
.rvo-cover{position:absolute;inset:0;display:block}
.rvo-cover img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
html:not(.rb-no-opening) body.signature-opening #hero,body.signature-loading #hero{visibility:hidden}
.rb-no-opening #opening{display:none}
.rvo{position:absolute;inset:0;overflow:hidden;overflow:clip;background:transparent;contain:strict;--rvo-ink:#1b2c66;--rvo-soft:#3d4566;
 --rvo-terra:#8a3f24;--rvo-cream:#fffaf0;--u:3.3px;font-family:'DM Sans',system-ui,sans-serif;-webkit-font-smoothing:antialiased}
.rvo-stage{position:absolute;overflow:hidden}
.rvo-fill{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;display:block}
.rvo-film{background:transparent;opacity:0}
.rvo-hold,.rvo-end{opacity:0}
.rvo-film.rvo-a{opacity:1}

/* the live words, laid onto the paper by a projective transform (each area follows the paper's own perspective) */
.rvo-letter{position:absolute;inset:0;opacity:0;pointer-events:none}
.rvo-area{position:absolute;left:0;top:0;transform-origin:0 0;margin:0;color:var(--rvo-ink);mix-blend-mode:multiply}
.rvo-area p{margin:0}
.rvo-line{will-change:opacity,transform}
.rvo-title{display:flex;align-items:center;justify-content:center;text-align:center}
.rvo-title p{font:italic 500 calc(var(--u) * 8.2 * var(--fit,1))/1.02 'Playfair Display',Georgia,serif;letter-spacing:-.005em;white-space:nowrap}
.rvo-wording{display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;gap:calc(var(--u) * 3.6);padding:0 calc(var(--u) * 1.2)}
.rvo-kicker{font:500 calc(var(--u) * 2.5)/1.3 'Playfair Display',Georgia,serif;letter-spacing:.3em;padding-left:.3em;text-transform:uppercase;color:var(--rvo-terra)}
.rvo-lead{font:italic 400 calc(var(--u) * 6 * var(--fit,1))/1.16 'EB Garamond',Georgia,serif;color:var(--rvo-soft);text-wrap:balance}
.rvo-join{font-family:'EB Garamond',Georgia,serif;line-height:1.08;text-wrap:balance}
.rvo-small{font-size:calc(var(--u) * 5 * var(--fit,1));color:var(--rvo-soft)}
.rvo-names{display:block;font:italic 400 calc(var(--u) * 10.5 * var(--fit,1))/1.1 'Playfair Display',Georgia,serif;color:var(--rvo-ink);margin:calc(var(--u) * .9) 0 calc(var(--u) * .8)}
.rvo-names .rvo-amp{font-size:.72em;color:var(--rvo-terra)}
.rvo-agree{font:400 calc(var(--u) * 4.7 * var(--fit,1))/1.28 'EB Garamond',Georgia,serif;color:var(--rvo-soft);text-wrap:pretty;max-width:96%}
.rvo-signature svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.rvo-signature path{fill:none;stroke:#13235c;stroke-width:3.6;stroke-linecap:round;stroke-linejoin:round}
.rvo-siglabels{display:flex;justify-content:space-between;align-items:flex-start;padding:0 calc(var(--u) * .6)}
.rvo-siglabels span{font:500 calc(var(--u) * 2.2)/1.2 'Playfair Display',Georgia,serif;letter-spacing:.22em;text-transform:uppercase;color:var(--rvo-terra);white-space:nowrap}
.rvo-note{display:flex;align-items:center;justify-content:center;text-align:center}
.rvo-note p{font:italic 400 calc(var(--u) * 4.2 * var(--fit,1))/1.2 'EB Garamond',Georgia,serif;color:var(--rvo-terra);white-space:nowrap}

/* the two standing frames: the couple's photo (cover-cropped, a faint glass sheen) or frame 1's monogram, engraved
   into the card (printed live); laid by the script inside each frame's visible opening, only while the camera is
   still. The inset shadow is the moulding's own shadow falling into the recess (strongest from the top, the sun) */
.rvo-photo{position:absolute;left:0;top:0;transform-origin:0 0;overflow:hidden;pointer-events:none;container-type:size;will-change:opacity}
.rvo-photo-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.rvo-photo::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
 box-shadow:inset 0 3cqh 3.5cqh -2cqh rgba(58,40,14,.34),inset 2cqw 0 3cqw -2cqw rgba(58,40,14,.16),inset 0 0 0 .6px rgba(58,40,14,.22)}
.rvo-photo.has-photo::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(115deg,rgba(255,255,255,.16) 0%,rgba(255,255,255,0) 38%,rgba(255,255,255,0) 62%,rgba(255,255,255,.08) 100%)}
.rvo-mono{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:#2c3757;mix-blend-mode:multiply}
.rvo-mono p{margin:0}
.rvo-mono-i{font:italic 400 24cqw/1.05 'Playfair Display',Georgia,serif;letter-spacing:.01em;text-shadow:0 .4px 0 rgba(255,255,255,.7),0 -.4px 0 rgba(0,0,0,.18)}
.rvo-mono-d{margin-top:6cqh!important;font:500 7.5cqw/1 'Playfair Display',Georgia,serif;letter-spacing:.24em;padding-left:.24em;color:#8a3f24;white-space:nowrap}

/* the pen: its nib's point is placed by the script; its shadow lifts away from it between strokes */
.rvo-pen{position:absolute;left:0;top:0;pointer-events:none;opacity:0;will-change:transform}
.rvo-pen img{position:absolute;inset:0;width:100%;height:100%}
.rvo-pen-shadow{mix-blend-mode:multiply}

/* the controls */
.rvo-sign,.rvo-tap{position:absolute;transform:translate(-50%,-50%);min-height:46px;padding:0 clamp(18px,calc(var(--u) * 8),30px);border:1px solid var(--rvo-ink);
 border-radius:2px;background:var(--rvo-ink);color:var(--rvo-cream);font:500 12px/1 'Playfair Display',Georgia,serif;letter-spacing:.24em;text-transform:uppercase;
 box-shadow:0 2px 14px rgba(27,44,102,.28);cursor:pointer;opacity:0;white-space:nowrap;outline-offset:4px;z-index:2}
.rvo-tap{opacity:1}
.rvo-sign:hover{background:#25397f}
.rvo-sign[hidden],.rvo-tap[hidden],.rvo-skip[hidden]{display:none}
.rvo-skip{position:absolute;top:max(14px,env(safe-area-inset-top));right:max(14px,env(safe-area-inset-right));z-index:3;min-height:44px;padding:0 18px;border-radius:999px;
 border:1px solid rgba(255,255,255,.75);background:rgba(255,250,240,.72);color:var(--rvo-ink);font:500 11px/1 'Playfair Display',Georgia,serif;letter-spacing:.24em;
 text-transform:uppercase;cursor:pointer;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);transition:opacity .3s ease}
.rvo-sign:focus-visible,.rvo-tap:focus-visible,.rvo-skip:focus-visible{outline:2px solid var(--rvo-ink)}
.rvo[data-phase="done"] .rvo-skip,.rvo[data-phase="skip"] .rvo-skip{opacity:0;pointer-events:none}
@media (prefers-reduced-motion:reduce){.rvo-line{will-change:auto}}