/*
 * Themis Archives — Ambient FX
 * Livello scenico leggero: luce, polvere, Helium e micro-eventi.
 */
.scene__stage{
  --ambient-x:0px;
  --ambient-y:0px;
}

#scenePicture{
  display:block;
  width:100%;
  height:100%;
  transform:none;
  transform-origin:center;
  transition:transform 1.1s cubic-bezier(.2,.75,.2,1);
  will-change:auto;
}

.ambient-fx{
  position:absolute;
  inset:0;
  z-index:2;
  overflow:hidden;
  pointer-events:none;
  transform:none;
  transition:transform 1.1s cubic-bezier(.2,.75,.2,1),opacity .45s ease;
  contain:layout paint style;
}

.scene.is-changing .ambient-fx{opacity:0}
.hotspots{z-index:3}
body.codex-page-open .ambient-fx *{animation-play-state:paused!important}

.ambient-fx__canvas,
.ambient-fx__lights,
.ambient-fx__room,
.ambient-fx__events{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
}

.ambient-fx__canvas{opacity:.78}

.ambient-candle{
  position:absolute;
  left:var(--x);
  top:var(--y);
  width:var(--size,15%);
  aspect-ratio:1;
  transform:translate(-50%,-50%);
  border-radius:50%;
  opacity:.42;
  background:radial-gradient(circle,
    rgba(255,238,177,.34) 0 3%,
    rgba(255,183,75,.23) 7%,
    rgba(232,116,28,.11) 26%,
    transparent 68%);
  mix-blend-mode:screen;
  filter:blur(2px);
  animation:ambient-candle-flicker var(--speed,2.7s) steps(7,end) infinite;
}

.ambient-candle::after{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:7%;
  height:13%;
  border-radius:55% 55% 45% 45%;
  transform:translate(-50%,-62%);
  background:#fff2bc;
  box-shadow:0 0 8px #ffc462,0 0 20px rgba(255,145,40,.76);
  animation:ambient-flame-dance calc(var(--speed,2.7s) * .62) ease-in-out infinite alternate;
}

@keyframes ambient-candle-flicker{
  0%,100%{opacity:.34;transform:translate(-50%,-50%) scale(.96)}
  17%{opacity:.52;transform:translate(-50%,-50%) scale(1.04,.98)}
  36%{opacity:.39;transform:translate(-50%,-50%) scale(.98,1.03)}
  58%{opacity:.57;transform:translate(-50%,-50%) scale(1.06)}
  81%{opacity:.42;transform:translate(-50%,-50%) scale(.97,1.02)}
}

@keyframes ambient-flame-dance{
  from{transform:translate(-55%,-64%) rotate(-4deg) scale(.9,1.08)}
  to{transform:translate(-43%,-58%) rotate(5deg) scale(1.08,.92)}
}

.ambient-helium{
  position:absolute;
  left:var(--x);
  top:var(--y);
  width:var(--w,20%);
  height:var(--h,25%);
  transform:translate(-50%,-50%);
  border-radius:48%;
  opacity:.28;
  background:radial-gradient(ellipse,
    rgba(226,205,255,.18) 0 5%,
    rgba(151,92,255,.23) 14%,
    rgba(104,48,224,.12) 38%,
    transparent 72%);
  mix-blend-mode:screen;
  filter:blur(1px);
  animation:ambient-helium-breathe var(--speed,5.4s) ease-in-out infinite;
}

.ambient-helium::after{
  content:"";
  position:absolute;
  inset:18%;
  border:1px solid rgba(205,171,255,.15);
  border-radius:50%;
  filter:blur(2px);
  animation:ambient-helium-ring 4.8s ease-out infinite;
}

@keyframes ambient-helium-breathe{
  0%,100%{opacity:.18;transform:translate(-50%,-50%) scale(.92);filter:blur(2px)}
  48%{opacity:.42;transform:translate(-50%,-50%) scale(1.08);filter:blur(.5px)}
  62%{opacity:.31;transform:translate(-50%,-50%) scale(1)}
}

@keyframes ambient-helium-ring{
  0%{opacity:0;transform:scale(.5)}
  28%{opacity:.52}
  100%{opacity:0;transform:scale(1.45)}
}

.ambient-banner{
  position:absolute;
  left:var(--x);
  top:var(--y);
  width:var(--w);
  height:var(--h);
  transform:translate(-50%,-50%) perspective(500px) rotateY(0deg);
  transform-origin:50% 0;
  clip-path:polygon(2% 0,98% 0,96% 87%,50% 100%,4% 87%);
  overflow:hidden;
  opacity:1;
  background:#160d0b;
  filter:drop-shadow(0 4px 5px rgba(0,0,0,.38));
  animation:ambient-banner-sway 6.8s ease-in-out infinite;
}

.ambient-banner img{
  position:absolute!important;
  width:var(--scene-w)!important;
  height:var(--scene-h)!important;
  max-width:none!important;
  max-height:none!important;
  left:var(--scene-left)!important;
  top:var(--scene-top)!important;
  object-fit:fill!important;
  transform:none!important;
  transition:none!important;
}

.ambient-banner::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(94deg,rgba(0,0,0,.18),transparent 28%,rgba(255,220,153,.13) 48%,transparent 70%,rgba(0,0,0,.16));
  mix-blend-mode:soft-light;
  animation:ambient-banner-light 6.8s ease-in-out infinite;
}

@keyframes ambient-banner-sway{
  0%,100%{transform:translate(-50%,-50%) perspective(500px) rotateY(-2.6deg) skewX(-.45deg) translateX(-.3%)}
  48%{transform:translate(-50%,-50%) perspective(500px) rotateY(2.8deg) skewX(.55deg) translateX(.45%)}
  72%{transform:translate(-50%,-50%) perspective(500px) rotateY(.8deg) skewX(-.25deg) translateX(.15%)}
}

@keyframes ambient-banner-light{
  0%,100%{transform:translateX(-8%);opacity:.55}
  50%{transform:translateX(8%);opacity:.9}
}

.ambient-paper-corner{
  position:absolute;
  left:var(--x);
  top:var(--y);
  width:var(--w,3.2%);
  aspect-ratio:1.35;
  transform-origin:0 100%;
  clip-path:polygon(0 100%,100% 0,100% 100%);
  background:linear-gradient(135deg,transparent 34%,rgba(240,220,179,.16) 46%,rgba(48,31,16,.34) 53%,transparent 70%);
  mix-blend-mode:screen;
  opacity:.44;
  animation:ambient-page-lift 6.8s ease-in-out infinite;
}

@keyframes ambient-page-lift{
  0%,72%,100%{transform:rotate(0deg) scaleY(.72);opacity:.22}
  82%{transform:rotate(-5deg) scaleY(1.08);opacity:.58}
  91%{transform:rotate(2deg) scaleY(.9);opacity:.35}
}

.ambient-ripple{
  position:absolute;
  left:var(--x);
  top:var(--y);
  width:var(--w);
  height:var(--h);
  transform:translate(-50%,-50%) perspective(260px) rotateX(64deg);
  border:2px solid rgba(191,159,255,.52);
  border-radius:50%;
  opacity:0;
  box-shadow:0 0 9px rgba(128,74,239,.28);
  animation:ambient-ripple 5.8s ease-out infinite;
}

.ambient-ripple::after{
  content:"";
  position:absolute;
  inset:24%;
  border:1px solid rgba(211,193,255,.28);
  border-radius:50%;
}

@keyframes ambient-ripple{
  0%,8%{opacity:0;transform:translate(-50%,-50%) perspective(260px) rotateX(64deg) scale(.2)}
  18%{opacity:.78}
  74%,100%{opacity:0;transform:translate(-50%,-50%) perspective(260px) rotateX(64deg) scale(1.18)}
}

.ambient-smoke{
  position:absolute;
  left:var(--x);
  top:var(--y);
  width:var(--w);
  height:var(--h);
  transform:translate(-50%,-50%);
  opacity:.48;
  filter:blur(3px);
  mix-blend-mode:screen;
  background:
    radial-gradient(ellipse at 54% 78%,rgba(186,118,244,.42),transparent 26%),
    radial-gradient(ellipse at 37% 53%,rgba(151,91,218,.3),transparent 32%),
    radial-gradient(ellipse at 64% 30%,rgba(205,161,255,.24),transparent 30%);
  animation:ambient-smoke-rise 5.8s ease-in-out infinite;
}

@keyframes ambient-smoke-rise{
  0%,100%{opacity:.28;transform:translate(-50%,-43%) scale(.82) rotate(-2deg)}
  48%{opacity:.62;transform:translate(-48%,-58%) scale(1.08,1.2) rotate(3deg)}
  76%{opacity:.4;transform:translate(-52%,-64%) scale(.94,1.28) rotate(-1deg)}
}

.ambient-bubbles{
  position:absolute;
  left:var(--x);
  top:var(--y);
  width:var(--w);
  height:var(--h);
  transform:translate(-50%,-50%);
}

.ambient-bubbles i{
  position:absolute;
  left:var(--bx);
  bottom:3%;
  width:var(--s);
  aspect-ratio:1;
  border:1px solid rgba(230,204,255,.82);
  border-radius:50%;
  opacity:0;
  background:radial-gradient(circle at 32% 28%,rgba(255,255,255,.72) 0 8%,rgba(171,102,237,.2) 18%,transparent 62%);
  box-shadow:inset 1px 1px rgba(255,255,255,.42),0 0 8px rgba(166,91,239,.55);
  animation:ambient-bubble-rise var(--d) ease-in infinite;
  animation-delay:var(--delay);
}

@keyframes ambient-bubble-rise{
  0%{opacity:0;transform:translate(0,0) scale(.55)}
  18%{opacity:.62}
  76%{opacity:.26}
  100%{opacity:0;transform:translate(var(--drift),-620%) scale(1.12)}
}

.ambient-symbols{
  position:absolute;
  left:var(--x);
  top:var(--y);
  width:var(--w);
  height:var(--h);
  transform:translate(-50%,-50%);
  opacity:.24;
  border-radius:10%;
  background:
    radial-gradient(circle at 25% 25%,rgba(221,173,83,.34),transparent 19%),
    radial-gradient(circle at 75% 25%,rgba(221,173,83,.28),transparent 19%),
    radial-gradient(circle at 25% 75%,rgba(221,173,83,.28),transparent 19%),
    radial-gradient(circle at 75% 75%,rgba(221,173,83,.34),transparent 19%);
  mix-blend-mode:screen;
  animation:ambient-symbols-rest 9s ease-in-out infinite;
  transition:opacity .35s,filter .35s;
}

.ambient-fx[data-active="factions"] .ambient-symbols{
  opacity:.72;
  filter:drop-shadow(0 0 8px rgba(229,183,92,.55));
}

@keyframes ambient-symbols-rest{
  0%,100%{opacity:.16;filter:brightness(.95)}
  50%{opacity:.34;filter:brightness(1.2)}
}

.ambient-stele{
  position:absolute;
  left:var(--x);
  top:var(--y);
  width:var(--w);
  height:var(--h);
  transform:translate(-50%,-50%);
  opacity:.14;
  border-radius:45% 45% 16% 16%;
  background:radial-gradient(ellipse,rgba(123,73,239,.24),transparent 63%);
  mix-blend-mode:screen;
  animation:ambient-stele-pulse 7.8s ease-in-out infinite;
}

.ambient-fx[data-active="scale"] .ambient-stele{opacity:.45;filter:brightness(1.45)}

@keyframes ambient-stele-pulse{
  0%,100%{opacity:.09;filter:brightness(.9)}
  52%{opacity:.25;filter:brightness(1.25)}
}

.ambient-eyes{
  position:absolute;
  left:var(--x);
  top:var(--y);
  width:var(--w);
  height:var(--h);
  transform:translate(-50%,-50%);
}

.ambient-eyes::before,
.ambient-eyes::after{
  content:"";
  position:absolute;
  top:46%;
  width:8%;
  aspect-ratio:1.7;
  border-radius:50%;
  background:#d5b8ff;
  opacity:.5;
  box-shadow:0 0 5px #ad74ff,0 0 13px rgba(127,64,237,.8);
  animation:ambient-eye-watch 10.5s ease-in-out infinite;
}
.ambient-eyes::before{left:31%}
.ambient-eyes::after{right:31%}
.ambient-fx[data-active="beasts"] .ambient-eyes::before,
.ambient-fx[data-active="beasts"] .ambient-eyes::after{opacity:.85}

@keyframes ambient-eye-watch{
  0%,42%,46%,100%{transform:scaleY(1);opacity:.42}
  44%{transform:scaleY(.08);opacity:.05}
  70%{opacity:.78}
}

.ambient-focus{
  position:absolute;
  left:var(--x,50%);
  top:var(--y,50%);
  width:var(--w,22%);
  aspect-ratio:1;
  transform:translate(-50%,-50%) scale(.75);
  border-radius:50%;
  opacity:0;
  background:radial-gradient(circle,rgba(237,200,121,.22),rgba(191,126,49,.09) 35%,transparent 70%);
  mix-blend-mode:screen;
  transition:opacity .35s,transform .45s;
}

.ambient-fx.is-object-active .ambient-focus{
  opacity:.72;
  transform:translate(-50%,-50%) scale(1);
}

.ambient-shadow{
  position:absolute;
  left:-28%;
  top:4%;
  width:28%;
  height:86%;
  opacity:0;
  transform:skewX(-12deg);
  background:radial-gradient(ellipse at 50% 22%,rgba(0,0,0,.72) 0 15%,transparent 18%),linear-gradient(90deg,transparent,rgba(0,0,0,.7),rgba(0,0,0,.38),transparent);
  filter:blur(7px);
  mix-blend-mode:normal;
}

.ambient-shadow.is-crossing{animation:ambient-shadow-cross 5.8s ease-in-out}
@keyframes ambient-shadow-cross{
  0%{left:-28%;opacity:0}
  14%{opacity:.72}
  72%{opacity:.45}
  100%{left:112%;opacity:0}
}

.ambient-fall{
  position:absolute;
  left:var(--x);
  top:var(--y);
  width:var(--w,22px);
  height:var(--h,30px);
  opacity:0;
  transform:translate(-50%,-50%);
  transform-origin:center;
}

.ambient-fall--paper{
  border-radius:2px;
  background:linear-gradient(145deg,#d1b98a,#8b6f43);
  box-shadow:0 2px 5px rgba(0,0,0,.5);
}

.ambient-fall--feather{
  width:7px;
  height:34px;
  border-radius:100% 0;
  background:linear-gradient(90deg,#c7baa0,#6e6251);
}

.ambient-fall--piece{
  width:11px;
  height:20px;
  border-radius:45% 45% 24% 24%;
  background:linear-gradient(90deg,#150f0a,#61401e 45%,#100b07);
  box-shadow:0 2px 4px #000;
}

.ambient-fall.is-falling{
  animation:ambient-object-fall var(--duration,4.5s) cubic-bezier(.34,.02,.72,.98) forwards;
}

@keyframes ambient-object-fall{
  0%{opacity:0;transform:translate(-50%,-50%) rotate(0deg) scale(.85)}
  8%{opacity:.86}
  58%{opacity:.82;transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy))) rotate(var(--spin)) scale(1)}
  76%{opacity:.75;transform:translate(calc(-50% + var(--dx2)),calc(-50% + var(--dy2))) rotate(var(--spin2)) scale(.95)}
  100%{opacity:0;transform:translate(calc(-50% + var(--dx3)),calc(-50% + var(--dy3))) rotate(var(--spin3)) scale(.9)}
}

.ambient-insect{
  position:absolute;
  left:0;
  top:0;
  width:7px;
  height:4px;
  opacity:0;
  border-radius:50%;
  background:#100c09;
  box-shadow:0 0 2px rgba(255,220,155,.32);
  transform:translate(-30px,-30px);
}

.ambient-insect::before,
.ambient-insect::after{
  content:"";
  position:absolute;
  top:-3px;
  width:5px;
  height:4px;
  border-radius:80% 20%;
  border:1px solid rgba(211,195,163,.5);
  background:rgba(177,161,134,.14);
}
.ambient-insect::before{left:-3px;transform:rotate(-32deg)}
.ambient-insect::after{right:-3px;transform:scaleX(-1) rotate(-32deg)}
.ambient-insect.is-flying{opacity:.8}

.ambient-fx[data-quality="low"] .ambient-banner,
.ambient-fx[data-quality="low"] .ambient-paper-corner{animation-duration:11s}
.ambient-fx[data-quality="low"] .ambient-candle:nth-child(n+3){display:none}

@media(max-width:699px) and (orientation:portrait){
  #scenePicture{transform:translate3d(0,0,0) scale(1)}
  .ambient-fx{transform:none}
  .ambient-candle{filter:blur(1px)}
  .ambient-fx__canvas{opacity:.58}
  .ambient-shadow{display:none}
}

@media(prefers-reduced-motion:reduce){
  #scenePicture,.ambient-fx{transform:none!important;transition:none!important}
  .ambient-fx__canvas,.ambient-insect,.ambient-fall,.ambient-shadow,
  .ambient-banner,.ambient-paper-corner,.ambient-ripple,.ambient-smoke,
  .ambient-bubbles{display:none!important}
  .ambient-candle,.ambient-helium,.ambient-symbols,.ambient-stele,
  .ambient-eyes::before,.ambient-eyes::after{animation:none!important}
}