/* A continuous warm backdrop, with six independently suspended cutouts. */
.bread.bread--photograph {
  grid-template-columns:minmax(0,1.18fr) minmax(0,.82fr);
  grid-template-areas:"image copy";
  gap:3vw;
  padding:112px 8vw 68px 4vw;
  overflow:hidden;
  background:#d1ae8d;
  color:#40291f;
}
.bread--photograph::after { opacity:.055; }
.bread--photograph .bread-copy { grid-area:copy; max-width:490px; padding-bottom:24px; z-index:10; justify-self:center; }
.bread--photograph h2 { font-size:clamp(58px,6.9vw,110px); line-height:.94; letter-spacing:-.065em; }
.bread--photograph h2 em { display:block; margin-top:8px; }
.bread--photograph .bread-copy>p { max-width:420px; margin:36px 0 0; line-height:1.8; }
.bread-orbit {
  grid-area:image;
  position:relative;
  width:100%;
  max-width:820px;
  aspect-ratio:.86;
  margin:0;
  justify-self:center;
  isolation:isolate;
  touch-action:pan-y pinch-zoom;
  -webkit-tap-highlight-color:transparent;
}
.bread-orbit::before {
  content:"";
  position:absolute;
  left:24%; right:8%; bottom:0; height:5%;
  background:radial-gradient(ellipse,rgba(89,49,25,.19),rgba(89,49,25,0) 68%);
  filter:blur(12px);
  transform:rotate(-8deg);
  pointer-events:none;
}
.bread-orbit-piece {
  position:absolute;
  left:var(--x); top:var(--y); width:var(--size);
  padding:0; margin:0; border:0; border-radius:0;
  appearance:none;
  background:none;
  transform:translate(-50%,-50%) translate(var(--drift-x,0px),var(--drift-y,0px)) rotate(calc(var(--angle) + var(--turn,0deg)));
  touch-action:pan-y pinch-zoom;
  filter:drop-shadow(13px 23px 17px rgba(75,40,19,.18));
}
.bread-orbit-piece img { display:block; width:100%; height:auto; user-select:none; pointer-events:none; }
.bread-orbit.is-animating .bread-orbit-piece { will-change:transform; }
.bread-flour-layer {
  position:absolute; z-index:1;
  left:var(--flour-left); top:var(--flour-top); width:var(--flour-size); aspect-ratio:1;
  pointer-events:none;
  background:url("assets/bread-model/orbit-flour-burst.webp") center / 100% 100% no-repeat;
  transform:translate(-50%,-50%) translate(var(--flour-x,0px),var(--flour-y,0px)) rotate(calc(var(--flour-angle) + var(--flour-turn,0deg)));
}
.bread-flour-layer--back { --flour-left:51%; --flour-top:48%; --flour-size:126%; --flour-angle:-8deg; opacity:.38; }
.bread-flour-layer--middle { --flour-left:36%; --flour-top:42%; --flour-size:92%; --flour-angle:-72deg; opacity:.27; }
.bread-flour-layer--near { --flour-left:64%; --flour-top:68%; --flour-size:98%; --flour-angle:28deg; opacity:.24; }
.bread-orbit-earl { --x:23%; --y:19%; --size:34%; --angle:-9deg; z-index:3; }
.bread-orbit-swirl { --x:77%; --y:18%; --size:34%; --angle:12deg; z-index:2; }
.bread-orbit-sourdough-left { --x:39%; --y:44%; --size:58%; --angle:-25deg; z-index:5; }
.bread-orbit-sourdough-right { --x:65%; --y:61%; --size:47%; --angle:8deg; z-index:4; }
.bread-orbit-milk { --x:21%; --y:76%; --size:37%; --angle:-18deg; z-index:2; }
.bread-orbit-kaya { --x:72%; --y:86%; --size:37%; --angle:-10deg; z-index:6; }
.bread-orbit-particles { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:7; }
@media(min-width:1600px) {
  .bread.bread--photograph { padding-inline:7vw 10vw; }
  .bread-orbit { max-width:760px; }
}
@media(max-width:1100px) {
  .bread.bread--photograph { padding:120px 6vw 72px 4vw; gap:2vw; }
}
@media(max-width:850px) {
  .bread.bread--photograph { grid-template-columns:1fr; grid-template-areas:"copy" "image"; gap:28px; padding:112px 7vw 48px; }
  .bread--photograph .bread-copy { max-width:650px; padding-bottom:0; }
  .bread--photograph h2 { font-size:clamp(58px,10vw,82px); }
  .bread--photograph h2 em { display:inline; }
  .bread--photograph .bread-copy>p { max-width:600px; margin-top:28px; }
  .bread-orbit { width:108%; max-width:610px; }
}
@media(max-width:500px) {
  .bread.bread--photograph { padding-top:94px; gap:24px; padding-bottom:32px; }
  .bread--photograph h2 { font-size:clamp(52px,14vw,70px); }
  .bread--photograph h2 em { display:block; }
  .bread-orbit-piece { filter:drop-shadow(7px 12px 10px rgba(75,40,19,.16)); }
}
@media(prefers-reduced-motion:reduce) {
  .bread-orbit-piece { transform:translate(-50%,-50%) rotate(var(--angle)); }
  .bread-flour-layer { transform:translate(-50%,-50%) rotate(var(--flour-angle)); }
}