/* Both filled symbols retain their full artwork at any selected width. */
.invitation-details .wi-section-icon.wi-gold-section-art {
  display:block;
  width:min(var(--section-art-size,132px),100%);
  height:auto;
  aspect-ratio:1;
  object-fit:contain;
  margin:0 auto 20px;
}
#gold-section-symbol-settings .section-art-control {margin:16px 0;}
#gold-section-symbol-settings label {display:block;margin-bottom:8px;font:13px/1.4 system-ui,sans-serif;}
#gold-section-symbol-settings .section-art-inputs {display:flex;gap:12px;align-items:center;}
#gold-section-symbol-settings input[type=range] {flex:1;min-width:0;}
#gold-section-symbol-settings input[type=number] {width:76px;}
#gold-section-symbol-settings button {padding:8px 12px;border:1px solid #cdd8e2;border-radius:5px;background:white;font:12px system-ui,sans-serif;cursor:pointer;}

/* Quiet entrances repeat after the icon has fully left the visible area. */
.invitation-details .wi-gold-section-art.has-scroll-entrance {opacity:0;}
.invitation-details .wi-gold-section-art.has-scroll-entrance.is-in-view {
  opacity:1;
  animation:section-art-rise 1s ease-in-out both;
}
.invitation-details .wi-gold-section-art[data-section-icon="envelope"].has-scroll-entrance.is-in-view {
  animation-name:section-art-envelope;
  animation-duration:1s;
  transform-origin:50% 65%;
}
@keyframes section-art-rise {
  from {opacity:0;transform:translateY(10px);}
  to {opacity:1;transform:translateY(0);}
}
@keyframes section-art-envelope {
  0% {opacity:0;transform:translateY(10px) rotate(-4deg);}
  90% {transform:translateY(0) rotate(.5deg);}
  100% {opacity:1;transform:translateY(0) rotate(0);}
}
@media(prefers-reduced-motion:reduce) {
  .invitation-details .wi-gold-section-art.has-scroll-entrance,
  .invitation-details .wi-gold-section-art.has-scroll-entrance.is-in-view {
    opacity:1;animation:none;transform:none;
  }
}