/* Self-contained foil monogram. Parent controls size, placement and intro timing. */
.d-monogram{--d-tilt-x:0deg;--d-tilt-y:0deg;display:block;aspect-ratio:1;pointer-events:none;perspective:1100px;isolation:isolate}
.d-monogram__svg{display:block;width:100%;height:100%;overflow:visible;transform:rotateX(var(--d-tilt-x)) rotateY(var(--d-tilt-y));transform-origin:50% 50%;backface-visibility:hidden}
.d-monogram__object{transform-box:view-box;transform-origin:50% 50%;transform:rotate(-7deg) scale(.95);animation:d-monogram-float 9s ease-in-out infinite alternate;animation-play-state:paused}
.d-monogram__bloom{opacity:.35;animation:d-monogram-light 8s ease-in-out infinite alternate;animation-play-state:paused}
.d-monogram__sheen{transform-box:view-box;transform-origin:center;animation:d-monogram-foil 13s ease-in-out infinite alternate;animation-play-state:paused}
.d-monogram--active .d-monogram__object,.d-monogram--active .d-monogram__bloom,.d-monogram--active .d-monogram__sheen{animation-play-state:running}
.motion-paused .d-monogram__object,.motion-paused .d-monogram__bloom,.motion-paused .d-monogram__sheen{animation-play-state:paused!important}
@keyframes d-monogram-float{0%{transform:translateY(3px) rotate(-7deg) scale(.95)}100%{transform:translateY(-5px) rotate(-4deg) scale(.95)}}
@keyframes d-monogram-light{0%{opacity:.22}100%{opacity:.43}}
@keyframes d-monogram-foil{0%{transform:translateX(-100px) rotate(-18deg)}100%{transform:translateX(110px) rotate(-10deg)}}
@media(prefers-reduced-motion:reduce){.d-monogram__object,.d-monogram__bloom,.d-monogram__sheen{animation:none!important}.d-monogram__object{transform:rotate(-6deg) scale(.95)}.d-monogram__svg{transform:none}}