/* Villa Rosavelle. THE LIVING LAYER (phones): gold butterflies, warm fireflies and drifting rose petals over the whole page.
   One fixed layer, built once by living.js, never receives a touch (pointer-events:none). Positions and opacity are written by JS
   as transform/opacity; wing beats are CSS transforms on the wings' own layers. Phone breakpoint only (max-width:768px);
   off entirely under prefers-reduced-motion. Desktop keeps assets/butterflies.js and is untouched by this file. */
@media (max-width:768px),(max-width:1024px) and (orientation:portrait){
  .lv{position:fixed;inset:0;z-index:40;pointer-events:none;overflow:hidden;contain:layout paint;opacity:0;transition:opacity 1.4s ease-out}
  .lv.on{opacity:1}
  .lv-defs{position:absolute;width:0;height:0;overflow:hidden}
  .lv-b,.lv-f,.lv-p{position:absolute;left:0;top:0;opacity:0;will-change:transform,opacity;backface-visibility:hidden}
  .lv-b svg,.lv-p{display:block;overflow:visible}
  /* butterfly: aura behind, two wings (each its own layer so the beat never repaints), body on top */
  .lv-b .lv-aura{position:absolute;left:-32%;top:-34%;width:164%;height:168%}
  .lv-b .lv-w{position:absolute;top:0;width:50%;height:100%;will-change:transform;backface-visibility:hidden}
  .lv-b .lv-wl{left:0;transform-origin:100% 50%;animation:lv-flap-l var(--wing,.9s) ease-in-out var(--wd,0s) infinite alternate}
  .lv-b .lv-wr{left:50%;transform-origin:0 50%;animation:lv-flap-r var(--wing,.9s) ease-in-out var(--wd,0s) infinite alternate}
  .lv-b .lv-body{position:absolute;left:0;top:0;width:100%;height:100%}
  .lv-b.rest .lv-w{animation-duration:calc(var(--wing,.9s)*2.8)}
  .lv-b.flee .lv-w{animation-duration:calc(var(--wing,.9s)*.55)}
  @keyframes lv-flap-l{from{transform:perspective(80px) rotateY(-8deg)}to{transform:perspective(80px) rotateY(66deg)}}
  @keyframes lv-flap-r{from{transform:perspective(80px) rotateY(8deg)}to{transform:perspective(80px) rotateY(-66deg)}}
  /* firefly: one warm point with its halo baked into the gradient; brightness and size come from JS opacity and scale */
  .lv-f{width:24px;height:24px;border-radius:50%;background:radial-gradient(circle at 50% 50%,#FFF8DC 0,#FFE9A8 12%,rgba(255,210,120,.78) 24%,rgba(255,180,80,.34) 42%,rgba(255,160,50,.08) 60%,rgba(255,160,50,0) 72%)}
  /* petal: gradient-filled teardrop, tumbled by JS */
  .lv-p{width:18px;height:26px}
  body.paused .lv-w{animation-play-state:paused}
}
@media (prefers-reduced-motion:reduce){.lv{display:none!important}}