/* Selective text entrances keep the reading surface quiet once revealed. */
.js-motion .reveal.reveal-soft { clip-path: none; filter: blur(8px); transform: translateY(19px); transition: filter 1.35s ease, opacity 1.1s ease, transform 1.35s cubic-bezier(.16,.7,.2,1); }
.js-motion .reveal.reveal-soft.visible { filter: blur(0); transform: none; }
.js-motion .reveal.reveal-words { clip-path: none; transform: none; opacity: 1; }
.reveal-words .word { display: inline-block; }
.js-motion .reveal-words .word { opacity: 0; filter: blur(7px); transform: translateY(14px); transition: opacity .8s ease, filter 1s ease, transform 1s cubic-bezier(.16,.7,.2,1); transition-delay: calc(var(--word) * 65ms); }
.js-motion .reveal-words.visible .word { opacity: 1; filter: none; transform: none; }
.petal-atmosphere { position: fixed; top: 0; bottom: 0; left: 50%; transform: translateX(-50%); width: min(100%,580px); overflow: hidden; pointer-events: none; z-index: 18; contain: strict; }
.falling-petal { position: absolute; top: 0; left: 0; height: auto; will-change: transform; pointer-events: none; }
.falling-petal img { display: block; width: 100%; animation: petal-flutter var(--flutter,4s) ease-in-out infinite alternate; filter: drop-shadow(1px 3px 2px #0001); }
@keyframes petal-flutter { 0% {transform: perspective(160px) rotateY(-45deg) rotateX(10deg) rotate(var(--tilt));} 50% {transform: perspective(160px) rotateY(20deg) rotateX(-20deg) rotate(0);} 100% {transform: perspective(160px) rotateY(65deg) rotateX(25deg) rotate(var(--tilt));} }
.milestone .milestone-floral { width: 48px; top: 5px; right: 24px; opacity: .9; }
.milestone-petal-companion { position: absolute; left: 28px; top: 150px; width: 29px; transform: rotate(35deg); opacity: .65; animation: drift 12s ease-in-out infinite; }
.closing-floral { width: 68%; max-width: 300px; margin-bottom: 30px; }
/* Foil is a real generated material; the canvas erases it with a rough brush. */
.scratch-wrap { margin: 28px -2px 20px; }
.scratch-stage { position: relative; display: grid; isolation: isolate; aspect-ratio: 2.25; min-height: 145px; border: 1px solid #af9059; box-shadow: 0 5px 15px #5d37171a; background: var(--paper); }
.scratch-stage .date-row { margin: 0; border: none; align-content: center; text-align: center; }
.scratch-stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; cursor: crosshair; transition: opacity 1s ease, filter 1s ease; z-index: 2; }
.scratch-stage[data-revealed=true] canvas { opacity: 0; filter: blur(3px); pointer-events: none; }
.scratch-stage.is-scratching { box-shadow: 0 3px 9px #5d371727; }
.scratch-instruction { font: 10px/1.6 var(--sans); color: var(--paper-ink); opacity: .78; margin: 14px auto 6px; max-width: 250px; }
.scratch-skip { display: inline-block; background: none; border-bottom: 1px solid #9d7a4866; padding: 8px 3px; font: 10px/1.5 var(--sans); color: var(--paper-ink); }
.scratch-skip:disabled { cursor: default; opacity: .65; border-color: transparent; }
.scratch-status { font: italic 13px/1.6 var(--serif); min-height: 21px; margin: 8px auto 0; max-width: 270px; }
.foil-dust,.celebration-confetti { position: fixed; z-index: 55; pointer-events: none; border-radius: 1px; }
.motion-paused .reveal.reveal-soft,.motion-paused .reveal-words .word { opacity: 1; filter: none; transform: none; transition: none; }
@media(prefers-reduced-motion:reduce) { .js-motion .reveal.reveal-soft,.js-motion .reveal-words .word { opacity: 1; filter: none; transform: none; transition: none; } .petal-atmosphere,.foil-dust,.celebration-confetti { display:none; } }
@media print { .petal-atmosphere,.scratch-stage canvas,.scratch-instruction,.scratch-skip,.scratch-status,.foil-dust,.celebration-confetti {display:none!important;} .js-motion .reveal.reveal-soft,.js-motion .reveal-words .word {opacity:1;filter:none;transform:none;} }

/* The rotated print and the paperclip extend beyond the collage's layout box. */
.js-motion .dress-collage.reveal {
  clip-path: none;
  transform: translateY(22px);
  transition: opacity .85s ease, transform 1s cubic-bezier(.16,.7,.2,1);
}
.js-motion .dress-collage.reveal.visible,
.motion-paused .dress-collage.reveal {
  transform: none;
}

@supports (background-clip: text) {
  .hero-names > span {
    background-image:
      linear-gradient(110deg, transparent 38%, #fff3c5 49%, transparent 61%),
      linear-gradient(170deg, #ffebad 0%, #b6813f 34%, #f7d88e 51%, #a57137 77%, #e8c47a 100%);
    background-size: 260% 100%, 100% 100%;
    background-position: 100% 0, 0 0;
    background-clip: text;
    color: transparent;
    animation: rise 1.2s both calc(var(--i) * .13s), foil-sweep 6.4s ease-in-out infinite 1.1s;
  }

  [data-theme=blush] .hero-names > span {
    background-image:
      linear-gradient(110deg, transparent 38%, #ffe9b7 49%, transparent 61%),
      linear-gradient(170deg, #79451f, #a46932 35%, #75411c 67%, #93602c);
  }

  .milestone .large-number {
    --foil-highlight: #fff1c3;
    --foil-mid: #d9ae62;
    --foil-shadow: #a57138;
    --foil-glint: #fff8e6d9;
    line-height: 1.04;
    background-image:
      linear-gradient(112deg, transparent 43%, var(--foil-glint) 50%, transparent 57%),
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='128' height='128'%3E%3Cfilter id='grain'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.78' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Cpath fill='%23fff' opacity='.24' filter='url(%23grain)' d='M0 0h128v128H0z'/%3E%3C/svg%3E"),
      linear-gradient(158deg, var(--foil-highlight), var(--foil-mid) 29%,
        var(--foil-shadow) 51%, var(--foil-highlight) 64%, var(--foil-mid) 84%, var(--foil-shadow));
    background-size: 250% 100%, 96px 96px, 100% 100%;
    background-position: 100% 0, 0 0, 0 0;
    background-blend-mode: normal, soft-light, normal;
    background-clip: text;
    color: transparent;
  }

  [data-theme=midnight] .large-number {
    --foil-highlight: #f6f9ff;
    --foil-mid: #c5cfe0;
    --foil-shadow: #8292b1;
    --foil-glint: #fffffff2;
  }

  [data-theme=blush] .large-number {
    --foil-highlight: #d59c81;
    --foil-mid: #ab6f5b;
    --foil-shadow: #78403c;
  }

  .milestone .reveal.visible .large-number {
    animation: milestone-sheen 6.2s ease-in-out infinite .4s;
  }

}

@keyframes milestone-sheen {
  0%, 17% { background-position: 100% 0, 0 0, 0 0; }
  59%, 100% { background-position: 0 0, 0 0, 0 0; }
}

@keyframes foil-sweep {
  0%, 16% { background-position-x: 100%; }
  55%, 100% { background-position-x: 0%; }
}

/* Individual scale and translate leave the existing float animation intact. */
.js-motion .reveal.reveal-ornament {
  opacity: 0;
  clip-path: none;
  transform: none;
  translate: 0 16px;
  scale: .92;
  transition: opacity .95s ease, translate 1.15s cubic-bezier(.16,.7,.2,1),
    scale 1.15s cubic-bezier(.16,.7,.2,1);
}
.js-motion .reveal.reveal-ornament.visible,
.motion-paused .reveal.reveal-ornament {
  opacity: 1;
  translate: none;
  scale: none;
}
@media (prefers-reduced-motion: reduce), print {
  .js-motion .reveal.reveal-ornament {
    opacity: 1;
    translate: none;
    scale: none;
    transition: none;
  }
}
@media (forced-colors: active), print {
  .hero-names > span, .milestone .large-number {
    color: currentColor;
    background: none;
  }
}

/* Keep the complete message in layout while each letter appears in place. */
.js-motion .reveal.typewriter {
  opacity: 1;
  transform: none;
  clip-path: none;
  transition: none;
}
.js-motion .typewriter .typed-letter:not(.is-typed) { opacity: 0; }
.motion-paused .typewriter .typed-letter { opacity: 1 !important; }
@media (prefers-reduced-motion: reduce), print {
  .typewriter .typed-letter { opacity: 1 !important; }
}