body.bakery-intro-active{overflow:hidden}

.bakery-intro-overlay{
  --pink:#e596ad;
  --pink-deep:#c86584;
  --green:#b8d873;
  --green-deep:#8eb34f;
  --cream:#fff9ed;
  --paper:#fffdf8;
  --cocoa:#503b38;
  position:fixed;
  inset:0;
  z-index:200;
  display:grid;
  place-items:center;
  overflow:hidden;
  pointer-events:auto;
  animation:bakery-box-release .01s 4.7s forwards;
}

.bakery-intro-door{
  position:absolute;
  top:0;
  bottom:0;
  z-index:0;
  width:50.1%;
  overflow:hidden;
  background:
    radial-gradient(circle at 24% 18%,rgba(229,150,173,.15) 0 4px,transparent 5px),
    radial-gradient(circle at 76% 72%,rgba(184,216,115,.17) 0 5px,transparent 6px),
    radial-gradient(circle at 50% 42%,#fffdf8 0,#fff8e9 58%,#f8ead7 100%);
  will-change:transform;
}

.bakery-intro-door::after{
  content:"";
  position:absolute;
  inset:6%;
  border:2px dashed rgba(200,101,132,.12);
  border-radius:42% 58% 51% 49%/55% 44% 56% 45%;
}

.bakery-intro-door-left{
  left:0;
  animation:bakery-door-left .92s 3.72s cubic-bezier(.72,0,.18,1) forwards;
}

.bakery-intro-door-right{
  right:0;
  transform:scaleX(-1);
  animation:bakery-door-right .92s 3.72s cubic-bezier(.72,0,.18,1) forwards;
}

.bakery-box-scene{
  position:relative;
  z-index:2;
  width:min(88vw,78vh,620px);
  aspect-ratio:1;
  perspective:1100px;
  opacity:0;
  transform:translateY(34px) scale(.74) rotate(-3deg);
  animation:
    bakery-scene-arrive .72s .08s cubic-bezier(.16,.88,.28,1.18) forwards,
    bakery-scene-leave .5s 3.42s cubic-bezier(.55,0,.8,.25) forwards;
}

.bakery-box-scene::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:10%;
  width:58%;
  height:8%;
  border-radius:50%;
  background:rgba(93,55,44,.14);
  filter:blur(14px);
  transform:translateX(-50%) scale(.45);
  opacity:0;
  animation:bakery-floor-shadow .65s .28s ease-out forwards;
}

.bx-swoosh{
  position:absolute;
  inset:0;
  z-index:1;
  width:100%;
  height:100%;
  overflow:visible;
  pointer-events:none;
}

.bx-swoosh path{
  fill:none;
  stroke-linecap:round;
  stroke-dasharray:1350;
  stroke-dashoffset:1350;
}

.bx-swoosh .bx-swoosh-pink{
  stroke:rgba(229,150,173,.55);
  stroke-width:5;
  animation:bakery-draw-swoosh 1.18s .7s cubic-bezier(.24,.7,.2,1) forwards;
}

.bx-swoosh .bx-swoosh-green{
  stroke:rgba(184,216,115,.58);
  stroke-width:4;
  animation:bakery-draw-swoosh 1.22s .82s cubic-bezier(.24,.7,.2,1) forwards;
}

.bx-box{
  position:absolute;
  left:50%;
  top:48%;
  z-index:3;
  width:72%;
  aspect-ratio:1;
  transform:translate(-50%,-50%);
  transform-style:preserve-3d;
}

.bx-base{
  position:absolute;
  inset:8%;
  border-radius:27% 22% 25% 20%/22% 28% 20% 26%;
  background:linear-gradient(145deg,#f8e3c5,#f0cfa6);
  box-shadow:0 28px 56px rgba(118,62,52,.2),inset 0 0 0 2px rgba(200,101,132,.1);
  transform:rotate(1.5deg);
}

.bx-base::before{
  content:"";
  position:absolute;
  inset:8%;
  border-radius:inherit;
  background:radial-gradient(circle at 50% 42%,rgba(255,255,255,.78),rgba(255,249,237,.44));
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.65);
}

.bx-lid{
  position:absolute;
  inset:4%;
  z-index:5;
  overflow:hidden;
  border-radius:23% 28% 22% 26%/26% 21% 28% 23%;
  background:
    radial-gradient(circle at 20% 18%,rgba(229,150,173,.1) 0 3px,transparent 4px),
    linear-gradient(145deg,#fffefb,#fff4df);
  box-shadow:0 18px 42px rgba(118,62,52,.2),inset 0 0 0 3px rgba(255,255,255,.76);
  transform-origin:50% 4%;
  animation:bakery-lid-open .88s 1.02s cubic-bezier(.22,.7,.25,1) forwards;
}

.bx-lid::after{
  content:"";
  position:absolute;
  inset:9%;
  border:2px dashed rgba(200,101,132,.22);
  border-radius:inherit;
}

.bx-ribbon{
  position:absolute;
  z-index:2;
  background:linear-gradient(90deg,#d97d99,#eda9bb,#d97d99);
  box-shadow:0 3px 8px rgba(121,54,73,.13);
}

.bx-ribbon-horizontal{left:-2%;top:44%;width:104%;height:12%}
.bx-ribbon-vertical{left:44%;top:-2%;width:12%;height:104%;background:linear-gradient(0deg,#a8cb61,#c5e28b,#a8cb61)}

.bx-bow{
  position:absolute;
  left:50%;
  top:50%;
  z-index:4;
  width:27%;
  aspect-ratio:1;
  transform:translate(-50%,-50%) scale(.25) rotate(-18deg);
  opacity:0;
  animation:bakery-bow-pop .6s .36s cubic-bezier(.15,.9,.26,1.28) forwards,bakery-bow-away .42s .88s ease-in forwards;
}

.bx-bow::before,.bx-bow::after{
  content:"";
  position:absolute;
  top:24%;
  width:58%;
  height:48%;
  border:12px solid var(--pink);
  background:rgba(255,255,255,.5);
}

.bx-bow::before{right:47%;border-radius:70% 34% 62% 42%;transform:rotate(18deg)}
.bx-bow::after{left:47%;border-radius:34% 70% 42% 62%;transform:rotate(-18deg)}

.bx-bow-knot{
  position:absolute;
  left:50%;
  top:50%;
  z-index:2;
  width:28%;
  aspect-ratio:1;
  border-radius:50%;
  background:var(--pink-deep);
  box-shadow:0 4px 10px rgba(121,54,73,.2);
  transform:translate(-50%,-50%);
}

.bx-logo-seal{
  position:absolute;
  left:50%;
  top:48%;
  z-index:4;
  width:66%;
  aspect-ratio:1;
  overflow:hidden;
  border-radius:50%;
  background:#fff;
  box-shadow:
    0 20px 42px rgba(118,62,52,.19),
    0 0 0 7px rgba(255,255,255,.72),
    0 0 0 11px rgba(184,216,115,.18);
  opacity:0;
  transform:translate(-50%,-38%) scale(.38,.22) rotate(8deg);
  transform-origin:50% 72%;
  animation:bakery-seal-rise 1.05s 1.14s cubic-bezier(.14,.9,.26,1.18) forwards;
}

.bx-logo-seal::before,.bx-logo-seal::after{
  content:"";
  position:absolute;
  z-index:2;
  border-radius:50%;
  pointer-events:none;
}

.bx-logo-seal::before{inset:2%;box-shadow:inset 0 0 0 3px rgba(229,150,173,.24)}
.bx-logo-seal::after{inset:5%;box-shadow:inset 0 0 0 2px rgba(184,216,115,.22)}

.bx-logo-seal img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  user-select:none;
}

.bx-glaze{
  position:absolute;
  inset:-18%;
  z-index:3;
  background:linear-gradient(112deg,transparent 35%,rgba(255,255,255,.88) 48%,transparent 60%);
  transform:translateX(-125%) rotate(5deg);
  animation:bakery-glaze 1.05s 2.02s ease-out forwards;
}

.bx-puff{
  position:absolute;
  left:50%;
  top:48%;
  z-index:3;
  width:16%;
  aspect-ratio:1;
  border-radius:50%;
  background:rgba(255,255,255,.8);
  filter:blur(2px);
  opacity:0;
  transform:translate(-50%,-50%) scale(.2);
  animation:bakery-puff .82s 1.27s ease-out forwards;
}

.bx-puff::before,.bx-puff::after{
  content:"";
  position:absolute;
  border-radius:50%;
  background:inherit;
}

.bx-puff::before{width:84%;height:84%;left:-48%;top:22%}
.bx-puff::after{width:72%;height:72%;right:-42%;top:5%}

.bx-sprinkles{position:absolute;inset:0;z-index:7;pointer-events:none}

.bx-sprinkle{
  --x:0px;
  --y:0px;
  --r:0deg;
  position:absolute;
  left:50%;
  top:48%;
  width:12px;
  height:6px;
  border-radius:999px;
  background:var(--pink);
  opacity:0;
  transform:translate(-50%,-50%) scale(0);
  animation:bakery-sprinkle-burst 1.28s 1.48s cubic-bezier(.16,.75,.34,1) forwards;
}

.bx-sprinkle:nth-child(2n){background:var(--green)}
.bx-sprinkle:nth-child(3n){width:8px;height:8px;border-radius:50%;background:#f2ca77}
.bx-sprinkle:nth-child(1){--x:-235px;--y:-98px;--r:-24deg}
.bx-sprinkle:nth-child(2){--x:214px;--y:-132px;--r:42deg;animation-delay:1.53s}
.bx-sprinkle:nth-child(3){--x:-248px;--y:72px;--r:68deg;animation-delay:1.58s}
.bx-sprinkle:nth-child(4){--x:242px;--y:82px;--r:-48deg;animation-delay:1.51s}
.bx-sprinkle:nth-child(5){--x:-142px;--y:-210px;--r:18deg;animation-delay:1.61s}
.bx-sprinkle:nth-child(6){--x:126px;--y:-224px;--r:84deg;animation-delay:1.66s}
.bx-sprinkle:nth-child(7){--x:-162px;--y:196px;--r:12deg;animation-delay:1.59s}
.bx-sprinkle:nth-child(8){--x:168px;--y:188px;--r:-74deg;animation-delay:1.56s}
.bx-sprinkle:nth-child(9){--x:-52px;--y:-242px;--r:30deg;animation-delay:1.64s}
.bx-sprinkle:nth-child(10){--x:255px;--y:-18px;--r:8deg;animation-delay:1.55s}
.bx-sprinkle:nth-child(11){--x:-255px;--y:-18px;--r:-12deg;animation-delay:1.62s}
.bx-sprinkle:nth-child(12){--x:42px;--y:222px;--r:58deg;animation-delay:1.68s}

.bx-star{
  position:absolute;
  z-index:8;
  width:24px;
  height:24px;
  opacity:0;
  animation:bakery-star-twinkle 1.6s 2.05s ease-in-out infinite;
}

.bx-star::before,.bx-star::after{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  border-radius:999px;
  background:var(--pink);
  transform:translate(-50%,-50%);
}

.bx-star::before{width:3px;height:100%}
.bx-star::after{width:100%;height:3px}
.bx-star-one{left:12%;top:25%}
.bx-star-two{right:11%;top:31%;transform:scale(.68);animation-delay:2.32s}
.bx-star-three{right:17%;bottom:20%;transform:scale(.48);animation-delay:2.58s}

.bx-caption{
  position:absolute;
  left:50%;
  bottom:2.5%;
  z-index:9;
  width:92%;
  color:var(--pink-deep);
  font-family:'Playfair Display',Georgia,'Times New Roman',serif;
  font-size:clamp(19px,3.5vw,31px);
  font-style:italic;
  text-align:center;
  letter-spacing:.01em;
  opacity:0;
  transform:translate(-50%,18px);
  animation:bakery-caption-in .7s 2.15s ease-out forwards;
}

.bx-caption span{color:var(--green-deep)}

@keyframes bakery-scene-arrive{
  0%{opacity:0;transform:translateY(34px) scale(.74) rotate(-3deg)}
  68%{opacity:1;transform:translateY(-7px) scale(1.035) rotate(1deg)}
  100%{opacity:1;transform:translateY(0) scale(1) rotate(0)}
}

@keyframes bakery-scene-leave{
  to{opacity:0;transform:translateY(-8px) scale(.82)}
}

@keyframes bakery-floor-shadow{
  to{opacity:1;transform:translateX(-50%) scale(1)}
}

@keyframes bakery-bow-pop{
  to{opacity:1;transform:translate(-50%,-50%) scale(1) rotate(0)}
}

@keyframes bakery-bow-away{
  to{opacity:0;transform:translate(-50%,-50%) translateY(-36px) scale(.38) rotate(16deg)}
}

@keyframes bakery-lid-open{
  0%,18%{transform:rotateX(0) translateY(0);opacity:1}
  100%{transform:rotateX(74deg) translateY(-38%) scale(.9);opacity:0}
}

@keyframes bakery-seal-rise{
  0%{opacity:0;transform:translate(-50%,-38%) scale(.38,.22) rotate(8deg)}
  42%{opacity:1;transform:translate(-50%,-53%) scale(1.09,.93) rotate(-3deg)}
  64%{transform:translate(-50%,-49%) scale(.96,1.06) rotate(1.5deg)}
  82%{transform:translate(-50%,-50%) scale(1.025,.985) rotate(-.5deg)}
  100%{opacity:1;transform:translate(-50%,-50%) scale(1) rotate(0)}
}

@keyframes bakery-draw-swoosh{to{stroke-dashoffset:0}}
@keyframes bakery-glaze{to{transform:translateX(125%) rotate(5deg)}}

@keyframes bakery-puff{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.2)}
  35%{opacity:.8}
  100%{opacity:0;transform:translate(-50%,-50%) scale(3)}
}

@keyframes bakery-sprinkle-burst{
  0%{opacity:0;transform:translate(-50%,-50%) scale(0) rotate(0)}
  25%{opacity:1}
  72%{opacity:1;transform:translate(calc(-50% + var(--x)),calc(-50% + var(--y))) scale(1) rotate(var(--r))}
  100%{opacity:0;transform:translate(calc(-50% + var(--x)),calc(-50% + var(--y) + 14px)) scale(.72) rotate(var(--r))}
}

@keyframes bakery-star-twinkle{
  0%,28%,100%{opacity:0;filter:blur(1px)}
  48%{opacity:.9;filter:blur(0)}
  70%{opacity:0}
}

@keyframes bakery-caption-in{to{opacity:1;transform:translate(-50%,0)}}
@keyframes bakery-door-left{to{transform:translateX(-102%)}}
@keyframes bakery-door-right{to{transform:translateX(102%) scaleX(-1)}}
@keyframes bakery-box-release{to{visibility:hidden;pointer-events:none}}

@media (max-width:540px){
  .bakery-box-scene{width:min(90vw,76vh,430px)}
  .bx-box{width:78%;top:47%}
  .bx-caption{bottom:1%;font-size:clamp(18px,6vw,25px)}
  .bx-sprinkle:nth-child(1){--x:-148px;--y:-78px}
  .bx-sprinkle:nth-child(2){--x:142px;--y:-88px}
  .bx-sprinkle:nth-child(3){--x:-152px;--y:62px}
  .bx-sprinkle:nth-child(4){--x:150px;--y:72px}
  .bx-sprinkle:nth-child(5){--x:-92px;--y:-148px}
  .bx-sprinkle:nth-child(6){--x:82px;--y:-154px}
  .bx-sprinkle:nth-child(7){--x:-102px;--y:138px}
  .bx-sprinkle:nth-child(8){--x:108px;--y:132px}
  .bx-sprinkle:nth-child(9){--x:-32px;--y:-162px}
  .bx-sprinkle:nth-child(10){--x:160px;--y:-12px}
  .bx-sprinkle:nth-child(11){--x:-160px;--y:-12px}
  .bx-sprinkle:nth-child(12){--x:30px;--y:152px}
}

@media (prefers-reduced-motion:reduce){
  .bakery-intro-overlay{animation-delay:.5s}
  .bakery-intro-door{animation-delay:.15s;animation-duration:.35s}
  .bakery-box-scene,.bakery-box-scene *,.bakery-box-scene *::before,.bakery-box-scene *::after{
    animation-duration:.001ms!important;
    animation-delay:0s!important;
    animation-iteration-count:1!important;
  }
}