/* Shared loop components, used by the loop pages and by the live site (index.html). */
/* A loop stage keeps the art's aspect ratio; every layer inside is absolute. */
.stage{position:relative;width:100%;overflow:hidden;background:var(--paper,#EFE4C8);isolation:isolate}
.stage > img, .stage > svg, .stage > .layer{position:absolute;inset:0;width:100%;height:100%;display:block}
.stage > img{object-fit:cover}
.la-path{opacity:0}

/* Watercolor bloom: a soft radial mask grows out of one point of the scene. */
.bloom{--r:0%;
  -webkit-mask-image:radial-gradient(circle at var(--cx) var(--cy), #000 calc(var(--r) - 14%), transparent var(--r));
          mask-image:radial-gradient(circle at var(--cx) var(--cy), #000 calc(var(--r) - 14%), transparent var(--r));
}

/* Ambient hero life */
.amb{position:absolute;inset:0;pointer-events:none}
.amb-light{
  position:absolute;width:1.15%;aspect-ratio:1;translate:-50% -50%;border-radius:50%;
  background:radial-gradient(circle, rgba(255,246,214,.95) 0 18%, rgba(255,226,150,.55) 34%, rgba(255,214,120,0) 70%);
  mix-blend-mode:screen;opacity:.25;animation:twinkle 3s ease-in-out infinite;
}
@keyframes twinkle{0%,100%{opacity:.2;scale:.8}50%{opacity:var(--peak);scale:1.15}}
.amb-steam{position:absolute;width:1.4%;height:9%;translate:-50% -100%}
.amb-steam svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;opacity:0;animation:steam 3.75s ease-in-out infinite}
.amb-steam path{fill:none;stroke:var(--ink-soft);stroke-width:1.3;stroke-linecap:round;opacity:.55}
@keyframes steam{
  0%{opacity:0;transform:translateY(20%) scaleX(.7)}
  25%{opacity:.9}
  70%{opacity:.35}
  100%{opacity:0;transform:translateY(-55%) scaleX(1.35) skewX(-8deg)}
}
.amb-leaf{position:absolute;width:1.3%;opacity:0;animation:leaf 13s linear infinite;overflow:visible}
.amb-leaf path{fill:var(--sage,#8E9F6B);opacity:.85}
.amb-leaf .vein{fill:none;stroke:#6E7F4E;stroke-width:.8}
@keyframes leaf{
  0%{opacity:0;transform:translate(0,0) rotate(10deg)}
  6%{opacity:.95}
  25%{transform:translate(-90%,450%) rotate(-35deg)}
  50%{transform:translate(120%,950%) rotate(40deg)}
  75%{transform:translate(-60%,1450%) rotate(-25deg)}
  88%{opacity:.9}
  100%{opacity:0;transform:translate(80%,1900%) rotate(30deg)}
}
@media (prefers-reduced-motion: reduce){.amb-light,.amb-steam svg,.amb-leaf{animation:none}.amb-steam svg,.amb-leaf{opacity:0}}

/* Monogram loop: B bean draws and inks itself, wordmark, the menu cycles. */
.mono{position:relative;aspect-ratio:1;width:100%;container-type:inline-size;display:grid;place-items:center;color:var(--ink,#3B281B)}
.mono-in{width:62%;text-align:center}
.mono-in svg{width:56%;overflow:visible;display:block;margin:0 auto}
.mono-out{fill:none;stroke:currentColor;stroke-width:7;stroke-linejoin:round;stroke-linecap:round;opacity:0}
.mono-fill{fill:currentColor;opacity:0}
.mono-wisps path{fill:none;stroke:var(--gold,#B99B6B);stroke-width:7;stroke-linecap:round;opacity:0}
.mono-word{font-family:var(--serif);font-weight:600;letter-spacing:.42em;font-size:6cqw;margin-top:4%;padding-left:.42em;display:flex;justify-content:center;white-space:nowrap}
.mono-word span{display:inline-block;opacity:0}
.mono-rule{display:flex;align-items:center;gap:4%;margin:4% auto 0;width:100%}
.mono-rule i{flex:1;height:1px;background:var(--gold,#B99B6B);transform-origin:right;transform:scaleX(0)}
.mono-rule i:last-child{transform-origin:left}
.mono-rule em{font-family:var(--serif);font-style:italic;font-size:4.8cqw;color:var(--accent,#8A5A36);min-width:48%;opacity:0;white-space:nowrap}

/* Woodblock press: plates land on washi paper, then lanterns breathe and petals fall. */
.press{background:#E9DEC6}
.press > .press-plate, .press > .press-full{opacity:0}
.press-glow{position:absolute;inset:0;pointer-events:none;opacity:0}
.press-glow i{
  position:absolute;aspect-ratio:1;translate:-50% -50%;border-radius:50%;
  background:radial-gradient(circle, rgba(255,214,140,.55) 0 22%, rgba(255,170,80,.22) 45%, rgba(255,160,70,0) 70%);
  mix-blend-mode:screen;animation:breathe 4s ease-in-out infinite;
}
@keyframes breathe{0%,100%{opacity:.55;scale:.92}50%{opacity:1;scale:1.12}}
.press-petal{width:.9%}
.press-petal path{fill:#F1D9CE;opacity:.9}
@media (prefers-reduced-motion: reduce){.press-glow i{animation:none}}