/* The reception at the Rocca: the painting is drawn by rocca-depth.js; here
   live its titles (written by the scroll, as the ceremony's), the warm air of
   the glass hall, the final card and the stills for reduced motion. */
.rocca-world{background:transparent}
.rocca-lens{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.card-paper{position:absolute;max-width:none;opacity:0;visibility:hidden;pointer-events:none;user-select:none}
.rocca-stills{position:absolute;inset:0;display:none}
.rocca-world.stills .rocca-stills{display:block}.rocca-world.stills .rocca-lens{display:none}
.still{opacity:0}
.still-print{position:absolute;left:var(--print-x);top:var(--print-y);width:var(--print-w);height:var(--print-h);object-fit:cover;border-radius:2px;
  -webkit-mask-image:radial-gradient(ellipse 54% 60% at 50% 50%,#000 78%,transparent 100%);mask-image:radial-gradient(ellipse 54% 60% at 50% 50%,#000 78%,transparent 100%)}

/* Titles: eyebrow, then the name written in ink by the scroll. */
.rocca-copy,.aperitivo-copy,.dinner-copy,.party-copy{top:6.5%;left:7%;right:7%;visibility:hidden}
.rocca-world .scene-copy .eyebrow{font-size:10px;letter-spacing:.19em;margin-bottom:12px;opacity:0}
.rocca-world .scene-copy h2{font-size:clamp(40px,10.8vw,54px);line-height:.96;margin:0;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;
  padding:.12em .1em .26em;margin:-.12em -.1em -.26em}
.rocca-world .scene-copy h2 i{font-size:.67em;line-height:1.15;display:inline-block;margin-top:3px;letter-spacing:-.01em}
.aperitivo-copy h2 i,.dinner-copy h2 i,.party-copy h2 i{font-size:1em;margin-top:0}
.rocca-world .scene-copy:before{content:'';position:absolute;z-index:-1;inset:-30px -26px;pointer-events:none;background:radial-gradient(ellipse,var(--halo) 10%,var(--halo-soft) 50%,transparent 73%)}
.rocca-copy{color:#304739;text-shadow:0 1px 12px #fffff7c0;--halo:#fffdf3b8;--halo-soft:#fffdf350}
.aperitivo-copy{color:#4a3a2c;text-shadow:0 1px 14px #fff4e2c8;--halo:#fff3e2b0;--halo-soft:#fff3e244}
.dinner-copy{color:#fff7e6;text-shadow:0 1px 16px #152238b0,0 0 2px #15223860;--halo:#17253c66;--halo-soft:#17253c22}
.dinner-copy .eyebrow{color:#fff0d4}
.party-copy{color:#46331f;text-shadow:0 1px 14px #fff6deb8;--halo:#fff6e0a8;--halo-soft:#fff6e03a}

/* The glass hall's warm air, alive only while the party is in view. */
.rocca-air{position:absolute;inset:0;pointer-events:none;opacity:0;overflow:hidden}
.hall-mote{position:absolute;width:var(--s);height:var(--s);border-radius:50%;background:radial-gradient(circle,#fff6d6 0%,#ffe2a0cc 36%,#ffe2a000 72%);opacity:0;animation:hall-float var(--t) ease-in-out var(--d) infinite;animation-play-state:paused}
.rocca-world[data-party=true] .hall-mote,.rocca-world[data-party=true] .hall-petal,.rocca-world[data-party=true] .hall-petal span{animation-play-state:running}
.ambience-paused .hall-mote{animation-play-state:paused!important}
@keyframes hall-float{0%{opacity:0;transform:translate3d(0,0,0)}30%{opacity:.85}70%{opacity:.6}100%{opacity:0;transform:translate3d(var(--dx),var(--dy),0)}}

/* The card: the print of the evening above, the essentials beneath, and a
   footer of its own at the foot of the paper. */
.rocca-world .card-copy{position:absolute;left:calc(var(--card-x) + var(--card-w) * .07);width:calc(var(--card-w) * .86);
  top:calc(var(--print-y) + var(--print-h) + 8px);height:calc(var(--card-y) + var(--card-h) - var(--print-y) - var(--print-h) - 14px);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--card-gap);text-align:center;color:#3f5140;pointer-events:none;
  --card-gap:clamp(20px,calc(var(--card-w) * .085),34px);
  padding-bottom:var(--card-foot,62px)}
.card-layer{position:absolute;inset:0;transform-origin:0 0;pointer-events:none;visibility:hidden}
.card-copy .eyebrow{font-size:9px;letter-spacing:.3em;color:#6a7a62}
.card-copy h2{font-size:clamp(30px,calc(var(--card-w) * .112),42px);font-weight:400;line-height:1;letter-spacing:-.02em;margin:0}
.card-copy h2 i{font-size:.7em}
.card-date{font-size:clamp(19px,calc(var(--card-w) * .066),24px);letter-spacing:.03em;font-variant-numeric:lining-nums;font-feature-settings:'lnum' 1}
.card-date span{font-style:italic;letter-spacing:0;margin-right:.15em}
.card-place{display:grid;gap:3px;width:100%}
/* Three groups — the date with the couple, the ceremony, the reception — with
   a rule exactly halfway between each (one equal gap around every item). */
.card-couple{display:grid;justify-items:center;gap:4px}
/* The couple reads as a quiet line above the date: sans, small, spaced
   capitals like the card's labels; the date below is the serif headline. */
.card-couple .card-names{font:500 10.5px/1.5 system-ui,sans-serif;letter-spacing:.26em;text-transform:uppercase;color:#56664f;margin:0 0 6px}
.card-couple .card-dot{margin:0 .5em 0 .75em}
.card-couple .card-date{font-size:clamp(25px,calc(var(--card-w) * .093),36px);font-weight:400;line-height:1.25;letter-spacing:-.01em;white-space:nowrap;color:#3f5140;
  font-variant-numeric:lining-nums;font-feature-settings:'lnum' 1}
.card-couple .card-date i{font-size:.78em;margin-right:.12em}
.card-rule{display:block;flex:none;width:28px;height:1px;background:currentColor;opacity:.35}
.card-label{font:600 8.5px/1.4 system-ui,sans-serif;letter-spacing:.24em;text-transform:uppercase;color:#6a7a62}
.card-name{font-size:clamp(18px,calc(var(--card-w) * .06),21px);line-height:1.15}
.card-detail{font:11px/1.55 system-ui,sans-serif;letter-spacing:.01em;color:#56664f}
.card-detail a{color:inherit;text-decoration:underline;text-decoration-color:#82907580;text-underline-offset:3px;padding:6px 2px;margin:-6px -2px}
.card-detail a:focus-visible,.watch-again:focus-visible{outline:2px solid #718367;outline-offset:3px}
.rocca-world .final-footer{position:absolute;left:10%;right:10%;bottom:4px;display:grid;justify-items:center;padding-top:8px;
  border-top:1px solid #82907538;pointer-events:none;color:#52604c}
.watch-again{border:0;background:transparent;font:10px system-ui,sans-serif;letter-spacing:.09em;padding:8px 16px;min-height:44px;cursor:pointer;color:#52604c;text-decoration:underline;text-decoration-color:#82907555;text-underline-offset:4px}

@media(max-height:700px){
  .rocca-copy,.aperitivo-copy,.dinner-copy,.party-copy{top:5.5%}
  .rocca-world .scene-copy h2{font-size:38px}
  .card-copy h2{font-size:28px}.card-date{font-size:17px}.card-name{font-size:16px}.card-detail{font-size:10px;line-height:1.45}
  .card-couple{gap:5px}.card-couple .card-names{font-size:9.5px;margin-bottom:3px}.card-couple .card-date{font-size:24px}.rocca-world .card-copy{--card-foot:54px}
}
@media(prefers-reduced-motion:reduce){.rocca-world .scene-copy h2{-webkit-mask-image:none;mask-image:none}.rocca-air{display:none}}

/* The portrait composition is unchanged. A rotated phone needs a readable,
   scrollable card rather than clipping its actions below the landscape frame. */
@media(orientation:landscape) and (max-height:480px){
  .rocca-world[data-card-ready=true] .card-layer{transform:none!important;opacity:1!important}
  .rocca-world[data-card-ready=true] .card-copy{left:7%;width:86%;top:12px;height:calc(100% - 24px);display:block;overflow-y:auto;overscroll-behavior:contain;padding:16px 12px 24px;background:#f6f2e9f2;border-radius:2px}
  .rocca-world[data-card-ready=true] .card-line{margin-bottom:18px}
  .rocca-world[data-card-ready=true] .card-place{gap:4px}
  .rocca-world[data-card-ready=true] .card-rule{margin:0 auto 18px}
  .rocca-world[data-card-ready=true] .final-footer{position:static;margin-top:8px}
  .rocca-world[data-card-ready=true]{transform:none!important}
}

/* The written invitation at the bottom: a thread with a rising light, in time
   with each swell, and a few words. Ink by day, ivory at night and in the hall. */
.swell-hint{position:absolute;z-index:4;left:0;right:0;bottom:calc(3.2% + env(safe-area-inset-bottom));display:grid;justify-items:center;gap:10px;
  opacity:0;transform:translateY(6px);transition:opacity .9s ease,transform .9s ease;pointer-events:none;color:#2c4234;text-shadow:0 0 12px #fffdf3,0 0 22px #fffdf3,0 0 3px #fffdf3}
body[data-cue] .swell-hint{opacity:1;transform:none}
body[data-cue=''] .swell-hint{opacity:0;transform:translateY(6px);transition-duration:.35s}
.swell-hint .hint-thread{position:relative;display:block;width:1px;height:42px;background:linear-gradient(#0000,currentColor 25%,currentColor 75%,#0000);opacity:.7;margin:0;overflow:visible}
.swell-hint .hint-thread:before{content:'';position:absolute;left:50%;top:-1px;width:7px;height:7px;margin-left:-4px;border:solid currentColor;border-width:1px 0 0 1px;transform:rotate(45deg)}
.swell-hint .hint-light{position:absolute;left:50%;top:100%;width:6px;height:6px;margin:-3px 0 0 -3px;border-radius:50%;background:currentColor;box-shadow:0 0 10px 3px currentColor;opacity:0}
.swell-hint .scroll-label{font:italic 17px/1.3 Invitation,Georgia,serif;letter-spacing:.01em;margin:0}
body[data-hint-tone=light] .swell-hint{color:#fff7e8;text-shadow:0 0 14px #1b2436c0,0 0 3px #1b243690}
@media(prefers-reduced-motion:reduce){.swell-hint .hint-light{display:none}}
.swell-hint:before{content:'';position:absolute;z-index:-1;left:50%;bottom:-18px;width:300px;height:120px;margin-left:-150px;background:radial-gradient(ellipse at 50% 70%,#fffdf3a8,#fffdf300 68%);pointer-events:none}
body[data-hint-tone=light] .swell-hint:before{background:radial-gradient(ellipse at 50% 70%,#18233a70,#18233a00 68%)}
/* Always there in the sky: the thread alone, quiet, drawing itself upward like
   a pen stroke, so the story never looks finished. Resting adds the words and
   the swell; scrolling dims it; the final card, where the story ends, lets it go. */
body[data-state=sky] .swell-hint{opacity:.85;transform:none}
body[data-state=sky][data-cue=''] .swell-hint{opacity:.6;transform:none;transition-duration:.4s}
body[data-state=sky][data-cue=start] .swell-hint,body[data-state=sky][data-cue=continue] .swell-hint{opacity:1}
.swell-hint .scroll-label,.swell-hint:before{transition:opacity .35s ease}
body:not([data-cue=start]):not([data-cue=continue]) .swell-hint .scroll-label,
body:not([data-cue=start]):not([data-cue=continue]) .swell-hint:before{opacity:0}
.swell-hint .hint-thread{transform-origin:50% 100%;animation:thread-draw 3.6s cubic-bezier(.45,.05,.25,1) infinite}
body[data-cue=start] .swell-hint .hint-thread,body[data-cue=continue] .swell-hint .hint-thread{animation:none}
@keyframes thread-draw{0%{transform:scaleY(0);opacity:0}10%{opacity:1}55%{transform:scaleY(1);opacity:1}82%{transform:scaleY(1);opacity:1}100%{transform:scaleY(1);opacity:0}}
/* A clearer thread and words: a firmer stroke, a larger arrow and text. */
.swell-hint .hint-thread{width:1.5px;height:50px;opacity:.9}
.swell-hint .hint-thread:before{width:10px;height:10px;margin-left:-5.25px;border-width:1.5px 0 0 1.5px}
.swell-hint .scroll-label{font-size:20px}
body[data-cue=start] .swell-hint,body[data-cue=continue] .swell-hint{transition-duration:.35s}
.rocca-world[data-card-ready=true]~.swell-hint{opacity:0!important;transition-duration:.6s}
/* The date is written low on the page: there the words alone invite onwards. */
body[data-reading='2'] .swell-hint .hint-thread{opacity:0;animation:none}
.ambience-paused .swell-hint .hint-thread{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){.swell-hint .hint-thread{animation:none}}