/* Readable by default; temporary artwork never changes the title layout. */
.bakery-title{position:relative}
.motion-word{display:inline-block;max-width:100%;overflow-wrap:anywhere;transform-origin:center 90%}
.bakery-title-art{position:absolute;inset:0;overflow:clip;pointer-events:none;user-select:none;z-index:1;contain:layout style}
.bakery-title-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.bakery-title-stroke{fill:none;stroke:var(--orange,#f48642);stroke-linecap:round;stroke-linejoin:round;stroke-width:3;opacity:0}
.bakery-piped-stroke{stroke-width:5}
.bakery-swirl-stroke{stroke-width:2.5}
.bakery-steam-stroke{stroke:var(--teal-deep,#166876);stroke-width:1.75}
.bakery-piping-bag,.bakery-sifter,.bakery-whisk{fill:none;stroke:var(--teal-deep,#166876);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;opacity:0;transform-origin:0 0}
.bakery-piping-bag path:first-child{fill:var(--cream,#fffaf2)}
.bakery-sifter{stroke-width:1.5}
.bakery-whisk{stroke-width:1.6}
.bakery-piping-bag path,.bakery-sifter path,.bakery-whisk path{vector-effect:non-scaling-stroke}
.bakery-title-piece{position:absolute;display:block;opacity:0;pointer-events:none}
.bakery-title-piece-flour{width:clamp(3px,.085em,6px);height:clamp(3px,.085em,6px);border-radius:50%;background:#bc9d77;scale:var(--piece-size);box-shadow:4px -5px 0 -1px #d6bf9a,-4px 3px 0 -1px #a88c67}
.bakery-title-piece-sprinkle{width:clamp(3px,.07em,6px);height:clamp(7px,.19em,13px);border-radius:3px;background:var(--orange,#f48642);rotate:var(--piece-angle);scale:var(--piece-size)}
.bakery-title-piece-sprinkle:nth-child(3n){background:var(--teal-deep,#166876)}
.bakery-title-piece-sprinkle:nth-child(3n + 1){background:#55bfc4}
.bakery-scene-canvas{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none;z-index:1}
.hero-label{z-index:2}
.hero-banner .hero-photo-outgoing{position:absolute;inset:0;height:100%;pointer-events:none;z-index:0}
/* A warming bake fill and a piped inset border, inspired by the existing custom button system. */
:is(.button,.primary-button,.quiet-button,.file-button){position:relative;isolation:isolate;overflow:hidden;min-height:44px;transition:background-color .25s ease,color .25s ease,border-color .25s ease,transform .3s cubic-bezier(.16,1,.3,1),box-shadow .3s ease}
:is(.button,.primary-button,.quiet-button,.file-button)::before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;background:rgb(255 250 242 / .14);clip-path:ellipse(70% 100% at 50% 200%);transition:clip-path .42s cubic-bezier(.16,1,.3,1)}
:is(.button,.primary-button,.quiet-button,.file-button)::after{content:'';position:absolute;inset:4px;z-index:-1;pointer-events:none;border:1px solid currentColor;opacity:0;border-radius:inherit;transform:scale(.96);transition:opacity .3s ease,transform .4s cubic-bezier(.16,1,.3,1)}
:is(.button,.primary-button,.quiet-button,.file-button):focus-visible{outline:3px solid var(--teal-deep,#166876);outline-offset:4px;box-shadow:0 0 0 2px var(--cream,#fffaf2)}
:is(.button,.primary-button,.quiet-button,.file-button):focus-visible::after{opacity:.35;transform:scale(1)}
:is(.button,.primary-button,.quiet-button,.file-button):active{transform:translateY(1px) scale(.985)}
:is(.button,.primary-button,.quiet-button,.file-button):disabled,:is(.button,.primary-button,.quiet-button,.file-button)[aria-disabled='true']{opacity:.55;cursor:not-allowed;transform:none}
:is(.button,.primary-button,.quiet-button,.file-button):disabled::before,:is(.button,.primary-button,.quiet-button,.file-button):disabled::after{display:none}
.button-teal:hover{background:var(--teal-deep,#166876);color:var(--cream,#fffaf2)}
.button-outline::before,.quiet-button::before,.file-button::before{background:var(--orange-soft,#fff0df)}
.button-outline::after,.quiet-button::after,.file-button::after{border-color:var(--teal-deep,#166876)}
.hero-tabs button,.filter-tabs button,.occasion-buttons button,.control-tabs button,.segmented button,.topping-grid button,.tool-grid button,.choice,.view-button,.small-button{min-height:44px;transition:background-color .22s,border-color .22s,color .22s,transform .25s cubic-bezier(.16,1,.3,1)}
.hero-tabs button[aria-pressed='true']{border-color:var(--teal-deep,#166876);background:var(--blue-soft,#eaf5f5);color:var(--teal-deep,#166876)}
.hero-tabs button:active,.filter-tabs button:active,.occasion-buttons button:active,.control-tabs button:active,.segmented button:active,.topping-grid button:active,.tool-grid button:active,.choice:active,.view-button:active,.small-button:active{transform:scale(.97)}
.path-link h2{transition:color .25s ease}
.path-action{position:relative;width:fit-content}
.path-action::after{content:'';position:absolute;left:0;right:0;bottom:-3px;height:2px;background:var(--orange,#f48642);transform:scaleX(0);transform-origin:left;transition:transform .35s cubic-bezier(.16,1,.3,1)}
.path-link:focus-visible .path-action::after{transform:scaleX(1)}
.photo-plus{transition:background .25s,transform .25s}
.plain-button,.text-button,.menu-toggle{min-height:44px;background-image:linear-gradient(var(--orange,#f48642),var(--orange,#f48642));background-repeat:no-repeat;background-position:left bottom;background-size:0 2px;transition:background-size .3s cubic-bezier(.16,1,.3,1),color .2s ease,transform .2s ease}
.plain-button:focus-visible,.text-button:focus-visible,.menu-toggle:focus-visible{background-size:100% 2px}
.plain-button:active,.text-button:active,.menu-toggle:active{transform:translateY(1px)}
.starter,.photo-nav button{min-height:44px;transition:background-color .22s,border-color .22s,transform .25s cubic-bezier(.16,1,.3,1)}
.starter:active,.photo-nav button:active{transform:scale(.985)}
button[aria-busy='true']{cursor:wait}
@media(hover:hover){
  :is(.button,.primary-button,.quiet-button,.file-button):not(:disabled):not([aria-disabled='true']):hover{transform:translateY(-2px)}
  :is(.button,.primary-button,.quiet-button,.file-button):not(:disabled):not([aria-disabled='true']):hover::before{clip-path:ellipse(90% 120% at 50% 50%)}
  :is(.button,.primary-button,.quiet-button,.file-button):not(:disabled):not([aria-disabled='true']):hover::after{opacity:.28;transform:scale(1)}
  :is(.button,.primary-button,.quiet-button,.file-button):not(:disabled):not([aria-disabled='true']):active{transform:translateY(1px) scale(.985)}
  .path-link:hover .path-action::after{transform:scaleX(1)}
  .photo-button:hover .photo-plus{background:var(--orange,#f48642);transform:scale(1.08)}
  .plain-button:hover,.text-button:hover,.menu-toggle:hover{background-size:100% 2px}
}
dialog[open]{animation:bakery-dialog-arrive .28s cubic-bezier(.16,1,.3,1)}
dialog[open]::backdrop{animation:bakery-backdrop-arrive .25s ease}
@keyframes bakery-dialog-arrive{from{opacity:.75;transform:translateY(8px) scale(.99)}to{opacity:1;transform:none}}
@keyframes bakery-backdrop-arrive{from{opacity:.3}to{opacity:1}}
::selection{background:#bce5e5;color:#163e46}
input,textarea{caret-color:var(--teal-deep,#166876)}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  dialog::backdrop{animation:none!important;transition:none!important}
  .bakery-title-art,.bakery-scene-canvas{display:none!important}
  :is(.button,.primary-button,.quiet-button,.file-button,.hero-tabs button,.filter-tabs button,.occasion-buttons button,.control-tabs button,.segmented button,.topping-grid button,.tool-grid button,.choice,.view-button,.small-button,.plain-button,.text-button,.menu-toggle,.starter,.photo-nav button):hover,
  :is(.button,.primary-button,.quiet-button,.file-button,.hero-tabs button,.filter-tabs button,.occasion-buttons button,.control-tabs button,.segmented button,.topping-grid button,.tool-grid button,.choice,.view-button,.small-button,.plain-button,.text-button,.menu-toggle,.starter,.photo-nav button):active{transform:none!important}
}
