/* Wedding invite kit: shared base styles. Templates set their own fonts/colours via custom properties. */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{overflow-x:hidden;-webkit-font-smoothing:antialiased}
img,video,svg{display:block;max-width:100%}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}

/* a full-screen board, the unit every template stacks */
.board{position:relative;min-height:100svh;overflow:hidden;isolation:isolate}
.layer{position:absolute;inset:-8% 0;pointer-events:none;will-change:transform}
.layer>img{width:100%;height:100%;object-fit:cover}

/* soft cut-outs: images that fade out at their edges instead of hard crops */
.soft-oval{-webkit-mask:radial-gradient(ellipse 50% 50% at 50% 50%,#000 62%,transparent 100%);mask:radial-gradient(ellipse 50% 50% at 50% 50%,#000 62%,transparent 100%)}
.soft-bottom{-webkit-mask:linear-gradient(#000 70%,transparent);mask:linear-gradient(#000 70%,transparent)}
.soft-top{-webkit-mask:linear-gradient(transparent,#000 30%);mask:linear-gradient(transparent,#000 30%)}
.soft-both{-webkit-mask:linear-gradient(transparent,#000 18%,#000 80%,transparent);mask:linear-gradient(transparent,#000 18%,#000 80%,transparent)}

/* handwriting ink */
svg.ink text{fill:currentColor;stroke:currentColor;stroke-width:.6;stroke-linecap:round;stroke-linejoin:round}

/* letter-by-letter reveal base */
.ch{display:inline-block;will-change:transform,opacity}

/* mute button */
.mute{position:fixed;top:calc(12px + env(safe-area-inset-top));right:12px;z-index:60;width:44px;height:44px;display:grid;place-items:center;border-radius:50%}
.mute svg{width:20px;height:20px}
.mute.off .on,.mute:not(.off) .offi{display:none}

@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}