/* garden layer — shared by the landing page and the sub-pages.
   Two things: momiji leaves (spawned by leaves.js) and one painted lantern.
   Everything here is fixed, pointer-events:none and sits between the
   background layers (z 0-1) and the content (z 3+). */

/* ---- momiji ---- */
.leaves{position:fixed;inset:0;z-index:2;pointer-events:none;overflow:hidden}
.leaf{position:absolute;top:-8vh;left:0;width:var(--size);height:var(--size);
  opacity:0;filter:blur(var(--blur));will-change:transform,opacity;
  animation:leaf-fall var(--dur) linear var(--delay) infinite}
.leaf-in{width:100%;height:100%;
  animation:leaf-sway var(--sdur) ease-in-out var(--delay) infinite alternate}
.leaf svg{display:block;width:100%;height:100%;overflow:visible;
  filter:drop-shadow(0 0 6px rgba(207,59,43,.35))}
@keyframes leaf-fall{
  0%  {transform:translate3d(var(--x0),0,0) rotate(0deg);opacity:0}
  6%  {opacity:var(--op)}
  86% {opacity:var(--op)}
  100%{transform:translate3d(var(--x1),118vh,0) rotate(var(--spin));opacity:0}
}
@keyframes leaf-sway{
  from{transform:translateX(calc(var(--sway) * -1)) rotate(-26deg)}
  to  {transform:translateX(var(--sway)) rotate(26deg)}
}

/* ---- the lantern: one painted chochin hanging in from the top right corner of
   every sub-page, its glow a static radial wash behind it. Replaces the sun. ---- */
.lantern{position:fixed;z-index:1;pointer-events:none;user-select:none}
.lantern img{display:block;width:100%;height:auto;opacity:.9}
/* the halo is the light spilling into the air: sized against the paper body (the gradient fades at
   72% of the ellipse, so the ring reaches ~50px past the body at 150px wide) and it barely moves */
.lantern::before{content:"";position:absolute;left:50%;top:44%;width:230%;height:130%;
  transform:translate(-50%,-50%);border-radius:50%;
  background:radial-gradient(closest-side,rgba(255,186,96,.5),rgba(255,150,64,.2) 40%,transparent 72%);
  animation:lantern-halo 10s ease-in-out infinite}
/* the breath is INSIDE the paper: a body-shaped core, screen-blended so the paper itself brightens */
.lantern::after{content:"";position:absolute;left:50%;top:44%;width:92%;height:50%;
  transform:translate(-50%,-50%);border-radius:50%;mix-blend-mode:screen;
  background:radial-gradient(closest-side,rgba(255,232,180,.95),rgba(255,196,110,.55) 55%,transparent 100%);
  animation:lantern-breathe 10s ease-in-out infinite}
/* five seconds up, five seconds down: the paper swells, the spill only follows a little */
@keyframes lantern-breathe{0%,100%{opacity:.03} 50%{opacity:.6}}
@keyframes lantern-halo{0%,100%{opacity:.45} 50%{opacity:.65}}
.lantern.page-lantern{width:min(13vw,150px);right:clamp(28px,5vw,72px);top:-8px}
/* the calligraphy drops below the tassel */
body.wide .lantern.page-lantern ~ .vertical{top:62%}

@media (max-width:640px){
  .lantern.page-lantern{width:min(12vw,55px);right:16px;top:-4px;transition:opacity .35s ease}
  /* on a phone the lantern hangs over the column, so it leaves the moment the page starts to
     scroll (html.scrolled, set by nav.js) and returns at the top */
  html.scrolled .lantern.page-lantern{opacity:0}
}
@media (prefers-reduced-motion:reduce){
  .lantern::before{animation:none;opacity:.75}
  .lantern::after{animation:none;opacity:.4}
}