/* Immersive layer: watercolor edges, bloom reveals, paint studio, ribbon and butterflies. */

/* Painted borders between paper and night scenes. */
.wash-edge{position:absolute;left:0;width:100%;height:clamp(26px,4.2vw,62px);pointer-events:none;z-index:2;display:block}
.wash-top{top:-1px}
.wash-bottom{bottom:-1px;transform:scaleY(-1)}
.process .wash-top{transform:scaleX(-1)}
.transformation{position:relative}

/* Bloom reveal: the image grows from a single wet stain. */
.bloom-ready{
  -webkit-mask:url('assets/bloom-mask.png') var(--bloom-x,50%) var(--bloom-y,50%)/0% auto no-repeat;
  mask:url('assets/bloom-mask.png') var(--bloom-x,50%) var(--bloom-y,50%)/0% auto no-repeat;
  transition:-webkit-mask-size 2.1s cubic-bezier(.25,.6,.2,1) var(--bloom-delay,0s),mask-size 2.1s cubic-bezier(.25,.6,.2,1) var(--bloom-delay,0s);
}
.bloom-ready.bloom-in{-webkit-mask-size:480% auto;mask-size:480% auto}
.bloom-ready.bloom-done{-webkit-mask:none;mask:none}
.work .art-open img.bloom-ready:not(.bloom-done){filter:saturate(1.25) contrast(.96)}
.work .art-open img.bloom-ready{transition:-webkit-mask-size 2.1s cubic-bezier(.25,.6,.2,1),mask-size 2.1s cubic-bezier(.25,.6,.2,1),filter 2.6s ease,transform .8s var(--ease)}
.work .art-open img.bloom-in{filter:none}

/* Hero: keep the scroll cue clear of the sound control. */
@media(min-width:701px){.hero-bottom{left:calc(var(--space) + 150px)}}

/* Paint studio. */
/* Closing butterflies. */






}
}


/* Mobile: quieter floating controls. */
@media(max-width:700px){
  .sound-dock{left:auto;right:18px;bottom:134px}
  .sound-dock:not([data-playing="true"]) #sound-label{display:none}
  .sound-dock:not([data-playing="true"]) button{padding:10px 13px}
  .sound-dock,#motion-toggle{opacity:.82;transition:opacity .3s}
  .sound-dock:focus-within,.sound-dock:hover,#motion-toggle:hover{opacity:1}
}

/* Still mode: everything visible, nothing flying. */
html[data-motion="off"] .bloom-ready{-webkit-mask:none;mask:none}
html[data-motion="off"] 
html[data-motion="off"] 
@media(prefers-reduced-motion:reduce){
  .bloom-ready{-webkit-mask:none;mask:none}
  
  
}

/* Exhibition walk (large screens): the wall slides past while the page scrolls. */
.gallery-walk:not(.walk-on) .walk-stage{display:contents}
.gallery-walk:not(.walk-on) .walk-backdrop,.gallery-walk:not(.walk-on) .walk-hud{display:none}
.gallery-walk.walk-on{position:relative;margin:0 calc(var(--space) * -1)}
.walk-on .walk-stage{position:sticky;top:0;height:100vh;height:100svh;overflow:clip;display:flex;align-items:center;perspective:1700px}
.walk-on .gallery-grid,.walk-on .gallery-grid.filtered{display:flex;align-items:center;gap:clamp(70px,8vw,150px);flex:none;width:max-content;margin:0 auto;padding:96px max(var(--space),calc(50vw - min(56vh,600px) * .375 - 12px)) 0;position:relative;will-change:transform;transform-style:preserve-3d}
.walk-on .work,.walk-on .gallery-grid.filtered .work{--work-y:0px!important;--work-r:0deg!important;--work-alpha:1!important;--caption-y:0px!important;flex:none;width:auto;margin:0!important;transform:translateY(var(--walk-lift,0px)) rotateY(calc(var(--walk-off,0) * -14deg)) scale(var(--walk-s,1))!important;opacity:var(--walk-o,1)!important;transform-origin:50% 55%;transition:none}
.walk-on .work:nth-child(odd){--walk-lift:-3.5vh}
.walk-on .work:nth-child(even){--walk-lift:4vh}
.walk-on .gallery .art-open img,.walk-on .art-open img{height:min(56vh,600px);width:auto;max-height:none;aspect-ratio:3/4;object-fit:cover}
.walk-on .work figcaption{width:0;min-width:100%}
.walk-backdrop{position:absolute;left:var(--space);top:54%;translate:0 -50%;white-space:nowrap;font:italic 400 clamp(170px,22vw,400px)/1 var(--serif);letter-spacing:-.045em;color:transparent;-webkit-text-stroke:1px #173e381c;pointer-events:none;user-select:none;will-change:transform}
.walk-backdrop em{color:#ad626214;-webkit-text-stroke:0}
.walk-hud{position:absolute;left:var(--space);right:var(--space);top:104px;display:flex;align-items:center;gap:26px;font-size:10px;letter-spacing:1.8px;z-index:3;color:var(--muted)}
.walk-hint{transition:opacity .6s}
.walk-started .walk-hint{opacity:.4}
.walk-hint i{font-style:normal;display:inline-block;margin-left:8px;animation:walk-nudge 1.6s ease-in-out infinite}
.walk-line{flex:1;height:1px;background:var(--line);max-width:520px;margin-left:auto}
.walk-line i{display:block;height:2px;margin-top:-.5px;background:var(--rose);transform:scaleX(0);transform-origin:left}
.walk-count{font-variant-numeric:tabular-nums;color:var(--ink)}
@keyframes walk-nudge{50%{transform:translateX(7px)}}

/* Wax seal pressed into the paper. */
.statement-foot .stamp-mark{position:relative;cursor:pointer}
.stamp-mark.await-press:not(.pressed) img{opacity:0}
.stamp-mark.pressed img{animation:seal-press .95s cubic-bezier(.3,.1,.2,1) both}
.seal-ring{position:absolute;inset:10%;border-radius:50%;border:1px solid #ad626270;opacity:0;pointer-events:none}
.stamp-mark.pressed .seal-ring{animation:seal-ring 1.5s .45s ease-out}
@keyframes seal-press{0%{transform:translateY(-46px) scale(1.55) rotate(-16deg);opacity:0;filter:drop-shadow(0 34px 26px #43180e33)}55%{transform:scale(.93) rotate(2deg);opacity:1;filter:drop-shadow(0 2px 3px #43180e45)}75%{transform:scale(1.03) rotate(0)}100%{transform:none;filter:drop-shadow(0 7px 8px #43180e20)}}
@keyframes seal-ring{0%{opacity:.85;transform:scale(.9)}100%{opacity:0;transform:scale(1.9)}}

/* Artwork dialog: larger painting and a loupe for the brushwork. */
@media(min-width:701px){
  .art-dialog{width:min(1260px,94vw)}
  .art-dialog-layout{grid-template-columns:1.3fr .7fr;position:relative}
  .art-dialog-layout>img{height:78svh;cursor:zoom-in}
}
.art-loupe{position:absolute;left:0;top:0;width:210px;height:210px;margin:-105px 0 0 -105px;border-radius:50%;pointer-events:none;background-repeat:no-repeat;background-color:var(--paper);box-shadow:0 0 0 3px #fffaf0,0 0 0 4px #173e3826,0 22px 50px #153c3840;opacity:0;transform:scale(.6);transition:opacity .25s,transform .35s var(--ease);z-index:3}
.art-loupe.on{opacity:1;transform:none}
.loupe-hint{margin-top:16px;font:italic 17px/1.35 var(--serif)!important;color:var(--muted);max-width:280px}
@media(hover:none),(max-width:700px){.art-loupe,.loupe-hint{display:none}}

/* Order form: themes as tags. */
.theme-picker{border:0;padding:0;margin:0 0 19px;min-width:0}
.theme-picker legend{font-size:12px;padding:0;margin-bottom:9px}
.theme-picker>div{display:flex;flex-wrap:wrap;gap:8px}
.order-dialog .theme-picker label{display:block;margin:0;font-size:13px;position:relative}
.order-dialog .theme-picker input{position:absolute;inset:0;opacity:0;width:100%;height:100%;margin:0;padding:0;border:0;cursor:pointer}
.theme-picker span{display:inline-block;padding:9px 15px;border:1px solid var(--line);border-radius:30px;background:#fffcf266;transition:background .3s,color .3s,border-color .3s,transform .3s}
.theme-picker label:hover span{border-color:var(--rose);transform:translateY(-2px)}
.theme-picker input:checked+span{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.theme-picker input:focus-visible+span{outline:2px solid var(--rose);outline-offset:3px}

/* Footer brand mark, revealed like a brushstroke. */
.footer-signature{display:block;width:min(100%,600px);height:auto;margin:0 auto 34px;overflow:visible}
.footer-signature .logo-wipe{width:0}
.footer-signature.signed .logo-wipe{animation:logo-draw 2.8s cubic-bezier(.55,.1,.3,1) forwards}
.footer-signature .logo-butterfly-lines path,.footer-signature .logo-butterfly-lines circle{fill:none;stroke:#ad6262;stroke-width:1.45;stroke-linecap:round;stroke-linejoin:round;opacity:.82}
@keyframes logo-draw{to{width:541px}}
.has-signature .footer-top>.brand{display:none}
@media(max-width:700px){.footer-signature{margin-bottom:22px}}

/* Still mode for the new pieces. */
html[data-motion="off"] .footer-signature .logo-wipe{width:541px;animation:none}
html[data-motion="off"] .stamp-mark img{animation:none;opacity:1}
html[data-motion="off"] .walk-hint i{animation:none}
@media(prefers-reduced-motion:reduce){
  .footer-signature .logo-wipe{width:541px!important;animation:none!important}
  .stamp-mark img{animation:none!important;opacity:1!important}
}