/* The invitation's second world: light, unfinished watercolor and moving air. */
.sky-background{position:absolute;inset:-12% -8% -48%;animation:sky-breathe 32s ease-in-out infinite alternate}
.sky-background .sky{inset:-5%;width:110%;height:110%;transform-origin:50% 50%}
.sky-plane{position:absolute;inset:0;transform-origin:50% 48%;pointer-events:none;will-change:transform;opacity:0}
.sky-sway{position:absolute;inset:-8%;transform-origin:0 0;animation:sky-branch-wind 11s ease-in-out -4s infinite alternate}
.sky-sway img{display:block;width:100%;height:100%;object-fit:cover}
.sky-branch-right .sky-sway{transform-origin:100% 0;animation-duration:13s;animation-delay:-9s}
.sky-foreground .sky-sway{transform-origin:0 100%;animation:sky-near-wind 8s ease-in-out -2s infinite alternate;filter:blur(2.8px)}
.sky-leaves .sky-sway{transform-origin:100% 65%;animation:sky-near-wind 9s ease-in-out -7s infinite alternate;filter:blur(5px)}
.sky-clouds,.sky-particles{position:absolute;inset:0;pointer-events:none}
.sky-clouds{z-index:0}.sky-plane{z-index:1}.sky-particles{z-index:2}
.cloud-plane{position:absolute;pointer-events:none;transform-origin:50% 50%}
.cloud-plane img{width:100%;display:block;opacity:var(--cloud-alpha);animation:cloud-drift var(--cloud-time) ease-in-out var(--cloud-delay) infinite alternate}
.sky-petal{position:absolute;aspect-ratio:1;will-change:transform;pointer-events:none}
.sky-petal-body{display:block;width:100%;height:100%;filter:blur(var(--blur));animation:sky-petal-drift var(--drift) ease-in-out var(--delay) infinite alternate}
.sky-petal img{width:100%;height:100%;display:block;object-fit:contain}
.promise{top:39%;left:5%;right:5%;transform:translateY(var(--names-rise,0px))!important;color:#fff4dc}
.promise .couple{margin:0;font-size:clamp(62px,16.5vw,86px);line-height:.96;font-weight:400;letter-spacing:-.035em;text-shadow:0 2px 22px #123e74a0}
.couple i{font-size:.48em;line-height:1.35;margin:7px 0;opacity:1}
.name-line{transform-origin:50% 50%;will-change:transform}
.scroll-hint{bottom:calc(5% + env(safe-area-inset-bottom));font-style:normal;color:#fff4dc;text-shadow:0 1px 12px #fffef5}
.scroll-hint .scroll-label{font:500 10px/1.6 system-ui,sans-serif;letter-spacing:.10em;margin-top:14px}
.scroll-hint .scroll-stroke{position:relative;display:block;height:34px;width:1px;background:#fff4dc40;margin:0 auto;overflow:hidden}
.scroll-stroke:after{content:'';position:absolute;inset:0;background:#fff4dc;transform:translateY(-100%);animation:scroll-invitation 2.4s ease-in-out infinite}
body[data-state=sealed] .scroll-hint,body[data-state=opening] .scroll-hint{display:none}
.church-lens{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;opacity:0}
.church-world{background:transparent;will-change:transform}
.lens-ready .church-lens{opacity:1}.lens-ready .church-camera,.lens-ready .church-interior{visibility:hidden}
.church-copy{top:5%;left:8%;right:8%;color:#183e74;text-shadow:0 1px 1px #fff4dc55}
.church-copy .eyebrow{font-size:10px;letter-spacing:.19em;margin-bottom:12px}
.church-copy h2{font-size:clamp(40px,10.8vw,54px);line-height:.96;margin:0}
.church-copy h2 i{font-size:.67em;line-height:1.15;display:inline-block;margin-top:3px;letter-spacing:-.01em}
.interior-copy{bottom:8%;color:#183e74;text-shadow:0 1px 1px #fff4dc55}
.interior-copy .eyebrow{font-size:10px;letter-spacing:.18em}
.wedding-date{margin-top:8px;line-height:.85}
.wedding-date>span:first-child{font-size:clamp(76px,21vw,112px);display:block;font-weight:400}
.wedding-date i{display:block;font-size:40px;line-height:1;margin:4px 0 10px}
.wedding-date .date-year{font-size:23px;letter-spacing:.20em;margin-left:.20em}
.experience-tools{left:auto;justify-content:flex-end;opacity:1!important;visibility:visible!important;pointer-events:none!important}
.experience-tools .sound-toggle{pointer-events:auto!important;background:#fff4dccf;box-shadow:0 1px 12px #3a503617}
body[data-state=opening] .experience-tools{z-index:6}
body[data-state=sealed] .sky-world *,body[data-state=opening] .sky-world *{animation-play-state:paused!important}
body[data-first-passage=true] .ambience .wind-depth{display:none}
.ambience .light-wash{filter:blur(12px);opacity:.15}
.ambience-paused .sky-world *,.ambience-paused .scroll-stroke:after{animation-play-state:paused!important}
.sky-world[data-active=false] *{animation-play-state:paused!important}
@keyframes sky-breathe{from{transform:translate(-.5%,.4%) scale(1)}to{transform:translate(.7%,-.6%) scale(1.025)}}
@keyframes sky-branch-wind{from{transform:rotate(-1.5deg) skewX(-.45deg) translate(-2px,1px)}to{transform:rotate(1.7deg) skewX(.55deg) translate(3px,-3px)}}
@keyframes sky-near-wind{from{transform:rotate(-1.8deg) translate(-3px,-4px)}to{transform:rotate(2deg) translate(5px,6px)}}
@keyframes cloud-drift{from{transform:translate(-12%,4%) scale(.98)}to{transform:translate(18%,-7%) scale(1.06)}}
@keyframes sky-petal-drift{0%{transform:translate(-38px,-40px) rotate(var(--turn)) rotateY(-20deg)}48%{transform:translate(32px,20px) rotate(calc(var(--turn) + 64deg)) rotateY(28deg)}100%{transform:translate(85px,75px) rotate(calc(var(--turn) + 130deg)) rotateY(-15deg)}}
@keyframes scroll-invitation{0%,15%{transform:translateY(-100%)}65%,100%{transform:translateY(100%)}}
@media(max-height:700px){.promise{top:35%}.promise .couple{font-size:62px}.church-copy h2{font-size:38px}.church-copy .eyebrow{margin-bottom:8px}.interior-copy{bottom:7%}.wedding-date>span:first-child{font-size:76px}.wedding-date i{font-size:34px;margin-bottom:7px}}
@media(prefers-reduced-motion:reduce){.sky-world *,.scroll-stroke:after{animation:none!important}.sky-plane,.name-line,.cloud-bridge{will-change:auto}.sky-sway,.sky-petal-body{filter:none}.sky-particles{display:none}}

@media(prefers-reduced-motion:reduce){.lens-ready .church-camera,.lens-ready .church-interior{visibility:visible}.church-lens{display:none}}
/* Arrival: the names are written into the sky, left to right, as ink settling
   on wet paper. The container keeps the scroll-driven exit. */
.name-line,.couple i{opacity:0;-webkit-mask-image:linear-gradient(100deg,#000 44%,transparent 56%);mask-image:linear-gradient(100deg,#000 44%,transparent 56%);-webkit-mask-size:260% 100%;mask-size:260% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:100% 0;mask-position:100% 0}
body[data-arrived] .name-line{animation:name-ink 1.9s cubic-bezier(.22,.61,.25,1) .15s both}
body[data-arrived] .couple i{animation:name-ink 1.3s cubic-bezier(.22,.61,.25,1) .75s both}
body[data-arrived] .name-line:last-of-type{animation-delay:.85s}
.sky-particles{opacity:0;transition:opacity 3s ease .1s}
body[data-arrived] .sky-particles{opacity:1}
@keyframes name-ink{0%{opacity:0;filter:blur(10px);transform:translateY(10px) scale(.982);-webkit-mask-position:100% 0;mask-position:100% 0}35%{opacity:1}100%{opacity:1;filter:blur(0);transform:none;-webkit-mask-position:0 0;mask-position:0 0}}
@keyframes hint-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.name-line,.couple i{-webkit-mask-image:none;mask-image:none}body[data-arrived] .name-line,body[data-arrived] .couple i{animation:hint-in 1s ease both}}
/* Inside Sant'Afra: light from the clerestory, suspended air and the date,
   written as the names were. Entry is timed once reached; scrolling away
   carries the whole moment off through the container's opacity. */
.nave-air{position:absolute;inset:0;pointer-events:none;opacity:0;overflow:hidden}
.nave-mote{position:absolute;width:var(--s);height:var(--s);border-radius:50%;background:radial-gradient(circle,#fffbef 0%,#fff6dccc 38%,#fff6dc00 72%);opacity:0;animation:mote-float var(--t) ease-in-out var(--d) infinite;animation-play-state:paused}
.nave-petal{position:absolute;top:-9%;left:var(--x);width:var(--s);aspect-ratio:1;animation:nave-fall var(--t) linear var(--d) infinite;animation-play-state:paused;will-change:transform}
.nave-petal span{display:block;width:100%;height:100%;filter:blur(var(--blur));animation:petal-flutter var(--flutter) ease-in-out var(--d) infinite alternate;animation-play-state:paused}
.nave-petal img{display:block;width:100%;height:100%;object-fit:contain}
body[data-date] .nave-mote,body[data-date] .nave-petal,body[data-date] .nave-petal span{animation-play-state:running}
.ambience-paused .nave-air *,.ambience-paused .rocca-air *{animation-play-state:paused!important}
.wedding-date{font-variant-numeric:lining-nums;font-feature-settings:'lnum' 1}
.wedding-date .date-day{display:block;font-size:clamp(84px,24vw,124px);font-weight:400;letter-spacing:-.02em;line-height:.9}
.wedding-date i{margin:2px 0 14px}
.date-rule{display:block;width:54px;height:1px;margin:0 auto 12px;background:currentColor;opacity:.55;transform-origin:50% 50%}
.wedding-date .date-year{display:inline-block;font-size:21px;letter-spacing:.32em;margin-left:.32em}
.interior-copy .eyebrow,.wedding-date .date-day,.wedding-date i,.date-rule,.wedding-date .date-year{opacity:0}
.wedding-date .date-day,.wedding-date i{-webkit-mask-image:linear-gradient(100deg,#000 44%,transparent 56%);mask-image:linear-gradient(100deg,#000 44%,transparent 56%);-webkit-mask-size:260% 100%;mask-size:260% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:100% 0;mask-position:100% 0}
@keyframes mote-float{0%{opacity:0;transform:translate3d(0,0,0)}25%{opacity:.9}75%{opacity:.7}100%{opacity:0;transform:translate3d(var(--dx),var(--dy),0)}}
@keyframes nave-fall{0%{transform:translate3d(0,0,0)}50%{transform:translate3d(calc(var(--dx)*.62),calc(var(--stage-height)*.6),0)}100%{transform:translate3d(var(--dx),calc(var(--stage-height)*1.22),0)}}
@keyframes rule-draw{from{opacity:0;transform:scaleX(0)}to{opacity:.55;transform:none}}
@media(max-height:700px){.wedding-date .date-day{font-size:84px}.wedding-date i{margin-bottom:9px}.date-rule{margin-bottom:8px}}
@media(prefers-reduced-motion:reduce){.nave-mote{animation:none!important}.nave-air{display:none}.wedding-date .date-day,.wedding-date i{-webkit-mask-image:none;mask-image:none}}
.church-copy .eyebrow,.church-copy h2{opacity:0}
.church-copy h2{-webkit-mask-image:linear-gradient(100deg,#000 44%,transparent 56%);mask-image:linear-gradient(100deg,#000 44%,transparent 56%);-webkit-mask-size:260% 100%;mask-size:260% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:100% 0;mask-position:100% 0}
@media(prefers-reduced-motion:reduce){.church-copy h2{-webkit-mask-image:none;mask-image:none}}
/* The ink mask clips to the element box: give descenders and swashes room
   without moving the text. */
.name-line,.couple i,.church-copy h2,.wedding-date .date-day,.wedding-date i{padding:.12em .1em .26em;margin:-.12em -.1em -.26em}
.couple i{margin:calc(7px - .12em) -.1em calc(7px - .26em)}
.wedding-date i{margin:calc(2px - .12em) -.1em calc(14px - .26em)}
@media(max-height:700px){.wedding-date i{margin-bottom:calc(9px - .26em)}}
/* The invitation to continue belongs to the stops of the scroll score. */
.scroll-hint{opacity:0;transition:opacity .9s ease,transform .9s ease;transform:translateY(6px)}
body[data-cue] .scroll-hint{opacity:1;transform:none}
body[data-cue=''] .scroll-hint{opacity:0;transform:translateY(6px);transition-duration:.35s}
body[data-state=sky]{overflow:hidden!important}body[data-state=sky] .journey{height:var(--stage-height)!important}
body[data-state=sky] .stage{touch-action:none}
.sky-near{position:absolute;inset:0;z-index:1;pointer-events:none}
.sky-near .sky-particles{z-index:2}
body[data-state=sealed] .sky-near *,body[data-state=opening] .sky-near *,.ambience-paused .sky-near *,.sky-near[data-active=false] *{animation-play-state:paused!important}
@media(prefers-reduced-motion:reduce){.sky-near *{animation:none!important}.sky-near .sky-sway,.sky-near .sky-petal-body{filter:none}.sky-near .sky-particles{display:none}}
/* Petals thrown from both sides of the nave: a horizontal throw, a rising and
   falling arc, and the petal's own tumble on three nested layers. */
.burst-petal{position:absolute;bottom:-6%;width:var(--s);height:var(--s);opacity:0;pointer-events:none;will-change:transform}
.burst-arc,.burst-spin{display:block;width:100%;height:100%}
.burst-spin img{display:block;width:100%;height:100%;object-fit:contain;filter:blur(var(--blur))}
body[data-date] .burst-petal{animation:burst-x var(--t) cubic-bezier(.18,.62,.36,1) var(--d) both}
body[data-date] .burst-arc{animation:burst-y var(--t) linear var(--d) both}
body[data-date] .burst-spin{animation:burst-spin var(--t) linear var(--d) both}
@keyframes burst-x{0%{opacity:0;transform:translateX(0)}6%{opacity:1}85%{opacity:1}100%{opacity:0;transform:translateX(var(--bx))}}
@keyframes burst-y{0%{transform:translateY(0);animation-timing-function:cubic-bezier(.12,.72,.32,1)}38%{transform:translateY(var(--by));animation-timing-function:cubic-bezier(.5,0,.8,.6)}100%{transform:translateY(calc(var(--by) * -.25))}}
@keyframes burst-spin{from{transform:rotate(var(--turn)) rotateX(10deg)}to{transform:rotate(calc(var(--turn) + 420deg)) rotateX(320deg)}}
/* After the ink, a glint of gold crosses the date like light on foil. */
.foil{color:#183e74;background:linear-gradient(100deg,#183e74 0 42%,#9b7a3c 46%,#e9cf8c 49.5%,#fff4cf 50%,#e9cf8c 50.5%,#9b7a3c 54%,#183e74 58% 100%);background-size:320% 100%;background-position:100% 0;-webkit-background-clip:text;background-clip:text}
body[data-date] .foil{-webkit-text-fill-color:transparent;animation:foil-glint 2.2s cubic-bezier(.45,.05,.3,1) 2.55s both}
body[data-date] i .foil{animation-delay:2.9s}
@keyframes foil-glint{from{background-position:100% 0}to{background-position:0 0}}
@media(prefers-reduced-motion:reduce){.burst-petal{display:none}body[data-date] .foil{animation:none}}
.foil{text-shadow:none}
body[data-cue=continue] .scroll-stroke{display:none}
body[data-cue=continue] .scroll-hint .scroll-label{margin-top:0}
/* Ceremony and date are written by the scroll (journey.js). */
.church-copy:before{opacity:1}
.interior-copy .eyebrow,.wedding-date .date-day,.wedding-date i,.date-rule,.wedding-date .date-year{will-change:auto}
body[data-date] .foil{animation-delay:.9s}body[data-date] i .foil{animation-delay:1.25s}
.scroll-hint .scroll-label{font-size:11px;letter-spacing:.12em}
/* The invitation to scroll is a swell through the painting (invite.js). */
.swell-lens{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;visibility:hidden}
/* Keep each animation's phase for reverse travel, but suspend invisible work. */
.church-world[data-air-active=false] .nave-air *{animation-play-state:paused!important}
.rocca-world:not([data-party=true]) .rocca-air *{animation-play-state:paused!important}
body[data-state=sealed] .ambience *,body[data-state=opening] .ambience *,.ambience[data-active=false] *{animation-play-state:paused!important}