/* Motion kit (Part B): motion for the EXISTING designs listed in sa_motion_kit_ids() (inc/scene_layer.php).
   Motion only: every element ends exactly where the page puts it today, so the final state, the reduced-motion render
   and the advanced editor (html.sc-static, no .sc-js) are byte-identical to the page without the kit.
   How the entrances keep that promise: their keyframes give only the START (the end is the element's own value), and
   they fill BACKWARDS, so a finished entrance lets go and the page's own styles take over again (a held end frame
   kept buttons on a compositor layer, 1 px off their place). Only the write-on holds its end: its mask stays on.
   Families: .sc-kit-webgency (Premium: 700 ms, no overshoot), .sc-kit-studio, .sc-kit-classic (Calm). */

body.sc-kit{--kit-ease:cubic-bezier(.23,1,.32,1);--kit-d:720ms;--kit-rise:16px}
body.sc-kit-classic{--kit-d:900ms;--kit-rise:12px}
/* Event Studio's own reveal would double the entrances: the kit takes over. */
body.sc-kit .es-reveal{opacity:1!important;transform:none!important;transition:none!important}

@keyframes sc-kit-rise{from{opacity:0;transform:translateY(var(--kit-rise,16px))}}
@keyframes sc-kit-fade{from{opacity:0}}
@keyframes sc-kit-pop{from{opacity:0;transform:scale(.4)}}
@keyframes sc-kit-settle{from{opacity:0;transform:translateY(22px) rotate(var(--turn,-3deg)) scale(.96)}}
@keyframes sc-kit-unveil{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes sc-kit-tick{from{opacity:.15;transform:translateY(-38%)}}
@keyframes sc-kit-write{from{-webkit-mask-position:100% 0;mask-position:100% 0}to{-webkit-mask-position:0 0;mask-position:0 0}}
/* right to left: the opaque half of the mask sits on the right, so the sweep runs the other way (ends fully shown) */
@keyframes sc-kit-write-rtl{from{-webkit-mask-position:0 0;mask-position:0 0}to{-webkit-mask-position:100% 0;mask-position:100% 0}}

/* ---- start states (only with motion on; each block waits for ITS OWN .sc-in, headings for their section's) ---- */
.sc-js body.sc-kit main section[id]:not(.sc-in) :is(h2, h2 + p){opacity:0}
.sc-js body.sc-kit :is(#countdown .grid, #details .sa-map-rows > *, #details .sa-map-actions, #details .sa-venue-photo, #program .sa-prog-row,
  #gallery .grid > *, #dress_code .sa-text-section__body, #gifts .sa-text-section__body, #rsvp form > *, #closing .sa-text-section__body,
  #closing .sa-closing-sign, .wg-closing-photo):not(.sc-in){opacity:0}
.sc-js body.sc-kit #countdown .grid:not(.sc-in) > *{opacity:0}
.sc-js body.sc-kit #details .sa-map-actions:not(.sc-in) > *{opacity:0}
.sc-js body.sc-kit main section[id]:not(.sc-in) .sa-prog-line-v{clip-path:inset(0 0 100% 0)}
.sc-js body.sc-kit :is(section.wg-welcome, section.es-welcome):not(.sc-in) :is(.wg-letter, .es-welcome-inner){opacity:0}

/* ---- entrances ---- */
.sc-js body.sc-kit main section[id].sc-in h2{animation:sc-kit-rise var(--kit-d) var(--kit-ease) backwards}
.sc-js body.sc-kit main section[id].sc-in h2 + p{animation:sc-kit-rise var(--kit-d) var(--kit-ease) 120ms backwards}
.sc-js body.sc-kit :is(section.wg-welcome, section.es-welcome).sc-in :is(.wg-letter, .es-welcome-inner){animation:sc-kit-rise 900ms var(--kit-ease) backwards}
/* countdown: the cells arrive one after another; afterwards the digits roll in on every tick */
.sc-js body.sc-kit #countdown .grid.sc-in{opacity:1}
.sc-js body.sc-kit #countdown .grid.sc-in > *{animation:sc-kit-rise var(--kit-d) var(--kit-ease) calc(120ms + var(--k,0) * 90ms) backwards}
.sc-js body.sc-kit #countdown :is(#cd_days, #cd_hours, #cd_minutes, #cd_seconds).sc-tick{animation:sc-kit-tick 360ms var(--kit-ease) backwards}
/* venue: the rows, the photo fades up, the buttons settle */
.sc-js body.sc-kit #details .sa-map-rows > .sc-in{animation:sc-kit-rise var(--kit-d) var(--kit-ease) calc(var(--k,0) * 90ms) backwards}
.sc-js body.sc-kit #details .sa-map-actions.sc-in{opacity:1}
.sc-js body.sc-kit #details .sa-map-actions.sc-in > *{animation:sc-kit-pop 520ms var(--kit-ease) calc(120ms + var(--k,0) * 90ms) backwards}
.sc-js body.sc-kit #details .sa-venue-photo.sc-in{animation:sc-kit-fade 900ms var(--kit-ease) 100ms backwards}
/* programme: the line draws down with the section and each row arrives as it scrolls in */
.sc-js body.sc-kit #program.sc-in .sa-prog-line-v{animation:sc-kit-unveil 1.8s cubic-bezier(.45,0,.2,1) 300ms backwards}
.sc-js body.sc-kit #program .sa-prog-row.sc-in{animation:sc-kit-rise var(--kit-d) var(--kit-ease) calc(var(--k,0) * 60ms) backwards}
/* gallery: each photo settles from a small turn */
.sc-js body.sc-kit #gallery .grid > .sc-in{animation:sc-kit-settle 900ms var(--kit-ease) calc(var(--k,0) * 110ms) backwards}
.sc-js body.sc-kit #gallery .grid > :nth-child(even){--turn:3deg}
/* text sections, the form, the closing */
.sc-js body.sc-kit :is(#dress_code, #gifts, #closing) .sa-text-section__body.sc-in{animation:sc-kit-rise var(--kit-d) var(--kit-ease) 120ms backwards}
.sc-js body.sc-kit #rsvp form > .sc-in{animation:sc-kit-rise var(--kit-d) var(--kit-ease) calc(var(--k,0) * 40ms) backwards}
.sc-js body.sc-kit .wg-closing-photo.sc-in{animation:sc-kit-fade 1.2s var(--kit-ease) 300ms backwards}
/* the sign-off writes itself on, in the reading direction of the names */
.sc-js body.sc-kit #closing .sa-closing-sign.sc-in{
  -webkit-mask-image:linear-gradient(90deg,#000 45%,transparent 55%);mask-image:linear-gradient(90deg,#000 45%,transparent 55%);
  -webkit-mask-size:240% 100%;mask-size:240% 100%;animation:sc-kit-write 1.6s cubic-bezier(.45,0,.3,1) 250ms both}
.sc-js[dir=rtl] body.sc-kit #closing .sa-closing-sign.sc-in{
  -webkit-mask-image:linear-gradient(270deg,#000 45%,transparent 55%);mask-image:linear-gradient(270deg,#000 45%,transparent 55%);animation-name:sc-kit-write-rtl}

/* per-child order (--k) without touching markup */
body.sc-kit :is(.grid, .sa-map-rows, .sa-map-actions, form) > :nth-child(2),body.sc-kit .sa-prog-row:nth-child(2){--k:1}
body.sc-kit :is(.grid, .sa-map-rows, .sa-map-actions, form) > :nth-child(3),body.sc-kit .sa-prog-row:nth-child(3){--k:2}
body.sc-kit :is(.grid, .sa-map-rows, .sa-map-actions, form) > :nth-child(4),body.sc-kit .sa-prog-row:nth-child(4){--k:3}
body.sc-kit :is(.grid, .sa-map-rows, .sa-map-actions, form) > :nth-child(5),body.sc-kit .sa-prog-row:nth-child(5){--k:4}
body.sc-kit :is(.grid, .sa-map-rows, .sa-map-actions, form) > :nth-child(6),body.sc-kit .sa-prog-row:nth-child(6){--k:5}
body.sc-kit :is(.grid, .sa-map-rows, .sa-map-actions, form) > :nth-child(7),body.sc-kit .sa-prog-row:nth-child(7){--k:6}
body.sc-kit :is(.grid, .sa-map-rows, .sa-map-actions, form) > :nth-child(n+8),body.sc-kit .sa-prog-row:nth-child(n+8){--k:7}

/* B2: a still hero drifts very slowly once the envelope has landed on it (films are untouched) */
@keyframes sc-kit-drift{from{transform:none}to{transform:scale(1.06) translateY(-1%)}}
.sc-js.sc-hero-live body.sc-kit [data-sa-section=hero] > .absolute > img:first-child{transform-origin:50% 45%;animation:sc-kit-drift 18s ease-in-out infinite alternate}
.sc-js.sc-hero-live body.sc-kit [data-sa-section=hero] > .absolute > .sc-hero{transform-origin:50% 45%;animation:sc-kit-drift 18s ease-in-out infinite alternate}