/* NudressGenerationFx: overlay chrome (handle, hanger tag) and the CSS fallback renderer. Geometry before load is set through the CSSOM. */
.gfx{position:absolute;inset:0;overflow:hidden;border-radius:inherit;pointer-events:none;contain:layout paint;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none}
.gfx.is-revealing{pointer-events:auto;cursor:pointer}
.gfx-canvas{position:absolute;top:0;left:0;width:100%;height:100%;display:block}
.gfx-handle{position:absolute;left:50%;top:50%;z-index:3;display:grid;place-items:center;width:62px;height:62px;margin:-31px 0 0 -31px;border:1px solid #fff9eecc;border-radius:50%;background:#fff9eedb;color:#902b46;box-shadow:0 14px 40px #2a0c1652;opacity:0;transform:scale(.86);transition:opacity .3s ease-out,transform .3s cubic-bezier(.16,1,.3,1)}
.gfx-handle svg{display:block;width:30px;height:30px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.gfx.is-narrow .gfx-handle{width:48px;height:48px;margin:-24px 0 0 -24px}.gfx.is-narrow .gfx-handle svg{width:24px;height:24px}
.gfx.is-handle .gfx-handle{opacity:1;transform:none;animation:gfx-breathe .8s ease-in-out infinite alternate}
.gfx.is-revealing.is-handle .gfx-handle{transition:opacity .15s ease-out,transform .15s ease-out}
.gfx.is-handle-pop .gfx-handle{transform:scale(1.08);transition:opacity .15s ease-out,transform .12s ease-out}
.gfx.is-handle-out .gfx-handle{opacity:0;transform:scale(1.15);transition:opacity .2s ease-out,transform .2s ease-out}
@keyframes gfx-breathe{to{scale:1.04}}
.gfx-tag{position:absolute;left:50%;top:calc(2.2% - 3.8px);z-index:2;display:none;width:40px;height:40px;margin-left:-21.4px;overflow:visible;color:#f4e2d1;opacity:0;translate:0 -28px;transform-origin:53.5% 9.5%;filter:drop-shadow(0 5px 6px #1b08107a)}
.gfx.is-narrow .gfx-tag{top:calc(2.2% - 3px);width:32px;height:32px;margin-left:-17.1px}
.gfx.has-tag .gfx-tag{display:block}
.gfx.is-tag .gfx-tag{opacity:1;translate:none;transition:translate .52s cubic-bezier(.34,1.4,.64,1),opacity .16s ease-out}
.gfx.is-swing .gfx-tag{animation:gfx-swing 2.6s linear infinite}
.gfx[data-phase=rest] .gfx-tag{animation-play-state:paused}
.gfx.is-tag-off .gfx-tag{opacity:0;transform:translateY(-10px) scale(.92);transition:opacity .28s ease-in,transform .28s ease-in}
@keyframes gfx-swing{0%{rotate:0deg;animation-timing-function:cubic-bezier(.61,1,.88,1)}25%{rotate:4.5deg;animation-timing-function:cubic-bezier(.37,0,.63,1)}75%{rotate:-4.5deg;animation-timing-function:cubic-bezier(.12,0,.39,0)}100%{rotate:0deg}}
.gfx-css{position:absolute;inset:0;overflow:hidden}
.gfx-css::before{content:"";position:absolute;inset:0;z-index:2;background:#12040a;opacity:0;transition:opacity 1.2s ease-in-out}
.gfx-css::after{content:"";position:absolute;inset:0;z-index:2;background:radial-gradient(26% 62% at 50% 45%,#fff8f0,#fff8f000);opacity:0}
.gfx-drape{position:absolute;top:0;bottom:0;width:50.4%;overflow:hidden;background:linear-gradient(#1b081026,transparent 12% 80%,#1b081040),repeating-linear-gradient(90deg,#5d1b31 0 14px,#902b46 22px,#b8566f 26px,#902b46 30px,#5d1b31 44px)}
.gfx-drape.is-left{left:0}
.gfx-drape.is-right{right:0;background:linear-gradient(#1b081026,transparent 12% 80%,#1b081040),repeating-linear-gradient(270deg,#5d1b31 0 14px,#902b46 22px,#b8566f 26px,#902b46 30px,#5d1b31 44px)}
.gfx-drape::after{content:"";position:absolute;top:0;bottom:0;left:-60%;width:220%;background:linear-gradient(105deg,transparent 40%,#fff8f033 50%,transparent 60%);transform:translateX(-30%);animation:gfx-sheen 6.5s ease-in-out infinite}
@keyframes gfx-sheen{to{transform:translateX(30%)}}
.gfx-css-seam{position:absolute;top:6%;bottom:6%;left:50%;z-index:1;width:2px;margin-left:-1px;border-radius:2px;background:#fff8f0;box-shadow:0 0 24px #ffd9c2;opacity:.5;animation:gfx-seam 2.4s ease-in-out infinite alternate}
@keyframes gfx-seam{from{opacity:.32}to{opacity:.62}}
.gfx.is-closing .gfx-css-seam{animation:gfx-seam-in .8s 1.5s both}
@keyframes gfx-seam-in{from{opacity:0}to{opacity:.32}}
.gfx[data-phase=finishing] .gfx-css-seam{animation-duration:.8s}
.gfx[data-phase=rest] .gfx-css-seam,.gfx[data-phase=rest] .gfx-drape::after,.gfx.is-fail .gfx-css-seam,.gfx.is-fail .gfx-drape::after{animation-play-state:paused}
.gfx.is-fail .gfx-css::before{opacity:.5}
.gfx.is-closing .gfx-drape.is-left{animation:gfx-close-l 1.2s cubic-bezier(.65,0,.35,1) .15s both}
.gfx.is-closing .gfx-drape.is-right{animation:gfx-close-r 1.2s cubic-bezier(.65,0,.35,1) .15s both}
@keyframes gfx-close-l{from{transform:translateX(-101%)}}
@keyframes gfx-close-r{from{transform:translateX(101%)}}
.gfx.is-revealing .gfx-drape{transition:transform 1s cubic-bezier(.76,0,.24,1)}
.gfx.is-revealing .gfx-drape.is-left{transform:translateX(-102%)}
.gfx.is-revealing .gfx-drape.is-right{transform:translateX(102%)}
.gfx.is-revealing .gfx-css-seam{opacity:0;animation:none;transition:opacity .3s ease-out}
.gfx.is-revealing .gfx-css::after{animation:gfx-flash .38s ease-out}
@keyframes gfx-flash{35%{opacity:.45}}
.gfx-settle{animation:gfx-settle 1.4s cubic-bezier(.16,1,.3,1) backwards}
@keyframes gfx-settle{from{transform:scale(1.04)}}
.gfx.is-still *,.gfx.is-still *::before,.gfx.is-still *::after{animation:none!important;transition:none!important}
@media(prefers-reduced-motion:reduce){.gfx *,.gfx *::before,.gfx *::after,.gfx-settle{animation:none!important;transition:none!important}}
@media(forced-colors:active){.gfx-css{forced-color-adjust:none}.gfx-handle{border-color:CanvasText;background:Canvas;color:CanvasText;box-shadow:none}.gfx-tag{color:CanvasText;filter:none}}