/* Motion references, re-choreographed for this enquiry flow rather than copied as Canvas loops.
   Motion Prompt #044 · MIT License (c) 2026 Shohei Ohtaki · https://showheyohtaki.github.io/motion-prompt/#044
   Motion Prompt #052 · MIT License (c) 2026 Shohei Ohtaki · https://showheyohtaki.github.io/motion-prompt/#052
   Motion Prompt #061 · MIT License (c) 2026 Shohei Ohtaki · https://showheyohtaki.github.io/motion-prompt/#061
   Checkbox stroke reference: transitions.dev / checkbox-check (Transitions.dev License).
   Own timing: objects 240ms, checkbox fill 150ms / stroke 180ms, FAQ 240ms. */

/* The piece is the anchor. Only the requested paper objects respond. */
.bf-brand-scene .bf-hero-product,
.bf-brand-scene[data-packaging=true] .bf-hero-product{transform:rotate(-7deg);transition:none}
.bf-brand-scene .bf-package{transition:opacity 240ms cubic-bezier(.22,1,.36,1),transform 240ms cubic-bezier(.22,1,.36,1),visibility 0s 240ms;transform:rotate(9deg) translateY(10px)}
.bf-brand-scene[data-packaging=true] .bf-package{transform:rotate(5deg);transition-delay:0s;visibility:visible}
.bf-brand-scene .bf-swing-tag{transition:transform 240ms cubic-bezier(.22,1,.36,1);transform-origin:50% 0}
.bf-brand-scene[data-logo=true] .bf-swing-tag{transform:rotate(1deg) translateY(-6px)}

/* A reference stays beside the controls on desktop; mobile shows the same choices
   below the name field, within reach of the checkboxes. */
.bf-live-reference{position:relative;height:280px;margin-top:42px;isolation:isolate;max-width:440px}
.bf-live-product{position:absolute;inset:0 auto auto -20px;width:76%;height:240px;object-fit:contain;transform:rotate(-8deg)}
.bf-live-envelope{position:absolute;top:7px;right:1%;width:58%;height:168px;background:#ddbe94;border:1px solid #ba9464;box-shadow:inset 0 0 0 7px #e4caa6;display:flex;align-items:center;justify-content:center;flex-direction:column;text-align:center;padding:15px;transform:rotate(5deg) translateY(12px);opacity:0;visibility:hidden;transition:opacity 240ms cubic-bezier(.22,1,.36,1),transform 240ms cubic-bezier(.22,1,.36,1),visibility 0s 240ms}
.bf-live-envelope>span{font-family:Caveat,cursive;font-size:23px}
.bf-live-envelope strong{font-family:Fraunces,Georgia,serif;font-weight:450;font-size:24px;overflow-wrap:anywhere;line-height:1.12;max-width:100%;margin-top:16px}
.bf-live-tag{position:absolute;z-index:2;right:0;bottom:52px;width:44%;min-height:115px;background:#fffdf8;border:1px solid #ded0bc;box-shadow:2px 6px 8px #422b1110;padding:18px 14px;display:flex;flex-direction:column;text-align:center;transform:rotate(9deg) translateY(9px);opacity:0;visibility:hidden;transition:opacity 240ms cubic-bezier(.22,1,.36,1),transform 240ms cubic-bezier(.22,1,.36,1),visibility 0s 240ms;transform-origin:50% 0}
.bf-live-tag>span{font-family:Caveat,cursive;font-size:21px}
.bf-live-tag strong{font-family:Fraunces,Georgia,serif;font-size:25px;font-weight:450;line-height:1.1;margin-top:9px;overflow-wrap:anywhere;max-width:100%}
.bf-live-reference[data-logo=true] .bf-live-tag{opacity:1;visibility:visible;transform:rotate(-3deg);transition-delay:0s}
.bf-live-reference[data-packaging=true] .bf-live-envelope{opacity:1;visibility:visible;transform:rotate(5deg);transition-delay:0s}
.bf-live-caption{position:absolute;bottom:0;left:0;margin:0;font-size:12px!important;line-height:1.5!important;color:#716656;max-width:42ch}
.bf-live-reference.bf-reference-mobile{display:none}
.bf-option-mark{transition:background 150ms cubic-bezier(.22,1,.36,1),border-color 150ms cubic-bezier(.22,1,.36,1)}
.bf-option-mark svg{display:block;width:17px;height:17px;fill:none;stroke:#fffdf8;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.bf-option-mark path{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 120ms cubic-bezier(.22,1,.36,1)}
.bf-option-row input:checked~.bf-option-mark:after{content:none}
.bf-option-row input:checked~.bf-option-mark path{stroke-dashoffset:0;transition-duration:180ms;transition-delay:30ms}

/* Keep summary height constant while its native disclosure animates. */
.bf-question[open] summary{padding-bottom:22px}
.bf-question summary:after{content:"";width:14px;height:14px;top:30px;right:12px;background:linear-gradient(#80502d,#80502d) center/14px 1px no-repeat}
.bf-question summary:before{content:"";position:absolute;width:1px;height:14px;top:30px;right:18.5px;background:#80502d;transform:scaleY(1);transition:transform 180ms cubic-bezier(.22,1,.36,1)}
.bf-question[open] summary:before{transform:scaleY(0)}
.bf-question[data-motion-opening=false] summary:before{transform:scaleY(1)}
.bf-question[data-motion-opening=true] summary:before{transform:scaleY(0)}
.bf-faq-filters button{transition:background 150ms cubic-bezier(.22,1,.36,1),color 150ms cubic-bezier(.22,1,.36,1),border-color 150ms cubic-bezier(.22,1,.36,1)}
.bf-faq-filters button:active{background:#e5d6c2}

@media(max-width:760px){
  .bf-section-copy>.bf-live-reference{display:none}
  .bf-live-reference.bf-reference-mobile{display:block;height:190px;max-width:350px;margin:24px auto 0}
  .bf-live-product{height:165px;width:65%;inset:0 auto auto -2%}
  .bf-live-envelope{height:128px;width:55%;top:0;right:0;padding:12px}
  .bf-live-envelope>span{font-size:20px}
  .bf-live-envelope strong{font-size:20px;margin-top:8px}
  .bf-live-tag{min-height:87px;width:43%;bottom:34px;padding:12px 10px}
  .bf-live-tag>span{font-size:18px}
  .bf-live-tag strong{font-size:20px}
  .bf-live-caption{font-size:11px!important}
}
@media(prefers-reduced-motion:reduce){
  .bf-brand-scene .bf-swing-tag,.bf-brand-scene .bf-package,
  .bf-live-reference .bf-live-tag,.bf-live-reference .bf-live-envelope,
  .bf-option-mark,.bf-option-mark path,.bf-faq-filters button,.bf-question summary:before{transition:none!important}
}