/* A physical scroll: the roller and the exposed sheet share one visible-time clock. */
#invitation-page #invitation.autumn-scroll-section {
  --scroll-play:paused; --scroll-ink:#26392d; --scroll-unroll:5.4s;
  position:relative; isolation:isolate; overflow:hidden; width:100%; min-height:0;
  padding:5.3rem 24px 6.5rem; color:#f0e3c6; background:#25372d; text-align:center;
}
#invitation-page #invitation.scroll-running { --scroll-play:running; }
#invitation-page #invitation.autumn-scroll-section::before {
  content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:linear-gradient(#25372d 0%,rgb(37 55 45/.32) 13%,transparent 34%,transparent 72%,#25372d 100%);
}
#invitation-page #invitation.autumn-scroll-section::after { display:none; }
#invitation-page #invitation .autumn-scroll-garden { position:absolute; z-index:-1; inset:0; overflow:hidden; pointer-events:none; }
#invitation-page #invitation .autumn-scroll-garden img { display:block; width:100%; height:100%; object-fit:cover; object-position:center 57%; filter:saturate(.84); }
#invitation-page #invitation .autumn-scroll-heading { position:relative; z-index:1; margin:0 auto 3.3rem; max-width:38rem; }
#invitation-page #invitation .autumn-scroll-heading h2 { margin:0; font-family:'Cormorant Garamond',Georgia,serif; font-style:italic; font-size:clamp(2.25rem,8.6vw,3.5rem); line-height:1.2; font-weight:500; letter-spacing:-.015em; color:#f0e3c6; text-shadow:0 1px 1px #1a291f,0 0 18px rgb(237 204 132/.2); }
#invitation-page #invitation .autumn-scroll-heading p { margin:.8rem 0 0; font-family:'Lora',Georgia,serif; font-size:.78rem; line-height:1.7; color:#d4c7a8; }
#invitation-page #invitation .autumn-scroll-stage { position:relative; z-index:2; width:min(100%,520px); margin:auto; filter:drop-shadow(0 18px 25px rgb(9 21 14/.27)); }
#invitation-page #invitation .autumn-scroll-trigger { position:absolute; top:80px; left:45%; width:10%; height:16px; pointer-events:none; }
#invitation-page #invitation .autumn-scroll-paper { position:relative; z-index:1; isolation:isolate; width:100%; clip-path:none; }
/* Solid backing is present even if the decorative vellum image fails. */
#invitation-page #invitation .autumn-scroll-paper::before { content:''; position:absolute; z-index:-1; inset:3.3% 3.7%; background:#eadfc4; }
/* Light reaches the material from above; the live ink remains above this layer. */
#invitation-page #invitation .autumn-scroll-paper::after {
  content:''; position:absolute; z-index:0; inset:3.3% 3.7%; pointer-events:none;
  background:radial-gradient(ellipse 75% 65% at 50% 0%,rgb(255 248 215/.57),rgb(255 239 190/.19) 43%,transparent 82%);
  animation:scroll-paper-light 8s ease-in-out infinite alternate; animation-play-state:var(--scroll-play);
}
#invitation-page #invitation .autumn-scroll-vellum { position:absolute; z-index:0; inset:0; display:block; width:100%; height:100%; object-fit:fill; pointer-events:none; }
#invitation-page #invitation .autumn-scroll-copy { position:relative; z-index:1; min-height:620px; padding:4.7rem 13% 4.9rem; font-family:'Cormorant Garamond',Georgia,serif; font-weight:500; color:var(--scroll-ink); text-shadow:none; }
#invitation-page #invitation .autumn-scroll-blessing { max-width:20rem; margin:0 auto; color:#503818; font-size:1.12rem; font-style:italic; line-height:1.55; text-wrap:balance; overflow-wrap:anywhere; }
#invitation-page #invitation .autumn-scroll-invite { margin:1.35rem auto 1.5rem; font-size:1.02rem; line-height:1.55; color:#293b29; font-weight:600; }
#invitation-page #invitation .autumn-scroll-families { display:grid; grid-template-columns:minmax(0,1fr); gap:.55rem; align-items:start; }
#invitation-page #invitation .autumn-scroll-person { min-width:0; }
#invitation-page #invitation .autumn-scroll-person h3 { margin:0 0 .7rem; padding:.08em .035em .04em; font-family:'Pinyon Script','Bodoni Moda',Georgia,serif; font-weight:400; font-style:normal; font-size:clamp(3rem,13vw,4.1rem); line-height:1.15; letter-spacing:0; color:#4c3012; text-shadow:0 .6px 0 rgb(255 240 202/.35),0 1.4px 1px rgb(63 36 10/.16); overflow-wrap:anywhere; text-wrap:balance; }
#invitation-page #invitation .autumn-scroll-parents { margin:0 auto; max-width:18rem; font-size:1rem; line-height:1.48; color:#2f3c28; text-wrap:balance; overflow-wrap:anywhere; font-weight:600; }
#invitation-page #invitation .autumn-scroll-and { color:#5e3c18; font-family:'Pinyon Script','Bodoni Moda',Georgia,serif; font-size:1.95rem; line-height:1.25; font-weight:400; font-style:normal; text-shadow:0 1px 1px rgb(63 36 10/.12); }
#invitation-page #invitation .autumn-scroll-rule { display:flex; align-items:center; justify-content:center; gap:12px; margin:1.45rem auto 1rem; width:65%; }
#invitation-page #invitation .autumn-scroll-rule::before,#invitation-page #invitation .autumn-scroll-rule::after { content:''; height:1px; flex:1; background:linear-gradient(90deg,transparent,#aa8858); }
#invitation-page #invitation .autumn-scroll-rule::after { transform:scaleX(-1); }
#invitation-page #invitation .autumn-scroll-rule img { display:block; width:23px; height:23px; object-fit:contain; filter:saturate(.6); }
#invitation-page #invitation .autumn-scroll-date { margin:0; font-family:'Cormorant Garamond',Georgia,serif; font-size:clamp(1.85rem,7.3vw,2.25rem); font-weight:600; line-height:1.3; color:#503312; text-shadow:0 1px 1px rgb(63 36 10/.1); }
#invitation-page #invitation .autumn-scroll-venue { margin:.7rem auto 0; max-width:24rem; font-size:1.08rem; line-height:1.5; font-style:italic; color:#2c3c27; text-wrap:balance; overflow-wrap:anywhere; }
#invitation-page #invitation .autumn-scroll-signoff { margin:1.75rem auto 0; max-width:18rem; font-size:.97rem; line-height:1.6; font-style:italic; color:#414b32; text-wrap:balance; }
/* A passing glint travels through raised bronze lettering, not through a box. */
@supports (background-clip:text) or (-webkit-background-clip:text) {
  #invitation-page #invitation .autumn-scroll-person h3 {
    background-image:linear-gradient(112deg,#39250f 0%,#553713 37%,#79521f 45%,#98723b 48%,#79521f 51%,#432b10 59%,#5c3c17 100%);
    background-size:300% 100%; background-position:100% 0; background-clip:text; -webkit-background-clip:text;
    -webkit-text-fill-color:transparent; -webkit-text-stroke:.3px rgb(65 39 12/.64);
    animation:scroll-foil-glint 6.8s ease-in-out infinite; animation-play-state:var(--scroll-play);
  }
  #invitation-page #invitation .autumn-scroll-person:last-child h3 { animation-delay:-2.1s; }
}
#invitation-page #invitation .autumn-scroll-roller { position:absolute; z-index:4; left:-5%; width:110%; max-width:none; height:auto; pointer-events:none; }
#invitation-page #invitation .autumn-scroll-roller--upper { top:3.25%; transform:translateY(-49%); }
#invitation-page #invitation .autumn-scroll-track { position:absolute; z-index:5; top:3.25%; bottom:3.25%; left:-5%; width:110%; pointer-events:none; }
#invitation-page #invitation .autumn-scroll-roller--lower { position:absolute; left:0; top:100%; width:100%; transform:translateY(-49%); }
#invitation-page #invitation .autumn-scroll-roller--lower>img { display:block; width:100%; height:auto; }
#invitation-page #invitation .autumn-scroll-rolling-light { position:absolute; top:42%; left:10%; width:80%; height:14%; background:linear-gradient(180deg,transparent,rgb(255 246 212/.38),transparent); opacity:0; }
#invitation-page #invitation .autumn-scroll-clasp { position:absolute; z-index:6; width:60px; height:60px; left:calc(50% - 30px); top:calc(3.25% - 30px); opacity:0; pointer-events:none; }
#invitation-page #invitation .autumn-scroll-clasp img { display:block; width:100%; height:100%; }
#invitation-page #invitation .autumn-scroll-daylight { position:absolute; z-index:1; inset:0; pointer-events:none; opacity:.4; background:radial-gradient(ellipse 48% 42% at 50% 22%,rgb(246 215 153/.1),transparent 78%); }
#invitation-page #invitation .autumn-scroll-spotlight {
  position:absolute; z-index:0; top:-185px; left:-28%; width:156%; height:calc(100% + 220px);
  pointer-events:none; mix-blend-mode:screen; opacity:.8;
  animation:scroll-overhead-light 8s ease-in-out infinite alternate; animation-play-state:var(--scroll-play);
}
#invitation-page #invitation .autumn-scroll-spotlight::before {
  content:''; position:absolute; inset:0; filter:blur(13px);
  background:conic-gradient(from 158deg at 50% 0%,transparent 0deg,rgb(249 222 164/.06) 7deg,rgb(255 235 184/.23) 22deg,rgb(249 222 164/.06) 37deg,transparent 44deg);
  mask-image:linear-gradient(transparent,#000 9%,#000 51%,transparent 93%);
}
#invitation-page #invitation .autumn-scroll-spotlight::after {
  content:''; position:absolute; top:10px; left:calc(50% - 90px); width:180px; height:95px;
  background:radial-gradient(ellipse,rgb(255 240 203/.31),rgb(253 226 172/.08) 46%,transparent 72%); filter:blur(12px);
}
#invitation-page #invitation .autumn-scroll-leaves { position:absolute; z-index:3; inset:0; overflow:hidden; pointer-events:none; }
#invitation-page #invitation .autumn-scroll-drift { position:absolute; width:30px; height:auto; opacity:0; left:5%; top:24%; animation:scroll-leaf-drift 11s -2s linear infinite; animation-play-state:var(--scroll-play); filter:saturate(.7) brightness(.86); }
#invitation-page #invitation .autumn-scroll-drift--two { left:auto; right:4%; top:37%; width:24px; animation-duration:13.5s; animation-delay:-7s; }
#invitation-page #invitation .autumn-scroll-drift--three { left:2%; top:56%; width:20px; animation-duration:9.8s; animation-delay:-4s; }
/* Two photographic wings hinge around the body while the outer path drifts. */
#invitation-page #invitation .autumn-scroll-butterflies { position:absolute; z-index:2; inset:3.3% 3.7%; overflow:hidden; pointer-events:none; }
#invitation-page #invitation .autumn-scroll-sparks { position:absolute; z-index:0; inset:0; display:block; width:100%; height:100%; pointer-events:none; }
#invitation-page #invitation .autumn-scroll-butterfly {
  --wing-speed:.58s; position:absolute; z-index:1; top:3%; left:8%; width:28px; height:28px;
  perspective:180px; pointer-events:none; filter:saturate(.76) drop-shadow(0 3px 2px rgb(30 25 12/.14));
  animation:scroll-butterfly-left 12.8s ease-in-out infinite; animation-play-state:var(--scroll-play);
}
#invitation-page #invitation .autumn-scroll-butterfly[hidden] { display:none!important; }
#invitation-page #invitation .autumn-scroll-butterfly--two {
  --wing-speed:.66s; top:auto; left:auto; right:8%; width:26px; height:26px;
  animation-name:scroll-butterfly-right; animation-duration:16.4s; animation-delay:-5.3s; bottom:3%;
}
/* Flight and its trailing light share one clock; wings retain their own flutter. */
#invitation-page #invitation .butterfly-flight-ready .autumn-scroll-butterfly {
  inset:0 auto auto 0; animation:none; will-change:transform;
}
#invitation-page #invitation .autumn-scroll-wing { position:absolute; top:0; left:0; width:50%; height:100%; overflow:hidden; transform-origin:100% 50%; animation:scroll-wing-left var(--wing-speed) ease-in-out infinite; animation-play-state:var(--scroll-play); }
#invitation-page #invitation .autumn-scroll-wing--right { left:50%; transform-origin:0 50%; animation-name:scroll-wing-right; }
#invitation-page #invitation .autumn-scroll-wing img { position:absolute; top:0; left:0; display:block; width:200%; max-width:none; height:100%; }
#invitation-page #invitation .autumn-scroll-wing--right img { left:-100%; }
#invitation-page #invitation .autumn-scroll-butterfly-body { position:absolute; inset:0; width:100%; height:100%; clip-path:inset(12% 45% 15%); }
#invitation-page #invitation.scroll-enhanced:not(.scroll-open):not(.scroll-settled) .autumn-scroll-paper { clip-path:inset(0 0 96.75%); }
#invitation-page #invitation.scroll-enhanced:not(.scroll-open):not(.scroll-settled) .autumn-scroll-roller--lower { top:0; }
#invitation-page #invitation.scroll-enhanced:not(.scroll-open):not(.scroll-settled) .autumn-scroll-clasp { opacity:1; }
#invitation-page #invitation.scroll-open .autumn-scroll-paper { animation:scroll-vellum-unfold var(--scroll-unroll) cubic-bezier(.3,.12,.25,1) both; animation-play-state:var(--scroll-play); }
#invitation-page #invitation.scroll-open .autumn-scroll-roller--lower { animation:scroll-roller-descend var(--scroll-unroll) cubic-bezier(.3,.12,.25,1) both; animation-play-state:var(--scroll-play); }
#invitation-page #invitation.scroll-open .autumn-scroll-rolling-light { animation:scroll-roller-light var(--scroll-unroll) ease both; animation-play-state:var(--scroll-play); }
#invitation-page #invitation.scroll-open .autumn-scroll-clasp { animation:scroll-maple-release 2.3s cubic-bezier(.3,.12,.25,1) both; animation-play-state:var(--scroll-play); }
#invitation-page #invitation.scroll-settled .autumn-scroll-paper { animation:none; clip-path:none; }
#invitation-page #invitation.scroll-settled .autumn-scroll-roller--lower { animation:none; top:100%; }
#invitation-page #invitation.scroll-settled .autumn-scroll-clasp,#invitation-page #invitation.scroll-settled .autumn-scroll-rolling-light { animation:none; opacity:0; }
@keyframes scroll-vellum-unfold { 0%,15% { clip-path:inset(0 0 96.75%); } 92%,100% { clip-path:inset(0 0 3.25%); } }
@keyframes scroll-roller-descend { 0%,15% { top:0; } 92%,100% { top:100%; } }
@keyframes scroll-maple-release { 0%,12% { opacity:1; transform:translate3d(0,0,0) rotate(0); } 36% { opacity:1; transform:translate3d(18px,18px,0) rotate(21deg); } 78% { opacity:.7; } 100% { opacity:0; transform:translate3d(85px,190px,0) rotate(74deg); } }
@keyframes scroll-roller-light { 0%,15%,100% { opacity:0; } 25%,75% { opacity:.42; } }
@keyframes scroll-overhead-light { from { opacity:.68; } to { opacity:.92; } }
@keyframes scroll-paper-light { from { opacity:.72; } to { opacity:1; } }
@keyframes scroll-foil-glint { 0%,18% { background-position:100% 0; } 62%,100% { background-position:0% 0; } }
@keyframes scroll-wing-left { 0%,100% { transform:rotateY(-8deg); } 48% { transform:rotateY(67deg); } }
@keyframes scroll-wing-right { 0%,100% { transform:rotateY(8deg); } 48% { transform:rotateY(-67deg); } }
@keyframes scroll-butterfly-left { 0%,100% { transform:translate3d(0,0,0) rotate(-19deg); } 28% { transform:translate3d(6px,-6px,0) rotate(9deg); } 57% { transform:translate3d(-4px,-9px,0) rotate(-12deg); } 79% { transform:translate3d(5px,4px,0) rotate(-30deg); } }
@keyframes scroll-butterfly-right { 0%,100% { transform:translate3d(0,0,0) rotate(23deg); } 31% { transform:translate3d(-6px,5px,0) rotate(4deg); } 63% { transform:translate3d(4px,8px,0) rotate(32deg); } 84% { transform:translate3d(-4px,-4px,0) rotate(14deg); } }
@keyframes scroll-leaf-drift { 0% { opacity:0; transform:translate3d(0,-30px,0) rotate(-25deg); } 14%,73% { opacity:.56; } 48% { transform:translate3d(14px,120px,0) rotate(39deg); } 100% { opacity:0; transform:translate3d(-5px,310px,0) rotate(115deg); } }
@media(min-width:380px) and (max-width:599px) {
  #invitation-page #invitation .autumn-scroll-families { grid-template-columns:minmax(0,1fr) 18px minmax(0,1fr); gap:.3rem; margin-block:1.75rem; }
  #invitation-page #invitation .autumn-scroll-person h3 { font-size:2.8rem; }
  #invitation-page #invitation .autumn-scroll-and { padding-top:.3rem; }
  #invitation-page #invitation .autumn-scroll-copy { padding-block:4.5rem; }
}
@media(min-width:600px) {
  #invitation-page #invitation.autumn-scroll-section { padding:6.5rem 5vw 8rem; }
  #invitation-page #invitation .autumn-scroll-copy { padding:5.7rem 11% 5.6rem; min-height:680px; }
  #invitation-page #invitation .autumn-scroll-families { grid-template-columns:minmax(0,1fr) 25px minmax(0,1fr); gap:.7rem; margin-block:2rem; }
  #invitation-page #invitation .autumn-scroll-person h3 { font-size:3.9rem; }
  #invitation-page #invitation .autumn-scroll-and { padding-top:.5rem; }
  #invitation-page #invitation .autumn-scroll-blessing { font-size:1.25rem; }
  #invitation-page #invitation .autumn-scroll-invite { font-size:1.12rem; }
  #invitation-page #invitation .autumn-scroll-parents { font-size:1.08rem; }
  #invitation-page #invitation .autumn-scroll-signoff { font-size:1.04rem; margin-top:2rem; }
  #invitation-page #invitation .autumn-scroll-garden { width:min(100%,1200px); margin:auto; mask-image:linear-gradient(90deg,transparent,#000 15%,#000 85%,transparent); }
  #invitation-page #invitation .autumn-scroll-drift { left:calc(50% - 310px); }
  #invitation-page #invitation .autumn-scroll-drift--two { left:auto; right:calc(50% - 300px); }
  #invitation-page #invitation .autumn-scroll-drift--three { left:calc(50% - 335px); }
}
@media(max-width:359px) {
  #invitation-page #invitation.autumn-scroll-section { padding-inline:18px; }
  #invitation-page #invitation .autumn-scroll-copy { padding:4.3rem 12.5% 4.5rem; }
  #invitation-page #invitation .autumn-scroll-heading h2 { font-size:2.15rem; }
}
@media(prefers-reduced-motion:reduce) {
  #invitation-page #invitation.autumn-scroll-section *,#invitation-page #invitation.autumn-scroll-section *::before,#invitation-page #invitation.autumn-scroll-section *::after { animation:none!important; }
  #invitation-page #invitation.autumn-scroll-section .autumn-scroll-paper { clip-path:none!important; }
  #invitation-page #invitation.autumn-scroll-section .autumn-scroll-roller--lower { top:100%!important; }
  #invitation-page #invitation.autumn-scroll-section .autumn-scroll-clasp,#invitation-page #invitation.autumn-scroll-section .autumn-scroll-drift { opacity:0!important; }
  #invitation-page #invitation .autumn-scroll-person h3 { background-position:100% 0; }
  #invitation-page #invitation .autumn-scroll-sparks { display:none; }
}
.card-preview #invitation-page #invitation .autumn-scroll-sparks { display:none; }
.card-preview #invitation-page #invitation .autumn-scroll-paper { clip-path:none!important; }
.card-preview #invitation-page #invitation .autumn-scroll-roller--lower { top:100%!important; }