/* L2.5 — The Party. Visual effects driven by `body.party-*` classes
   set from js/story/party.js. */

/* ---------- Pulse the Start button when expecting a log-off action ----------
   Used by the Act 1 → party bridge so the player knows where to click. */
body.expect-logoff #start-button {
  animation: startBtnPulse 1.3s ease-in-out infinite;
}
@keyframes startBtnPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 230, 0, 0); }
  50%      { box-shadow: 0 0 16px 4px rgba(255, 230, 0, 0.85); }
}

/* ---------- Buddy's interior voice + log-off bridge ---------- */
/* Same translucent-black background as every other diegetic overlay —
   the only difference is the italic serif treatment to signal "thought,
   not spoken." Speaker color, font sizing, and bg opacity inherit from
   the base .overlay-sub rule below so everything looks consistent. */
.overlay-sub.buddy-interior {
  font-family: Georgia, 'Times New Roman', serif !important;
  font-style: italic;
}

/* Fullscreen Win 2000 "Logging off..." panel. */
#buddy-logoff-panel {
  position: fixed; inset: 0; z-index: 99500;
  background: #000;
  opacity: 0; transition: opacity 0.8s ease, background 0.9s ease;
  display: flex; align-items: center; justify-content: center;
}
#buddy-logoff-panel.in { opacity: 1; }
#buddy-logoff-panel.fading { opacity: 0; }
#buddy-logoff-panel .bl-shell {
  width: 100%; height: 100%;
  background:
    radial-gradient(ellipse at 30% 30%, rgba(120,170,200,0.18) 0%, transparent 60%),
    linear-gradient(180deg, #1d4368 0%, #0c2240 100%);
  display: flex; align-items: center; justify-content: center;
}
#buddy-logoff-panel .bl-card {
  background: #c0c0c0;
  color: #000;
  font-family: Tahoma, sans-serif;
  width: 360px;
  border: 2px solid #fff;
  border-right-color: #404040;
  border-bottom-color: #404040;
  box-shadow: 0 4px 28px rgba(0,0,0,0.7);
  padding: 14px 16px;
  text-align: center;
}
#buddy-logoff-panel .bl-title {
  font-size: 16px; font-weight: bold; color: #000;
  margin-bottom: 10px;
}
#buddy-logoff-panel .bl-spinner {
  margin: 10px 0;
  border: 1px inset #888;
  background: #fff;
  height: 16px; overflow: hidden;
  position: relative;
}
#buddy-logoff-panel .bl-bar {
  position: absolute; top: 0; left: 0; bottom: 0;
  width: 30%;
  background: linear-gradient(90deg, #3a6ea5 0%, #6b9ccd 100%);
  animation: blProgress 1.4s ease-in-out infinite;
}
@keyframes blProgress {
  0%   { left: -30%; }
  100% { left: 100%; }
}
#buddy-logoff-panel .bl-sub {
  font-size: 11px; color: #444;
}

/* ---------- Diegetic overlay subtitles ---------- */
/* Container is just a non-positioned layer; each subtitle positions itself
   absolutely based on its speaker's "zone" (see overlay.js). */
#overlay-subtitles {
  position: fixed;
  inset: 0;
  z-index: 9000;
  pointer-events: none;
}
.overlay-sub {
  position: absolute;
  background: rgba(0, 0, 0, 0.78);
  color: #fff;
  padding: 12px 22px;
  font-family: Tahoma, Geneva, sans-serif;
  font-size: 28px;
  font-weight: 500;
  line-height: 1.2;
  max-width: 540px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.75);
  opacity: 0;
  transform: translateY(0);
  transition: opacity 0.5s ease, transform 0.5s ease;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
}
.overlay-sub.in  { opacity: 1; }
.overlay-sub.out { opacity: 0; }
.overlay-sub .who {
  display: block;
  color: #ffe600;
  font-weight: bold;
  margin-bottom: 4px;
  text-transform: uppercase;
  font-size: 16px;
  letter-spacing: 1px;
}
.overlay-sub .line { display: block; }
.overlay-sub.clickable {
  pointer-events: auto;
  cursor: pointer;
  background: rgba(0, 0, 0, 0.88);
  border-color: rgba(255, 230, 0, 0.5);
  animation: choicePulse 2s ease-in-out infinite;
}
.overlay-sub.clickable:hover {
  background: rgba(25, 25, 25, 0.97);
  border-color: #ffe600;
}
.overlay-sub.choice .line { font-style: italic; }
.overlay-sub.fade-quiet {
  background: transparent;
  border: none;
  box-shadow: none;
  color: #999;
  font-size: 56px;
  letter-spacing: 12px;
  text-shadow: none;
}
@keyframes choicePulse {
  0%, 100% { box-shadow: 0 2px 14px rgba(255, 230, 0, 0.15); }
  50%      { box-shadow: 0 2px 24px rgba(255, 230, 0, 0.45); }
}

/* ---------- Stage: transition (opening cinematic uses #party-fader) ---------- */
/* The fader element handles its own transition; body class is mostly a hook. */

/* ---------- Wobble (constant from arrive through volume_system) ---------- */
/* Subtle drift+rotation that conveys "you're not steady". Same animation
   on every sub-stage from arrival onward — browser keeps the loop running
   across body-class swaps because the animation shorthand is identical. */
/* NOTE: transform on <body> would establish a new containing block for
   position:fixed children, which collapses the bezel/laptop frame.
   Apply the wobble to #desktop instead — same visual effect, no
   containing-block side effect. */
body.party-arrive #desktop,
body.party-haze #desktop,
body.party-louder #desktop,
body.party-system #desktop {
  animation: partyWobble 7s ease-in-out infinite;
  transform-origin: 50% 50%;
}
@keyframes partyWobble {
  0%   { transform: translate(0, 0)         rotate(0); }
  20%  { transform: translate(-2px, 1px)    rotate(-0.32deg); }
  40%  { transform: translate(1.4px, -2px)  rotate(0.22deg); }
  60%  { transform: translate(2px, 1.2px)   rotate(-0.14deg); }
  80%  { transform: translate(-1.4px, -1px) rotate(0.18deg); }
  100% { transform: translate(0, 0)         rotate(0); }
}

/* ---------- Party wallpaper ---------- */
/* The party laptop is "different from the home one" — so its wallpaper is
   on every layer that ever shows a background: boot, login, desktop. The
   `html.at-party` class is set synchronously at page-load by an inline
   script in index.html, so there's no flash of the home beach wallpaper
   before the party CSS kicks in. */
html.at-party .boot-screen,
html.at-party .login-bg,
html.at-party #desktop {
  background: #000 url("../assets/wallpaper/party.jpg") center/cover no-repeat !important;
}
/* Buddy's laptop login backdrop — use his actual wallpaper (it's HIS
   laptop), with a dim overlay so the Win 2000 dialog stays readable. */
#party-login-screen .su-bg {
  background:
    radial-gradient(ellipse at 50% 60%, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0.6) 100%),
    url("../assets/wallpaper/party.jpg") center/cover no-repeat !important;
}
/* The laptop screen feels a little cheaper than the family desktop —
   slightly desaturated, a subtle vignette, and BLACK SIDEBARS that
   visually shrink the usable viewport (laptop screen is smaller than
   the home monitor). Just enough to read "this isn't the home computer." */
/* NOTE: filter / transform on body would create a new containing block
   for position:fixed descendants and collapse the laptop frame. We move
   the "cheap laptop" color shift onto #desktop instead so the at-party
   bezels/insets keep referencing the viewport. */
html.at-party #desktop {
  filter: saturate(0.94) contrast(0.97) hue-rotate(-8deg) brightness(0.9);
}
/* The laptop screen is smaller than the home monitor AND it's 4:3.
   Constrain every full-screen layer (desktop, taskbar, boot, login,
   overlays, logoff panel, party login) to a centered 4:3 box sized
   ~78% of viewport height. Black html background shows around as
   real bezel bars on all four sides. */
/* (Laptop letterbox / 4:3 framing removed — at-party uses the full
   viewport. The party-only differentiation is the wallpaper.) */
body.party-arrive #desktop,
body.party-haze #desktop,
body.party-louder #desktop,
body.party-system #desktop {
  background: #000 url("../assets/wallpaper/party.jpg") center/cover no-repeat !important;
}

/* ---------- Stage: arrive ---------- */
/* We've just appeared at Kyle's. Subtle dim + a little hue shift on the
   desktop to suggest "different place / different time of day".
   The wobble (above) is already running. The haze color/blur effects
   only kick in once music starts (party-haze and beyond). */
body.party-arrive #desktop {
  filter: brightness(0.74) saturate(0.9) hue-rotate(-8deg);
  transition: filter 1.5s ease;
}

/* ---------- Stage: haze (high) ---------- */
body.party-haze #desktop {
  transition: filter 1.8s ease;
  filter: blur(0.6px) saturate(1.4) hue-rotate(8deg) brightness(0.5);
}
body.party-haze::after {
  content: '';
  position: fixed;
  inset: 0;
  background:
    radial-gradient(circle at 50% 55%, transparent 18%, rgba(0, 0, 0, 0.55) 100%),
    radial-gradient(circle at 50% 55%, transparent 25%, rgba(80, 20, 100, 0.35) 100%);
  pointer-events: none;
  z-index: 8000;
  animation: hazePulse 7s ease-in-out infinite;
}
@keyframes hazePulse {
  0%, 100% { opacity: 0.75; transform: scale(1); }
  50%      { opacity: 1;    transform: scale(1.03); }
}

/* ---------- Stage: louder (still high, more pressure) ---------- */
body.party-louder #desktop {
  filter: blur(0.8px) saturate(1.55) hue-rotate(14deg) brightness(0.45);
}
body.party-louder::after {
  content: '';
  position: fixed;
  inset: 0;
  background:
    radial-gradient(circle at 50% 55%, transparent 14%, rgba(0, 0, 0, 0.62) 100%),
    radial-gradient(circle at 50% 55%, transparent 20%, rgba(110, 30, 130, 0.42) 100%);
  pointer-events: none;
  z-index: 8000;
  animation: hazePulse 4s ease-in-out infinite;
}
/* During louder, the volume slider becomes the only thing the player needs
   to interact with. Make it visibly larger and glow so they can't miss it,
   and so they can see precisely where the thumb is. */
body.party-louder .it-volume input[type=range] {
  width: 220px !important;
  height: 14px;
  animation: volumeGlow 1.4s ease-in-out infinite;
  transition: width 0.6s ease;
}
@keyframes volumeGlow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 230, 0, 0); }
  50%      { box-shadow: 0 0 16px 6px rgba(255, 230, 0, 0.85); }
}

/* ---------- Stage: system (point at the tray speaker icon) ---------- */
/* Same dim/hue as louder but the highlight moves from the iTunes slider
   to the Windows tray speaker icon. */
body.party-system #desktop {
  filter: blur(0.7px) saturate(1.55) hue-rotate(12deg) brightness(0.5);
}
body.party-system::after {
  content: '';
  position: fixed;
  inset: 0;
  background:
    radial-gradient(circle at 50% 55%, transparent 14%, rgba(0, 0, 0, 0.6) 100%),
    radial-gradient(circle at 50% 55%, transparent 20%, rgba(110, 30, 130, 0.4) 100%);
  pointer-events: none;
  z-index: 8000;
  animation: hazePulse 4s ease-in-out infinite;
}
/* No visual hint on the tray icon. The player has to find the system
   volume themselves — that's the design. */

/* ---------- Stage: sirens (police arrive) ---------- */
body.party-sirens::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 8500;
  pointer-events: none;
  animation: sirenStrobe 0.55s steps(2, end) infinite;
}
@keyframes sirenStrobe {
  0%,   49% { background: rgba(255, 30, 30, 0.32); }
  50%, 100% { background: rgba(30, 80, 255, 0.32); }
}
body.party-sirens #desktop {
  filter: blur(0.6px) saturate(1.3) brightness(1.05);
}

/* ---------- Stage: black (laptop closed, screen off) ---------- */
body.party-black {
  background: #000 !important;
}
body.party-black #desktop,
body.party-black .taskbar,
body.party-black .windows-layer,
body.party-black #desktop-icons,
body.party-black .notification,
body.party-black .tray-popup {
  opacity: 0;
  transition: opacity 1.6s ease;
  pointer-events: none;
}
/* But keep overlay subtitles visible for the final '...' line */
body.party-black #overlay-subtitles { opacity: 1; z-index: 10000; }