/* THE ROOM · 1103a · AWE — two moves, no new clutter
   1 · QUIET AT REST: the room holds its breath. Embers drop low, the lounge dims, the lit seats breathe slow.
       Nothing shouts until someone speaks.
   2 · THE EVENT: a seat speaks → one band of light crosses the whole room in that voice's colour, the embers
       surge, then it all settles back to the held breath. Motion becomes an event, not wallpaper.
   3 · THE ENTRANCE: the Tower goes to black and the Room rises out of it — one 900ms dissolve, one bloom of
       light from the centre, and nothing else moving while it lands. The one hero beat. */

:root { --awe-c: #eaf0ff; }

/* smooth levers so every state change eases instead of snaps */
#embers { transition: opacity 1.1s ease; }
#lounge { transition: opacity 1s ease; }

/* ------------------------------------------------ 1 · QUIET AT REST */
body.in:not(.awe-live):not(.awe-enter) #embers { opacity: .26; }
body.in:not(.awe-live):not(.awe-enter) #lounge  { opacity: .7; }
/* the lit seats stay alive but calm — slower breath, softer halo — until one of them is the one talking */
body.in:not(.awe-live):not(.awe-enter) .seat.in:not(.typing) .av img {
  animation-duration: 6.4s;
  box-shadow: 0 0 9px var(--c), 0 0 20px color-mix(in srgb, var(--c) 28%, transparent);
}
body.in:not(.awe-live):not(.awe-enter) .seat.in:not(.typing) .av::before { opacity: .4; }

/* ------------------------------------------------ 2 · THE EVENT: light moves when a voice speaks */
body.awe-live #embers { opacity: 1; }
body.awe-live #lounge { opacity: 1; }

/* one band of light crosses the room, left to right, in the speaker's colour */
#awe-sweep {
  position: fixed; inset: 0; z-index: 2; pointer-events: none; opacity: 0; mix-blend-mode: screen;
  background: linear-gradient(104deg, transparent 36%, color-mix(in srgb, var(--awe-c) 34%, transparent) 45%, var(--awe-c) 50%, color-mix(in srgb, var(--awe-c) 34%, transparent) 55%, transparent 64%);
  background-size: 220% 100%; background-position: 150% 0;
}
#awe-sweep.go { animation: aweSweep 1.35s cubic-bezier(.33, 0, .18, 1); }
@keyframes aweSweep {
  0%   { background-position: 150% 0; opacity: 0; }
  14%  { opacity: .85; }
  80%  { opacity: .5; }
  100% { background-position: -60% 0; opacity: 0; }
}

/* ------------------------------------------------ 3 · THE ENTRANCE */
/* the curtain: the tower goes to black, the room rises out of it */
#awe-gate { position: fixed; inset: 0; background: #050506; z-index: 60; opacity: 0; pointer-events: none; }

/* the hero burst: light opens from the centre of the room — two veils of god-rays turning against each other
   (the moiré shimmers as they cross), three shockwave rings rolling out one after another, and a white-hot core.
   Slow, layered, never all at once: the eye keeps finding something new in it. */
#awe-bloom { position: fixed; inset: 0; z-index: 1; pointer-events: none; mix-blend-mode: screen; overflow: hidden; }
#awe-bloom > i { position: absolute; display: block; opacity: 0; }
#awe-bloom .ray {
  inset: -40%; transform-origin: 50% 47%;
  -webkit-mask: radial-gradient(circle at 50% 47%, #000 0, #000 8%, rgba(0,0,0,.55) 24%, transparent 46%);
          mask: radial-gradient(circle at 50% 47%, #000 0, #000 8%, rgba(0,0,0,.55) 24%, transparent 46%);
}
#awe-bloom .ray.a { background: repeating-conic-gradient(from 0deg at 50% 47%, color-mix(in srgb, var(--awe-c) 70%, transparent) 0deg 1.6deg, transparent 1.6deg 9deg); }
#awe-bloom .ray.b { background: repeating-conic-gradient(from 4deg at 50% 47%, color-mix(in srgb, var(--awe-c) 45%, transparent) 0deg 3deg, transparent 3deg 17deg); }
#awe-bloom .ring {
  left: 50%; top: 44%; width: 36vmin; height: 36vmin; margin: -18vmin 0 0 -18vmin; border-radius: 50%;
  border: 1.5px solid var(--awe-c);
  box-shadow: 0 0 18px var(--awe-c), inset 0 0 18px color-mix(in srgb, var(--awe-c) 60%, transparent);
}
#awe-bloom .core {
  left: 50%; top: 44%; width: 60vmin; height: 60vmin; margin: -30vmin 0 0 -30vmin; border-radius: 50%;
  background: radial-gradient(circle, #fff 0, var(--awe-c) 12%, color-mix(in srgb, var(--awe-c) 25%, transparent) 34%, transparent 66%);
}
#awe-bloom.go .ray.a { animation: aweRayA 3.2s cubic-bezier(.22, .61, .36, 1) both; }
#awe-bloom.go .ray.b { animation: aweRayB 3.2s cubic-bezier(.22, .61, .36, 1) both; }
#awe-bloom.go .ring  { animation: aweRing 2.4s cubic-bezier(.16, .84, .3, 1) both; }
#awe-bloom.go .ring.r2 { animation-delay: .38s; }
#awe-bloom.go .ring.r3 { animation-delay: .76s; }
#awe-bloom.go .core  { animation: aweCore 1.9s cubic-bezier(.22, .61, .36, 1) both; }
/* a voice speaking gets the same burst, gentler */
#awe-bloom.soft > i { --pk: .55; }
@keyframes aweRayA {
  0%   { opacity: 0; transform: rotate(-14deg) scale(.55); }
  18%  { opacity: calc(.75 * var(--pk, 1)); }
  60%  { opacity: calc(.5 * var(--pk, 1)); }
  100% { opacity: 0; transform: rotate(22deg) scale(1.18); }
}
@keyframes aweRayB {
  0%   { opacity: 0; transform: rotate(16deg) scale(.5); }
  24%  { opacity: calc(.6 * var(--pk, 1)); }
  65%  { opacity: calc(.38 * var(--pk, 1)); }
  100% { opacity: 0; transform: rotate(-26deg) scale(1.25); }
}
@keyframes aweRing {
  0%   { opacity: 0; transform: scale(.08); }
  10%  { opacity: calc(.9 * var(--pk, 1)); }
  100% { opacity: 0; transform: scale(3.4); border-width: .5px; }
}
@keyframes aweCore {
  0%   { opacity: 0; transform: scale(.15); }
  14%  { opacity: calc(.85 * var(--pk, 1)); }
  45%  { opacity: calc(.35 * var(--pk, 1)); transform: scale(1); }
  100% { opacity: 0; transform: scale(1.4); }
}

/* while the entrance lands, hold everything else dead still — nothing fights the dissolve */
body.awe-enter #embers { opacity: 0 !important; }
body.awe-enter #lounge,
body.awe-enter .lg-seat,
body.awe-enter .lg-seat::after,
body.awe-enter .lg-gsheen,
body.awe-enter .lg-plate.lit,
body.awe-enter .seat .av img,
body.awe-enter .seat .av::before { animation-play-state: paused !important; }

/* ------------------------------------------------ reduced motion: keep the calm, drop the show */
@media (prefers-reduced-motion: reduce) {
  #awe-sweep, #awe-bloom { display: none !important; }
}

/* ------------------------------------------------ 4 · THE ORBS (1103c): a sphere of light behind each NFT that lives on the rhythm
   of that voice. Dark at rest. When the person speaks or types it pulses: on the music's beat when a song is playing, and on the
   cadence of their own words when it isn't (your voice through the mic, your keystrokes, Claude's and Grok's words as they land).
   A strong beat throws a ring off the seat. --e (0..1+) is the live energy, set every frame by awe-1103a.js. */
.seat .av .awe-orb {
  position: absolute; inset: -24px; border-radius: 50%; pointer-events: none; mix-blend-mode: screen;
  background: radial-gradient(circle, color-mix(in srgb, var(--c) 70%, #fff) 0, var(--c) 30%, color-mix(in srgb, var(--c) 45%, transparent) 46%, color-mix(in srgb, var(--c) 14%, transparent) 60%, transparent 71%);
  opacity: min(1, calc(var(--e, 0) * 1.25)); transform: scale(calc(.7 + var(--e, 0) * .5));
}
.seat .av .awe-orb b {
  position: absolute; inset: 15px; border-radius: 50%; border: 2px solid color-mix(in srgb, var(--c) 60%, #fff);
  box-shadow: 0 0 14px var(--c), 0 0 4px #fff, inset 0 0 12px var(--c);
  opacity: min(1, calc(var(--e, 0) * 1.4)); transform: scale(calc(.94 + var(--e, 0) * .22));
}
.seat .av .awe-rip {
  position: absolute; inset: -3px; border-radius: 50%; pointer-events: none; border: 1.5px solid var(--c);
  box-shadow: 0 0 10px var(--c); animation: aweRip .95s cubic-bezier(.16, .84, .3, 1) forwards;
}
@keyframes aweRip { from { opacity: .85; transform: scale(1); } to { opacity: 0; transform: scale(2.4); border-width: .5px; } }
/* while a voice talks, the NFT itself flares on the rhythm (the seat's own slow breath steps aside for it) */
.seat.awe-talk .av img {
  animation: none !important;
  filter: brightness(calc(1 + var(--e, 0) * .38)) saturate(calc(1 + var(--e, 0) * .3)) !important;
  box-shadow: 0 0 calc(8px + var(--e, 0) * 26px) var(--c), 0 0 calc(16px + var(--e, 0) * 60px) color-mix(in srgb, var(--c) 55%, transparent) !important;
}
@media (prefers-reduced-motion: reduce) { .seat .av .awe-rip { display: none; } }