/* Alweekend living chaos mascot visual planes.
 * The two planes are fixed, isolated, and never participate in page layout.
 */

:root {
  --aw-mascot-size: clamp(112px, 12vw, 224px);
  --aw-mascot-front-z: 44;
  --aw-mascot-behind-z: 3;
}

#awBrowse > .aw-mascot-plane--behind { --aw-mascot-plane-z: 6; }
#awBrowse > .aw-mascot-plane--front { --aw-mascot-plane-z: 44; }
#tv > .aw-mascot-plane--behind { --aw-mascot-plane-z: 3; }
#tv > .aw-mascot-plane--front { --aw-mascot-plane-z: 40; }

.aw-mascot-plane {
  position: fixed;
  z-index: var(--aw-mascot-plane-z, 3);
  inset: 0;
  width: 100vw;
  height: 100vh;
  margin: 0;
  padding: 0;
  overflow: hidden;
  contain: layout style;
  direction: ltr;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
}

.aw-mascot-plane--front { --aw-mascot-plane-z: var(--aw-mascot-front-z, 40); }
.aw-mascot-plane--behind { --aw-mascot-plane-z: var(--aw-mascot-behind-z, 3); }

.aw-mascot-actor {
  --aw-mascot-rotation: 0deg;
  --aw-mascot-scale: 1;
  --aw-mascot-facing: 1;
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  opacity: 0;
  transform: translate3d(-40vw, 50vh, 0);
  transform-origin: 0 0;
  pointer-events: none;
  will-change: transform, opacity;
}

.aw-mascot-actor.is-visible { opacity: 1; }

.aw-mascot-stage {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--aw-mascot-size);
  height: var(--aw-mascot-size);
  transform: translate(-50%, -50%) rotate(var(--aw-mascot-rotation)) scale(var(--aw-mascot-scale));
  transform-origin: 50% 58%;
  pointer-events: none;
  will-change: transform;
}

.aw-mascot-actor.is-interactive .aw-mascot-stage {
  pointer-events: auto;
  cursor: pointer;
  touch-action: manipulation;
}

.aw-mascot-shadow {
  position: absolute;
  z-index: 0;
  right: 13%;
  bottom: 1%;
  left: 13%;
  height: 23%;
  background-image: var(--aw-mascot-shadow-image, url('../../../assets/chaos-mascot/mascot-shadow.png'));
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  opacity: .55;
  transform: scaleX(.82);
  transform-origin: center;
}

.aw-mascot-rig {
  position: absolute;
  z-index: 2;
  inset: 0;
  transform-origin: 50% 75%;
  will-change: transform;
}

.aw-mascot-sprite {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background-image: var(--aw-mascot-atlas-image, url('../../../assets/chaos-mascot/mascot-motion-atlas.webp'));
  background-repeat: no-repeat;
  background-position: 0 0;
  background-size: 400% 400%;
  transform: scaleX(var(--aw-mascot-facing));
  transform-origin: center;
  will-change: transform, background-position;
}

.aw-mascot-actor[data-facing="left"] { --aw-mascot-facing: -1; }
.aw-mascot-actor[data-facing="right"] { --aw-mascot-facing: 1; }

.aw-mascot-actor[data-pose="flying"] .aw-mascot-shadow,
.aw-mascot-actor[data-pose="hovering"] .aw-mascot-shadow,
.aw-mascot-actor[data-pose="falling"] .aw-mascot-shadow,
.aw-mascot-actor[data-pose="hanging"] .aw-mascot-shadow,
.aw-mascot-actor[data-pose="peeking"] .aw-mascot-shadow { opacity: 0; }

.aw-mascot-actor[data-pose="sleeping"] .aw-mascot-shadow { opacity: .34; transform: scaleX(1.05); }

.aw-mascot-bubble {
  position: absolute;
  z-index: 8;
  right: 58%;
  bottom: 73%;
  /* The stage can be as small as the logo perch (~65px); max-content keeps
   * the bubble sized by its text, not by the tiny containing block. */
  width: max-content;
  min-width: 72px;
  max-width: min(190px, 42vw);
  padding: 9px 12px;
  border: 2px solid rgba(65, 23, 71, .72);
  border-radius: 17px 17px 6px 17px;
  background: #fff1da;
  box-shadow: 0 8px 22px rgba(0, 0, 0, .34);
  color: #24111f;
  direction: rtl;
  font: 800 clamp(11px, .85vw, 15px)/1.45 "Alexandria", "Baloo Bhaijaan 2", system-ui, sans-serif;
  text-align: center;
  opacity: 0;
  transform: translate3d(8px, 8px, 0) scale(.84);
  transform-origin: bottom right;
  visibility: hidden;
  pointer-events: none;
  will-change: transform, opacity;
}

.aw-mascot-bubble::after {
  content: "";
  position: absolute;
  right: 7px;
  bottom: -10px;
  width: 16px;
  height: 16px;
  border-right: 2px solid rgba(65, 23, 71, .72);
  border-bottom: 2px solid rgba(65, 23, 71, .72);
  background: #fff1da;
  transform: skewY(42deg) rotate(18deg);
}

.aw-mascot-bubble.is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
  visibility: visible;
}

.aw-mascot-bubble[data-side="right"] {
  right: auto;
  left: 58%;
  border-radius: 17px 17px 17px 6px;
  transform-origin: bottom left;
}

.aw-mascot-bubble[data-side="right"]::after {
  right: auto;
  left: 7px;
  transform: scaleX(-1) skewY(42deg) rotate(18deg);
}

/* Below-placement: used when the actor sits near the top edge (the logo
 * perch) where an above-bubble would clip outside the viewport. */
.aw-mascot-bubble.is-below {
  top: 96%;
  bottom: auto;
  border-radius: 6px 17px 17px 17px;
  transform-origin: top right;
}

.aw-mascot-bubble.is-below[data-side="right"] { border-radius: 17px 6px 17px 17px; transform-origin: top left; }

.aw-mascot-bubble.is-below::after {
  top: -10px;
  bottom: auto;
  transform: scaleY(-1) skewY(42deg) rotate(18deg);
}

.aw-mascot-bubble.is-below[data-side="right"]::after {
  transform: scale(-1, -1) skewY(42deg) rotate(18deg);
}

/* G2: second bubble slot — smaller aside, sits slightly lower than the main bubble.
 * data-side is forced opposite the main bubble by overlay.js. */
.aw-mascot-bubble.is-alt {
  z-index: 9;
  bottom: 56%;
  min-width: 54px;
  max-width: min(150px, 34vw);
  padding: 7px 10px;
  font-size: clamp(10px, .72vw, 13px);
}

/* G3 (reworked): the eye strip is close-up art, so it renders as a SMALL box
 * positioned over the sprite's eye region (geometry set inline per pose by
 * overlay.js EYE_BOXES; mirrored when facing left). The full-frame expression
 * composite is retired — .aw-mascot-face stays only so stale DOM from an old
 * session can't flash; overlay.js never shows it. */
.aw-mascot-face {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: none !important;
  pointer-events: none;
}

.aw-mascot-eyes {
  position: absolute;
  display: none;
  background-repeat: no-repeat;
  background-position: 0 0;
  background-size: 400% 200%;
  z-index: 4;
  pointer-events: none;
  transform: scaleX(var(--aw-mascot-facing));
  transform-origin: center;
  will-change: background-position;
}

.aw-mascot-eyes.is-visible { display: block; }

/* Low-mode caps: eye frame swaps are two background-position writes, cheap
 * enough for weak TVs — the life layer thins the cadence instead. */
.aw-mascot-plane[data-performance="low"] .aw-mascot-bubble.is-alt {
  max-width: 30vw;
  box-shadow: none;
}
.aw-mascot-plane[data-performance="low"] .aw-mascot-bubble.is-alt {
  max-width: 30vw;
  box-shadow: none;
}

.aw-mascot-particles {
  position: absolute;
  z-index: 7;
  top: 50%;
  left: 50%;
  width: 1px;
  height: 1px;
  overflow: visible;
  pointer-events: none;
}

.aw-mascot-particle {
  position: absolute;
  top: 0;
  left: 0;
  width: clamp(36px, 4.4vw, 80px);
  height: clamp(48px, 5.87vw, 107px);
  margin: clamp(-54px, -2.94vw, -24px) 0 0 clamp(-40px, -2.2vw, -18px);
  background-image: var(--aw-mascot-particles-image, url('../../../assets/chaos-mascot/mascot-particles.png'));
  background-repeat: no-repeat;
  background-size: 400% 200%;
  opacity: 0;
  will-change: transform, opacity;
}

.aw-mascot-actor.is-debug .aw-mascot-stage {
  outline: 2px dashed #5ff2ff;
  outline-offset: -2px;
}

.aw-mascot-actor.is-debug .aw-mascot-stage::after {
  content: attr(data-debug-label);
  position: absolute;
  top: 100%;
  left: 0;
  padding: 3px 6px;
  background: #051218;
  color: #8cf8ff;
  direction: ltr;
  font: 700 10px/1.2 ui-monospace, SFMono-Regular, Menlo, monospace;
  white-space: nowrap;
}

.aw-mascot-plane[data-performance="low"] .aw-mascot-shadow { display: none; }
.aw-mascot-plane[data-performance="low"] .aw-mascot-stage,
.aw-mascot-plane[data-performance="low"] .aw-mascot-rig,
.aw-mascot-plane[data-performance="low"] .aw-mascot-sprite { will-change: auto; }

/* Developer controls live outside the visual planes and can receive input. */
.aw-mascot-debug-toggle {
  position: fixed;
  z-index: 2147482500;
  left: 10px;
  bottom: 10px;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, .24);
  border-radius: 50%;
  background: rgba(16, 8, 21, .92);
  box-shadow: 0 8px 28px rgba(0, 0, 0, .45);
  color: #ffd25c;
  font: 900 19px/1 system-ui, sans-serif;
  cursor: pointer;
}

.aw-mascot-debug {
  position: fixed;
  z-index: 2147482499;
  left: 10px;
  bottom: 60px;
  width: min(330px, calc(100vw - 20px));
  max-height: min(720px, calc(100vh - 80px));
  overflow: auto;
  padding: 12px;
  border: 1px solid rgba(255, 216, 89, .4);
  border-radius: 13px;
  background: rgba(12, 7, 16, .96);
  box-shadow: 0 16px 56px rgba(0, 0, 0, .58);
  color: #f6f2f8;
  direction: ltr;
  font: 600 11px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace;
  text-align: left;
}

.aw-mascot-debug[hidden] { display: none !important; }
.aw-mascot-debug * { box-sizing: border-box; }
.aw-mascot-debug__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.aw-mascot-debug__head strong { color: #ffd25c; font-size: 12px; }
.aw-mascot-debug__state { color: #71f0cd; }
.aw-mascot-debug__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.aw-mascot-debug label { display: grid; gap: 3px; color: #aaa0b2; }
.aw-mascot-debug label.aw-mascot-debug__wide { grid-column: 1 / -1; }
.aw-mascot-debug select,
.aw-mascot-debug input[type="range"],
.aw-mascot-debug button {
  width: 100%;
  min-height: 30px;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 7px;
  background: #211727;
  color: #fff;
  font: inherit;
}
.aw-mascot-debug button { padding: 5px 8px; cursor: pointer; }
.aw-mascot-debug button:hover,
.aw-mascot-debug button:focus-visible { border-color: #ffd25c; outline: 0; }
.aw-mascot-debug__checks { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 8px; margin: 10px 0; }
.aw-mascot-debug__checks label { display: flex; align-items: center; gap: 6px; color: #ddd4e2; }
.aw-mascot-debug__metrics { margin: 10px 0 0; padding: 8px; border-radius: 8px; background: rgba(255, 255, 255, .05); color: #cfc6d4; white-space: pre-wrap; }
.aw-mascot-debug__history { margin: 7px 0 0; padding: 0; list-style: none; color: #8f8498; }
.aw-mascot-debug__history li { overflow: hidden; padding: 3px 0; border-top: 1px solid rgba(255, 255, 255, .07); text-overflow: ellipsis; white-space: nowrap; }

@media (max-width: 700px) {
  :root { --aw-mascot-size: clamp(96px, 28vw, 152px); }
  .aw-mascot-bubble { max-width: 43vw; padding: 7px 9px; }
}

@media (prefers-reduced-motion: reduce) {
  .aw-mascot-actor,
  .aw-mascot-stage,
  .aw-mascot-rig,
  .aw-mascot-sprite,
  .aw-mascot-bubble,
  .aw-mascot-particle {
    scroll-behavior: auto !important;
    transition-duration: .001ms !important;
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
  }
}