/* ============================================================
   P4 — ADMINISTRATIVE MANAGEMENT — "THE CORPORATE SKYLINE"
   ============================================================ */
/* ── GOOGLE FONTS (loaded in HTML) ── */
/* Playfair Display (headings) + Inter (body) + JetBrains Mono (accents) */
/* ── DESIGN TOKENS ── */
:root {
  /* Day Palette */
  --p4-sky-start: #87CEEB;
  --p4-sky-mid: #E0F7FA;
  --p4-sky-end: #FFF8E1;
  --p4-gold: #f5a623;
  --p4-gold-light: #ffd966;
  --p4-building: #2c3e50;
  --p4-building-glass: rgba(135, 206, 235, 0.3);
  --p4-text: #111827;
  --p4-text-sub: #374151;
  --p4-surface: #ffffff;
  --p4-surface-alt: #f8fafc;
  --p4-border: rgba(0, 0, 0, 0.1);
  /* Night Palette */
  --p4-night-sky-start: #0a1628;
  --p4-night-sky-mid: #1a1a3e;
  --p4-night-sky-end: #16213e;
  --p4-neon: #4ecdc4;
  --p4-neon-blue: #00d2ff;
  --p4-night-building: #0f1923;
  --p4-night-text: #f1f5f9;
  --p4-night-text-sub: #cbd5e1;
  --p4-night-surface: #0f172a;
  --p4-night-surface-alt: #1e293b;
  --p4-night-border: rgba(255, 255, 255, 0.08);
  /* Busy Palette */
  --p4-busy: #e74c3c;
  --p4-busy-light: #ff6b6b;
  --p4-busy-dark: #c0392b;
  --p4-busy-amber: #f39c12;
  --p4-busy-glow: rgba(231, 76, 60, 0.25);
  /* Available Palette */
  --p4-avail: #2ecc71;
  --p4-avail-light: #55efc4;
  --p4-avail-dark: #27ae60;
  --p4-avail-teal: #1abc9c;
  --p4-avail-glow: rgba(46, 204, 113, 0.2);
  /* Holiday Palette */
  --p4-holiday: #e056fd;
  --p4-holiday-yellow: #f9ca24;
  --p4-holiday-green: #6ab04c;
  --p4-holiday-coral: #ff7979;
  --p4-holiday-glow: rgba(224, 86, 253, 0.2);
  /* Shared */
  --p4-radius: 12px;
  --p4-radius-lg: 20px;
  --p4-radius-sm: 6px;
  --p4-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
  --p4-shadow-lg: 0 12px 48px rgba(0, 0, 0, 0.12);
  --p4-transition: 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  --p4-font-head: 'Playfair Display', Georgia, serif;
  --p4-font-body: 'Inter', -apple-system, sans-serif;
  --p4-font-mono: 'JetBrains Mono', 'Fira Code', monospace;
}

/* ── BODY BASE ── */
body.p4 {
  margin: 0;
  padding: 0;
  font-family: var(--p4-font-body);
  color: var(--p4-text);
  background: var(--p4-surface);
  overflow-x: hidden;
  line-height: 1.7;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background var(--p4-transition), color var(--p4-transition);
}

body.p4.night {
  color: var(--p4-night-text);
  background: var(--p4-night-surface);
}

/* Global reset — now self-contained (no styleProgramMain.css) */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html { -webkit-font-smoothing: antialiased; }

a { text-decoration: none; color: inherit; }

ul { list-style: none; }

img { max-width: 100%; display: block; }

/* Scrollbar */
body.p4::-webkit-scrollbar { width: 8px; }

body.p4::-webkit-scrollbar-track { background: var(--p4-surface-alt); }

body.p4::-webkit-scrollbar-thumb { background: var(--p4-gold); border-radius: 4px; }

body.p4.night::-webkit-scrollbar-track { background: var(--p4-night-surface-alt); }

body.p4.night::-webkit-scrollbar-thumb { background: var(--p4-neon); }

/* Utility */
.p4-wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
  position: relative;
  transition: opacity 0.5s ease;
}


.p4-mono { font-family: var(--p4-font-mono); }

.p4-eyebrow {
  font-family: var(--p4-font-mono);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--p4-flow-color);
  margin-bottom: 12px !important;
}

body.p4.night .p4-eyebrow { color: var(--p4-flow-color); }

.p4-heading {
  font-family: var(--p4-font-head);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 700;
  line-height: 1.25;
  margin-bottom: 20px !important;
  color: var(--p4-text);
  letter-spacing: -0.02em;
}

body.p4.night .p4-heading { color: var(--p4-night-text); }

.p4-glow { color: var(--p4-flow-color); }

body.p4.night .p4-glow { color: var(--p4-flow-color); }

/* ── §0 BOOT SEQUENCE ── */
body.p4-booting {
  overflow: hidden !important;
  height: 100vh !important;
}

.p4-boot {
  position: absolute; top: 0; left: 0; width: 100%; height: 100vh; z-index: 99999;
  background: #0a0e17;
  display: flex; align-items: center; justify-content: center;
  opacity: 1; transition: opacity 0.6s ease;
  pointer-events: all;
}

.p4-boot.p4-boot-done {
  opacity: 0; pointer-events: none;
}

.p4-boot-inner { text-align: center; }

.p4-boot-text {
  text-align: left; max-width: 500px;
}

.p4-boot-line {
  font-family: var(--p4-font-mono);
  font-size: 0.85rem;
  color: var(--p4-gold);
  opacity: 0;
  transform: translateY(4px);
  animation: p4BootLineIn 0.3s ease forwards;
  margin-bottom: 6px;
}

.p4-boot-line .p4-boot-ok { color: var(--p4-avail); }


.p4-boot-final {
  color: #fff;
  font-size: 1.1rem;
  font-weight: 700;
  margin-top: 12px;
}

.p4-boot-flash {
  position: absolute; inset: 0;
  background: #fff; opacity: 0;
  pointer-events: none;
}

@keyframes p4BootLineIn {
  to { opacity: 1; transform: translateY(0); }

}

@keyframes p4BootFlash {
  0% { opacity: 0; }

  50% { opacity: 0.8; }

  100% { opacity: 0; }

}

/* ── §0.5 FLOATING DOCK ── */
.p4-dock {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 100000;
  display: flex;
  flex-direction: row;
  gap: 8px;
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 40px;
  padding: 8px 12px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.25);
  transition: background 0.3s, border-color 0.3s;
}

body.p4.night .p4-dock {
  background: rgba(15, 25, 35, 0.7);
  border-color: rgba(78, 205, 196, 0.15);
}

.p4-dock-divider {
  width: 1px;
  height: 20px;
  background: rgba(255,255,255,0.15);
  margin: auto 2px;
}

.p4-dock-btn {
  display: flex; align-items: center; gap: 0;
  padding: 8px;
  border: none;
  border-radius: 40px;
  background: rgba(255,255,255,0.08);
  color: #ccc;
  font-family: var(--p4-font-mono);
  font-size: 0.7rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  white-space: nowrap;
}

.p4-dock-icon {
  display: flex; align-items: center; justify-content: center;
  width: 20px; height: 20px;
  font-size: 0.95rem;
  transition: transform 0.3s ease;
}

.p4-dock-text {
  max-width: 0;
  opacity: 0;
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.p4-dock-btn:hover {
  background: rgba(255,255,255,0.18);
  padding: 8px 16px 8px 12px;
  gap: 6px;
}

.p4-dock-btn:hover .p4-dock-text {
  max-width: 80px;
  opacity: 1;
}

.p4-dock-btn:hover .p4-dock-icon {
  transform: scale(1.15);
}

body.p4.day .p4-dock-btn, body.p4.day .p4-dock-btn:hover {
  color: #1a1a2e;
}

body.p4.night .p4-dock-btn, body.p4.night .p4-dock-btn:hover {
  color: #fff;
}

.p4-dock-btn.p4-dock-active {
  background: var(--p4-gold);
  color: #1a1a2e !important;
  box-shadow: 0 0 12px rgba(245, 166, 35, 0.4);
}

body.p4.night .p4-dock-btn.p4-dock-active {
  background: var(--p4-neon);
  color: #0a1628 !important;
  box-shadow: 0 0 12px rgba(78, 205, 196, 0.4);
}

.p4-dock-btn svg { width: 14px; height: 14px; flex-shrink: 0; }






/* ── §1 HERO: THE LOBBY ── */
.p4-hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  padding: 140px 0 100px;
}

.p4-hero::after {
  content: '';
  position: absolute; inset: 0; z-index: 2;
  background: linear-gradient(135deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.15) 50%, transparent 100%);
  pointer-events: none;
}

.p4-hero-sky {
  position: absolute; inset: 0; z-index: 0;
  background: linear-gradient(180deg, var(--p4-sky-start) 0%, var(--p4-sky-mid) 50%, var(--p4-sky-end) 100%);
  transition: background 1s ease;
}

body.p4.night .p4-hero-sky {
  background: linear-gradient(180deg, var(--p4-night-sky-start) 0%, var(--p4-night-sky-mid) 50%, var(--p4-night-sky-end) 100%);
}

/* ── CLOUDS ── */
.p4-cloud {
  position: absolute;
  top: var(--t);
  left: -300px;
  width: 150px;
  height: 40px;
  background: #fff;
  border-radius: 50px;
  opacity: var(--o);
  filter: blur(15px);
  transform: scale(var(--scale)) translate3d(0, 0, 0);
  will-change: transform;
  backface-visibility: hidden;
  animation: p4CloudMove var(--s) linear var(--d) infinite;
  pointer-events: none;
}

.p4-cloud::before, .p4-cloud::after {
  content: ''; position: absolute; background: #fff; border-radius: 50%;
}

.p4-cloud::before { width: 60px; height: 60px; top: -25px; left: 20px; }

.p4-cloud::after { width: 80px; height: 80px; top: -35px; right: 15px; }

body.p4.night .p4-cloud {
  background: rgba(255,255,255,0.8);
  opacity: calc(var(--o) * 0.5);
}

@keyframes p4CloudMove {
  from { transform: translateX(0) scale(var(--scale)); }

  to { transform: translateX(calc(100vw + 600px)) scale(var(--scale)); }

}

/* ── HAPPY DAY MODE ELEMENTS ── */
.p4-happy-elements {
  display: none;
}

body.p4.available-mode:not(.night) .p4-happy-elements {
  display: block;
}

.p4-bird {
  position: absolute;
  top: var(--t);
  left: -50px;
  width: 10px; height: 10px;
  background: transparent;
  border-top: 2px solid rgba(255,255,255,0.7);
  border-left: 2px solid rgba(255,255,255,0.7);
  transform: rotate(45deg) translate3d(0, 0, 0);
  will-change: transform;
  backface-visibility: hidden;
  animation: p4BirdFly var(--s) linear var(--d) infinite;
  pointer-events: none;
}

.p4-bird::after {
  content: ''; position: absolute;
  top: -2px; left: -2px;
  width: 10px; height: 10px;
  border-top: 2px solid rgba(255,255,255,0.7);
  border-left: 2px solid rgba(255,255,255,0.7);
  transform: translate(6px, 6px);
}

@keyframes p4BirdFly {
  from { transform: translateX(0) rotate(45deg); }

  to { transform: translateX(calc(100vw + 100px)) rotate(45deg); }

}

.p4-balloon {
  position: absolute;
  bottom: -50px;
  left: var(--left);
  width: 30px; height: 40px;
  background: radial-gradient(circle at 30% 30%, #ff6b6b, #c0392b);
  border-radius: 50% 50% 50% 50% / 40% 40% 60% 60%;
  transform: translate3d(0, 0, 0);
  will-change: transform;
  backface-visibility: hidden;
  animation: p4BalloonFloat var(--s) linear var(--d) infinite;
  pointer-events: none;
  opacity: 0.85;
}

.p4-balloon::after {
  content: ''; position: absolute;
  bottom: -15px; left: 50%;
  width: 2px; height: 15px;
  background: rgba(255,255,255,0.5);
  transform: translateX(-50%);
}

@keyframes p4BalloonFloat {
  0% { transform: translateY(0) rotate(5deg); }

  50% { transform: translateY(-60vh) rotate(-5deg); }

  100% { transform: translateY(-120vh) rotate(5deg); }

}

/* ── SLEEPY NIGHT MODE ELEMENTS ── */
.p4-sleepy-elements {
  display: none;
}

body.p4.night.available-mode .p4-sleepy-elements {
  display: block;
}

.p4-star {
  position: absolute;
  width: 2px; height: 2px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 0 6px #fff;
  transform: translate3d(0, 0, 0);
  will-change: transform, opacity;
  backface-visibility: hidden;
  animation: p4Twinkle 3s ease-in-out infinite alternate;
}

@keyframes p4Twinkle {
  0% { opacity: 0.2; transform: scale(0.8); }

  100% { opacity: 1; transform: scale(1.5); }

}

.p4-moon {
  position: absolute;
  top: 15%; right: 15%;
  width: 60px; height: 60px;
  background: transparent;
  border-radius: 50%;
  box-shadow: -15px 15px 0 0 rgba(255,255,255,0.9);
  transform: translate3d(0, 0, 0);
  will-change: transform;
  backface-visibility: hidden;
  animation: p4MoonFloat 10s ease-in-out infinite alternate;
}

@keyframes p4MoonFloat {
  0% { transform: translateY(0); }

  100% { transform: translateY(-10px); }

}

.p4-zzz {
  position: absolute;
  color: var(--p4-neon);
  font-family: var(--p4-font-head);
  font-weight: 700;
  font-size: 1.2rem;
  opacity: 0;
  text-shadow: 0 0 10px var(--p4-neon);
  animation: p4ZzzFloat 4s linear infinite;
}

@keyframes p4ZzzFloat {
  0% { transform: translate(0, 0) scale(0.5); opacity: 0; }

  20% { opacity: 0.8; }

  80% { opacity: 0.8; }

  100% { transform: translate(20px, -60px) scale(1.5); opacity: 0; }

}

.p4-pillow {
  position: absolute;
  width: 30px; height: 16px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0,0,0,0.3), inset -2px -2px 5px rgba(0,0,0,0.1);
  opacity: 0.9;
  animation: p4PillowBreathe 4s ease-in-out infinite;
}

.p4-pillow::before {
  content: ''; position: absolute;
  top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 20px; height: 6px;
  border-bottom: 1px solid rgba(0,0,0,0.1);
}

@keyframes p4PillowBreathe {
  0%, 100% { transform: scale(1); }

  50% { transform: scale(1.1, 0.9); }

}

.p4-snore-bubble {
  position: absolute;
  color: var(--p4-neon);
  font-family: var(--p4-font-mono);
  font-size: 0.7rem;
  opacity: 0;
  text-shadow: 0 0 8px var(--p4-neon);
  animation: p4SnoreBreathe 4s linear infinite;
}

@keyframes p4SnoreBreathe {
  0% { transform: translate(0, 0) scale(0.5); opacity: 0; }

  30% { transform: translate(-10px, -20px) scale(1); opacity: 0.8; }

  70% { transform: translate(-15px, -30px) scale(1.1); opacity: 0.8; }

  100% { transform: translate(-20px, -40px) scale(1.2); opacity: 0; }

}

/* Make city quiet in sleep mode */
body.p4.night.available-mode .p4-traffic-system { opacity: 0.4; }

body.p4.night.available-mode .p4-searchlight { display: none; }

body.p4.night.available-mode .p4-flyer { display: none; }

body.p4.night.available-mode .p4-window { animation-play-state: paused; opacity: 0.2; }

/* ── SEARCHLIGHTS & FLYERS ── */
.p4-searchlight {
  position: absolute; bottom: 0;
  width: 150px; height: 120vh;
  background: linear-gradient(0deg, rgba(255,255,255,0.15) 0%, transparent 80%);
  transform-origin: bottom center;
  animation: p4Sweep 12s ease-in-out infinite alternate;
  mix-blend-mode: screen;
  pointer-events: none;
}

.p4-searchlight-delay { animation-delay: -6s; animation-duration: 15s; }

.p4-searchlight-fast { animation-duration: 8s; animation-delay: -3s; width: 80px; }

body.p4.night .p4-searchlight {
  background: linear-gradient(0deg, rgba(78, 205, 196, 0.15) 0%, transparent 80%);
  mix-blend-mode: screen;
}

@keyframes p4Sweep {
  0% { transform: rotate(-35deg); }

  100% { transform: rotate(35deg); }

}

.p4-flyer {
  position: absolute;
  top: var(--t);
  width: 8px; height: 2px;
  background: #fff;
  border-radius: 2px;
  box-shadow: 0 0 6px #fff, 0 0 12px var(--p4-gold);
  opacity: 0.6;
  pointer-events: none;
}

body.p4.night .p4-flyer { box-shadow: 0 0 6px #fff, 0 0 12px var(--p4-neon); }

.p4-flyer-right {
  left: -50px;
  animation: p4FlyRight var(--s) linear var(--d) infinite;
}

.p4-flyer-left {
  right: -50px;
  animation: p4FlyLeft var(--s) linear var(--d) infinite;
}

@keyframes p4FlyRight {
  0% { transform: translateX(0) scale(1); opacity: 0; }

  10% { opacity: 0.6; }

  90% { opacity: 0.6; }

  100% { transform: translateX(calc(100vw + 100px)) scale(0.5); opacity: 0; }

}

@keyframes p4FlyLeft {
  0% { transform: translateX(0) scale(1); opacity: 0; }

  10% { opacity: 0.6; }

  90% { opacity: 0.6; }

  100% { transform: translateX(calc(-100vw - 100px)) scale(1.5); opacity: 0; }

}

.p4-hero-skyline {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 50%;
  z-index: 1;
}

.p4-hero-skyline svg {
  position: absolute; bottom: 40px; left: 0;
  width: 100%; height: calc(100% - 40px);
}

.p4-skyline-back { fill: #1e2d3d; opacity: 0.5; }

.p4-skyline-mid { fill: #2c3e50; opacity: 0.7; }

.p4-skyline-front { fill: #1a252f; opacity: 0.9; }

body.p4.night .p4-skyline-back { fill: #060d16; opacity: 0.6; }

body.p4.night .p4-skyline-mid { fill: #0c1824; opacity: 0.8; }

body.p4.night .p4-skyline-front { fill: #070e18; opacity: 1; }

/* Building windows (glowing dots) */
.p4-window {
  fill: rgba(255, 220, 100, 0.6);
  animation: p4WindowFlicker 4s ease-in-out infinite;
}

body.p4.night .p4-window {
  fill: rgba(255, 220, 100, 0.9);
}

@keyframes p4WindowFlicker {
  0%, 100% { opacity: 0.6; }

  30% { opacity: 1; }

  70% { opacity: 0.4; }

}

/* ── TRAFFIC SYSTEM ── */
.p4-traffic-system {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 40px;
  background: #2d3748;
  border-top: 2px solid rgba(255, 255, 255, 0.2);
  overflow: hidden;
  z-index: 10;
}

.p4-road-line {
  position: absolute;
  top: 50%; left: 0; right: 0;
  height: 2px;
  background: repeating-linear-gradient(90deg, rgba(255,255,255,0.45) 0, rgba(255,255,255,0.45) 20px, transparent 20px, transparent 40px);
  transform: translateY(-50%);
}

.p4-car {
  position: absolute;
  width: 24px; height: 8px;
  border-radius: 4px;
  opacity: 1;
  box-shadow: 0 0 10px currentColor;
}

.p4-car-right {
  bottom: 6px;
  left: -40px;
  color: #ff3333;
  background: #ff3333;
  transform: translate3d(0, 0, 0);
  will-change: transform;
  backface-visibility: hidden;
  animation: p4DriveRight var(--s) linear var(--d) infinite;
}

.p4-car-right::after {
  content: ''; position: absolute; right: -4px; top: 1px; width: 6px; height: 6px;
  background: #fff; border-radius: 50%; filter: blur(1px);
}

.p4-car-left {
  top: 6px;
  right: -40px;
  color: #fff;
  background: #fff;
  transform: translate3d(0, 0, 0);
  will-change: transform;
  backface-visibility: hidden;
  animation: p4DriveLeft var(--s) linear var(--d) infinite;
}

.p4-car-left::after {
  content: ''; position: absolute; left: -4px; top: 1px; width: 6px; height: 6px;
  background: #ff3333; border-radius: 50%; filter: blur(1px);
}

@keyframes p4DriveRight {
  from { transform: translateX(0); }

  to { transform: translateX(calc(100vw + 100px)); }

}

@keyframes p4DriveLeft {
  from { transform: translateX(0); }

  to { transform: translateX(calc(-100vw - 100px)); }

}

/* Jam Cars Hidden by default */
.p4-car-jam {
  display: none;
}

/* ══════════════════════════════════════════════
   HOLIDAY MODE — DAY + NIGHT
   ══════════════════════════════════════════════ */
.p4-holiday-elements {
  display: none;
}

body.p4.holiday-mode .p4-holiday-elements {
  display: block;
}

/* Holiday sky — warm golden/tropical gradient */
body.p4.day.holiday-mode .p4-hero-sky {
  background: linear-gradient(180deg,
    #87CEEB 0%,
    #f0e68c 35%,
    #ffd700 55%,
    #ff8c42 80%,
    #ff6b35 100%) !important;
}

/* Maintain city background and window lights in Holiday Mode, adding festive vibes */
body.p4.holiday-mode .p4-skyline-back { opacity: 0.6 !important; }
body.p4.holiday-mode .p4-skyline-mid { opacity: 0.8 !important; }
body.p4.holiday-mode .p4-skyline-front { opacity: 1 !important; }

body.p4.holiday-mode .p4-window {
  opacity: 0.85 !important;
  animation-play-state: running !important;
}

/* Hide work laptops and cobwebs in holiday mode (since we are partying!) */
body.p4.holiday-mode .p4-rm-laptop {
  display: none !important;
}
body.p4.holiday-mode .p4-hol-cobweb {
  display: none !important;
}

/* ── NIGHT HOLIDAY: Cozy, warm glowing night city lights ── */
body.p4.night.holiday-mode .p4-window {
  fill: rgba(255, 220, 100, 0.95) !important;
  filter: drop-shadow(0 0 10px rgba(255, 220, 100, 0.8)) !important;
  animation: p4HolidayNightLights 3s ease-in-out infinite !important;
}

@keyframes p4HolidayNightLights {
  0%, 100% { opacity: 0.95; filter: drop-shadow(0 0 12px rgba(255, 220, 100, 0.9)); }
  50% { opacity: 0.6; filter: drop-shadow(0 0 4px rgba(255, 220, 100, 0.4)); }
}

/* Christmas fairy lights blinking */
@keyframes p4FairyBlinkRed { 0%, 100% { opacity: 0.3; filter: none; } 50% { opacity: 1; filter: drop-shadow(0 0 6px #ef4444); } }
@keyframes p4FairyBlinkYellow { 0%, 100% { opacity: 1; filter: drop-shadow(0 0 6px #fbbf24); } 50% { opacity: 0.3; filter: none; } }
@keyframes p4FairyBlinkBlue { 0%, 100% { opacity: 0.3; filter: none; } 50% { opacity: 1; filter: drop-shadow(0 0 6px #3b82f6); } }
@keyframes p4FairyBlinkGreen { 0%, 100% { opacity: 1; filter: drop-shadow(0 0 6px #10b981); } 50% { opacity: 0.3; filter: none; } }
@keyframes p4FairyBlinkPink { 0%, 100% { opacity: 0.3; filter: none; } 50% { opacity: 1; filter: drop-shadow(0 0 6px #ec4899); } }

.p4-fairy-light-red { animation: p4FairyBlinkRed 1s infinite alternate; }
.p4-fairy-light-yellow { animation: p4FairyBlinkYellow 1.2s infinite alternate; }
.p4-fairy-light-blue { animation: p4FairyBlinkBlue 0.8s infinite alternate; }
.p4-fairy-light-green { animation: p4FairyBlinkGreen 1.4s infinite alternate; }
.p4-fairy-light-pink { animation: p4FairyBlinkPink 1.1s infinite alternate; }

/* ── DAY HOLIDAY: Lively Festive City ── */
body.p4.day.holiday-mode .p4-skyline-back { opacity: 0.7 !important; fill: #362944 !important; }

body.p4.day.holiday-mode .p4-skyline-mid { opacity: 0.85 !important; fill: #2d1f30 !important; }

body.p4.day.holiday-mode .p4-skyline-front { opacity: 1 !important; fill: #211522 !important; }

body.p4.day.holiday-mode .p4-window {
  opacity: 0.9 !important;
  animation: p4FestiveLights 2.5s ease-in-out infinite !important;
}

/* Assign random festive colors to the windows */
body.p4.day.holiday-mode .p4-window:nth-child(2n) { fill: #ff3b30 !important; animation-delay: 0.3s !important; }

body.p4.day.holiday-mode .p4-window:nth-child(3n) { fill: #34c759 !important; animation-delay: 0.8s !important; }

body.p4.day.holiday-mode .p4-window:nth-child(5n) { fill: #007aff !important; animation-delay: 1.4s !important; }

body.p4.day.holiday-mode .p4-window:nth-child(7n) { fill: #ffcc00 !important; animation-delay: 2.1s !important; }

@keyframes p4FestiveLights {
  0%, 100% { opacity: 0.95; filter: drop-shadow(0 0 6px currentColor); }

  50% { opacity: 0.4; filter: none; }

}

/* Slow, lazy traffic — holiday pace */
body.p4.holiday-mode .p4-traffic-system { opacity: 0.55; }

body.p4.holiday-mode .p4-car-right {
  animation-duration: calc(var(--s) * 6) !important;
}

body.p4.holiday-mode .p4-car-left {
  animation-duration: calc(var(--s) * 6) !important;
}

/* Hide intense work elements */
body.p4.holiday-mode .p4-searchlight { display: none !important; }

body.p4.holiday-mode .p4-flyer { opacity: 0.15; }

/* Slow peaceful clouds */
body.p4.holiday-mode .p4-cloud {
  animation-duration: calc(var(--s) * 2) !important;
  opacity: calc(var(--o) + 0.2) !important;
}

/* ── OFF DUTY BANNER ── */
.p4-holiday-banner {
  position: absolute;
  top: 12%;
  left: 50%;
  transform: translateX(-50%) rotate(-3deg);
  background: linear-gradient(135deg, #ff6b35, #ffd700, #ff8c42);
  color: #1a1a2e;
  font-family: var(--p4-font-head);
  font-size: 1.4rem;
  font-weight: 800;
  padding: 12px 40px;
  border-radius: 8px;
  z-index: 20;
  letter-spacing: 2px;
  box-shadow: 0 4px 20px rgba(255, 107, 53, 0.5), 0 0 40px rgba(255, 215, 0, 0.3);
  animation: p4BannerBob 3s ease-in-out infinite;
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.3);
  white-space: nowrap;
}

body.p4.night.holiday-mode .p4-holiday-banner {
  background: linear-gradient(135deg, #4ecdc4, #00ffcc, #4ecdc4);
  box-shadow: 0 4px 20px rgba(78, 205, 196, 0.5), 0 0 40px rgba(0, 255, 204, 0.3);
}

@keyframes p4BannerBob {
  0%, 100% { transform: translateX(-50%) rotate(-3deg) translateY(0); }

  50% { transform: translateX(-50%) rotate(-1deg) translateY(-8px); }

}

/* ── CONFETTI ── */
.p4-confetti {
  position: absolute;
  top: -10px;
  width: 8px;
  height: 12px;
  background: var(--c);
  border-radius: 2px;
  opacity: 0.9;
  z-index: 15;
  animation: p4ConfettiFall var(--s) linear var(--d) infinite;
}

.p4-confetti:nth-child(even) {
  width: 6px; height: 6px;
  border-radius: 50%;
}

.p4-confetti:nth-child(3n) {
  width: 10px; height: 5px;
  border-radius: 0;
  transform: rotate(45deg);
}

@keyframes p4ConfettiFall {
  0% { transform: translateY(0) rotate(0deg); opacity: 1; }

  25% { transform: translateY(25vh) rotate(180deg) translateX(20px); opacity: 0.9; }

  50% { transform: translateY(50vh) rotate(360deg) translateX(-15px); opacity: 0.8; }

  75% { transform: translateY(75vh) rotate(540deg) translateX(10px); opacity: 0.6; }

  100% { transform: translateY(100vh) rotate(720deg); opacity: 0; }

}

/* ── FLOATING EMOJIS ── */
.p4-holiday-emoji {
  position: absolute;
  bottom: 50px;
  font-size: 2rem;
  opacity: 0;
  z-index: 15;
  animation: p4EmojiFloat var(--s) ease-in-out var(--d) infinite;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3));
}

@keyframes p4EmojiFloat {
  0% { transform: translateY(0) scale(0.5) rotate(0deg); opacity: 0; }

  15% { opacity: 1; }

  50% { transform: translateY(-35vh) scale(1.2) rotate(15deg); opacity: 0.9; }

  85% { opacity: 0.6; }

  100% { transform: translateY(-70vh) scale(0.8) rotate(-10deg); opacity: 0; }

}

/* ── BUTTERFLIES ── */
.p4-butterfly {
  position: absolute;
  top: var(--t);
  left: -30px;
  width: 16px; height: 16px;
  z-index: 15;
  animation: p4ButterflyFly var(--s) ease-in-out var(--d) infinite;
}

.p4-butterfly::before,
.p4-butterfly::after {
  content: '';
  position: absolute;
  width: 10px; height: 14px;
  border-radius: 50% 50% 50% 0;
  background: linear-gradient(135deg, #ff6bcb, #ffa94d);
  top: 0;
  animation: p4WingFlap 0.15s ease-in-out infinite alternate;
}

.p4-butterfly::before { left: 0; transform-origin: right center; }

.p4-butterfly::after {
  right: 0;
  transform-origin: left center;
  animation-delay: 0.075s;
  background: linear-gradient(135deg, #ffd93d, #ff6b6b);
}

@keyframes p4WingFlap {
  from { transform: scaleX(1) rotate(-20deg); }

  to { transform: scaleX(0.3) rotate(20deg); }

}

@keyframes p4ButterflyFly {
  0% { transform: translateX(0) translateY(0); opacity: 0; }

  10% { opacity: 0.9; }

  25% { transform: translateX(25vw) translateY(-30px); }

  50% { transform: translateX(50vw) translateY(20px); }

  75% { transform: translateX(75vw) translateY(-15px); }

  90% { opacity: 0.9; }

  100% { transform: translateX(105vw) translateY(10px); opacity: 0; }

}

/* ── HOLIDAY UI EFFECTS ── */
body.p4.holiday-mode .p4-hero-h1 {
  animation: p4HolidayBreathe 4s ease-in-out infinite;
}

body.p4.day.holiday-mode .p4-h1-accent {
  background: linear-gradient(90deg, #ff6b35, #ffd700, #ff8c42) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

@keyframes p4HolidayBreathe {
  0%, 100% { transform: scale(1); opacity: 1; }

  50% { transform: scale(1.02); opacity: 0.85; }

}

body.p4.holiday-mode .p4-office-table-wrapper {
  opacity: 1 !important;
  filter: none !important;
  animation: none !important;
  box-shadow: 0 0 25px rgba(224, 86, 253, 0.4) !important;
  border: 1.5px solid var(--p4-holiday) !important;
}

body.p4.holiday-mode .p4-table-pulse {
  background: #ffd700 !important;
  box-shadow: 0 0 8px #ffd700 !important;
  animation: p4HolidayPulse 2s ease-in-out infinite !important;
}

@keyframes p4HolidayPulse {
  0%, 100% { opacity: 0.4; }

  50% { opacity: 1; }

}

/* ═══════════════════════════════════════════════════════════════
   HOLIDAY MODE — 30 Interactive Elements (Day Holiday Only)
   ═══════════════════════════════════════════════════════════════ */
/* Container: hidden by default, shown only in day holiday mode */
.p4-about-bg-holiday-anim {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: 5;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--p4-transition), visibility var(--p4-transition);
  overflow: visible;
}

body.p4.day.holiday-mode .p4-about-bg-holiday-anim {
  opacity: 1;
  visibility: visible;
}

.p4-about-bg-holiday-anim > div {
  pointer-events: auto;
  zoom: 2;
}

/* ── Shared Holiday Keyframes ── */
@keyframes p4HolBounce { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)} }


@keyframes p4HolSpin { 0%{transform:rotate(0deg)} 100%{transform:rotate(360deg)} }


@keyframes p4HolShake { 0%,100%{transform:translate(0,0)} 20%{transform:translate(-2px,1px)} 40%{transform:translate(2px,-1px)} 60%{transform:translate(-1px,2px)} 80%{transform:translate(1px,-2px)} }


@keyframes p4HolFadeUp { 0%{transform:translateY(0);opacity:1} 100%{transform:translateY(-25px);opacity:0} }


@keyframes p4HolSlide {
  /* Roll Forward */
  0%   { transform: translateX(0) rotate(0deg); }

  12%  { transform: translateX(15px) rotate(3deg); }

  24%  { transform: translateX(35px) rotate(-2deg); }

  36%  { transform: translateX(50px) rotate(2deg); }

  45%  { transform: translateX(60px) rotate(0deg); }

  /* Settle / Pause */
  50%  { transform: translateX(60px) rotate(1deg); }

  54%  { transform: translateX(60px) rotate(-1deg); }

  58%  { transform: translateX(60px) rotate(0deg); }

  /* Roll Back */
  68%  { transform: translateX(45px) rotate(-3deg); }

  78%  { transform: translateX(30px) rotate(2deg); }

  88%  { transform: translateX(12px) rotate(-1deg); }

  100% { transform: translateX(0) rotate(0deg); }

}

@keyframes p4HolSlideHoliday {
  0%   { transform: translateX(0) rotate(0deg) scale(1.8); }

  12%  { transform: translateX(15px) rotate(3deg) scale(1.8); }

  24%  { transform: translateX(35px) rotate(-2deg) scale(1.8); }

  36%  { transform: translateX(50px) rotate(2deg) scale(1.8); }

  45%  { transform: translateX(60px) rotate(0deg) scale(1.8); }

  50%  { transform: translateX(60px) rotate(1deg) scale(1.8); }

  54%  { transform: translateX(60px) rotate(-1deg) scale(1.8); }

  58%  { transform: translateX(60px) rotate(0deg) scale(1.8); }

  68%  { transform: translateX(45px) rotate(-3deg) scale(1.8); }

  78%  { transform: translateX(30px) rotate(2deg) scale(1.8); }

  88%  { transform: translateX(12px) rotate(-1deg) scale(1.8); }

  100% { transform: translateX(0) rotate(0deg) scale(1.8); }

}


@keyframes p4HolFlash { 0%,100%{opacity:1} 50%{opacity:0.3} }





@keyframes p4HolDiscoRay {
  0%{transform:rotate(0deg) scaleX(1);opacity:0.6}

  50%{transform:rotate(180deg) scaleX(1.5);opacity:1}

  100%{transform:rotate(360deg) scaleX(1);opacity:0.6}

}

/* ════════════════════════════
   1. Auto-Reply Monitor
   ════════════════════════════ */
.p4-hol-monitor {
  position:absolute; top:50%; right:12%;
  width:65px; height:55px; cursor:pointer; z-index:4;
}

body.p4.day.holiday-mode .p4-hol-monitor {
  top:auto;
  bottom:22%;
  right:17%;
}

.p4-hol-mon-screen {
  width:60px; height:38px;
  background: linear-gradient(135deg, #1e3a5f, #0f172a);
  border:3px solid #64748b; border-radius:4px;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 0 8px rgba(56,189,248,0.2);
  overflow:hidden;
}

.p4-hol-mon-text {
  font-size:6px; color:#38bdf8; font-weight:700;
  opacity:0; transition:opacity 0.4s;
  text-align:center; line-height:1.3;
}

.p4-hol-monitor.active .p4-hol-mon-text { opacity:1; animation: p4HolFlash 0.5s infinite; }

.p4-hol-monitor.active .p4-hol-mon-screen {
  background:linear-gradient(135deg,#0ea5e9,#0284c7);
  box-shadow:0 0 15px rgba(14,165,233,0.6);
}

.p4-hol-mon-stand { width:8px;height:8px;background:#475569;margin:0 auto; }

.p4-hol-mon-base { width:24px;height:3px;background:#64748b;border-radius:2px;margin:0 auto; }

/* ════════════════════════════
   2. Ringing Unanswered Phone
   ════════════════════════════ */
.p4-hol-phone {
  position:absolute; bottom:52%; left:32%;
  width:25px; height:35px; cursor:pointer; z-index:4;
}

.p4-hol-phone-body {
  width:20px; height:30px; background:linear-gradient(135deg,#334155,#1e293b);
  border:2px solid #64748b; border-radius:3px; margin:0 auto;
}

.p4-hol-phone-handset {
  width:18px; height:5px; background:#94a3b8; border-radius:5px;
  position:absolute; top:2px; left:3px;
}

.p4-hol-phone.active { animation: p4HolShake 0.1s infinite; }

.p4-hol-phone.active .p4-hol-phone-handset { animation: p4HolBounce 0.3s infinite; }

.p4-hol-phone.ending {
  animation: p4HolPhoneSettle 1.5s ease-out forwards;
  transform-origin: bottom center;
}

.p4-hol-phone.ending .p4-hol-phone-handset {
  animation: p4HolHandsetSettle 1.5s ease-out forwards;
  transform-origin: center center;
}

.p4-hol-phone-bubble {
  position:absolute; top:-20px; left:-10px;
  background:rgba(255,255,255,0.9); color:#1e293b;
  font-size:5px; font-weight:700; padding:2px 4px;
  border-radius:6px; white-space:nowrap;
  opacity:0; transition:opacity 0.3s;
  box-shadow:0 2px 8px rgba(0,0,0,0.2);
}

.p4-hol-phone.active .p4-hol-phone-bubble { opacity:1; }

/* ════════════════════════════
   3. Spinning Desk Globe
   ════════════════════════════ */
.p4-hol-globe {
  position:absolute; bottom:52%; left:18%;
  width:35px; height:45px; cursor:pointer; z-index:4;
}

body.p4.day.holiday-mode .p4-hol-globe {
  bottom: auto; top: 14%;
  left: 57%;
}

.p4-hol-globe-sphere {
  width:28px; height:28px; border-radius:50%;
  background:linear-gradient(135deg,#0ea5e9,#22d3ee,#0284c7);
  border:2px solid #38bdf8;
  margin:0 auto; position:relative;
  box-shadow:0 0 6px rgba(14,165,233,0.4);
}

.p4-hol-globe-ring {
  width:34px; height:12px; border:2px solid #94a3b8; border-radius:50%;
  position:absolute; top:10px; left:0;
}

.p4-hol-globe-stand { width:4px;height:10px;background:#94a3b8;margin:0 auto; }

.p4-hol-globe-pin {
  position:absolute; top:2px; left:18px; font-size:8px;
  opacity:0; transition:opacity 0.3s;
}

.p4-hol-globe.active .p4-hol-globe-sphere { animation: p4HolSpin 0.8s ease-in-out; }

.p4-hol-globe.active .p4-hol-globe-pin { opacity:1; animation: p4HolBounce 0.5s infinite; }

/* ════════════════════════════
   4. Dancing Hula Bobblehead
   ════════════════════════════ */
.p4-hol-hula {
  position:absolute; bottom:25.5%; left:62.5%;
  width:28px; height:39px; cursor:pointer; z-index:6;
}

.p4-hol-hula-svg {
  width:100%; height:100%; overflow:visible; display:block;
}

/* Idle (Standby) state */
.p4-hol-hula:not(.active):not(.ending) .p4-hula-head-group {
  animation: p4HulaHeadIdle 3.2s ease-in-out infinite;
  transform-origin: 20px 22px;
}

.p4-hol-hula:not(.active):not(.ending) .p4-hula-body-group {
  animation: p4HulaBodyIdle 4s ease-in-out infinite alternate;
  transform-origin: 20px 50px;
}

.p4-hol-hula:not(.active) .p4-hula-skirt-container {
  animation: p4HulaSkirtIdle 2.5s ease-in-out infinite alternate;
  transform-origin: 20px 41px;
}

/* Active Click state */
.p4-hol-hula.active .p4-hula-head-group {
  animation: p4HulaHeadActive 0.18s infinite ease-in-out;
  transform-origin: 20px 22px;
}

.p4-hol-hula.active .p4-hula-body-group {
  animation: p4HulaHipActive 0.22s infinite ease-in-out;
  transform-origin: 20px 50px;
}

.p4-hol-hula.active .p4-hula-shaker.left {
  animation: p4HulaShakerActiveLeft 0.14s infinite alternate ease-in-out;
  transform-origin: 11px 36px;
}

.p4-hol-hula.active .p4-hula-shaker.right {
  animation: p4HulaShakerActiveRight 0.14s infinite alternate ease-in-out;
  transform-origin: 29px 36px;
}

/* Ending Settle state */
.p4-hol-hula.ending .p4-hula-head-group {
  animation: p4HulaHeadSettle 1.5s cubic-bezier(0.25, 0.8, 0.25, 1) forwards;
  transform-origin: 20px 22px;
}

.p4-hol-hula.ending .p4-hula-body-group {
  animation: p4HulaHipSettle 1.5s cubic-bezier(0.25, 0.8, 0.25, 1) forwards;
  transform-origin: 20px 50px;
}

/* Keyframe Definitions for Hula Bobblehead interaction */
@keyframes p4HulaHeadIdle {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }

  25% { transform: translate(-0.8px, 0.4px) rotate(-4deg); }

  50% { transform: translate(0, -0.2px) rotate(1deg); }

  75% { transform: translate(0.8px, 0.4px) rotate(4deg); }

}

@keyframes p4HulaBodyIdle {
  0% { transform: rotate(-2.5deg); }

  100% { transform: rotate(2.5deg); }

}

@keyframes p4HulaSkirtIdle {
  0% { transform: rotate(-5deg) scaleX(0.96); }

  100% { transform: rotate(5deg) scaleX(1.04); }

}

@keyframes p4HulaHeadActive {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }

  20% { transform: translate(-2px, -1.5px) rotate(-16deg); }

  40% { transform: translate(1.5px, 2px) rotate(14deg); }

  60% { transform: translate(-2.5px, 1px) rotate(-12deg); }

  80% { transform: translate(2px, -2px) rotate(15deg); }

}

@keyframes p4HulaHipActive {
  0%, 100% { transform: rotate(0deg) translateX(0); }

  20% { transform: rotate(-10deg) translateX(-3px); }

  40% { transform: rotate(8deg) translateX(2.5px); }

  60% { transform: rotate(-9deg) translateX(-2px); }

  80% { transform: rotate(10deg) translateX(3px); }

}

@keyframes p4HulaShakerActiveLeft {
  0% { transform: rotate(-25deg) scale(1.15); }

  100% { transform: rotate(35deg) scale(0.85); }

}

@keyframes p4HulaShakerActiveRight {
  0% { transform: rotate(35deg) scale(0.85); }

  100% { transform: rotate(-25deg) scale(1.15); }

}

@keyframes p4HulaHeadSettle {
  0% { transform: translate(2px, -2px) rotate(15deg); }

  15% { transform: translate(-3px, 1.5px) rotate(-12deg); }

  30% { transform: translate(2px, -1px) rotate(8deg); }

  45% { transform: translate(-1.5px, 0.5px) rotate(-5deg); }

  60% { transform: translate(1px, -0.2px) rotate(3deg); }

  75% { transform: translate(-0.5px, 0.1px) rotate(-1.5deg); }

  90% { transform: translate(0.2px, 0px) rotate(0.5deg); }

  100% { transform: translate(0, 0) rotate(0deg); }

}

@keyframes p4HulaHipSettle {
  0% { transform: rotate(10deg) translateX(3px); }

  15% { transform: rotate(-8deg) translateX(-2.5px); }

  30% { transform: rotate(6deg) translateX(2px); }

  45% { transform: rotate(-4deg) translateX(-1.2px); }

  60% { transform: rotate(2.5deg) translateX(0.8px); }

  75% { transform: rotate(-1.5deg) translateX(-0.4px); }

  90% { transform: rotate(0.8deg) translateX(0.2px); }

  100% { transform: rotate(0deg) translateX(0); }

}

/* ════════════════════════════
   5. Steaming Coconut Drink
   ════════════════════════════ */
.p4-hol-coconut {
  position:absolute; bottom:52%; right:30%;
  width:25px; height:25px; cursor:pointer; z-index:5;
  transform-origin: bottom center;
  transition: transform 0.2s ease;
}

body.p4.day.holiday-mode .p4-hol-coconut {
  bottom: auto;
  top: 18%;
  right: 24%;
}

.p4-hol-coco-shell {
  width:20px; height:14px; background:linear-gradient(#8b5e3c,#6d4c2e);
  border-radius:0 0 10px 10px; margin:6px auto 0;
  border:1px solid #5c3d1e;
  transform-origin: bottom center;
}

.p4-hol-coco-straw {
  width:2px; height:12px; background:#ef4444;
  position:absolute; top:0; left:14px; transform:rotate(15deg);
  transform-origin: bottom center;
}

.p4-hol-coco-umbrella { 
  position:absolute; top:-2px; right:2px; font-size:7px;
  transform-origin: center bottom;
}

/* Cold Glowing Splash Ring */
.p4-hol-coco-glow-ring {
  position: absolute;
  top: 50%; left: 50%;
  width: 32px; height: 32px;
  border-radius: 50%;
  border: 2px solid #22d3ee;
  box-shadow: 0 0 8px #0891b2, inset 0 0 6px #06b6d4;
  transform: translate(-50%, -50%) scale(0);
  opacity: 0;
  pointer-events: none;
  z-index: 1;
}

/* Cold Glowing Splash Droplets */
.p4-hol-coco-steam {
  position:absolute; width:4px; height:4px;
  background:radial-gradient(circle, #22d3ee 30%, #0ea5e9 100%);
  border-radius:50%; opacity:0; z-index: 6;
  box-shadow: 0 0 6px #22d3ee, 0 0 10px #06b6d4;
}

.p4-hol-coco-steam.s1 { top: -2px; left: 13px; }

.p4-hol-coco-steam.s2 { top: -1px; left: 15px; }

.p4-hol-coco-steam.s3 { top: -3px; left: 12px; }

.p4-hol-coco-steam.s4 { top: -2px; left: 16px; }

/* Active and Ending States */
.p4-hol-coconut.active {
  animation: p4HolCoconutDrink 2.5s ease-in-out forwards;
}

.p4-hol-coconut.active .p4-hol-coco-umbrella {
  animation: p4HolUmbrellaSpin 2.5s ease-in-out forwards;
}

.p4-hol-coconut.active .p4-hol-coco-glow-ring {
  animation: p4HolCocoGlowRing 1.25s infinite cubic-bezier(0.1, 0.8, 0.3, 1);
}

.p4-hol-coconut.active .p4-hol-coco-steam.s1 {
  animation: p4HolSplashLeft1 1.25s infinite ease-out;
}

.p4-hol-coconut.active .p4-hol-coco-steam.s2 {
  animation: p4HolSplashRight1 1.25s infinite ease-out;
  animation-delay: 0.3s;
}

.p4-hol-coconut.active .p4-hol-coco-steam.s3 {
  animation: p4HolSplashLeft2 1.25s infinite ease-out;
  animation-delay: 0.6s;
}

.p4-hol-coconut.active .p4-hol-coco-steam.s4 {
  animation: p4HolSplashRight2 1.25s infinite ease-out;
  animation-delay: 0.9s;
}

.p4-hol-coconut.ending {
  animation: p4HolCoconutSettle 1.5s ease-out forwards;
}

.p4-hol-coconut.ending .p4-hol-coco-umbrella {
  animation: p4HolUmbrellaSettle 1.5s ease-out forwards;
}

/* Keyframe Definitions for Refreshing Coconut interaction */
@keyframes p4HolCoconutDrink {
  0% { transform: scale(1) rotate(0deg); }

  12% { transform: scale(1.18, 0.82) rotate(-6deg); } /* Squish preparation */
  28% { transform: scale(0.9, 1.25) rotate(16deg); }  /* Sipping drink tilt */
  44% { transform: scale(1.12, 0.92) rotate(12deg); }

  60% { transform: scale(0.95, 1.08) rotate(15deg); }

  76% { transform: scale(1.04, 0.96) rotate(13deg); }

  100% { transform: scale(1) rotate(15deg); }

}

@keyframes p4HolUmbrellaSpin {
  0% { transform: rotate(0deg) scale(1); }

  20% { transform: rotate(180deg) scale(1.3) translateY(-3px); }

  40% { transform: rotate(360deg) scale(1) translateY(0); }

  60% { transform: rotate(540deg) scale(1.2) translateY(-2px); }

  80% { transform: rotate(720deg) scale(0.95) translateY(0); }

  100% { transform: rotate(900deg) scale(1); }

}

@keyframes p4HolCocoGlowRing {
  0% { transform: translate(-50%, -50%) scale(0.2); opacity: 0.9; }

  100% { transform: translate(-50%, -50%) scale(2.4); opacity: 0; }

}

@keyframes p4HolSplashLeft1 {
  0% { transform: translate(0, 0) scale(1); opacity: 1; }

  100% { transform: translate(-14px, -24px) scale(0.4); opacity: 0; }

}

@keyframes p4HolSplashRight1 {
  0% { transform: translate(0, 0) scale(1); opacity: 1; }

  100% { transform: translate(16px, -26px) scale(0.4); opacity: 0; }

}

@keyframes p4HolSplashLeft2 {
  0% { transform: translate(0, 0) scale(1.2); opacity: 1; }

  100% { transform: translate(-22px, -18px) scale(0.3); opacity: 0; }

}

@keyframes p4HolSplashRight2 {
  0% { transform: translate(0, 0) scale(1.2); opacity: 1; }

  100% { transform: translate(24px, -20px) scale(0.3); opacity: 0; }

}

@keyframes p4HolCoconutSettle {
  0% { transform: rotate(15deg) scale(1); }

  24% { transform: rotate(-12deg) scale(1.1); }

  44% { transform: rotate(8deg) scale(0.95); }

  64% { transform: rotate(-5deg) scale(1.03); }

  80% { transform: rotate(2deg) scale(0.98); }

  100% { transform: rotate(0deg) scale(1); }

}

@keyframes p4HolUmbrellaSettle {
  0% { transform: rotate(900deg) scale(1); }

  35% { transform: rotate(450deg) scale(1.15); }

  65% { transform: rotate(90deg) scale(0.95); }

  85% { transform: rotate(-10deg) scale(1.02); }

  100% { transform: rotate(0deg) scale(1); }

}

/* ════════════════════════════
   6. Tropical Fish Bowl
   ════════════════════════════ */
.p4-hol-fishbowl {
  position: absolute;
  top: 31%;
  right: 88%;
  width: 52px;
  height: 58px;
  cursor: pointer;
  z-index: 5;
  user-select: none;
}

.p4-hol-fishbowl-svg {
  width: 100%;
  height: 100%;
  overflow: visible;
  display: block;
}

/* Bowl group */
.p4-fish-bowl-group {
  transform-origin: 40px 88px;
  transition: transform 0.3s ease;
}

.p4-fish-ground-shadow {
  transition: rx 0.3s ease, opacity 0.3s ease;
}

/* ── Fish Swimming (Idle Standby) ── */
.p4-fish-body-group {
  transform-origin: 38px 62px;
}

.p4-hol-fishbowl:not(.active):not(.ending) .p4-fish-body-group {
  animation: p4FishSwim 4s ease-in-out infinite;
}

.p4-hol-fishbowl:not(.active):not(.ending) .p4-fish-tail {
  transform-origin: 28px 62px;
  animation: p4FishTailWag 0.6s ease-in-out infinite alternate;
}

.p4-hol-fishbowl:not(.active):not(.ending) .p4-fish-dorsal {
  transform-origin: 38px 55px;
  animation: p4FishFinFlutter 0.8s ease-in-out infinite alternate;
}

.p4-hol-fishbowl:not(.active):not(.ending) .p4-fish-pectoral {
  transform-origin: 38px 64px;
  animation: p4FishFinFlutter 0.7s ease-in-out infinite alternate-reverse;
}

/* Bubbles float up continuously */
.p4-hol-fishbowl:not(.active):not(.ending) .p4-fish-bubble.bb1 {
  animation: p4FishBubbleRise 3s ease-in infinite;
}

.p4-hol-fishbowl:not(.active):not(.ending) .p4-fish-bubble.bb2 {
  animation: p4FishBubbleRise 3.5s ease-in infinite 1s;
}

.p4-hol-fishbowl:not(.active):not(.ending) .p4-fish-bubble.bb3 {
  animation: p4FishBubbleRise 2.8s ease-in infinite 2s;
}

/* Seaweed sways */
.p4-hol-fishbowl:not(.active):not(.ending) .p4-fish-weed.w1 {
  transform-origin: 24px 86px;
  animation: p4FishWeedSway 3s ease-in-out infinite alternate;
}

.p4-hol-fishbowl:not(.active):not(.ending) .p4-fish-weed.w2 {
  transform-origin: 56px 85px;
  animation: p4FishWeedSway 3.5s ease-in-out infinite alternate-reverse;
}

/* Caustics shimmer */
.p4-hol-fishbowl:not(.active):not(.ending) .p4-fish-caustics {
  animation: p4FishCaustics 4s ease-in-out infinite alternate;
}

/* Water surface gentle wobble */
.p4-hol-fishbowl:not(.active):not(.ending) .p4-fish-water-body {
  transform-origin: 40px 38px;
  animation: p4FishWaterIdle 3s ease-in-out infinite;
}

/* Bowl idle sway */
.p4-hol-fishbowl:not(.active):not(.ending) .p4-fish-bowl-group {
  animation: p4FishBowlIdle 5s ease-in-out infinite;
}

/* ── Hover ── */
.p4-hol-fishbowl:hover:not(.active):not(.ending) .p4-fish-bowl-group {
  transform: translateY(-2px) scale(1.03);
}

/* ── Active Click State ── */
.p4-hol-fishbowl.active .p4-fish-bowl-group {
  animation: p4FishBowlActive 2s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

.p4-hol-fishbowl.active .p4-fish-body-group {
  animation: p4FishPanic 2s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

.p4-hol-fishbowl.active .p4-fish-tail {
  transform-origin: 28px 62px;
  animation: p4FishTailWag 0.15s ease-in-out infinite alternate;
}

.p4-hol-fishbowl.active .p4-fish-water-body {
  transform-origin: 40px 38px;
  animation: p4FishWaterSplash 2s ease forwards;
}

.p4-hol-fishbowl.active .p4-fish-ground-shadow {
  animation: p4FishShadowActive 2s ease forwards;
}

/* Splash droplets during active */
.p4-hol-fishbowl.active .p4-fish-drop.fd1 {
  animation: p4FishDropFly1 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards 0.05s;
}

.p4-hol-fishbowl.active .p4-fish-drop.fd2 {
  animation: p4FishDropFly2 0.9s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards 0.1s;
}

.p4-hol-fishbowl.active .p4-fish-drop.fd3 {
  animation: p4FishDropFly3 1.1s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards 0.15s;
}

.p4-hol-fishbowl.active .p4-fish-drop.fd4 {
  animation: p4FishDropFly4 0.85s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards 0.08s;
}

.p4-hol-fishbowl.active .p4-fish-drop.fd5 {
  animation: p4FishDropFly5 0.95s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards 0.12s;
}

/* Splash ring */
.p4-hol-fishbowl.active .p4-fish-splash-ring {
  animation: p4FishSplashRing 0.7s cubic-bezier(0.165, 0.84, 0.44, 1) forwards 0.05s;
}

/* Active bubbles burst faster */
.p4-hol-fishbowl.active .p4-fish-bubble.bb1 {
  animation: p4FishBubbleRise 0.8s ease-in infinite;
}

.p4-hol-fishbowl.active .p4-fish-bubble.bb2 {
  animation: p4FishBubbleRise 0.6s ease-in infinite 0.2s;
}

.p4-hol-fishbowl.active .p4-fish-bubble.bb3 {
  animation: p4FishBubbleRise 0.7s ease-in infinite 0.1s;
}

/* ── Ending Settle State ── */
.p4-hol-fishbowl.ending .p4-fish-bowl-group {
  animation: p4FishBowlSettle 1.5s ease-out forwards;
}

.p4-hol-fishbowl.ending .p4-fish-body-group {
  animation: p4FishSettleSwim 1.5s ease-out forwards;
}

.p4-hol-fishbowl.ending .p4-fish-tail {
  transform-origin: 28px 62px;
  animation: p4FishTailWag 0.3s ease-in-out infinite alternate;
}

.p4-hol-fishbowl.ending .p4-fish-water-body {
  transform-origin: 40px 38px;
  animation: p4FishWaterSettle 1.5s ease-out forwards;
}

.p4-hol-fishbowl.ending .p4-fish-ground-shadow {
  animation: p4FishShadowSettle 1.5s ease-out forwards;
}

/* ═══ KEYFRAMES ═══ */
/* Fish swimming back and forth inside bowl */
@keyframes p4FishSwim {
  0%   { transform: translateX(0) scaleX(1); }

  24%  { transform: translateX(8px) scaleX(1); }

  25%  { transform: translateX(8px) scaleX(-1); }

  49%  { transform: translateX(-8px) scaleX(-1); }

  50%  { transform: translateX(-8px) scaleX(1); }

  74%  { transform: translateX(4px) scaleX(1); }

  75%  { transform: translateX(4px) scaleX(-1); }

  99%  { transform: translateX(0) scaleX(-1); }

  100% { transform: translateX(0) scaleX(1); }

}

/* Tail wagging */
@keyframes p4FishTailWag {
  0%   { transform: rotate(-8deg); }

  100% { transform: rotate(8deg); }

}

/* Fin fluttering */
@keyframes p4FishFinFlutter {
  0%   { transform: rotate(-5deg) scaleY(0.9); }

  100% { transform: rotate(5deg) scaleY(1.1); }

}

/* Bubbles floating up */
@keyframes p4FishBubbleRise {
  0%   { transform: translateY(0) scale(0.5); opacity: 0; }

  15%  { opacity: 0.6; }

  80%  { opacity: 0.3; }

  100% { transform: translateY(-25px) scale(1.2); opacity: 0; }

}

/* Seaweed sway */
@keyframes p4FishWeedSway {
  0%   { transform: rotate(-3deg); }

  100% { transform: rotate(3deg); }

}

/* Caustic shimmer */
@keyframes p4FishCaustics {
  0%   { opacity: 0.1; transform: translateX(0); }

  50%  { opacity: 0.2; transform: translateX(2px); }

  100% { opacity: 0.1; transform: translateX(-1px); }

}

/* Water surface gentle movement */
@keyframes p4FishWaterIdle {
  0%   { transform: scaleX(1); }

  50%  { transform: scaleX(1.01); }

  100% { transform: scaleX(1); }

}

/* Bowl idle sway */
@keyframes p4FishBowlIdle {
  0%   { transform: rotate(0deg) translateY(0); }

  25%  { transform: rotate(0.5deg) translateY(-0.5px); }

  50%  { transform: rotate(0deg) translateY(0); }

  75%  { transform: rotate(-0.5deg) translateY(-0.5px); }

  100% { transform: rotate(0deg) translateY(0); }

}

/* Active: bowl wobbles dramatically */
@keyframes p4FishBowlActive {
  0%   { transform: rotate(0deg) translateY(0); }

  8%   { transform: rotate(6deg) translateY(-5px); }

  18%  { transform: rotate(-8deg) translateY(-2px); }

  30%  { transform: rotate(5deg) translateY(-4px); }

  44%  { transform: rotate(-6deg) translateY(-1px); }

  58%  { transform: rotate(3deg) translateY(-2px); }

  72%  { transform: rotate(-2deg) translateY(-0.5px); }

  86%  { transform: rotate(1deg) translateY(0); }

  100% { transform: rotate(0deg) translateY(0); }

}

/* Fish panics and darts around */
@keyframes p4FishPanic {
  0%   { transform: translateX(0) translateY(0) scaleX(1); }

  8%   { transform: translateX(10px) translateY(-6px) scaleX(1); }

  16%  { transform: translateX(10px) translateY(-6px) scaleX(-1); }

  24%  { transform: translateX(-12px) translateY(4px) scaleX(-1); }

  32%  { transform: translateX(-12px) translateY(4px) scaleX(1); }

  40%  { transform: translateX(8px) translateY(-8px) scaleX(1); }

  48%  { transform: translateX(8px) translateY(-8px) scaleX(-1); }

  56%  { transform: translateX(-6px) translateY(2px) scaleX(-1); }

  64%  { transform: translateX(-6px) translateY(2px) scaleX(1); }

  72%  { transform: translateX(4px) translateY(-3px) scaleX(1); }

  80%  { transform: translateX(4px) translateY(-3px) scaleX(-1); }

  88%  { transform: translateX(-2px) translateY(1px) scaleX(-1); }

  94%  { transform: translateX(-2px) translateY(1px) scaleX(1); }

  100% { transform: translateX(0) translateY(0) scaleX(1); }

}

/* Water sloshing during active */
@keyframes p4FishWaterSplash {
  0%   { transform: scaleX(1) scaleY(1); }

  10%  { transform: scaleX(1.06) scaleY(0.92); }

  25%  { transform: scaleX(0.94) scaleY(1.08); }

  40%  { transform: scaleX(1.04) scaleY(0.96); }

  55%  { transform: scaleX(0.97) scaleY(1.04); }

  70%  { transform: scaleX(1.02) scaleY(0.99); }

  85%  { transform: scaleX(0.99) scaleY(1.01); }

  100% { transform: scaleX(1) scaleY(1); }

}

/* Shadow active */
@keyframes p4FishShadowActive {
  0%   { rx: 22; opacity: 0.12; }

  15%  { rx: 26; opacity: 0.06; }

  40%  { rx: 20; opacity: 0.16; }

  70%  { rx: 24; opacity: 0.10; }

  100% { rx: 22; opacity: 0.12; }

}

/* Water droplets flying out */
@keyframes p4FishDropFly1 {
  0%   { opacity: 0; transform: translate(0, 0) scale(1); }

  15%  { opacity: 0.9; }

  100% { opacity: 0; transform: translate(-15px, -30px) scale(0.3); }

}

@keyframes p4FishDropFly2 {
  0%   { opacity: 0; transform: translate(0, 0) scale(1); }

  15%  { opacity: 0.9; }

  100% { opacity: 0; transform: translate(12px, -35px) scale(0.3); }

}

@keyframes p4FishDropFly3 {
  0%   { opacity: 0; transform: translate(0, 0) scale(1); }

  15%  { opacity: 0.9; }

  100% { opacity: 0; transform: translate(0px, -40px) scale(0.2); }

}

@keyframes p4FishDropFly4 {
  0%   { opacity: 0; transform: translate(0, 0) scale(1); }

  15%  { opacity: 0.9; }

  100% { opacity: 0; transform: translate(18px, -25px) scale(0.3); }

}

@keyframes p4FishDropFly5 {
  0%   { opacity: 0; transform: translate(0, 0) scale(1); }

  15%  { opacity: 0.9; }

  100% { opacity: 0; transform: translate(-18px, -28px) scale(0.3); }

}

/* Splash ring expands */
@keyframes p4FishSplashRing {
  0%   { transform: scale(0.5); opacity: 0; }

  20%  { opacity: 0.7; }

  100% { transform: scale(2.8); opacity: 0; }

}

/* Settle: damped wobble back */
@keyframes p4FishBowlSettle {
  0%   { transform: rotate(0deg) translateY(0); }

  15%  { transform: rotate(2deg) translateY(-1.5px); }

  30%  { transform: rotate(-1.5deg) translateY(0.5px); }

  50%  { transform: rotate(1deg) translateY(-0.5px); }

  70%  { transform: rotate(-0.5deg) translateY(0); }

  85%  { transform: rotate(0.2deg) translateY(0); }

  100% { transform: rotate(0deg) translateY(0); }

}

/* Fish settles back to calm swimming */
@keyframes p4FishSettleSwim {
  0%   { transform: translateX(0) translateY(0) scaleX(1); }

  20%  { transform: translateX(5px) translateY(-2px) scaleX(1); }

  40%  { transform: translateX(5px) translateY(-2px) scaleX(-1); }

  60%  { transform: translateX(-3px) translateY(1px) scaleX(-1); }

  80%  { transform: translateX(-3px) translateY(1px) scaleX(1); }

  100% { transform: translateX(0) translateY(0) scaleX(1); }

}

/* Water settling */
@keyframes p4FishWaterSettle {
  0%   { transform: scaleX(1) scaleY(1); }

  25%  { transform: scaleX(1.02) scaleY(0.98); }

  50%  { transform: scaleX(0.99) scaleY(1.01); }

  75%  { transform: scaleX(1.005) scaleY(0.995); }

  100% { transform: scaleX(1) scaleY(1); }

}

/* Shadow settling */
@keyframes p4FishShadowSettle {
  0%   { rx: 22; opacity: 0.12; }

  30%  { rx: 24; opacity: 0.10; }

  60%  { rx: 21; opacity: 0.13; }

  100% { rx: 22; opacity: 0.12; }

}

/* ════════════════════════════
   7. Melting Ice Cream Cone
   ════════════════════════════ */
.p4-hol-icecream {
  position:absolute; bottom:25.5%; left:56.5%;
  width:25px; height:35px; cursor:pointer; z-index:5;
}

.p4-hol-icecream-svg {
  width:100%; height:100%; overflow:visible; display:block;
}

/* Idle (Standby) state */
.p4-hol-icecream:not(.active):not(.ending) .p4-ice-cone-group {
  animation: p4IceConeIdle 4s ease-in-out infinite;
  transform-origin: 20px 52px;
}

.p4-hol-icecream:not(.active) .p4-ice-drip-drop.d1 {
  animation: p4IceDripDrop1 4s infinite ease-in;
}

.p4-hol-icecream:not(.active) .p4-ice-drip-drop.d2 {
  animation: p4IceDripDrop2 4.5s infinite ease-in 1.5s;
}

.p4-hol-icecream:not(.active):not(.ending) .p4-ice-puddle {
  animation: p4IcePuddleIdle 4s ease-in-out infinite;
  transform-origin: 20px 54px;
}

/* Active Click state */
.p4-hol-icecream.active .p4-ice-cone-group {
  animation: p4IceConeActive 3s cubic-bezier(0.25, 0.8, 0.25, 1.2) forwards;
  transform-origin: 20px 52px;
}

.p4-hol-icecream.active .p4-ice-drip-drop.d1 {
  animation: p4IceDripActive1 0.6s infinite linear;
}

.p4-hol-icecream.active .p4-ice-drip-drop.d2 {
  animation: p4IceDripActive2 0.7s infinite linear 0.15s;
}

.p4-hol-icecream.active .p4-ice-puddle {
  animation: p4IcePuddleActive 3s cubic-bezier(0.19, 1, 0.22, 1) forwards;
  transform-origin: 20px 54px;
}

/* Ending Settle state */
.p4-hol-icecream.ending .p4-ice-cone-group {
  animation: p4IceConeSettle 1.5s ease-out forwards;
  transform-origin: 20px 52px;
}

.p4-hol-icecream.ending .p4-ice-puddle {
  animation: p4IcePuddleSettle 1.5s ease-out forwards;
  transform-origin: 20px 54px;
}

/* Keyframe Definitions for Melting Ice Cream Cone interaction */
@keyframes p4IceConeIdle {
  0%, 100% { transform: rotate(0deg) scale(1); }

  50% { transform: rotate(3deg) scaleY(0.96) scaleX(1.04); }

}

@keyframes p4IcePuddleIdle {
  0%, 100% { transform: scale(1); opacity: 0.9; }

  50% { transform: scale(1.15, 1.05); opacity: 1; }

}

@keyframes p4IceDripDrop1 {
  0% { transform: translateY(0); opacity: 0; }

  20% { transform: translateY(0); opacity: 1; }

  80% { transform: translateY(20px); opacity: 1; }

  90%, 100% { transform: translateY(24px); opacity: 0; }

}

@keyframes p4IceDripDrop2 {
  0% { transform: translateY(0); opacity: 0; }

  20% { transform: translateY(0); opacity: 1; }

  85% { transform: translateY(18px); opacity: 1; }

  95%, 100% { transform: translateY(22px); opacity: 0; }

}

@keyframes p4IceConeActive {
  0% { transform: scale(1) rotate(0deg); }

  10% { transform: scale(1.25, 0.65) translateY(2px) rotate(0deg); }

  22% { transform: scale(0.8, 1.3) translateY(-16px) rotate(-14deg); }

  38% { transform: scale(1.15, 0.85) translateY(0) rotate(12deg); }

  55% { transform: scale(0.94, 1.06) translateY(-6px) rotate(-9deg); }

  70% { transform: scale(1.04, 0.96) translateY(0) rotate(6deg); }

  85% { transform: scale(0.98, 1.02) translateY(0) rotate(-3deg); }

  100% { transform: scale(1) translateY(0) rotate(0deg); }

}

@keyframes p4IcePuddleActive {
  0% { transform: scale(1); }

  15% { transform: scale(1.9, 1.4); }

  30% { transform: scale(2.6, 1.7); }

  50% { transform: scale(2.3, 1.55); }

  70% { transform: scale(2.5, 1.65); }

  100% { transform: scale(2.4, 1.6); }

}

@keyframes p4IceDripActive1 {
  0% { transform: translateY(0); opacity: 0; }

  15% { transform: translateY(0); opacity: 1; }

  85% { transform: translateY(22px); opacity: 1; }

  100% { transform: translateY(24px); opacity: 0; }

}

@keyframes p4IceDripActive2 {
  0% { transform: translateY(0); opacity: 0; }

  15% { transform: translateY(0); opacity: 1; }

  85% { transform: translateY(20px); opacity: 1; }

  100% { transform: translateY(22px); opacity: 0; }

}

@keyframes p4IceConeSettle {
  0% { transform: scale(1) translateY(0) rotate(0deg); }

  20% { transform: scale(1.08, 0.92) rotate(5deg); }

  40% { transform: scale(0.96, 1.04) rotate(-4deg); }

  60% { transform: scale(1.03, 0.98) rotate(2deg); }

  80% { transform: scale(0.99, 1.01) rotate(-1deg); }

  100% { transform: scale(1) rotate(0deg); }

}

@keyframes p4IcePuddleSettle {
  0% { transform: scale(2.4, 1.6); }

  100% { transform: scale(1); }

}

/* ════════════════════════════
   9. Overflowing Tray
   ════════════════════════════ */
/* ════════════════════════════
   9. Overflowing Tray (Redesigned & Premium)
   ════════════════════════════ */
.p4-hol-tray {
  position: absolute; bottom: 25%; left: 40%;
  width: 36px; height: 22px; cursor: pointer; z-index: 4;
  perspective: 120px;
  transform-style: preserve-3d;
  transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* Idle hover effect */
.p4-hol-tray:hover {
  transform: translateY(-2px) scale(1.05);
}

.p4-hol-tray:hover .p4-hol-tray-glow {
  opacity: 0.85;
  filter: blur(8px);
}

.p4-hol-tray:hover .p4-hol-tray-led {
  animation: p4TrayLedPulse 0.4s infinite alternate;
}

/* Idle Floating Loop when not active or ending */
.p4-hol-tray:not(.active):not(.ending) {
  animation: p4TrayIdleLoop 3s infinite ease-in-out;
}

@keyframes p4TrayIdleLoop {
  0% { transform: translateY(0); }

  50% { transform: translateY(-2px) rotate(1deg); }

  100% { transform: translateY(0); }

}

/* Glow Underneath */
.p4-hol-tray-glow {
  position: absolute; bottom: -4px; left: 10%; width: 80%; height: 6px;
  background: radial-gradient(circle, rgba(236, 72, 153, 0.8) 0%, rgba(56, 189, 248, 0) 70%);
  filter: blur(4px); opacity: 0.5;
  transition: opacity 0.3s ease, filter 0.3s ease;
  pointer-events: none; z-index: 1;
}

/* Back Frame */
.p4-hol-tray-back {
  position: absolute; bottom: 4px; left: 2px; width: 32px; height: 14px;
  background: linear-gradient(to top, rgba(71, 85, 105, 0.8), rgba(148, 163, 184, 0.3));
  border: 1px solid rgba(148, 163, 184, 0.5);
  border-radius: 2px 2px 0 0;
  transform: translateZ(-4px) rotateX(10deg);
}

/* Stack of papers */
.p4-hol-tray-papers {
  position: absolute; bottom: 3px; left: 4px; width: 28px; height: 12px;
  transform-style: preserve-3d;
}

.p4-hol-tray-paper {
  position: absolute; bottom: 0; left: 0; width: 100%; height: 100%;
  border-radius: 1px;
  transform-origin: bottom center;
}

.p4-hol-tray-paper.p1 {
  background: linear-gradient(135deg, #fef08a, #facc15); /* Yellow folder */
  transform: rotate(-4deg) translateZ(-2px);
  box-shadow: 0 0 5px rgba(250, 204, 21, 0.4);
}

.p4-hol-tray-paper.p2 {
  background: linear-gradient(135deg, #ff007f, #ec4899); /* Hot pink folder */
  transform: rotate(3deg) translateZ(0px);
  width: 90%; left: 5%; height: 95%;
  box-shadow: 0 0 6px rgba(236, 72, 153, 0.5);
}

/* Front body panel (translucent glassmorphic inbox) */
.p4-hol-tray-body {
  width: 100%; height: 10px; 
  background: linear-gradient(135deg, rgba(56, 189, 248, 0.5), rgba(30, 41, 59, 0.85));
  border: 1.5px solid rgba(56, 189, 248, 0.7);
  box-shadow: 0 0 10px rgba(56, 189, 248, 0.4), inset 0 1px 3px rgba(255, 255, 255, 0.4);
  border-radius: 2px; position: absolute; bottom: 0;
  transform: translateZ(4px);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 3px; box-sizing: border-box;
}

/* Neon status LED on front panel */
.p4-hol-tray-led {
  width: 3px; height: 3px; border-radius: 50%;
  background: #ef4444;
  box-shadow: 0 0 4px #ef4444, 0 0 8px #ef4444;
  animation: p4TrayLedPulse 1s infinite alternate;
}

@keyframes p4TrayLedPulse {
  0% { background: #ef4444; box-shadow: 0 0 2px #ef4444; }

  100% { background: #ff8787; box-shadow: 0 0 6px #ff8787, 0 0 10px #ff8787; }

}

/* INBOX Label */
.p4-hol-tray-label {
  font-family: 'Outfit', sans-serif;
  font-size: 5px; font-weight: 800; color: #38bdf8;
  text-shadow: 0 0 3px rgba(56, 189, 248, 0.8);
  letter-spacing: 0.5px;
}

/* Erupting Emojis / Notes */
.p4-hol-tray-note {
  position: absolute; font-size: 11px; opacity: 0;
  pointer-events: none; z-index: 10;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3)) drop-shadow(0 0 4px rgba(255, 255, 255, 0.6));
  transform-origin: center center;
}

/* Individual start positions inside the tray */
.p4-hol-tray-note.n1 { bottom: 6px; left: 4px; }

.p4-hol-tray-note.n2 { bottom: 8px; left: 12px; }

.p4-hol-tray-note.n3 { bottom: 5px; left: 20px; }

.p4-hol-tray-note.n4 { bottom: 9px; left: 26px; }

/* Click Eruption Animations */
.p4-hol-tray.active .p4-hol-tray-note {
  opacity: 1;
}

.p4-hol-tray.active .p4-hol-tray-note.n1 {
  animation: p4TrayErupt1 1.8s cubic-bezier(0.1, 0.8, 0.3, 1) forwards;
}

.p4-hol-tray.active .p4-hol-tray-note.n2 {
  animation: p4TrayErupt2 1.8s cubic-bezier(0.1, 0.8, 0.3, 1) forwards 0.1s;
}

.p4-hol-tray.active .p4-hol-tray-note.n3 {
  animation: p4TrayErupt3 1.8s cubic-bezier(0.1, 0.8, 0.3, 1) forwards 0.2s;
}

.p4-hol-tray.active .p4-hol-tray-note.n4 {
  animation: p4TrayErupt4 1.8s cubic-bezier(0.1, 0.8, 0.3, 1) forwards 0.3s;
}

/* Custom curvilinear explosion trajectories for the notes */
@keyframes p4TrayErupt1 {
  0% { transform: translate(0, 0) scale(0.5) rotate(0deg); opacity: 0.8; }

  30% { opacity: 1; }

  80% { opacity: 0.8; }

  100% { transform: translate(-35px, -50px) scale(1.4) rotate(-360deg); opacity: 0; }

}

@keyframes p4TrayErupt2 {
  0% { transform: translate(0, 0) scale(0.5) rotate(0deg); opacity: 0.8; }

  30% { opacity: 1; }

  80% { opacity: 0.8; }

  100% { transform: translate(-10px, -65px) scale(1.4) rotate(270deg); opacity: 0; }

}

@keyframes p4TrayErupt3 {
  0% { transform: translate(0, 0) scale(0.5) rotate(0deg); opacity: 0.8; }

  30% { opacity: 1; }

  80% { opacity: 0.8; }

  100% { transform: translate(15px, -55px) scale(1.4) rotate(-180deg); opacity: 0; }

}

@keyframes p4TrayErupt4 {
  0% { transform: translate(0, 0) scale(0.5) rotate(0deg); opacity: 0.8; }

  30% { opacity: 1; }

  80% { opacity: 0.8; }

  100% { transform: translate(38px, -45px) scale(1.4) rotate(450deg); opacity: 0; }

}

/* Active Shaking Interaction */
.p4-hol-tray.active {
  animation: p4TrayActiveShake 0.4s ease-out;
}

.p4-hol-tray.active .p4-hol-tray-led {
  background: #facc15;
  box-shadow: 0 0 6px #facc15, 0 0 12px #facc15;
  animation: p4TrayLedPulse 0.1s infinite alternate;
}

.p4-hol-tray.active .p4-hol-tray-glow {
  opacity: 1;
  background: radial-gradient(circle, rgba(244, 63, 94, 0.95) 0%, rgba(56, 189, 248, 0) 70%);
  filter: blur(6px);
}

@keyframes p4TrayActiveShake {
  0%, 100% { transform: scale(1) translateY(0); }

  20%, 60% { transform: scale(1.15) translateY(-3px) rotate(-3deg); }

  40%, 80% { transform: scale(1.15) translateY(-3px) rotate(3deg); }

}

/* Ending Elastic Settle Animation */
.p4-hol-tray.ending {
  animation: p4TrayEndingSettle 1.2s cubic-bezier(0.25, 0.8, 0.25, 1) forwards;
}

@keyframes p4TrayEndingSettle {
  0% { transform: scale(1.15) translateY(-3px); }

  35% { transform: scale(0.88) translateY(1.5px); }

  60% { transform: scale(1.05) translateY(-0.8px); }

  85% { transform: scale(0.97) translateY(0.3px); }

  100% { transform: scale(1) translateY(0); }

}

/* ════════════════════════════
   10. Snoozing Laptop
   ════════════════════════════ */
.p4-hol-laptop {
  position: absolute; bottom: 22%; right: 26%; left: auto;
  width: 38px; height: 26px; cursor: pointer; z-index: 5;
  perspective: 150px;
  transform-style: preserve-3d;
  overflow: visible;
}

.p4-hol-laptop-wrapper {
  position: relative; width: 100%; height: 100%;
  transform-style: preserve-3d;
}

.p4-hol-lap-glow {
  position: absolute; bottom: 0; left: 10%; width: 80%; height: 60%;
  background: radial-gradient(circle, rgba(249, 115, 22, 0) 0%, rgba(236, 72, 153, 0) 75%);
  filter: blur(4px); opacity: 0;
  transition: opacity 0.5s ease, background 0.5s ease;
  pointer-events: none; z-index: 1;
}

.p4-hol-laptop.active .p4-hol-lap-glow {
  background: radial-gradient(circle, rgba(249, 115, 22, 0.75) 0%, rgba(236, 72, 153, 0) 75%);
  opacity: 1;
}

.p4-hol-lap-lid {
  position: absolute; bottom: 4px; left: 2px; width: 34px; height: 20px;
  transform-origin: bottom center;
  transform-style: preserve-3d;
  transform: rotateX(85deg); /* Closed state, covering the base */
  transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
  z-index: 3;
}

.p4-hol-laptop.active .p4-hol-lap-lid {
  transform: rotateX(-15deg); /* Fully open */
}

.p4-hol-laptop.ending .p4-hol-lap-lid {
  transform: rotateX(85deg); /* Closing down */
  transition: transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);
}

.p4-hol-lap-lid-back, .p4-hol-lap-screen {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  border-radius: 2px;
  backface-visibility: hidden;
}

.p4-hol-lap-lid-back {
  background: linear-gradient(135deg, #475569, #1e293b);
  border: 1px solid #64748b;
  transform: rotateY(0deg);
  display: flex; align-items: center; justify-content: center;
}

.p4-hol-lap-logo {
  width: 4px; height: 4px;
  background: rgba(255, 255, 255, 0.35);
  border-radius: 50%;
  box-shadow: 0 0 4px rgba(255, 255, 255, 0.3);
  animation: p4LogoPulse 3s infinite ease-in-out;
}

@keyframes p4LogoPulse {
  0%, 100% { opacity: 0.3; box-shadow: 0 0 2px rgba(255, 255, 255, 0.1); }

  50% { opacity: 1; box-shadow: 0 0 6px rgba(255, 255, 255, 0.6); }

}

.p4-hol-lap-screen {
  background: linear-gradient(135deg, #0f172a, #020617);
  border: 1px solid #334155;
  transform: rotateY(180deg);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  overflow: hidden;
  transition: background 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
}

.p4-hol-laptop.active .p4-hol-lap-screen {
  background: linear-gradient(135deg, #f97316, #ec4899);
  border-color: #f43f5e;
  box-shadow: inset 0 0 6px rgba(255, 255, 255, 0.4), 0 0 10px rgba(236, 72, 153, 0.4);
}

.p4-hol-lap-screen-content {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 0px; opacity: 0; transform: scale(0.8);
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.p4-hol-laptop.active .p4-hol-lap-screen-content {
  opacity: 1; transform: scale(1);
  transition-delay: 0.2s;
}

.p4-hol-lap-screen-icon {
  font-size: 6px;
  line-height: 1;
}

.p4-hol-lap-screen-text {
  font-size: 4px; font-weight: 900; color: #fff;
  font-family: var(--p4-font-mono, monospace);
  letter-spacing: 0.5px;
  text-shadow: 0 1px 1px rgba(0,0,0,0.5);
  line-height: 1;
  margin-top: 1px;
}

.p4-hol-lap-screen-glare {
  position: absolute; top: 0; left: 0; width: 200%; height: 100%;
  background: linear-gradient(45deg, rgba(255,255,255,0.2) 0%, rgba(255,255,255,0) 60%);
  transform: skewX(-30deg) translateX(-100%);
  transition: transform 0.6s ease;
}

.p4-hol-laptop.active .p4-hol-lap-screen-glare {
  transform: skewX(-30deg) translateX(100%);
  transition-delay: 0.1s;
}

.p4-hol-lap-base {
  position: absolute; bottom: 0; left: 0; width: 38px; height: 4px;
  background: linear-gradient(to bottom, #334155, #1e293b);
  border: 1px solid #475569;
  border-radius: 0 0 2px 2px;
  z-index: 2;
}

.p4-hol-lap-keyboard {
  position: absolute; top: 1px; left: 4px; right: 4px; height: 1.5px;
  display: flex; flex-direction: column; gap: 0.5px;
  opacity: 0.4;
  transition: opacity 0.5s ease;
}

.p4-hol-laptop.active .p4-hol-lap-keyboard {
  opacity: 1;
  filter: drop-shadow(0 0 1px #06b6d4);
}

.p4-hol-lap-keyrow {
  height: 0.5px;
  background: repeating-linear-gradient(to right, #475569 0px, #475569 2px, transparent 2px, transparent 3px);
}

.p4-hol-laptop.active .p4-hol-lap-keyrow {
  background: repeating-linear-gradient(to right, #22d3ee 0px, #22d3ee 2px, transparent 2px, transparent 3px);
}

.p4-hol-lap-trackpad {
  align-self: center; width: 6px; height: 0.5px;
  background: #475569; border-radius: 0.2px; margin-top: 0.2px;
}

.p4-hol-laptop.active .p4-hol-lap-trackpad {
  background: #22d3ee;
}

.p4-hol-lap-led {
  position: absolute; bottom: 1px; right: 4px; width: 1.5px; height: 1.5px;
  border-radius: 50%; background: #06b6d4;
  box-shadow: 0 0 3px #06b6d4;
  animation: p4LedBreathe 3s infinite ease-in-out;
}

@keyframes p4LedBreathe {
  0%, 100% { opacity: 0.2; box-shadow: 0 0 1px rgba(6, 182, 212, 0.2); }

  50% { opacity: 1; box-shadow: 0 0 4px rgba(6, 182, 212, 0.8); }

}

.p4-hol-laptop.active .p4-hol-lap-led {
  background: #10b981; box-shadow: 0 0 4px #10b981;
  animation: none;
}

.p4-hol-lap-zzz-container {
  position: absolute; top: -10px; right: -5px; width: 25px; height: 25px;
  pointer-events: none; overflow: visible;
}

.p4-hol-lap-zzz {
  position: absolute; font-family: var(--p4-font-mono, monospace);
  font-size: 7px; font-weight: 900; color: #a5f3fc; opacity: 0;
  text-shadow: 0 0 3px rgba(6, 182, 212, 0.6);
}

.p4-hol-lap-zzz.z1 { top: 10px; left: 5px; }

.p4-hol-lap-zzz.z2 { top: 15px; left: 12px; font-size: 5px; }

.p4-hol-lap-zzz.z3 { top: 5px; left: 8px; font-size: 9px; }

/* Idle Snore Floating (Gentle and Slow) */
.p4-hol-laptop:not(.active):not(.ending) .p4-hol-lap-zzz {
  animation: p4ZzzFloatIdle 6s infinite ease-in-out;
}

.p4-hol-laptop:not(.active):not(.ending) .p4-hol-lap-zzz.z1 { animation-delay: 0s; }

.p4-hol-laptop:not(.active):not(.ending) .p4-hol-lap-zzz.z2 { animation-delay: 2s; }

.p4-hol-laptop:not(.active):not(.ending) .p4-hol-lap-zzz.z3 { animation-delay: 4s; }

@keyframes p4ZzzFloatIdle {
  0% { transform: translate(0, 0) scale(0.8) rotate(0deg); opacity: 0; }

  10% { opacity: 0.35; }

  80% { opacity: 0; }

  100% { transform: translate(3px, -15px) scale(1.1) rotate(-10deg); opacity: 0; }

}

/* Active Snore Floating (Rapid, Glowing, Dynamic) */
.p4-hol-laptop.active .p4-hol-lap-zzz {
  animation: p4ZzzFloatActive 1.2s infinite ease-in-out;
  color: #fef08a; /* Golden yellow Zzzs */
  text-shadow: 0 0 4px #eab308;
}

.p4-hol-laptop.active .p4-hol-lap-zzz.z1 { animation-delay: 0s; }

.p4-hol-laptop.active .p4-hol-lap-zzz.z2 { animation-delay: 0.4s; }

.p4-hol-laptop.active .p4-hol-lap-zzz.z3 { animation-delay: 0.8s; }

@keyframes p4ZzzFloatActive {
  0% { transform: translate(0, 0) scale(0.6) rotate(0deg); opacity: 0; }

  20% { opacity: 1; }

  80% { opacity: 0.8; }

  100% { transform: translate(12px, -30px) scale(1.3) rotate(20deg); opacity: 0; }

}

/* Bubbles */
.p4-hol-lap-bubble {
  position: absolute; border-radius: 50%;
  background: radial-gradient(circle, rgba(56, 189, 248, 0.4) 0%, rgba(14, 165, 233, 0.1) 70%);
  border: 0.5px solid rgba(255,255,255,0.25);
  box-shadow: 0 0 3px rgba(56, 189, 248, 0.3);
  opacity: 0; pointer-events: none;
}

.p4-hol-lap-bubble.b1 { width: 5px; height: 5px; bottom: 8px; left: 2px; }

.p4-hol-lap-bubble.b2 { width: 3px; height: 3px; bottom: 12px; left: 8px; }

.p4-hol-laptop.active .p4-hol-lap-bubble {
  animation: p4BubbleFloatActive 1.6s infinite ease-in-out;
}

.p4-hol-laptop.active .p4-hol-lap-bubble.b1 { animation-delay: 0.2s; }

.p4-hol-laptop.active .p4-hol-lap-bubble.b2 { animation-delay: 0.8s; }

@keyframes p4BubbleFloatActive {
  0% { transform: translate(0, 0) scale(0.8); opacity: 0; }

  15% { opacity: 0.75; }

  85% { opacity: 0.6; }

  100% { transform: translate(-8px, -24px) scale(1.4); opacity: 0; }

}

/* ════════════════════════════
   11. Spinning Party Hat
   ════════════════════════════ */
.p4-hol-partyhat {
  position:absolute; bottom:25.5%; left:59.5%;
  width:26px; height:31px; cursor:pointer; z-index:5;
}

.p4-hol-partyhat-svg {
  width:100%; height:100%; overflow:visible; display:block;
}

/* Idle (Standby) state */
.p4-hol-partyhat:not(.active):not(.ending) .p4-hat-entire-group {
  animation: p4HatFloatIdle 3.6s ease-in-out infinite;
  transform-origin: 20px 38px;
}

.p4-hol-partyhat:not(.active):not(.ending) .p4-hat-entire-group > circle {
  animation: p4HatPomShine 2s infinite alternate;
  transform-origin: 20px 9px;
}

.p4-hol-partyhat:not(.active) .p4-confetti {
  opacity: 0;
}

/* Active Click state */
.p4-hol-partyhat.active .p4-hat-entire-group {
  animation: p4HatSpinActive 2s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
  transform-origin: 20px 38px;
}

.p4-hol-partyhat.active .p4-confetti.sq1 { animation: p4Confetti1 1.6s cubic-bezier(0.1, 0.8, 0.3, 1) forwards; }

.p4-hol-partyhat.active .p4-confetti.tr1 { animation: p4Confetti2 1.6s cubic-bezier(0.1, 0.8, 0.3, 1) forwards; }

.p4-hol-partyhat.active .p4-confetti.cr1 { animation: p4Confetti3 1.6s cubic-bezier(0.1, 0.8, 0.3, 1) forwards; }

.p4-hol-partyhat.active .p4-confetti.pl1 { animation: p4Confetti4 1.6s cubic-bezier(0.1, 0.8, 0.3, 1) forwards; }

.p4-hol-partyhat.active .p4-confetti.sq2 { animation: p4Confetti5 1.6s cubic-bezier(0.1, 0.8, 0.3, 1) forwards; }

.p4-hol-partyhat.active .p4-confetti.cr2 { animation: p4Confetti6 1.6s cubic-bezier(0.1, 0.8, 0.3, 1) forwards; }

/* Ending Settle state */
.p4-hol-partyhat.ending .p4-hat-entire-group {
  animation: p4HatSettle 1.5s ease-out forwards;
  transform-origin: 20px 38px;
}

/* Keyframe Definitions for Spinning Party Hat interaction */
@keyframes p4HatFloatIdle {
  0%, 100% { transform: translateY(0) rotate(0deg); }

  50% { transform: translateY(-3.5px) rotate(3deg); }

}

@keyframes p4HatPomShine {
  0% { transform: scale(1); filter: drop-shadow(0 0 1px #facc15); }

  100% { transform: scale(1.2); filter: drop-shadow(0 0 4px #f59e0b); }

}

@keyframes p4HatSpinActive {
  0% { transform: rotateY(0deg) scale(1) translateY(0); }

  30% { transform: rotateY(720deg) scale(0.85, 1.3) translateY(-14px); }

  60% { transform: rotateY(1080deg) scale(1.15, 0.85) translateY(0); }

  80% { transform: rotateY(1260deg) scale(0.95, 1.08) translateY(-3px); }

  100% { transform: rotateY(1440deg) scale(1) translateY(0); }

}

@keyframes p4Confetti1 {
  0% { transform: translate(0,0) rotate(0deg) scale(0); opacity: 0; }

  15% { transform: translate(-5px,-5px) rotate(45deg) scale(1.2); opacity: 1; }

  100% { transform: translate(-25px,-25px) rotate(270deg) scale(0.5); opacity: 0; }

}

@keyframes p4Confetti2 {
  0% { transform: translate(0,0) rotate(0deg) scale(0); opacity: 0; }

  15% { transform: translate(6px,-6px) rotate(-30deg) scale(1.2); opacity: 1; }

  100% { transform: translate(28px,-28px) rotate(-180deg) scale(0.5); opacity: 0; }

}

@keyframes p4Confetti3 {
  0% { transform: translate(0,0) rotate(0deg) scale(0); opacity: 0; }

  15% { transform: translate(-6px,-1px) rotate(60deg) scale(1.2); opacity: 1; }

  100% { transform: translate(-32px,-4px) rotate(320deg) scale(0.5); opacity: 0; }

}

@keyframes p4Confetti4 {
  0% { transform: translate(0,0) rotate(0deg) scale(0); opacity: 0; }

  15% { transform: translate(6px,2px) rotate(-45deg) scale(1.2); opacity: 1; }

  100% { transform: translate(30px,12px) rotate(-220deg) scale(0.5); opacity: 0; }

}

@keyframes p4Confetti5 {
  0% { transform: translate(0,0) rotate(0deg) scale(0); opacity: 0; }

  15% { transform: translate(-3px,6px) rotate(30deg) scale(1.2); opacity: 1; }

  100% { transform: translate(-15px,28px) rotate(190deg) scale(0.5); opacity: 0; }

}

@keyframes p4Confetti6 {
  0% { transform: translate(0,0) rotate(0deg) scale(0); opacity: 0; }

  15% { transform: translate(2px,-6px) rotate(-20deg) scale(1.2); opacity: 1; }

  100% { transform: translate(10px,-32px) rotate(-120deg) scale(0.5); opacity: 0; }

}

@keyframes p4HatSettle {
  0% { transform: rotateY(0deg) scale(1) translateY(0); }

  20% { transform: rotate(9deg) scaleY(0.9) scaleX(1.1); }

  40% { transform: rotate(-7deg) scaleY(1.06) scaleX(0.94); }

  60% { transform: rotate(4.5deg) scaleY(0.98) scaleX(1.02); }

  80% { transform: rotate(-2deg) scale(1); }

  100% { transform: rotate(0deg) scale(1); }

}

/* ════════════════════════════
   12. Popping Champagne
   ════════════════════════════ */
.p4-hol-champagne {
  position:absolute; bottom:25%; right:5%;
  width:24px; height:56px; cursor:pointer; z-index:5;
  transform-origin: bottom center;
}

.p4-hol-champ-wrap {
  width:100%; height:100%; position:relative;
  transform-origin: bottom center;
}

.p4-hol-champ-svg {
  width:100%; height:100%; display:block;
}

/* Cork Pop Active */
.p4-hol-champagne.active .p4-champ-cork-el,
.p4-hol-champagne.active .p4-champ-cork-wire {
  animation: p4ChampCorkPopActive 0.6s cubic-bezier(0.1, 0.8, 0.3, 1) forwards;
}

@keyframes p4ChampCorkPopActive {
  0% { transform: translateY(0) rotate(0); opacity: 1; }

  30% { transform: translateY(-40px) rotate(45deg); opacity: 1; }

  100% { transform: translateY(-90px) rotate(180deg); opacity: 0; }

}

/* Foil Tear Active */
.p4-hol-champagne.active .p4-champ-foil-neck {
  animation: p4ChampFoilTearActive 0.6s ease forwards;
}


/* Fallback mapping keyframe name fix */
@keyframes p4ChampFoilTearActive {
  0% { transform: translateY(0) scaleY(1); opacity: 1; }

  40% { transform: translateY(-10px) rotate(-10deg) scale(1.1); opacity: 0.8; }

  100% { transform: translateY(15px) rotate(-35deg) scale(0); opacity: 0; }

}

/* Bottle Recoil Active */
.p4-hol-champagne.active .p4-hol-champ-wrap {
  animation: p4ChampBottleRecoilActive 0.6s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

@keyframes p4ChampBottleRecoilActive {
  0% { transform: scale(1) translateY(0); }

  15% { transform: scale(0.9, 1.1) translateY(8px) rotate(-8deg); }

  30% { transform: scale(1.15, 0.85) translateY(-4px) rotate(4deg); }

  50% { transform: scale(0.95, 1.05) translateY(2px) rotate(-2deg); }

  70% { transform: scale(1.02, 0.98) translateY(-1px); }

  100% { transform: scale(1) translateY(0); }

}

/* Bottle Wobble Ending */
.p4-hol-champagne.ending .p4-hol-champ-wrap {
  animation: p4ChampEndingWobble 1.5s ease-out forwards;
}

@keyframes p4ChampEndingWobble {
  0% { transform: rotate(0); }

  20% { transform: rotate(-6deg); }

  40% { transform: rotate(4deg); }

  60% { transform: rotate(-2deg); }

  80% { transform: rotate(1deg); }

  100% { transform: rotate(0); }

}

/* Explosion Spray & Foam (Active) */
.p4-hol-champ-explosion {
  position: absolute;
  top: 0; left: 50%;
  width: 0; height: 0;
  pointer-events: none;
}

.p4-champ-bubble {
  position: absolute;
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid #facc15;
  border-radius: 50%;
  width: 6px; height: 6px;
  opacity: 0;
  box-shadow: 0 0 6px #facc15;
}

.p4-champ-sparkle {
  position: absolute;
  font-size: 11px;
  opacity: 0;
  text-shadow: 0 0 4px #fbbf24;
}

.p4-hol-champagne.active .p4-champ-bubble.cb1 { animation: cbExplode1 1.2s ease-out forwards; }

.p4-hol-champagne.active .p4-champ-bubble.cb2 { animation: cbExplode2 1.4s ease-out forwards; }

.p4-hol-champagne.active .p4-champ-bubble.cb3 { animation: cbExplode3 1.0s ease-out forwards; }

.p4-hol-champagne.active .p4-champ-bubble.cb4 { animation: cbExplode4 1.3s ease-out forwards; }

.p4-hol-champagne.active .p4-champ-sparkle.cs1 { animation: csExplode1 1.4s ease-out forwards; }

.p4-hol-champagne.active .p4-champ-sparkle.cs2 { animation: csExplode2 1.2s ease-out forwards; }

.p4-hol-champagne.active .p4-champ-sparkle.cs3 { animation: csExplode3 1.5s ease-out forwards; }

.p4-hol-champagne.active .p4-champ-foam {
  position: absolute;
  background: #ffffff;
  width: 14px; height: 14px;
  border-radius: 50%;
  top: -6px; left: -7px;
  opacity: 0;
  animation: champFoamAnim 0.9s ease-out forwards;
  filter: blur(1px);
  box-shadow: 0 0 8px rgba(255,255,255,0.6);
}

@keyframes cbExplode1 {
  0% { transform: translate(-3px, 0) scale(0.2); opacity: 0; }

  15% { opacity: 1; }

  100% { transform: translate(-22px, -60px) scale(1.4); opacity: 0; }

}

@keyframes cbExplode2 {
  0% { transform: translate(3px, 0) scale(0.2); opacity: 0; }

  15% { opacity: 1; }

  100% { transform: translate(18px, -80px) scale(1.1); opacity: 0; }

}

@keyframes cbExplode3 {
  0% { transform: translate(0, 0) scale(0.2); opacity: 0; }

  15% { opacity: 1; }

  100% { transform: translate(-8px, -95px) scale(1.6); opacity: 0; }

}

@keyframes cbExplode4 {
  0% { transform: translate(1px, 0) scale(0.2); opacity: 0; }

  15% { opacity: 1; }

  100% { transform: translate(12px, -50px) scale(1.3); opacity: 0; }

}

@keyframes csExplode1 {
  0% { transform: translate(-2px, 0) scale(0.2) rotate(0); opacity: 0; }

  15% { opacity: 1; }

  100% { transform: translate(-30px, -85px) scale(1.5) rotate(180deg); opacity: 0; }

}

@keyframes csExplode2 {
  0% { transform: translate(2px, 0) scale(0.2) rotate(0); opacity: 0; }

  15% { opacity: 1; }

  100% { transform: translate(30px, -70px) scale(1.3) rotate(-120deg); opacity: 0; }

}

@keyframes csExplode3 {
  0% { transform: translate(0, 0) scale(0.2) rotate(0); opacity: 0; }

  15% { opacity: 1; }

  100% { transform: translate(4px, -115px) scale(1.4) rotate(360deg); opacity: 0; }

}

@keyframes champFoamAnim {
  0% { transform: scale(0.5); opacity: 0; }

  10% { opacity: 1; }

  50% { transform: scale(2.2) translateY(-12px); opacity: 0.85; }

  100% { transform: scale(3.2) translateY(-25px); opacity: 0; }

}

/* Smoke Wisp (Ending) */
.p4-hol-champ-smoke {
  position: absolute;
  top: -28px; left: 2px;
  width: 20px; height: 40px;
  pointer-events: none;
  opacity: 0;
}

.p4-hol-champagne.ending .p4-hol-champ-smoke {
  opacity: 1;
}

.p4-smoke-svg {
  width: 100%; height: 100%;
}

.p4-smoke-path {
  stroke-dasharray: 60;
  stroke-dashoffset: 60;
  animation: p4SmokeRise 1.5s ease-out forwards;
}

@keyframes p4SmokeRise {
  0% { stroke-dashoffset: 60; opacity: 0.8; }

  40% { stroke-dashoffset: 20; opacity: 0.5; }

  100% { stroke-dashoffset: -20; opacity: 0; }

}

/* ════════════════════════════
   13. Confetti Cannon
   ════════════════════════════ */
.p4-hol-confetti-cannon {
  position:absolute; top:2%; left:45%;
  width:40px; height:70px; cursor:pointer; z-index:6;
}

body.p4.day.holiday-mode .p4-hol-confetti-cannon {
  left: 28%;
  top: -2%;
}

.p4-hol-cc-string {
  width:1px; height:20px;
  background:rgba(255,255,255,0.4);
  margin:0 auto;
}

.p4-hol-cc-body {
  width:30px; height:50px;
  margin:0 auto;
  position:relative;
  transform-origin:top center;
  transform:rotate(20deg);
  transition:transform 0.3s;
}

.p4-hol-confetti-cannon.active .p4-hol-cc-body {
  animation: p4HolCCRecoil 0.6s ease-out;
}

.p4-hol-confetti-cannon.ending .p4-hol-cc-body {
  animation: p4HolCCSwingSettle 1.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

.p4-hol-cc-tube {
  width:12px; height:26px;
  background:linear-gradient(135deg,#ffd700,#ff8c00);
  border-radius:3px; position:absolute; top:0; left:9px;
  border:1px solid #ffffff;
  box-shadow:0 0 8px rgba(255,215,0,0.6), inset 1px 1px rgba(255,255,255,0.3);
  overflow:hidden;
}

.p4-hol-cc-tube::after {
  content:''; position:absolute;
  top:-10px; left:-10px; right:-10px; bottom:-10px;
  background:repeating-linear-gradient(45deg, transparent, transparent 4px, rgba(236,72,153,0.6) 4px, rgba(236,72,153,0.6) 8px);
}

.p4-hol-cc-cap {
  width:14px; height:4px;
  background:linear-gradient(90deg,#db2777,#ec4899,#db2777);
  position:absolute; top:25px; left:8px;
  border-radius:1px;
}

.p4-hol-cc-ring {
  width:14px; height:2px;
  background:#ffffff; position:absolute; top:5px; left:8px;
  opacity:0.7;
}

.p4-hol-cc-pullcord {
  position:absolute; top:29px; left:14px;
  width:2px; height:22px;
  transform-origin:top center;
}

.p4-hol-cc-cord {
  width:1px; height:14px;
  background:#ffffff; margin:0 auto;
  opacity:0.8;
}

.p4-hol-cc-ring-handle {
  width:6px; height:6px;
  border:1px solid #ffffff; border-radius:50%;
  background:rgba(255,255,255,0.2);
  margin:-1px auto 0;
  box-shadow:0 0 4px rgba(255,255,255,0.5);
}

.p4-hol-confetti-cannon.active .p4-hol-cc-pullcord {
  animation: p4HolCCPullCord 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.p4-hol-cc-burst {
  position:absolute; font-size:16px; opacity:0; pointer-events:none;
  top:20px; left:12px; transform-origin:center;
}

.p4-hol-confetti-cannon.active .p4-hol-cc-burst {
  opacity:1; animation: p4HolCCBurstAnim 1.2s cubic-bezier(0.1, 0.8, 0.3, 1) forwards;
}

.p4-hol-cc-burst.b1 { --tx: 30px; --ty: 75px; --rot: 45deg; --scale: 1.3; animation-delay: 0s; }

.p4-hol-cc-burst.b2 { --tx: 75px; --ty: 45px; --rot: -90deg; --scale: 1.4; animation-delay: 0.05s; }

.p4-hol-cc-burst.b3 { --tx: 50px; --ty: 95px; --rot: 180deg; --scale: 1.2; animation-delay: 0.1s; }

.p4-hol-cc-burst.b4 { --tx: 95px; --ty: 70px; --rot: -45deg; --scale: 1.5; animation-delay: 0.08s; }

.p4-hol-cc-burst.b5 { --tx: 10px; --ty: 110px; --rot: 120deg; --scale: 1.3; animation-delay: 0.12s; }

.p4-hol-cc-burst.b6 { --tx: 115px; --ty: 35px; --rot: -135deg; --scale: 1.4; animation-delay: 0.15s; }

.p4-hol-cc-burst.b7 { --tx: -20px; --ty: 85px; --rot: 60deg; --scale: 1.2; animation-delay: 0.18s; }

.p4-hol-cc-burst.b8 { --tx: 60px; --ty: 125px; --rot: 240deg; --scale: 1.5; animation-delay: 0.2s; }

/* Confetti Cannon Keyframes */
@keyframes p4HolCCRecoil {
  0% { transform: rotate(20deg) translate(0, 0); }

  15% { transform: rotate(5deg) translate(-5px, -12px) scale(0.95); }

  40% { transform: rotate(28deg) translate(2px, 3px); }

  65% { transform: rotate(15deg) translate(-1px, -2px); }

  85% { transform: rotate(22deg) translate(1px, 1px); }

  100% { transform: rotate(20deg) translate(0, 0); }

}

@keyframes p4HolCCPullCord {
  0% { transform: translateY(0); }

  30% { transform: translateY(8px) scaleY(0.8); }

  100% { transform: translateY(0) scaleY(1); }

}

@keyframes p4HolCCBurstAnim {
  0% { transform: translate(0, 0) rotate(0deg) scale(0.3); opacity: 0; }

  15% { opacity: 1; }

  80% { opacity: 1; transform: translate(var(--tx), var(--ty)) rotate(var(--rot)) scale(var(--scale)); }

  100% { transform: translate(calc(var(--tx) * 1.15), calc(var(--ty) * 1.15)) rotate(calc(var(--rot) * 1.2)) scale(0); opacity: 0; }

}

@keyframes p4HolCCSwingSettle {
  0% { transform: rotate(20deg); }

  20% { transform: rotate(-15deg); }

  40% { transform: rotate(10deg); }

  60% { transform: rotate(-6deg); }

  80% { transform: rotate(3deg); }

  100% { transform: rotate(20deg); }

}

/* ════════════════════════════
   14. Piñata
   ════════════════════════════ */
.p4-hol-pinata {
  position:absolute; top:3%; right:35%;
  width:60px; height:70px; cursor:pointer; z-index:5;
  transform-origin: top center;
  animation: p4HolPinataIdle 5s ease-in-out infinite alternate;
}

body.p4.day.holiday-mode .p4-hol-pinata {
  top: -1%;
}

.p4-hol-pinata[class*="active-"], .p4-hol-pinata.ending:not(.ending-5) {
  animation: none;
}

.p4-hol-pin-string { width:2px; height:20px; background:linear-gradient(#64748b, #94a3b8); margin:0 auto; }

.p4-hol-pin-body { font-size:38px; text-align:center; transform-origin:top center; filter: drop-shadow(0 4px 6px rgba(0,0,0,0.15)); transition: transform 0.1s; }

.p4-hol-pin-candy {
  position:absolute; font-size:16px; opacity:0; pointer-events:none;
  top:32px; left:20px; transform-origin:center;
}

/* Active Animations on Body */
.p4-hol-pinata.active-1 .p4-hol-pin-body {
  animation: p4HolPinataActive1 0.4s infinite alternate ease-in-out;
}

.p4-hol-pinata.active-2 .p4-hol-pin-body {
  animation: p4HolPinataActive2 0.7s infinite linear;
}

.p4-hol-pinata.active-3 .p4-hol-pin-body {
  animation: p4HolPinataActive3 0.12s infinite linear;
}

.p4-hol-pinata.active-4 .p4-hol-pin-body {
  animation: p4HolPinataActive4 0.6s infinite ease-in-out;
}

/* Active Animation 5 on Container */
.p4-hol-pinata.active-5 {
  animation: p4HolPinataActive5 1.2s infinite linear;
}

/* Ending Settle states */
.p4-hol-pinata.ending-1 .p4-hol-pin-body {
  animation: p4HolPinataSettle1 1.5s ease-out forwards;
  transform-origin: top center;
}

.p4-hol-pinata.ending-2 .p4-hol-pin-body {
  animation: p4HolPinataSettle2 1.5s ease-out forwards;
  transform-origin: top center;
}

.p4-hol-pinata.ending-3 .p4-hol-pin-body {
  animation: p4HolPinataSettle3 1.5s ease-out forwards;
  transform-origin: top center;
}

.p4-hol-pinata.ending-4 .p4-hol-pin-body {
  animation: p4HolPinataSettle4 1.5s ease-out forwards;
  transform-origin: top center;
}

.p4-hol-pinata.ending-5 {
  animation: p4HolPinataContainerSettle 1.5s ease-out forwards;
  transform-origin: top center;
}

/* Click 1: Sweets Pop Out (loot1 to loot20) - Wide Horizontal Bouncy Pop */
.p4-hol-pinata.active-1 .p4-hol-pin-candy.loot1 { --tx: -95px; --ty: 35px; --rot: 207deg; --scale: 1.3; animation: p4HolLootPopOut 1.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards 0s; }

.p4-hol-pinata.active-1 .p4-hol-pin-candy.loot2 { --tx: -85px; --ty: 52.4px; --rot: -234deg; --scale: 1.5; animation: p4HolLootPopOut 1.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards 0s; }

.p4-hol-pinata.active-1 .p4-hol-pin-candy.loot3 { --tx: -75px; --ty: 49.6px; --rot: 261deg; --scale: 1.2; animation: p4HolLootPopOut 1.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards 0.1s; }

.p4-hol-pinata.active-1 .p4-hol-pin-candy.loot4 { --tx: -65px; --ty: 66.4px; --rot: -288deg; --scale: 1.3; animation: p4HolLootPopOut 1.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards 0.1s; }

.p4-hol-pinata.active-1 .p4-hol-pin-candy.loot5 { --tx: -55px; --ty: 62.6px; --rot: 315deg; --scale: 1.5; animation: p4HolLootPopOut 1.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards 0.1s; }

.p4-hol-pinata.active-1 .p4-hol-pin-candy.loot6 { --tx: -45px; --ty: 78.1px; --rot: -342deg; --scale: 1.2; animation: p4HolLootPopOut 1.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards 0.1s; }

.p4-hol-pinata.active-1 .p4-hol-pin-candy.loot7 { --tx: -35px; --ty: 72.7px; --rot: 369deg; --scale: 1.3; animation: p4HolLootPopOut 1.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards 0.1s; }

.p4-hol-pinata.active-1 .p4-hol-pin-candy.loot8 { --tx: -25px; --ty: 86.2px; --rot: -396deg; --scale: 1.5; animation: p4HolLootPopOut 1.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards 0.2s; }

.p4-hol-pinata.active-1 .p4-hol-pin-candy.loot9 { --tx: -15px; --ty: 78.6px; --rot: 423deg; --scale: 1.2; animation: p4HolLootPopOut 1.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards 0.2s; }

.p4-hol-pinata.active-1 .p4-hol-pin-candy.loot10 { --tx: -5px; --ty: 89.8px; --rot: -450deg; --scale: 1.3; animation: p4HolLootPopOut 1.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards 0.2s; }

.p4-hol-pinata.active-1 .p4-hol-pin-candy.loot11 { --tx: 5px; --ty: 79.8px; --rot: 477deg; --scale: 1.5; animation: p4HolLootPopOut 1.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards 0.2s; }

.p4-hol-pinata.active-1 .p4-hol-pin-candy.loot12 { --tx: 15px; --ty: 88.6px; --rot: -504deg; --scale: 1.2; animation: p4HolLootPopOut 1.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards 0.2s; }

.p4-hol-pinata.active-1 .p4-hol-pin-candy.loot13 { --tx: 25px; --ty: 76.2px; --rot: 531deg; --scale: 1.3; animation: p4HolLootPopOut 1.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards 0.3s; }

.p4-hol-pinata.active-1 .p4-hol-pin-candy.loot14 { --tx: 35px; --ty: 82.7px; --rot: -558deg; --scale: 1.5; animation: p4HolLootPopOut 1.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards 0.3s; }

.p4-hol-pinata.active-1 .p4-hol-pin-candy.loot15 { --tx: 45px; --ty: 68.1px; --rot: 585deg; --scale: 1.2; animation: p4HolLootPopOut 1.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards 0.3s; }

.p4-hol-pinata.active-1 .p4-hol-pin-candy.loot16 { --tx: 55px; --ty: 72.6px; --rot: -612deg; --scale: 1.3; animation: p4HolLootPopOut 1.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards 0.3s; }

.p4-hol-pinata.active-1 .p4-hol-pin-candy.loot17 { --tx: 65px; --ty: 56.4px; --rot: 639deg; --scale: 1.5; animation: p4HolLootPopOut 1.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards 0.3s; }

.p4-hol-pinata.active-1 .p4-hol-pin-candy.loot18 { --tx: 75px; --ty: 59.6px; --rot: -666deg; --scale: 1.2; animation: p4HolLootPopOut 1.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards 0.4s; }

.p4-hol-pinata.active-1 .p4-hol-pin-candy.loot19 { --tx: 85px; --ty: 42.4px; --rot: 693deg; --scale: 1.3; animation: p4HolLootPopOut 1.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards 0.4s; }

.p4-hol-pinata.active-1 .p4-hol-pin-candy.loot20 { --tx: 95px; --ty: 45px; --rot: -720deg; --scale: 1.5; animation: p4HolLootPopOut 1.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards 0.4s; }

/* Click 2: Fruit Cascade (loot21 to loot40) - Gravity Falling Drips */
.p4-hol-pinata.active-2 .p4-hol-pin-candy.loot21 { --tx: -30px; --ty: 155px; --rot: -180deg; --scale: 1.2; animation: p4HolLootDrop 1.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards 0s; }

.p4-hol-pinata.active-2 .p4-hol-pin-candy.loot22 { --tx: -26.8px; --ty: 140px; --rot: 216deg; --scale: 1.3; animation: p4HolLootDrop 1.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards 0s; }

.p4-hol-pinata.active-2 .p4-hol-pin-candy.loot23 { --tx: -23.7px; --ty: 175px; --rot: -252deg; --scale: 1.4; animation: p4HolLootDrop 1.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards 0.1s; }

.p4-hol-pinata.active-2 .p4-hol-pin-candy.loot24 { --tx: -20.5px; --ty: 130px; --rot: 288deg; --scale: 1.5; animation: p4HolLootDrop 1.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards 0.1s; }

.p4-hol-pinata.active-2 .p4-hol-pin-candy.loot25 { --tx: -17.4px; --ty: 165px; --rot: -324deg; --scale: 1.2; animation: p4HolLootDrop 1.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards 0.1s; }

.p4-hol-pinata.active-2 .p4-hol-pin-candy.loot26 { --tx: -14.2px; --ty: 150px; --rot: 360deg; --scale: 1.3; animation: p4HolLootDrop 1.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards 0.1s; }

.p4-hol-pinata.active-2 .p4-hol-pin-candy.loot27 { --tx: -11.1px; --ty: 155px; --rot: -396deg; --scale: 1.4; animation: p4HolLootDrop 1.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards 0.1s; }

.p4-hol-pinata.active-2 .p4-hol-pin-candy.loot28 { --tx: -7.9px; --ty: 140px; --rot: 432deg; --scale: 1.5; animation: p4HolLootDrop 1.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards 0.2s; }

.p4-hol-pinata.active-2 .p4-hol-pin-candy.loot29 { --tx: -4.7px; --ty: 175px; --rot: -468deg; --scale: 1.2; animation: p4HolLootDrop 1.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards 0.2s; }

.p4-hol-pinata.active-2 .p4-hol-pin-candy.loot30 { --tx: -1.6px; --ty: 130px; --rot: 504deg; --scale: 1.3; animation: p4HolLootDrop 1.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards 0.2s; }

.p4-hol-pinata.active-2 .p4-hol-pin-candy.loot31 { --tx: 1.6px; --ty: 165px; --rot: -540deg; --scale: 1.4; animation: p4HolLootDrop 1.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards 0.2s; }

.p4-hol-pinata.active-2 .p4-hol-pin-candy.loot32 { --tx: 4.7px; --ty: 150px; --rot: 576deg; --scale: 1.5; animation: p4HolLootDrop 1.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards 0.2s; }

.p4-hol-pinata.active-2 .p4-hol-pin-candy.loot33 { --tx: 7.9px; --ty: 155px; --rot: -612deg; --scale: 1.2; animation: p4HolLootDrop 1.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards 0.3s; }

.p4-hol-pinata.active-2 .p4-hol-pin-candy.loot34 { --tx: 11.1px; --ty: 140px; --rot: 648deg; --scale: 1.3; animation: p4HolLootDrop 1.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards 0.3s; }

.p4-hol-pinata.active-2 .p4-hol-pin-candy.loot35 { --tx: 14.2px; --ty: 175px; --rot: -684deg; --scale: 1.4; animation: p4HolLootDrop 1.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards 0.3s; }

.p4-hol-pinata.active-2 .p4-hol-pin-candy.loot36 { --tx: 17.4px; --ty: 130px; --rot: 720deg; --scale: 1.5; animation: p4HolLootDrop 1.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards 0.3s; }

.p4-hol-pinata.active-2 .p4-hol-pin-candy.loot37 { --tx: 20.5px; --ty: 165px; --rot: -756deg; --scale: 1.2; animation: p4HolLootDrop 1.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards 0.3s; }

.p4-hol-pinata.active-2 .p4-hol-pin-candy.loot38 { --tx: 23.7px; --ty: 150px; --rot: 792deg; --scale: 1.3; animation: p4HolLootDrop 1.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards 0.4s; }

.p4-hol-pinata.active-2 .p4-hol-pin-candy.loot39 { --tx: 26.8px; --ty: 155px; --rot: -828deg; --scale: 1.4; animation: p4HolLootDrop 1.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards 0.4s; }

.p4-hol-pinata.active-2 .p4-hol-pin-candy.loot40 { --tx: 30px; --ty: 140px; --rot: 864deg; --scale: 1.5; animation: p4HolLootDrop 1.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards 0.4s; }

/* Click 3: Toy Fountain (loot41 to loot60) - High Parabolic Fountain Arcs */
.p4-hol-pinata.active-3 .p4-hol-pin-candy.loot41 { --tx: -80px; --ty: 60px; --rot: -360deg; --scale: 1.2; animation: p4HolLootArc 1.5s cubic-bezier(0.215, 0.61, 0.355, 1) forwards 0s; }

.p4-hol-pinata.active-3 .p4-hol-pin-candy.loot42 { --tx: -71.6px; --ty: 65.8px; --rot: 378deg; --scale: 1.3; animation: p4HolLootArc 1.5s cubic-bezier(0.215, 0.61, 0.355, 1) forwards 0s; }

.p4-hol-pinata.active-3 .p4-hol-pin-candy.loot43 { --tx: -63.2px; --ty: 71.4px; --rot: -396deg; --scale: 1.5; animation: p4HolLootArc 1.5s cubic-bezier(0.215, 0.61, 0.355, 1) forwards 0.1s; }

.p4-hol-pinata.active-3 .p4-hol-pin-candy.loot44 { --tx: -54.7px; --ty: 76.7px; --rot: 414deg; --scale: 1.2; animation: p4HolLootArc 1.5s cubic-bezier(0.215, 0.61, 0.355, 1) forwards 0.1s; }

.p4-hol-pinata.active-3 .p4-hol-pin-candy.loot45 { --tx: -46.3px; --ty: 81.5px; --rot: -432deg; --scale: 1.3; animation: p4HolLootArc 1.5s cubic-bezier(0.215, 0.61, 0.355, 1) forwards 0.1s; }

.p4-hol-pinata.active-3 .p4-hol-pin-candy.loot46 { --tx: -37.9px; --ty: 85.8px; --rot: 450deg; --scale: 1.5; animation: p4HolLootArc 1.5s cubic-bezier(0.215, 0.61, 0.355, 1) forwards 0.1s; }

.p4-hol-pinata.active-3 .p4-hol-pin-candy.loot47 { --tx: -29.5px; --ty: 89.3px; --rot: -468deg; --scale: 1.2; animation: p4HolLootArc 1.5s cubic-bezier(0.215, 0.61, 0.355, 1) forwards 0.1s; }

.p4-hol-pinata.active-3 .p4-hol-pin-candy.loot48 { --tx: -21.1px; --ty: 92.1px; --rot: 486deg; --scale: 1.3; animation: p4HolLootArc 1.5s cubic-bezier(0.215, 0.61, 0.355, 1) forwards 0.2s; }

.p4-hol-pinata.active-3 .p4-hol-pin-candy.loot49 { --tx: -12.6px; --ty: 93.9px; --rot: -504deg; --scale: 1.5; animation: p4HolLootArc 1.5s cubic-bezier(0.215, 0.61, 0.355, 1) forwards 0.2s; }

.p4-hol-pinata.active-3 .p4-hol-pin-candy.loot50 { --tx: -4.2px; --ty: 94.9px; --rot: 522deg; --scale: 1.2; animation: p4HolLootArc 1.5s cubic-bezier(0.215, 0.61, 0.355, 1) forwards 0.2s; }

.p4-hol-pinata.active-3 .p4-hol-pin-candy.loot51 { --tx: 4.2px; --ty: 94.9px; --rot: -540deg; --scale: 1.3; animation: p4HolLootArc 1.5s cubic-bezier(0.215, 0.61, 0.355, 1) forwards 0.2s; }

.p4-hol-pinata.active-3 .p4-hol-pin-candy.loot52 { --tx: 12.6px; --ty: 93.9px; --rot: 558deg; --scale: 1.5; animation: p4HolLootArc 1.5s cubic-bezier(0.215, 0.61, 0.355, 1) forwards 0.2s; }

.p4-hol-pinata.active-3 .p4-hol-pin-candy.loot53 { --tx: 21.1px; --ty: 92.1px; --rot: -576deg; --scale: 1.2; animation: p4HolLootArc 1.5s cubic-bezier(0.215, 0.61, 0.355, 1) forwards 0.3s; }

.p4-hol-pinata.active-3 .p4-hol-pin-candy.loot54 { --tx: 29.5px; --ty: 89.3px; --rot: 594deg; --scale: 1.3; animation: p4HolLootArc 1.5s cubic-bezier(0.215, 0.61, 0.355, 1) forwards 0.3s; }

.p4-hol-pinata.active-3 .p4-hol-pin-candy.loot55 { --tx: 37.9px; --ty: 85.8px; --rot: -612deg; --scale: 1.5; animation: p4HolLootArc 1.5s cubic-bezier(0.215, 0.61, 0.355, 1) forwards 0.3s; }

.p4-hol-pinata.active-3 .p4-hol-pin-candy.loot56 { --tx: 46.3px; --ty: 81.5px; --rot: 630deg; --scale: 1.2; animation: p4HolLootArc 1.5s cubic-bezier(0.215, 0.61, 0.355, 1) forwards 0.3s; }

.p4-hol-pinata.active-3 .p4-hol-pin-candy.loot57 { --tx: 54.7px; --ty: 76.7px; --rot: -648deg; --scale: 1.3; animation: p4HolLootArc 1.5s cubic-bezier(0.215, 0.61, 0.355, 1) forwards 0.3s; }

.p4-hol-pinata.active-3 .p4-hol-pin-candy.loot58 { --tx: 63.2px; --ty: 71.4px; --rot: 666deg; --scale: 1.5; animation: p4HolLootArc 1.5s cubic-bezier(0.215, 0.61, 0.355, 1) forwards 0.4s; }

.p4-hol-pinata.active-3 .p4-hol-pin-candy.loot59 { --tx: 71.6px; --ty: 65.8px; --rot: -684deg; --scale: 1.2; animation: p4HolLootArc 1.5s cubic-bezier(0.215, 0.61, 0.355, 1) forwards 0.4s; }

.p4-hol-pinata.active-3 .p4-hol-pin-candy.loot60 { --tx: 80px; --ty: 60px; --rot: 702deg; --scale: 1.3; animation: p4HolLootArc 1.5s cubic-bezier(0.215, 0.61, 0.355, 1) forwards 0.4s; }

/* Click 4: Curving Spiral Scatter (loot1 to loot40) - Swirling Double-Helix Orbit */
.p4-hol-pinata.active-4 .p4-hol-pin-candy.loot1 { --tx: -17.8px; --ty: 4.9px; --scale: 1.3; animation: p4HolLootOrbit 1.6s ease-out forwards 0s; }

.p4-hol-pinata.active-4 .p4-hol-pin-candy.loot2 { --tx: 2.3px; --ty: -33.9px; --scale: 1.5; animation: p4HolLootOrbit 1.6s ease-out forwards 0s; }

.p4-hol-pinata.active-4 .p4-hol-pin-candy.loot3 { --tx: 17.4px; --ty: 10.6px; --scale: 1.2; animation: p4HolLootOrbit 1.6s ease-out forwards 0s; }

.p4-hol-pinata.active-4 .p4-hol-pin-candy.loot4 { --tx: -30.3px; --ty: -14.9px; --scale: 1.3; animation: p4HolLootOrbit 1.6s ease-out forwards 0s; }

.p4-hol-pinata.active-4 .p4-hol-pin-candy.loot5 { --tx: 27.8px; --ty: -26.1px; --scale: 1.5; animation: p4HolLootOrbit 1.6s ease-out forwards 0.1s; }

.p4-hol-pinata.active-4 .p4-hol-pin-candy.loot6 { --tx: -9.1px; --ty: 20.9px; --scale: 1.2; animation: p4HolLootOrbit 1.6s ease-out forwards 0.1s; }

.p4-hol-pinata.active-4 .p4-hol-pin-candy.loot7 { --tx: -17.3px; --ty: -40.2px; --scale: 1.3; animation: p4HolLootOrbit 1.6s ease-out forwards 0.1s; }

.p4-hol-pinata.active-4 .p4-hol-pin-candy.loot8 { --tx: 37.2px; --ty: 2.3px; --scale: 1.5; animation: p4HolLootOrbit 1.6s ease-out forwards 0.1s; }

.p4-hol-pinata.active-4 .p4-hol-pin-candy.loot9 { --tx: -38.6px; --ty: 4.5px; --scale: 1.2; animation: p4HolLootOrbit 1.6s ease-out forwards 0.1s; }

.p4-hol-pinata.active-4 .p4-hol-pin-candy.loot10 { --tx: 18.6px; --ty: -46.3px; --scale: 1.3; animation: p4HolLootOrbit 1.6s ease-out forwards 0.1s; }

.p4-hol-pinata.active-4 .p4-hol-pin-candy.loot11 { --tx: 13.9px; --ty: 30.1px; --scale: 1.5; animation: p4HolLootOrbit 1.6s ease-out forwards 0.1s; }

.p4-hol-pinata.active-4 .p4-hol-pin-candy.loot12 { --tx: -41.9px; --ty: -32px; --scale: 1.2; animation: p4HolLootOrbit 1.6s ease-out forwards 0.1s; }

.p4-hol-pinata.active-4 .p4-hol-pin-candy.loot13 { --tx: 49.4px; --ty: -20px; --scale: 1.3; animation: p4HolLootOrbit 1.6s ease-out forwards 0.1s; }

.p4-hol-pinata.active-4 .p4-hol-pin-candy.loot14 { --tx: -30.3px; --ty: 29.3px; --scale: 1.5; animation: p4HolLootOrbit 1.6s ease-out forwards 0.1s; }

.p4-hol-pinata.active-4 .p4-hol-pin-candy.loot15 { --tx: -7.2px; --ty: -59.6px; --scale: 1.2; animation: p4HolLootOrbit 1.6s ease-out forwards 0.2s; }

.p4-hol-pinata.active-4 .p4-hol-pin-candy.loot16 { --tx: 43.8px; --ty: 23.4px; --scale: 1.3; animation: p4HolLootOrbit 1.6s ease-out forwards 0.2s; }

.p4-hol-pinata.active-4 .p4-hol-pin-candy.loot17 { --tx: -59.3px; --ty: -7.6px; --scale: 1.5; animation: p4HolLootOrbit 1.6s ease-out forwards 0.2s; }

.p4-hol-pinata.active-4 .p4-hol-pin-candy.loot18 { --tx: 43.6px; --ty: -49.6px; --scale: 1.2; animation: p4HolLootOrbit 1.6s ease-out forwards 0.2s; }

.p4-hol-pinata.active-4 .p4-hol-pin-candy.loot19 { --tx: -2.8px; --ty: 47.9px; --scale: 1.3; animation: p4HolLootOrbit 1.6s ease-out forwards 0.2s; }

.p4-hol-pinata.active-4 .p4-hol-pin-candy.loot20 { --tx: -42.4px; --ty: -56px; --scale: 1.5; animation: p4HolLootOrbit 1.6s ease-out forwards 0.2s; }

.p4-hol-pinata.active-4 .p4-hol-pin-candy.loot21 { --tx: 67.6px; --ty: -1.9px; --scale: 1.2; animation: p4HolLootOrbit 1.6s ease-out forwards 0.2s; }

.p4-hol-pinata.active-4 .p4-hol-pin-candy.loot22 { --tx: -57.7px; --ty: 26.7px; --scale: 1.3; animation: p4HolLootOrbit 1.6s ease-out forwards 0.2s; }

.p4-hol-pinata.active-4 .p4-hol-pin-candy.loot23 { --tx: 15.7px; --ty: -74.4px; --scale: 1.5; animation: p4HolLootOrbit 1.6s ease-out forwards 0.2s; }

.p4-hol-pinata.active-4 .p4-hol-pin-candy.loot24 { --tx: 37.4px; --ty: 48.9px; --scale: 1.2; animation: p4HolLootOrbit 1.6s ease-out forwards 0.2s; }

.p4-hol-pinata.active-4 .p4-hol-pin-candy.loot25 { --tx: -73.4px; --ty: -31px; --scale: 1.3; animation: p4HolLootOrbit 1.6s ease-out forwards 0.3s; }

.p4-hol-pinata.active-4 .p4-hol-pin-candy.loot26 { --tx: 71.8px; --ty: -40.4px; --scale: 1.5; animation: p4HolLootOrbit 1.6s ease-out forwards 0.3s; }

.p4-hol-pinata.active-4 .p4-hol-pin-candy.loot27 { --tx: -31.2px; --ty: 58.4px; --scale: 1.2; animation: p4HolLootOrbit 1.6s ease-out forwards 0.3s; }

.p4-hol-pinata.active-4 .p4-hol-pin-candy.loot28 { --tx: -28.6px; --ty: -81.4px; --scale: 1.3; animation: p4HolLootOrbit 1.6s ease-out forwards 0.3s; }

.p4-hol-pinata.active-4 .p4-hol-pin-candy.loot29 { --tx: 76.1px; --ty: 26px; --scale: 1.5; animation: p4HolLootOrbit 1.6s ease-out forwards 0.3s; }

.p4-hol-pinata.active-4 .p4-hol-pin-candy.loot30 { --tx: -85px; --ty: 10.7px; --scale: 1.2; animation: p4HolLootOrbit 1.6s ease-out forwards 0.3s; }

.p4-hol-pinata.active-4 .p4-hol-pin-candy.loot31 { --tx: 48.5px; --ty: -79.2px; --scale: 1.3; animation: p4HolLootOrbit 1.6s ease-out forwards 0.3s; }

.p4-hol-pinata.active-4 .p4-hol-pin-candy.loot32 { --tx: 16px; --ty: 72.7px; --scale: 1.5; animation: p4HolLootOrbit 1.6s ease-out forwards 0.3s; }

.p4-hol-pinata.active-4 .p4-hol-pin-candy.loot33 { --tx: -75.1px; --ty: -62.4px; --scale: 1.2; animation: p4HolLootOrbit 1.6s ease-out forwards 0.3s; }

.p4-hol-pinata.active-4 .p4-hol-pin-candy.loot34 { --tx: 96.4px; --ty: -17.7px; --scale: 1.3; animation: p4HolLootOrbit 1.6s ease-out forwards 0.3s; }

.p4-hol-pinata.active-4 .p4-hol-pin-candy.loot35 { --tx: -66.9px; --ty: 56.4px; --scale: 1.5; animation: p4HolLootOrbit 1.6s ease-out forwards 0.4s; }

.p4-hol-pinata.active-4 .p4-hol-pin-candy.loot36 { --tx: 0px; --ty: -102px; --scale: 1.2; animation: p4HolLootOrbit 1.6s ease-out forwards 0.4s; }

.p4-hol-pinata.active-4 .p4-hol-pin-candy.loot37 { --tx: 69.9px; --ty: 59.3px; --scale: 1.3; animation: p4HolLootOrbit 1.6s ease-out forwards 0.4s; }

.p4-hol-pinata.active-4 .p4-hol-pin-candy.loot38 { --tx: -105.2px; --ty: -18.4px; --scale: 1.5; animation: p4HolLootOrbit 1.6s ease-out forwards 0.4s; }

.p4-hol-pinata.active-4 .p4-hol-pin-candy.loot39 { --tx: 85.5px; --ty: -69.7px; --scale: 1.2; animation: p4HolLootOrbit 1.6s ease-out forwards 0.4s; }

.p4-hol-pinata.active-4 .p4-hol-pin-candy.loot40 { --tx: -19.1px; --ty: 88.5px; --scale: 1.3; animation: p4HolLootOrbit 1.6s ease-out forwards 0.4s; }

/* Click 5: Grand Finale Radial Explosion (All 60 loot items!) - Dense Radial 360 Scatter */
.p4-hol-pinata.active-5 .p4-hol-pin-candy.loot1 { --tx: 65px; --ty: 0px; --rot: -366deg; --scale: 1.3; animation: p4HolLootExplode 1.6s cubic-bezier(0.165, 0.84, 0.44, 1) forwards 0s; }

.p4-hol-pinata.active-5 .p4-hol-pin-candy.loot2 { --tx: 94.5px; --ty: 9.9px; --rot: 372deg; --scale: 1.4; animation: p4HolLootExplode 1.6s cubic-bezier(0.165, 0.84, 0.44, 1) forwards 0s; }

.p4-hol-pinata.active-5 .p4-hol-pin-candy.loot3 { --tx: 63.6px; --ty: 13.5px; --rot: -378deg; --scale: 1.5; animation: p4HolLootExplode 1.6s cubic-bezier(0.165, 0.84, 0.44, 1) forwards 0s; }

.p4-hol-pinata.active-5 .p4-hol-pin-candy.loot4 { --tx: 90.4px; --ty: 29.4px; --rot: 384deg; --scale: 1.2; animation: p4HolLootExplode 1.6s cubic-bezier(0.165, 0.84, 0.44, 1) forwards 0s; }

.p4-hol-pinata.active-5 .p4-hol-pin-candy.loot5 { --tx: 59.4px; --ty: 26.4px; --rot: -390deg; --scale: 1.3; animation: p4HolLootExplode 1.6s cubic-bezier(0.165, 0.84, 0.44, 1) forwards 0.1s; }

.p4-hol-pinata.active-5 .p4-hol-pin-candy.loot6 { --tx: 82.3px; --ty: 47.5px; --rot: 396deg; --scale: 1.4; animation: p4HolLootExplode 1.6s cubic-bezier(0.165, 0.84, 0.44, 1) forwards 0.1s; }

.p4-hol-pinata.active-5 .p4-hol-pin-candy.loot7 { --tx: 52.6px; --ty: 38.2px; --rot: -402deg; --scale: 1.5; animation: p4HolLootExplode 1.6s cubic-bezier(0.165, 0.84, 0.44, 1) forwards 0.1s; }

.p4-hol-pinata.active-5 .p4-hol-pin-candy.loot8 { --tx: 70.6px; --ty: 63.6px; --rot: 408deg; --scale: 1.2; animation: p4HolLootExplode 1.6s cubic-bezier(0.165, 0.84, 0.44, 1) forwards 0.1s; }

.p4-hol-pinata.active-5 .p4-hol-pin-candy.loot9 { --tx: 43.5px; --ty: 48.3px; --rot: -414deg; --scale: 1.3; animation: p4HolLootExplode 1.6s cubic-bezier(0.165, 0.84, 0.44, 1) forwards 0.1s; }

.p4-hol-pinata.active-5 .p4-hol-pin-candy.loot10 { --tx: 55.8px; --ty: 76.9px; --rot: 420deg; --scale: 1.4; animation: p4HolLootExplode 1.6s cubic-bezier(0.165, 0.84, 0.44, 1) forwards 0.1s; }

.p4-hol-pinata.active-5 .p4-hol-pin-candy.loot11 { --tx: 32.5px; --ty: 56.3px; --rot: -426deg; --scale: 1.5; animation: p4HolLootExplode 1.6s cubic-bezier(0.165, 0.84, 0.44, 1) forwards 0.1s; }

.p4-hol-pinata.active-5 .p4-hol-pin-candy.loot12 { --tx: 38.6px; --ty: 86.8px; --rot: 432deg; --scale: 1.2; animation: p4HolLootExplode 1.6s cubic-bezier(0.165, 0.84, 0.44, 1) forwards 0.1s; }

.p4-hol-pinata.active-5 .p4-hol-pin-candy.loot13 { --tx: 20.1px; --ty: 61.8px; --rot: -438deg; --scale: 1.3; animation: p4HolLootExplode 1.6s cubic-bezier(0.165, 0.84, 0.44, 1) forwards 0.1s; }

.p4-hol-pinata.active-5 .p4-hol-pin-candy.loot14 { --tx: 19.8px; --ty: 92.9px; --rot: 444deg; --scale: 1.4; animation: p4HolLootExplode 1.6s cubic-bezier(0.165, 0.84, 0.44, 1) forwards 0.1s; }

.p4-hol-pinata.active-5 .p4-hol-pin-candy.loot15 { --tx: 6.8px; --ty: 64.6px; --rot: -450deg; --scale: 1.5; animation: p4HolLootExplode 1.6s cubic-bezier(0.165, 0.84, 0.44, 1) forwards 0.2s; }

.p4-hol-pinata.active-5 .p4-hol-pin-candy.loot16 { --tx: 0px; --ty: 95px; --rot: 456deg; --scale: 1.2; animation: p4HolLootExplode 1.6s cubic-bezier(0.165, 0.84, 0.44, 1) forwards 0.2s; }

.p4-hol-pinata.active-5 .p4-hol-pin-candy.loot17 { --tx: -6.8px; --ty: 64.6px; --rot: -462deg; --scale: 1.3; animation: p4HolLootExplode 1.6s cubic-bezier(0.165, 0.84, 0.44, 1) forwards 0.2s; }

.p4-hol-pinata.active-5 .p4-hol-pin-candy.loot18 { --tx: -19.8px; --ty: 92.9px; --rot: 468deg; --scale: 1.4; animation: p4HolLootExplode 1.6s cubic-bezier(0.165, 0.84, 0.44, 1) forwards 0.2s; }

.p4-hol-pinata.active-5 .p4-hol-pin-candy.loot19 { --tx: -20.1px; --ty: 61.8px; --rot: -474deg; --scale: 1.5; animation: p4HolLootExplode 1.6s cubic-bezier(0.165, 0.84, 0.44, 1) forwards 0.2s; }

.p4-hol-pinata.active-5 .p4-hol-pin-candy.loot20 { --tx: -38.6px; --ty: 86.8px; --rot: 480deg; --scale: 1.2; animation: p4HolLootExplode 1.6s cubic-bezier(0.165, 0.84, 0.44, 1) forwards 0.2s; }

.p4-hol-pinata.active-5 .p4-hol-pin-candy.loot21 { --tx: -32.5px; --ty: 56.3px; --rot: -486deg; --scale: 1.3; animation: p4HolLootExplode 1.6s cubic-bezier(0.165, 0.84, 0.44, 1) forwards 0.2s; }

.p4-hol-pinata.active-5 .p4-hol-pin-candy.loot22 { --tx: -55.8px; --ty: 76.9px; --rot: 492deg; --scale: 1.4; animation: p4HolLootExplode 1.6s cubic-bezier(0.165, 0.84, 0.44, 1) forwards 0.2s; }

.p4-hol-pinata.active-5 .p4-hol-pin-candy.loot23 { --tx: -43.5px; --ty: 48.3px; --rot: -498deg; --scale: 1.5; animation: p4HolLootExplode 1.6s cubic-bezier(0.165, 0.84, 0.44, 1) forwards 0.2s; }

.p4-hol-pinata.active-5 .p4-hol-pin-candy.loot24 { --tx: -70.6px; --ty: 63.6px; --rot: 504deg; --scale: 1.2; animation: p4HolLootExplode 1.6s cubic-bezier(0.165, 0.84, 0.44, 1) forwards 0.2s; }

.p4-hol-pinata.active-5 .p4-hol-pin-candy.loot25 { --tx: -52.6px; --ty: 38.2px; --rot: -510deg; --scale: 1.3; animation: p4HolLootExplode 1.6s cubic-bezier(0.165, 0.84, 0.44, 1) forwards 0.3s; }

.p4-hol-pinata.active-5 .p4-hol-pin-candy.loot26 { --tx: -82.3px; --ty: 47.5px; --rot: 516deg; --scale: 1.4; animation: p4HolLootExplode 1.6s cubic-bezier(0.165, 0.84, 0.44, 1) forwards 0.3s; }

.p4-hol-pinata.active-5 .p4-hol-pin-candy.loot27 { --tx: -59.4px; --ty: 26.4px; --rot: -522deg; --scale: 1.5; animation: p4HolLootExplode 1.6s cubic-bezier(0.165, 0.84, 0.44, 1) forwards 0.3s; }

.p4-hol-pinata.active-5 .p4-hol-pin-candy.loot28 { --tx: -90.4px; --ty: 29.4px; --rot: 528deg; --scale: 1.2; animation: p4HolLootExplode 1.6s cubic-bezier(0.165, 0.84, 0.44, 1) forwards 0.3s; }

.p4-hol-pinata.active-5 .p4-hol-pin-candy.loot29 { --tx: -63.6px; --ty: 13.5px; --rot: -534deg; --scale: 1.3; animation: p4HolLootExplode 1.6s cubic-bezier(0.165, 0.84, 0.44, 1) forwards 0.3s; }

.p4-hol-pinata.active-5 .p4-hol-pin-candy.loot30 { --tx: -94.5px; --ty: 9.9px; --rot: 540deg; --scale: 1.4; animation: p4HolLootExplode 1.6s cubic-bezier(0.165, 0.84, 0.44, 1) forwards 0.3s; }

.p4-hol-pinata.active-5 .p4-hol-pin-candy.loot31 { --tx: -65px; --ty: 0px; --rot: -546deg; --scale: 1.5; animation: p4HolLootExplode 1.6s cubic-bezier(0.165, 0.84, 0.44, 1) forwards 0.3s; }

.p4-hol-pinata.active-5 .p4-hol-pin-candy.loot32 { --tx: -94.5px; --ty: -9.9px; --rot: 552deg; --scale: 1.2; animation: p4HolLootExplode 1.6s cubic-bezier(0.165, 0.84, 0.44, 1) forwards 0.3s; }

.p4-hol-pinata.active-5 .p4-hol-pin-candy.loot33 { --tx: -63.6px; --ty: -13.5px; --rot: -558deg; --scale: 1.3; animation: p4HolLootExplode 1.6s cubic-bezier(0.165, 0.84, 0.44, 1) forwards 0.3s; }

.p4-hol-pinata.active-5 .p4-hol-pin-candy.loot34 { --tx: -90.4px; --ty: -29.4px; --rot: 564deg; --scale: 1.4; animation: p4HolLootExplode 1.6s cubic-bezier(0.165, 0.84, 0.44, 1) forwards 0.3s; }

.p4-hol-pinata.active-5 .p4-hol-pin-candy.loot35 { --tx: -59.4px; --ty: -26.4px; --rot: -570deg; --scale: 1.5; animation: p4HolLootExplode 1.6s cubic-bezier(0.165, 0.84, 0.44, 1) forwards 0.4s; }

.p4-hol-pinata.active-5 .p4-hol-pin-candy.loot36 { --tx: -82.3px; --ty: -47.5px; --rot: 576deg; --scale: 1.2; animation: p4HolLootExplode 1.6s cubic-bezier(0.165, 0.84, 0.44, 1) forwards 0.4s; }

.p4-hol-pinata.active-5 .p4-hol-pin-candy.loot37 { --tx: -52.6px; --ty: -38.2px; --rot: -582deg; --scale: 1.3; animation: p4HolLootExplode 1.6s cubic-bezier(0.165, 0.84, 0.44, 1) forwards 0.4s; }

.p4-hol-pinata.active-5 .p4-hol-pin-candy.loot38 { --tx: -70.6px; --ty: -63.6px; --rot: 588deg; --scale: 1.4; animation: p4HolLootExplode 1.6s cubic-bezier(0.165, 0.84, 0.44, 1) forwards 0.4s; }

.p4-hol-pinata.active-5 .p4-hol-pin-candy.loot39 { --tx: -43.5px; --ty: -48.3px; --rot: -594deg; --scale: 1.5; animation: p4HolLootExplode 1.6s cubic-bezier(0.165, 0.84, 0.44, 1) forwards 0.4s; }

.p4-hol-pinata.active-5 .p4-hol-pin-candy.loot40 { --tx: -55.8px; --ty: -76.9px; --rot: 600deg; --scale: 1.2; animation: p4HolLootExplode 1.6s cubic-bezier(0.165, 0.84, 0.44, 1) forwards 0.4s; }

.p4-hol-pinata.active-5 .p4-hol-pin-candy.loot41 { --tx: -32.5px; --ty: -56.3px; --rot: -606deg; --scale: 1.3; animation: p4HolLootExplode 1.6s cubic-bezier(0.165, 0.84, 0.44, 1) forwards 0.4s; }

.p4-hol-pinata.active-5 .p4-hol-pin-candy.loot42 { --tx: -38.6px; --ty: -86.8px; --rot: 612deg; --scale: 1.4; animation: p4HolLootExplode 1.6s cubic-bezier(0.165, 0.84, 0.44, 1) forwards 0.4s; }

.p4-hol-pinata.active-5 .p4-hol-pin-candy.loot43 { --tx: -20.1px; --ty: -61.8px; --rot: -618deg; --scale: 1.5; animation: p4HolLootExplode 1.6s cubic-bezier(0.165, 0.84, 0.44, 1) forwards 0.4s; }

.p4-hol-pinata.active-5 .p4-hol-pin-candy.loot44 { --tx: -19.8px; --ty: -92.9px; --rot: 624deg; --scale: 1.2; animation: p4HolLootExplode 1.6s cubic-bezier(0.165, 0.84, 0.44, 1) forwards 0.4s; }

.p4-hol-pinata.active-5 .p4-hol-pin-candy.loot45 { --tx: -6.8px; --ty: -64.6px; --rot: -630deg; --scale: 1.3; animation: p4HolLootExplode 1.6s cubic-bezier(0.165, 0.84, 0.44, 1) forwards 0.5s; }

.p4-hol-pinata.active-5 .p4-hol-pin-candy.loot46 { --tx: 0px; --ty: -95px; --rot: 636deg; --scale: 1.4; animation: p4HolLootExplode 1.6s cubic-bezier(0.165, 0.84, 0.44, 1) forwards 0.5s; }

.p4-hol-pinata.active-5 .p4-hol-pin-candy.loot47 { --tx: 6.8px; --ty: -64.6px; --rot: -642deg; --scale: 1.5; animation: p4HolLootExplode 1.6s cubic-bezier(0.165, 0.84, 0.44, 1) forwards 0.5s; }

.p4-hol-pinata.active-5 .p4-hol-pin-candy.loot48 { --tx: 19.8px; --ty: -92.9px; --rot: 648deg; --scale: 1.2; animation: p4HolLootExplode 1.6s cubic-bezier(0.165, 0.84, 0.44, 1) forwards 0.5s; }

.p4-hol-pinata.active-5 .p4-hol-pin-candy.loot49 { --tx: 20.1px; --ty: -61.8px; --rot: -654deg; --scale: 1.3; animation: p4HolLootExplode 1.6s cubic-bezier(0.165, 0.84, 0.44, 1) forwards 0.5s; }

.p4-hol-pinata.active-5 .p4-hol-pin-candy.loot50 { --tx: 38.6px; --ty: -86.8px; --rot: 660deg; --scale: 1.4; animation: p4HolLootExplode 1.6s cubic-bezier(0.165, 0.84, 0.44, 1) forwards 0.5s; }

.p4-hol-pinata.active-5 .p4-hol-pin-candy.loot51 { --tx: 32.5px; --ty: -56.3px; --rot: -666deg; --scale: 1.5; animation: p4HolLootExplode 1.6s cubic-bezier(0.165, 0.84, 0.44, 1) forwards 0.5s; }

.p4-hol-pinata.active-5 .p4-hol-pin-candy.loot52 { --tx: 55.8px; --ty: -76.9px; --rot: 672deg; --scale: 1.2; animation: p4HolLootExplode 1.6s cubic-bezier(0.165, 0.84, 0.44, 1) forwards 0.5s; }

.p4-hol-pinata.active-5 .p4-hol-pin-candy.loot53 { --tx: 43.5px; --ty: -48.3px; --rot: -678deg; --scale: 1.3; animation: p4HolLootExplode 1.6s cubic-bezier(0.165, 0.84, 0.44, 1) forwards 0.5s; }

.p4-hol-pinata.active-5 .p4-hol-pin-candy.loot54 { --tx: 70.6px; --ty: -63.6px; --rot: 684deg; --scale: 1.4; animation: p4HolLootExplode 1.6s cubic-bezier(0.165, 0.84, 0.44, 1) forwards 0.5s; }

.p4-hol-pinata.active-5 .p4-hol-pin-candy.loot55 { --tx: 52.6px; --ty: -38.2px; --rot: -690deg; --scale: 1.5; animation: p4HolLootExplode 1.6s cubic-bezier(0.165, 0.84, 0.44, 1) forwards 0.6s; }

.p4-hol-pinata.active-5 .p4-hol-pin-candy.loot56 { --tx: 82.3px; --ty: -47.5px; --rot: 696deg; --scale: 1.2; animation: p4HolLootExplode 1.6s cubic-bezier(0.165, 0.84, 0.44, 1) forwards 0.6s; }

.p4-hol-pinata.active-5 .p4-hol-pin-candy.loot57 { --tx: 59.4px; --ty: -26.4px; --rot: -702deg; --scale: 1.3; animation: p4HolLootExplode 1.6s cubic-bezier(0.165, 0.84, 0.44, 1) forwards 0.6s; }

.p4-hol-pinata.active-5 .p4-hol-pin-candy.loot58 { --tx: 90.4px; --ty: -29.4px; --rot: 708deg; --scale: 1.4; animation: p4HolLootExplode 1.6s cubic-bezier(0.165, 0.84, 0.44, 1) forwards 0.6s; }

.p4-hol-pinata.active-5 .p4-hol-pin-candy.loot59 { --tx: 63.6px; --ty: -13.5px; --rot: -714deg; --scale: 1.5; animation: p4HolLootExplode 1.6s cubic-bezier(0.165, 0.84, 0.44, 1) forwards 0.6s; }

.p4-hol-pinata.active-5 .p4-hol-pin-candy.loot60 { --tx: 94.5px; --ty: -9.9px; --rot: 720deg; --scale: 1.2; animation: p4HolLootExplode 1.6s cubic-bezier(0.165, 0.84, 0.44, 1) forwards 0.6s; }

/* ════════════════════════════
   15. Gift Box Surprise
   ════════════════════════════ */
.p4-hol-giftbox {
  position:absolute; bottom:18%; right:10%;
  width:40px; height:40px; cursor:pointer; z-index:5;
  transform-origin: bottom center;
}

body.p4.day.holiday-mode .p4-hol-giftbox {
  bottom: 11%;
}

.p4-hol-gift-box {
  width:36px; height:26px;
  background:linear-gradient(135deg,#ef4444,#dc2626);
  border-radius:3px; position:absolute; bottom:0; left:2px;
}

.p4-hol-gift-ribbon-v {
  width:6px; height:26px; background:#fbbf24;
  position:absolute; bottom:0; left:17px;
}

.p4-hol-gift-ribbon-h {
  width:36px; height:4px; background:#fbbf24;
  position:absolute; bottom:13px; left:2px;
}

.p4-hol-gift-lid {
  width:38px; height:8px;
  background:linear-gradient(#ef4444,#b91c1c);
  border:1px solid #fbbf24; border-radius:2px;
  position:absolute; bottom:26px; left:1px;
  transition:transform 0.4s cubic-bezier(0.34,1.56,0.64,1);
}

.p4-hol-giftbox.active .p4-hol-gift-lid { transform:translateY(-16px) rotate(-15deg); }

.p4-hol-gift-sparkle { position:absolute; font-size:10px; opacity:0; }

.p4-hol-gift-sparkle.sp1 { top:-12px;left:6px; }

.p4-hol-gift-sparkle.sp2 { top:-8px;right:4px; }

.p4-hol-giftbox.active .p4-hol-gift-sparkle { opacity:1; animation: p4HolFadeUp 1s ease forwards 0.3s; }

.p4-hol-giftbox.active {
  animation: p4HolGiftWobble 0.6s ease-in-out infinite;
  transform-origin: bottom center;
}

/* Gift Box Ending Animations */
.p4-hol-giftbox.ending {
  animation: p4HolGiftSettle 1.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

.p4-hol-giftbox.ending .p4-hol-gift-lid {
  animation: p4HolGiftLidSettle 1.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

/* ════════════════════════════
   16. Balloon Bunch
   ════════════════════════════ */
.p4-hol-balloons {
  display: none !important;
}

@media (min-width: 1200px) {
  body.p4.day.available-mode .p4-hol-balloons,
  body.p4.day.holiday-mode .p4-hol-balloons {
    display: block !important;
    position: absolute;
    top: 5.2%;
    left: calc(50% - 600px + 10px);
    width: 120px;
    height: 156px;
    zoom: 1 !important;
    cursor: pointer;
    z-index: 4;
    transform-origin: 50% 92%;
    transform: rotate(-20deg) translateZ(0);
    animation: p4BalloonsIdle 4s ease-in-out infinite;
    pointer-events: auto !important;
    transition: opacity var(--p4-transition), left 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  }

  body.p4.day.available-mode .p4-about .p4-eyebrow,
  body.p4.day.available-mode .p4-about .p4-heading,
  body.p4.day.holiday-mode .p4-about .p4-eyebrow,
  body.p4.day.holiday-mode .p4-about .p4-heading {
    padding-left: 120px;
  }

}

@media (min-width: 1380px) {
  body.p4.day.available-mode .p4-hol-balloons,
  body.p4.day.holiday-mode .p4-hol-balloons {
    left: calc(50% - 600px - 100px);
  }

  body.p4.day.available-mode .p4-about .p4-eyebrow,
  body.p4.day.available-mode .p4-about .p4-heading,
  body.p4.day.holiday-mode .p4-about .p4-eyebrow,
  body.p4.day.holiday-mode .p4-about .p4-heading {
    padding-left: 0;
  }

}

.p4-hol-balloons-svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* Individual balloon floating/wobbling */
.p4-bal-item {
  transform-origin: 50% 100%;
  transition: transform 0.3s ease;
}

.p4-hol-balloons:not(.active):not(.ending) .p4-bal-item.b1 {
  animation: p4BalIdle1 4.5s ease-in-out infinite alternate;
}

.p4-hol-balloons:not(.active):not(.ending) .p4-bal-item.b2 {
  animation: p4BalIdle2 5s ease-in-out infinite alternate;
}

.p4-hol-balloons:not(.active):not(.ending) .p4-bal-item.b3 {
  animation: p4BalIdle3 3.8s ease-in-out infinite alternate;
}

.p4-hol-balloons:not(.active):not(.ending) .p4-bal-item.b4 {
  animation: p4BalIdle4 4.2s ease-in-out infinite alternate;
}

/* Individual strings matching the balloon movements */
.p4-bal-str {
  transform-origin: 50px 120px;
  transition: transform 0.3s ease;
}

.p4-hol-balloons:not(.active):not(.ending) .p4-bal-str.s1 {
  animation: p4BalStrIdle1 4.5s ease-in-out infinite alternate;
}

.p4-hol-balloons:not(.active):not(.ending) .p4-bal-str.s2 {
  animation: p4BalStrIdle2 5s ease-in-out infinite alternate;
}

.p4-hol-balloons:not(.active):not(.ending) .p4-bal-str.s3 {
  animation: p4BalStrIdle3 3.8s ease-in-out infinite alternate;
}

.p4-hol-balloons:not(.active):not(.ending) .p4-bal-str.s4 {
  animation: p4BalStrIdle4 4.2s ease-in-out infinite alternate;
}

/* Bow Wrap Origin */
.p4-bal-bow-wrap {
  transform-origin: 50px 120px;
  transition: transform 0.3s ease;
}

/* Active Click state */
.p4-hol-balloons.active {
  animation: p4BalloonsActive 2s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

.p4-hol-balloons.active .p4-bal-item.b1 {
  animation: p4BalActive1 2s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

.p4-hol-balloons.active .p4-bal-item.b2 {
  animation: p4BalActive2 2s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

.p4-hol-balloons.active .p4-bal-item.b3 {
  animation: p4BalActive3 2s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

.p4-hol-balloons.active .p4-bal-item.b4 {
  animation: p4BalActive4 2s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

/* Active Strings & Bow */
.p4-hol-balloons.active .p4-bal-str.s1 {
  animation: p4BalStrActive1 2s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

.p4-hol-balloons.active .p4-bal-str.s2 {
  animation: p4BalStrActive2 2s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

.p4-hol-balloons.active .p4-bal-str.s3 {
  animation: p4BalStrActive3 2s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

.p4-hol-balloons.active .p4-bal-str.s4 {
  animation: p4BalStrActive4 2s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

.p4-hol-balloons.active .p4-bal-bow-wrap {
  animation: p4BowActive 2s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

/* Sparkle pop elements (only show during active state) */
.p4-hol-balloons.active .p4-bal-sparkle {
  animation: p4SparkleExpand 0.7s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}

.p4-hol-balloons.active .p4-bal-sparkle.sp1 { animation-delay: 0.1s; }

.p4-hol-balloons.active .p4-bal-sparkle.sp2 { animation-delay: 0.2s; }

.p4-hol-balloons.active .p4-bal-sparkle.sp3 { animation-delay: 0.15s; }

.p4-hol-balloons.active .p4-bal-ring-pop {
  animation: p4RingPopExpand 0.6s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
  animation-delay: 0.05s;
}

/* Ending Settle state */
.p4-hol-balloons.ending {
  animation: p4BalloonsSettle 1.5s cubic-bezier(0.36, 0.07, 0.19, 0.97) forwards;
}

.p4-hol-balloons.ending .p4-bal-item.b1 {
  animation: p4BalSettle1 1.5s ease-out forwards;
}

.p4-hol-balloons.ending .p4-bal-item.b2 {
  animation: p4BalSettle2 1.5s ease-out forwards;
}

.p4-hol-balloons.ending .p4-bal-item.b3 {
  animation: p4BalSettle3 1.5s ease-out forwards;
}

.p4-hol-balloons.ending .p4-bal-item.b4 {
  animation: p4BalSettle4 1.5s ease-out forwards;
}

/* Ending Settle Strings & Bow */
.p4-hol-balloons.ending .p4-bal-str.s1 {
  animation: p4BalStrSettle1 1.5s ease-out forwards;
}

.p4-hol-balloons.ending .p4-bal-str.s2 {
  animation: p4BalStrSettle2 1.5s ease-out forwards;
}

.p4-hol-balloons.ending .p4-bal-str.s3 {
  animation: p4BalStrSettle3 1.5s ease-out forwards;
}

.p4-hol-balloons.ending .p4-bal-str.s4 {
  animation: p4BalStrSettle4 1.5s ease-out forwards;
}

.p4-hol-balloons.ending .p4-bal-bow-wrap {
  animation: p4BowSettle 1.5s ease-out forwards;
}

/* Keyframes */
@keyframes p4BalloonsIdle {
  0% {
    transform: translate(0, 0) rotate(-20deg) scale(1);
  }

  25% {
    transform: translate(2px, -4px) rotate(-23deg) scale(1.01);
  }

  50% {
    transform: translate(0, -6px) rotate(-20deg) scale(1.02);
  }

  75% {
    transform: translate(-2px, -4px) rotate(-17deg) scale(1.01);
  }

  100% {
    transform: translate(0, 0) rotate(-20deg) scale(1);
  }

}

@keyframes p4BalIdle1 {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }

  50% { transform: translate(-2px, -3px) rotate(-3deg); }

}

@keyframes p4BalIdle2 {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }

  50% { transform: translate(2px, -2px) rotate(3deg); }

}

@keyframes p4BalIdle3 {
  0%, 100% { transform: translate(0, 0); }

  50% { transform: translate(0, -4px); }

}

@keyframes p4BalIdle4 {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }

  50% { transform: translate(-1px, -2px) rotate(-1.5deg); }

}

@keyframes p4BalStrIdle1 {
  0%, 100% { transform: scale(1); }

  50% { transform: scale(0.98, 1.03) rotate(-1deg); }

}

@keyframes p4BalStrIdle2 {
  0%, 100% { transform: scale(1); }

  50% { transform: scale(0.98, 1.02) rotate(1deg); }

}

@keyframes p4BalStrIdle3 {
  0%, 100% { transform: scale(1); }

  50% { transform: scale(0.97, 1.04); }

}

@keyframes p4BalStrIdle4 {
  0%, 100% { transform: scale(1); }

  50% { transform: scale(0.99, 1.02) rotate(-0.5deg); }

}

@keyframes p4BalloonsActive {
  0% { transform: translateY(0) scale(1) rotate(-20deg); }

  8% { transform: translateY(8px) scale(1.2, 0.75) rotate(-14deg); }

  22% { transform: translateY(-28px) scale(0.85, 1.25) rotate(-32deg); }

  38% { transform: translateY(6px) scale(1.1, 0.88) rotate(-10deg); }

  54% { transform: translateY(-10px) scale(0.95, 1.08) rotate(-28deg); }

  70% { transform: translateY(3px) scale(1.03, 0.96) rotate(-16deg); }

  85% { transform: translateY(-1px) scale(0.98, 1.02) rotate(-22deg); }

  100% { transform: translateY(0) scale(1) rotate(-20deg); }

}

@keyframes p4BalActive1 {
  0% { transform: translate(0, 0) scale(1); }

  15% { transform: translate(-6px, -8px) scale(1.18) rotate(-8deg); }

  40% { transform: translate(3px, 4px) scale(0.9) rotate(4deg); }

  70% { transform: translate(-1.5px, -2px) scale(1.05) rotate(-2deg); }

  100% { transform: translate(0, 0) scale(1); }

}

@keyframes p4BalActive2 {
  0% { transform: translate(0, 0) scale(1); }

  18% { transform: translate(7px, -9px) scale(1.16) rotate(9deg); }

  43% { transform: translate(-3px, 4px) scale(0.92) rotate(-4deg); }

  72% { transform: translate(1.5px, -2px) scale(1.04) rotate(2deg); }

  100% { transform: translate(0, 0) scale(1); }

}

@keyframes p4BalActive3 {
  0% { transform: translate(0, 0) scale(1); }

  12% { transform: translate(0, -12px) scale(1.22); }

  38% { transform: translate(0, 5px) scale(0.88); }

  68% { transform: translate(0, -3px) scale(1.06); }

  100% { transform: translate(0, 0) scale(1); }

}

@keyframes p4BalActive4 {
  0% { transform: translate(0, 0) scale(1); }

  20% { transform: translate(-2px, -6px) scale(1.15) rotate(-4deg); }

  45% { transform: translate(1px, 3px) scale(0.94) rotate(2deg); }

  75% { transform: translate(-0.5px, -1px) scale(1.03) rotate(-1deg); }

  100% { transform: translate(0, 0) scale(1); }

}

@keyframes p4BalStrActive1 {
  0% { transform: scale(1) rotate(0deg); }

  15% { transform: scale(1.15, 1.25) rotate(-10deg); }

  40% { transform: scale(0.9, 0.85) rotate(4deg); }

  70% { transform: scale(1.05, 1.05) rotate(-2deg); }

  100% { transform: scale(1) rotate(0deg); }

}

@keyframes p4BalStrActive2 {
  0% { transform: scale(1) rotate(0deg); }

  18% { transform: scale(1.12, 1.22) rotate(11deg); }

  43% { transform: scale(0.92, 0.87) rotate(-4deg); }

  72% { transform: scale(1.04, 1.03) rotate(2deg); }

  100% { transform: scale(1) rotate(0deg); }

}

@keyframes p4BalStrActive3 {
  0% { transform: scale(1) rotate(0deg); }

  12% { transform: scale(1.2, 1.3) rotate(0deg); }

  38% { transform: scale(0.88, 0.82) rotate(0deg); }

  68% { transform: scale(1.06, 1.05) rotate(0deg); }

  100% { transform: scale(1) rotate(0deg); }

}

@keyframes p4BalStrActive4 {
  0% { transform: scale(1) rotate(0deg); }

  20% { transform: scale(1.1, 1.15) rotate(-5deg); }

  45% { transform: scale(0.94, 0.9) rotate(2deg); }

  75% { transform: scale(1.03, 1.02) rotate(-1deg); }

  100% { transform: scale(1) rotate(0deg); }

}

@keyframes p4BowActive {
  0% { transform: rotate(0deg) scale(1); }

  10% { transform: rotate(-15deg) scale(1.1); }

  25% { transform: rotate(20deg) scale(0.9); }

  45% { transform: rotate(-10deg) scale(1.05); }

  65% { transform: rotate(8deg) scale(0.95); }

  85% { transform: rotate(-3deg) scale(1.02); }

  100% { transform: rotate(0deg) scale(1); }

}

@keyframes p4SparkleExpand {
  0% { transform: scale(0) rotate(0deg); opacity: 0; transform-origin: 50px 55px; }

  30% { opacity: 1; }

  100% { transform: scale(1.8) rotate(135deg); opacity: 0; transform-origin: 50px 55px; }

}

@keyframes p4RingPopExpand {
  0% { transform: scale(0.5); opacity: 0; transform-origin: 50px 55px; }

  15% { opacity: 0.8; }

  100% { transform: scale(3.5); opacity: 0; transform-origin: 50px 55px; }

}

@keyframes p4BalloonsSettle {
  0% { transform: translateY(0) rotate(-20deg) scale(1); }

  15% { transform: translateY(-4px) rotate(-26deg) scale(1.01); }

  30% { transform: translateY(2px) rotate(-16deg) scale(0.99); }

  45% { transform: translateY(-2px) rotate(-23deg) scale(1.005); }

  60% { transform: translateY(1px) rotate(-18deg) scale(0.995); }

  75% { transform: translateY(-0.5px) rotate(-21deg) scale(1.002); }

  90% { transform: translateY(0) rotate(-19.5deg) scale(0.999); }

  100% { transform: translateY(0) rotate(-20deg) scale(1); }

}

@keyframes p4BalSettle1 {
  0% { transform: translate(0, 0) rotate(0deg); }

  20% { transform: translate(-3px, -2px) rotate(-4deg); }

  45% { transform: translate(2px, 1px) rotate(2deg); }

  70% { transform: translate(-1px, 0px) rotate(-1deg); }

  100% { transform: translate(0, 0) rotate(0deg); }

}

@keyframes p4BalSettle2 {
  0% { transform: translate(0, 0) rotate(0deg); }

  22% { transform: translate(3px, -2px) rotate(4deg); }

  47% { transform: translate(-2px, 1px) rotate(-2deg); }

  72% { transform: translate(1px, 0px) rotate(1deg); }

  100% { transform: translate(0, 0) rotate(0deg); }

}

@keyframes p4BalSettle3 {
  0% { transform: translate(0, 0) rotate(0deg); }

  18% { transform: translate(0, -4px) rotate(0deg); }

  43% { transform: translate(0, 2px) rotate(0deg); }

  68% { transform: translate(0, -1px) rotate(0deg); }

  100% { transform: translate(0, 0) rotate(0deg); }

}

@keyframes p4BalSettle4 {
  0% { transform: translate(0, 0) rotate(0deg); }

  25% { transform: translate(-1px, -2px) rotate(-2deg); }

  50% { transform: translate(1px, 1px) rotate(1deg); }

  75% { transform: translate(-0.5px, 0px) rotate(-0.5deg); }

  100% { transform: translate(0, 0) rotate(0deg); }

}

@keyframes p4BalStrSettle1 {
  0% { transform: scale(1) rotate(0deg); }

  20% { transform: scale(0.98, 1.05) rotate(-5deg); }

  45% { transform: scale(1.01, 0.97) rotate(2deg); }

  70% { transform: scale(0.995, 1.01) rotate(-1deg); }

  100% { transform: scale(1) rotate(0deg); }

}

@keyframes p4BalStrSettle2 {
  0% { transform: scale(1) rotate(0deg); }

  22% { transform: scale(0.98, 1.04) rotate(5deg); }

  47% { transform: scale(1.01, 0.98) rotate(-2deg); }

  72% { transform: scale(0.995, 1.01) rotate(1deg); }

  100% { transform: scale(1) rotate(0deg); }

}

@keyframes p4BalStrSettle3 {
  0% { transform: scale(1) rotate(0deg); }

  18% { transform: scale(0.97, 1.06) rotate(0deg); }

  43% { transform: scale(1.02, 0.96) rotate(0deg); }

  68% { transform: scale(0.99, 1.01) rotate(0deg); }

  100% { transform: scale(1) rotate(0deg); }

}

@keyframes p4BalStrSettle4 {
  0% { transform: scale(1) rotate(0deg); }

  25% { transform: scale(0.99, 1.03) rotate(-2deg); }

  50% { transform: scale(1.005, 0.98) rotate(1deg); }

  75% { transform: scale(0.998, 1.005) rotate(-0.5deg); }

  100% { transform: scale(1) rotate(0deg); }

}

@keyframes p4BowSettle {
  0% { transform: rotate(0deg) scale(1); }

  20% { transform: rotate(-8deg) scale(1.05); }

  45% { transform: rotate(5deg) scale(0.97); }

  70% { transform: rotate(-2deg) scale(1.01); }

  100% { transform: rotate(0deg) scale(1); }

}

/* ════════════════════════════
   17. Disco Ball
   ════════════════════════════ */
.p4-hol-disco {
  position:absolute; top:2%; left:55%;
  width:50px; height:75px; cursor:pointer; z-index:5;
  transform-origin: top center;
  transition: transform 0.3s ease;
}

body.p4.day.holiday-mode .p4-hol-disco {
  left: 45%;
}

/* Glowing background backdrop pulse & color cycle */
.p4-hol-disco::before {
  content: "";
  position: absolute;
  top: 8px; left: 50%;
  transform: translate(-50%, 0);
  width: 80px; height: 80px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(6,182,212,0.5) 0%, rgba(236,72,153,0.3) 45%, rgba(234,179,8,0.15) 70%, transparent 100%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  z-index: 1;
}

.p4-hol-disco.active::before {
  opacity: 1;
  animation: p4HolDiscoGlowPulse 2s ease-in-out infinite alternate, p4HolGlowColorCycle 8s linear infinite;
}

.p4-hol-disco-mount {
  width: 1.5px;
  height: 12px;
  background: linear-gradient(to right, #94a3b8, #cbd5e1, #64748b);
  margin: 0 auto;
  position: relative;
}

.p4-hol-disco-mount::after {
  content: "";
  position: absolute;
  bottom: -2px; left: 50%;
  transform: translateX(-50%);
  width: 8px; height: 3px;
  background: linear-gradient(to right, #475569, #cbd5e1, #1e293b);
  border-radius: 2px 2px 0 0;
}

/* Faceted Mirror Disco Ball Design */
.p4-hol-disco-ball {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #ffffff 0%, #cbd5e1 35%, #64748b 70%, #334155 100%);
  margin: 0 auto;
  box-shadow: 
    0 4px 10px rgba(0, 0, 0, 0.3), 
    inset -2px -2px 6px rgba(0, 0, 0, 0.55),
    inset 2px 2px 6px rgba(255, 255, 255, 0.7);
  position: relative;
  overflow: hidden;
  border: 0.5px solid rgba(148, 163, 184, 0.4);
  z-index: 3;
}

/* Facet Grid lines to make it look like small glass mirrors */
.p4-hol-disco-ball::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: 
    linear-gradient(rgba(255, 255, 255, 0.35) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.35) 1px, transparent 1px);
  background-size: 4px 4px;
  opacity: 0.85;
  mix-blend-mode: overlay;
  border-radius: 50%;
  pointer-events: none;
}

/* Bright specular gloss highlight */
.p4-hol-disco-ball::after {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.3) 30%, rgba(255, 255, 255, 0) 65%);
  pointer-events: none;
  z-index: 4;
}

/* Beams and Rays (Spotlights) */
.p4-hol-disco-ray {
  position: absolute;
  width: 10px;
  height: 55px;
  opacity: 0;
  transform-origin: top center;
  transition: opacity 0.4s ease, transform 0.4s ease;
  mix-blend-mode: screen;
  z-index: 2;
  border-radius: 50% 50% 0 0;
  filter: blur(1.2px) drop-shadow(0 0 5px currentColor);
}

.p4-hol-disco-ray.r1 {
  top: 26px; left: 10px; transform: rotate(-35deg);
  background: linear-gradient(to bottom, rgba(0, 255, 255, 0.95), rgba(0, 255, 255, 0.3) 40%, transparent);
  color: rgba(0, 255, 255, 0.95);
}

.p4-hol-disco-ray.r2 {
  top: 26px; left: 20px; transform: rotate(-10deg);
  background: linear-gradient(to bottom, rgba(255, 20, 147, 0.95), rgba(255, 20, 147, 0.3) 40%, transparent);
  color: rgba(255, 20, 147, 0.95);
}

.p4-hol-disco-ray.r3 {
  top: 26px; right: 10px; transform: rotate(35deg);
  background: linear-gradient(to bottom, rgba(255, 215, 0, 0.95), rgba(255, 215, 0, 0.3) 40%, transparent);
  color: rgba(255, 215, 0, 0.95);
}

.p4-hol-disco-ray.r4 {
  top: 26px; right: 20px; transform: rotate(10deg);
  background: linear-gradient(to bottom, rgba(168, 85, 247, 0.95), rgba(168, 85, 247, 0.3) 40%, transparent);
  color: rgba(168, 85, 247, 0.95);
}

/* Sparkles */
.p4-hol-disco-sparkle {
  position: absolute;
  font-size: 10px;
  opacity: 0;
  transform: scale(0);
  pointer-events: none;
  z-index: 4;
  text-shadow: 0 0 4px rgba(255, 255, 255, 0.8);
}

.p4-hol-disco-sparkle.s1 { top: 18px; left: -10px; color: #00ffff; }

.p4-hol-disco-sparkle.s2 { top: 38px; left: 12px; color: #ff1493; }

.p4-hol-disco-sparkle.s3 { top: 16px; right: -8px; color: #ffd700; }

/* Active Interactions */
.p4-hol-disco.active {
  animation: p4HolDiscoSway 2.5s ease-in-out infinite alternate;
}

.p4-hol-disco.active .p4-hol-disco-ball {
  animation: p4HolSpin 1.0s linear infinite;
  box-shadow: 
    0 0 15px rgba(6, 182, 212, 0.7),
    0 0 25px rgba(236, 72, 153, 0.5),
    inset -2px -2px 5px rgba(0, 0, 0, 0.4),
    inset 2px 2px 5px rgba(255, 255, 255, 0.7);
}

.p4-hol-disco.active .p4-hol-disco-ball::before {
  animation: p4DiscoFacetMove 1.2s linear infinite;
}

.p4-hol-disco.active .p4-hol-disco-ray {
  opacity: 0.95;
}

.p4-hol-disco.active .p4-hol-disco-ray.r1 { animation: p4HolDiscoRay1 2.2s ease-in-out infinite alternate; }

.p4-hol-disco.active .p4-hol-disco-ray.r2 { animation: p4HolDiscoRay2 1.8s ease-in-out infinite alternate; animation-delay: 0.3s; }

.p4-hol-disco.active .p4-hol-disco-ray.r3 { animation: p4HolDiscoRay3 2.0s ease-in-out infinite alternate; animation-delay: 0.6s; }

.p4-hol-disco.active .p4-hol-disco-ray.r4 { animation: p4HolDiscoRay4 2.4s ease-in-out infinite alternate; animation-delay: 0.9s; }

.p4-hol-disco.active .p4-hol-disco-sparkle.s1 { animation: p4Sparkle1 1.5s ease-in-out infinite; }

.p4-hol-disco.active .p4-hol-disco-sparkle.s2 { animation: p4Sparkle2 1.7s ease-in-out infinite; animation-delay: 0.4s; }

.p4-hol-disco.active .p4-hol-disco-sparkle.s3 { animation: p4Sparkle3 1.6s ease-in-out infinite; animation-delay: 0.8s; }

/* Ending Decaying Animations */
.p4-hol-disco.ending {
  animation: p4HolDiscoSettle 1.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

.p4-hol-disco.ending::before {
  animation: p4HolDiscoGlowFade 1.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

.p4-hol-disco.ending .p4-hol-disco-ball {
  animation: p4HolDiscoBallSettle 1.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

.p4-hol-disco.ending .p4-hol-disco-ray.r1 { animation: p4HolDiscoRayEndR1 1.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards; }

.p4-hol-disco.ending .p4-hol-disco-ray.r2 { animation: p4HolDiscoRayEndR2 1.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards; }

.p4-hol-disco.ending .p4-hol-disco-ray.r3 { animation: p4HolDiscoRayEndR3 1.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards; }

.p4-hol-disco.ending .p4-hol-disco-ray.r4 { animation: p4HolDiscoRayEndR4 1.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards; }

.p4-hol-disco.ending .p4-hol-disco-sparkle {
  animation: p4SparkleEnd 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

/* Keyframes for Disco Ball */
@keyframes p4HolDiscoSway {
  0% { transform: rotate(-7deg); }

  100% { transform: rotate(7deg); }

}

@keyframes p4HolDiscoSettle {
  0% { transform: rotate(7deg); }

  15% { transform: rotate(-5.5deg); }

  30% { transform: rotate(4.2deg); }

  45% { transform: rotate(-3.0deg); }

  60% { transform: rotate(2.0deg); }

  75% { transform: rotate(-1.0deg); }

  90% { transform: rotate(0.4deg); }

  100% { transform: rotate(0deg); }

}

@keyframes p4HolDiscoBallSettle {
  0% { transform: rotate(0deg); }

  40% { transform: rotate(180deg); }

  70% { transform: rotate(270deg); }

  90% { transform: rotate(315deg); }

  100% { transform: rotate(330deg); }

}

@keyframes p4HolDiscoGlowPulse {
  0% { transform: translate(-50%, 0) scale(0.95); opacity: 0.4; }

  100% { transform: translate(-50%, 0) scale(1.15); opacity: 0.8; }

}

@keyframes p4HolGlowColorCycle {
  0% { filter: hue-rotate(0deg); }

  100% { filter: hue-rotate(360deg); }

}

@keyframes p4HolDiscoGlowFade {
  0% { opacity: 0.8; transform: translate(-50%, 0) scale(1.15); }

  100% { opacity: 0; transform: translate(-50%, 0) scale(0.6); }

}

/* Ray Sweeping Animations */
@keyframes p4HolDiscoRay1 {
  0% { transform: rotate(-35deg) scaleY(1); opacity: 0.6; }

  100% { transform: rotate(-50deg) scaleY(1.35); opacity: 0.95; }

}

@keyframes p4HolDiscoRay2 {
  0% { transform: rotate(-10deg) scaleY(1.3); opacity: 0.95; }

  100% { transform: rotate(-25deg) scaleY(1.0); opacity: 0.6; }

}

@keyframes p4HolDiscoRay3 {
  0% { transform: rotate(35deg) scaleY(1); opacity: 0.6; }

  100% { transform: rotate(50deg) scaleY(1.35); opacity: 0.95; }

}

@keyframes p4HolDiscoRay4 {
  0% { transform: rotate(10deg) scaleY(1.3); opacity: 0.95; }

  100% { transform: rotate(25deg) scaleY(1.0); opacity: 0.6; }

}

/* Ray Ending Animations */
@keyframes p4HolDiscoRayEndR1 {
  0% { opacity: 0.95; transform: rotate(-35deg) scaleY(1); }

  100% { opacity: 0; transform: rotate(-35deg) scaleY(0); }

}

@keyframes p4HolDiscoRayEndR2 {
  0% { opacity: 0.95; transform: rotate(-10deg) scaleY(1); }

  100% { opacity: 0; transform: rotate(-10deg) scaleY(0); }

}

@keyframes p4HolDiscoRayEndR3 {
  0% { opacity: 0.95; transform: rotate(35deg) scaleY(1); }

  100% { opacity: 0; transform: rotate(35deg) scaleY(0); }

}

@keyframes p4HolDiscoRayEndR4 {
  0% { opacity: 0.95; transform: rotate(10deg) scaleY(1); }

  100% { opacity: 0; transform: rotate(10deg) scaleY(0); }

}

/* Sparkle Floating Animations */
@keyframes p4Sparkle1 {
  0% { transform: translate(0, 0) scale(0) rotate(0deg); opacity: 0; }

  50% { transform: translate(-12px, -8px) scale(1.2) rotate(180deg); opacity: 1; }

  100% { transform: translate(-20px, -15px) scale(0) rotate(360deg); opacity: 0; }

}

@keyframes p4Sparkle2 {
  0% { transform: translate(0, 0) scale(0) rotate(0deg); opacity: 0; }

  50% { transform: translate(0px, 15px) scale(1.3) rotate(-180deg); opacity: 1; }

  100% { transform: translate(0px, 25px) scale(0) rotate(-360deg); opacity: 0; }

}

@keyframes p4Sparkle3 {
  0% { transform: translate(0, 0) scale(0) rotate(0deg); opacity: 0; }

  50% { transform: translate(12px, -8px) scale(1.2) rotate(180deg); opacity: 1; }

  100% { transform: translate(20px, -15px) scale(0) rotate(360deg); opacity: 0; }

}

@keyframes p4SparkleEnd {
  0% { opacity: 0.8; transform: scale(1); }

  100% { opacity: 0; transform: scale(0); }

}

/* ════════════════════════════
   21. Rolling Suitcase
   ════════════════════════════ */
.p4-hol-suitcase {
  position:absolute; bottom:12%; left:5%;
  width:25px; height:35px; cursor:pointer; z-index:5;
  will-change: transform;
}

body.p4.day.holiday-mode .p4-hol-suitcase {
  transform: scale(1.8);
}

/* Invisible expanded hit area to prevent hover flicker from zoom */
.p4-hol-suitcase::before {
  content:''; position:absolute;
  top:-10px; left:-10px; right:-10px; bottom:-10px;
}

.p4-hol-suitcase:hover:not(.active) {
  transform: translateZ(0);
}

.p4-hol-suit-body {
  width:20px; height:25px;
  background:linear-gradient(135deg,#0ea5e9,#0284c7);
  border-radius:4px; margin:5px auto 0;
  border:1.5px solid #38bdf8;
  will-change: transform;
}

.p4-hol-suit-handle {
  width:8px; height:6px; border:2px solid #475569;
  border-radius:3px 3px 0 0; border-bottom:none;
  margin:0 auto;
}

.p4-hol-suit-wheel {
  width:4px; height:4px; border-radius:50%;
  background:#1e293b; position:absolute; bottom:0;
  will-change: transform;
}

.p4-hol-suit-wheel.w1 { left:4px; }

.p4-hol-suit-wheel.w2 { right:4px; }

.p4-hol-suit-ticket { position:absolute;top:10px;right:-5px;font-size:8px;opacity:0;will-change:transform,opacity; }

.p4-hol-suitcase.active { animation: p4HolSlide 3s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards; }

body.p4.day.holiday-mode .p4-hol-suitcase.active { animation: p4HolSlideHoliday 3s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards; }

.p4-hol-suitcase.active .p4-hol-suit-wheel { animation: p4HolSpin 0.5s linear infinite; }

.p4-hol-suitcase.active .p4-hol-suit-ticket { opacity:1; animation: p4HolFadeUp 1.2s ease forwards 0.8s; }

/* ════════════════════════════
   23. Surfboard Against Wall
   ════════════════════════════ */
.p4-hol-surfboard {
  position: absolute;
  top: 8%;
  left: 2.5%;
  width: 38px;
  height: 130px;
  cursor: pointer;
  z-index: 4;
  user-select: none;
  transform-origin: 50% 98%;
  transform: rotate(-8deg) translateZ(0);
}

.p4-hol-surf-svg {
  width: 100%;
  height: 100%;
  overflow: visible;
  display: block;
}

/* Board group is the main animated element */
.p4-surf-board-group {
  transform-origin: 20px 134px;
  transition: transform 0.3s ease;
}

/* Ground shadow follows the board */
.p4-surf-ground-shadow {
  transition: rx 0.3s ease, opacity 0.3s ease;
}

/* Fin wiggles subtly */
.p4-surf-fin {
  transform-origin: 20px 130px;
  transition: transform 0.3s ease;
}

/* ── Hover ── */
.p4-hol-surfboard:hover:not(.active):not(.ending) .p4-surf-board-group {
  transform: rotate(2deg) translateY(-2px);
}

.p4-hol-surfboard:hover:not(.active):not(.ending) .p4-surf-ground-shadow {
  rx: 12;
  opacity: 0.12;
}

/* ── Idle Standby Animation ── */
.p4-hol-surfboard:not(.active):not(.ending) {
  animation: p4SurfIdle 5s ease-in-out infinite;
}

.p4-hol-surfboard:not(.active):not(.ending) .p4-surf-board-group {
  animation: p4SurfBoardIdle 4.5s ease-in-out infinite alternate;
}

.p4-hol-surfboard:not(.active):not(.ending) .p4-surf-fin {
  animation: p4SurfFinIdle 3.8s ease-in-out infinite alternate;
}

/* ── Active Click State ── */
.p4-hol-surfboard.active {
  animation: p4SurfContainerActive 2s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

.p4-hol-surfboard.active .p4-surf-board-group {
  animation: p4SurfBoardActive 2s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

.p4-hol-surfboard.active .p4-surf-fin {
  animation: p4SurfFinActive 2s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

.p4-hol-surfboard.active .p4-surf-ground-shadow {
  animation: p4SurfShadowActive 2s ease forwards;
}

/* Water drips during active */
.p4-hol-surfboard.active .p4-surf-drip.d1 {
  animation: p4SurfDrip 1.8s ease-in forwards 0.1s;
}

.p4-hol-surfboard.active .p4-surf-drip.d2 {
  animation: p4SurfDrip 1.5s ease-in forwards 0.3s;
}

.p4-hol-surfboard.active .p4-surf-drip.d3 {
  animation: p4SurfDrip 1.6s ease-in forwards 0.5s;
}

/* Splash ring during active */
.p4-hol-surfboard.active .p4-surf-splash-ring {
  animation: p4SurfSplash 0.8s cubic-bezier(0.165, 0.84, 0.44, 1) forwards 0.15s;
}

/* Sand burst during active */
.p4-hol-surfboard.active .p4-surf-sand-p.sp1 {
  animation: p4SurfSandBurst1 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards 0.05s;
}

.p4-hol-surfboard.active .p4-surf-sand-p.sp2 {
  animation: p4SurfSandBurst2 0.9s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards 0.1s;
}

.p4-hol-surfboard.active .p4-surf-sand-p.sp3 {
  animation: p4SurfSandBurst3 1.1s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards 0.15s;
}

.p4-hol-surfboard.active .p4-surf-sand-p.sp4 {
  animation: p4SurfSandBurst4 0.85s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards 0.08s;
}

/* ── Ending Settle State ── */
.p4-hol-surfboard.ending {
  animation: p4SurfContainerSettle 1.5s cubic-bezier(0.36, 0.07, 0.19, 0.97) forwards;
}

.p4-hol-surfboard.ending .p4-surf-board-group {
  animation: p4SurfBoardSettle 1.5s ease-out forwards;
}

.p4-hol-surfboard.ending .p4-surf-fin {
  animation: p4SurfFinSettle 1.5s ease-out forwards;
}

.p4-hol-surfboard.ending .p4-surf-ground-shadow {
  animation: p4SurfShadowSettle 1.5s ease-out forwards;
}

/* ═══ KEYFRAMES ═══ */
/* Idle: gentle lean sway like resting against wall */
@keyframes p4SurfIdle {
  0%   { transform: rotate(-8deg) translateY(0) translateZ(0); }

  25%  { transform: rotate(-9.5deg) translateY(-1px) translateZ(0); }

  50%  { transform: rotate(-7deg) translateY(0.5px) translateZ(0); }

  75%  { transform: rotate(-9deg) translateY(-0.5px) translateZ(0); }

  100% { transform: rotate(-8deg) translateY(0) translateZ(0); }

}

@keyframes p4SurfBoardIdle {
  0%   { transform: rotate(0deg) translateY(0); }

  50%  { transform: rotate(0.8deg) translateY(-1px); }

  100% { transform: rotate(0deg) translateY(0); }

}

@keyframes p4SurfFinIdle {
  0%   { transform: rotate(0deg); }

  50%  { transform: rotate(-1.5deg); }

  100% { transform: rotate(0deg); }

}

/* Active: dramatic wobble like someone picked it up and slammed it */
@keyframes p4SurfContainerActive {
  0%   { transform: rotate(-8deg) translateY(0); }

  8%   { transform: rotate(8deg) translateY(-12px); }

  20%  { transform: rotate(-15deg) translateY(-5px); }

  35%  { transform: rotate(10deg) translateY(-8px); }

  50%  { transform: rotate(-12deg) translateY(-3px); }

  65%  { transform: rotate(5deg) translateY(-6px); }

  80%  { transform: rotate(-9deg) translateY(-1px); }

  90%  { transform: rotate(-7deg) translateY(0); }

  100% { transform: rotate(-8deg) translateY(0); }

}

@keyframes p4SurfBoardActive {
  0%   { transform: scale(1) rotate(0deg); }

  10%  { transform: scale(1.06, 0.95) rotate(-4deg); }

  25%  { transform: scale(0.94, 1.08) rotate(6deg); }

  40%  { transform: scale(1.04, 0.97) rotate(-3deg); }

  55%  { transform: scale(0.97, 1.04) rotate(4deg); }

  70%  { transform: scale(1.02, 0.99) rotate(-1.5deg); }

  85%  { transform: scale(0.99, 1.01) rotate(1deg); }

  100% { transform: scale(1) rotate(0deg); }

}

@keyframes p4SurfFinActive {
  0%   { transform: rotate(0deg); }

  12%  { transform: rotate(15deg); }

  28%  { transform: rotate(-20deg); }

  44%  { transform: rotate(12deg); }

  60%  { transform: rotate(-8deg); }

  76%  { transform: rotate(4deg); }

  90%  { transform: rotate(-1.5deg); }

  100% { transform: rotate(0deg); }

}

@keyframes p4SurfShadowActive {
  0%   { rx: 10; opacity: 0.18; }

  15%  { rx: 14; opacity: 0.08; }

  40%  { rx: 8; opacity: 0.22; }

  70%  { rx: 12; opacity: 0.12; }

  100% { rx: 10; opacity: 0.18; }

}

/* Water drip: slides down and fades */
@keyframes p4SurfDrip {
  0%   { opacity: 0; transform: translateY(0) scaleY(1); }

  10%  { opacity: 0.85; }

  80%  { opacity: 0.4; transform: translateY(30px) scaleY(1.6); }

  100% { opacity: 0; transform: translateY(40px) scaleY(2); }

}

/* Splash ring: expands outward and fades */
@keyframes p4SurfSplash {
  0%   { transform: scale(0.3); opacity: 0; }

  20%  { opacity: 0.7; }

  100% { transform: scale(2.5); opacity: 0; }

}

/* Sand burst particles */
@keyframes p4SurfSandBurst1 {
  0%   { opacity: 0; transform: translate(0, 0) scale(1); }

  15%  { opacity: 0.9; }

  100% { opacity: 0; transform: translate(-12px, -20px) scale(0.3); }

}

@keyframes p4SurfSandBurst2 {
  0%   { opacity: 0; transform: translate(0, 0) scale(1); }

  15%  { opacity: 0.9; }

  100% { opacity: 0; transform: translate(10px, -18px) scale(0.3); }

}

@keyframes p4SurfSandBurst3 {
  0%   { opacity: 0; transform: translate(0, 0) scale(1); }

  15%  { opacity: 0.9; }

  100% { opacity: 0; transform: translate(-8px, -15px) scale(0.4); }

}

@keyframes p4SurfSandBurst4 {
  0%   { opacity: 0; transform: translate(0, 0) scale(1); }

  15%  { opacity: 0.9; }

  100% { opacity: 0; transform: translate(14px, -22px) scale(0.2); }

}

/* Settle: damped wobble back to resting position */
@keyframes p4SurfContainerSettle {
  0%   { transform: rotate(-8deg) translateY(0); }

  15%  { transform: rotate(-11deg) translateY(-2px); }

  30%  { transform: rotate(-6deg) translateY(1px); }

  50%  { transform: rotate(-9.5deg) translateY(-1px); }

  70%  { transform: rotate(-7.5deg) translateY(0.5px); }

  85%  { transform: rotate(-8.3deg) translateY(0); }

  100% { transform: rotate(-8deg) translateY(0); }

}

@keyframes p4SurfBoardSettle {
  0%   { transform: rotate(0deg) translateY(0); }

  20%  { transform: rotate(2deg) translateY(-1px); }

  45%  { transform: rotate(-1.5deg) translateY(0.5px); }

  65%  { transform: rotate(0.8deg) translateY(-0.3px); }

  85%  { transform: rotate(-0.3deg) translateY(0); }

  100% { transform: rotate(0deg) translateY(0); }

}

@keyframes p4SurfFinSettle {
  0%   { transform: rotate(0deg); }

  20%  { transform: rotate(-5deg); }

  45%  { transform: rotate(3deg); }

  70%  { transform: rotate(-1.5deg); }

  100% { transform: rotate(0deg); }

}

@keyframes p4SurfShadowSettle {
  0%   { rx: 10; opacity: 0.18; }

  30%  { rx: 12; opacity: 0.14; }

  60%  { rx: 9; opacity: 0.20; }

  100% { rx: 10; opacity: 0.18; }

}

/* ════════════════════════════
   24. Inflatable Flamingo
   ════════════════════════════ */
.p4-hol-flamingo {
  position: absolute;
  bottom: 26.5%;
  left: 45.8%;
  width: 48px;
  height: 48px;
  cursor: pointer;
  z-index: 4;
  user-select: none;
}

.p4-hol-flam-svg {
  width: 100%;
  height: 100%;
  overflow: visible;
  display: block;
}

/* Base element anchors and transitions */
.p4-flam-float {
  transform-origin: 50% 74%;
  transition: transform 0.1s ease;
}

.p4-flam-neck-head {
  transform-origin: 35% 72%;
}

.p4-flam-shadow {
  transform-origin: 50% 80%;
}

.p4-flam-ripple {
  transform-origin: 50% 80%;
}

/* ─────────────────────────────────────────
   1. IDLE FLOATING ANIMATION
   ───────────────────────────────────────── */
.p4-hol-flamingo:not(.active):not(.ending) .p4-flam-float {
  animation: p4FlamIdleFloat 3.5s ease-in-out infinite;
}

.p4-hol-flamingo:not(.active):not(.ending) .p4-flam-neck-head {
  animation: p4FlamIdleNeck 3.5s ease-in-out infinite;
}

.p4-hol-flamingo:not(.active):not(.ending) .p4-flam-shadow {
  animation: p4FlamIdleShadow 3.5s ease-in-out infinite;
}

.p4-hol-flamingo:not(.active):not(.ending) .p4-flam-ripple.r1 {
  animation: p4FlamIdleRipple 5s linear infinite;
}

.p4-hol-flamingo:not(.active):not(.ending) .p4-flam-ripple.r2 {
  animation: p4FlamIdleRipple 5s linear infinite 2.5s;
}

/* ─────────────────────────────────────────
   2. ACTIVE INTERACTIVE ANIMATION (2.5s)
   ───────────────────────────────────────── */
.p4-hol-flamingo.active .p4-flam-float {
  animation: p4FlamActiveSplash 2.5s cubic-bezier(0.28, 0.84, 0.42, 1) forwards;
}

.p4-hol-flamingo.active .p4-flam-neck-head {
  animation: p4FlamActiveNeck 2.5s cubic-bezier(0.28, 0.84, 0.42, 1) forwards;
}

.p4-hol-flamingo.active .p4-flam-shadow {
  animation: p4FlamActiveShadow 2.5s cubic-bezier(0.28, 0.84, 0.42, 1) forwards;
}

.p4-hol-flamingo.active .p4-flam-ripple.r1 {
  animation: p4FlamActiveRipple 1.25s ease-out infinite;
}

.p4-hol-flamingo.active .p4-flam-ripple.r2 {
  animation: p4FlamActiveRipple 1.25s ease-out infinite 0.625s;
}

/* ─────────────────────────────────────────
   3. ENDING SETTLE ANIMATION (1.5s)
   ───────────────────────────────────────── */
.p4-hol-flamingo.ending .p4-flam-float {
  animation: p4FlamEndingSettle 1.5s ease-out forwards;
}

.p4-hol-flamingo.ending .p4-flam-neck-head {
  animation: p4FlamEndingNeck 1.5s ease-out forwards;
}

.p4-hol-flamingo.ending .p4-flam-shadow {
  animation: p4FlamEndingShadow 1.5s ease-out forwards;
}

/* ════════════════════════════
   25. Beach Towel on Chair
   ════════════════════════════ */
.p4-hol-towel {
  position: absolute;
  bottom: 27%;
  right: 26.3%;
  width: 24px;
  height: 44px;
  cursor: pointer;
  z-index: 4;
  transform: rotate(5deg);
  transform-origin: top center;
  filter: drop-shadow(0 3px 5px rgba(0, 0, 0, 0.4));
  will-change: transform;
}

.p4-hol-towel-fabric {
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, 
    #f43f5e 0%,
    #ec4899 35%,
    #f472b6 70%,
    #db2777 100%
  );
  border-radius: 4px 4px 2px 2px;
  position: relative;
  overflow: hidden;
  box-shadow: inset 1.5px 0 2px rgba(255,255,255,0.25), inset -1.5px 0 2px rgba(0,0,0,0.25);
}

.p4-hol-towel-fabric::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: linear-gradient(to right, 
    rgba(0,0,0,0.15) 0%, 
    rgba(255,255,255,0.12) 20%, 
    rgba(0,0,0,0.05) 45%, 
    rgba(0,0,0,0.25) 70%, 
    rgba(255,255,255,0.15) 85%, 
    rgba(0,0,0,0.2) 100%
  );
  background-size: 200% 100%;
  pointer-events: none;
  z-index: 3;
}

.p4-hol-towel-fabric::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 14px;
  background: linear-gradient(to bottom, rgba(255,255,255,0.1) 0%, rgba(0,0,0,0.3) 100%);
  border-bottom: 1px solid rgba(0,0,0,0.2);
  z-index: 2;
}

.p4-hol-towel-stripe {
  width: 100%;
  height: 5px;
  position: absolute;
  background: rgba(255, 255, 255, 0.75);
  box-shadow: 0 1px 2px rgba(0,0,0,0.1);
  z-index: 1;
}

.p4-hol-towel-stripe.s1 { top: 20px; }

.p4-hol-towel-stripe.s2 { top: 32px; }

.p4-hol-towel::after {
  content: '';
  position: absolute;
  bottom: -6px;
  left: 2px;
  right: 2px;
  height: 6px;
  background-image: repeating-linear-gradient(
    to right,
    rgba(255,255,255,0.9) 0px,
    rgba(255,255,255,0.9) 2px,
    transparent 2px,
    transparent 4px
  );
  z-index: 5;
}

.p4-hol-towel.active {
  animation: p4HolTowelActiveSway 1s ease-in-out infinite;
}

.p4-hol-towel.active .p4-hol-towel-fabric::before {
  animation: p4HolTowelCreaseWave 1s linear infinite;
}

.p4-hol-towel.ending {
  animation: p4HolTowelSettle 1.5s cubic-bezier(0.25, 0.8, 0.25, 1) forwards;
}

/* ════════════════════════════
   26. "Gone Fishing" Sign
   ════════════════════════════ */
.p4-hol-sign {
  position:absolute; top:28%; right:5%;
  width:85px; height:50px; cursor:pointer; z-index:5;
  transform-origin: top center;
  animation: p4HolSignGentleSway 3s ease-in-out infinite alternate;
  will-change: transform;
}

.p4-hol-sign-hook { width:2px;height:10px;background:#94a3b8;margin:0 auto; }

.p4-hol-sign-board {
  width:80px; padding:4px 3px;
  background:linear-gradient(135deg,#fef3c7,#fde68a);
  border:1.5px solid #d97706; border-radius:3px;
  font-size:6.5px; font-weight:800; color:#92400e;
  text-align:center; margin:0 auto;
  transform-origin:top center;
  box-shadow:0 2px 6px rgba(0,0,0,0.15);
  will-change: transform;
  transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.p4-hol-sign.active .p4-hol-sign-board { animation: p4HolSignInteract 2.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards; }

@keyframes p4HolSignGentleSway {
  0% { transform: rotate(-4deg); }

  100% { transform: rotate(4deg); }

}

@keyframes p4HolSignInteract {
  0%   { transform: rotate(0deg); }

  8%   { transform: rotate(26deg); }

  16%  { transform: rotate(-24deg); }

  24%  { transform: rotate(20deg); }

  32%  { transform: rotate(-18deg); }

  42%  { transform: rotate(14deg); }

  52%  { transform: rotate(-11deg); }

  62%  { transform: rotate(8deg); }

  72%  { transform: rotate(-7deg); }

  82%  { transform: rotate(4deg); }

  92%  { transform: rotate(0deg); }

  100% { transform: rotate(0deg); }

}

/* ════════════════════════════
   27. Postcard Wall
   ════════════════════════════ */
.p4-hol-postcards {
  position:absolute; top:15%; left:15%;
  width:100px; height:54px; cursor:pointer; z-index:5;
  perspective: 800px;
}

/* Double wire string: main top wire + bottom shadow wire for wrapped Tokyo postcard */
.p4-hol-postcards::before {
  content: "";
  position: absolute;
  top: -1px;
  left: -12px;
  right: -12px;
  height: 1.2px;
  background: repeating-linear-gradient(90deg, #64748b, #94a3b8 3px, #475569 6px);
  box-shadow: 
    0 50px 0 #475569,
    0 0.5px 1.2px rgba(0, 0, 0, 0.2);
  z-index: 1;
  pointer-events: none;
}

/* Fastened metal support nails at both ends of the wires */
.p4-hol-postcards::after {
  content: "";
  position: absolute;
  top: -3.5px;
  left: -14px;
  width: 3.5px;
  height: 3.5px;
  background: radial-gradient(circle at 30% 30%, #f1f5f9, #64748b, #334155);
  border-radius: 50%;
  box-shadow: 
    128px 0 0 #475569,       /* Top Right nail */
    0 50px 0 #475569,        /* Bottom Left nail */
    128px 50px 0 #475569;    /* Bottom Right nail */
  z-index: 2;
  pointer-events: none;
}

body.p4.day.holiday-mode .p4-hol-postcards {
  left: auto;
  right: 4%;
  top: 4%;
}

/* Polaroid Card Base Design */
.p4-hol-pc-card {
  width: 37px;
  height: 47px;
  display: inline-block;
  vertical-align: top;
  position: relative;
  background: linear-gradient(135deg, #fffdfa 0%, #faf6f0 100%);
  border: 0.5px solid rgba(0, 0, 0, 0.1);
  border-radius: 1px;
  padding: 2px 2px 8.5px 2px;
  text-align: center;
  box-shadow: 
    0 1.8px 5px rgba(0, 0, 0, 0.18), 
    0 0.8px 1.8px rgba(0, 0, 0, 0.12),
    inset 0 0 0 0.5px rgba(255, 255, 255, 0.8);
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s;
  z-index: 3;
  transform-origin: top center;
  transform-style: preserve-3d;
  backface-visibility: visible;
}

/* Wood clips suspending postcards from the wires */
.p4-hol-pc-card::before {
  content: "";
  position: absolute;
  top: -7.5px;
  left: 50%;
  transform: translateX(-50%);
  width: 4.2px;
  height: 11px;
  background: linear-gradient(to right, #78350f 0%, #a16207 40%, #854d0e 60%, #78350f 100%);
  border-radius: 1px;
  box-shadow: 0 1px 2.5px rgba(0, 0, 0, 0.3);
  z-index: 4;
}

/* Metal ring coil spring in the wooden clip */
.p4-hol-pc-card::after {
  content: "";
  position: absolute;
  top: -3.2px;
  left: 50%;
  transform: translateX(-50%);
  width: 2px;
  height: 2px;
  background: linear-gradient(135deg, #e2e8f0, #475569);
  border: 0.25px solid #64748b;
  border-radius: 50%;
  box-shadow: 0 0.4px 0.8px rgba(0, 0, 0, 0.3);
  z-index: 5;
}

/* Rest offset positioning & organic rot angles */
.pc1 { transform: rotate(-6deg) translateY(2.5px); }

.pc2 { transform: rotate(8deg) translateY(0.8px); margin-left: 3px; }

.pc3 { transform: rotate(-3deg) translateY(4.2px); margin-top: 6.5px; }

/* Photo part of the Polaroid */
.p4-hol-pc-card .pc-photo {
  display: block;
  position: relative;
  border: 0.5px solid rgba(0, 0, 0, 0.08);
  border-radius: 0.5px;
  font-size: 14px;
  line-height: 1.2;
  padding: 2.2px 0;
  margin-bottom: 2.2px;
  box-shadow: inset 0 1px 2.5px rgba(0, 0, 0, 0.12);
  overflow: hidden;
}

/* Unique photographic color templates */
.pc1 .pc-photo {
  background: linear-gradient(135deg, #38bdf8, #0284c7); /* Bali: Ocean blue */
}

.pc2 .pc-photo {
  background: linear-gradient(135deg, #fdba74, #ea580c); /* Paris: Twilight orange */
}

.pc3 .pc-photo {
  background: linear-gradient(135deg, #fbcfe8, #db2777); /* Tokyo: Sakura pink */
}

/* Glossy sheen glare reflection overlay */
.p4-hol-pc-card .pc-photo::after {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.35) 0%, rgba(255, 255, 255, 0) 55%);
  pointer-events: none;
}

/* Handwritten Polaroid caption styling */
.p4-hol-pc-card .pc-caption {
  display: block;
  font-family: 'Caveat', cursive, sans-serif;
  font-weight: 700;
  font-size: 12px;
  color: #1a1a1a;
  line-height: 1;
  white-space: nowrap;
  letter-spacing: 0.3px;
  text-shadow: 
    0 0 0 #000,
    0.2px 0.2px 0px rgba(0, 0, 0, 0.15);
  -webkit-font-smoothing: antialiased;
}

/* Individual text rot angles for hand-signed look */
.pc1 .pc-caption { transform: rotate(-1.5deg); }

.pc2 .pc-caption { transform: rotate(1.2deg); }

.pc3 .pc-caption { transform: rotate(-2deg); }

/* Premium hover effect: smooth inspection zoom and glow shadow */
.p4-hol-pc-card:hover {
  transform: scale(1.25) rotate(0deg) translateY(-4px) !important;
  box-shadow: 0 7px 16px rgba(245, 166, 35, 0.35), 0 2.5px 5px rgba(0, 0, 0, 0.18);
  z-index: 10;
}

/* Active animations (clicking interaction) */
.p4-hol-postcards.active .pc1 { animation: p4PCActiveBali 3s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards; }

.p4-hol-postcards.active .pc2 { animation: p4PCActiveParis 3s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards; }

.p4-hol-postcards.active .pc3 { animation: p4PCActiveTokyo 3s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards; }

/* Ending animations (decaying settle back to rest angles) */
.p4-hol-postcards.ending .pc1 { animation: p4PCEndingBali 1.5s ease-out forwards; }

.p4-hol-postcards.ending .pc2 { animation: p4PCEndingParis 1.5s ease-out forwards; }

.p4-hol-postcards.ending .pc3 { animation: p4PCEndingTokyo 1.5s ease-out forwards; }

/* Bali active swing */
@keyframes p4PCActiveBali {
  0%   { transform: rotate(-6deg) translateY(2.5px); }

  10%  { transform: rotate(-48deg) translateY(1.5px); }

  22%  { transform: rotate(38deg) translateY(2.5px); }

  35%  { transform: rotate(-32deg) translateY(1.5px); }

  48%  { transform: rotate(24deg) translateY(2.5px); }

  62%  { transform: rotate(-18deg) translateY(1.5px); }

  75%  { transform: rotate(12deg) translateY(2.5px); }

  88%  { transform: rotate(-10deg) translateY(1.5px); }

  100% { transform: rotate(-6deg) translateY(2.5px); }

}

/* Paris active double Y-axis 3D flip spin with recoil */
@keyframes p4PCActiveParis {
  0%   { transform: rotate(8deg) translateY(0.8px) rotateY(0deg); }

  25%  { transform: rotate(-15deg) translateY(-3px) rotateY(180deg) scale(1.15); }

  50%  { transform: rotate(12deg) translateY(1.5px) rotateY(360deg) scale(1.05); }

  75%  { transform: rotate(-8deg) translateY(-1.5px) rotateY(540deg) scale(1.12); }

  100% { transform: rotate(8deg) translateY(0.8px) rotateY(720deg) scale(1); }

}

/* Tokyo active squash/stretch vertical elastic wiggles */
@keyframes p4PCActiveTokyo {
  0%   { transform: rotate(-3deg) scale(1) translateY(4.2px); }

  15%  { transform: rotate(22deg) scale(1.18, 0.82) translateY(-2.5px); }

  30%  { transform: rotate(-26deg) scale(0.82, 1.18) translateY(6.5px); }

  45%  { transform: rotate(18deg) scale(1.1, 0.9) translateY(0.8px); }

  60%  { transform: rotate(-14deg) scale(0.92, 1.08) translateY(5px); }

  75%  { transform: rotate(10deg) scale(1.05, 0.95) translateY(2.5px); }

  88%  { transform: rotate(-6deg) scale(0.98, 1.02) translateY(4.5px); }

  100% { transform: rotate(-3deg) scale(1) translateY(4.2px); }

}

/* Decaying settle ending swing animations */
@keyframes p4PCEndingBali {
  0%   { transform: rotate(-15deg) translateY(2.5px); }

  25%  { transform: rotate(4deg) translateY(2.5px); }

  50%  { transform: rotate(-10deg) translateY(2.5px); }

  75%  { transform: rotate(-5deg) translateY(2.5px); }

  100% { transform: rotate(-6deg) translateY(2.5px); }

}

@keyframes p4PCEndingParis {
  0%   { transform: rotate(-10deg) translateY(0.8px) rotateY(15deg); }

  25%  { transform: rotate(14deg) translateY(0.8px) rotateY(-8deg); }

  50%  { transform: rotate(5deg) translateY(0.8px) rotateY(4deg); }

  75%  { transform: rotate(9deg) translateY(0.8px) rotateY(-2deg); }

  100% { transform: rotate(8deg) translateY(0.8px) rotateY(0deg); }

}

@keyframes p4PCEndingTokyo {
  0%   { transform: rotate(15deg) translateY(1.5px) scale(0.95, 1.05); }

  25%  { transform: rotate(-10deg) translateY(5px) scale(1.03, 0.97); }

  50%  { transform: rotate(2deg) translateY(3.8px) scale(0.99, 1.01); }

  75%  { transform: rotate(-5deg) translateY(4.3px) scale(1); }

  100% { transform: rotate(-3deg) translateY(4.2px) scale(1); }

}

/* ════════════════════════════
   28. Paper Airplane
   ════════════════════════════ */
.p4-hol-airplane {
  position:absolute; top:3%; left:auto; right:27%;
  width:32px; height:32px; cursor:pointer; z-index:6;
}

.p4-hol-plane-body {
  width: 100%; height: 100%;
  transform: rotate(45deg);
  transform-origin: center center;
  position: relative;
}

.p4-hol-plane-svg {
  width: 100%; height: 100%;
  display: block;
}

/* Fallback Idle Hovering Loop */
.p4-hol-airplane:not(.active):not(.ending) .p4-hol-plane-body {
  animation: p4PlaneIdleLoop 4s infinite ease-in-out;
}

@keyframes p4PlaneIdleLoop {
  0% { transform: translateY(0) rotate(45deg) scale(1); }

  50% { transform: translateY(-4px) rotate(48deg) scale(1.05); }

  100% { transform: translateY(0) rotate(45deg) scale(1); }

}

/* Day Holiday Mode - Continuous Soaring Loop */
body.p4.day.holiday-mode .p4-hol-airplane:not(.active):not(.ending) .p4-hol-plane-body {
  animation: p4PlaneDayHolidayLoop 12s infinite ease-in-out;
}

@keyframes p4PlaneDayHolidayLoop {
  0% {
    transform: translate(0, 0) rotate(45deg) scale(1) rotateY(0deg) rotateX(0deg);
  }

  20% {
    transform: translate(80px, -35px) rotate(58deg) scale(1.15) rotateY(20deg) rotateX(-5deg);
  }

  40% {
    transform: translate(-30px, -80px) rotate(22deg) scale(0.85) rotateY(-10deg) rotateX(5deg);
  }

  60% {
    transform: translate(-90px, -30px) rotate(30deg) scale(1.05) rotateY(-20deg) rotateX(-5deg);
  }

  80% {
    transform: translate(30px, 20px) rotate(52deg) scale(0.95) rotateY(10deg) rotateX(5deg);
  }

  100% {
    transform: translate(0, 0) rotate(45deg) scale(1) rotateY(0deg) rotateX(0deg);
  }

}

/* Active Flight Animation (Loop-de-loop and fly away) */
.p4-hol-airplane.active .p4-hol-plane-body {
  animation: p4PlaneActiveFlight 3.2s cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
}

@keyframes p4PlaneActiveFlight {
  0% {
    transform: translate(0, 0) rotate(45deg) scale(1);
    opacity: 1;
  }

  12% {
    transform: translate(-15px, 15px) rotate(35deg) scale(0.9);
    opacity: 1;
  }

  28% {
    transform: translate(75px, -60px) rotate(70deg) scale(1.25);
    opacity: 1;
  }

  48% {
    transform: translate(140px, -130px) rotate(190deg) scale(1.4);
    opacity: 1;
  }

  64% {
    transform: translate(85px, -170px) rotate(280deg) scale(1.2);
    opacity: 1;
  }

  80% {
    transform: translate(220px, -120px) rotate(400deg) scale(1.05);
    opacity: 0.9;
  }

  100% {
    transform: translate(380px, -180px) rotate(435deg) scale(0.4);
    opacity: 0;
  }

}

/* Ending Settle Animation (Elastic Re-entry) */
.p4-hol-airplane.ending .p4-hol-plane-body {
  animation: p4PlaneEndingSettle 1.5s cubic-bezier(0.25, 0.8, 0.25, 1) forwards;
}

@keyframes p4PlaneEndingSettle {
  0% {
    transform: translate(-180px, 120px) rotate(0deg) scale(0.2);
    opacity: 0;
  }

  50% {
    transform: translate(10px, -15px) rotate(60deg) scale(1.2);
    opacity: 1;
  }

  75% {
    transform: translate(-3px, 5px) rotate(40deg) scale(0.95);
    opacity: 1;
  }

  90% {
    transform: translate(1px, -1px) rotate(48deg) scale(1.02);
    opacity: 1;
  }

  100% {
    transform: translate(0, 0) rotate(45deg) scale(1);
    opacity: 1;
  }

}

/* Exhaust / Excursion Trails */
.p4-hol-plane-trails {
  position: absolute;
  top: 70%; left: 15%;
  width: 1px; height: 1px;
  pointer-events: none;
}

.p4-plane-trail {
  position: absolute;
  height: 2px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.95), rgba(56, 189, 248, 0.45), transparent);
  border-radius: 1px;
  opacity: 0;
  transform-origin: right center;
}

.p4-plane-trail.t1 { transform: rotate(225deg); }

.p4-plane-trail.t2 { transform: rotate(210deg); }

.p4-plane-trail.t3 { transform: rotate(240deg); }

/* Active flight trail burst */
.p4-hol-airplane.active .p4-plane-trail {
  animation: p4PlaneTrailActive 3.2s ease forwards;
}

.p4-hol-airplane.active .p4-plane-trail.t2 { animation-delay: 0.1s; }

.p4-hol-airplane.active .p4-plane-trail.t3 { animation-delay: 0.2s; }

@keyframes p4PlaneTrailActive {
  0% { width: 0; opacity: 0; }

  10%, 80% { width: 22px; opacity: 0.85; }

  100% { width: 0; opacity: 0; }

}

/* Day Holiday Mode - Idle trail pulsing */
body.p4.day.holiday-mode .p4-hol-airplane:not(.active):not(.ending) .p4-plane-trail {
  animation: p4PlaneTrailIdle 6s infinite ease-in-out;
}

body.p4.day.holiday-mode .p4-hol-airplane:not(.active):not(.ending) .p4-plane-trail.t2 {
  animation-delay: 1s;
}

body.p4.day.holiday-mode .p4-hol-airplane:not(.active):not(.ending) .p4-plane-trail.t3 {
  animation-delay: 2s;
}

@keyframes p4PlaneTrailIdle {
  0% { width: 0; opacity: 0; }

  50% { width: 9px; opacity: 0.45; }

  100% { width: 0; opacity: 0; }

}

/* ════════════════════════════
   29. Mini Palm Tree
   ════════════════════════════ */
.p4-hol-palmtree {
  position:absolute; top:10%; left:38%;
  width:32px; height:55px; cursor:pointer; z-index:4;
  transform-origin: bottom center;
  will-change: transform;
  transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.p4-hol-palm-pot {
  width: 12px; height: 9px;
  background: linear-gradient(135deg, #f97316, #ea580c);
  border-radius: 0 0 3px 3px;
  border: 1px solid #c2410c;
  position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

.p4-hol-palm-trunk {
  width: 5px; height: 32px;
  background: linear-gradient(to top, #92400e, #d97706);
  position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%);
  border-radius: 2px 2px 0 0;
  box-shadow: inset 1px 0 rgba(255,255,255,0.1);
}

.p4-hol-palm-crown {
  position: absolute;
  top: -2px; left: 50%;
  transform: translateX(-50%);
  width: 32px; height: 32px;
  transform-origin: bottom center;
}

.p4-hol-palm-leaf {
  position: absolute;
  font-size: 13px;
  transform-origin: bottom center;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,0.15));
  transition: transform 0.4s ease-out;
}

.p4-hol-palm-leaf.leaf1 { bottom: 10px; left: -4px; transform: rotate(-75deg); }

.p4-hol-palm-leaf.leaf2 { bottom: 14px; left: 0px; transform: rotate(-35deg); }

.p4-hol-palm-leaf.leaf3 { bottom: 16px; left: 8px; transform: rotate(0deg); }

.p4-hol-palm-leaf.leaf4 { bottom: 14px; right: 0px; transform: rotate(35deg); }

.p4-hol-palm-leaf.leaf5 { bottom: 10px; right: -4px; transform: rotate(75deg); }

/* Continuous swaying and leaf rustle in day holiday mode */
body.p4.day.holiday-mode:not(.relaxed-mode) .p4-hol-palmtree:not(.active):not(.ending) {
  animation: p4HolTreeGentleSway 6s ease-in-out infinite alternate;
}

body.p4.day.holiday-mode:not(.relaxed-mode) .p4-hol-palmtree:not(.active):not(.ending) .p4-hol-palm-leaf.leaf1 { animation: p4HolLeafRustle1 4s ease-in-out infinite alternate; }

body.p4.day.holiday-mode:not(.relaxed-mode) .p4-hol-palmtree:not(.active):not(.ending) .p4-hol-palm-leaf.leaf2 { animation: p4HolLeafRustle2 4.5s ease-in-out infinite alternate; }

body.p4.day.holiday-mode:not(.relaxed-mode) .p4-hol-palmtree:not(.active):not(.ending) .p4-hol-palm-leaf.leaf3 { animation: p4HolLeafRustle3 5s ease-in-out infinite alternate; }

body.p4.day.holiday-mode:not(.relaxed-mode) .p4-hol-palmtree:not(.active):not(.ending) .p4-hol-palm-leaf.leaf4 { animation: p4HolLeafRustle4 4.5s ease-in-out infinite alternate; }

body.p4.day.holiday-mode:not(.relaxed-mode) .p4-hol-palmtree:not(.active):not(.ending) .p4-hol-palm-leaf.leaf5 { animation: p4HolLeafRustle5 4s ease-in-out infinite alternate; }

.p4-hol-palm-coconut {
  position: absolute;
  font-size: 7px;
  opacity: 1;
  will-change: transform, opacity;
}

.p4-hol-palm-coconut.c1 { bottom: 8px; left: 6px; }

.p4-hol-palm-coconut.c2 { bottom: 8px; right: 6px; }

/* Refined spring-back swing interaction animation */
.p4-hol-palmtree.active {
  animation: p4HolTreeSpring 2.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

.p4-hol-palmtree.active .leaf1 { transform: rotate(-85deg) scale(1.15); }

.p4-hol-palmtree.active .leaf2 { transform: rotate(-45deg) scale(1.15); }

.p4-hol-palmtree.active .leaf3 { transform: rotate(0deg) scale(1.15); }

.p4-hol-palmtree.active .leaf4 { transform: rotate(45deg) scale(1.15); }

.p4-hol-palmtree.active .leaf5 { transform: rotate(85deg) scale(1.15); }

.p4-hol-palmtree.active .p4-hol-palm-crown {
  animation: p4HolCrownSpring 2.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

.p4-hol-palmtree.active .p4-hol-palm-coconut.c1 {
  opacity: 1;
  animation: p4HolCocoDrop1 1.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards 0.3s;
}

.p4-hol-palmtree.active .p4-hol-palm-coconut.c2 {
  opacity: 1;
  animation: p4HolCocoDrop2 1.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards 0.45s;
}

/* Palm Tree Ending Animations */
.p4-hol-palmtree.ending {
  animation: p4HolTreeSettle 1.5s ease-out forwards;
}

.p4-hol-palmtree.ending .p4-hol-palm-crown {
  animation: p4HolCrownSettle 1.5s ease-out forwards;
}

.p4-hol-palmtree.ending .p4-hol-palm-coconut {
  animation: p4HolCocoRegrow 1.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

@keyframes p4HolTreeSpring {
  0%   { transform: rotate(0deg) scale(1); }

  10%  { transform: rotate(18deg) scale(0.95); }

  20%  { transform: rotate(-15deg) scale(0.98); }

  35%  { transform: rotate(12deg) scale(1); }

  50%  { transform: rotate(-8deg); }

  65%  { transform: rotate(5deg); }

  80%  { transform: rotate(-2deg); }

  95%  { transform: rotate(1deg); }

  100% { transform: rotate(0deg); }

}

@keyframes p4HolCocoDrop1 {
  0%   { transform: translate(0, 0) scale(1); opacity: 1; }

  50%  { transform: translate(-12px, 35px) scale(0.9); opacity: 0.9; }

  100% { transform: translate(-18px, 60px) scale(0.7); opacity: 0; }

}

@keyframes p4HolCocoDrop2 {
  0%   { transform: translate(0, 0) scale(1); opacity: 1; }

  50%  { transform: translate(12px, 32px) scale(0.9); opacity: 0.9; }

  100% { transform: translate(16px, 55px) scale(0.7); opacity: 0; }

}

@keyframes p4HolCrownSpring {
  0%   { transform: translateX(-50%) rotate(0deg); }

  12%  { transform: translateX(-50%) rotate(8deg); }

  24%  { transform: translateX(-50%) rotate(-7deg); }

  36%  { transform: translateX(-50%) rotate(5deg); }

  48%  { transform: translateX(-50%) rotate(-4deg); }

  60%  { transform: translateX(-50%) rotate(3deg); }

  72%  { transform: translateX(-50%) rotate(-2deg); }

  85%  { transform: translateX(-50%) rotate(1deg); }

  100% { transform: translateX(-50%) rotate(0deg); }

}

/* --- New Ending Animations Keyframes --- */
@keyframes p4HolTreeSettle {
  0%   { transform: rotate(0deg); }

  20%  { transform: rotate(-4deg); }

  40%  { transform: rotate(3deg); }

  60%  { transform: rotate(-1.5deg); }

  80%  { transform: rotate(0.5deg); }

  100% { transform: rotate(0deg); }

}

@keyframes p4HolCrownSettle {
  0%   { transform: translateX(-50%) rotate(0deg) scale(1); }

  15%  { transform: translateX(-50%) rotate(-4deg) scale(1.05); }

  30%  { transform: translateX(-50%) rotate(4deg) scale(0.95); }

  45%  { transform: translateX(-50%) rotate(-2.5deg) scale(1.02); }

  60%  { transform: translateX(-50%) rotate(2deg) scale(0.98); }

  75%  { transform: translateX(-50%) rotate(-1deg) scale(1.01); }

  90%  { transform: translateX(-50%) rotate(0.5deg) scale(1); }

  100% { transform: translateX(-50%) rotate(0deg) scale(1); }

}

@keyframes p4HolCocoRegrow {
  0% {
    transform: scale(0);
    opacity: 0;
    filter: drop-shadow(0 0 8px rgba(74, 222, 128, 0.8));
  }

  50% {
    transform: scale(1.2);
    opacity: 0.8;
    filter: drop-shadow(0 0 12px rgba(74, 222, 128, 1));
  }

  100% {
    transform: scale(1);
    opacity: 1;
    filter: none;
  }

}

/* Palm Tree Continuous Sway & Leaf Rustling */
@keyframes p4HolTreeGentleSway {
  0% { transform: rotate(-2deg); }

  100% { transform: rotate(2deg); }

}

@keyframes p4HolLeafRustle1 {
  0%, 100% { transform: rotate(-75deg); }

  50% { transform: rotate(-78deg) scaleY(0.98); }

}

@keyframes p4HolLeafRustle2 {
  0%, 100% { transform: rotate(-35deg); }

  50% { transform: rotate(-37deg) scaleY(1.02); }

}

@keyframes p4HolLeafRustle3 {
  0%, 100% { transform: rotate(0deg); }

  50% { transform: rotate(-2deg) translateY(-0.5px); }

}

@keyframes p4HolLeafRustle4 {
  0%, 100% { transform: rotate(35deg); }

  50% { transform: rotate(37deg) scaleY(1.02); }

}

@keyframes p4HolLeafRustle5 {
  0%, 100% { transform: rotate(75deg); }

  50% { transform: rotate(78deg) scaleY(0.98); }

}

@keyframes p4HolGiftSettle {
  0% { transform: rotate(0deg) scale(1); }

  15% { transform: rotate(-3deg) scale(1.1, 0.9); }

  30% { transform: rotate(2deg) scale(0.95, 1.05); }

  45% { transform: rotate(-1deg) scale(1.02, 0.98); }

  60% { transform: rotate(0.5deg) scale(0.99, 1.01); }

  75% { transform: rotate(-0.2deg) scale(1.005, 0.995); }

  100% { transform: rotate(0deg) scale(1); }

}

@keyframes p4HolGiftLidSettle {
  0% { transform: translateY(-16px) rotate(-15deg); }

  25% { transform: translateY(0) rotate(0deg); }

  50% { transform: translateY(-4px) rotate(4deg); }

  70% { transform: translateY(0) rotate(0deg); }

  85% { transform: translateY(-1.5px) rotate(-2deg); }

  100% { transform: translateY(0) rotate(0deg); }

}

@keyframes p4HolGiftWobble {
  0%, 100% { transform: scale(1) rotate(0deg); }

  25% { transform: scale(1.06, 0.94) rotate(-6deg); }

  50% { transform: scale(0.94, 1.06) rotate(6deg); }

  75% { transform: scale(1.03, 0.97) rotate(-3deg); }

}

@keyframes p4HolPhoneSettle {
  0% { transform: rotate(2deg) translate(1px, -1px); }

  20% { transform: rotate(-1.5deg) translate(-1px, 1px); }

  40% { transform: rotate(1deg) translate(0.5px, -0.5px); }

  60% { transform: rotate(-0.5deg) translate(-0.2px, 0.2px); }

  80% { transform: rotate(0.2deg) translate(0, 0); }

  100% { transform: rotate(0deg) translate(0, 0); }

}

@keyframes p4HolHandsetSettle {
  0% { transform: translateY(-4px) rotate(-10deg); }

  30% { transform: translateY(0) rotate(0deg); }

  50% { transform: translateY(-2px) rotate(4deg); }

  70% { transform: translateY(0) rotate(0deg); }

  85% { transform: translateY(-0.8px) rotate(-1.5deg); }

  100% { transform: translateY(0) rotate(0deg); }

}




@keyframes p4HolPinataIdle {
  0% { transform: rotate(-2.5deg); }

  100% { transform: rotate(2.5deg); }

}

@keyframes p4HolPinataActive1 {
  0% { transform: rotate(-25deg); }

  100% { transform: rotate(25deg); }

}

@keyframes p4HolPinataActive2 {
  0% { transform: rotateY(0deg); }

  100% { transform: rotateY(360deg); }

}

@keyframes p4HolPinataActive3 {
  0% { transform: translate(0, 0) rotate(0deg); }

  20% { transform: translate(-3px, 2px) rotate(-3deg); }

  40% { transform: translate(3px, -2px) rotate(3deg); }

  60% { transform: translate(-2px, -2px) rotate(-1deg); }

  80% { transform: translate(2px, 2px) rotate(2deg); }

  100% { transform: translate(0, 0) rotate(0deg); }

}

@keyframes p4HolPinataActive4 {
  0%, 100% { transform: translateY(0) scale(1, 1); }

  25% { transform: translateY(-12px) scale(0.9, 1.15); }

  50% { transform: translateY(0) scale(1.05, 0.95); }

  75% { transform: translateY(6px) scale(1.15, 0.85); }

}

@keyframes p4HolPinataActive5 {
  0% { transform: rotate(0deg) translateY(0); }

  25% { transform: rotate(15deg) translateY(-3px); }

  50% { transform: rotate(0deg) translateY(-8px); }

  75% { transform: rotate(-15deg) translateY(-3px); }

  100% { transform: rotate(0deg) translateY(0); }

}

@keyframes p4HolPinataSettle1 {
  0% { transform: rotate(20deg); }

  25% { transform: rotate(-14deg); }

  50% { transform: rotate(9deg); }

  75% { transform: rotate(-5deg); }

  90% { transform: rotate(2deg); }

  100% { transform: rotate(0deg); }

}

@keyframes p4HolPinataSettle2 {
  0% { transform: rotateY(360deg) rotate(8deg); }

  25% { transform: rotateY(180deg) rotate(-6deg); }

  50% { transform: rotateY(90deg) rotate(4deg); }

  75% { transform: rotateY(30deg) rotate(-2deg); }

  90% { transform: rotateY(5deg) rotate(1deg); }

  100% { transform: rotateY(0deg) rotate(0deg); }

}

@keyframes p4HolPinataSettle3 {
  0% { transform: translate(2px, -1.5px) rotate(3deg); }

  25% { transform: translate(-1.2px, 1px) rotate(-2deg); }

  50% { transform: translate(0.7px, -0.6px) rotate(1.2deg); }

  75% { transform: translate(-0.3px, 0.2px) rotate(-0.6deg); }

  90% { transform: translate(0.1px, -0.1px) rotate(0.2deg); }

  100% { transform: translate(0, 0) rotate(0deg); }

}

@keyframes p4HolPinataSettle4 {
  0% { transform: translateY(4px) scale(1.1, 0.9); }

  25% { transform: translateY(-5px) scale(0.96, 1.04); }

  50% { transform: translateY(2.5px) scale(1.02, 0.98); }

  75% { transform: translateY(-1.2px) scale(0.99, 1.01); }

  90% { transform: translateY(0.4px) scale(1.005, 0.995); }

  100% { transform: translateY(0) scale(1, 1); }

}

@keyframes p4HolPinataContainerSettle {
  0% { transform: rotate(12deg) translateY(-2px); }

  25% { transform: rotate(-9deg) translateY(-1px); }

  50% { transform: rotate(6deg) translateY(0); }

  75% { transform: rotate(-3deg) translateY(0); }

  90% { transform: rotate(1deg) translateY(0); }

  100% { transform: rotate(0deg) translateY(0); }

}

@keyframes p4HolLootPopOut {
  0% {
    transform: translate(0, 0) scale(0) rotate(0deg);
    opacity: 0;
  }

  15% {
    opacity: 1;
    transform: translate(calc(var(--tx) * 0.35), calc(var(--ty) * 0.2 - 12px)) scale(1.4) rotate(calc(var(--rot, 360deg) * 0.2));
  }

  75% {
    opacity: 1;
  }

  100% {
    transform: translate(var(--tx), var(--ty)) scale(0) rotate(var(--rot, 360deg));
    opacity: 0;
  }

}

@keyframes p4HolLootDrop {
  0% {
    transform: translate(0, 0) scale(0) rotate(0deg);
    opacity: 0;
  }

  15% {
    opacity: 1;
    transform: translate(calc(var(--tx) * 0.25), -6px) scale(1.3) rotate(calc(var(--rot, 360deg) * 0.25));
  }

  75% {
    opacity: 1;
  }

  100% {
    transform: translate(var(--tx), var(--ty)) scale(0) rotate(var(--rot, 360deg));
    opacity: 0;
  }

}

@keyframes p4HolLootArc {
  0% {
    transform: translate(0, 0) scale(0) rotate(0deg);
    opacity: 0;
  }

  15% {
    opacity: 1;
  }

  45% {
    transform: translate(calc(var(--tx) * 0.5), -75px) scale(1.4) rotate(calc(var(--rot, 360deg) * 0.5));
  }

  75% {
    opacity: 1;
  }

  100% {
    transform: translate(var(--tx), var(--ty)) scale(0) rotate(var(--rot, 360deg));
    opacity: 0;
  }

}

@keyframes p4HolLootOrbit {
  0% {
    transform: translate(0, 0) scale(0) rotate(0deg);
    opacity: 0;
  }

  15% {
    opacity: 1;
  }

  45% {
    transform: translate(calc(var(--tx) * 0.5 + 15px), calc(var(--ty) * 0.5 - 15px)) scale(1.35) rotate(180deg);
  }

  75% {
    opacity: 1;
  }

  100% {
    transform: translate(var(--tx), var(--ty)) scale(0) rotate(360deg);
    opacity: 0;
  }

}

@keyframes p4HolLootExplode {
  0% {
    transform: translate(0, 0) scale(0) rotate(0deg);
    opacity: 0;
  }

  15% {
    opacity: 1;
    transform: translate(calc(var(--tx) * 0.3), calc(var(--ty) * 0.3)) scale(1.5) rotate(calc(var(--rot, 360deg) * 0.3));
  }

  75% {
    opacity: 1;
  }

  100% {
    transform: translate(var(--tx), var(--ty)) scale(0) rotate(var(--rot, 360deg));
    opacity: 0;
  }

}


@keyframes p4FlamIdleFloat {
  0%, 100% { transform: translateY(0) rotate(0deg); }

  50% { transform: translateY(-3.5px) rotate(1.5deg); }

}

@keyframes p4FlamIdleNeck {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }

  50% { transform: translate(-0.8px, 0.4px) rotate(-2deg); }

}

@keyframes p4FlamIdleShadow {
  0%, 100% { transform: scale(1); opacity: 0.18; }

  50% { transform: scale(0.9); opacity: 0.12; }

}

@keyframes p4FlamIdleRipple {
  0% { transform: scale(0.7); opacity: 0; }

  30% { opacity: 0.35; }

  100% { transform: scale(1.4); opacity: 0; }

}

@keyframes p4FlamActiveRipple {
  0% { transform: scale(0.5); opacity: 0; }

  15% { opacity: 0.9; }

  100% { transform: scale(2.2); opacity: 0; }

}

@keyframes p4FlamActiveSplash {
  0% { transform: scale(1) translateY(0) rotate(0); }

  8% { transform: scale(1.25, 0.6) translateY(3.5px) rotate(-4deg); }

  22% { transform: scale(0.85, 1.25) translateY(-25px) rotate(180deg); }

  35% { transform: scale(1.2, 0.75) translateY(4px) rotate(350deg); }

  45% { transform: scale(0.9, 1.1) translateY(-10px) rotate(370deg); }

  58% { transform: scale(1.08, 0.88) translateY(1.5px) rotate(358deg); }

  70% { transform: scale(0.96, 1.04) translateY(-3px) rotate(361deg); }

  82% { transform: scale(1.02, 0.98) translateY(0.5px) rotate(359.5deg); }

  100% { transform: scale(1) translateY(0) rotate(360deg); }

}

@keyframes p4FlamActiveNeck {
  0% { transform: translate(0, 0) rotate(0); }

  8% { transform: translate(1px, 2.5px) rotate(-10deg); }

  22% { transform: translate(-3px, -5px) rotate(22deg); }

  35% { transform: translate(2.5px, 2px) rotate(-18deg); }

  45% { transform: translate(-1.5px, -2px) rotate(10deg); }

  58% { transform: translate(1px, 0.8px) rotate(-6deg); }

  70% { transform: translate(-0.5px, -0.5px) rotate(3deg); }

  82% { transform: translate(0.2px, 0.2px) rotate(-1deg); }

  100% { transform: translate(0, 0) rotate(0); }

}

@keyframes p4FlamActiveShadow {
  0% { transform: scale(1); opacity: 0.18; }

  8% { transform: scale(1.15); opacity: 0.24; }

  22% { transform: scale(0.5); opacity: 0.03; }

  35% { transform: scale(1.25); opacity: 0.28; }

  45% { transform: scale(0.85); opacity: 0.1; }

  58% { transform: scale(1.08); opacity: 0.22; }

  70% { transform: scale(0.94); opacity: 0.15; }

  82% { transform: scale(1.02); opacity: 0.19; }

  100% { transform: scale(1); opacity: 0.18; }

}

@keyframes p4FlamEndingSettle {
  0% { transform: translateY(0) rotate(0); }

  22% { transform: translateY(-4px) rotate(-6deg); }

  44% { transform: translateY(2px) rotate(4deg); }

  66% { transform: translateY(-1.5px) rotate(-2deg); }

  88% { transform: translateY(0.5px) rotate(0.8deg); }

  100% { transform: translateY(0) rotate(0); }

}

@keyframes p4FlamEndingNeck {
  0% { transform: translate(0, 0) rotate(0); }

  22% { transform: translate(-0.8px, -0.4px) rotate(8deg); }

  44% { transform: translate(0.5px, 0.2px) rotate(-5deg); }

  66% { transform: translate(-0.3px, -0.1px) rotate(2.5deg); }

  88% { transform: translate(0.1px, 0) rotate(-1deg); }

  100% { transform: translate(0, 0) rotate(0); }

}

@keyframes p4FlamEndingShadow {
  0% { transform: scale(1); opacity: 0.18; }

  22% { transform: scale(0.92); opacity: 0.13; }

  44% { transform: scale(1.04); opacity: 0.21; }

  66% { transform: scale(0.97); opacity: 0.16; }

  88% { transform: scale(1.01); opacity: 0.19; }

  100% { transform: scale(1); opacity: 0.18; }

}

@keyframes p4HolTowelActiveSway {
  0%, 100% { transform: rotate(5deg) skewX(0deg) scaleX(1); }

  25% { transform: rotate(18deg) skewX(6deg) scaleX(0.95); }

  50% { transform: rotate(-8deg) skewX(-4deg) scaleX(1.05); }

  75% { transform: rotate(15deg) skewX(4deg) scaleX(0.97); }

}

@keyframes p4HolTowelCreaseWave {
  0% { background-position-x: 0px; }

  100% { background-position-x: 48px; }

}

@keyframes p4HolTowelSettle {
  0% { transform: rotate(-8deg) skewX(-4deg); }

  20% { transform: rotate(16deg) skewX(5deg); }

  40% { transform: rotate(-2deg) skewX(-1deg); }

  60% { transform: rotate(9deg) skewX(2deg); }

  80% { transform: rotate(3deg) skewX(1deg); }

  90% { transform: rotate(5.5deg) skewX(0.2deg); }

  100% { transform: rotate(5deg) skewX(0deg); }

}



/* ════════════════════════════
   30. Countdown Calendar
   ════════════════════════════ */
.p4-hol-calendar {
  position:absolute; top:18%; left:6%;
  width:28px; height:30px; cursor:pointer; z-index:5;
}

.p4-hol-cal-body {
  width:24px; height:22px;
  background:#fff; border:2px solid #e2e8f0;
  border-radius:2px; margin:6px auto 0;
  box-shadow:0 2px 6px rgba(0,0,0,0.1);
}

.p4-hol-cal-header {
  width:24px; height:6px; background:#ef4444;
  border-radius:2px 2px 0 0; position:absolute;
  top:6px; left:2px; font-size:4px; color:#fff;
  font-weight:900; text-align:center; line-height:6px;
}

.p4-hol-cal-page {
  position:absolute; top:14px; left:0; right:0;
  font-size:5px; font-weight:900; color:#1e293b;
  text-align:center;
}

.p4-hol-cal-ring {
  width:3px; height:5px; background:#94a3b8;
  border-radius:1px; position:absolute; top:3px;
}

.p4-hol-cal-ring.r1 { left:7px; }

.p4-hol-cal-ring.r2 { right:7px; }

.p4-hol-calendar.active {
  animation: p4HolCalActive 2.5s cubic-bezier(0.25, 0.8, 0.25, 1) forwards;
  transform-origin: bottom center;
}

.p4-hol-calendar.active .p4-hol-cal-page {
  color: #ef4444;
  transform: scale(1.05);
}

.p4-hol-calendar.ending {
  animation: p4HolCalSettleSmooth 1.5s ease-out forwards;
  transform-origin: bottom center;
}

/* Peel off page design */
.p4-hol-cal-peel {
  position: absolute;
  top: 12px;
  left: 2px;
  width: 24px;
  height: 16px;
  background: #ffffff;
  border: 2px solid #e2e8f0;
  border-top: none;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
  font-size: 5px;
  font-weight: 900;
  color: #1e293b;
  text-align: center;
  line-height: 12px;
  z-index: 6;
  pointer-events: none;
  animation: p4HolCalPagePeel 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

/* Calendar Confetti particles */
.p4-cal-confetti {
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 10;
  animation: p4CalConfettiFly 0.8s cubic-bezier(0.1, 0.8, 0.3, 1) forwards;
}

@keyframes p4CalConfettiFly {
  0% {
    transform: translate(0, 0) scale(1);
    opacity: 1;
  }

  100% {
    transform: translate(var(--tx), var(--ty)) rotate(var(--rot)) scale(0.2);
    opacity: 0;
  }

}

@keyframes p4HolCalPagePeel {
  0% {
    transform: translate(0, 0) rotate(0deg) scale(1);
    opacity: 1;
  }

  100% {
    transform: translate(var(--peel-x), var(--peel-y)) rotate(var(--peel-r)) scale(0.85);
    opacity: 0;
  }

}

@keyframes p4HolCalActive {
  0%, 100% { transform: translateY(0) scale(1) rotate(0); }

  15% { transform: translateY(-4px) scale(1.1, 0.9) rotate(-3deg); }

  30% { transform: translateY(0) scale(0.9, 1.1) rotate(3deg); }

  45% { transform: translateY(-2px) scale(1.05, 0.95) rotate(-2deg); }

  60% { transform: translateY(0) scale(0.98, 1.02) rotate(2deg); }

  75% { transform: translateY(-1px) scale(1.02, 0.98) rotate(-1deg); }

  90% { transform: translateY(0) scale(1) rotate(1deg); }

}

@keyframes p4HolCalSettleSmooth {
  0% { transform: scale(1) rotate(8deg); }

  20% { transform: scale(1) rotate(-6deg); }

  40% { transform: scale(1) rotate(4deg); }

  60% { transform: scale(1) rotate(-2deg); }

  80% { transform: scale(1) rotate(1deg); }

  100% { transform: scale(1) rotate(0deg); }

}

/* Position override for countdown calendar in day available and holiday modes */
body.p4.day.available-mode .p4-about-bg-holiday-anim {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: none !important;
}

body.p4.day.available-mode .p4-about-bg-holiday-anim > div:not(.p4-hol-calendar):not(.p4-hol-balloons) {
  display: none !important;
}

body.p4.day.available-mode .p4-hol-calendar,
body.p4.day.holiday-mode .p4-hol-calendar {
  left: auto !important;
  right: 18% !important;
  top: 3% !important;
  pointer-events: auto !important;
}

/* ══════════════════════════════════════════════
   BUSY MODE — DAY + NIGHT
   ══════════════════════════════════════════════ */
/* Jam cars visible in busy mode (both day & night) */
body.p4.day.busy-mode .p4-car-jam,
body.p4.night.busy-mode .p4-car-jam {
  display: block;
}

body.p4.day.busy-mode .p4-car-right,
body.p4.night.busy-mode .p4-car-right {
  animation-duration: calc(var(--s) * 4) !important;
}

body.p4.day.busy-mode .p4-car-left,
body.p4.night.busy-mode .p4-car-left {
  animation-duration: calc(var(--s) * 4) !important;
}

/* Busy elements visible in both day & night busy */
.p4-busy-elements {
  display: none;
}

body.p4.day.busy-mode .p4-busy-elements,
body.p4.night.busy-mode .p4-busy-elements {
  display: block;
}

/* Accelerate clouds */
body.p4.day.busy-mode .p4-cloud,
body.p4.night.busy-mode .p4-cloud {
  animation-duration: calc(var(--s) * 0.4) !important;
}

/* Windows flicker fast */
body.p4.day.busy-mode .p4-window,
body.p4.night.busy-mode .p4-window {
  animation-duration: 0.8s !important;
  opacity: 1 !important;
}

/* ── NIGHT BUSY: Override sleepy elements ── */
body.p4.night.busy-mode .p4-sleepy-elements {
  display: none !important;
}

body.p4.night.busy-mode .p4-traffic-system {
  opacity: 1 !important;
}

body.p4.night.busy-mode .p4-searchlight {
  display: block !important;
  background: linear-gradient(0deg, rgba(78, 205, 196, 0.25) 0%, transparent 80%) !important;
  animation-duration: 4s !important;
}

body.p4.night.busy-mode .p4-flyer {
  display: block !important;
}

/* ── NIGHT BUSY: Neon Cyberpunk Glow ── */
body.p4.night.busy-mode .p4-traffic-system {
  border-top: 2px solid rgba(78, 205, 196, 0.4);
  box-shadow: 0 -4px 20px rgba(78, 205, 196, 0.3);
}

body.p4.night.busy-mode .p4-car-right {
  background: #ff4444 !important;
  box-shadow: 0 0 12px #ff4444, 0 0 24px #ff0000 !important;
}

body.p4.night.busy-mode .p4-car-left {
  background: #4ecdc4 !important;
  box-shadow: 0 0 12px #4ecdc4, 0 0 24px #00ffcc !important;
}

body.p4.night.busy-mode .p4-window {
  fill: rgba(78, 205, 196, 1) !important;
  animation-duration: 0.4s !important;
}

body.p4.night.busy-mode .p4-skyline-front {
  box-shadow: inset 0 0 50px rgba(78, 205, 196, 0.1);
}

body.p4.night.busy-mode .p4-drone {
  background: var(--p4-neon) !important;
  box-shadow: 0 0 15px var(--p4-neon), 0 0 30px #00ffcc !important;
}

body.p4.night.busy-mode .p4-monorail {
  background: linear-gradient(90deg, var(--p4-neon), #00ffcc, var(--p4-neon)) !important;
  box-shadow: 0 0 25px var(--p4-neon), 0 0 50px rgba(0, 255, 204, 0.5) !important;
}

/* ── INTENSE BUSYNESS UI ELEMENTS (day + night) ── */
body.p4.day.busy-mode .p4-hero-h1,
body.p4.night.busy-mode .p4-hero-h1 {
  animation: p4UiGlitch 0.5s infinite;
}

body.p4.day.busy-mode .p4-hero-h1 {
  text-shadow: 0 0 15px rgba(245, 166, 35, 0.8), 2px 2px 0px rgba(255, 0, 0, 0.5), -2px -2px 0px rgba(0, 255, 255, 0.5);
}

body.p4.night.busy-mode .p4-hero-h1 {
  text-shadow: 0 0 20px var(--p4-neon), 2px 2px 0px rgba(0, 255, 204, 0.6), -2px -2px 0px rgba(255, 0, 100, 0.4);
}

@keyframes p4UiGlitch {
  0% { transform: translate(0, 0); }

  20% { transform: translate(-2px, 1px); }

  40% { transform: translate(2px, -1px); }

  60% { transform: translate(-1px, 2px); }

  80% { transform: translate(1px, -2px); }

  100% { transform: translate(0, 0); }

}

body.p4.day.busy-mode .p4-office-table-wrapper,
body.p4.night.busy-mode .p4-office-table-wrapper {
  animation: p4UiShake 0.2s infinite, p4UiGlow 1s infinite alternate;
  box-shadow: 0 0 30px rgba(78, 205, 196, 0.6), inset 0 0 15px rgba(78, 205, 196, 0.3);
}

@keyframes p4UiShake {
  0% { transform: translateY(0) rotate(0deg); }

  50% { transform: translateY(-1px) rotate(0.5deg); }

  100% { transform: translateY(1px) rotate(-0.5deg); }

}

@keyframes p4UiGlow {
  from { border-color: rgba(255, 255, 255, 0.1); }

  to { border-color: var(--p4-neon); }

}

body.p4.day.busy-mode .p4-btn-solid,
body.p4.day.busy-mode .p4-btn-ghost,
body.p4.night.busy-mode .p4-btn-solid,
body.p4.night.busy-mode .p4-btn-ghost {
  animation: p4BtnPulse 0.6s infinite alternate;
}

@keyframes p4BtnPulse {
  from { transform: scale(1); box-shadow: 0 0 10px currentColor; }

  to { transform: scale(1.05); box-shadow: 0 0 25px currentColor; }

}

body.p4.day.busy-mode .p4-table-pulse,
body.p4.night.busy-mode .p4-table-pulse {
  animation: p4IndicatorRapid 0.1s infinite alternate !important;
  background: #ff3333 !important;
  box-shadow: 0 0 10px #ff3333 !important;
}

@keyframes p4IndicatorRapid {
  from { opacity: 0.2; transform: scale(0.8); }

  to { opacity: 1; transform: scale(1.5); }

}

/* ── DATA STREAMS ── */
.p4-data-stream {
  position: absolute;
  bottom: 100px;
  color: var(--p4-neon);
  font-family: var(--p4-font-mono);
  font-size: 0.8rem;
  font-weight: bold;
  opacity: 0;
  text-shadow: 0 0 8px var(--p4-neon);
  animation: p4DataRise linear infinite;
  z-index: 10;
}

@keyframes p4DataRise {
  0% { transform: translateY(0); opacity: 0; }

  20% { opacity: 0.9; }

  80% { opacity: 0.9; }

  100% { transform: translateY(-40vh); opacity: 0; }

}

/* ── MONORAIL ── */
.p4-monorail-track {
  position: absolute;
  bottom: 220px; left: 0; right: 0;
  height: 4px;
  background: rgba(255,255,255,0.1);
  box-shadow: 0 2px 4px rgba(0,0,0,0.5);
  z-index: 8;
}

.p4-monorail {
  position: absolute;
  bottom: 224px; left: -200px;
  width: 150px; height: 12px;
  background: linear-gradient(90deg, #ddd, #fff, #ddd);
  border-radius: 6px;
  box-shadow: 0 0 15px rgba(255, 255, 255, 0.8);
  display: flex; align-items: center; justify-content: space-evenly;
  animation: p4MonorailZoom 4s linear infinite;
  z-index: 9;
}

.p4-monorail-window {
  width: 20px; height: 6px;
  background: var(--p4-neon);
  border-radius: 2px;
  box-shadow: 0 0 8px var(--p4-neon);
}

@keyframes p4MonorailZoom {
  0% { transform: translateX(0); }

  100% { transform: translateX(calc(100vw + 400px)); }

}

/* ── DRONES ── */
.p4-drone {
  position: absolute;
  top: var(--t);
  width: 6px; height: 6px;
  background: var(--p4-gold);
  border-radius: 50%;
  box-shadow: 0 0 10px var(--p4-gold), 0 0 20px #ff6b6b;
  opacity: 0.8;
  z-index: 12;
}

.p4-drone::after {
  content: ''; position: absolute; top: 2px; left: -4px; width: 14px; height: 2px;
  background: rgba(255,255,255,0.5); border-radius: 50%;
  animation: p4DroneSpin 0.1s linear infinite;
}

@keyframes p4DroneSpin {
  100% { transform: rotate(360deg); }

}

.p4-drone-right { left: -20px; animation: p4FlyRight var(--s) linear var(--d) infinite; }

.p4-drone-left { right: -20px; animation: p4FlyLeft var(--s) linear var(--d) infinite; }

/* Hero Content */
.p4-hero-wrap {
  position: relative; z-index: 5;
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; max-width: 1200px;
  margin: 0 auto; padding: 0 48px;
  gap: 60px;
}

.p4-hero-left { flex: 1; max-width: 600px; }

.p4-hero-badge {
  display: inline-flex; align-items: center; gap: 10px;
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(12px);
  padding: 6px 16px 6px 8px; border-radius: 30px;
  font-family: var(--p4-font-mono); font-size: 0.75rem;
  color: #fff; margin-bottom: 32px !important;
  border: 1px solid rgba(255,255,255,0.1);
  letter-spacing: 1.5px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.15);
}

.p4-badge-ring {
  width: 14px; height: 14px; border-radius: 50%;
  border: 2px solid var(--p4-gold);
  border-top-color: transparent;
  animation: p4BadgeSpin 1.5s linear infinite;
}

body.p4.night .p4-badge-ring { border-color: var(--p4-neon); border-top-color: transparent; }

@keyframes p4BadgeSpin {
  100% { transform: rotate(360deg); }

}

.p4-hero-h1 {
  font-family: var(--p4-font-head);
  font-size: clamp(2.8rem, 5vw, 4.2rem);
  font-weight: 800; line-height: 1.1;
  color: #fff;
  margin-bottom: 24px !important;
  text-shadow: 0 2px 20px rgba(0,0,0,0.4);
}

.p4-h1-accent { color: var(--p4-gold); text-shadow: 0 2px 24px rgba(245,166,35,0.5); }

body.p4.night .p4-h1-accent { color: var(--p4-neon); text-shadow: 0 2px 24px rgba(78,205,196,0.5); }

.p4-hero-desc {
  font-size: 1.05rem;
  color: rgba(255,255,255,0.85);
  line-height: 1.6;
  margin-bottom: 28px !important;
  max-width: 520px;
  text-shadow: 0 1px 4px rgba(0,0,0,0.5);
}

.p4-hero-typed {
  font-family: var(--p4-font-mono);
  font-size: 0.95rem; color: var(--p4-gold);
  margin-bottom: 40px !important; min-height: 1.4em;
  text-shadow: 0 1px 8px rgba(245,166,35,0.3);
  font-weight: 600;
}

body.p4.night .p4-hero-typed { color: var(--p4-neon); text-shadow: 0 1px 8px rgba(78,205,196,0.3); }

.p4-typed-caret {
  animation: p4Blink 1s step-end infinite;
}

@keyframes p4Blink {
  0%, 100% { opacity: 1; } 50% { opacity: 0; }

}

.p4-hero-glass-panel {
  display: flex; flex-wrap: wrap; gap: 16px;
  margin-bottom: 48px !important;
}

.p4-glass-item {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 20px; border-radius: 12px;
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.1);
  box-shadow: 0 8px 32px rgba(0,0,0,0.2);
  transition: all 0.3s ease;
}

.p4-glass-item:hover {
  background: rgba(255, 255, 255, 0.1);
  transform: translateY(-2px);
  border-color: rgba(255,255,255,0.2);
}

.p4-glass-icon {
  width: 36px; height: 36px;
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(245,166,35,0.2), transparent);
  display: flex; align-items: center; justify-content: center;
  color: var(--p4-gold);
}

body.p4.night .p4-glass-icon {
  background: linear-gradient(135deg, rgba(78,205,196,0.2), transparent);
  color: var(--p4-neon);
}

.p4-glass-icon svg { width: 18px; height: 18px; }

.p4-glass-text {
  display: flex; flex-direction: column;
}

.p4-glass-text strong {
  font-size: 0.95rem; color: #fff;
  font-weight: 600;
}

.p4-glass-text span {
  font-size: 0.75rem; color: rgba(255,255,255,0.6);
}

.p4-hero-btns { display: flex; gap: 16px; flex-wrap: wrap; }

.p4-btn-solid, .p4-btn-ghost {
  padding: 14px 28px; border-radius: var(--p4-radius);
  font-family: var(--p4-font-body); font-size: 1rem;
  font-weight: 600; text-decoration: none;
  cursor: pointer; transition: all 0.3s ease;
  display: inline-flex; align-items: center; gap: 8px;
}

.p4-btn-solid {
  background: var(--p4-gold); color: #1a1a2e; border: none;
  box-shadow: 0 4px 16px rgba(245,166,35,0.3);
}

.p4-btn-solid:hover { transform: translateY(-2px); box-shadow: 0 6px 24px rgba(245,166,35,0.5); }

body.p4.night .p4-btn-solid { background: var(--p4-neon); color: #0a1628; box-shadow: 0 4px 16px rgba(78,205,196,0.3); }

.p4-btn-ghost {
  background: transparent; color: #fff;
  border: 2px solid rgba(255,255,255,0.2);
  backdrop-filter: blur(8px);
}

.p4-btn-ghost:hover { border-color: #fff; background: rgba(255,255,255,0.1); }

/* Hero Right Table */
.p4-hero-right {
  flex: 1; max-width: 450px;
  display: flex; justify-content: flex-end;
}

.p4-office-table-wrapper {
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  padding: 24px;
  width: 100%;
  box-shadow: 0 8px 32px rgba(0,0,0,0.25);
  animation: p4Float 6s ease-in-out infinite;
}

@keyframes p4Float {
  0%, 100% { transform: translateY(0); }

  50% { transform: translateY(-10px); }

}

.p4-table-header {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 20px;
  border-bottom: 1px solid rgba(255,255,255,0.1);
  padding-bottom: 12px;
}

.p4-table-title {
  font-family: var(--p4-font-mono);
  font-size: 0.85rem; color: #fff; letter-spacing: 1px;
}

.p4-table-pulse {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--p4-avail);
  box-shadow: 0 0 10px var(--p4-avail);
  animation: p4Pulse 2s infinite;
}

@keyframes p4Pulse {
  0% { box-shadow: 0 0 0 0 rgba(46,204,113,0.4); }

  70% { box-shadow: 0 0 0 10px rgba(46,204,113,0); }

  100% { box-shadow: 0 0 0 0 rgba(46,204,113,0); }

}

.p4-office-table {
  width: 100%; border-collapse: collapse;
}

.p4-office-table th, .p4-office-table td {
  text-align: left; padding: 14px 8px 14px 0;
  font-size: 0.88rem; color: rgba(255,255,255,0.85);
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

.p4-office-table th {
  font-family: var(--p4-font-mono);
  color: var(--p4-gold); font-size: 0.75rem;
  text-transform: uppercase; letter-spacing: 1px;
  padding-bottom: 16px;
}

body.p4.night .p4-office-table th { color: var(--p4-neon); }

.p4-office-table tr:last-child td { border-bottom: none; }

.p4-status {
  padding: 5px 12px; border-radius: 12px; font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.3px;
}

.p4-status-avail { background: rgba(46,204,113,0.15); color: #2ecc71; }

.p4-status-busy { background: rgba(231,76,60,0.15); color: #e74c3c; }

.p4-status-holiday { background: rgba(243,156,18,0.15); color: #f39c12; }

@media (max-width: 968px) {
  .p4-hero-wrap { flex-direction: column; align-items: flex-start; }

  .p4-hero-right { max-width: 100%; width: 100%; margin-top: 40px; justify-content: flex-start; }

}

/* Scroll hint */
.p4-hero-scroll {
  position: absolute; bottom: 50px; left: 50%;
  transform: translateX(-50%); z-index: 10;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  color: rgba(255,255,255,0.5); font-size: 0.7rem;
  font-family: var(--p4-font-mono);
}

.p4-scroll-bar {
  width: 2px; height: 24px; background: rgba(255,255,255,0.2);
  border-radius: 2px; overflow: hidden; position: relative;
}

.p4-scroll-bar::after {
  content: ''; position: absolute; top: -100%; left: 0;
  width: 100%; height: 50%; background: var(--p4-gold);
  animation: p4ScrollPulse 2s ease infinite;
}

@keyframes p4ScrollPulse {
  0% { top: -50%; } 100% { top: 150%; }

}

/* ── §2 OVERVIEW: THE BOARDROOM ── */
.p4-overview {
  position: relative;
  padding: 96px 0;
  background: var(--p4-surface-alt);
  transition: background var(--p4-transition);
  overflow: hidden; /* contain the bg animation */
}

.p4-overview .p4-wrap {
  position: relative;
  z-index: 2;
  pointer-events: none; /* Let hovers pass through empty spaces to the SVG */
}

.p4-overview .p4-heading,
.p4-overview .p4-eyebrow,
.p4-station-card {
  pointer-events: auto; /* Re-enable clicking/hovering on foreground UI */
}

/* Text Colors & High-Contrast Shadow for Overview Headings */
.p4-overview .p4-heading {
  color: #ffffff; /* White text pops against the blue wall in Day mode */
}

.p4-overview .p4-eyebrow,
.p4-overview .p4-heading {
  /* Dark stroke and glow for Day mode to contrast with white/gold text */
  text-shadow: 
    -1px -1px 0 rgba(17, 24, 39, 0.9),
     1px -1px 0 rgba(17, 24, 39, 0.9),
    -1px  1px 0 rgba(17, 24, 39, 0.9),
     1px  1px 0 rgba(17, 24, 39, 0.9),
     0px 4px 15px rgba(17, 24, 39, 0.6),
     0px 0px 30px rgba(17, 24, 39, 0.4);
}

body.p4.night .p4-overview .p4-eyebrow,
body.p4.night .p4-overview .p4-heading {
  /* In Night mode, we keep a very thick dark shadow to separate from background elements */
  text-shadow: 
    -1px -1px 0 rgba(0,0,0,1),
     1px -1px 0 rgba(0,0,0,1),
    -1px  1px 0 rgba(0,0,0,1),
     1px  1px 0 rgba(0,0,0,1),
     0px 4px 15px rgba(0,0,0,0.9),
     0px 0px 30px rgba(0,0,0,0.7);
}

body.p4.night .p4-overview { background: var(--p4-night-surface-alt); }

/* ── OVERVIEW BACKGROUND ANIMATION (Realistic Room) ── */
.p4-overview-bg {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  pointer-events: none;
}

.p4-room-svg {
  width: 100%;
  height: 100%;
  min-width: 1000px;
}

/* Base (Day Mode matching Image 1) */
.p4-rm-wall { fill: #5D7F9B; transition: fill var(--p4-transition); }

.p4-rm-floor { fill: #D1C0A5; transition: fill var(--p4-transition); }

.p4-rm-baseboard { fill: #EBEBEB; transition: fill var(--p4-transition); }

.p4-rm-cabinet { fill: #2C2C2C; transition: fill var(--p4-transition); }

.p4-rm-cab-line { stroke: #111; stroke-width: 2; opacity: 0.5; }

.p4-rm-win-bg { fill: #E8F4F8; transition: fill var(--p4-transition); }

.p4-rm-win-frame { fill: #FFFFFF; stroke: #E0E0E0; stroke-width: 4; }

.p4-rm-win-mullion { stroke: #FFFFFF; stroke-width: 6; }

.p4-rm-plant .p4-rm-leaf { fill: #4A7A3A; transition: fill var(--p4-transition); }

.p4-rm-plant .p4-rm-pot { fill: #6B6B6B; }

.p4-rm-tv-frame { fill: #111; }

.p4-rm-tv-screen { fill: #1A1A1A; transition: fill var(--p4-transition); }

.p4-rm-tv-chart { stroke: var(--p4-gold); stroke-width: 3; fill: none; stroke-dasharray: 500; animation: rmChartDraw 5s infinite linear; }

.p4-rm-tv-node { fill: var(--p4-gold); animation: rmNodePulse 2s infinite alternate; }

.p4-rm-light-cord { stroke: #222; stroke-width: 3; }

.p4-rm-light-shade { fill: #222; }

.p4-rm-light-bulb { fill: #FFF; transition: fill var(--p4-transition); }

.p4-rm-light-beam { fill: rgba(255, 255, 255, 0.05); opacity: 0; transition: opacity var(--p4-transition); } /* Only visible at night/busy */
.p4-rm-table-top { fill: #F8F9FA; stroke: #E9ECEF; stroke-width: 3; transition: fill var(--p4-transition), stroke var(--p4-transition); }

.p4-rm-table-leg { stroke: #222; stroke-width: 8; stroke-linecap: round; }

.p4-rm-chair-seat { fill: #F4F3ED; stroke: #E0DFD8; stroke-width: 2; transition: fill var(--p4-transition), stroke var(--p4-transition); }

.p4-rm-chair-leg { stroke: #222; stroke-width: 6; stroke-linecap: round; }

.p4-rm-chair-base { stroke: #222; stroke-width: 5; stroke-linecap: round; }

.p4-rm-chair-wheel { fill: #555; }

.p4-rm-lap-base { fill: #C0C0C0; stroke: #A0A0A0; stroke-width: 0.5; } /* Silver aluminum */
.p4-rm-lap-screen { fill: var(--p4-gold); opacity: 0.85; animation: rmLaptopFlicker 3s infinite; }

.p4-rm-lap-key { fill: #555; stroke: #444; stroke-width: 0.5; } /* Dark keyboard */
.p4-rm-tray { fill: #8B5A2B; }

.p4-rm-glass { fill: rgba(255,255,255,0.7); stroke: rgba(255,255,255,0.9); stroke-width: 1; }

.p4-rm-bottle { fill: rgba(200,255,255,0.6); stroke: rgba(200,255,255,0.8); stroke-width: 1; }

/* Workers, Extra Laptops, & Day Decor (Visible in Day Available & Day Busy Modes) */
.p4-rm-worker, .p4-rm-extra-lap, .p4-rm-day-decor {
  opacity: 0;
  transition: opacity var(--p4-transition);
  pointer-events: none;
}

body.p4.day.available-mode .p4-rm-worker,
body.p4.day.available-mode .p4-rm-extra-lap,
body.p4.day.available-mode .p4-rm-day-decor,
body.p4.day.busy-mode .p4-rm-worker,
body.p4.day.busy-mode .p4-rm-extra-lap,
body.p4.day.busy-mode .p4-rm-day-decor,
body.p4.night.busy-mode .p4-rm-worker,
body.p4.night.busy-mode .p4-rm-extra-lap {
  opacity: 1;
  pointer-events: auto; /* Enable hover interactions! */
}

/* 100% Working Mode: Busy Animations */
@keyframes p4FastTyping {
  0%, 100% { transform: translateY(0) rotate(0deg); }

  25% { transform: translateY(-2px) rotate(-1deg); }

  50% { transform: translateY(1px) rotate(1deg); }

  75% { transform: translateY(-1px) rotate(0deg); }

}

@keyframes p4FastFlicker {
  0%, 100% { opacity: 0.85; filter: brightness(1); }

  50% { opacity: 0.95; filter: brightness(1.2); }

}

body.p4.day.busy-mode .p4-rm-worker-arm {
  animation: p4FastTyping 0.15s infinite linear;
  transform-origin: center;
}

body.p4.day.busy-mode .p4-rm-lap-screen {
  animation: p4FastFlicker 0.25s infinite alternate;
}

/* Night Busy Mode: Sleepy but Still Working Hard */
@keyframes p4SleepyBob {
  0%, 100% { transform: translateY(0) rotate(0deg); }

  15% { transform: translateY(4px) rotate(8deg); }

  30% { transform: translateY(8px) rotate(12deg); }

  35% { transform: translateY(1px) rotate(-3deg); } /* snap back */
  45% { transform: translateY(0) rotate(0deg); }

  60% { transform: translateY(3px) rotate(-6deg); }

  70% { transform: translateY(6px) rotate(-10deg); }

  75% { transform: translateY(0) rotate(2deg); } /* snap back */
  85% { transform: translateY(0) rotate(0deg); }

}

@keyframes p4NightFlicker {
  0%, 100% { opacity: 0.5; filter: brightness(0.6); }

  30% { opacity: 0.8; filter: brightness(0.9); }

  50% { opacity: 0.4; filter: brightness(0.5); }

  70% { opacity: 0.7; filter: brightness(0.8); }

}

body.p4.night.busy-mode .p4-rm-worker-arm {
  animation: p4FastTyping 0.2s infinite linear;
  transform-origin: center;
}

body.p4.night.busy-mode .p4-rm-worker-head {
  animation: p4SleepyBob 4s infinite ease-in-out;
}

body.p4.night.busy-mode .p4-rm-lap-screen {
  animation: p4NightFlicker 2s infinite ease-in-out;
}

/* Busy Only Elements (Extra hard-working employees) */
.p4-rm-busy-only {
  opacity: 0;
  transition: opacity var(--p4-transition);
  pointer-events: none;
}

body.p4.day.busy-mode .p4-rm-busy-only,
body.p4.night.busy-mode .p4-rm-busy-only {
  opacity: 1;
  pointer-events: auto !important;
}

/* ============================================== */
/* NEW BUSY MODE INTERACTIVE ELEMENTS (CSS)       */
/* ============================================== */
/* ── 1. Chaotic Photocopier ── */
.p4-photocopier { transition: filter 0.3s ease; }

.p4-photocopier:hover { filter: drop-shadow(0 0 8px rgba(239,68,68,0.5)); }

.p4-copier-screen { animation: p4Flicker 0.2s infinite alternate; }

.p4-copier-papers rect {
  animation: p4PaperSpit 0.5s infinite linear;
}

.p4-cp-2 { animation-delay: 0.15s !important; }

.p4-cp-3 { animation-delay: 0.3s !important; }

@keyframes p4PaperSpit {
  0% { transform: translate(0, 0) scale(1); opacity: 1; }

  100% { transform: translate(-30px, 40px) scale(0.8) rotate(-20deg); opacity: 0; }

}

@keyframes p4CopierShake {
  0%, 100% { transform: translate(90px, 220px) rotate(0deg); }

  25% { transform: translate(92px, 220px) rotate(1deg); }

  75% { transform: translate(88px, 220px) rotate(-1deg); }

}

.p4-photocopier:hover { animation: p4CopierShake 0.1s infinite linear; }

/* Photocopier Clicked (Fixed) State */
.p4-photocopier.p4-copier-fixed { animation: none !important; }

.p4-photocopier.p4-copier-fixed .p4-copier-screen { fill: #10B981; animation: none; filter: drop-shadow(0 0 5px #10B981); }

.p4-photocopier.p4-copier-fixed .p4-copier-papers rect {
  animation: p4PaperExplosion 0.6s cubic-bezier(0.25, 1, 0.5, 1) forwards !important;
}

@keyframes p4PaperExplosion {
  0% { opacity: 1; transform: translate(0,0) scale(1); }

  100% { opacity: 0; transform: translate(-100px, -150px) rotate(360deg) scale(0.5); }

}

/* ── 2. Trembling Inbox Tower ── */
.p4-inbox-tower:hover { filter: drop-shadow(0 0 8px rgba(239,68,68,0.4)); }

.p4-inbox-alert { opacity: 0; transition: opacity 0.2s; }

.p4-inbox-tower:hover .p4-inbox-alert { opacity: 1; animation: p4Pulse 0.5s infinite alternate; }

@keyframes p4TowerWobble {
  0%, 100% { transform: rotate(0deg); }

  25% { transform: rotate(3deg); }

  75% { transform: rotate(-3deg); }

}

.p4-inbox-stack { transform-origin: 12px 30px; animation: p4TowerWobble 1s infinite ease-in-out; }

.p4-inbox-tower:hover .p4-inbox-stack { animation-duration: 0.3s; }

/* Inbox Tower Clicked (Processing) State */
.p4-inbox-tower.p4-inbox-processing .p4-inbox-stack { animation: none; }

.p4-inbox-tower.p4-inbox-processing .p4-tower-papers { animation: p4ShrinkStack 1.5s ease forwards; }

.p4-inbox-tower.p4-inbox-processing .p4-inbox-alert { opacity: 0 !important; }

.p4-inbox-tower.p4-inbox-processing .p4-process-paper {
  animation: p4ProcessArc 0.5s linear forwards;
}

.p4-inbox-tower.p4-inbox-processing .p4-pp-1 { animation-delay: 0s; }

.p4-inbox-tower.p4-inbox-processing .p4-pp-2 { animation-delay: 0.2s; }

.p4-inbox-tower.p4-inbox-processing .p4-pp-3 { animation-delay: 0.4s; }

@keyframes p4ShrinkStack {
  0% { transform: scaleY(1); }

  100% { transform: scaleY(0.1); opacity: 0; }

}

@keyframes p4ProcessArc {
  0% { opacity: 1; transform: translate(0, 0) rotate(0deg); }

  50% { transform: translate(10px, -20px) rotate(90deg); }

  100% { opacity: 0; transform: translate(15px, 5px) rotate(180deg); }

}

/* ── 3. Overworked Robot Vacuum ── */
@keyframes p4VacRoam {
  0% { transform: translate(40px, 450px); }

  50% { transform: translate(160px, 450px); }

  100% { transform: translate(40px, 450px); }

}

.p4-robot-vac { animation: p4VacRoam 8s infinite linear; }

.p4-vac-brush { animation: p4BrushSpin 0.5s infinite linear; transform-origin: 20px 10px; }

.p4-robot-vac:hover { animation-duration: 3s; filter: drop-shadow(0 0 5px rgba(245,158,11,0.5)); }

.p4-robot-vac:hover .p4-vac-brush { animation-duration: 0.2s; }

.p4-robot-vac:hover .p4-vac-led { fill: #F59E0B; filter: drop-shadow(0 0 3px #F59E0B); }

@keyframes p4BrushSpin {
  0% { transform: rotate(0deg); }

  100% { transform: rotate(360deg); }

}

/* Vacuum Clicked (Crashed) State */
.p4-robot-vac.p4-vac-crashed { animation: p4VacCrashSpin 1s cubic-bezier(0.25, 1, 0.5, 1) forwards; }

.p4-robot-vac.p4-vac-crashed .p4-vac-led { fill: #1E293B !important; filter: none !important; }

.p4-robot-vac.p4-vac-crashed .p4-vac-spark { animation: p4SparkFlash 0.3s ease 0.5s; }

@keyframes p4VacCrashSpin {
  0% { transform: translate(100px, 450px) rotate(0deg); }

  100% { transform: translate(100px, 450px) rotate(1080deg); }

}

@keyframes p4SparkFlash {
  0%, 100% { opacity: 0; transform: scale(0.5); }

  50% { opacity: 1; transform: scale(1.5); filter: drop-shadow(0 0 10px #FCD34D); }

}

/* ── Interactive Whiteboard ── */
.p4-whiteboard:hover {
  filter: drop-shadow(0 0 8px rgba(232, 176, 66, 0.4));
}

body.p4.day.busy-mode .p4-whiteboard {
  cursor: crosshair;
}

body.p4.day.busy-mode .p4-wb-default-content {
  opacity: 0.15;
  transition: opacity 0.3s ease;
}

.p4-wb-marker {
  transition: transform 0.2s ease;
}

body.p4.day.busy-mode .p4-whiteboard:hover .p4-wb-marker {
  transform: translateX(3px);
  filter: drop-shadow(0 0 3px #EF4444);
}

.p4-wb-clear rect {
  transition: fill 0.2s ease, filter 0.2s ease;
}

.p4-wb-clear:hover rect {
  fill: #DC2626;
  filter: drop-shadow(0 0 4px #EF4444);
}

.p4-whiteboard.p4-wb-drawing {
  filter: drop-shadow(0 0 12px rgba(239, 68, 68, 0.6)) !important;
}

/* Premium Coffee Machine Interactions */
.p4-premium-coffee {
  transition: transform 0.2s ease;
}

.p4-premium-coffee:hover {
  transform: translate(380px, 140px) scale(1.02);
}

.p4-prem-screen {
  transition: fill 0.3s ease;
}

.p4-premium-coffee:hover .p4-prem-screen {
  fill: #0F172A;
}

.p4-prem-btn {
  transition: filter 0.3s ease, transform 0.2s ease;
}

.p4-premium-coffee:hover .p4-prem-btn {
  filter: drop-shadow(0 0 4px currentColor);
}

.p4-prem-anim {
  opacity: 0;
  transition: opacity 0.4s ease;
}

.p4-prem-progress {
  transition: width 3.5s ease-in-out;
}

/* Brewing State */
.p4-premium-coffee.p4-is-brewing .p4-prem-anim {
  opacity: 1;
}

.p4-premium-coffee.p4-is-brewing .p4-prem-progress {
  width: 56px;
}

@keyframes p4CoffeePour {
  0% { opacity: 0; }

  15% { opacity: 1; }

  85% { opacity: 1; }

  100% { opacity: 0; }

}

@keyframes p4CoffeeSteam {
  0% { transform: translateY(0) translateX(0) scale(0.8); opacity: 0; }

  20% { opacity: 0.7; }

  40% { transform: translateY(-8px) translateX(-2px) scale(0.95); opacity: 0.8; }

  60% { transform: translateY(-16px) translateX(2px) scale(1.05); opacity: 0.6; }

  80% { transform: translateY(-24px) translateX(-1px) scale(1.15); opacity: 0.3; }

  100% { transform: translateY(-32px) translateX(0) scale(1.2); opacity: 0; }

}

@keyframes p4CoffeeFill {
  0% { opacity: 0; height: 0; y: 112; }

  30% { opacity: 1; }

  100% { opacity: 1; height: 7px; y: 105; }

}

@keyframes p4BrewPulse {
  0%, 100% { fill: #020617; }

  50% { fill: #0F172A; }

}

@keyframes p4BtnBlink {
  0%, 100% { filter: drop-shadow(0 0 6px currentColor) brightness(1.3); }

  50% { filter: drop-shadow(0 0 1px currentColor) brightness(0.7); }

}

@keyframes p4BrewVibrate {
  0%, 100% { transform: translate(380px, 140px); }

  25% { transform: translate(380.5px, 139.5px); }

  50% { transform: translate(379.5px, 140.5px); }

  75% { transform: translate(380.5px, 140px); }

}

.p4-premium-coffee.p4-is-brewing {
  animation: p4BrewVibrate 0.15s infinite linear;
}

.p4-premium-coffee.p4-is-brewing .p4-prem-screen {
  animation: p4BrewPulse 1.2s infinite ease-in-out;
}

.p4-premium-coffee.p4-is-brewing .p4-prem-btn:nth-child(1) {
  animation: p4BtnBlink 0.8s infinite 0.1s;
}

.p4-premium-coffee.p4-is-brewing .p4-prem-btn:nth-child(2) {
  animation: p4BtnBlink 0.6s infinite;
}

.p4-premium-coffee.p4-is-brewing .p4-prem-btn:nth-child(3) {
  animation: p4BtnBlink 0.9s infinite 0.3s;
}

.p4-premium-coffee.p4-is-brewing .p4-prem-drip {
  animation: p4CoffeePour 1.2s infinite ease-in-out;
}

.p4-premium-coffee.p4-is-brewing .p4-prem-steam {
  animation: p4CoffeeSteam 3s infinite ease-out;
}

.p4-premium-coffee.p4-is-brewing .p4-prem-fill {
  animation: p4CoffeeFill 3.5s forwards ease-out;
}

/* Night Decor (Visible ONLY in Night Available Mode) */
.p4-rm-night-decor {
  opacity: 0;
  transition: opacity var(--p4-transition);
  pointer-events: none;
}

body.p4.night.available-mode .p4-rm-night-decor,
body.p4.night.busy-mode .p4-rm-night-decor {
  opacity: 1;
  pointer-events: auto; /* Enable hover interactions! */
}

.p4-rm-worker-body { fill: #3D5A80; }

.p4-rm-worker-head { fill: #F5CBBA; }

.p4-rm-worker-arm { stroke: #3D5A80; stroke-width: 14; fill: none; stroke-linecap: round; }

.p4-rm-worker-leg { stroke: #293241; stroke-width: 16; fill: none; stroke-linecap: round; stroke-linejoin: round; }

/* Night Mode Overrides */
body.p4.night .p4-rm-wall { fill: #16202b; }

body.p4.night .p4-rm-floor { fill: #0e141a; }

body.p4.night .p4-rm-cabinet { fill: #080b0f; }

body.p4.night .p4-rm-cab-line { stroke: #000; }

body.p4.night .p4-rm-baseboard { fill: #111820; }

body.p4.night .p4-rm-win-bg { fill: #05080c; }

body.p4.night .p4-rm-win-frame { fill: #1a2530; stroke: #111820; }

body.p4.night .p4-rm-win-mullion { stroke: #1a2530; }

body.p4.night .p4-rm-chair-seat { fill: #1a2530; stroke: #111820; }

body.p4.night .p4-rm-table-top { fill: #1c2836; stroke: #111820; }

body.p4.night .p4-rm-leaf { fill: #1b2d24; }

body.p4.night .p4-rm-pot { fill: #222; }

/* Main Ceiling Lamp (Turned OFF by default in Night Available, turns ON with switch) */
body.p4.night .p4-rm-light-beam { opacity: 1; fill: rgba(78, 205, 196, 0.08); }

body.p4.night .p4-rm-light-bulb { fill: var(--p4-neon); filter: drop-shadow(0 0 10px var(--p4-neon)); }

body.p4.night.available-mode .p4-rm-light-beam,
body.p4.night.busy-mode .p4-rm-light-beam { opacity: 0; }

body.p4.night.available-mode .p4-rm-light-bulb,
body.p4.night.busy-mode .p4-rm-light-bulb { fill: #475569; filter: none; }

body.p4.night.available-mode .p4-main-ceiling-lamp.p4-lamp-on .p4-rm-light-beam,
body.p4.night.busy-mode .p4-main-ceiling-lamp.p4-lamp-on .p4-rm-light-beam { opacity: 1; fill: rgba(78, 205, 196, 0.08); }

body.p4.night.available-mode .p4-main-ceiling-lamp.p4-lamp-on .p4-rm-light-bulb,
body.p4.night.busy-mode .p4-main-ceiling-lamp.p4-lamp-on .p4-rm-light-bulb { fill: var(--p4-neon); filter: drop-shadow(0 0 10px var(--p4-neon)); }

body.p4.night .p4-rm-tv-screen { fill: #000; }

body.p4.night .p4-rm-tv-chart { stroke: var(--p4-neon); }

body.p4.night .p4-rm-tv-node { fill: var(--p4-neon); }

body.p4.night .p4-rm-lap-screen { fill: var(--p4-neon); }

body.p4.night .p4-rm-glass { fill: rgba(78,205,196,0.2); stroke: rgba(78,205,196,0.4); }

body.p4.night .p4-rm-bottle { fill: rgba(78,205,196,0.1); stroke: rgba(78,205,196,0.3); }

/* Status Mode Opacities */
body.p4.holiday-mode .p4-overview-bg { opacity: 0.4; filter: saturate(0.5); }

body.p4.busy-mode .p4-overview-bg { opacity: 1; }

body.p4.busy-mode .p4-rm-tv-chart { animation-duration: 2s; stroke: var(--p4-busy); }

body.p4.busy-mode .p4-rm-tv-node { fill: var(--p4-busy); }

body.p4.busy-mode .p4-rm-lap-screen { fill: var(--p4-busy); animation-duration: 1s; }

body.p4.busy-mode .p4-rm-light-bulb { fill: var(--p4-busy); }

body.p4.busy-mode .p4-rm-light-beam { opacity: 0.5; fill: rgba(255, 107, 53, 0.1); }

/* Animations */
@keyframes rmChartDraw { 0% { stroke-dashoffset: 500; } 50% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: -500; } }

@keyframes rmNodePulse { 0% { transform: scale(0.8); opacity: 0.4; } 100% { transform: scale(1.4); opacity: 1; } }

@keyframes rmLaptopFlicker { 0%, 100% { opacity: 0.8; filter: drop-shadow(0 0 4px currentColor); } 50% { opacity: 0.3; filter: none; } }

/* Worker Animations */
@keyframes rmWorkerType1 {
  0%, 100% { transform: rotate(0deg); }

  50% { transform: rotate(4deg); }

}

@keyframes rmWorkerType2 {
  0%, 100% { transform: rotate(0deg); }

  50% { transform: rotate(-3deg); }

}

@keyframes rmWorkerBob {
  0%, 100% { transform: translateY(0); }

  50% { transform: translateY(2px); }

}

/* Plant Animation */
@keyframes rmPlantSway {
  0%, 100% { transform: rotate(0deg); }

  50% { transform: rotate(3deg); }

}

.p4-anim-type-1 { animation: rmWorkerType1 0.3s infinite ease-in-out; }

.p4-anim-type-2 { animation: rmWorkerType2 0.35s infinite ease-in-out; }

.p4-anim-bob { animation: rmWorkerBob 2s infinite ease-in-out; }

/* Apply plant animation only in day available mode */
body.p4.day.available-mode .p4-rm-leaf {
  transform-origin: 20px 80px;
  animation: rmPlantSway 4s ease-in-out infinite;
}

body.p4.day.available-mode .p4-rm-leaf:nth-of-type(1) { animation-delay: 0s; }

body.p4.day.available-mode .p4-rm-leaf:nth-of-type(2) { animation-delay: -1s; animation-duration: 4.5s; }

body.p4.day.available-mode .p4-rm-leaf:nth-of-type(3) { animation-delay: -2s; animation-duration: 3.8s; }

body.p4.day.available-mode .p4-rm-leaf:nth-of-type(4) { animation-delay: -3s; animation-duration: 5s; }

/* --- Interactive Fun Day Decor Animations --- */
/* Coffee Machine Hover Effects */
.p4-coffee-brew line, .p4-steam {
  opacity: 0;
  transition: opacity 0.3s ease;
}

.p4-steam {
  stroke-dasharray: 40;
  stroke-dashoffset: 40;
}

.p4-coffee-machine:hover .p4-coffee-brew line {
  opacity: 1; /* Coffee drip */
}

.p4-coffee-machine:hover .p4-steam {
  animation: p4SteamRise 2s infinite linear;
}

.p4-coffee-machine:hover .p4-steam-2 {
  animation-delay: 1s;
}

.p4-coffee-machine:hover .p4-coffee-btn {
  fill: #06D6A0;
  filter: drop-shadow(0 0 4px #06D6A0);
}

/* Coffee Cup Fill on Hover */
.p4-coffee-fill {
  opacity: 0;
  transition: opacity 1.2s ease;
}

.p4-coffee-machine:hover .p4-coffee-fill {
  opacity: 1;
}

@keyframes p4SteamRise {
  0% { stroke-dashoffset: 40; transform: translateY(0); opacity: 0; }

  20% { opacity: 0.8; }

  80% { opacity: 0.6; }

  100% { stroke-dashoffset: -40; transform: translateY(-15px); opacity: 0; }

}

/* Newton's Cradle Hover Effects */
.p4-newtons-cradle:hover .p4-cradle-ball-1 {
  animation: p4SwingLeft 0.8s infinite alternate cubic-bezier(0.4, 0, 0.6, 1);
}

.p4-newtons-cradle:hover .p4-cradle-ball-4 {
  animation: p4SwingRight 0.8s infinite alternate cubic-bezier(0.4, 0, 0.6, 1);
}

@keyframes p4SwingLeft {
  0%, 45% { transform: rotate(0deg); }

  100% { transform: rotate(25deg); }

}

@keyframes p4SwingRight {
  0%, 45% { transform: rotate(0deg); }

  100% { transform: rotate(-25deg); }

}

/* Window Blinds Hover Effects */
.p4-blind { transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1); }

.p4-interactive-window:hover .p4-blind-1 { transform: translateY(10px); }

.p4-interactive-window:hover .p4-blind-2 { transform: translateY(30px); }

.p4-interactive-window:hover .p4-blind-3 { transform: translateY(50px); }

.p4-interactive-window:hover .p4-blind-4 { transform: translateY(70px); }

.p4-interactive-window:hover .p4-blind-5 { transform: translateY(90px); }

.p4-interactive-window:hover .p4-blind-6 { transform: translateY(110px); }

.p4-interactive-window:hover .p4-blind-7 { transform: translateY(130px); }

.p4-interactive-window:hover .p4-blind-8 { transform: translateY(150px); }

/* Wall AC Unit Hover Effects */
.p4-ac-wind { opacity: 0; transition: opacity 0.3s ease; }

.p4-wind-line { stroke-dasharray: 60; stroke-dashoffset: 60; }

.p4-ac-unit:hover .p4-ac-wind { opacity: 0.8; }

.p4-ac-unit:hover .p4-ac-led { fill: #06D6A0; filter: drop-shadow(0 0 4px #06D6A0); }

.p4-ac-unit:hover .p4-ac-louver { transform: rotateX(45deg); fill: #374151; }

.p4-ac-unit:hover .p4-wind-1 { animation: p4WindBlow 1.5s infinite linear; }

.p4-ac-unit:hover .p4-wind-2 { animation: p4WindBlow 1.5s infinite linear 0.5s; }

.p4-ac-unit:hover .p4-wind-3 { animation: p4WindBlow 1.5s infinite linear 1s; }

@keyframes p4WindBlow {
  0% { stroke-dashoffset: 60; transform: translateY(0); opacity: 0; }

  20% { opacity: 1; }

  80% { opacity: 1; }

  100% { stroke-dashoffset: -60; transform: translateY(20px); opacity: 0; }

}

/* Trash Bin Paper Toss Hover Effect */

@keyframes p4PaperToss {
  0% { opacity: 0; transform: translate(-100px, -150px) scale(0.5) rotate(0deg); }

  10% { opacity: 1; }

  70% { opacity: 1; }

  100% { opacity: 0; transform: translate(15px, -5px) scale(1) rotate(360deg); }

}

/* --- Interactive Fun Night Decor Animations --- */
/* Interactive Moon Hover Effects */
.p4-shooting-star { stroke-dasharray: 180; stroke-dashoffset: 180; opacity: 0; }

.p4-interactive-moon:hover .p4-moon-body { fill: #FFF; filter: drop-shadow(0 0 15px #FFF); }

.p4-interactive-moon:hover .p4-shooting-star {
  animation: p4ShootingStar 1s ease-out forwards;
}

@keyframes p4ShootingStar {
  0% { stroke-dashoffset: 180; opacity: 1; }

  100% { stroke-dashoffset: 0; opacity: 0; }

}

/* Server Rack Click/Hover Effects */
.p4-data-line { stroke-dasharray: 80; stroke-dashoffset: 80; opacity: 0; }

.p4-interactive-server:hover { filter: drop-shadow(0 0 2px rgba(255,255,255,0.2)); }

.p4-interactive-server:hover .p4-server-led,
.p4-interactive-server.p4-server-on .p4-server-led { animation: p4LedBlink 0.3s infinite alternate; }

.p4-interactive-server:hover .p4-data-line-1,
.p4-interactive-server.p4-server-on .p4-data-line-1 { animation: p4DataFlow 1s infinite linear; opacity: 1; }

.p4-interactive-server:hover .p4-data-line-2,
.p4-interactive-server.p4-server-on .p4-data-line-2 { animation: p4DataFlow 1.2s infinite linear 0.5s; opacity: 1; }

@keyframes p4LedBlink {
  0% { opacity: 1; }

  100% { opacity: 0.2; }

}

@keyframes p4DataFlow {
  0% { stroke-dashoffset: 80; }

  100% { stroke-dashoffset: -80; }

}

/* Desk Lamp Click/Hover Effects */
.p4-lamp-beam { opacity: 0; transition: opacity 0.3s ease; }

.p4-interactive-lamp:hover { filter: drop-shadow(0 0 2px rgba(255,255,255,0.2)); }

.p4-interactive-lamp:hover .p4-lamp-bulb,
.p4-interactive-lamp.p4-lamp-on .p4-lamp-bulb { fill: #FFF; filter: drop-shadow(0 0 8px #FFF); }

.p4-interactive-lamp:hover .p4-lamp-beam,
.p4-interactive-lamp.p4-lamp-on .p4-lamp-beam { opacity: 1; }

/* Wall Sconce Effects */
.p4-sconce-beam { opacity: 0; transition: opacity 0.3s ease; }

.p4-sconce-accent { opacity: 0.5; transition: stroke 0.3s, filter 0.3s; }

.p4-sconce-bulb { filter: drop-shadow(0 0 2px #38BDF8); transition: filter 0.3s, fill 0.3s; }

.p4-sconce-lamp.p4-lamp-on .p4-sconce-beam { opacity: 1; }

.p4-sconce-lamp.p4-lamp-on .p4-sconce-accent { stroke: #BAE6FD; filter: drop-shadow(0 0 5px #38BDF8); opacity: 1; }

.p4-sconce-lamp.p4-lamp-on .p4-sconce-bulb { fill: #E0F2FE; filter: drop-shadow(0 0 10px #38BDF8); }

/* Wall Switch turns green and moves down when active */
.p4-wall-switch:hover { filter: drop-shadow(0 0 2px rgba(255,255,255,0.4)); }

.p4-wall-switch.p4-switch-on .p4-lamp-switch-btn { fill: #10B981; transform: translateY(10px); }

/* ── Interactive Trash Bin ── */
body.p4.day.available-mode .p4-interactive-trash,
body.p4.day.busy-mode .p4-interactive-trash {
  opacity: 1 !important;
  pointer-events: auto !important;
}

.p4-interactive-trash:hover {
  filter: drop-shadow(0 0 6px rgba(0,0,0,0.4)) brightness(1.1);
}

/* Lid opens on hover */
.p4-trash-lid { transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); transform-origin: 0px 0px; }

.p4-interactive-trash:hover .p4-trash-lid { transform: rotate(-45deg) translateY(-5px); }

/* Trash contents peek out */
.p4-trash-contents { transition: opacity 0.3s ease 0.1s; }

.p4-interactive-trash:hover .p4-trash-contents { opacity: 1 !important; }

/* Flying papers — hidden by default */
.p4-fly-paper { opacity: 0; }

.p4-interactive-trash:hover .p4-fly-paper-1 {
  animation: flyPaper1 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards 0.15s;
}

.p4-interactive-trash:hover .p4-fly-paper-2 {
  animation: flyPaper2 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards 0.25s;
}

.p4-interactive-trash:hover .p4-fly-paper-3 {
  animation: flyPaper3 0.9s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards 0.1s;
}

@keyframes flyPaper1 {
  0% { opacity: 0; transform: translate(15px, 0px) rotate(0deg); }

  30% { opacity: 1; }

  100% { opacity: 0; transform: translate(50px, -120px) rotate(180deg) scale(0.6); }

}

@keyframes flyPaper2 {
  0% { opacity: 0; transform: translate(15px, 0px) rotate(0deg); }

  30% { opacity: 1; }

  100% { opacity: 0; transform: translate(-30px, -100px) rotate(-150deg) scale(0.5); }

}

@keyframes flyPaper3 {
  0% { opacity: 0; transform: translate(15px, 0px) rotate(0deg); }

  30% { opacity: 1; }

  100% { opacity: 0; transform: translate(70px, -80px) rotate(220deg) scale(0.7); }

}

/* ── Busy Mode Trash Overrides ── */
body.p4.day.busy-mode .p4-interactive-trash:hover {
  filter: drop-shadow(0 0 10px rgba(239, 68, 68, 0.5)) brightness(1.15);
}

body.p4.day.busy-mode .p4-interactive-trash:hover .p4-trash-lid {
  transform: rotate(-60deg) translateY(-8px);
}

body.p4.day.busy-mode .p4-interactive-trash:hover .p4-fly-paper-1 {
  animation: flyPaperBusy1 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards 0.05s;
}

body.p4.day.busy-mode .p4-interactive-trash:hover .p4-fly-paper-2 {
  animation: flyPaperBusy2 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards 0.1s;
}

body.p4.day.busy-mode .p4-interactive-trash:hover .p4-fly-paper-3 {
  animation: flyPaperBusy3 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards 0s;
}

@keyframes flyPaperBusy1 {
  0% { opacity: 0; transform: translate(15px, 0px) rotate(0deg); }

  20% { opacity: 1; }

  100% { opacity: 0; transform: translate(80px, -150px) rotate(360deg) scale(0.4); }

}

@keyframes flyPaperBusy2 {
  0% { opacity: 0; transform: translate(15px, 0px) rotate(0deg); }

  20% { opacity: 1; }

  100% { opacity: 0; transform: translate(-40px, -130px) rotate(-300deg) scale(0.3); }

}

@keyframes flyPaperBusy3 {
  0% { opacity: 0; transform: translate(15px, 0px) rotate(0deg); }

  20% { opacity: 1; }

  100% { opacity: 0; transform: translate(100px, -100px) rotate(400deg) scale(0.5); }

}

/* ── Click-to-Empty Trash Animation ── */
@keyframes p4TrashShake {
  0%, 100% { transform: translate(20px, 420px) rotate(0deg); }

  10% { transform: translate(22px, 420px) rotate(3deg); }

  20% { transform: translate(18px, 420px) rotate(-3deg); }

  30% { transform: translate(23px, 420px) rotate(4deg); }

  40% { transform: translate(17px, 420px) rotate(-4deg); }

  50% { transform: translate(21px, 420px) rotate(2deg); }

  60% { transform: translate(19px, 420px) rotate(-2deg); }

  70% { transform: translate(22px, 420px) rotate(3deg); }

  80% { transform: translate(18px, 420px) rotate(-1deg); }

  90% { transform: translate(20px, 420px) rotate(1deg); }

}

.p4-interactive-trash.p4-trash-emptying {
  animation: p4TrashShake 0.6s ease-in-out;
}

.p4-interactive-trash.p4-trash-emptying .p4-trash-lid {
  transform: rotate(-80deg) translateY(-10px) !important;
  transition: transform 0.2s ease !important;
}

.p4-interactive-trash.p4-trash-emptying .p4-trash-contents {
  opacity: 1 !important;
  animation: p4TrashContentsOut 0.6s ease forwards;
}

.p4-interactive-trash.p4-trash-emptying .p4-fly-paper-1 {
  animation: flyPaperBusy1 0.5s ease forwards 0s !important;
}

.p4-interactive-trash.p4-trash-emptying .p4-fly-paper-2 {
  animation: flyPaperBusy2 0.5s ease forwards 0.1s !important;
}

.p4-interactive-trash.p4-trash-emptying .p4-fly-paper-3 {
  animation: flyPaperBusy3 0.5s ease forwards 0.05s !important;
}

.p4-interactive-trash.p4-trash-emptying .p4-trash-overflow {
  animation: p4TrashContentsOut 0.4s ease forwards 0.1s;
}

@keyframes p4TrashContentsOut {
  0% { opacity: 1; transform: translateY(0); }

  100% { opacity: 0; transform: translateY(-30px); }

}

/* ── Background Toggle Button ── */
.p4-bg-toggle {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 20;
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 50%;
  background: rgba(255,255,255,0.12);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.2);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: all 0.3s ease;
  opacity: 1;
  pointer-events: auto;
}

.p4-bg-toggle:hover {
  background: rgba(255,255,255,0.25);
  transform: scale(1.1);
  box-shadow: 0 0 12px rgba(78, 205, 196, 0.4);
}

.p4-bg-toggle svg {
  width: 20px;
  height: 20px;
  stroke: #fff;
  transition: stroke 0.3s;
}

/* Show open eye by default, hide closed eye */
.p4-bg-toggle-eye-open { display: block; }

.p4-bg-toggle-eye-closed { display: none; }

/* When off: swap icons */
.p4-bg-toggle.p4-bg-off .p4-bg-toggle-eye-open { display: none; }

.p4-bg-toggle.p4-bg-off .p4-bg-toggle-eye-closed { display: block; }

.p4-bg-toggle.p4-bg-off {
  background: rgba(239, 68, 68, 0.25);
  border-color: rgba(239, 68, 68, 0.4);
}

.p4-bg-toggle.p4-bg-off svg { stroke: #FCA5A5; }

/* Day mode button styling */
body.p4.day .p4-bg-toggle {
  background: rgba(0,0,0,0.08);
  border-color: rgba(0,0,0,0.15);
}

body.p4.day .p4-bg-toggle svg { stroke: #374151; }

body.p4.day .p4-bg-toggle:hover {
  background: rgba(0,0,0,0.15);
  box-shadow: 0 0 12px rgba(232, 176, 66, 0.4);
}

body.p4.day .p4-bg-toggle.p4-bg-off {
  background: rgba(239, 68, 68, 0.15);
  border-color: rgba(239, 68, 68, 0.3);
}

body.p4.day .p4-bg-toggle.p4-bg-off svg { stroke: #DC2626; }

/* Hidden foreground state — reveals full background */
.p4-wrap.p4-content-hidden {
  opacity: 0 !important;
  pointer-events: none !important;
  transition: opacity 0.5s ease;
}

.p4-station-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 40px !important;
}

.p4-station-card {
  background: rgba(255, 255, 255, 0.75);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-left: 3px solid var(--p4-gold);
  border-radius: var(--p4-radius);
  padding: 24px;
  display: flex; align-items: center; gap: 16px;
  transition: all 0.3s ease;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
}

body.p4.night .p4-station-card {
  background: rgba(15, 20, 25, 0.75);
  border-color: rgba(255, 255, 255, 0.1);
  border-left-color: var(--p4-neon);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.3);
}

.p4-station-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
}

body.p4.night .p4-station-card:hover {
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4);
}

.p4-station-icon {
  width: 48px; height: 48px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--p4-gold), #e8a317);
  display: flex; align-items: center; justify-content: center;
  color: #fff; flex-shrink: 0;
}

body.p4.night .p4-station-icon {
  background: linear-gradient(135deg, var(--p4-neon), #2ea89e);
}

.p4-station-icon svg { width: 22px; height: 22px; }

.p4-station-data { display: flex; flex-direction: column; gap: 2px; }

.p4-station-val {
  display: block;
  font-family: var(--p4-font-head);
  font-size: 1.05rem; font-weight: 700;
  color: var(--p4-text);
  line-height: 1.3;
}

body.p4.night .p4-station-val { color: var(--p4-night-text); }

.p4-station-label {
  display: block;
  font-size: 0.8rem; color: var(--p4-text-sub);
  line-height: 1.4;
  margin-top: 2px !important;
}

body.p4.night .p4-station-label { color: var(--p4-night-text-sub); }

/* ── §3 ABOUT PROGRAM: THE RECEPTION DESK ── */
.p4-about {
  position: relative; padding: 80px 0;
  background: var(--p4-surface);
  transition: background var(--p4-transition);
  overflow: hidden;
}

/* 3D Office Background */
.p4-about::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  /* Using a high-quality, bright office space image matching Image 1 */
  background: url('https://images.unsplash.com/photo-1497366216548-37526070297c?auto=format&fit=crop&q=80') center center / cover no-repeat fixed;
  opacity: 1; /* Fully visible wallpaper */
  z-index: 0;
  transition: background-image 0.8s ease, filter 0.8s ease, opacity var(--p4-transition);
}

/* Day Busy Mode: set the background image to the busy office rush image */
body.p4.day.busy-mode .p4-about::before {
  background: url('../image/busy_office_rush.png') center center / cover no-repeat fixed;
  filter: brightness(1.05) contrast(1.15);
}

/* Night Busy Mode: set the background image to the busy night overtime image */
body.p4.night.busy-mode .p4-about::before {
  background: url('../image/busy_night_overtime.png') center center / cover no-repeat fixed;
  filter: brightness(0.9) contrast(1.15);
  opacity: 1 !important;
}

/* Day Holiday Mode: festive empty office — everybody is on holiday! */
body.p4.day.holiday-mode .p4-about::before {
  background: url('../image/holiday_office_empty.png') center center / cover no-repeat fixed;
  filter: brightness(0.65) contrast(1.05) saturate(1.05);
  opacity: 1 !important;
}

body.p4.day.holiday-mode .p4-about::after {
  background: linear-gradient(180deg,
    rgba(255, 248, 220, 0.3) 0%,
    rgba(255, 255, 255, 0.0) 25%,
    rgba(255, 248, 220, 0.25) 100%
  );
}

body.p4.night.busy-mode .p4-about::after {
  background: linear-gradient(180deg,
    rgba(15, 23, 42, 0.7) 0%,
    rgba(15, 23, 42, 0.3) 25%,
    rgba(15, 23, 42, 0.75) 100%
  );
}

.p4-about::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  /* Subtle dark/light gradient just to ensure text legibility at the top, without obscuring the wallpaper */
  background: linear-gradient(180deg,
    rgba(255,255,255, 0.4) 0%,
    rgba(255,255,255, 0.0) 20%,
    rgba(255,255,255, 0.0) 100%
  );
  z-index: 0;
  pointer-events: none;
  transition: background var(--p4-transition);
}

.p4-about .p4-wrap {
  position: relative;
  z-index: 1;
  pointer-events: none;
}

.p4-about .p4-wrap .p4-about-prose,
.p4-about .p4-wrap .p4-about-grid {
  pointer-events: none;
}

.p4-about .p4-wrap .p4-about-card,
.p4-about .p4-wrap .p4-heading,
.p4-about .p4-wrap .p4-eyebrow {
  pointer-events: auto;
}

body.p4.night .p4-about { background: var(--p4-night-surface); }

body.p4.night .p4-about::before { 
  opacity: 0.8; 
  filter: brightness(0.4) contrast(1.2); /* Darken wallpaper for night mode */
}

body.p4.night .p4-about::after {
  background: linear-gradient(180deg,
    rgba(10,22,40, 0.8) 0%,
    rgba(10,22,40, 0.4) 20%,
    rgba(10,22,40, 0.8) 100%
  );
}

/* Beautiful Lit Night Office exclusively for Night Available Mode */
body.p4.night.available-mode .p4-about::before {
  opacity: 1;
  background: url('../image/lit_night_office_full_lamps.png') center center / cover no-repeat fixed;
  filter: brightness(1.5) contrast(1.05);
  transition: background-image 0.8s ease, filter 0.8s ease;
}

body.p4.night.available-mode .p4-about::after {
  background: linear-gradient(180deg,
    rgba(10,22,40, 0.15) 0%,
    rgba(10,22,40, 0.0) 20%,
    rgba(10,22,40, 0.05) 100%
  );
  transition: background 0.8s ease;
}

/* Lamp OFF → Dim the section back to normal night mode */
body.p4.night.available-mode .p4-about.p4-lamp-dimmed::before {
  background: url('../image/lit_night_office.png') center center / cover no-repeat fixed;
  filter: brightness(1.0) contrast(1.0);
}

body.p4.night.available-mode .p4-about.p4-lamp-dimmed::after {
  background: linear-gradient(180deg,
    rgba(10,22,40, 0.5) 0%,
    rgba(10,22,40, 0.2) 20%,
    rgba(10,22,40, 0.5) 100%
  );
}

/* Day Available Mode Animations */
.p4-about-bg-anim {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: 5;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--p4-transition), visibility var(--p4-transition);
  overflow: visible;
}

body.p4.day.available-mode .p4-about-bg-anim {
  opacity: 1;
  visibility: visible;
  pointer-events: none;
}

/* Night Available Mode Animations */
.p4-about-bg-night-anim {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: 5;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--p4-transition), visibility var(--p4-transition);
  overflow: visible;
}

body.p4.night.available-mode .p4-about-bg-night-anim {
  opacity: 1;
  visibility: visible;
  pointer-events: none;
}

/* Floating Light Dust Motes */
.p4-dust {
  position: absolute;
  background: #FFF;
  border-radius: 50%;
  filter: blur(1px);
  opacity: 0;
  pointer-events: none;
  box-shadow: 0 0 4px #FFF;
}

body.p4.day.available-mode .p4-dust {
  animation: p4DustFloat 8s infinite ease-in-out;
}

.p4-dust-1 { top: 30%; left: 20%; animation-delay: 0s; width: 4px; height: 4px; }

.p4-dust-2 { top: 60%; left: 50%; animation-delay: 2.5s; width: 6px; height: 6px; filter: blur(2px); }

.p4-dust-3 { top: 20%; left: 75%; animation-delay: 4s; width: 3px; height: 3px; }

.p4-dust-4 { top: 80%; left: 35%; animation-delay: 1.5s; width: 5px; height: 5px; }

.p4-dust-5 { top: 40%; left: 85%; animation-delay: 5s; width: 4px; height: 4px; }

@keyframes p4DustFloat {
  0% { transform: translate(0, 0) scale(0.8); opacity: 0; }

  25% { opacity: 0.6; }

  75% { opacity: 0.6; }

  100% { transform: translate(50px, -80px) scale(1.5); opacity: 0; }

}

/* Interactive Paper Plane */
.p4-paper-plane-container {
  position: absolute;
  top: 15%; right: 12%;
  width: 48px; height: 48px;
  pointer-events: auto; /* Clickable */
  cursor: pointer;
  z-index: 2;
}

.p4-paper-plane {
  width: 100%; height: 100%;
  color: rgba(255, 255, 255, 0.9);
  filter: drop-shadow(0 4px 8px rgba(0,0,0,0.15));
  transition: color 0.3s ease;
  animation: p4PlaneHover 4s infinite ease-in-out;
  transform-origin: center;
}

@keyframes p4PlaneHover {
  0%, 100% { transform: translateY(0) rotate(-5deg); }

  50% { transform: translateY(-12px) rotate(5deg); }

}

/* Fly away animation */
.p4-paper-plane-container.p4-flying .p4-paper-plane {
  animation: p4PlaneFly 1.2s cubic-bezier(0.55, 0.05, 0.68, 0.19) forwards !important;
}

@keyframes p4PlaneFly {
  0% { transform: translate(0, 0) scale(1) rotate(-5deg); opacity: 1; }

  15% { transform: translate(-40px, 20px) scale(0.9) rotate(-20deg); } /* Wind up */
  100% { transform: translate(800px, -400px) scale(1.5) rotate(45deg); opacity: 0; } /* Zoom off */
}

/* Return glide animation */
.p4-paper-plane-container.p4-returning .p4-paper-plane {
  animation: p4PlaneReturn 1.5s cubic-bezier(0.22, 1, 0.36, 1) forwards !important;
}

@keyframes p4PlaneReturn {
  0% { transform: translate(-600px, 400px) scale(0.4) rotate(-30deg); opacity: 0; }

  70% { transform: translate(20px, -10px) scale(1.05) rotate(5deg); opacity: 1; }

  100% { transform: translate(0, 0) scale(1) rotate(-5deg); opacity: 1; }

}

/* Interactive Sticky Note */
.p4-sticky-note {
  position: absolute;
  top: 5%; left: 42%;
  width: 110px; height: 110px;
  background: linear-gradient(135deg, #fef08a 0%, #fde047 100%);
  box-shadow: 3px 6px 12px rgba(0,0,0,0.2), 0 0 20px rgba(253,224,71,0.15);
  padding: 15px;
  transform: rotate(-3deg);
  pointer-events: auto;
  cursor: pointer;
  z-index: 3;
  transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow 0.3s ease;
  border-bottom-right-radius: 12px 100px;
}

.p4-sticky-pin {
  position: absolute;
  top: 5px; left: 50%;
  transform: translateX(-50%);
  width: 12px; height: 12px;
  background: radial-gradient(circle at 40% 35%, #f87171, #dc2626);
  border-radius: 50%;
  box-shadow: inset -2px -2px 4px rgba(0,0,0,0.3), 1px 2px 4px rgba(0,0,0,0.3);
}

.p4-sticky-text {
  font-family: 'Segoe UI', 'Comic Sans MS', cursive, sans-serif;
  font-size: 0.85rem;
  font-weight: bold;
  color: #1a1a1a;
  line-height: 1.4;
  text-align: center;
  margin-top: 10px;
  transform: rotate(2deg);
}

.p4-sticky-note:hover {
  transform: rotate(0deg) scale(1.08);
  box-shadow: 5px 10px 18px rgba(0,0,0,0.2), 0 0 25px rgba(253,224,71,0.2);
  border-bottom-right-radius: 20px 80px;
}

/* Wobble then Fall animation when clicked */
.p4-sticky-note.p4-falling {
  animation: p4StickyWobbleFall 1.8s ease-in forwards !important;
  pointer-events: none;
}

@keyframes p4StickyWobbleFall {
  0% { transform: rotate(0deg) scale(1.05); opacity: 1; }

  5% { transform: rotate(8deg) translateY(-5px); }

  10% { transform: rotate(-6deg) translateY(-3px); }

  15% { transform: rotate(4deg) translateY(0); }

  20% { transform: rotate(-2deg) translateY(5px); }

  25% { transform: rotate(0deg) translateY(10px); }

  100% { transform: translateY(700px) rotate(90deg); opacity: 0; }

}

/* Return animation - floats back to position */
.p4-sticky-note.p4-returning {
  animation: p4StickyReturn 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards !important;
  pointer-events: none;
}

@keyframes p4StickyReturn {
  0% { transform: translateY(-200px) rotate(10deg) scale(0.3); opacity: 0; }

  60% { transform: translateY(10px) rotate(-2deg) scale(1.05); opacity: 1; }

  80% { transform: translateY(-5px) rotate(1deg) scale(1); opacity: 1; }

  100% { transform: translateY(0) rotate(-3deg) scale(1); opacity: 1; }

}

/* Interactive Buzzing Bee */
.p4-office-bee-container {
  position: absolute;
  top: 40%; left: 3%;
  width: 30px; height: 30px;
  pointer-events: auto; /* Hoverable */
  cursor: pointer;
  z-index: 2;
  animation: p4BeeSway 10s infinite cubic-bezier(0.45, 0.05, 0.55, 0.95);
}

.p4-bee-path {
  width: 100%; height: 100%;
  animation: p4BeeBob 2s infinite ease-in-out;
}

.p4-office-bee {
  width: 100%; height: 100%;
  transform: rotate(15deg);
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2));
}

.p4-bee-wing-l {
  transform-origin: 10px 9px;
  animation: p4BeeFlap 0.05s infinite alternate;
}

.p4-bee-wing-r {
  transform-origin: 14px 9px;
  animation: p4BeeFlap 0.05s infinite alternate-reverse;
}

@keyframes p4BeeFlap {
  0% { transform: rotate(0deg); }

  100% { transform: rotate(30deg); }

}

@keyframes p4BeeSway {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }

  25% { transform: translate(10px, -50px) rotate(5deg); }

  50% { transform: translate(-15px, 60px) rotate(-10deg); }

  75% { transform: translate(5px, 20px) rotate(5deg); }

}

@keyframes p4BeeBob {
  0%, 100% { transform: translateY(0); }

  50% { transform: translateY(-15px); }

}

/* Bee interaction: Wiggle on hover, Barrel Roll on spin class */
.p4-office-bee-container:hover .p4-bee-path {
  animation-duration: 0.2s; /* Aggressive buzzing */
}

.p4-office-bee-container:hover .p4-bee-wing-l,
.p4-office-bee-container:hover .p4-bee-wing-r {
  animation-duration: 0.01s; /* Super fast wings */
}

.p4-office-bee-container.p4-bee-spin .p4-office-bee {
  animation: p4BeeBarrelRoll 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards !important;
}

@keyframes p4BeeBarrelRoll {
  0% { transform: rotate(15deg) scale(1); }

  50% { transform: rotate(195deg) scale(1.5); }

  100% { transform: rotate(375deg) scale(1); }

}

/* 1. Time-Travel Clock */
.p4-bg-clock {
  position: absolute; top: 12%; left: 5%;
  width: 100px; height: 100px;
  pointer-events: auto; cursor: pointer; z-index: 2;
  transition: transform 0.3s;
}

.p4-bg-clock:hover { transform: scale(1.1); }

.p4-time-travel .p4-clock-hands { animation: p4ClockSpin 3s ease-in-out forwards; transform-origin: 50px 50px; }

@keyframes p4ClockSpin {
  0% { transform: rotate(0deg); }

  50% { transform: rotate(2160deg); } /* Fast forward 6 hours */
  100% { transform: rotate(0deg); } /* Snap back */
}

/* 2. Rogue Rolling Chair */



@keyframes p4ChairRoll {
  0% { transform: translateX(0) scale(1); opacity: 1; }

  100% { transform: translateX(800px) scale(0.8); opacity: 0; }

}

/* 3. Happy Potted Plant (On Desk) - Multi-Interactive */
.p4-bg-plant {
  position: absolute; bottom: 91%; right: 165px;
  width: 45px; height: 55px;
  pointer-events: auto; cursor: pointer; z-index: 4;
  transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.p4-bg-plant:hover { transform: scale(1.08); }

.p4-plant-leaves { transition: transform 0.3s ease; transform-origin: 32px 44px; }

.p4-bg-plant:hover .p4-plant-leaves { animation: p4PlantSway 1s infinite alternate; }

.p4-plant-stem { transition: transform 0.5s ease; transform-origin: 32px 44px; }

.p4-plant-glow-ring {
  position: absolute; bottom: 10%; left: 50%; transform: translateX(-50%) scale(0);
  width: 40px; height: 10px; border-radius: 50%;
  background: radial-gradient(ellipse, rgba(76,175,80,0.5), transparent);
  opacity: 0; transition: all 0.5s ease;
}

/* State 1: Bloom - Petals appear one by one */
.p4-bg-plant.p4-bloomed .p4-plant-petal,
.p4-bg-plant.p4-bloomed .p4-plant-center {
  opacity: 1; transition: opacity 0.3s ease, transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.p4-bg-plant.p4-bloomed .p4-petal-1 { transition-delay: 0s; }

.p4-bg-plant.p4-bloomed .p4-petal-2 { transition-delay: 0.05s; }

.p4-bg-plant.p4-bloomed .p4-petal-3 { transition-delay: 0.1s; }

.p4-bg-plant.p4-bloomed .p4-petal-4 { transition-delay: 0.15s; }

.p4-bg-plant.p4-bloomed .p4-petal-5 { transition-delay: 0.2s; }

.p4-bg-plant.p4-bloomed .p4-petal-6 { transition-delay: 0.25s; }

.p4-bg-plant.p4-bloomed .p4-plant-center { transition-delay: 0.3s; }

/* State 2: Color Shift - Petals spin */
.p4-bg-plant.p4-color-shift .p4-plant-flower-group {
  animation: p4FlowerSpin 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

@keyframes p4FlowerSpin {
  0% { transform: translate(32px, 10px) rotate(0deg) scale(1); }

  50% { transform: translate(32px, 10px) rotate(180deg) scale(1.3); }

  100% { transform: translate(32px, 10px) rotate(360deg) scale(1); }

}

/* State 3: Grow taller - Scale up + extra leaf */
.p4-bg-plant.p4-grown {
  transform: scale(1.25);
}

.p4-bg-plant.p4-grown .p4-plant-leaf-3 {
  opacity: 1; transition: opacity 0.5s ease;
}

.p4-bg-plant.p4-grown .p4-plant-glow-ring {
  opacity: 1; transform: translateX(-50%) scale(1);
}

/* State 4: Sparkle shimmer */
.p4-bg-plant.p4-sparkling .p4-plant-sparkles {
  opacity: 1; animation: p4PlantSparkle 1.5s infinite;
}

@keyframes p4PlantSparkle {
  0%, 100% { opacity: 0.3; }

  25% { opacity: 1; }

  50% { opacity: 0.5; }

  75% { opacity: 1; }

}

.p4-bg-plant.p4-sparkling .p4-plant-sparkles circle {
  animation: p4SparkleFloat 1.2s infinite ease-in-out;
}

.p4-bg-plant.p4-sparkling .p4-plant-sparkles circle:nth-child(1) { animation-delay: 0s; }

.p4-bg-plant.p4-sparkling .p4-plant-sparkles circle:nth-child(2) { animation-delay: 0.3s; }

.p4-bg-plant.p4-sparkling .p4-plant-sparkles circle:nth-child(3) { animation-delay: 0.6s; }

.p4-bg-plant.p4-sparkling .p4-plant-sparkles circle:nth-child(4) { animation-delay: 0.9s; }

@keyframes p4SparkleFloat {
  0%, 100% { transform: translateY(0) scale(1); }

  50% { transform: translateY(-3px) scale(1.5); }

}

/* State 5: Petal Drop */
.p4-bg-plant.p4-petal-drop .p4-plant-petal {
  animation: p4PetalFall 1s ease-in forwards;
}

.p4-bg-plant.p4-petal-drop .p4-petal-1 { animation-delay: 0s; }

.p4-bg-plant.p4-petal-drop .p4-petal-2 { animation-delay: 0.1s; }

.p4-bg-plant.p4-petal-drop .p4-petal-3 { animation-delay: 0.15s; }

.p4-bg-plant.p4-petal-drop .p4-petal-4 { animation-delay: 0.2s; }

.p4-bg-plant.p4-petal-drop .p4-petal-5 { animation-delay: 0.25s; }

.p4-bg-plant.p4-petal-drop .p4-petal-6 { animation-delay: 0.3s; }

.p4-bg-plant.p4-petal-drop .p4-plant-center {
  animation: p4PetalFall 1s ease-in forwards;
  animation-delay: 0.4s;
}

@keyframes p4PetalFall {
  0% { transform: translateY(0) rotate(0deg); opacity: 1; }

  100% { transform: translateY(50px) rotate(180deg); opacity: 0; }

}

/* Hold Interaction: Water the plant */
.p4-bg-plant.p4-watered .p4-plant-water {
  opacity: 1; animation: p4WaterDrip 0.8s ease-in infinite;
}

@keyframes p4WaterDrip {
  0% { transform: translateY(0); opacity: 1; }

  100% { transform: translateY(35px); opacity: 0; }

}

.p4-bg-plant.p4-watered .p4-plant-leaves {
  animation: p4PlantSway 0.5s infinite alternate !important;
}

.p4-bg-plant.p4-watered .p4-plant-glow-ring {
  opacity: 1; transform: translateX(-50%) scale(1.5);
  background: radial-gradient(ellipse, rgba(79,195,247,0.5), transparent);
}

@keyframes p4PlantSway { from { transform: rotate(-5deg); } to { transform: rotate(5deg); } }

/* 4. Pop-able Bubble Wrap */
.p4-bg-bubble-wrap {
  position: absolute; top: 60%; left: 45%;
  width: 60px; height: 90px;
  background: rgba(255,255,255,0.3);
  backdrop-filter: blur(2px);
  border: 1px solid rgba(255,255,255,0.6);
  display: grid; grid-template-columns: 1fr 1fr; gap: 4px;
  padding: 4px; border-radius: 4px;
  pointer-events: auto; z-index: 2;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1), inset 0 0 10px rgba(255,255,255,0.5);
}

.p4-bubble {
  background: rgba(255,255,255,0.4); border-radius: 50%;
  box-shadow: inset 2px 2px 4px rgba(255,255,255,0.8), inset -2px -2px 4px rgba(0,0,0,0.1);
  cursor: pointer; transition: all 0.1s ease;
}

.p4-bubble:hover { background: rgba(255,255,255,0.3); }

.p4-bubble.p4-popped { opacity: 0; transform: scale(1.5); pointer-events: none; }

/* 5. Brand New Design Table (Holds Monitor & Donut) */
.p4-bg-desk {
  position: absolute; bottom: 8%; right: 5%;
  width: 380px; height: 220px;
  z-index: 2;
}

.p4-desk-top {
  position: absolute; top: 0; left: 0; right: 0; height: 10px;
  background: linear-gradient(180deg, rgba(255,255,255,0.9), rgba(240,240,240,0.9));
  border-radius: 4px; border: 1px solid rgba(255,255,255,0.6);
  box-shadow: 0 4px 12px rgba(0,0,0,0.1), inset 0 2px 4px rgba(255,255,255,0.8); z-index: 3;
}

.p4-desk-drawer {
  position: absolute; top: 10px; left: 20px; right: 20px; height: 25px;
  background: rgba(250,250,250,0.8);
  border-bottom-left-radius: 4px; border-bottom-right-radius: 4px;
  border: 1px solid rgba(200,200,200,0.5); border-top: none; z-index: 2;
}

.p4-desk-drawer::after {
  content: ''; position: absolute; top: 10px; left: 50%; transform: translateX(-50%);
  width: 50px; height: 4px; background: rgba(0,0,0,0.2); border-radius: 2px;
}

.p4-desk-leg {
  position: absolute; top: 10px; bottom: -80px; width: 12px;
  background: linear-gradient(90deg, #d4d4d4, #f5f5f5, #a3a3a3);
  border-radius: 2px; z-index: 1; box-shadow: 2px 0 4px rgba(0,0,0,0.1);
}

.p4-leg-left { left: 30px; }

.p4-leg-right { right: 30px; }

/* PC Case Under Desk */
.p4-pc-case {
  position: absolute; bottom: -80px; right: 45px; width: 60px; height: 130px;
  background: linear-gradient(135deg, #1e293b, #0f172a);
  border: 2px solid #334155; border-radius: 6px; z-index: 2;
  box-shadow: 0 10px 25px rgba(0,0,0,0.6), inset 0 1px 3px rgba(255,255,255,0.1);
  display: flex; overflow: hidden;
  cursor: pointer; pointer-events: auto;
  transition: all 0.3s ease;
}

.p4-pc-case:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(0,0,0,0.7), 0 0 15px rgba(56,189,248,0.3);
  border-color: #38bdf8;
}

/* Front I/O Panel */
.p4-pc-front {
  width: 18px; height: 100%;
  background: #090d16;
  border-right: 1px solid rgba(255,255,255,0.1);
  display: flex; flex-direction: column; align-items: center; padding-top: 10px;
  box-sizing: border-box;
}

.p4-pc-power-btn {
  width: 8px; height: 8px; background: #334155; border-radius: 50%;
  margin-bottom: 12px; cursor: pointer; transition: all 0.3s ease;
  box-shadow: inset 0 1px 2px rgba(255,255,255,0.1);
}

.p4-pc-case:hover .p4-pc-power-btn {
  background: #38bdf8;
  box-shadow: 0 0 8px #38bdf8, inset 0 0 2px #fff;
}

.p4-pc-case.p4-awake .p4-pc-power-btn {
  background: #00ffcc;
  box-shadow: 0 0 12px #00ffcc, inset 0 0 3px #fff;
}

.p4-pc-io-ports {
  display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px;
}

.p4-pc-usb {
  width: 6px; height: 2px; background: #475569; border-radius: 1px;
}

.p4-pc-vent {
  width: 10px; height: 2px; background: #1e293b; margin-bottom: 4px; border-radius: 1px;
}

/* Glass Side Panel & Internals */
.p4-pc-glass-panel {
  flex: 1; height: 100%;
  position: relative;
  background: rgba(15, 23, 42, 0.7);
  backdrop-filter: blur(1px);
  padding: 6px 4px;
  display: flex; flex-direction: column; justify-content: space-between; align-items: center;
  box-sizing: border-box;
}

.p4-pc-motherboard {
  position: absolute; inset: 4px;
  border-radius: 3px; z-index: 1; pointer-events: none;
  background: linear-gradient(135deg, rgba(30,41,59,0.3), rgba(15,23,42,0.3));
}

.p4-pc-ram-sticks {
  position: absolute; top: 12px; left: 8px; display: flex; gap: 2px;
}

.p4-pc-ram-stick {
  width: 2px; height: 16px; background: #475569; border-radius: 1px; transition: all 0.3s;
}

.p4-pc-case.p4-awake .p4-pc-ram-stick {
  background: #00ffcc; box-shadow: 0 0 4px #00ffcc;
}

.p4-pc-gpu {
  position: absolute; top: 38px; left: 4px; right: 4px; height: 14px;
  background: linear-gradient(90deg, #1e293b, #0f172a);
  border-radius: 2px; border: 1px solid rgba(255,255,255,0.1);
  display: flex; align-items: center; justify-content: center;
}

.p4-pc-gpu-logo {
  font-size: 4px; font-family: monospace; color: #475569; transform: scale(0.8);
}

.p4-pc-case.p4-awake .p4-pc-gpu-logo {
  color: #38bdf8; text-shadow: 0 0 4px #38bdf8;
}

.p4-pc-cpu-cooler {
  position: absolute; top: 10px; right: 6px; width: 14px; height: 14px;
  border-radius: 50%; border: 1px solid rgba(255,255,255,0.1);
  display: flex; align-items: center; justify-content: center;
}

.p4-pc-cooler-ring {
  width: 8px; height: 8px; border-radius: 50%; background: transparent;
  border: 1.5px solid #475569; transition: all 0.3s;
}

.p4-pc-case.p4-awake .p4-pc-cooler-ring {
  border-color: #00ffcc; box-shadow: 0 0 6px #00ffcc;
  animation: p4CoolerPulse 1.5s infinite alternate;
}

@keyframes p4CoolerPulse {
  from { transform: scale(0.9); opacity: 0.7; }

  to { transform: scale(1.1); opacity: 1; }

}

/* RGB Fans */
.p4-pc-fan {
  width: 32px; height: 32px; z-index: 2;
  border-radius: 50%;
  background: rgba(0,0,0,0.4);
  display: flex; align-items: center; justify-content: center;
  color: rgba(71, 85, 105, 0.4);
  transition: all 0.3s ease;
  box-shadow: 0 0 4px rgba(0,0,0,0.3);
}

.p4-fan-svg {
  width: 85%; height: 85%;
}

.p4-fan-blades {
  transform-origin: 50px 50px;
  animation: spin 3s linear infinite;
}

.p4-pc-case:hover .p4-pc-fan {
  color: rgba(56, 189, 248, 0.6);
  box-shadow: 0 0 8px rgba(56, 189, 248, 0.3);
}

.p4-pc-case:hover .p4-fan-blades {
  animation-duration: 1.2s;
}

.p4-pc-case.p4-awake .p4-pc-fan {
  color: #00ffcc;
  box-shadow: 0 0 12px rgba(0, 255, 204, 0.5), inset 0 0 8px rgba(0, 255, 204, 0.2);
}

.p4-pc-case.p4-awake .p4-fan-blades {
  animation-duration: 0.4s;
}

/* Night theme adjustments */
.p4-night-case {
  background: linear-gradient(135deg, #0f172a, #020617);
  border-color: #1e293b;
  box-shadow: 0 10px 30px rgba(0,0,0,0.8), inset 0 1px 3px rgba(255,255,255,0.05);
}

.p4-night-case:hover {
  border-color: #ec4899;
  box-shadow: 0 12px 35px rgba(0,0,0,0.9), 0 0 20px rgba(236,72,153,0.4);
}

.p4-night-case:hover .p4-pc-power-btn {
  background: #ec4899;
  box-shadow: 0 0 8px #ec4899, inset 0 0 2px #fff;
}

.p4-night-case.p4-awake .p4-pc-power-btn {
  background: #f43f5e;
  box-shadow: 0 0 15px #f43f5e, inset 0 0 3px #fff;
}

.p4-night-case:hover .p4-pc-fan {
  color: rgba(236, 72, 153, 0.7);
  box-shadow: 0 0 10px rgba(236, 72, 153, 0.4);
}

.p4-night-case.p4-awake .p4-pc-fan {
  color: #ff007f;
  box-shadow: 0 0 15px rgba(255, 0, 127, 0.7), inset 0 0 8px rgba(255, 0, 127, 0.3);
}

.p4-night-case.p4-awake .p4-pc-ram-stick {
  background: #ff007f; box-shadow: 0 0 5px #ff007f;
}

.p4-night-case.p4-awake .p4-pc-cooler-ring {
  border-color: #ff007f; box-shadow: 0 0 8px #ff007f;
}

@keyframes spin {
  100% { transform: rotate(360deg); }

}

/* Day Holiday Mode Table Stroke */
body.day.holiday-mode .p4-desk-top,
body.day.holiday-mode .p4-desk-leg {
  border: 2px solid black !important;
}

body.day.holiday-mode .p4-desk-drawer {
  border: 2px solid black !important;
  border-top: none !important;
}

/* 5b. Redesigned Premium Curved PC Monitor (On Desk) */
.p4-bg-monitor {
  position: absolute; bottom: 105%; right: 25px; /* Sitting on desk */
  width: 96px; height: 66px;
  pointer-events: auto; cursor: pointer; z-index: 4;
  transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.p4-bg-monitor:hover {
  transform: translateY(-4px) scale(1.05);
}

/* Drastically expanded click areas for PC monitors */
.p4-bg-monitor::after {
  content: '';
  position: absolute;
  inset: -60px; /* Drastically extends clickable area without changing visual size */
  pointer-events: auto;
  cursor: pointer;
  z-index: 5;
}


/* Curved Frame & Bezel */
.p4-monitor-screen-wrapper {
  position: absolute; inset: 0;
  background: #1e293b;
  border: 4px solid #0f172a;
  border-radius: 8px 8px 10px 10px;
  overflow: hidden;
  box-shadow: 0 8px 16px rgba(0,0,0,0.4), inset 0 2px 4px rgba(255,255,255,0.1);
  display: flex;
  flex-direction: column;
}

.p4-monitor-screen {
  position: relative;
  width: 100%;
  height: 100%;
  background: #090d16;
  overflow: hidden;
}

/* Stand and Base */
.p4-monitor-stand-neck {
  position: absolute; bottom: -10px; left: 41px;
  width: 14px; height: 12px;
  background: linear-gradient(90deg, #64748b, #475569);
  clip-path: polygon(20% 0%, 80% 0%, 100% 100%, 0% 100%);
  z-index: -1;
}

.p4-monitor-stand-plate {
  position: absolute; bottom: -14px; left: 28px;
  width: 40px; height: 5px;
  background: linear-gradient(180deg, #cbd5e1, #64748b);
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.3);
  z-index: -2;
}

/* Power LED Indicator */
.p4-monitor-power-led {
  position: absolute; bottom: 1px; left: 46px;
  width: 4px; height: 2px;
  border-radius: 50%;
  background: #00d2ff;
  box-shadow: 0 0 6px #00d2ff;
  animation: p4LedPulse 2s infinite ease-in-out;
  z-index: 10;
}

@keyframes p4LedPulse {
  0%, 100% { opacity: 0.4; }

  50% { opacity: 1; box-shadow: 0 0 8px #00d2ff, 0 0 2px #00d2ff; }

}

.p4-bg-monitor.p4-awake .p4-monitor-power-led {
  background: #00ffcc;
  box-shadow: 0 0 8px #00ffcc;
  animation: none;
}

/* Screen Saver Mode (Standby) */
.p4-monitor-screensaver {
  position: absolute; inset: 0;
  opacity: 1;
  transition: opacity 0.4s ease;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.p4-grid-lines {
  position: absolute; inset: 0;
  background-image: 
    linear-gradient(rgba(0, 210, 255, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 210, 255, 0.03) 1px, transparent 1px);
  background-size: 8px 8px;
}

.p4-wave-svg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
}

.p4-sine-wave {
  stroke-dasharray: 200;
  stroke-dashoffset: 200;
  animation: p4DrawWave 4s linear infinite;
}

.wave-2 { animation-delay: -2s; }

@keyframes p4DrawWave {
  to { stroke-dashoffset: 0; }

}

.p4-radar-scan {
  position: absolute; top: 0; left: -100%;
  width: 100%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(0, 210, 255, 0.1), transparent);
  animation: p4RadarScan 3s infinite linear;
}

@keyframes p4RadarScan {
  0% { left: -100%; }

  100% { left: 100%; }

}

.p4-pc-status-tag {
  position: absolute; bottom: 4px; right: 4px;
  font-size: 5px; font-weight: 800; font-family: monospace;
  color: rgba(0, 210, 255, 0.7);
  background: rgba(0, 210, 255, 0.1);
  padding: 1px 3px; border-radius: 2px;
  letter-spacing: 0.5px;
}

/* Awake State: Holographic Admin Dashboard */
.p4-monitor-dashboard {
  position: absolute; inset: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
  padding: 6px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: #020617;
}

.p4-bg-monitor.p4-awake .p4-monitor-screensaver { opacity: 0; }

.p4-bg-monitor.p4-awake .p4-monitor-dashboard { opacity: 1; pointer-events: auto; }

.p4-dash-header {
  display: flex; justify-content: space-between; align-items: center;
  border-bottom: 1px solid rgba(0, 255, 204, 0.2);
  padding-bottom: 2px; margin-bottom: 4px;
}

.p4-dash-title {
  font-size: 6px; font-weight: 800; font-family: monospace;
  color: #00ffcc; letter-spacing: 0.5px;
}

.p4-dash-led {
  width: 4px; height: 4px; border-radius: 50%;
  background: #00ffcc; box-shadow: 0 0 6px #00ffcc;
  animation: p4DashBlink 1s infinite alternate;
}

@keyframes p4DashBlink {
  from { opacity: 0.3; } to { opacity: 1; }

}

.p4-dash-body {
  display: flex; flex: 1; justify-content: space-between; align-items: center;
}

.p4-dash-radial {
  position: relative; width: 28px; height: 28px;
}

.p4-radial-svg { transform: rotate(-90deg); width: 100%; height: 100%; }

.p4-radial-progress {
  animation: p4RadialFill 2s ease-out forwards;
}

@keyframes p4RadialFill {
  from { stroke-dasharray: 0, 100; }

}

.p4-radial-center {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 5px; font-weight: 800; font-family: monospace;
  color: #00ffcc;
}

.p4-dash-metrics {
  flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 3px;
  padding-left: 6px;
}

.p4-metric-bar {
  width: 100%; height: 3px; background: #111; border-radius: 1px; overflow: hidden;
}

.p4-bar-fill {
  height: 100%; width: 0;
  background: var(--fill-color);
  animation: p4BarGrow 1.5s cubic-bezier(0.1, 0.8, 0.2, 1) forwards;
}

.fill-cpu { --fill-color: #00ffcc; animation-delay: 0.2s; --fill-width: 80%; }

.fill-ram { --fill-color: #00a8ff; animation-delay: 0.4s; --fill-width: 65%; }

@keyframes p4BarGrow {
  to { width: var(--fill-width, 70%); }

}

.p4-metric-text {
  font-size: 5px; font-weight: 800; font-family: monospace;
  color: #00a8ff; letter-spacing: 0.3px;
}

.p4-scanlines {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(
    rgba(18, 16, 16, 0) 50%, 
    rgba(0, 0, 0, 0.25) 50%
  ), linear-gradient(
    90deg, 
    rgba(255, 0, 0, 0.06), 
    rgba(0, 255, 0, 0.02), 
    rgba(0, 0, 255, 0.06)
  );
  background-size: 100% 2px, 3px 100%;
}

/* Boot screen flash effect */
.p4-monitor-boot-flash {
  position: absolute; inset: 0;
  background: #fff;
  opacity: 0;
  pointer-events: none;
  z-index: 100;
}

.p4-bg-monitor.p4-awake .p4-monitor-boot-flash {
  animation: p4BootFlash 0.3s ease-out forwards;
}

@keyframes p4BootFlash {
  0% { opacity: 0; }

  20% { opacity: 1; }

  100% { opacity: 0; }

}

/* 6. Crumpled Paper Toss */
.p4-bg-paper-toss {
  position: absolute; bottom: 8%; right: 28%;
  width: 30px; height: 30px;
  pointer-events: auto; cursor: pointer; z-index: 2;
}

.p4-bg-paper-toss:hover { filter: drop-shadow(0 0 4px #fff); }

.p4-toss-score {
  position: absolute; top: -20px; left: -10px; color: #10B981; font-weight: bold; font-size: 12px;
  opacity: 0; pointer-events: none;
}

.p4-bg-paper-toss.p4-tossed svg { animation: p4TossArc 1s cubic-bezier(0.1, 0.8, 0.4, 1) forwards !important; }

.p4-bg-paper-toss.p4-tossed .p4-toss-score { animation: p4ScorePop 1.5s ease forwards; }

@keyframes p4TossArc {
  0% { transform: translate(0,0) rotate(0deg) scale(1); opacity: 1; }

  50% { transform: translate(60px, -80px) rotate(180deg) scale(0.8); }

  100% { transform: translate(120px, 40px) rotate(360deg) scale(0.5); opacity: 0; }

}

@keyframes p4ScorePop { 0% { opacity: 0; transform: translateY(10px); } 20% { opacity: 1; transform: translateY(-10px); } 100% { opacity: 0; transform: translateY(-30px); } }

/* 7. Chomping Stapler (On Desk) */
.p4-bg-stapler {
  position: absolute; bottom: 100%; left: 95px;
  width: 50px; height: 25px;
  pointer-events: auto; cursor: pointer; z-index: 4;
}

.p4-bg-stapler:hover { transform: scale(1.05); }

.p4-bg-stapler.p4-chomping .p4-stapler-top { animation: p4StaplerChomp 0.4s ease-in-out 3; }

@keyframes p4StaplerChomp {
  0%, 100% { transform: rotate(0deg); }

  50% { transform: rotate(15deg); } /* chomp down */
}

/* 8. Swinging Pendulum Light */
.p4-bg-lamp {
  position: absolute; top: 0; left: 45%;
  width: 40px; height: 80px;
  pointer-events: auto; cursor: pointer; z-index: 2;
  transform-origin: 20px 0;
}

.p4-bg-lamp.p4-swinging { animation: p4LampSwing 4s ease-in-out forwards; }

@keyframes p4LampSwing {
  0% { transform: rotate(0deg); }

  20% { transform: rotate(20deg); }

  40% { transform: rotate(-15deg); }

  60% { transform: rotate(10deg); }

  80% { transform: rotate(-5deg); }

  100% { transform: rotate(0deg); }

}

/* 9. Stolen Donut (On Desk) */
.p4-bg-donut {
  position: absolute; bottom: 100%; left: 40px; /* Sitting on desk */
  width: 40px; height: 40px;
  pointer-events: auto; cursor: pointer; z-index: 4;
  overflow: visible;
}

.p4-donut-napkin {
  position: absolute; bottom: 0; left: 0; width: 30px; height: 20px;
  background: #fff; transform: skew(-20deg); box-shadow: 2px 2px 4px rgba(0,0,0,0.1); z-index: 1;
}

.p4-donut-svg { position: absolute; bottom: 4px; left: 4px; width: 24px; height: 24px; z-index: 2; }

.p4-thief-hand { position: absolute; top: 10px; right: -200px; width: 30px; height: 30px; z-index: 3; opacity: 0; transform: scaleX(-1); }

.p4-bg-donut.p4-stolen .p4-thief-hand { animation: p4ThiefSteal 1s ease-in-out forwards; }

.p4-bg-donut.p4-stolen .p4-donut-svg { animation: p4DonutGone 1s ease-in-out forwards; }

@keyframes p4ThiefSteal {
  0% { right: -200px; opacity: 0; }

  40% { right: -5px; opacity: 1; }

  60% { right: -5px; opacity: 1; }

  100% { right: -200px; opacity: 0; }

}

@keyframes p4DonutGone {
  0%, 45% { transform: translateX(0); opacity: 1; }

  55% { transform: translateX(50px); opacity: 1; }

  100% { transform: translateX(200px); opacity: 0; }

}

/* ── ABOUT PROGRAM: PREMIUM GRID ── */
.p4-about .p4-wrap {
  pointer-events: none; /* Let clicks pass through empty space to the interactive background */
}

.p4-about .p4-eyebrow,
.p4-about .p4-heading {
  pointer-events: auto; /* Keep text selectable */
  transition: padding-left 0.4s cubic-bezier(0.4, 0, 0.2, 1), color var(--p4-transition), text-shadow var(--p4-transition);
}

/* Text Styling for all modes in About section (matches Day Available Mode) */
.p4-about .p4-heading {
  color: #fff !important;
  -webkit-text-stroke: 0.5px rgba(0, 0, 0, 0.8) !important;
  text-shadow: 0 4px 12px rgba(0, 0, 0, 0.4) !important;
}

.p4-about .p4-eyebrow {
  color: #fff !important;
  -webkit-text-stroke: none !important;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6) !important;
  font-weight: 600 !important;
  letter-spacing: 2px !important;
}

.p4-about .p4-heading .p4-glow {
  color: var(--p4-gold) !important;
}

.p4-about-prose {
  margin-top: 28px !important;
}

.p4-premium-about {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
}

.p4-premium-about::before { display: none !important; }

.p4-about-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 24px;
  pointer-events: none;
}

.p4-about-card {
  display: flex;
  align-items: flex-start;
  background: rgba(255, 255, 255, 0.75);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: var(--p4-radius-lg);
  padding: 28px;
  transition: all var(--p4-transition);
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(0,0,0,0.04), 0 1px 4px rgba(0,0,0,0.02);
  pointer-events: auto;
}

.p4-about-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 40px rgba(0,0,0,0.08), 0 4px 12px rgba(0,0,0,0.04);
  border-color: var(--p4-gold);
  background: rgba(255, 255, 255, 0.9);
}

body.p4.night .p4-about-card {
  background: rgba(15, 23, 42, 0.6);
  border-color: rgba(78, 205, 196, 0.15);
  box-shadow: 0 4px 16px rgba(0,0,0,0.2);
}

body.p4.night .p4-about-card:hover {
  box-shadow: 0 16px 40px rgba(0,0,0,0.4);
  border-color: var(--p4-neon);
  background: rgba(15, 23, 42, 0.8);
}

.p4-about-card-wide {
  grid-column: 1 / -1; /* spans full width on larger screens */
}

.p4-about-icon {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: rgba(245, 166, 35, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 20px;
  color: var(--p4-gold);
  transition: all var(--p4-transition);
}

.p4-about-card:hover .p4-about-icon {
  background: var(--p4-gold);
  color: #fff;
  transform: scale(1.05);
}

body.p4.night .p4-about-icon {
  background: rgba(78, 205, 196, 0.1);
  color: var(--p4-neon);
}

body.p4.night .p4-about-card:hover .p4-about-icon {
  background: var(--p4-neon);
  color: #0a1628;
}

.p4-about-icon svg { width: 24px; height: 24px; }

.p4-about-text { flex-grow: 1; }

.p4-about-title {
  margin: 0 0 8px 0;
  font-family: var(--p4-font-heading);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--p4-text);
  letter-spacing: -0.2px;
}

body.p4.night .p4-about-title { color: var(--p4-night-text); }

.p4-about-text p {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--p4-text-sub);
}

body.p4.night .p4-about-text p { color: var(--p4-night-text-sub); }

/* ── §4 BENEFITS & ENTRY: THE PERKS LOUNGE ── */
.p4-benefits {
  position: relative; padding: 80px 0;
  background: var(--p4-surface-alt);
  transition: background var(--p4-transition);
}

body.p4.night .p4-benefits { background: #0d1420; }

.p4-benefits-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px; margin-top: 32px;
}

.p4-bf-col { display: flex; flex-direction: column; gap: 12px; }

.p4-bf-label {
  font-family: var(--p4-font-mono);
  font-size: 0.85rem; font-weight: 600;
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 8px !important; color: var(--p4-text);
}

body.p4.night .p4-bf-label { color: var(--p4-night-text); }

.p4-bf-label svg { width: 16px; height: 16px; }

.p4-bf-bubble {
  display: flex; align-items: center; gap: 16px;
  padding: 20px 24px;
  background: var(--p4-surface);
  border: 1px solid var(--p4-border);
  border-radius: var(--p4-radius);
  transition: all 0.3s ease;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
  margin-bottom: 12px !important;
}

body.p4.night .p4-bf-bubble {
  background: var(--p4-night-surface);
  border-color: var(--p4-night-border);
}

.p4-bf-bubble:hover {
  transform: translateY(-2px);
  box-shadow: var(--p4-shadow-lg);
}

.p4-bf-ico {
  width: 36px; height: 36px; flex-shrink: 0;
  color: var(--p4-gold);
}

body.p4.night .p4-bf-ico { color: var(--p4-neon); }

.p4-bf-bubble strong {
  font-size: 1rem; color: var(--p4-text);
  display: block;
}

body.p4.night .p4-bf-bubble strong { color: var(--p4-night-text); }

.p4-bf-bubble span {
  font-size: 0.8rem; color: var(--p4-text-sub);
}

body.p4.night .p4-bf-bubble span { color: var(--p4-night-text-sub); }

/* Requirements list */
.p4-req-list { display: flex; flex-direction: column; gap: 6px; }

.p4-req-row {
  display: flex; justify-content: space-between;
  padding: 12px 16px;
  background: var(--p4-surface);
  border: 1px solid var(--p4-border);
  border-radius: var(--p4-radius-sm);
  font-size: 0.9rem;
}

body.p4.night .p4-req-row {
  background: var(--p4-night-surface);
  border-color: var(--p4-night-border);
}

.p4-req-key {
  font-family: var(--p4-font-mono);
  color: var(--p4-text-sub); font-size: 0.8rem;
}

body.p4.night .p4-req-key { color: var(--p4-night-text-sub); }

.p4-req-val {
  font-weight: 600; color: var(--p4-text);
}

body.p4.night .p4-req-val { color: var(--p4-night-text); }

/* ── §5–§6 COURSE STRUCTURE ── */
.p4-courses {
  position: relative; padding: 80px 0;
  background: var(--p4-surface);
  transition: background var(--p4-transition);
}

body.p4.night .p4-courses { background: var(--p4-night-surface); }

.p4-courses-exec {
  background: var(--p4-surface-alt);
}

body.p4.night .p4-courses-exec {
  background: radial-gradient(circle at center, #132238 0%, #0d1420 100%);
}

/* Lighter ambient gradients for night status modes in courses section to make it less dark */
body.p4.night.available-mode .p4-courses-exec {
  background: radial-gradient(circle at center, #0f3020 0%, #080d16 100%);
}

body.p4.night.busy-mode .p4-courses-exec {
  background: radial-gradient(circle at center, #3c1515 0%, #080d16 100%);
}

body.p4.night.holiday-mode .p4-courses-exec {
  background: radial-gradient(circle at center, #3c2e08 0%, #080d16 100%);
}

.p4-course-header {
  display: flex; align-items: baseline; gap: 12px;
  flex-wrap: wrap; margin-bottom: 8px !important;
}

.p4-course-code {
  font-family: var(--p4-font-mono);
  font-size: 0.8rem; color: var(--p4-text-sub);
  background: rgba(0,0,0,0.04);
  padding: 4px 10px; border-radius: 4px;
}

body.p4.night .p4-course-code {
  color: var(--p4-night-text-sub);
  background: rgba(255,255,255,0.05);
}

.p4-course-meta {
  font-size: 0.9rem; color: var(--p4-text-sub);
  margin-bottom: 24px !important; line-height: 1.6;
}

body.p4.night .p4-course-meta { color: var(--p4-night-text-sub); }

.p4-modules-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.p4-module-card {
  background: var(--p4-surface);
  border: 1px solid var(--p4-border);
  border-radius: var(--p4-radius);
  padding: 24px 22px;
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
  cursor: default;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

body.p4.night .p4-module-card {
  background: rgba(30, 41, 59, 0.45); /* lighter slate for improved visibility and contrast */
  border-color: rgba(255, 255, 255, 0.1);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

/* Custom tinted backgrounds and borders for night modes to enhance visibility and reduce darkness */
body.p4.night.available-mode .p4-module-card {
  background: rgba(20, 38, 28, 0.55);
  border-color: rgba(46, 204, 113, 0.25);
  box-shadow: 0 4px 20px rgba(46, 204, 113, 0.08);
}

body.p4.night.busy-mode .p4-module-card {
  background: rgba(38, 20, 20, 0.55);
  border-color: rgba(231, 76, 60, 0.25);
  box-shadow: 0 4px 20px rgba(231, 76, 60, 0.08);
}

body.p4.night.holiday-mode .p4-module-card {
  background: rgba(55, 45, 20, 0.75);
  border-color: rgba(255, 192, 0, 0.35);
  box-shadow: 0 4px 20px rgba(255, 192, 0, 0.12);
}

.p4-module-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--p4-shadow-lg);
  border-color: var(--p4-gold);
}

body.p4.night .p4-module-card:hover {
  border-color: var(--p4-neon);
}

.p4-module-card::before {
  content: '';
  position: absolute; top: 0; left: 0;
  width: 100%; height: 3px;
  background: linear-gradient(90deg, var(--p4-gold), transparent);
  opacity: 0; transition: opacity 0.3s;
}

body.p4.night .p4-module-card::before {
  background: linear-gradient(90deg, var(--p4-neon), transparent);
}

.p4-module-card:hover::before { opacity: 1; }

.p4-module-num {
  display: block;
  font-family: var(--p4-font-mono);
  font-size: 0.7rem; color: var(--p4-gold);
  margin-bottom: 6px !important;
}

body.p4.night .p4-module-num { color: var(--p4-neon); }

.p4-module-name {
  display: block;
  font-family: var(--p4-font-head);
  font-size: 0.95rem; font-weight: 600;
  color: var(--p4-text); line-height: 1.3;
}

body.p4.night .p4-module-name { color: var(--p4-night-text); }

/* Executive variant (Course 2) */
.p4-courses-exec .p4-module-card {
  border-left: 3px solid var(--p4-gold);
}

body.p4.night .p4-courses-exec .p4-module-card {
  border-left-color: var(--p4-neon);
}



/* ── §9 CAREER PATH: THE CORNER OFFICE (Redesigned as Flowchart) ── */
:root {
  /* Flowchart connection variables (overridden by active body modes) */
  --p4-flow-color: #f5a623;
  --p4-flow-color-alpha: rgba(245, 166, 35, 0.4);
  --p4-flow-color-dim: rgba(245, 166, 35, 0.15);
  --p4-flow-glow: 0 0 16px rgba(245, 166, 35, 0.35);
  --p4-flow-badge-bg: linear-gradient(135deg, #f5a623, #e8a317);
  --p4-flow-badge-text: #1a1a2e;
}

/* Day Mode default */
body.p4.day {
  --p4-flow-color: #f5a623;
  --p4-flow-color-alpha: rgba(245, 166, 35, 0.4);
  --p4-flow-color-dim: rgba(245, 166, 35, 0.15);
  --p4-flow-glow: 0 0 16px rgba(245, 166, 35, 0.35);
  --p4-flow-badge-bg: linear-gradient(135deg, #f5a623, #e8a317);
  --p4-flow-badge-text: #1a1a2e;

  /* CTA variables */
  --p4-cta-bg: linear-gradient(180deg, var(--p4-surface) 0%, var(--p4-surface-alt) 100%);
  --p4-cta-border: rgba(0, 0, 0, 0.06);
  --p4-cta-glow-color: rgba(245, 166, 35, 0.06);
  --p4-cta-heading: #111827;
  --p4-cta-card-bg: rgba(255, 255, 255, 0.65);
  --p4-cta-card-border: rgba(0, 0, 0, 0.08);
  --p4-cta-card-shadow: 0 10px 30px rgba(0, 0, 0, 0.04);
}

/* Night Mode overrides */
body.p4.night {
  --p4-flow-color: #4ecdc4;
  --p4-flow-color-alpha: rgba(78, 205, 196, 0.4);
  --p4-flow-color-dim: rgba(78, 205, 196, 0.15);
  --p4-flow-glow: 0 0 16px rgba(78, 205, 196, 0.35);
  --p4-flow-badge-bg: linear-gradient(135deg, #4ecdc4, #2ea89e);
  --p4-flow-badge-text: #0a1628;

  /* CTA variables */
  --p4-cta-bg: linear-gradient(180deg, var(--p4-night-surface) 0%, #080c16 100%);
  --p4-cta-border: rgba(255, 255, 255, 0.05);
  --p4-cta-glow-color: rgba(78, 205, 196, 0.06);
  --p4-cta-heading: #ffffff;
  --p4-cta-card-bg: rgba(15, 23, 42, 0.55);
  --p4-cta-card-border: rgba(255, 255, 255, 0.08);
  --p4-cta-card-shadow: 0 10px 40px rgba(0, 0, 0, 0.25);
}

/* Available Mode overrides */
body.p4.available-mode {
  --p4-flow-color: #2ecc71;
  --p4-flow-color-alpha: rgba(46, 204, 113, 0.4);
  --p4-flow-color-dim: rgba(46, 204, 113, 0.15);
  --p4-flow-glow: 0 0 16px rgba(46, 204, 113, 0.35);
  --p4-flow-badge-bg: linear-gradient(135deg, #2ecc71, #27ae60);
  --p4-flow-badge-text: #1a1a2e;
}

/* Busy Mode overrides */
body.p4.busy-mode {
  --p4-flow-color: #e74c3c;
  --p4-flow-color-alpha: rgba(231, 76, 60, 0.4);
  --p4-flow-color-dim: rgba(231, 76, 60, 0.15);
  --p4-flow-glow: 0 0 16px rgba(231, 76, 60, 0.35);
  --p4-flow-badge-bg: linear-gradient(135deg, #e74c3c, #c0392b);
  --p4-flow-badge-text: #ffffff;
}

/* Holiday Mode overrides (Vibrant Golden-Yellow Theme for Vacation / Sunshine vibes!) */
body.p4.holiday-mode {
  --p4-flow-color: #ffc000;
  --p4-flow-color-alpha: rgba(255, 192, 0, 0.4);
  --p4-flow-color-dim: rgba(255, 192, 0, 0.15);
  --p4-flow-glow: 0 0 16px rgba(255, 192, 0, 0.45);
  --p4-flow-badge-bg: linear-gradient(135deg, #ffd000, #ffb300);
  --p4-flow-badge-text: #1a1a2e;
}

.p4-career {
  position: relative; padding: 80px 0;
  background: linear-gradient(135deg, #e0f7fa 0%, #fff8e1 100%); /* soft daytime sky gradient */
  transition: background var(--p4-transition);
}

/* Lighter, brighter day status backgrounds to decorate the section */
body.p4.day.available-mode .p4-career {
  background: 
    radial-gradient(circle at 15% 25%, rgba(46, 204, 113, 0.15) 0%, transparent 45%),
    radial-gradient(circle at 85% 75%, rgba(26, 188, 156, 0.15) 0%, transparent 45%),
    radial-gradient(rgba(46, 204, 113, 0.22) 1.5px, transparent 1.5px),
    linear-gradient(135deg, #f0faf4 0%, #dbf5e7 50%, #b2ebd4 100%);
  background-size: 100% 100%, 100% 100%, 24px 24px, 100% 100%;
}
body.p4.day.busy-mode .p4-career {
  background: linear-gradient(135deg, #ffebee 0%, #fff3e0 100%);
}
body.p4.day.holiday-mode .p4-career {
  background: linear-gradient(135deg, #fffcee 0%, #fff4cc 35%, #ffe494 70%, #ffd054 100%);
}

body.p4.night .p4-career {
  background: radial-gradient(circle at center, #132238 0%, #0f172a 100%);
}

/* Lighter ambient gradients for night status modes to make the section less dark */
body.p4.night.available-mode .p4-career {
  background: radial-gradient(circle at center, #0f3020 0%, #090e1a 100%);
}

body.p4.night.busy-mode .p4-career {
  background: radial-gradient(circle at center, #3c1515 0%, #0a0712 100%);
}

body.p4.night.holiday-mode .p4-career {
  background: radial-gradient(circle at center, #3a2e0e 0%, #0e0b04 100%);
}

.p4-branch-tree {
  margin-top: 48px !important;
  position: relative;
}

.p4-branch-root {
  text-align: center;
  margin-bottom: 0 !important;
  position: relative;
  z-index: 5;
}

.p4-branch-badge {
  display: inline-block;
  padding: 12px 28px;
  border-radius: 40px;
  background: var(--p4-flow-badge-bg);
  color: var(--p4-flow-badge-text);
  font-weight: 800;
  font-size: 1rem;
  box-shadow: var(--p4-flow-glow), 0 4px 16px rgba(0, 0, 0, 0.08);
  letter-spacing: 0.5px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  transition: all var(--p4-transition);
}

.p4-branch-badge:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: var(--p4-flow-glow), 0 8px 24px rgba(0, 0, 0, 0.12);
}

/* Flowchart Connectors (Desktop) */
.p4-flowchart-connectors {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}

.p4-line-vertical-main {
  position: absolute;
  top: 46px;
  left: 50%;
  width: 3px;
  height: 44px;
  background: linear-gradient(180deg, var(--p4-flow-color), var(--p4-flow-color-alpha));
  transform: translateX(-50%);
  box-shadow: 0 0 8px var(--p4-flow-color-alpha);
}

.p4-line-horizontal-split {
  position: absolute;
  top: 90px;
  left: 25%;
  width: 50%;
  height: 3px;
  background: linear-gradient(90deg, var(--p4-flow-color-alpha) 0%, var(--p4-flow-color) 50%, var(--p4-flow-color-alpha) 100%);
  box-shadow: 0 0 8px var(--p4-flow-color-alpha);
}

.p4-line-vertical-drop {
  position: absolute;
  top: 90px;
  width: 3px;
  height: 40px;
  background: linear-gradient(180deg, var(--p4-flow-color-alpha), var(--p4-flow-color));
  box-shadow: 0 0 8px var(--p4-flow-color-alpha);
}

.p4-line-vertical-drop.drop-left {
  left: 25%;
}

.p4-line-vertical-drop.drop-right {
  right: 25%;
}

/* Pulsing Line Animation Dots (Thicker and Glowier) */
.p4-line-vertical-main .p4-line-pulse {
  position: absolute;
  width: 8px;
  height: 8px;
  left: -2.5px;
  background: #ffffff;
  border-radius: 50%;
  box-shadow: 0 0 12px #ffffff, var(--p4-flow-glow);
  animation: flow-down-main 2s infinite linear;
}

.p4-line-horizontal-split::before,
.p4-line-horizontal-split::after {
  content: '';
  position: absolute;
  width: 8px;
  height: 8px;
  top: -2.5px;
  background: #ffffff;
  border-radius: 50%;
  box-shadow: 0 0 12px #ffffff, var(--p4-flow-glow);
  opacity: 0;
}

.p4-line-horizontal-split::before {
  animation: flow-split-left 3s infinite linear;
}

.p4-line-horizontal-split::after {
  animation: flow-split-right 3s infinite linear;
}

.p4-line-vertical-drop .p4-line-pulse {
  position: absolute;
  width: 8px;
  height: 8px;
  left: -2.5px;
  background: #ffffff;
  border-radius: 50%;
  box-shadow: 0 0 12px #ffffff, var(--p4-flow-glow);
  animation: flow-down-sub 2s infinite linear;
}

@keyframes flow-down-main {
  0% { top: 0%; opacity: 0; }
  15% { opacity: 1; }
  85% { opacity: 1; }
  100% { top: 100%; opacity: 0; }
}

@keyframes flow-split-left {
  0% { left: 50%; opacity: 0; }
  15% { opacity: 1; }
  85% { opacity: 1; }
  100% { left: 0%; opacity: 0; }
}

@keyframes flow-split-right {
  0% { left: 50%; opacity: 0; }
  15% { opacity: 1; }
  85% { opacity: 1; }
  100% { left: 100%; opacity: 0; }
}

@keyframes flow-down-sub {
  0% { top: 0%; opacity: 0; }
  15% { opacity: 1; }
  85% { opacity: 1; }
  100% { top: 100%; opacity: 0; }
}

.p4-branch-arms {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  margin-top: 80px;
  position: relative;
  z-index: 2;
}

.p4-branch-arm {
  position: relative;
}

/* Category header styled box */
.p4-arm-header {
  margin-bottom: 28px;
  text-align: center;
  position: relative;
}

.p4-arm-title {
  display: inline-block;
  font-family: var(--p4-font-head);
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--p4-text);
  margin-bottom: 0;
  padding: 10px 24px;
  border-radius: var(--p4-radius-sm);
  background: rgba(255, 255, 255, 0.75);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--p4-flow-color-alpha);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.02);
  transition: all var(--p4-transition);
}

body.p4.night .p4-arm-title {
  color: var(--p4-night-text);
  background: rgba(30, 41, 59, 0.75);
  border-color: var(--p4-flow-color-dim);
}

/* Custom tints for category headers in night status modes to enhance contrast */
body.p4.night.available-mode .p4-arm-title {
  background: rgba(20, 38, 28, 0.75);
  border-color: rgba(46, 204, 113, 0.35);
  box-shadow: 0 4px 16px rgba(46, 204, 113, 0.1);
}

body.p4.night.busy-mode .p4-arm-title {
  background: rgba(38, 20, 20, 0.75);
  border-color: rgba(231, 76, 60, 0.35);
  box-shadow: 0 4px 16px rgba(231, 76, 60, 0.1);
}

body.p4.night.holiday-mode .p4-arm-title {
  background: rgba(65, 53, 23, 0.85);
  border-color: rgba(255, 192, 0, 0.45);
  box-shadow: 0 4px 16px rgba(255, 192, 0, 0.2);
}

.p4-arm-title:hover {
  transform: translateY(-1px);
  border-color: var(--p4-flow-color);
  box-shadow: var(--p4-flow-glow);
}

/* Vertical spines for leaf nodes */
.p4-leaf-container {
  position: relative;
  padding-left: 28px;
}

.p4-leaf-container::before {
  content: '';
  position: absolute;
  top: -16px;
  bottom: 32px; /* Ends at center of last leaf */
  left: 8px;
  width: 3px;
  background: linear-gradient(180deg, var(--p4-flow-color), var(--p4-flow-color-dim));
  box-shadow: 0 0 6px var(--p4-flow-color-alpha);
}

.p4-branch-leaf {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px 18px;
  background: rgba(255, 255, 255, 0.75);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(0, 0, 0, 0.05);
  border-radius: var(--p4-radius);
  margin-bottom: 12px !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.02);
}

body.p4.night .p4-branch-leaf {
  background: rgba(30, 41, 59, 0.45); /* lighter slate for improved visibility and contrast */
  border-color: rgba(255, 255, 255, 0.1);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

/* Custom tinted card backgrounds and borders for night modes to enhance visibility and reduce darkness */
body.p4.night.available-mode .p4-branch-leaf {
  background: rgba(20, 38, 28, 0.55);
  border-color: rgba(46, 204, 113, 0.25);
  box-shadow: 0 4px 20px rgba(46, 204, 113, 0.08);
}

body.p4.night.busy-mode .p4-branch-leaf {
  background: rgba(38, 20, 20, 0.55);
  border-color: rgba(231, 76, 60, 0.25);
  box-shadow: 0 4px 20px rgba(231, 76, 60, 0.08);
}

body.p4.night.holiday-mode .p4-branch-leaf {
  background: rgba(55, 45, 20, 0.75);
  border-color: rgba(255, 192, 0, 0.35);
  box-shadow: 0 4px 20px rgba(255, 192, 0, 0.12);
}

/* Horizontal connectors branching from the spine */
.p4-branch-leaf::before {
  content: '';
  position: absolute;
  top: 50%;
  left: -20px; /* connects spine at 8px to leaf at 28px */
  width: 20px;
  height: 3px;
  background: var(--p4-flow-color-alpha);
  transform: translateY(-50%);
  transition: background var(--p4-transition);
}

.p4-branch-leaf:hover::before {
  background: var(--p4-flow-color);
  box-shadow: 0 0 8px var(--p4-flow-color);
}

.p4-branch-leaf:hover {
  transform: translateX(8px) scale(1.03);
  border-color: var(--p4-flow-color);
  box-shadow: var(--p4-flow-glow), 0 0 20px var(--p4-flow-color-alpha), 0 8px 24px rgba(0, 0, 0, 0.08);
  background: rgba(255, 255, 255, 0.95);
}

/* Custom interactive hover overlay colors for Day status modes */
body.p4.day.available-mode .p4-branch-leaf:hover {
  background: rgba(232, 245, 233, 0.95);
  box-shadow: var(--p4-flow-glow), 0 8px 24px rgba(46, 204, 113, 0.2);
}
body.p4.day.busy-mode .p4-branch-leaf:hover {
  background: rgba(255, 235, 235, 0.95);
  box-shadow: var(--p4-flow-glow), 0 8px 24px rgba(231, 76, 60, 0.2);
}
body.p4.day.holiday-mode .p4-branch-leaf:hover {
  background: rgba(255, 250, 235, 0.95);
  box-shadow: var(--p4-flow-glow), 0 8px 24px rgba(255, 192, 0, 0.2);
}

body.p4.night .p4-branch-leaf:hover {
  background: rgba(15, 23, 42, 0.85);
  box-shadow: var(--p4-flow-glow), 0 8px 24px rgba(0, 0, 0, 0.25);
}

.p4-branch-leaf svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: var(--p4-flow-color);
  margin-top: 3px;
  transition: transform 0.3s ease, color var(--p4-transition);
}

.p4-branch-leaf:hover svg {
  transform: scale(1.15) rotate(5deg);
}

.p4-branch-leaf strong {
  display: block;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--p4-text);
  margin-bottom: 2px;
}

body.p4.night .p4-branch-leaf strong { color: var(--p4-night-text); }

.p4-branch-leaf span {
  font-size: 0.8rem;
  color: var(--p4-text-sub);
  display: block;
}

body.p4.night .p4-branch-leaf span { color: var(--p4-night-text-sub); }

/* responsive */
@media (max-width: 768px) {
  .p4-flowchart-connectors {
    display: none;
  }
  .p4-branch-arms {
    grid-template-columns: 1fr;
    gap: 32px;
    margin-top: 32px;
  }
  .p4-arm-title {
    width: 100%;
  }
}

/* Flowchart Graphical SVG Backgrounds based on Image 2 (Celebrating Graduates throwing caps) */
.p4-career-bg-graphic {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.p4-career-svg-day,
.p4-career-svg-night,
.p4-career-svg-busy,
.p4-career-svg-holiday {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: none;
  transition: opacity 0.5s ease;
}

/* Day Mode default visual toggles (only if not in busy or holiday modes) */
body.p4.day:not(.busy-mode):not(.holiday-mode) .p4-career-svg-day {
  display: block;
}

/* Night Mode visual toggles (only if not in busy or holiday modes) */
body.p4.night:not(.busy-mode):not(.holiday-mode) .p4-career-svg-night {
  display: block;
}

/* Busy Mode visual toggles */
body.p4.busy-mode .p4-career-svg-busy {
  display: block;
}

/* Holiday Mode visual toggles */
body.p4.holiday-mode .p4-career-svg-holiday {
  display: block;
}

/* Toggle night-only items in the busy SVG */
body.p4.day .busy-night-only {
  display: none;
}
body.p4.night .busy-night-only {
  display: block;
}

/* Toggle night-only items in the holiday SVG */
body.p4.day .holiday-night-only {
  display: none;
}
body.p4.night .holiday-night-only {
  display: block;
}

/* Toggle day-only items in the holiday SVG */
body.p4.day .holiday-day-only {
  display: block;
}
body.p4.night .holiday-day-only {
  display: none;
}

/* Brighten night holiday background graphics and ambient lighting */
body.p4.night.holiday-mode .holiday-sunburst-beam {
  fill: url(#holidaySunburstNight) !important;
}
body.p4.night.holiday-mode .p4-career-svg-holiday > path,
body.p4.night.holiday-mode .p4-career-svg-holiday > line {
  opacity: 0.3 !important;
}

/* Day highlight working path (Left Column) */
body.p4.day .day-highlight-beam {
  animation: p4BeamFade 8s infinite ease-in-out;
}

/* Night highlight Further Study (Right Column) */
body.p4.night .night-highlight-beam {
  animation: p4BeamFade 8s infinite ease-in-out;
}

@keyframes p4BeamFade {
  0%, 100% { opacity: 0.8; }
  50% { opacity: 1; }
}

/* Twinkle animation for stars in Night theme */
.p4-star-twinkle {
  animation: p4StarTwinkle 3s infinite ease-in-out;
}

@keyframes p4StarTwinkle {
  0%, 100% { opacity: 0.3; transform: scale(0.8); }
  50% { opacity: 1; transform: scale(1.2); }
}

/* Floating animations for mortarboard caps (Image 2 style) */
.day-cap-1 { animation: p4CapFloat1 7s infinite ease-in-out; }
.day-cap-2 { animation: p4CapFloat2 5.5s infinite ease-in-out 0.5s; }
.day-cap-3 { animation: p4CapFloat3 6.5s infinite ease-in-out 1s; }
.day-cap-4 { animation: p4CapFloat1 6s infinite ease-in-out 1.5s; }
.day-cap-5 { animation: p4CapFloat2 7.5s infinite ease-in-out 0.8s; }
.day-cap-6 { animation: p4CapFloat3 5.8s infinite ease-in-out 2s; }
.day-cap-7 { animation: p4CapFloat1 6.8s infinite ease-in-out 1.2s; }

/* Floating balloon animations */
.day-balloon-1 { animation: p4CapFloat2 8s infinite ease-in-out; }
.day-balloon-2 { animation: p4CapFloat3 9s infinite ease-in-out 1s; }

/* Floating animations for the busy schedule icons */
.busy-floating-1 { animation: p4CapFloat1 6.5s infinite ease-in-out; }
.busy-floating-2 { animation: p4CapFloat2 5.0s infinite ease-in-out 0.3s; }
.busy-floating-3 { animation: p4CapFloat3 6.0s infinite ease-in-out 0.6s; }
.busy-floating-4 { animation: p4CapFloat1 7.0s infinite ease-in-out 0.9s; }
.busy-floating-5 { animation: p4CapFloat2 5.5s infinite ease-in-out 1.2s; }
.busy-floating-6 { animation: p4CapFloat3 6.2s infinite ease-in-out 1.5s; }
.busy-floating-7 { animation: p4CapFloat1 5.8s infinite ease-in-out 1.8s; }

/* Animate double highlight beams in busy mode */
.busy-highlight-beam-left { animation: p4BeamFade 7s infinite ease-in-out; }
.busy-highlight-beam-right { animation: p4BeamFade 7s infinite ease-in-out 1.5s; }

/* Floating animations for the holiday break icons */
.holiday-floating-1 { animation: p4CapFloat1 7.2s infinite ease-in-out; }
.holiday-floating-2 { animation: p4CapFloat2 6.0s infinite ease-in-out 0.4s; }
.holiday-floating-3 { animation: p4CapFloat3 6.8s infinite ease-in-out 0.8s; }
.holiday-floating-4 { animation: p4CapFloat1 7.5s infinite ease-in-out 1.2s; }
.holiday-floating-5 { animation: p4CapFloat2 6.5s infinite ease-in-out 1.6s; }
.holiday-floating-6 { animation: p4CapFloat3 7.0s infinite ease-in-out 2.0s; }
.holiday-floating-7 { animation: p4CapFloat1 6.2s infinite ease-in-out 2.4s; }

/* Animate the central sunburst sunshine beam in holiday mode */
.holiday-sunburst-beam {
  animation: p4BeamFade 9s infinite ease-in-out;
  transform-origin: 50% 0%;
}

.night-cap-1 { animation: p4CapFloat1 7s infinite ease-in-out; }
.night-cap-2 { animation: p4CapFloat2 5.5s infinite ease-in-out 0.5s; }
.night-cap-3 { animation: p4CapFloat3 6.5s infinite ease-in-out 1s; }
.night-cap-4 { animation: p4CapFloat1 6s infinite ease-in-out 1.5s; }
.night-cap-5 { animation: p4CapFloat2 7.5s infinite ease-in-out 0.8s; }
.night-cap-6 { animation: p4CapFloat3 5.8s infinite ease-in-out 2s; }
.night-cap-7 { animation: p4CapFloat1 6.8s infinite ease-in-out 1.2s; }

@keyframes p4CapFloat1 {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-16px) rotate(4deg); }
}
@keyframes p4CapFloat2 {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-12px) rotate(-5deg); }
}
@keyframes p4CapFloat3 {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-20px) rotate(3deg); }
}

/* Responsive adjust for graphic backgrounds */
@media (max-width: 768px) {
  .p4-career-bg-graphic {
    opacity: 0.6; /* reduce density on mobile for readability */
  }
}


/* ── §10 CTA: THE FRONT DESK ── */
.p4-cta {
  position: relative;
  padding: 80px 24px;
  text-align: center;
  overflow: hidden;
  background: var(--p4-cta-bg);
  border-top: 1px solid var(--p4-cta-border);
  transition: background var(--p4-transition), border-color var(--p4-transition);
}

.p4-cta-glow {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: radial-gradient(ellipse at center, var(--p4-cta-glow-color) 0%, transparent 70%);
  pointer-events: none;
  transition: background var(--p4-transition);
}

/* Isometric Skyline Outline Background */
.p4-cta-skyline {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
  opacity: 0.25;
  transition: opacity var(--p4-transition);
}

.p4-cta-skyline svg {
  width: 100%;
  height: 100%;
}

.p4-cta-skyline path {
  transition: stroke var(--p4-transition);
}

/* Sweeping Spotlights / Lasers */
.p4-cta-spotlights {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.p4-cta-spotlight {
  position: absolute;
  top: -50px;
  width: 160px;
  height: 500px;
  background: linear-gradient(180deg, var(--p4-flow-color-alpha) 0%, transparent 80%);
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  filter: blur(8px);
  transform-origin: 50% 0%;
  opacity: 0.4;
  transition: background var(--p4-transition);
}

.spotlight-left {
  left: 20%;
  animation: p4CtaSpotlightLeft 12s infinite ease-in-out;
}

.spotlight-right {
  right: 20%;
  animation: p4CtaSpotlightRight 14s infinite ease-in-out;
}

@keyframes p4CtaSpotlightLeft {
  0%, 100% { transform: rotate(-25deg); opacity: 0.3; }
  50% { transform: rotate(15deg); opacity: 0.5; }
}

@keyframes p4CtaSpotlightRight {
  0%, 100% { transform: rotate(20deg); opacity: 0.5; }
  50% { transform: rotate(-20deg); opacity: 0.3; }
}

/* Morphing Liquid Blobs Background */
.p4-cta-blobs {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}

.p4-cta-blob {
  position: absolute;
  width: 320px;
  height: 320px;
  border-radius: 50%;
  background: var(--p4-flow-color-dim);
  filter: blur(80px);
  opacity: 0.25;
  transition: background var(--p4-transition);
}

.blob-1 {
  top: 10%;
  left: 10%;
  animation: p4CtaBlob1 20s infinite ease-in-out;
}

.blob-2 {
  bottom: 10%;
  right: 15%;
  animation: p4CtaBlob2 24s infinite ease-in-out;
}

@keyframes p4CtaBlob1 {
  0%, 100% { transform: translate(0, 0) scale(1); border-radius: 60% 40% 60% 40% / 50% 60% 40% 50%; }
  50% { transform: translate(50px, 30px) scale(1.15); border-radius: 40% 60% 40% 60% / 60% 40% 60% 40%; }
}

@keyframes p4CtaBlob2 {
  0%, 100% { transform: translate(0, 0) scale(1.1); border-radius: 40% 60% 50% 50% / 50% 40% 60% 50%; }
  50% { transform: translate(-60px, -40px) scale(0.9); border-radius: 60% 40% 60% 40% / 40% 60% 40% 60%; }
}

/* CTA Drifting Particles */
.p4-cta-particles {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}

.cta-part {
  position: absolute;
  font-size: 1.5rem;
  opacity: 0.15;
  filter: grayscale(0.2);
  display: none;
  transition: opacity var(--p4-transition);
}

/* Visibility rules based on active body mode */
body.p4.day:not(.busy-mode):not(.holiday-mode) .cta-balloon,
body.p4.day:not(.busy-mode):not(.holiday-mode) .cta-cap,
body.p4.available-mode .cta-balloon,
body.p4.available-mode .cta-cap {
  display: block;
}

body.p4.night .cta-star {
  display: block;
}

body.p4.busy-mode .cta-busy {
  display: block;
}

body.p4.holiday-mode .cta-holiday {
  display: block;
}

/* Floating Animations for Particles */
.cta-balloon-1 {
  left: 8%;
  bottom: -40px;
  animation: p4CtaFloatUp 8s infinite linear;
}
.cta-balloon-2 {
  right: 10%;
  bottom: -45px;
  animation: p4CtaFloatUp 10s infinite linear 2s;
}
.cta-cap-1 {
  left: 15%;
  bottom: -40px;
  animation: p4CtaFloatUpRotate 9s infinite linear 1s;
}
.cta-cap-2 {
  right: 18%;
  bottom: -40px;
  animation: p4CtaFloatUpRotate 11s infinite linear 3s;
}

.cta-star-1 {
  left: 12%;
  top: 30%;
  animation: p4CtaTwinkleFloat 6s infinite ease-in-out;
}
.cta-star-2 {
  right: 15%;
  top: 25%;
  animation: p4CtaTwinkleFloat 7s infinite ease-in-out 1.5s;
}
.cta-star-3 {
  left: 45%;
  top: 15%;
  animation: p4CtaTwinkleFloat 5s infinite ease-in-out 3s;
}

.cta-clock-1 {
  left: 10%;
  bottom: -40px;
  animation: p4CtaFloatUpRotate 9s infinite linear;
}
.cta-briefcase-1 {
  right: 12%;
  bottom: -40px;
  animation: p4CtaFloatUp 11s infinite linear 1.5s;
}
.cta-lightbulb-1 {
  left: 30%;
  bottom: -40px;
  animation: p4CtaFloatUp 8s infinite linear 2.5s;
}

.cta-luggage-1 {
  left: 10%;
  bottom: -40px;
  animation: p4CtaFloatUp 9s infinite linear;
}
.cta-drink-1 {
  right: 12%;
  bottom: -40px;
  animation: p4CtaFloatUp 10s infinite linear 2s;
}
.cta-plane-1 {
  left: 30%;
  bottom: -40px;
  animation: p4CtaFloatUpRotate 12s infinite linear 1s;
}

@keyframes p4CtaFloatUp {
  0% { transform: translateY(0); opacity: 0; }
  10% { opacity: 0.15; }
  90% { opacity: 0.15; }
  100% { transform: translateY(-450px); opacity: 0; }
}

@keyframes p4CtaFloatUpRotate {
  0% { transform: translateY(0) rotate(0deg); opacity: 0; }
  10% { opacity: 0.15; }
  90% { opacity: 0.15; }
  100% { transform: translateY(-450px) rotate(360deg); opacity: 0; }
}

@keyframes p4CtaTwinkleFloat {
  0%, 100% { transform: translateY(0) scale(0.8); opacity: 0.05; }
  50% { transform: translateY(-20px) scale(1.2); opacity: 0.25; }
}

.p4-cta-inner {
  position: relative;
  z-index: 2;
  max-width: 900px;
  margin: 0 auto;
  padding: 50px 60px !important;
  background: var(--p4-cta-card-bg);
  border: 1px solid var(--p4-cta-card-border);
  border-radius: var(--p4-radius-lg);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: var(--p4-cta-card-shadow), var(--p4-flow-glow);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.p4-cta-inner:hover {
  transform: translateY(-4px);
  box-shadow: var(--p4-cta-card-shadow), var(--p4-flow-glow);
  border-color: var(--p4-flow-color-alpha);
}

/* Interactive Corner Card Props styling */
.cta-card-prop {
  position: absolute;
  z-index: 5;
  cursor: pointer;
  color: var(--p4-flow-color-alpha);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  align-items: center;
  justify-content: center;
}

.cta-card-prop svg {
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), stroke 0.3s;
}

.cta-card-prop:hover {
  color: var(--p4-flow-color);
}

.cta-card-prop:hover svg {
  transform: scale(1.15);
}

/* 1. Graduate Cap Popper (Top-Left) */
.prop-cap {
  top: 16px;
  left: 16px;
  animation: p4PropFloatCap 4s infinite ease-in-out;
}

@keyframes p4PropFloatCap {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-4px) rotate(4deg); }
}

/* Confetti Burst logic */
.prop-burst {
  position: absolute;
  width: 100%;
  height: 100%;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

.burst-dot {
  position: absolute;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--p4-flow-color);
  opacity: 0;
  transform: translate(0, 0) scale(0);
  transition: none;
}

.prop-cap.pop-active svg {
  animation: p4CapPopHit 0.3s ease-out forwards;
}

.prop-cap.pop-active .burst-dot.d1 {
  animation: p4ConfettiBurst1 0.8s ease-out forwards;
}
.prop-cap.pop-active .burst-dot.d2 {
  animation: p4ConfettiBurst2 0.8s ease-out forwards 0.05s;
}
.prop-cap.pop-active .burst-dot.d3 {
  animation: p4ConfettiBurst3 0.8s ease-out forwards 0.1s;
}

@keyframes p4CapPopHit {
  0% { transform: scale(1) rotate(0deg); }
  50% { transform: scale(1.3) rotate(-15deg); }
  100% { transform: scale(1.15) rotate(0deg); }
}

@keyframes p4ConfettiBurst1 {
  0% { transform: translate(0, 0) scale(1); opacity: 1; }
  100% { transform: translate(-35px, -20px) scale(0.6); opacity: 0; background: #e74c3c; }
}

@keyframes p4ConfettiBurst2 {
  0% { transform: translate(0, 0) scale(1); opacity: 1; }
  100% { transform: translate(30px, -25px) scale(0.6); opacity: 0; background: #2ecc71; }
}

@keyframes p4ConfettiBurst3 {
  0% { transform: translate(0, 0) scale(1); opacity: 1; }
  100% { transform: translate(-5px, -38px) scale(0.6); opacity: 0; background: #3498db; }
}

/* 2. Open Book Page Flipper (Top-Right) */
.prop-book {
  top: 16px;
  right: 16px;
  animation: p4PropFloatBook 4.5s infinite ease-in-out 0.5s;
}

.prop-book .book-pages {
  transition: stroke-dasharray 0.5s ease-in-out;
}

.prop-book:hover .book-pages {
  stroke-dasharray: 40, 10;
}

@keyframes p4PropFloatBook {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}

/* 3. Steaming Mug (Bottom-Right) */
.prop-mug {
  bottom: 16px;
  right: 16px;
  animation: p4PropFloatMug 5s infinite ease-in-out 1s;
}

.steam-line {
  stroke-dasharray: 6;
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 0.6s linear;
  opacity: 0.3;
}

.prop-mug:hover .steam-line {
  opacity: 0.9;
  animation: p4SteamRiseCta 1.5s infinite linear;
}

.prop-mug:hover .steam-line.s1 { animation-delay: 0s; }
.prop-mug:hover .steam-line.s2 { animation-delay: 0.4s; }
.prop-mug:hover .steam-line.s3 { animation-delay: 0.8s; }

@keyframes p4PropFloatMug {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-2px); }
}

@keyframes p4SteamRiseCta {
  0% { stroke-dashoffset: 12; opacity: 0.3; }
  50% { opacity: 0.9; }
  100% { stroke-dashoffset: 0; opacity: 0; }
}

/* Responsive Hide for Card Props to prevent overlapping on small layouts */
@media (max-width: 768px) {
  .cta-card-prop {
    display: none !important;
  }
  .p4-cta-inner {
    padding: 40px 24px;
  }
}

.p4-cta-inner .p4-eyebrow {
  color: var(--p4-flow-color);
  font-family: var(--p4-font-mono);
  font-size: 0.9rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-bottom: 12px;
  display: inline-block;
  transition: color var(--p4-transition);
}

.p4-cta-h2 {
  font-family: var(--p4-font-head);
  font-size: clamp(1.6rem, 3.5vw, 2.4rem);
  font-weight: 700;
  color: var(--p4-cta-heading);
  line-height: 1.3;
  margin-bottom: 28px !important;
  transition: color var(--p4-transition);
}

.p4-cta-h2 .p4-glow {
  color: var(--p4-flow-color);
  text-shadow: var(--p4-flow-glow);
  transition: color var(--p4-transition), text-shadow var(--p4-transition);
}

.p4-cta-btns {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
}

body.p4.day .p4-cta .p4-btn-solid,
body.p4.night .p4-cta .p4-btn-solid {
  background: var(--p4-flow-color) !important;
  color: var(--p4-flow-badge-text) !important;
  box-shadow: 0 4px 16px var(--p4-flow-color-dim) !important;
  border: none !important;
}

body.p4.day .p4-cta .p4-btn-solid:hover,
body.p4.night .p4-cta .p4-btn-solid:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 24px var(--p4-flow-color-alpha), var(--p4-flow-glow) !important;
}

body.p4.day .p4-cta .p4-btn-ghost,
body.p4.night .p4-cta .p4-btn-ghost {
  color: var(--p4-cta-heading) !important;
  border-color: var(--p4-cta-card-border) !important;
  background: transparent !important;
}

body.p4.day .p4-cta .p4-btn-ghost:hover,
body.p4.night .p4-cta .p4-btn-ghost:hover {
  border-color: var(--p4-flow-color) !important;
  background: var(--p4-flow-color-dim) !important;
}

/* ── §11 PREMIUM FOOTER ── */
.p4-footer {
  position: relative;
  background: #0f172a;
  color: #fff;
  padding: 80px 0 40px;
  overflow: hidden;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  margin-top: 40px;
}

body.p4.night .p4-footer {
  background: #080c16;
  border-top: 1px solid rgba(78, 205, 196, 0.2);
}

.p4-footer-bg {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at center top, rgba(245,166,35,0.05) 0%, transparent 60%);
  pointer-events: none;
}

body.p4.night .p4-footer-bg {
  background: radial-gradient(circle at center top, rgba(78,205,196,0.05) 0%, transparent 60%);
}

.p4-wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
  position: relative;
}

.p4-footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 40px;
  position: relative;
  z-index: 2;
  margin-bottom: 60px;
}

.p4-footer-brand p {
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.9rem;
  line-height: 1.6;
  max-width: 300px;
}

.p4-footer-logo {
  height: 50px;
  margin-bottom: 20px;
  filter: brightness(0) invert(1);
}

.p4-footer-col h4 {
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--p4-gold);
  margin-bottom: 20px;
}

body.p4.night .p4-footer-col h4 { color: var(--p4-neon); }

.p4-footer-col p, .p4-footer-col ul li a {
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.9rem;
  line-height: 1.8;
  transition: color 0.3s;
}

.p4-footer-col ul li { margin-bottom: 12px; }

.p4-footer-col ul li a:hover { color: #fff; text-shadow: 0 0 8px rgba(255,255,255,0.5); }

.p4-footer-social {
  display: flex; gap: 12px; flex-wrap: wrap;
}

.p4-footer-social a img {
  width: 24px; height: 24px;
  filter: grayscale(100%) opacity(0.6);
  transition: all 0.3s ease;
}

.p4-footer-social a:hover img {
  filter: grayscale(0%) opacity(1);
  transform: scale(1.1);
}

.p4-footer-bottom {
  position: relative;
  z-index: 2;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-top: 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.4);
}

/* Day Mode Footer Color overrides */
body.p4.day .p4-footer {
  background: rgba(255, 255, 255, 0.85) !important;
  color: #334155 !important;
  border-top: 1px solid rgba(0, 0, 0, 0.08) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

body.p4.day .p4-footer-logo {
  filter: none !important; /* show native logo colors */
}

body.p4.day .p4-footer-brand p {
  color: #475569 !important;
}

body.p4.day .p4-footer-col h4 {
  color: var(--p4-flow-color) !important; /* matches the active day mode theme flow color */
  text-shadow: none !important;
}

body.p4.day .p4-footer-col p,
body.p4.day .p4-footer-col ul li a {
  color: #475569 !important;
}

body.p4.day .p4-footer-col ul li a:hover {
  color: var(--p4-flow-color) !important;
  text-shadow: none !important;
}

body.p4.day .p4-footer-social a img {
  filter: grayscale(100%) opacity(0.5) contrast(0.8) !important;
}

body.p4.day .p4-footer-social a:hover img {
  filter: grayscale(0%) opacity(1) !important;
}

body.p4.day .p4-footer-bottom {
  border-top: 1px solid rgba(0, 0, 0, 0.08) !important;
  color: #64748b !important;
}

@media (max-width: 900px) {
  .p4-footer-grid { grid-template-columns: 1fr 1fr; }

  .p4-footer-brand { grid-column: span 2; }

}

@media (max-width: 600px) {
  .p4-footer-grid { grid-template-columns: 1fr; }

  .p4-footer-brand { grid-column: span 1; }

  .p4-footer-bottom { flex-direction: column; text-align: center; justify-content: center; }

}

/* ═══════════════════════════════════════
   MODE OVERRIDES
   ═══════════════════════════════════════ */
/* ── BUSY MODE ── */




body.p4.busy-mode .p4-station-icon {
  background: linear-gradient(135deg, var(--p4-busy), var(--p4-busy-dark));
}

body.p4.busy-mode .p4-module-card:hover { border-color: var(--p4-busy); }

body.p4.busy-mode .p4-module-num { color: var(--p4-busy-light); }



body.p4.busy-mode .p4-about-prose::before {
  background: linear-gradient(180deg, var(--p4-busy), transparent);
}

body.p4.day.busy-mode {
  --p4-cta-bg: linear-gradient(180deg, #ffebee 0%, #ffd1d1 100%);
  --p4-cta-glow-color: rgba(231, 76, 60, 0.12);
  --p4-cta-card-bg: rgba(255, 255, 255, 0.75);
}

body.p4.night.busy-mode {
  --p4-cta-bg: linear-gradient(180deg, #240f0f 0%, #0d0505 100%);
  --p4-cta-glow-color: rgba(231, 76, 60, 0.08);
}



/* ── AVAILABLE MODE ── */



body.p4.available-mode .p4-station-icon {
  background: linear-gradient(135deg, var(--p4-avail), var(--p4-avail-dark));
}

body.p4.available-mode .p4-module-card:hover { border-color: var(--p4-avail); }

body.p4.available-mode .p4-module-num { color: var(--p4-avail); }



body.p4.available-mode .p4-about-prose::before {
  background: linear-gradient(180deg, var(--p4-avail), transparent);
}

body.p4.day.available-mode {
  --p4-cta-bg: linear-gradient(180deg, #f0faf4 0%, #dbf5e7 100%);
  --p4-cta-glow-color: rgba(46, 204, 113, 0.12);
  --p4-cta-card-bg: rgba(255, 255, 255, 0.75);
}

body.p4.night.available-mode {
  --p4-cta-bg: linear-gradient(180deg, #0e1a14 0%, #050a08 100%);
  --p4-cta-glow-color: rgba(46, 204, 113, 0.08);
}



/* ── HOLIDAY MODE ── */




body.p4.holiday-mode .p4-station-icon {
  background: linear-gradient(135deg, var(--p4-holiday), #c44bd9);
}

body.p4.holiday-mode .p4-module-card:hover { border-color: var(--p4-holiday); }

body.p4.holiday-mode .p4-module-num { color: var(--p4-holiday); }



body.p4.holiday-mode .p4-about-prose::before {
  background: linear-gradient(180deg, var(--p4-holiday), transparent);
}

body.p4.day.holiday-mode {
  --p4-cta-bg: linear-gradient(180deg, #fffcee 0%, #ffe494 100%);
  --p4-cta-glow-color: rgba(255, 192, 0, 0.15);
  --p4-cta-card-bg: rgba(255, 255, 255, 0.75);
}

body.p4.night.holiday-mode {
  --p4-cta-bg: linear-gradient(180deg, #231c05 0%, #0e0b04 100%);
  --p4-cta-glow-color: rgba(255, 192, 0, 0.08);
}



/* ═══════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════ */
@media (max-width: 768px) {
  .p4-hero-wrap { flex-direction: column; padding: 0 20px; text-align: center; }

  .p4-hero-left { max-width: 100%; }

  .p4-hero-pills { justify-content: center; }

  .p4-hero-btns { justify-content: center; }

  .p4-benefits-split { grid-template-columns: 1fr; }

  .p4-branch-arms { grid-template-columns: 1fr; }

  .p4-modules-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }



  .p4-dock { padding: 6px; }

  .p4-dock-btn { padding: 6px 10px; font-size: 0.65rem; }

  .p4-station-grid { grid-template-columns: repeat(2, 1fr); }

}

@media (max-width: 480px) {
  .p4-station-grid { grid-template-columns: 1fr; }



  .p4-modules-grid { grid-template-columns: 1fr; }

  .p4-hero { padding-top: 80px; }

}

/* ══════════════════════════════════════════════
   DAY/NIGHT TRANSITION OVERLAYS
   Day = Sunrise Rays (golden fan burst)
   Night = Diagonal Wipe (teal panels)
   ══════════════════════════════════════════════ */
.p4-time-transition {
  position: absolute;
  top: 0; left: 0;
  width: 100vw; height: 100vh;
  z-index: 99999;
  pointer-events: none;
  overflow: hidden;
  opacity: 0;
  will-change: opacity;
}

.p4-time-panel {
  position: absolute;
  width: 100%; height: 100%;
  top: 0; left: 0;
  opacity: 0;
  will-change: transform, opacity;
}

.p4-time-label {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%) scale(0);
  font-family: var(--p4-font-mono);
  font-size: 2.2rem;
  font-weight: 800;
  letter-spacing: 8px;
  text-transform: uppercase;
  z-index: 10;
  opacity: 0;
  white-space: nowrap;
  text-shadow: 0 0 40px currentColor;
}

/* ── DAY: Sunrise Ray Burst ──
   4 golden wedge-rays fan out from center then retract */
.p4-time-transition.play-day {
  opacity: 1;
  animation: p4TimeFadeOut 1.4s ease forwards;
}

.p4-time-transition.play-day .p4-time-panel {
  background: linear-gradient(180deg, rgba(255, 215, 0, 0.95), rgba(245, 166, 35, 0.9));
}

.p4-time-transition.play-day .p4-time-panel-1 {
  clip-path: polygon(50% 50%, 0 0, 50% 0, 100% 0);
  animation: p4SunRay 1.2s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.p4-time-transition.play-day .p4-time-panel-2 {
  clip-path: polygon(50% 50%, 100% 0, 100% 50%, 100% 100%);
  animation: p4SunRay 1.2s cubic-bezier(0.4, 0, 0.2, 1) 0.08s forwards;
}

.p4-time-transition.play-day .p4-time-panel-3 {
  clip-path: polygon(50% 50%, 100% 100%, 50% 100%, 0 100%);
  animation: p4SunRay 1.2s cubic-bezier(0.4, 0, 0.2, 1) 0.16s forwards;
}

.p4-time-transition.play-day .p4-time-panel-4 {
  clip-path: polygon(50% 50%, 0 100%, 0 50%, 0 0);
  animation: p4SunRay 1.2s cubic-bezier(0.4, 0, 0.2, 1) 0.24s forwards;
}

.p4-time-transition.play-day .p4-time-label {
  color: #1a1a2e;
  animation: p4TimeLabelPop 1.2s ease 0.1s forwards;
}

@keyframes p4SunRay {
  0% { opacity: 0; transform: scale(0.3) rotate(-15deg); }

  25% { opacity: 1; transform: scale(1) rotate(0deg); }

  55% { opacity: 1; transform: scale(1) rotate(0deg); }

  100% { opacity: 0; transform: scale(1.1) rotate(5deg); }

}

/* ── NIGHT: Diagonal Wipe ──
   4 teal panels slide in diagonally then dissolve */
.p4-time-transition.play-night {
  opacity: 1;
  animation: p4TimeFadeOut 1.4s ease forwards;
}

.p4-time-transition.play-night .p4-time-panel {
  background: linear-gradient(135deg, rgba(10, 22, 40, 0.98), rgba(15, 23, 42, 0.95));
  border: 1px solid rgba(78, 205, 196, 0.3);
}

.p4-time-transition.play-night .p4-time-panel-1 {
  width: 50%; height: 50%; top: 0; left: 0;
  animation: p4DiagSlide1 1.2s cubic-bezier(0.5, 0, 0.3, 1) forwards;
}

.p4-time-transition.play-night .p4-time-panel-2 {
  width: 50%; height: 50%; top: 0; left: 50%;
  animation: p4DiagSlide2 1.2s cubic-bezier(0.5, 0, 0.3, 1) 0.1s forwards;
}

.p4-time-transition.play-night .p4-time-panel-3 {
  width: 50%; height: 50%; top: 50%; left: 0;
  animation: p4DiagSlide3 1.2s cubic-bezier(0.5, 0, 0.3, 1) 0.15s forwards;
}

.p4-time-transition.play-night .p4-time-panel-4 {
  width: 50%; height: 50%; top: 50%; left: 50%;
  animation: p4DiagSlide4 1.2s cubic-bezier(0.5, 0, 0.3, 1) 0.2s forwards;
}

.p4-time-transition.play-night .p4-time-label {
  color: var(--p4-neon);
  animation: p4TimeLabelPop 1.2s ease 0.15s forwards;
}

@keyframes p4DiagSlide1 {
  0% { transform: translate(-100%, -100%) skewX(-5deg); opacity: 0; }

  20% { transform: translate(0, 0) skewX(0deg); opacity: 1; }

  60% { transform: translate(0, 0); opacity: 1; }

  100% { transform: translate(-100%, -100%); opacity: 0; }

}

@keyframes p4DiagSlide2 {
  0% { transform: translate(100%, -100%) skewX(5deg); opacity: 0; }

  25% { transform: translate(0, 0) skewX(0deg); opacity: 1; }

  60% { transform: translate(0, 0); opacity: 1; }

  100% { transform: translate(100%, -100%); opacity: 0; }

}

@keyframes p4DiagSlide3 {
  0% { transform: translate(-100%, 100%) skewX(5deg); opacity: 0; }

  25% { transform: translate(0, 0) skewX(0deg); opacity: 1; }

  60% { transform: translate(0, 0); opacity: 1; }

  100% { transform: translate(-100%, 100%); opacity: 0; }

}

@keyframes p4DiagSlide4 {
  0% { transform: translate(100%, 100%) skewX(-5deg); opacity: 0; }

  30% { transform: translate(0, 0) skewX(0deg); opacity: 1; }

  60% { transform: translate(0, 0); opacity: 1; }

  100% { transform: translate(100%, 100%); opacity: 0; }

}

/* ── Shared Time Animations ── */
@keyframes p4TimeLabelPop {
  0% { transform: translate(-50%, -50%) scale(0); opacity: 0; }

  25% { transform: translate(-50%, -50%) scale(1.2); opacity: 1; }

  50% { transform: translate(-50%, -50%) scale(1); opacity: 1; }

  75% { opacity: 0.8; }

  100% { transform: translate(-50%, -50%) scale(0.85); opacity: 0; }

}

@keyframes p4TimeFadeOut {
  0% { opacity: 1; }

  80% { opacity: 1; }

  100% { opacity: 0; }

}

/* ══════════════════════════════════════════════
   STATUS MODE TRANSITION OVERLAYS
   Available = horizontal shutters (green)
   Busy = glitch screen tear (red)
   Holiday = golden curtain drop
   ══════════════════════════════════════════════ */
.p4-status-transition {
  position: absolute;
  top: 0; left: 0;
  width: 100vw; height: 100vh;
  z-index: 99998;
  pointer-events: none;
  overflow: hidden;
  opacity: 0;
}

.p4-status-panel {
  position: absolute;
  width: 100%; height: 33.34%;
  left: 0;
  transform: scaleX(0);
  will-change: transform, opacity;
}

.p4-status-panel-1 { top: 0; transform-origin: left center; }

.p4-status-panel-2 { top: 33.33%; transform-origin: right center; }

.p4-status-panel-3 { top: 66.66%; transform-origin: left center; }

.p4-status-label {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%) scale(0);
  font-family: var(--p4-font-mono);
  font-size: 2rem;
  font-weight: 800;
  letter-spacing: 6px;
  text-transform: uppercase;
  z-index: 10;
  opacity: 0;
  white-space: nowrap;
  text-shadow: 0 0 30px currentColor;
}

/* ── AVAILABLE: Shutters ── */
.p4-status-transition.play-available {
  opacity: 1;
  animation: p4StatusFadeOut 1s ease forwards;
}

.p4-status-transition.play-available .p4-status-panel {
  background: linear-gradient(180deg, rgba(46, 204, 113, 0.95), rgba(85, 239, 196, 0.9));
  backdrop-filter: blur(4px);
}

.p4-status-transition.play-available .p4-status-panel-1 {
  animation: p4ShutterIn 0.9s cubic-bezier(0.7, 0, 0.3, 1) forwards;
}

.p4-status-transition.play-available .p4-status-panel-2 {
  animation: p4ShutterIn 0.9s cubic-bezier(0.7, 0, 0.3, 1) 0.08s forwards;
}

.p4-status-transition.play-available .p4-status-panel-3 {
  animation: p4ShutterIn 0.9s cubic-bezier(0.7, 0, 0.3, 1) 0.16s forwards;
}

.p4-status-transition.play-available .p4-status-label {
  color: #fff;
  animation: p4LabelPop 0.9s ease 0.15s forwards;
}

@keyframes p4ShutterIn {
  0% { transform: scaleX(0); }

  40% { transform: scaleX(1); }

  60% { transform: scaleX(1); }

  100% { transform: scaleX(0); }

}

/* ── BUSY: Glitch Tear ── */
.p4-status-transition.play-busy {
  opacity: 1;
  animation: p4StatusFadeOut 0.8s ease forwards;
}

.p4-status-transition.play-busy .p4-status-panel {
  background: linear-gradient(180deg, rgba(231, 76, 60, 0.95), rgba(255, 107, 107, 0.9));
  height: 100%;
}

.p4-status-transition.play-busy .p4-status-panel-1 {
  animation: p4GlitchTear1 0.8s steps(8) forwards;
  clip-path: inset(0 0 60% 0);
}

.p4-status-transition.play-busy .p4-status-panel-2 {
  animation: p4GlitchTear2 0.8s steps(6) forwards;
  clip-path: inset(35% 0 25% 0);
}

.p4-status-transition.play-busy .p4-status-panel-3 {
  animation: p4GlitchTear3 0.8s steps(10) forwards;
  clip-path: inset(65% 0 0 0);
}

.p4-status-transition.play-busy .p4-status-label {
  color: #fff;
  animation: p4LabelGlitch 0.8s steps(4) 0.1s forwards;
}

@keyframes p4GlitchTear1 {
  0% { transform: scaleX(0) translateX(-100%); opacity: 0; }

  15% { transform: scaleX(1) translateX(8px); opacity: 1; }

  30% { transform: scaleX(1) translateX(-5px); }

  50% { transform: scaleX(1) translateX(3px); }

  70% { transform: scaleX(1) translateX(0); }

  100% { transform: scaleX(1) translateX(0); opacity: 0; }

}

@keyframes p4GlitchTear2 {
  0% { transform: scaleX(0) translateX(100%); opacity: 0; }

  20% { transform: scaleX(1) translateX(-10px); opacity: 1; }

  40% { transform: scaleX(1) translateX(6px); }

  60% { transform: scaleX(1) translateX(-3px); }

  100% { transform: scaleX(1) translateX(0); opacity: 0; }

}

@keyframes p4GlitchTear3 {
  0% { transform: scaleX(0) translateX(-80%); opacity: 0; }

  25% { transform: scaleX(1) translateX(12px); opacity: 1; }

  45% { transform: scaleX(1) translateX(-8px); }

  65% { transform: scaleX(1) translateX(2px); }

  100% { transform: scaleX(1) translateX(0); opacity: 0; }

}

@keyframes p4LabelGlitch {
  0% { transform: translate(-50%, -50%) scale(0) skewX(20deg); opacity: 0; }

  25% { transform: translate(-48%, -52%) scale(1.2) skewX(-10deg); opacity: 1; }

  50% { transform: translate(-52%, -48%) scale(1) skewX(5deg); opacity: 0.8; }

  75% { transform: translate(-50%, -50%) scale(1.1) skewX(-3deg); opacity: 1; }

  100% { transform: translate(-50%, -50%) scale(1) skewX(0); opacity: 0; }

}

/* ── HOLIDAY: Golden Curtain ── */
.p4-status-transition.play-holiday {
  opacity: 1;
  animation: p4StatusFadeOut 1.2s ease forwards;
}

.p4-status-transition.play-holiday .p4-status-panel {
  background: linear-gradient(135deg, rgba(245, 166, 35, 0.95), rgba(255, 215, 0, 0.9), rgba(255, 140, 66, 0.95));
  height: 100%; width: 33.34%;
  top: 0;
}

.p4-status-transition.play-holiday .p4-status-panel-1 {
  left: 0;
  animation: p4CurtainDrop 1.1s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  transform: scaleY(0); transform-origin: top center;
}

.p4-status-transition.play-holiday .p4-status-panel-2 {
  left: 33.33%;
  animation: p4CurtainDrop 1.1s cubic-bezier(0.4, 0, 0.2, 1) 0.12s forwards;
  transform: scaleY(0); transform-origin: top center;
}

.p4-status-transition.play-holiday .p4-status-panel-3 {
  left: 66.66%;
  animation: p4CurtainDrop 1.1s cubic-bezier(0.4, 0, 0.2, 1) 0.24s forwards;
  transform: scaleY(0); transform-origin: top center;
}

.p4-status-transition.play-holiday .p4-status-label {
  color: #1a1a2e;
  animation: p4LabelPop 1.1s ease 0.2s forwards;
}

@keyframes p4CurtainDrop {
  0% { transform: scaleY(0); }

  35% { transform: scaleY(1); }

  65% { transform: scaleY(1); }

  100% { transform: scaleY(0); transform-origin: bottom center; }

}

/* ── Shared ── */
@keyframes p4LabelPop {
  0% { transform: translate(-50%, -50%) scale(0); opacity: 0; }

  30% { transform: translate(-50%, -50%) scale(1.15); opacity: 1; }

  50% { transform: translate(-50%, -50%) scale(1); opacity: 1; }

  70% { opacity: 1; }

  100% { transform: translate(-50%, -50%) scale(0.9); opacity: 0; }

}

@keyframes p4StatusFadeOut {
  0% { opacity: 1; }

  85% { opacity: 1; }

  100% { opacity: 0; }

}

/* ============================================== */
/* 🌴 THE MASSIVE HOLIDAY MODE ADDITION           */
/* ============================================== */
/* Visibility Control */
.p4-rm-holiday-only {
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--p4-transition);
}

body.p4.day.holiday-mode .p4-rm-holiday-only,
body.p4.night.holiday-mode .p4-rm-holiday-only {
  opacity: 1;
  pointer-events: auto !important;
}

/* Common Interactive Class */
.p4-holiday-interactive { cursor: pointer; transition: filter 0.3s ease; }

.p4-holiday-interactive:hover { filter: drop-shadow(0 0 8px rgba(255,255,255,0.4)); }

/* 1. Tumbleweed */
@keyframes p4TumbleRoll {
  0% { transform: translate(1200px, 450px) rotate(0deg); }

  100% { transform: translate(-100px, 450px) rotate(-720deg); }

}

.p4-hol-tumbleweed { animation: p4TumbleRoll 15s infinite linear; transform-origin: 0 0; opacity: 1 !important; }


/* 2. Cobwebs */
.p4-hol-cobweb.p4-web-sweep { animation: p4SweepAway 0.5s forwards; }

@keyframes p4SweepAway { 100% { opacity: 0; transform: scale(0.5); } }

/* 3. Dust Motes */
@keyframes p4DustFloat {
  0%, 100% { transform: translateY(0) translateX(0); opacity: 0.2; }

  50% { transform: translateY(-20px) translateX(10px); opacity: 0.6; }

}

body.p4.holiday-mode .p4-dust-1 { animation: p4DustFloat 4s infinite ease-in-out; }

body.p4.holiday-mode .p4-dust-2 { animation: p4DustFloat 5s infinite ease-in-out 1s; }

body.p4.holiday-mode .p4-dust-3 { animation: p4DustFloat 6s infinite ease-in-out 2s; }

body.p4.holiday-mode .p4-dust-4 { animation: p4DustFloat 4.5s infinite ease-in-out 1.5s; }

/* 4. Forgotten Coffee */
@keyframes p4MoldWiggle { 0%,100% { transform: skewX(0deg); } 50% { transform: skewX(10deg); } }


@keyframes p4CoffeeSteamFloat { 0% { transform: translateY(0); opacity: 0.8; } 100% { transform: translateY(-15px); opacity: 0; } }

.p4-coffee-steam { animation: p4CoffeeSteamFloat 2s infinite linear; }

.p4-hol-coffee:hover { filter: drop-shadow(0 0 10px #84CC16); }

.p4-hol-coffee.p4-coffee-trash { animation: p4TossCoffee 1s forwards; }

@keyframes p4TossCoffee { 100% { transform: translate(-200px, -200px) rotate(-360deg) scale(0); opacity: 0; } }

/* 5. Unanswered Phone */
@keyframes p4PhoneRing {
  0%, 10%, 100% { transform: translate(580px, 430px) rotate(0deg); }

  2%, 6% { transform: translate(582px, 430px) rotate(5deg); }

  4%, 8% { transform: translate(578px, 430px) rotate(-5deg); }

}

.p4-hol-phone { animation: p4PhoneRing 3s infinite; }

@keyframes p4RingPulse { 0%, 100% { opacity: 0; transform: scale(0.8); } 50% { opacity: 1; transform: scale(1.2); } }

body.p4.holiday-mode .p4-phone-ring-1 { animation: p4RingPulse 1s infinite alternate; }

body.p4.holiday-mode .p4-phone-ring-2 { animation: p4RingPulse 1s infinite alternate 0.5s; }

.p4-hol-phone.p4-phone-answer { animation: none; }

.p4-hol-phone.p4-phone-answer .p4-phone-ring-1, .p4-hol-phone.p4-phone-answer .p4-phone-ring-2 { display: none; }

.p4-hol-phone.p4-phone-answer .p4-phone-missed { opacity: 1 !important; }

/* 6. Overgrown Plant */
.p4-overgrown-leaf { transform-origin: 10px 150px; }

@keyframes p4PlantSway {
  0%, 100% { transform: rotate(0deg) skewX(0deg); }

  50% { transform: rotate(5deg) skewX(-2deg); }

}

body.p4.holiday-mode .p4-hol-plant .p4-overgrown-leaf { 
  animation: p4PlantSway 4s ease-in-out infinite; 
}

body.p4.holiday-mode .p4-hol-plant .p4-overgrown-leaf:nth-child(1) { animation-delay: 0s; }

body.p4.holiday-mode .p4-hol-plant .p4-overgrown-leaf:nth-child(2) { animation-delay: -1.5s; animation-duration: 5s; }

body.p4.holiday-mode .p4-hol-plant .p4-overgrown-leaf:nth-child(3) { animation-delay: -3s; animation-duration: 4.5s; }

/* 7. MC Airplane */
.p4-hol-mc:hover { filter: drop-shadow(0 0 5px #EF4444); }

.p4-hol-mc.p4-mc-fly .p4-mc-plane { opacity: 1; animation: p4PlaneFly 2s forwards ease-in; }

@keyframes p4PlaneFly {
  0% { transform: translate(0,0) rotate(0deg); opacity: 1; }

  100% { transform: translate(400px, -300px) rotate(45deg); opacity: 0; }

}

/* 8. Emergency Beacon */
@keyframes p4BeaconRotate { 0% { transform: scaleX(1); opacity: 0.8;} 50% { transform: scaleX(-1); opacity: 0.2; } 100% { transform: scaleX(1); opacity: 0.8;} }

body.p4.holiday-mode .p4-beacon-light { animation: p4BeaconRotate 1s infinite linear; }

.p4-hol-beacon.p4-beacon-alarm .p4-beacon-light { opacity: 1 !important; animation: p4BeaconRotate 0.2s infinite linear; filter: drop-shadow(0 0 20px #EF4444); fill: #EF4444; }

/* 9. Hologram O.O.O. */
@keyframes p4HoloFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

body.p4.holiday-mode .p4-hol-hologram { animation: p4HoloFloat 3s infinite ease-in-out; }

.p4-hol-hologram.p4-holo-cycle .p4-holo-text { animation: p4HoloCycle 3s forwards; }

@keyframes p4HoloCycle { 
  0% { opacity: 1; } 

  25% { opacity: 0; } 

  50% { opacity: 1; content: "ANNUAL LEAVE"; } 

  75% { opacity: 0; } 

  100% { opacity: 1; } 

}

/* 10. Gone Fishing */
@keyframes p4SignSwing { 
  0%, 100% { transform: rotate(0deg); } 

  25% { transform: rotate(2deg); }

  75% { transform: rotate(-2deg); } 

}

.p4-hol-fishing { 
  transform-origin: center top; 
  animation: p4SignSwing 4s infinite ease-in-out;
  opacity: 1 !important; 
  filter: drop-shadow(0 4px 6px rgba(0,0,0,0.5));
}

/* 11. Beach Ball */
.p4-hol-beachball { transition: transform 0.3s; }

.p4-hol-beachball:hover { transform: translate(500px, 470px) rotate(15deg); }

.p4-hol-beachball.p4-beachball-kick { animation: p4BallKick 2s forwards cubic-bezier(0.25, 1, 0.5, 1); }

@keyframes p4BallKick {
  0% { transform: translate(500px, 480px) rotate(0deg); }

  50% { transform: translate(800px, 200px) rotate(360deg); }

  100% { transform: translate(1100px, 480px) rotate(720deg); }

}

/* 12. Suitcase */
.p4-hol-suitcase { transition: transform 0.3s; }

.p4-hol-suitcase:hover { transform: translate(80px, 445px) rotate(-2deg); }

body.p4.day.holiday-mode .p4-hol-suitcase:hover:not(.active) { transform: scale(1.8) rotate(-2deg); }

.p4-hol-suitcase .p4-suit-shirt, .p4-hol-suitcase .p4-suit-glass { 
  opacity: 0; 
  transform: translateY(30px) scale(0.5) rotate(-10deg); 
  transition: transform 0.4s ease-in, opacity 0.4s ease-in; 
}

.p4-hol-suitcase.p4-suitcase-open .p4-suit-shirt { 
  opacity: 1 !important; 
  transform: translateY(-15px) scale(1.2) rotate(5deg);
  transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.6s ease-out; 
}

.p4-hol-suitcase.p4-suitcase-open .p4-suit-glass { 
  opacity: 1 !important; 
  transform: translateY(-15px) scale(1.2) rotate(5deg);
  transition: transform 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) 0.1s, opacity 0.6s ease-out 0.1s; 
}

/* 13. Wall Postcards */
@keyframes p4PostcardFlutter {
  0%, 100% { transform: rotate(0deg); }

  50% { transform: rotate(2deg); }

}

body.p4.holiday-mode .p4-postcards-inner {
  animation: p4PostcardFlutter 4s infinite ease-in-out;
  transform-origin: top center;
}

.p4-hol-postcards rect { transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.3s; transform-origin: center; }

.p4-hol-postcards:hover rect { filter: drop-shadow(0 0 5px rgba(0,0,0,0.5)); }

.p4-hol-postcards.p4-postcards-zoom .p4-card-1 { transform: scale(1.5) translate(-10px, -10px) rotate(-15deg) !important; }

.p4-hol-postcards.p4-postcards-zoom .p4-card-2 { transform: scale(1.5) translate(15px, -5px) rotate(15deg) !important; }

.p4-hol-postcards.p4-postcards-zoom .p4-card-3 { transform: scale(1.5) translate(0px, 15px) rotate(0deg) !important; }

/* 14. Bunting Flags */
@keyframes p4FlagFlutter { 0%, 100% { transform: skewX(0deg); } 50% { transform: skewX(15deg); } }

.p4-hol-bunting polygon { transform-origin: top left; }

.p4-hol-bunting:hover polygon { animation: p4FlagFlutter 0.5s infinite alternate; }

/* 15. Souvenir Box */
.p4-hol-souvenir.p4-souvenir-sparkle .p4-souvenir-star { opacity: 1; animation: p4StarSparkle 0.5s infinite alternate; }

@keyframes p4StarSparkle { 0% { transform: scale(0.5); opacity: 0.5; } 100% { transform: scale(1.5); opacity: 1; filter: drop-shadow(0 0 5px #FCD34D); } }

/* 16. Sleeping Coffee Machine (Zzz) */
@keyframes p4ZzzFloat { 0% { transform: translateY(0) scale(0.8); opacity: 0; } 50% { opacity: 1; } 100% { transform: translateY(-20px) scale(1.2); opacity: 0; } }

body.p4.holiday-mode .p4-zzz-1 { animation: p4ZzzFloat 2s infinite linear; }

body.p4.holiday-mode .p4-zzz-2 { animation: p4ZzzFloat 2s infinite linear 0.6s; }

body.p4.holiday-mode .p4-zzz-3 { animation: p4ZzzFloat 2s infinite linear 1.2s; }

.p4-hol-zzz.p4-coffee-grunt text { animation: none; opacity: 0; }

.p4-hol-zzz.p4-coffee-grunt .p4-sad-drop { opacity: 1; animation: p4DropFall 1s forwards; }

@keyframes p4DropFall { 0% { transform: translateY(0); } 100% { transform: translateY(50px); opacity: 0; } }

/* 17. Desk Fan */
@keyframes p4FanOscillate { 0%, 100% { transform: scaleX(1); } 50% { transform: scaleX(-1); } }

@keyframes p4FanSpin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

body.p4.holiday-mode .p4-hol-fan { animation: p4FanOscillate 4s infinite ease-in-out; transform-origin: 0 15px; }

body.p4.holiday-mode .p4-fan-blade-grp { animation: p4FanSpin 0.2s infinite linear; transform-origin: 0 -5px; }

.p4-hol-fan.p4-fan-off, .p4-hol-fan.p4-fan-off .p4-fan-blade-grp { animation: none !important; }

/* 18. IT Maintenance Bot */
@keyframes p4BotHover { 0%, 100% { transform: translate(630px, 150px); } 50% { transform: translate(630px, 140px); } }

body.p4.holiday-mode .p4-hol-itbot { animation: p4BotHover 3s infinite ease-in-out; }

.p4-hol-itbot.p4-bot-scan .p4-bot-beam { opacity: 1; animation: p4BeamScan 2s forwards; }

.p4-hol-itbot.p4-bot-scan .p4-bot-eye { fill: #22C55E; }

@keyframes p4BeamScan { 0%, 100% { transform: skewX(0deg); } 25% { transform: skewX(20deg); } 75% { transform: skewX(-20deg); } }

/* 19. Screensavers */
body.p4.holiday-mode .p4-rm-tv-chart-group { display: none; }

body.p4.holiday-mode .p4-rm-tv-screen { fill: #0F172A; }

/* 20. Roaming Cat */
@keyframes p4CatRoam {
  0% { transform: translate(450px, 450px) scaleX(-1); }

  45% { transform: translate(50px, 450px) scaleX(-1); }

  50% { transform: translate(50px, 450px) scaleX(1); }

  95% { transform: translate(450px, 450px) scaleX(1); }

  100% { transform: translate(450px, 450px) scaleX(-1); }

}

@keyframes p4CatWalkBop { 
  0%, 100% { transform: translateY(0); } 

  50% { transform: translateY(-2px); } 

}

body.p4.holiday-mode .p4-hol-cat { 
  animation: p4CatRoam 10s infinite linear; 
}

body.p4.holiday-mode .p4-cat-body { 
  animation: p4CatWalkBop 0.3s infinite linear; 
}

body.p4.holiday-mode .p4-cat-tail { 
  animation: p4CatWalkBop 0.4s infinite alternate; 
}

/* Hide specific elements in Night Holiday Mode */
body.p4.night.holiday-mode .p4-hol-postcards, 
body.p4.night.holiday-mode .p4-hol-tumbleweed,
body.p4.night.holiday-mode .p4-hol-phone {
  display: none !important;
}

/* 14. Night Holiday Party Additions */
.p4-night-party-group { display: none; }

body.p4.night.holiday-mode .p4-night-party-group { display: block; }

@keyframes p4NeonFlicker {
  0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% { opacity: 1; }

  20%, 24%, 55% { opacity: 0.5; }

  22% { opacity: 0.2; }

}

.p4-neon-text-glow, .p4-neon-border-glow { animation: p4NeonFlicker 4s infinite; }

@keyframes p4DiscoRotate {
  0% { transform: rotate(0deg); }

  100% { transform: rotate(360deg); }

}

.p4-disco-beams { animation: p4DiscoRotate 10s linear infinite; transform-origin: 0 60px; }

@keyframes p4BalloonSway {
  0%, 100% { transform: rotate(-5deg) translateY(0); }

  50% { transform: rotate(5deg) translateY(-10px); }

}

.p4-b1 { animation: p4BalloonSway 4s ease-in-out infinite; transform-origin: -15px -40px; }

.p4-b2 { animation: p4BalloonSway 5s ease-in-out infinite; transform-origin: 15px -35px; }

@keyframes p4ConfettiFall {
  0% { transform: translateY(-50px) rotate(0deg); opacity: 0; }

  10% { opacity: 1; }

  100% { transform: translateY(150px) rotate(360deg); opacity: 0; }

}

.p4-party-confetti { transform: translate(350px, 50px); }

.p4-confetti { animation: p4ConfettiFall 3s linear infinite; }

.p4-c1 { animation-delay: 0s; }

.p4-c2 { animation-delay: 0.6s; animation-duration: 4s; }

.p4-c3 { animation-delay: 1.2s; animation-duration: 3.5s; }

.p4-c4 { animation-delay: 1.8s; animation-duration: 4.5s; }

.p4-c5 { animation-delay: 2.4s; animation-duration: 3s; }

/* Pinata Hit Interaction */
@keyframes p4PinataSwing {
  0%, 100% { transform: rotate(0deg); }

  10% { transform: rotate(15deg); }

  30% { transform: rotate(-10deg); }

  50% { transform: rotate(5deg); }

  70% { transform: rotate(-2deg); }

}

@keyframes p4CandyDrop {
  0% { transform: translateY(0); opacity: 0; }

  10% { opacity: 1; }

  50% { transform: translateY(80px); opacity: 1; }

  100% { transform: translateY(80px); opacity: 0; }

}

.p4-party-pinata { transform-origin: 0 0; }

.p4-party-pinata.p4-pinata-hit .p4-pinata-body { animation: p4PinataSwing 2s ease-out forwards; transform-origin: 0 0; }

.p4-party-pinata.p4-pinata-hit .p4-pinata-candy { animation: p4CandyDrop 2.5s ease-out forwards; }

/* Balloon Pop Interaction */
@keyframes p4BalloonPopAnim {
  0% { transform: scale(1); opacity: 1; }

  10% { transform: scale(1.2); opacity: 1; }

  15% { transform: scale(0); opacity: 0; }

  90% { transform: scale(0); opacity: 0; }

  100% { transform: scale(1); opacity: 1; }

}

.p4-party-extra-balloons.p4-balloon-pop .p4-bg1,
.p4-party-extra-balloons.p4-balloon-pop .p4-bg2 {
  animation: p4BalloonPopAnim 3s forwards;
}

.p4-party-extra-balloons.p4-balloon-pop .p4-bg2 { animation-delay: 0.15s; }

/* Fix Interactive Background Elements */
.p4-holiday-interactive {
  pointer-events: auto !important;
  cursor: pointer !important;
}

/* Brighter Aesthetics in Night Holiday Mode Only */
body.p4.night.holiday-mode .p4-overview-bg {
  opacity: 0.9 !important;
  filter: saturate(1.3) drop-shadow(0 0 20px rgba(78, 205, 196, 0.2)) !important;
}

body.p4.night.holiday-mode .p4-rm-wall { fill: #1f2e3d !important; }

body.p4.night.holiday-mode .p4-rm-floor { fill: #18222b !important; }


body.p4.night.holiday-mode .p4-neon-sign { filter: drop-shadow(0 0 20px #00ffcc) brightness(1.35) !important; }

/* Interactive 9: Big Decorative Floor Lamp */
.p4-night-lamp {
  position: absolute; bottom: 8%; left: 5%;
  width: 120px; height: 520px;
  z-index: 2; cursor: pointer; pointer-events: auto;
}

.p4-nlamp-shade {
  position: absolute; top: 0; left: 10px; width: 100px; height: 80px;
  background: linear-gradient(180deg, #f5e6c8, #d4a76a);
  clip-path: polygon(15% 0%, 85% 0%, 100% 100%, 0% 100%);
  border-bottom: 6px solid #b48545;
  box-shadow: 0 10px 30px rgba(255,200,100,0.5);
  transition: background 0.3s, box-shadow 0.3s;
  z-index: 2;
}

.p4-nlamp-bulb {
  position: absolute; top: 60px; left: 44px; width: 32px; height: 32px;
  background: #fff; border-radius: 50%;
  box-shadow: 0 0 20px #fff, 0 0 40px #ffcc00;
  z-index: 1; transition: opacity 0.3s;
}

.p4-nlamp-chain {
  position: absolute; top: 80px; left: 70px; width: 4px; height: 50px;
  background: repeating-linear-gradient(180deg, #b8860b 0px, #b8860b 4px, #daa520 4px, #daa520 8px);
  z-index: 0; transition: transform 0.1s;
}

.p4-nlamp-chain::after {
  content: ''; position: absolute; bottom: -8px; left: -4px; width: 12px; height: 16px;
  background: #d4a76a; border-radius: 6px; box-shadow: 0 2px 6px rgba(0,0,0,0.5);
}

.p4-night-lamp:active .p4-nlamp-chain { transform: translateY(10px); }

.p4-nlamp-glow {
  position: absolute; top: 50px; left: -120px; width: 360px; height: 500px;
  background: radial-gradient(ellipse at 50% 0%, rgba(255,200,100,0.4) 0%, rgba(255,180,80,0.15) 30%, transparent 70%);
  pointer-events: none; animation: p4LampPulse 4s ease-in-out infinite alternate;
  transition: opacity 0.3s;
}

@keyframes p4LampPulse { 0% { opacity: 0.7; } 100% { opacity: 1; } }

.p4-nlamp-pole {
  position: absolute; top: 80px; left: 54px; width: 12px; height: 380px;
  background: linear-gradient(90deg, #444, #888, #444); border-radius: 6px; z-index: 0;
}

.p4-nlamp-base {
  position: absolute; bottom: 0; left: 20px; width: 80px; height: 24px;
  background: linear-gradient(180deg, #666, #333); border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.6);
}

/* Lamp Off State */
.p4-night-lamp.p4-lamp-off .p4-nlamp-shade { background: linear-gradient(180deg, #555, #333); box-shadow: none; border-bottom: 6px solid #222; }

.p4-night-lamp.p4-lamp-off .p4-nlamp-bulb { opacity: 0.2; box-shadow: none; background: #555; }

.p4-night-lamp.p4-lamp-off .p4-nlamp-glow { opacity: 0; animation: none; }

/* Non-Interactive 2: Night Office Desk */
.p4-night-desk {
  position: absolute; bottom: 8%; right: 5%;
  width: 380px; height: 220px;
  z-index: 2;
  pointer-events: none;
}

.p4-ndesk-top {
  position: absolute; top: 0; left: 0; right: 0; height: 10px;
  background: linear-gradient(180deg, rgba(80,80,100,0.9), rgba(60,60,80,0.9));
  border-radius: 4px; border: 1px solid rgba(100,100,120,0.6);
  box-shadow: 0 4px 12px rgba(0,0,0,0.3), inset 0 2px 4px rgba(150,150,180,0.3); z-index: 3;
}

.p4-ndesk-drawer {
  position: absolute; top: 10px; left: 20px; right: 20px; height: 25px;
  background: rgba(50,50,70,0.8);
  border-bottom-left-radius: 4px; border-bottom-right-radius: 4px;
  border: 1px solid rgba(80,80,100,0.5); border-top: none; z-index: 2;
}

.p4-ndesk-drawer::after {
  content: ''; position: absolute; top: 10px; left: 50%; transform: translateX(-50%);
  width: 50px; height: 4px; background: rgba(255,255,255,0.15); border-radius: 2px;
}

.p4-ndesk-leg {
  position: absolute; top: 10px; bottom: -80px; width: 12px;
  background: linear-gradient(90deg, #3a3a4a, #555568, #3a3a4a);
  border-radius: 2px; z-index: 1; box-shadow: 2px 0 4px rgba(0,0,0,0.3);
}

.p4-nleg-left { left: 30px; }

.p4-nleg-right { right: 30px; }

/* Interactive 1: Security Camera */
.p4-security-cam {
  position: absolute; top: 3%; right: 4%;
  width: 100px; height: 100px;
  cursor: pointer; pointer-events: auto; perspective: 400px;
  filter: drop-shadow(0 4px 10px rgba(0,0,0,0.6)) drop-shadow(0 0 10px rgba(255,255,255,0.3));
}

.p4-cam-mount {
  position: absolute; top: 0; left: 30px; width: 40px; height: 10px;
  background: linear-gradient(90deg, #cbd5e1, #f8fafc, #cbd5e1);
  border-radius: 2px; border-bottom: 2px solid #94a3b8;
}

.p4-cam-arm {
  position: absolute; top: 10px; left: 42px; width: 16px; height: 15px;
  background: linear-gradient(90deg, #94a3b8, #cbd5e1, #94a3b8);
}

.p4-cam-base {
  position: absolute; top: 25px; left: 15px; width: 70px; height: 28px;
  background: linear-gradient(180deg, #f8fafc, #cbd5e1); border-radius: 10px 10px 0 0;
  border: 1px solid #94a3b8; border-bottom: none;
  box-shadow: inset 0 2px 5px rgba(255,255,255,0.8);
}

.p4-cam-antenna {
  position: absolute; top: -15px; right: 10px; width: 4px; height: 25px;
  background: #94a3b8; border-radius: 2px; transform: rotate(15deg);
}

.p4-cam-antenna::after {
  content: ''; position: absolute; top: -4px; left: -2px; width: 8px; height: 8px;
  background: #ef4444; border-radius: 50%; box-shadow: 0 0 8px #ef4444;
}

.p4-cam-dome {
  position: absolute; top: 40px; left: 10px; width: 80px; height: 55px;
  background: radial-gradient(circle at 35% 35%, #ffffff, #cbd5e1);
  border-radius: 0 0 40px 40px; border: 3px solid #94a3b8; overflow: hidden;
  box-shadow: inset 0 -3px 8px rgba(0,0,0,0.2), 0 3px 10px rgba(0,0,0,0.5);
}

.p4-cam-lens {
  position: absolute; top: 10px; left: 20px; width: 34px; height: 34px;
  background: radial-gradient(circle, #333, #000); border-radius: 50%;
  border: 2px solid #cbd5e1; transition: transform 0.2s ease-out;
  box-shadow: 0 0 6px rgba(0,0,0,0.8);
}

.p4-cam-lens-ring {
  position: absolute; top: 3px; left: 3px; width: 24px; height: 24px;
  border-radius: 50%; border: 1px solid rgba(255,255,255,0.3);
}

.p4-cam-led {
  position: absolute; top: 4px; right: 4px; width: 8px; height: 8px;
  background: #ef4444; border-radius: 50%;
  box-shadow: 0 0 15px #ef4444, 0 0 30px rgba(239,68,68,0.6);
  animation: p4CamBlink 2s infinite;
}

@keyframes p4CamBlink { 0%, 90% { opacity: 1; } 95% { opacity: 0; } 100% { opacity: 1; } }

.p4-security-cam.p4-cam-alert .p4-cam-led { animation: p4CamAlertBlink 0.1s infinite; background: #ff0000; box-shadow: 0 0 30px #ff0000, 0 0 50px rgba(255,0,0,0.8); }

.p4-security-cam.p4-cam-alert .p4-cam-dome { animation: p4CamAlertShake 0.4s infinite; }

.p4-security-cam.p4-cam-alert .p4-cam-lens { animation: p4CamAlertPan 1s infinite alternate; }

@keyframes p4CamAlertBlink { 0%, 50% { opacity: 1; } 51%, 100% { opacity: 0; } }

@keyframes p4CamAlertShake { 
  0% { transform: translate(0, 0) rotate(0deg); } 

  25% { transform: translate(2px, 1px) rotate(2deg); } 

  50% { transform: translate(-1px, -2px) rotate(-2deg); } 

  75% { transform: translate(-2px, 1px) rotate(0deg); } 

  100% { transform: translate(1px, -1px) rotate(2deg); } 

}

@keyframes p4CamAlertPan {
  0% { left: 5px; top: 5px; }

  33% { left: 35px; top: 15px; }

  66% { left: 20px; top: -5px; }

  100% { left: 5px; top: 10px; }

}

/* Interactive 2: Moth */
.p4-night-moth {
  position: absolute; top: 25%; left: 6%;
  width: 35px; height: 35px;
  cursor: pointer; pointer-events: auto;
  animation: p4MothFlutter 3s infinite alternate cubic-bezier(0.4, 0, 0.2, 1);
  filter: drop-shadow(0 0 8px rgba(255,220,100,0.6)) drop-shadow(0 0 15px rgba(255,200,50,0.3));
}

.p4-night-moth svg { width: 100%; height: 100%; }

@keyframes p4MothFlutter {
  0% { transform: translate(0, 0) rotate(0deg) scale(1); }

  25% { transform: translate(15px, -10px) rotate(15deg) scale(1.1); }

  50% { transform: translate(8px, 15px) rotate(-10deg) scale(0.9); }

  75% { transform: translate(-15px, 8px) rotate(25deg) scale(1.1); }

  100% { transform: translate(0, -15px) rotate(-5deg) scale(1); }

}

.p4-night-moth.p4-moth-scared { animation: p4MothScare 2s forwards; }

@keyframes p4MothScare {
  0% { transform: scale(1); opacity: 1; }

  10% { transform: translate(-80px, -60px) scale(0.3); opacity: 0; }

  90% { transform: translate(80px, -60px) scale(0.3); opacity: 0; }

  100% { transform: translate(0,0) scale(1); opacity: 1; }

}

/* Interactive 3: Sleeping PC */




@keyframes p4DvdX { 0% { left: 5px; } 100% { left: 75px; } }

@keyframes p4DvdY { 0% { top: 5px; } 100% { top: 50px; } }

@keyframes p4DvdColor {
  0% { color: #0ea5e9; text-shadow: 0 0 8px #0ea5e9; }

  33% { color: #ec4899; text-shadow: 0 0 8px #ec4899; }

  66% { color: #22c55e; text-shadow: 0 0 8px #22c55e; }

  100% { color: #0ea5e9; text-shadow: 0 0 8px #0ea5e9; }

}







/* Interactive 4: Roomba (3D Side Profile View) */
.p4-roomba {
  position: absolute; bottom: 1.5%; left: 35%;
  width: 70px; height: 35px;
  cursor: pointer; pointer-events: auto;
  z-index: 10;
  transform-origin: bottom center;
}

.p4-roomba-body {
  position: relative;
  width: 100%; height: 100%;
}

/* The cylindrical side wall */
.p4-roomba-cylinder-side {
  position: absolute; bottom: 0; left: 0;
  width: 70px; height: 18px;
  background: linear-gradient(90deg, #040814 0%, #1e3a8a 25%, #0f172a 60%, #020617 100%);
  border-radius: 0 0 10px 10px / 0 0 6px 6px;
  border: 1.5px solid #1e3a8a;
  border-top: none;
  box-shadow: 0 4px 8px rgba(0,0,0,0.5);
}

/* The flat elliptical top face */
.p4-roomba-cylinder-top {
  position: absolute; bottom: 12px; left: 0;
  width: 70px; height: 14px;
  background: radial-gradient(ellipse at 50% 50%, #1e3a8a 0%, #0f172a 70%, #020617 100%);
  border-radius: 50%;
  border: 1.5px solid #1e3a8a;
  box-shadow: inset 0 1px 2px rgba(255,255,255,0.2);
}

/* Accent ring inside the top face */
.p4-roomba-cylinder-top::before {
  content: '';
  position: absolute; top: 1.5px; left: 5px; right: 5px; bottom: 1.5px;
  border: 1px solid #3b82f6;
  border-radius: 50%;
  pointer-events: none;
}

/* The raised 3D LiDAR sensor */
.p4-roomba-lidar-3d {
  position: absolute; top: -5px; left: 50%; transform: translateX(-50%);
  width: 26px; height: 12px;
}

/* LiDAR side cylinder with the orange/amber laser rotor inside */
.p4-roomba-lidar-side {
  position: absolute; bottom: 0; left: 0;
  width: 26px; height: 8px;
  background: linear-gradient(90deg, #020617 0%, #ea580c 20%, #f97316 50%, #ea580c 80%, #090d16 100%);
  border-radius: 0 0 4px 4px / 0 0 2px 2px;
  border: 1.2px solid #1e3a8a;
  border-top: none;
  box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}

/* LiDAR top elliptical cap */
.p4-roomba-lidar-top {
  position: absolute; bottom: 5px; left: 0;
  width: 26px; height: 6px;
  background: radial-gradient(ellipse at 50% 50%, #1e3a8a 0%, #020617 100%);
  border-radius: 50%;
  border: 1.2px solid #3b82f6;
}

/* Small status LED on the front side wall */
.p4-roomba-status-light {
  position: absolute; bottom: 6px; right: 12px;
  width: 6px; height: 4px;
  background: #22c55e;
  border-radius: 50%;
  box-shadow: 0 0 6px #22c55e, 0 0 12px rgba(34,197,94,0.8);
  transition: all 0.3s ease;
  z-index: 5;
}

/* Laser scanner projection (forward-pointing triangle) */
.p4-roomba-laser {
  position: absolute; bottom: 3px; left: 55px;
  width: 140px; height: 40px;
  clip-path: polygon(0 45%, 100% 0, 100% 100%, 0 55%);
  background: linear-gradient(90deg, rgba(6,182,212,0.25) 0%, rgba(6,182,212,0.02) 75%, transparent 100%);
  pointer-events: none;
  z-index: -1;
  transform-origin: left center;
  transition: background 0.3s ease;
}

/* Beautiful elliptical drop contact shadow on floor */
.p4-roomba-shadow {
  position: absolute; bottom: 0; left: 5px;
  width: 60px; height: 6px;
  background: rgba(0, 0, 0, 0.65);
  border-radius: 50%;
  filter: blur(2px);
  z-index: -3;
  pointer-events: none;
}

/* Bump Confused Animation */
.p4-roomba.p4-roomba-bump {
  animation: p4RoombaSideConfused 1.8s ease-in-out forwards;
}

.p4-roomba.p4-roomba-bump .p4-roomba-status-light {
  background: #ef4444;
  box-shadow: 0 0 8px #ef4444, 0 0 16px rgba(239,68,68,0.9);
  animation: p4CamAlertBlink 0.15s infinite;
}

.p4-roomba.p4-roomba-bump .p4-roomba-laser {
  background: linear-gradient(90deg, rgba(239,68,68,0.4) 0%, rgba(239,68,68,0.03) 75%, transparent 100%);
  animation: p4LaserAlert 0.15s infinite alternate;
}

.p4-roomba.p4-roomba-bump .p4-roomba-shadow {
  animation: p4RoombaShadowConfused 1.8s ease-in-out forwards;
}

@keyframes p4LaserAlert {
  0% { opacity: 0.3; }

  100% { opacity: 1; }

}

@keyframes p4RoombaSideConfused {
  0% { transform: translateX(var(--current-x, 0px)) scaleX(var(--direction-scale, 1)) translateY(0); }

  20% { transform: translateX(var(--current-x, 0px)) scaleX(var(--direction-scale, 1)) translateY(-8px); }

  40% { transform: translateX(var(--current-x, 0px)) scaleX(calc(var(--direction-scale, 1) * -1)) translateY(0); }

  60% { transform: translateX(var(--current-x, 0px)) scaleX(var(--direction-scale, 1)) translateY(-6px); }

  80% { transform: translateX(var(--current-x, 0px)) scaleX(calc(var(--direction-scale, 1) * -1)) translateY(0); }

  100% { transform: translateX(var(--current-x, 0px)) scaleX(var(--direction-scale, 1)) translateY(0); }

}

@keyframes p4RoombaShadowConfused {
  0% { transform: scale(1); opacity: 1; }

  20% { transform: scale(0.6); opacity: 0.25; }

  40% { transform: scale(1); opacity: 1; }

  60% { transform: scale(0.75); opacity: 0.35; }

  80% { transform: scale(1); opacity: 1; }

  100% { transform: scale(1); opacity: 1; }

}

/* Interactive 5: Exit Sign */
.p4-exit-sign {
  position: absolute; top: 2%; left: 50%; transform: translateX(-50%);
  color: #ef4444; font-family: 'Arial Black', sans-serif; font-size: 22px;
  letter-spacing: 4px; font-weight: bold;
  border: 3px solid #ef4444; padding: 6px 14px; border-radius: 4px;
  background: rgba(0,0,0,0.6);
  text-shadow: 0 0 10px #ef4444, 0 0 25px rgba(239,68,68,0.5);
  box-shadow: 0 0 15px rgba(239,68,68,0.4), inset 0 0 10px rgba(239,68,68,0.2);
  pointer-events: none;
  animation: p4NeonFlicker 5s infinite;
}

@keyframes p4NeonFlicker {
  0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% { opacity: 1; text-shadow: 0 0 10px #ef4444, 0 0 25px rgba(239,68,68,0.5); }

  20%, 24%, 55% { opacity: 0.3; text-shadow: none; }

}


/* Interactive 6: Coffee Mug */
.p4-coffee-mug {
  position: absolute; bottom: calc(100% - 8px); left: 30px; z-index: 5;
  width: 40px; height: 45px;
  cursor: pointer; pointer-events: auto;
  filter: drop-shadow(0 0 6px rgba(255,255,255,0.3));
}

.p4-mug-body {
  position: absolute; top: 8px; left: 0; width: 28px; height: 35px;
  background: linear-gradient(135deg, #f0f0f0, #c8c8c8);
  border-radius: 3px 3px 6px 6px;
  box-shadow: inset -3px -3px 8px rgba(0,0,0,0.15), 0 2px 6px rgba(0,0,0,0.3);
}

.p4-mug-handle {
  position: absolute; top: 15px; right: 2px; width: 14px; height: 18px;
  border: 4px solid #e0e0e0; border-left: none; border-radius: 0 8px 8px 0;
}

.p4-coffee-mug::before {
  content: ''; position: absolute; top: -8px; left: 8px;
  width: 12px; height: 15px;
  background: linear-gradient(transparent, rgba(255,255,255,0.4));
  border-radius: 50%; animation: p4SteamRise 2s ease-in-out infinite; filter: blur(3px);
}

@keyframes p4SteamRise {
  0% { transform: translateY(0) scale(1); opacity: 0.4; }

  50% { transform: translateY(-10px) scale(1.3); opacity: 0.2; }

  100% { transform: translateY(-20px) scale(0.8); opacity: 0; }

}

.p4-coffee-mug.p4-clink { animation: p4MugClink 0.5s forwards; }

@keyframes p4MugClink { 0%, 100% { transform: rotate(0deg); } 20% { transform: rotate(15deg) translateY(-5px); } 40% { transform: rotate(-8deg); } 60% { transform: rotate(5deg); } }

/* Interactive 7: Lanyard */
.p4-lanyard {
  position: absolute; top: 42%; right: 15%;
  width: 25px; height: 70px;
  cursor: pointer; pointer-events: auto;
  transform-origin: top center;
  animation: p4LanyardSway 4s infinite alternate ease-in-out;
  filter: drop-shadow(0 0 5px rgba(59,130,246,0.4));
}

.p4-lanyard-strap {
  position: absolute; top: 0; left: 10px; width: 4px; height: 40px;
  background: linear-gradient(180deg, #3b82f6, #60a5fa);
  border-radius: 2px; box-shadow: 0 0 6px rgba(59,130,246,0.3);
}

.p4-lanyard-badge {
  position: absolute; bottom: 0; left: 3px; width: 18px; height: 25px;
  background: linear-gradient(135deg, #e2e8f0, #cbd5e1);
  border-radius: 3px; border: 1px solid rgba(255,255,255,0.3);
  box-shadow: 0 2px 6px rgba(0,0,0,0.4), 0 0 8px rgba(59,130,246,0.2);
}

@keyframes p4LanyardSway { 0% { transform: rotate(-5deg); } 100% { transform: rotate(5deg); } }

.p4-lanyard.p4-lanyard-spin { animation: p4LanyardSpin 1s forwards cubic-bezier(0.1, 0.7, 0.1, 1); }

@keyframes p4LanyardSpin { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(1080deg); } }

/* Interactive 8: Blinds Cord */
.p4-blinds-cord {
  position: absolute; top: 5%; right: 1%;
  width: 20px; height: 180px;
  cursor: pointer; pointer-events: auto;
}

.p4-cord-string {
  position: absolute; top: 0; left: 8px; width: 4px; height: 100%;
  background: linear-gradient(180deg, #94a3b8, #cbd5e1, #94a3b8);
  border-radius: 2px; box-shadow: 0 0 4px rgba(255,255,255,0.15);
}

.p4-cord-bobble {
  position: absolute; bottom: 0; left: 3px; width: 14px; height: 22px;
  background: radial-gradient(circle at 40% 35%, #fbbf24, #b45309);
  border-radius: 7px;
  box-shadow: 0 0 10px rgba(251,191,36,0.4), 0 2px 6px rgba(0,0,0,0.4);
  animation: p4CordGlow 2s ease-in-out infinite alternate;
}

@keyframes p4CordGlow { 0% { box-shadow: 0 0 8px rgba(251,191,36,0.3); } 100% { box-shadow: 0 0 15px rgba(251,191,36,0.6); } }

.p4-blinds-light-flash {
  position: absolute; top: 0; left: -1000px; width: 300px; height: 800px;
  background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,0.15), rgba(255,255,255,0));
  transform: skewX(-20deg); opacity: 0; pointer-events: none;
}

.p4-blinds-cord.p4-cord-pull .p4-cord-bobble { animation: p4CordPull 1.5s forwards; }

.p4-blinds-cord.p4-cord-pull .p4-blinds-light-flash { animation: p4LightFlash 1.5s forwards; }

@keyframes p4CordPull { 0%, 100% { transform: translateY(0); } 10% { transform: translateY(25px); } 20% { transform: translateY(-8px); } 30% { transform: translateY(15px); } 40% { transform: translateY(0); } }

@keyframes p4LightFlash { 0%, 100% { opacity: 0; left: -1000px; } 10%, 40% { opacity: 1; left: -500px; } }

/* Relaxed Mode Overrides for performance (strip heavy filters/blurs/SVGs and stop infinite CSS spin animations) */
body.relaxed-mode .p4-fan-blades,
body.relaxed-mode .p4-sine-wave,
body.relaxed-mode .p4-radar-scan {
  animation: none !important;
}

body.relaxed-mode .p4-pc-case,
body.relaxed-mode .p4-bg-monitor,
body.relaxed-mode .p4-pc-fan {
  box-shadow: none !important;
  filter: none !important;
}

body.relaxed-mode .p4-pc-glass-panel {
  backdrop-filter: none !important;
  background: rgba(15, 23, 42, 0.95);
}

/* ==========================================================================
   ── §11 DAY BUSY MODE ANIMATIONS (25 CHAOTIC OFFICE ELEMENTS) ──
   ========================================================================== */
/* Main Container: Absolute overlay aligned with other weather containers */
.p4-about-bg-busy-anim {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: 5;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--p4-transition), visibility var(--p4-transition);
  overflow: visible;
}

body.p4.day.busy-mode .p4-about-bg-busy-anim,
body.busy-mode .p4-about-bg-busy-anim {
  opacity: 1;
  visibility: visible;
}

/* Enable pointer events recursively on direct children and desk items */
.p4-about-bg-busy-anim > div,
.p4-about-bg-busy-anim .p4-busy-desk > div,
.p4-about-bg-busy-anim .p4-busy-cabinet > div {
  pointer-events: auto;
}

/* Generic Chaotic Vibrating Animation Utility for high stress */
@keyframes p4ChaoticShake {
  0% { transform: translate(0, 0) rotate(0deg); }

  10% { transform: translate(-2px, 1px) rotate(-1deg); }

  20% { transform: translate(1px, -2px) rotate(1.5deg); }

  30% { transform: translate(-1px, 2px) rotate(-0.5deg); }

  40% { transform: translate(2px, -1px) rotate(1deg); }

  50% { transform: translate(-2px, -2px) rotate(-1.5deg); }

  60% { transform: translate(1px, 2px) rotate(0.5deg); }

  70% { transform: translate(-1px, -1px) rotate(-1deg); }

  80% { transform: translate(2px, 1px) rotate(1.5deg); }

  90% { transform: translate(-2px, 2px) rotate(-0.5deg); }

  100% { transform: translate(0, 0) rotate(0deg); }

}

/* 16. Whiteboard (Top Left Wall) */
.p4-busy-whiteboard {
  position: absolute;
  top: 12%; left: 1%;
  width: 220px; height: 130px;
  background: #ffffff;
  border: 6px solid #475569;
  border-radius: 6px;
  box-shadow: 0 10px 25px rgba(0,0,0,0.15), inset 0 0 10px rgba(0,0,0,0.05);
  cursor: pointer;
  z-index: 3;
  transition: transform 0.3s ease;
}

.p4-busy-whiteboard:hover {
  transform: scale(1.03);
}

.p4-busy-whiteboard.active {
  animation: p4ChaoticShake 0.4s infinite;
}

.p4-wb-marker {
  position: absolute;
  bottom: -4px; left: 30px;
  width: 15px; height: 5px;
  background: #ef4444;
  border-radius: 1px;
}

.p4-wb-eraser {
  position: absolute;
  bottom: -4px; left: 60px;
  width: 22px; height: 6px;
  background: #334155;
  border-radius: 2px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.p4-wb-text {
  position: absolute;
  top: 45px; left: 0; right: 0;
  text-align: center;
  font-family: 'Architects Daughter', 'Comic Sans MS', cursive, sans-serif;
  font-size: 1.5rem;
  font-weight: 900;
  color: #ef4444;
  text-shadow: 0 0 8px rgba(239, 68, 68, 0.4);
  opacity: 0;
  transform: scale(0.5);
  transition: all 0.3s ease;
}

.p4-busy-whiteboard.active .p4-wb-text {
  opacity: 1;
  transform: scale(1);
}

.p4-wb-svg {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
}

.p4-wb-path {
  stroke-dasharray: 400;
  stroke-dashoffset: 400;
  transition: stroke-dashoffset 1.5s ease-in-out;
}

.p4-busy-whiteboard.active .p4-wb-path {
  stroke-dashoffset: 0;
}

/* 22. Sticky Note Board (Wall Right) */
.p4-busy-noteboard {
  position: absolute;
  top: 12%; right: 3%;
  width: 140px; height: 130px;
  background: #78350f; /* Dark corkboard brown */
  border: 4px solid #451a03;
  border-radius: 4px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.2);
  cursor: pointer;
  z-index: 3;
  padding: 10px;
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  transition: transform 0.3s ease;
}

.p4-busy-noteboard:hover {
  transform: translateY(-2px);
}

.p4-busy-noteboard.active {
  animation: p4ChaoticShake 0.3s infinite;
}

.p4-bnote {
  width: 32px; height: 32px;
  font-size: 8px;
  font-weight: bold;
  padding: 2px;
  box-shadow: 1px 2px 4px rgba(0,0,0,0.3);
  text-align: center;
  line-height: 1.2;
}

.bnote-1 { background: #f472b6; transform: rotate(-5deg); color: #000; }

.bnote-2 { background: #fef08a; transform: rotate(7deg); color: #000; }

.bnote-3 { background: #67e8f9; transform: rotate(-3deg); color: #000; }

.p4-bnote-check {
  position: absolute;
  top: 40%; left: 35%;
  font-size: 2.5rem;
  color: #22c55e;
  text-shadow: 0 0 10px #22c55e;
  opacity: 0;
  transform: scale(0.1);
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.p4-busy-noteboard.active .p4-bnote-check {
  opacity: 1;
  transform: scale(1);
}

/* 25. Spinning Executive Chair */
.p4-busy-chair {
  position: absolute;
  bottom: 8%; right: 180px;
  width: 110px; height: 150px;
  cursor: pointer;
  z-index: 4;
}

.p4-chair-svg {
  width: 100%; height: 100%;
  transition: transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);
  filter: drop-shadow(0 8px 16px rgba(0,0,0,0.3));
}

.p4-busy-chair.active .p4-chair-svg {
  transform: rotate(1080deg);
}

.p4-chair-wind-streaks {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.p4-busy-chair.active .p4-chair-wind-streaks {
  opacity: 1;
}

.p4-wstreak {
  position: absolute;
  background: rgba(255,255,255,0.4);
  border-radius: 50%;
  filter: blur(2px);
}

.wstreak-1 {
  top: 20%; left: -20px; width: 150px; height: 6px;
  animation: p4WindStreakMove 0.4s linear infinite;
}

.wstreak-2 {
  top: 60%; right: -20px; width: 120px; height: 8px;
  animation: p4WindStreakMove 0.5s linear infinite reverse;
}

@keyframes p4WindStreakMove {
  0% { transform: scaleX(0.2); opacity: 0; }

  50% { opacity: 0.8; }

  100% { transform: scaleX(1.2); opacity: 0; }

}

.p4-chair-papers {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.p4-cpaper {
  position: absolute;
  width: 18px; height: 24px;
  background: #ffffff;
  border-radius: 1px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.15);
  opacity: 0;
}

.p4-busy-chair.active .cpaper-1 {
  animation: p4PaperScatter1 1.2s forwards;
}

.p4-busy-chair.active .cpaper-2 {
  animation: p4PaperScatter2 1.5s forwards 0.2s;
}

@keyframes p4PaperScatter1 {
  0% { transform: translate(50px, 50px) rotate(0deg); opacity: 1; }

  100% { transform: translate(-180px, 120px) rotate(720deg); opacity: 0; }

}

@keyframes p4PaperScatter2 {
  0% { transform: translate(50px, 60px) rotate(0deg); opacity: 1; }

  100% { transform: translate(220px, 150px) rotate(-540deg); opacity: 0; }

}

/* 3. Sparks-Flying Photocopier Jam */
.p4-busy-copier {
  position: absolute;
  bottom: 8%; left: 4%;
  width: 90px; height: 130px;
  cursor: pointer;
  z-index: 3;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--p4-transition, 0.3s), visibility var(--p4-transition, 0.3s);
}

/* Shown in Busy Mode (both Day & Night) and Day Available Mode */
body.p4.busy-mode .p4-busy-copier,
body.busy-mode .p4-busy-copier,
body.p4.day.available-mode .p4-busy-copier,
body.p4.available-mode:not(.night) .p4-busy-copier {
  opacity: 1;
  visibility: visible;
}

.p4-busy-copier.active {
  animation: p4ChaoticShake 0.1s infinite;
}

/* Glowing, panicking floating text element */
.p4-copier-panic-text {
  position: absolute;
  top: -45px;
  left: 10px; /* Align near left side of copier to avoid going off-screen left */
  white-space: nowrap;
  font-family: 'Outfit', sans-serif;
  font-size: 14px;
  font-weight: 800;
  color: #ff3b30;
  text-shadow: 0 0 8px #ff3b30, 0 0 15px #f97316;
  pointer-events: none;
  z-index: 20;
  animation: p4CopierPanicTextAnim 4s cubic-bezier(0.19, 1, 0.22, 1) forwards;
}

@keyframes p4CopierPanicTextAnim {
  0% {
    opacity: 0;
    transform: translateY(20px) scale(0.6);
  }

  10% {
    opacity: 1;
    transform: translateY(0) scale(1.1);
  }

  20% {
    transform: translateY(-5px) scale(1) rotate(-3deg);
  }

  35% {
    transform: translateY(-10px) scale(1.05) rotate(3deg);
  }

  50% {
    transform: translateY(-15px) scale(1) rotate(-2deg);
  }

  75% {
    opacity: 1; /* Retain full visibility for longer */
    transform: translateY(-25px) scale(1) rotate(1deg);
  }

  100% {
    opacity: 0; /* Slow fade out at the very end */
    transform: translateY(-55px) scale(0.8);
  }

}

.p4-copier-body {
  width: 100%; height: 100%;
  background: #cbd5e1; /* White/Light-grey office plastic */
  border: 3px solid #475569;
  border-radius: 4px;
  position: relative;
  box-shadow: 0 10px 25px rgba(0,0,0,0.3);
  overflow: hidden;
}

.p4-copier-lid {
  position: absolute;
  top: 0; left: 0; right: 0; height: 12px;
  background: #475569; /* Dark contrast lid */
  border-bottom: 2px solid #1e293b;
  border-radius: 4px 4px 0 0;
  transform-origin: top center;
  transition: transform 0.3s;
  z-index: 4;
}

.p4-copier-lid-handle {
  position: absolute;
  bottom: 2px; left: 50%;
  transform: translateX(-50%);
  width: 24px; height: 3px;
  background: #1e293b;
  border-radius: 1px;
}

.p4-busy-copier.active .p4-copier-lid {
  animation: p4CopierLidChomp 0.3s infinite alternate;
}

@keyframes p4CopierLidChomp {
  from { transform: rotateX(0deg); }

  to { transform: rotateX(-45deg); }

}

/* Green laser sweeps back and forth when scanning */
.p4-copier-scanner-glow {
  position: absolute;
  top: 12px; left: 2px; right: 2px;
  height: 2px;
  background: #22c55e;
  box-shadow: 0 0 10px #22c55e, 0 0 20px #22c55e;
  opacity: 0;
  z-index: 3;
}

.p4-busy-copier.active .p4-copier-scanner-glow {
  opacity: 1;
  animation: p4ScannerSweep 0.6s infinite linear;
}

@keyframes p4ScannerSweep {
  0% { transform: translateY(0); }

  50% { transform: translateY(22px); }

  100% { transform: translateY(0); }

}

/* Volumetric green scan laser beam */
.p4-copier-scanner-beam {
  position: absolute;
  top: -20px; left: 0; right: 0; height: 35px;
  background: linear-gradient(to top, rgba(34, 197, 94, 0.45), transparent);
  clip-path: polygon(10% 100%, 90% 100%, 100% 0%, 0% 0%);
  opacity: 0;
  z-index: 3;
  pointer-events: none;
  transform-origin: bottom center;
}

.p4-busy-copier.active .p4-copier-scanner-beam {
  animation: p4ScannerBeamFlash 0.3s infinite alternate;
}

@keyframes p4ScannerBeamFlash {
  0% { opacity: 0.15; transform: scaleY(0.8) rotateX(-20deg); }

  100% { opacity: 0.75; transform: scaleY(1.2) rotateX(10deg); filter: drop-shadow(0 0 8px #22c55e); }

}

/* Control console console screen display */
.p4-copier-console {
  position: absolute;
  top: 18px; left: 8px; right: 8px;
  height: 18px;
  background: #1e293b;
  border-radius: 2px;
  border: 1px solid #0f172a;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 4px;
  z-index: 2;
}

.p4-copier-console-screen {
  width: 26px; height: 10px;
  background: #1e293b;
  border-radius: 1px;
  font-family: monospace;
  font-size: 5px;
  font-weight: 900;
  color: #ef4444;
  text-align: center;
  line-height: 10px;
  text-shadow: 0 0 2px #ef4444;
  letter-spacing: 0.5px;
}

.p4-busy-copier.active .p4-copier-console-screen {
  animation: p4ConsoleScreenAlert 0.25s infinite alternate;
}

@keyframes p4ConsoleScreenAlert {
  0% { background: #ef4444; color: #fff; text-shadow: 0 0 4px #fff; }

  100% { background: #991b1b; color: #ef4444; text-shadow: 0 0 2px #ef4444; }

}

.p4-copier-console-btn {
  width: 4px; height: 4px;
  background: #ef4444;
  border-radius: 50%;
  box-shadow: 0 1px 2px rgba(0,0,0,0.3);
}

/* Paper Output slot and emerging sheet */
.p4-copier-output-tray {
  position: absolute;
  top: 42px; left: 8px; right: 8px;
  height: 8px;
  background: #0f172a;
  border-radius: 1px;
  border-bottom: 1.5px solid #334155;
  position: relative;
  z-index: 2;
}

.p4-copier-paper-out {
  position: absolute;
  top: -4px; left: 18px;
  width: 36px; height: 12px;
  background: #ffffff;
  border: 1px solid #cbd5e1;
  border-bottom: none;
  border-radius: 1px 1px 0 0;
  transform-origin: top center;
}

.p4-busy-copier.active .p4-copier-paper-out {
  animation: p4PaperSpitJam 0.15s infinite alternate;
}

@keyframes p4PaperSpitJam {
  0% { transform: translateY(0) rotate(1deg); }

  100% { transform: translateY(2.5px) rotate(-1.5deg); }

}

/* Spit flying flyers */
.p4-copier-flyer {
  position: absolute;
  top: -4px; left: 18px;
  width: 30px; height: 22px;
  background: #ffffff;
  border: 1px solid #cbd5e1;
  box-shadow: 0 2px 5px rgba(0,0,0,0.15);
  opacity: 0;
  pointer-events: none;
  z-index: 10;
  transform-origin: center center;
}

.p4-busy-copier.active .flyer-1 {
  animation: p4CopierSpit1 1.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

.p4-busy-copier.active .flyer-2 {
  animation: p4CopierSpit2 1.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.4s forwards;
}

.p4-busy-copier.active .flyer-3 {
  animation: p4CopierSpit3 1.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.8s forwards;
}

@keyframes p4CopierSpit1 {
  0% { transform: translate(0, 0) rotate(0deg) scale(0.6); opacity: 0; }

  15% { opacity: 1; }

  100% { transform: translate(120px, 90px) rotate(180deg) scale(1.1); opacity: 0; }

}

@keyframes p4CopierSpit2 {
  0% { transform: translate(0, 0) rotate(0deg) scale(0.6); opacity: 0; }

  15% { opacity: 1; }

  100% { transform: translate(180px, 70px) rotate(-220deg) scale(1.1); opacity: 0; }

}

@keyframes p4CopierSpit3 {
  0% { transform: translate(0, 0) rotate(0deg) scale(0.6); opacity: 0; }

  15% { opacity: 1; }

  100% { transform: translate(150px, 110px) rotate(320deg) scale(1.1); opacity: 0; }

}

/* Supply Cassette Trays at the bottom */
.p4-copier-drawers-container {
  position: absolute;
  bottom: 6px; left: 8px; right: 8px;
  height: 62px;
  border-top: 2px solid #475569;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  padding: 3px 0;
  z-index: 2;
}

.p4-copier-drawer-line {
  height: 18px;
  background: #e2e8f0;
  border: 1.5px solid #94a3b8;
  border-radius: 2px;
  position: relative;
}

.p4-copier-drawer-line::after {
  content: '';
  position: absolute;
  top: 3px; left: 50%;
  transform: translateX(-50%);
  width: 18px; height: 2px;
  background: #64748b;
  border-radius: 1px;
}

/* Copier sparks styling */
.p4-copier-sparks {
  position: absolute;
  top: 10px; left: -20px; right: -20px; bottom: 0;
  pointer-events: none;
  opacity: 0;
  z-index: 5;
}

.p4-busy-copier.active .p4-copier-sparks {
  opacity: 1;
}

.p4-spark-svg {
  width: 100%; height: 100%;
}

.p4-spark-svg path {
  stroke-dasharray: 20;
  animation: p4SparkDash 0.15s infinite linear;
}

@keyframes p4SparkDash {
  to { stroke-dashoffset: -20; }

}

/* 9. Out-of-Control Filing Cabinet */
.p4-busy-cabinet {
  position: absolute;
  bottom: 8%; left: 10%;
  width: 85px; height: 145px;
  background: linear-gradient(135deg, #64748b, #475569);
  border: 3px solid #334155;
  border-radius: 4px;
  box-shadow: 0 10px 25px rgba(0,0,0,0.2);
  z-index: 3;
}

.p4-cabinet-drawer {
  position: absolute;
  left: 5px; right: 5px; height: 36px;
  background: #cbd5e1;
  border: 2px solid #94a3b8;
  border-radius: 2px;
  transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}

.top-drawer { top: 8px; }

.mid-drawer { top: 50px; }

.bot-drawer { top: 92px; }

.p4-drawer-handle {
  position: absolute;
  top: 6px; left: 50%; transform: translateX(-50%);
  width: 30px; height: 4px;
  background: #475569;
  border-radius: 2px;
}

.p4-cabinet-drawer.active {
  transform: translateZ(0) translateX(25px);
  box-shadow: -10px 0 15px rgba(0,0,0,0.15);
}

/* 6. Exploding Document Stack (on filing cabinet) */
.p4-busy-docstack {
  position: absolute;
  top: -42px; left: 15px;
  width: 55px; height: 40px;
  cursor: pointer;
}

.p4-doc-folder {
  position: absolute;
  bottom: 0; left: 0; right: 0; height: 8px;
  background: #f59e0b; /* Manila folder color */
  border-radius: 2px 2px 0 0;
  box-shadow: 0 2px 4px rgba(0,0,0,0.15);
}

.p4-doc-sheet {
  position: absolute;
  width: 40px; height: 30px;
  background: #ffffff;
  border: 1px solid #cbd5e1;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
  transform-origin: center bottom;
}

.sheet-1 { bottom: 3px; left: 6px; transform: rotate(-2deg); }

.sheet-2 { bottom: 6px; left: 8px; transform: rotate(1deg); }

.sheet-3 { bottom: 9px; left: 5px; transform: rotate(-1deg); }

.sheet-4 { bottom: 12px; left: 7px; transform: rotate(3deg); }

.sheet-5 { bottom: 15px; left: 6px; transform: rotate(-4deg); }

.p4-busy-docstack.active .p4-doc-sheet {
  pointer-events: none;
}

.p4-busy-docstack.active .sheet-1 { animation: p4DocBlowOut1 3s forwards; }

.p4-busy-docstack.active .sheet-2 { animation: p4DocBlowOut2 3.2s forwards; }

.p4-busy-docstack.active .sheet-3 { animation: p4DocBlowOut3 2.8s forwards; }

.p4-busy-docstack.active .sheet-4 { animation: p4DocBlowOut4 3.4s forwards; }

.p4-busy-docstack.active .sheet-5 { animation: p4DocBlowOut5 3s forwards; }

.p4-busy-docstack.settling .p4-doc-sheet {
  pointer-events: none;
}

.p4-busy-docstack.settling .sheet-1 { animation: p4DocSettle1 1.5s cubic-bezier(0.25, 1, 0.5, 1) forwards; }

.p4-busy-docstack.settling .sheet-2 { animation: p4DocSettle2 1.6s cubic-bezier(0.25, 1, 0.5, 1) forwards; }

.p4-busy-docstack.settling .sheet-3 { animation: p4DocSettle3 1.4s cubic-bezier(0.25, 1, 0.5, 1) forwards; }

.p4-busy-docstack.settling .sheet-4 { animation: p4DocSettle4 1.7s cubic-bezier(0.25, 1, 0.5, 1) forwards; }

.p4-busy-docstack.settling .sheet-5 { animation: p4DocSettle5 1.5s cubic-bezier(0.25, 1, 0.5, 1) forwards; }

@keyframes p4DocBlowOut1 {
  0% { transform: translateY(0) rotate(-2deg); opacity: 1; }

  30% { transform: translateY(-160px) rotate(180deg); opacity: 1; }

  100% { transform: translateY(220px) translateX(-120px) rotate(360deg); opacity: 0; }

}

@keyframes p4DocBlowOut2 {
  0% { transform: translateY(0) rotate(1deg); opacity: 1; }

  35% { transform: translateY(-200px) rotate(-140deg); opacity: 1; }

  100% { transform: translateY(220px) translateX(90px) rotate(-380deg); opacity: 0; }

}

@keyframes p4DocBlowOut3 {
  0% { transform: translateY(0) rotate(-1deg); opacity: 1; }

  25% { transform: translateY(-180px) rotate(220deg); opacity: 1; }

  100% { transform: translateY(220px) translateX(-50px) rotate(540deg); opacity: 0; }

}

@keyframes p4DocBlowOut4 {
  0% { transform: translateY(0) rotate(3deg); opacity: 1; }

  40% { transform: translateY(-230px) rotate(-280deg); opacity: 1; }

  100% { transform: translateY(220px) translateX(150px) rotate(-720deg); opacity: 0; }

}

@keyframes p4DocBlowOut5 {
  0% { transform: translateY(0) rotate(-4deg); opacity: 1; }

  32% { transform: translateY(-190px) rotate(300deg); opacity: 1; }

  100% { transform: translateY(220px) translateX(-20px) rotate(900deg); opacity: 0; }

}

@keyframes p4DocSettle1 {
  0% { transform: translateY(-180px) translateX(-40px) rotate(-90deg); opacity: 0; }

  20% { opacity: 0.8; }

  100% { transform: translateY(0) rotate(-2deg); opacity: 1; }

}

@keyframes p4DocSettle2 {
  0% { transform: translateY(-220px) translateX(30px) rotate(60deg); opacity: 0; }

  20% { opacity: 0.8; }

  100% { transform: translateY(0) rotate(1deg); opacity: 1; }

}

@keyframes p4DocSettle3 {
  0% { transform: translateY(-200px) translateX(-15px) rotate(-45deg); opacity: 0; }

  20% { opacity: 0.8; }

  100% { transform: translateY(0) rotate(-1deg); opacity: 1; }

}

@keyframes p4DocSettle4 {
  0% { transform: translateY(-240px) translateX(50px) rotate(120deg); opacity: 0; }

  20% { opacity: 0.8; }

  100% { transform: translateY(0) rotate(3deg); opacity: 1; }

}

@keyframes p4DocSettle5 {
  0% { transform: translateY(-210px) translateX(-10px) rotate(-60deg); opacity: 0; }

  20% { opacity: 0.8; }

  100% { transform: translateY(0) rotate(-4deg); opacity: 1; }

}

/* 10. Steaming Document Shredder Jam */
.p4-busy-shredder {
  position: absolute;
  bottom: 26%; left: 45%;
  width: 65px; height: 95px;
  background: linear-gradient(135deg, #1e293b, #0f172a);
  border: 3px solid #334155;
  border-radius: 4px;
  box-shadow: 0 10px 25px rgba(0,0,0,0.25);
  cursor: pointer;
  z-index: 3;
}

.p4-shredder-lid {
  position: absolute;
  top: 0; left: 0; right: 0; height: 16px;
  background: #334155;
  border-radius: 2px 2px 0 0;
  border-bottom: 2px solid #1e293b;
}

.p4-shredder-slots {
  position: absolute;
  top: 5px; left: 8px; right: 8px; height: 4px;
  background: #000000;
  border-radius: 1px;
}

.p4-shredder-paper {
  position: absolute;
  top: 8px; left: 15px; right: 15px; height: 35px;
  background: #ffffff;
  box-shadow: 0 2px 5px rgba(0,0,0,0.2);
  transition: transform 0.4s ease;
  clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 80% 85%, 60% 100%, 40% 85%, 20% 100%, 0% 85%);
}

.p4-busy-shredder.active {
  animation: p4ChaoticShake 0.25s infinite;
}

.p4-busy-shredder.active .p4-shredder-paper {
  animation: p4ShredPaper 0.5s infinite linear;
}

@keyframes p4ShredPaper {
  0% { transform: translateY(0); }

  50% { transform: translateY(5px); }

  100% { transform: translateY(0); }

}

.p4-shredder-steam {
  position: absolute;
  top: -20px; left: 0; right: 0;
  display: flex;
  justify-content: space-around;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s;
}

.p4-busy-shredder.active .p4-shredder-steam {
  opacity: 1;
}

.p4-steam-puff {
  width: 14px; height: 14px;
  background: rgba(226,232,240,0.6);
  border-radius: 50%;
  filter: blur(3px);
}

.steam-1 { animation: p4SteamRise1 0.8s infinite ease-out; }

.steam-2 { animation: p4SteamRise2 0.8s infinite ease-out 0.3s; }

@keyframes p4SteamRise1 {
  0% { transform: translateY(10px) scale(0.6); opacity: 0.8; }

  100% { transform: translateY(-25px) scale(1.6); opacity: 0; }

}

@keyframes p4SteamRise2 {
  0% { transform: translateY(10px) scale(0.6); opacity: 0.8; }

  100% { transform: translateY(-30px) scale(1.8); opacity: 0; }

}

/* 13. Steaming Espress-O-Matic */
.p4-busy-espresso {
  position: absolute;
  bottom: 26%; left: 52%;
  width: 65px; height: 90px;
  background: linear-gradient(135deg, #1e293b, #334155);
  border: 2px solid #475569;
  border-radius: 6px;
  box-shadow: 0 10px 25px rgba(0,0,0,0.25);
  cursor: pointer;
  z-index: 3;
}

.p4-espresso-body {
  position: absolute;
  bottom: 0; left: 5px; right: 5px; height: 12px;
  background: #cbd5e1;
  border-radius: 2px;
}

.p4-espresso-gauge {
  position: absolute;
  top: 15px; left: 10px;
  width: 18px; height: 18px;
  background: #ffffff;
  border: 2px solid #ef4444;
  border-radius: 50%;
}

.p4-gauge-needle {
  position: absolute;
  top: 1px; left: 7px;
  width: 2px; height: 8px;
  background: #000;
  transform-origin: center bottom;
  transform: rotate(-45deg);
  transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.p4-busy-espresso.active .p4-gauge-needle {
  transform: rotate(135deg);
}

.p4-espresso-cup {
  position: absolute;
  bottom: 12px; left: 50%; transform: translateX(-50%);
  width: 16px; height: 16px;
  background: #ef4444;
  border-radius: 0 0 4px 4px;
}

.p4-espresso-drip {
  position: absolute;
  top: 35px; left: 50%; transform: translateX(-50%);
  width: 3px; height: 0px;
  background: #7c2d12; /* Rich dark espresso brown */
  border-radius: 1.5px;
  opacity: 0;
  transition: all 0.2s;
}

.p4-busy-espresso.active .p4-espresso-drip {
  opacity: 1;
  height: 25px;
  animation: p4EspressoFlow 0.5s infinite alternate;
}

@keyframes p4EspressoFlow {
  from { transform: translateX(-50%) scaleX(0.8); }

  to { transform: translateX(-50%) scaleX(1.2); }

}

.p4-espresso-steam {
  position: absolute;
  top: -15px; left: 20px;
  width: 25px; height: 25px;
  background: rgba(255,255,255,0.4);
  border-radius: 50%;
  filter: blur(5px);
  opacity: 0;
}

.p4-busy-espresso.active .p4-espresso-steam {
  animation: p4EspressoSteamBlow 2.5s forwards;
}

@keyframes p4EspressoSteamBlow {
  0% { transform: scale(0.5); opacity: 0; }

  20% { transform: scale(1.5); opacity: 0.8; }

  100% { transform: scale(3.0); opacity: 0; }

}

/* 8. Infinite Label Maker */
.p4-busy-labelmaker {
  position: absolute;
  bottom: 26%; left: 58%;
  width: 50px; height: 50px;
  cursor: pointer;
  z-index: 3;
}

.p4-label-body {
  width: 100%; height: 100%;
  background: linear-gradient(135deg, #10b981, #047857);
  border: 2px solid #065f46;
  border-radius: 4px;
  box-shadow: 0 6px 15px rgba(0,0,0,0.2);
}

.p4-label-tape {
  position: absolute;
  top: 15px; left: -20px;
  height: 12px;
  background: #facc15;
  color: #000;
  font-family: monospace;
  font-size: 6px;
  font-weight: 900;
  line-height: 12px;
  white-space: nowrap;
  padding: 0 4px;
  border-radius: 1px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.2);
  opacity: 0;
  transform: scaleX(0.1);
  transform-origin: right center;
  transition: all 0.3s ease;
}

.p4-busy-labelmaker.active .p4-label-tape {
  opacity: 1;
  transform: scaleX(1) translateX(-80px);
  animation: p4LabelWiggle 1.5s infinite ease-in-out;
}

@keyframes p4LabelWiggle {
  0%, 100% { transform: scaleX(1) translateX(-80px) translateY(0) rotate(0); }

  50% { transform: scaleX(1) translateX(-85px) translateY(4px) rotate(4deg); }

}

/* 9. Frantic Desk */
.p4-busy-desk {
  position: absolute;
  bottom: 8%; right: 5%;
  width: 380px; height: 220px;
  z-index: 2;
}

/* ── TECH & DESK SUPPLIES ON FRANTIC DESK ── */
/* 1. Glitching Curved Monitor */
.p4-busy-monitor {
  position: absolute;
  bottom: 105%; right: 25px;
  width: 96px; height: 66px;
  z-index: 4;
  cursor: pointer;
  transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.p4-busy-monitor:hover {
  transform: translateY(-4px) scale(1.05);
}

.p4-busy-monitor::after {
  content: '';
  position: absolute;
  inset: -20px;
  z-index: 5;
}

.p4-monitor-screen-wrapper {
  width: 100%; height: 50px;
  background: #1e293b;
  border: 3px solid #475569;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 8px 20px rgba(0,0,0,0.4);
  position: relative;
}

.p4-monitor-screen {
  width: 100%; height: 100%;
  position: relative;
  background: #020617;
}

.p4-monitor-glitch-bg {
  position: absolute;
  inset: 0;
  background: rgba(239, 68, 68, 0.1);
  opacity: 0;
  transition: opacity 0.2s;
}

.p4-busy-monitor.active .p4-monitor-glitch-bg {
  opacity: 1;
  animation: p4RedGlitch 0.15s infinite steps(2);
}

@keyframes p4RedGlitch {
  0% { background: rgba(239, 68, 68, 0.25); }

  50% { background: rgba(234, 179, 8, 0.25); }

  100% { background: rgba(239, 68, 68, 0.15); }

}

.p4-monitor-warning {
  position: absolute;
  top: 10px; left: 0; right: 0;
  font-family: var(--p4-font-head);
  font-size: 10px;
  font-weight: 900;
  color: #ef4444;
  text-shadow: 0 0 5px #ef4444;
  text-align: center;
  letter-spacing: 1px;
}

.p4-busy-monitor.active .p4-monitor-warning {
  animation: p4FlashText 0.3s infinite alternate;
}

@keyframes p4FlashText {
  0% { opacity: 0.2; }

  100% { opacity: 1; text-shadow: 0 0 10px #ef4444; }

}

.p4-monitor-timer {
  position: absolute;
  bottom: 8px; left: 0; right: 0;
  font-family: monospace;
  font-size: 14px;
  font-weight: bold;
  color: #facc15;
  text-align: center;
  text-shadow: 0 0 4px #facc15;
}

.p4-busy-monitor.active .p4-monitor-timer {
  animation: p4TimerGlitch 0.2s infinite;
}

@keyframes p4TimerGlitch {
  0% { transform: skewX(-5deg) scaleY(0.95); color: #facc15; }

  50% { transform: skewX(10deg) scaleY(1.1); color: #ef4444; }

  100% { transform: skewX(0) scaleY(1); }

}

.p4-monitor-scanlines {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(rgba(0,0,0,0) 0px, rgba(0,0,0,0.2) 2px, rgba(0,0,0,0) 4px);
  pointer-events: none;
}

.p4-monitor-stand-neck {
  width: 10px; height: 12px;
  background: #334155;
  margin: 0 auto;
}

.p4-monitor-stand-plate {
  width: 36px; height: 4px;
  background: #475569;
  border-radius: 2px;
  margin: 0 auto;
}

/* Document Tray */
.p4-busy-doc-tray {
  position: absolute;
  bottom: 102%; left: 20px;
  width: 50px; height: 35px;
  cursor: pointer;
  z-index: 5;
  transition: transform 0.2s;
}

.p4-busy-doc-tray:hover {
  transform: translateY(-2px);
}

.p4-tray-body {
  width: 100%; height: 100%;
  background: rgba(30, 41, 59, 0.85);
  border: 1.5px solid #38bdf8;
  box-shadow: 0 0 10px rgba(56, 189, 248, 0.4);
  border-radius: 4px;
  position: relative;
}

.p4-tray-folder {
  position: absolute;
  left: 4px; right: 4px;
  height: 12px;
  border-radius: 2px 2px 0 0;
  font-family: var(--p4-font-head);
  font-size: 6px;
  font-weight: 800;
  color: #fff;
  text-align: center;
  line-height: 12px;
  box-shadow: 0 -2px 5px rgba(0,0,0,0.2);
  transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.folder-red {
  background: #ef4444;
  bottom: 18px;
  z-index: 3;
}

.folder-yellow {
  background: #eab308;
  bottom: 10px;
  z-index: 2;
}

.folder-green {
  background: #10b981;
  bottom: 2px;
  z-index: 1;
}

.p4-busy-doc-tray.active .folder-red {
  animation: p4TrayFolderPanic1 0.3s infinite alternate;
}

.p4-busy-doc-tray.active .folder-yellow {
  animation: p4TrayFolderPanic2 0.25s infinite alternate;
}

.p4-busy-doc-tray.active .folder-green {
  animation: p4TrayFolderPanic3 0.35s infinite alternate;
}

@keyframes p4TrayFolderPanic1 {
  0% { transform: translateY(0) rotate(0deg); }

  50% { transform: translateY(-16px) rotate(-5deg); }

  100% { transform: translateY(-8px) rotate(3deg); }

}

@keyframes p4TrayFolderPanic2 {
  0% { transform: translateY(0) rotate(0deg); }

  40% { transform: translateY(-12px) rotate(4deg); }

  100% { transform: translateY(-4px) rotate(-3deg); }

}

@keyframes p4TrayFolderPanic3 {
  0% { transform: translateY(0) rotate(0deg); }

  60% { transform: translateY(-14px) rotate(-2deg); }

  100% { transform: translateY(-6px) rotate(5deg); }

}

/* Flying paper animations */
.p4-tray-flyer {
  position: absolute;
  top: 0; left: 15px;
  width: 15px; height: 20px;
  background: #ffffff;
  border: 1px solid #cbd5e1;
  box-shadow: 0 2px 5px rgba(0,0,0,0.15);
  opacity: 0;
  pointer-events: none;
  z-index: 10;
}

.p4-busy-doc-tray.active .flyer-1 {
  animation: p4PaperFly1 1.2s forwards;
}

.p4-busy-doc-tray.active .flyer-2 {
  animation: p4PaperFly2 1.4s 0.2s forwards;
}

@keyframes p4PaperFly1 {
  0% { transform: translate(0, 0) rotate(0deg) scale(0.5); opacity: 0; }

  20% { opacity: 1; }

  100% { transform: translate(-40px, -80px) rotate(-180deg) scale(1); opacity: 0; }

}

@keyframes p4PaperFly2 {
  0% { transform: translate(0, 0) rotate(0deg) scale(0.5); opacity: 0; }

  20% { opacity: 1; }

  100% { transform: translate(30px, -90px) rotate(220deg) scale(1); opacity: 0; }

}

/* 21. "ASAP" Red Alarm Dome Button */
.p4-busy-alarm-btn {
  position: absolute;
  top: 16%; left: 38%;
  width: 32px; height: 26px;
  cursor: pointer;
  z-index: 5;
}

.p4-alarm-base {
  position: absolute;
  bottom: 0; left: 0; right: 0; height: 10px;
  background: #475569;
  border-radius: 2px;
  box-shadow: 0 3px 6px rgba(0,0,0,0.3);
}

.p4-alarm-dome {
  position: absolute;
  bottom: 10px; left: 4px; right: 4px; height: 14px;
  background: radial-gradient(circle at 50% 30%, #f87171, #ef4444, #991b1b);
  border-radius: 12px 12px 0 0;
  box-shadow: 0 0 10px rgba(239,68,68,0.5), inset 0 2px 4px rgba(255,255,255,0.4);
  transition: transform 0.15s;
}

.p4-busy-alarm-btn:active .p4-alarm-dome {
  transform: scaleY(0.5) translateY(5px);
}

.p4-busy-alarm-btn.active .p4-alarm-dome {
  animation: p4AlarmGlowPulse 0.5s infinite alternate;
}

@keyframes p4AlarmGlowPulse {
  0% { box-shadow: 0 0 8px rgba(239,68,68,0.6), inset 0 2px 4px rgba(255,255,255,0.4); }

  100% { box-shadow: 0 0 25px rgba(239,68,68,1), inset 0 2px 4px rgba(255,255,255,0.6); }

}

/* Siren Background Light Pulse on the Whole Section */
.p4-busy-alarm-active::before {
  animation: p4SirenRedFlash 1.0s infinite alternate !important;
}

@keyframes p4SirenRedFlash {
  0% { filter: brightness(0.9) contrast(1.1); }

  100% { filter: brightness(1.2) contrast(1.3) sepia(0.2) saturate(2.5) hue-rotate(-20deg); }

}

/* 11. Spill-and-Refill Coffee Volcano */





@keyframes p4CoffeeGeyser {
  0% { height: 0; opacity: 1; }

  15% { height: 45px; }

  85% { height: 45px; opacity: 1; }

  100% { height: 0; opacity: 0; }

}



@keyframes p4CoffeePuddleSpread {
  0% { transform: scale(0.1); opacity: 0; }

  20% { transform: scale(1.0); opacity: 1; }

  80% { transform: scale(1.0); opacity: 1; }

  100% { transform: scale(0); opacity: 0; }

}

/* Desk Calendar */
.p4-busy-desk-calendar {
  position: absolute;
  bottom: 102%; left: 90px;
  width: 45px; height: 40px;
  cursor: pointer;
  z-index: 5;
  transition: transform 0.2s;
}

.p4-busy-desk-calendar:hover {
  transform: translateY(-2px);
}

.p4-calendar-base {
  width: 100%; height: 6px;
  background: #cbd5e1;
  border: 1px solid #64748b;
  border-radius: 2px;
  position: absolute; bottom: 0;
}

.p4-calendar-rings {
  position: absolute;
  top: 2px; left: 0; right: 0;
  height: 4px;
  display: flex;
  justify-content: space-around;
  padding: 0 6px;
}

.p4-calendar-rings::before, .p4-calendar-rings::after {
  content: '';
  width: 3px; height: 6px;
  background: #475569;
  border-radius: 2px;
}

.p4-calendar-pages {
  position: absolute;
  top: 6px; left: 4px; right: 4px; bottom: 4px;
  background: #ffffff;
  border: 1.5px solid #334155;
  border-radius: 2px;
  box-shadow: 0 4px 6px rgba(0,0,0,0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  perspective: 100px;
}

.p4-calendar-page {
  font-family: var(--p4-font-head);
  font-size: 8px;
  font-weight: 900;
  color: #ef4444;
  text-shadow: 0 0 2px rgba(239, 68, 68, 0.3);
  transform-style: preserve-3d;
  transition: transform 0.2s;
}

.p4-busy-desk-calendar.active {
  animation: p4CalendarVibrate 0.1s infinite alternate;
}

@keyframes p4CalendarVibrate {
  0% { transform: translate(-1px, 0) rotate(-1deg); }

  100% { transform: translate(1px, -1px) rotate(1deg); }

}

.p4-busy-desk-calendar.active .p4-calendar-page {
  animation: p4CalendarPageFlipFrantic 0.12s ease-in-out infinite alternate;
}

@keyframes p4CalendarPageFlipFrantic {
  0% { transform: rotateX(0deg); }

  100% { transform: rotateX(-120deg); }

}

/* 14. Screaming Office Tea Kettle */
.p4-busy-kettle {
  position: absolute;
  top: 6%; left: 26%;
  width: 35px; height: 35px;
  cursor: pointer;
  z-index: 3;
}

.p4-kettle-body {
  width: 26px; height: 26px;
  background: linear-gradient(135deg, #10b981, #059669);
  border-radius: 50%;
  position: absolute; bottom: 0; left: 0;
  box-shadow: 0 4px 8px rgba(0,0,0,0.25);
}

.p4-kettle-body::after {
  content: '';
  position: absolute;
  top: 4px; left: -4px; width: 8px; height: 12px;
  border: 2px solid #059669;
  border-right: none;
  border-radius: 6px 0 0 6px;
}

.p4-kettle-spout {
  position: absolute;
  bottom: 8px; right: 2px;
  width: 10px; height: 6px;
  background: #059669;
  transform: rotate(-30deg);
  border-radius: 0 2px 2px 0;
}

.p4-kettle-steam {
  position: absolute;
  bottom: 15px; right: -25px;
  width: 30px; height: 10px;
  background: rgba(255,255,255,0.4);
  filter: blur(4px);
  border-radius: 50%;
  opacity: 0;
  transform-origin: left center;
}

.p4-busy-kettle.active {
  animation: p4ChaoticShake 0.15s infinite;
}

.p4-busy-kettle.active .p4-kettle-steam {
  animation: p4KettleSteamJet 1.2s infinite ease-out;
}

@keyframes p4KettleSteamJet {
  0% { transform: scaleX(0.2) translateY(0); opacity: 0.8; }

  100% { transform: scaleX(2.0) translateY(-5px); opacity: 0; }

}

/* Smartphone */
.p4-busy-smartphone {
  position: absolute;
  bottom: 102%; left: 160px;
  width: 25px; height: 45px;
  cursor: pointer;
  z-index: 5;
  transform: rotate(-15deg);
  transition: transform 0.2s;
}

.p4-busy-smartphone:hover {
  transform: rotate(-15deg) translateY(-2px);
}

.p4-phone-body {
  width: 100%; height: 100%;
  background: #0f172a;
  border: 1.5px solid #f43f5e;
  border-radius: 4px;
  position: relative;
  box-shadow: 0 4px 10px rgba(0,0,0,0.4);
  overflow: hidden;
}

.p4-phone-screen {
  position: absolute;
  inset: 2px;
  background: #020617;
  border-radius: 2px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.p4-phone-glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle, rgba(244, 63, 94, 0.4) 0%, transparent 85%);
  opacity: 0;
  transition: opacity 0.2s;
}

.p4-phone-msg {
  font-family: var(--p4-font-head);
  font-size: 5px;
  font-weight: 800;
  color: #f43f5e;
  text-shadow: 0 0 3px #f43f5e;
  text-align: center;
  opacity: 0.1;
  transition: opacity 0.2s;
}

.p4-phone-sub {
  font-size: 4px;
  color: #94a3b8;
  text-align: center;
  margin-top: 1px;
  opacity: 0.1;
  transition: opacity 0.2s;
}

.p4-busy-smartphone.active {
  animation: p4PhoneVibrate 0.08s infinite alternate;
}

.p4-busy-smartphone.active .p4-phone-screen {
  animation: p4ScreenFlashPanic 0.2s infinite steps(1);
}

.p4-busy-smartphone.active .p4-phone-glow {
  opacity: 1;
  animation: p4PhoneGlowPulse 0.2s infinite alternate;
}

.p4-busy-smartphone.active .p4-phone-msg,
.p4-busy-smartphone.active .p4-phone-sub {
  opacity: 1;
}

@keyframes p4PhoneVibrate {
  0% { transform: rotate(-20deg) translate(-2px, 2px); }

  100% { transform: rotate(-10deg) translate(2px, -2px); }

}

@keyframes p4PhoneGlowPulse {
  0% { filter: brightness(0.7); }

  100% { filter: brightness(1.5); }

}

@keyframes p4ScreenFlashPanic {
  0% { background: #991b1b; }

  25% { background: #854d0e; }

  50% { background: #020617; }

  75% { background: #701a75; }

}

/* 7. Machine-Gun Administrative Stamp */
.p4-busy-stamp {
  position: absolute;
  top: 4%; right: 4%;
  width: 20px; height: 30px;
  cursor: pointer;
  z-index: 5;
}

.p4-stamp-handle {
  position: absolute;
  top: 0; left: 6px; width: 8px; height: 16px;
  background: radial-gradient(circle at 50% 30%, #78350f, #451a03);
  border-radius: 4px 4px 0 0;
}

.p4-stamp-base {
  position: absolute;
  bottom: 0; left: 0; right: 0; height: 14px;
  background: linear-gradient(180deg, #94a3b8, #475569);
  border-radius: 2px;
  box-shadow: 0 3px 6px rgba(0,0,0,0.25);
}

.p4-stamp-mark {
  position: absolute;
  top: -24px; left: -10px; right: -10px;
  text-align: center;
  font-family: var(--p4-font-head);
  font-size: 8px;
  font-weight: 900;
  color: #ef4444;
  text-shadow: 0 0 5px #ef4444;
  opacity: 0;
  transform: scale(0.5);
  transition: all 0.2s ease;
}

.p4-busy-stamp.active {
  animation: p4StampSlam 0.4s infinite alternate;
}

@keyframes p4StampSlam {
  0% { transform: translateY(0); }

  50% { transform: translateY(-12px); }

  100% { transform: translateY(2px) scaleY(0.8); }

}

.p4-busy-stamp.active .p4-stamp-mark {
  opacity: 1;
  transform: scale(1.2);
}

/* 23. Decision Spin-Wheel of Doom */
.p4-busy-spinwheel {
  position: absolute;
  top: 12%; right: 12%;
  width: 45px; height: 60px;
  cursor: pointer;
  z-index: 4;
}

.p4-wheel-stand {
  position: absolute;
  bottom: 0; left: 18px; width: 8px; height: 25px;
  background: #475569;
}

.p4-wheel-stand::after {
  content: '';
  position: absolute;
  bottom: 0; left: -6px; width: 20px; height: 4px;
  background: #334155;
}

.p4-wheel-body {
  position: absolute;
  top: 0; left: 2px; width: 40px; height: 40px;
  border-radius: 50%;
  background: conic-gradient(#ef4444 0% 25%, #facc15 25% 50%, #3b82f6 50% 75%, #10b981 75% 100%);
  border: 2px solid #fff;
  box-shadow: 0 4px 8px rgba(0,0,0,0.3);
  transition: transform 3.0s cubic-bezier(0.1, 0.8, 0.1, 1);
}

.p4-busy-spinwheel.active .p4-wheel-body {
  transform: rotate(1440deg);
}

.p4-wheel-needle {
  position: absolute;
  top: 50%; left: 50%;
  width: 2px; height: 18px;
  background: #fff;
  transform-origin: center top;
  transform: translate(-50%, -50%) rotate(45deg);
}

.p4-wheel-pointer {
  position: absolute;
  top: -4px; left: 20px;
  width: 6px; height: 10px;
  background: #000;
  clip-path: polygon(50% 100%, 0 0, 100% 0);
  z-index: 5;
}

.p4-wheel-label {
  position: absolute;
  top: -30px; left: -10px; right: -10px;
  text-align: center;
  font-family: var(--p4-font-head);
  font-size: 8px;
  font-weight: 900;
  color: #ef4444;
  text-shadow: 0 0 5px #ef4444;
  opacity: 0;
  transition: opacity 0.3s;
}

.p4-busy-spinwheel.active .p4-wheel-label {
  opacity: 1;
  animation: p4FlashText 0.3s infinite alternate;
}

/* 24. Screaming Fax Machine Tape */
.p4-busy-fax {
  position: absolute;
  top: 4%; right: 7%;
  width: 45px; height: 35px;
  cursor: pointer;
  z-index: 3;
}

.p4-fax-body {
  width: 100%; height: 25px;
  background: linear-gradient(135deg, #e2e8f0, #cbd5e1);
  border: 2px solid #94a3b8;
  border-radius: 3px;
  position: absolute; bottom: 0;
  box-shadow: 0 4px 8px rgba(0,0,0,0.25);
}

.p4-fax-paper {
  position: absolute;
  bottom: 20px; left: 8px; width: 29px; height: 0px;
  background: #ffffff;
  border: 1px solid #cbd5e1;
  transform-origin: bottom center;
  transition: all 0.2s;
}

.p4-busy-fax.active .p4-fax-paper {
  height: 30px;
  animation: p4FaxSpew 0.4s infinite alternate;
}

@keyframes p4FaxSpew {
  from { transform: translateY(0) scaleY(0.9); }

  to { transform: translateY(-4px) scaleY(1.1) rotate(2deg); }

}

.p4-fax-light {
  position: absolute;
  top: 15px; right: 5px; width: 4px; height: 4px;
  background: #22c55e;
  border-radius: 50%;
}

.p4-busy-fax.active .p4-fax-light {
  animation: p4ScannerFlash 0.2s infinite alternate;
}

/* 5. Melting "Overtime" Calculator */
.p4-busy-calculator {
  position: absolute;
  bottom: 102%; left: 260px;
  width: 25px; height: 35px;
  cursor: pointer;
  z-index: 4;
}

.p4-calc-body {
  width: 100%; height: 100%;
  background: #334155;
  border-radius: 3px;
  border: 1px solid #475569;
  box-shadow: 0 4px 8px rgba(0,0,0,0.25);
  position: relative;
  transition: all 0.5s ease;
}

.p4-calc-glow {
  position: absolute;
  inset: 0;
  border-radius: 3px;
  background: rgba(34,197,94,0.15);
  opacity: 0;
  transition: opacity 0.3s;
}

.p4-busy-calculator.active .p4-calc-glow {
  opacity: 1;
}

.p4-busy-calculator.active .p4-calc-body {
  background: #991b1b;
  border-color: #ef4444;
  transform: skewX(10deg) scaleY(0.85);
  box-shadow: 0 0 12px #ef4444;
}

/* 15. Stress Ball Pop & Sparkle */




@keyframes p4BallExplode {
  0% { transform: scale(1.5); opacity: 1; filter: saturate(2); }

  50% { transform: scale(2.5); opacity: 0.5; filter: hue-rotate(180deg) blur(2px); }

  100% { transform: scale(1); opacity: 1; }

}

/* 18. Levitating Pen Cup Vortex */
.p4-busy-pencup {
  position: absolute;
  bottom: 102%; left: 345px;
  width: 24px; height: 32px;
  cursor: pointer;
  z-index: 4;
}

.p4-pcup-body {
  width: 100%; height: 100%;
  background: rgba(59,130,246,0.3);
  border: 2px solid rgba(59,130,246,0.8);
  border-radius: 2px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.2), inset 0 0 6px rgba(59,130,246,0.2);
  backdrop-filter: blur(2px);
  position: relative;
}

.p4-pcup-pen {
  position: absolute;
  width: 4px; height: 26px;
  border-radius: 1px;
  bottom: 4px;
  transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

.pen-1 { background: #ef4444; left: 4px; transform: rotate(-5deg); }

.pen-2 { background: #eab308; left: 10px; transform: rotate(3deg); }

.pen-3 { background: #3b82f6; left: 16px; transform: rotate(-2deg); }

.p4-busy-pencup.active .pen-1 {
  animation: p4PenFloat1 2.0s forwards;
}

.p4-busy-pencup.active .pen-2 {
  animation: p4PenFloat2 2.2s forwards;
}

.p4-busy-pencup.active .pen-3 {
  animation: p4PenFloat3 1.8s forwards;
}

@keyframes p4PenFloat1 {
  0% { transform: translateY(0) rotate(-5deg); }

  40% { transform: translateY(-40px) rotate(180deg) scale(1.2); }

  80% { transform: translateY(-10px) rotate(350deg); }

  100% { transform: translateY(0) rotate(-5deg); }

}

@keyframes p4PenFloat2 {
  0% { transform: translateY(0) rotate(3deg); }

  50% { transform: translateY(-50px) rotate(-220deg) scale(1.2); }

  85% { transform: translateY(-15px) rotate(-355deg); }

  100% { transform: translateY(0) rotate(3deg); }

}

@keyframes p4PenFloat3 {
  0% { transform: translateY(0) rotate(-2deg); }

  35% { transform: translateY(-45px) rotate(140deg) scale(1.2); }

  75% { transform: translateY(-8px) rotate(362deg); }

  100% { transform: translateY(0) rotate(-2deg); }

}

/* Enforce global Relaxed Mode specifications */
body.relaxed-mode .p4-about-bg-busy-anim *,
body.relaxed-mode .p4-about-bg-busy-anim ::before,
body.relaxed-mode .p4-about-bg-busy-anim ::after {
  animation: none !important;
  transition: none !important;
  filter: none !important;
  box-shadow: none !important;
  text-shadow: none !important;
  backdrop-filter: none !important;
}

/* ======================================================== */
/* 8 BRAND NEW NIGHT BUSY OVERTIME THEME ELEMENTS STYLING   */
/* ======================================================== */
.p4-night-busy-only {
  display: none;
  position: absolute;
  cursor: pointer;
  z-index: 5;
}

body.p4.night.busy-mode .p4-night-busy-only {
  display: block !important;
}

/* 1. Doomsday Clock of Endless Work */
.p4-night-doomsday-clock {
  position: absolute !important;
  top: 65px !important;
  right: 18% !important;
  left: auto !important;
  width: 65px;
  height: 65px;
  background: #0f172a;
  border: 3px solid #f43f5e;
  border-radius: 50%;
  box-shadow: 0 0 15px rgba(244, 63, 94, 0.6), inset 0 0 10px rgba(0,0,0,0.8);
  z-index: 99999 !important;
  pointer-events: auto !important;
}

.p4-ndc-face {
  position: relative;
  width: 100%;
  height: 100%;
}

.p4-ndc-hand {
  position: absolute;
  background: #ef4444;
  left: 50%;
  top: 10%;
  width: 2px;
  height: 40%;
  transform-origin: bottom center;
  transform: translateX(-50%) rotate(0deg);
}

.p4-ndc-hand.hour {
  height: 28%;
  top: 22%;
  width: 3px;
  background: #f43f5e;
  animation: p4ClockSpin 4s linear infinite;
}

.p4-ndc-hand.minute {
  animation: p4ClockSpin 0.8s linear infinite;
}

.p4-ndc-label {
  position: absolute;
  bottom: 12px;
  left: 0; right: 0;
  text-align: center;
  font-family: 'Outfit', sans-serif;
  font-size: 8px;
  font-weight: 900;
  color: #f43f5e;
  letter-spacing: 0.5px;
  text-shadow: 0 0 4px #ef4444;
}

@keyframes p4ClockSpin {
  100% { transform: translateX(-50%) rotate(-360deg); }

}

/* 2. No Exit Emergency Sign */
.p4-night-no-exit {
  position: absolute !important;
  top: 30px !important;
  left: 48% !important;
  right: auto !important;
  width: 95px;
  height: 35px;
  background: #064e3b;
  border: 2px solid #ef4444;
  border-radius: 4px;
  box-shadow: 0 0 10px rgba(16, 185, 129, 0.4);
  transition: all 0.3s;
  overflow: hidden;
  z-index: 99999 !important;
  pointer-events: auto !important;
}

.p4-night-no-exit.active {
  background: #7f1d1d !important;
  border-color: #f43f5e !important;
  box-shadow: 0 0 25px #f43f5e !important;
  animation: p4AlertFlash 0.3s infinite;
}

.p4-ne-sign {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.p4-ne-text {
  font-family: 'Outfit', sans-serif;
  font-size: 11px;
  font-weight: 900;
  color: #10b981;
  letter-spacing: 1px;
  text-shadow: 0 0 5px #10b981;
}

.p4-night-no-exit.active .p4-ne-text {
  color: #fff !important;
  text-shadow: 0 0 8px #f43f5e !important;
}

.p4-ne-bars {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: repeating-linear-gradient(45deg, transparent, transparent 8px, rgba(239, 68, 68, 0.35) 8px, rgba(239, 68, 68, 0.35) 10px);
}

/* 3. Stressed Head-Clutching Employee Shadow */
.p4-night-employee-stress {
  bottom: 22%;
  left: 14%;
  width: 80px;
  height: 120px;
}

.p4-nes-shadow {
  width: 100%;
  height: 100%;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 120'%3E%3Cpath d='M40,20 C32,20 28,26 28,34 C28,42 34,46 40,46 C46,46 52,42 52,34 C52,26 48,20 40,20 Z M25,60 C25,50 30,48 40,48 C50,48 55,50 55,60 L58,95 L62,120 L18,120 L22,95 Z' fill='%23090d16'/%3E%3C/svg%3E") no-repeat center/contain;
  opacity: 0.75;
  filter: drop-shadow(0 0 10px rgba(0,0,0,0.8));
}

.p4-nes-brain-glow {
  position: absolute;
  top: 25px;
  left: calc(50% - 10px);
  width: 20px;
  height: 15px;
  background: #f43f5e;
  border-radius: 50%;
  filter: blur(4px);
  opacity: 0.3;
  transition: opacity 0.3s;
}

.p4-night-employee-stress.active {
  animation: p4ChaoticShake 0.05s infinite;
}

.p4-night-employee-stress.active .p4-nes-brain-glow {
  opacity: 1;
  background: #ec4899;
  filter: blur(2px) drop-shadow(0 0 10px #ec4899);
}

/* 4. Astral Soul Leaving Body */
.p4-night-astral-projection {
  bottom: 25%;
  right: 40%;
  width: 55px;
  height: 80px;
  opacity: 0.15;
  transition: opacity 0.5s;
  pointer-events: none;
}

.p4-night-astral-projection.active {
  opacity: 0.85 !important;
  pointer-events: auto;
  animation: p4SoulFloatUp 3.5s ease-out forwards;
}

.p4-ap-ghost {
  font-size: 32px;
  text-align: center;
  filter: drop-shadow(0 0 8px #38bdf8);
}

.p4-ap-soul-text {
  font-family: 'Outfit', sans-serif;
  font-size: 9px;
  font-weight: bold;
  color: #38bdf8;
  text-align: center;
  text-shadow: 0 0 5px #0284c7;
}

@keyframes p4SoulFloatUp {
  0% { transform: translateY(0) scale(0.8); opacity: 0.3; }

  30% { transform: translateY(-40px) translateX(-10px) rotate(-5deg) scale(1.1); opacity: 0.85; }

  60% { transform: translateY(-80px) translateX(10px) rotate(5deg) scale(1); opacity: 0.85; }

  100% { transform: translateY(-130px) scale(0.7); opacity: 0; }

}

/* 5. Burning Desk Lamp (Midnight Oil) */
.p4-night-oil-lamp {
  position: absolute !important;
  top: 70px !important;
  left: 30% !important;
  right: auto !important;
  bottom: auto !important;
  width: 35px;
  height: 50px;
  z-index: 99999 !important;
  pointer-events: auto !important;
}

.p4-nol-shade {
  width: 25px;
  height: 15px;
  background: #475569;
  border-radius: 50% 50% 0 0;
  position: absolute;
  top: 10px; left: 5px;
}

.p4-nol-flame {
  position: absolute;
  top: 18px; left: 12px;
  width: 10px;
  height: 15px;
  background: radial-gradient(circle, #f97316 20%, #ef4444 60%, transparent 100%);
  border-radius: 50% 50% 20% 20%;
  animation: p4FlameFlicker 0.15s infinite alternate;
  filter: drop-shadow(0 0 8px #f97316);
  opacity: 0.6;
}

.p4-night-oil-lamp.active .p4-nol-flame {
  opacity: 1;
  background: radial-gradient(circle, #facc15 30%, #ea580c 70%, transparent 100%);
  filter: drop-shadow(0 0 15px #f97316);
  transform: scale(1.4);
}

.p4-nol-smoke {
  position: absolute;
  top: -5px; left: 12px;
  width: 10px; height: 15px;
  pointer-events: none;
}

.p4-nsmoke-puff {
  position: absolute;
  background: rgba(226, 232, 240, 0.2);
  border-radius: 50%;
  width: 8px; height: 8px;
  opacity: 0;
}

.p4-night-oil-lamp.active .p4-nsmoke-puff.smk-1 {
  animation: p4SmokeRise 1.5s infinite linear;
}

.p4-night-oil-lamp.active .p4-nsmoke-puff.smk-2 {
  animation: p4SmokeRise 1.5s infinite linear 0.7s;
}

/* 6. Overdose Energy Drink Pile */
.p4-night-energy-drinks {
  bottom: 6%;
  right: 23%;
  width: 60px;
  height: 40px;
}

.can {
  position: absolute;
  width: 8px;
  height: 16px;
  background: #64748b;
  border: 1px solid #475569;
  border-radius: 2px;
}

.can-1 { bottom: 0; left: 5px; transform: rotate(-85deg); }

.can-2 { bottom: 0; left: 15px; transform: rotate(10deg); }

.can-3 { bottom: 0; left: 25px; transform: rotate(-45deg); }

.can-4 { bottom: 8px; left: 18px; transform: rotate(75deg); }

.can-5 { bottom: 0; left: 35px; transform: rotate(15deg); }

.can-label {
  position: absolute;
  top: -12px; left: -10px;
  font-family: 'Outfit', sans-serif;
  font-size: 7px;
  font-weight: 900;
  color: #a3e635;
  text-shadow: 0 0 3px #65a30d;
  opacity: 0.5;
}

.p4-night-energy-drinks.active .can {
  background: #a3e635 !important;
  box-shadow: 0 0 8px #a3e635;
}

.p4-night-energy-drinks.active .can-label {
  opacity: 1;
}

/* 7. Cup of Corporate Tears */
.p4-night-tears-mug {
  position: absolute !important;
  top: 180px !important;
  left: 66% !important;
  bottom: auto !important;
  right: auto !important;
  width: 25px;
  height: 30px;
  z-index: 99999 !important;
  pointer-events: auto !important;
}

.p4-ntm-mug {
  width: 18px; height: 18px;
  background: #3b82f6;
  border-radius: 0 0 6px 6px;
  border: 2px solid #1d4ed8;
  position: relative;
}

.p4-ntm-mug::after {
  content: '';
  position: absolute;
  right: -6px; top: 3px;
  width: 6px; height: 8px;
  border: 2px solid #1d4ed8;
  border-left: none;
  border-radius: 0 4px 4px 0;
}

.p4-ntm-tears {
  position: absolute;
  top: 5px; left: 5px;
  width: 6px; height: 12px;
  background: #60a5fa;
  border-radius: 3px;
  opacity: 0.6;
}

.p4-night-tears-mug.active .p4-ntm-tears {
  animation: p4TearsOverflow 1.5s infinite linear;
}

@keyframes p4TearsOverflow {
  0% { height: 2px; top: 0; }

  50% { height: 12px; top: 0; }

  100% { height: 6px; top: 16px; opacity: 0; }

}

/* 8. Anxiety / Sanity Pill Spill */
.p4-night-anxiety-pills {
  position: absolute !important;
  top: 178px !important;
  left: 72% !important;
  bottom: auto !important;
  right: auto !important;
  width: 45px;
  height: 30px;
  z-index: 99999 !important;
  pointer-events: auto !important;
}

.p4-nap-bottle {
  width: 22px; height: 12px;
  background: #f97316;
  border: 1px solid #c2410c;
  border-radius: 2px;
  transform: rotate(-35deg);
  position: absolute;
  bottom: 5px; left: 5px;
}

.p4-nap-pill {
  position: absolute;
  width: 4px; height: 4px;
  background: #a855f7;
  border-radius: 50%;
  opacity: 0.7;
}

.pill-1 { bottom: 2px; right: 12px; }

.pill-2 { bottom: 6px; right: 8px; }

.pill-3 { bottom: 0px; right: 2px; }

.pill-4 { bottom: 8px; right: 18px; }

.p4-night-anxiety-pills.active .p4-nap-pill {
  animation: p4PillBounce 0.4s alternate infinite;
  box-shadow: 0 0 6px #a855f7;
}

@keyframes p4PillBounce {
  100% { transform: translateY(-4px); }

}

/* ======================================================== */
/* EXISTING ELEMENTS REDESIGN FOR NIGHT BUSY MODE           */
/* ======================================================== */
/* 1. Whiteboard: glowing dark red, showing "NO WEEKENDS" */
body.p4.night.busy-mode .p4-busy-whiteboard {
  border-color: #ef4444 !important;
  box-shadow: 0 0 15px rgba(239, 68, 68, 0.4) !important;
  background: #0f172a !important;
}

body.p4.night.busy-mode .p4-wb-text {
  color: transparent !important;
  text-shadow: none !important;
}

body.p4.night.busy-mode .p4-wb-text::before {
  content: "NO FREE TIME! 24/7" !important;
  font-family: 'Outfit', sans-serif !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  color: #ef4444 !important;
  text-shadow: 0 0 8px #ef4444, 0 0 15px #b91c1c !important;
  display: block !important;
  text-align: center !important;
  line-height: 1.2 !important;
}

/* 2. Decision Spin-Wheel: doom choices, red glowing label */
body.p4.night.busy-mode .p4-wheel-label {
  color: transparent !important;
}

body.p4.night.busy-mode .p4-wheel-label::before {
  content: "NO SLEEP" !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  color: #f43f5e !important;
  text-shadow: 0 0 8px #ef4444 !important;
  display: block !important;
}

body.p4.night.busy-mode .p4-wheel-body {
  border-color: #f43f5e !important;
  box-shadow: 0 0 15px rgba(244, 63, 94, 0.4) !important;
}

/* 3. ASAP Alarm Button: warning crimson strobe */
body.p4.night.busy-mode .p4-alarm-dome {
  background: #7f1d1d !important;
  box-shadow: 0 0 8px #ef4444 !important;
}

body.p4.night.busy-mode .p4-busy-alarm-btn.active .p4-alarm-dome {
  background: #ef4444 !important;
  box-shadow: 0 0 25px #ff3b30, 0 0 50px #ff3b30 !important;
  animation: p4AlertFlash 0.2s infinite !important;
}

/* 4. Administrative Stamp: RED INK, marking "REJECTED!" */
body.p4.night.busy-mode .p4-stamp-mark {
  color: transparent !important;
}

body.p4.night.busy-mode .p4-stamp-mark::before {
  content: "REJECTED!" !important;
  color: #ef4444 !important;
  font-weight: 900 !important;
  font-size: 11px !important;
  text-shadow: 0 0 5px #b91c1c !important;
  display: block;
}

/* 5. Screaming Tea Kettle: molten hot red body, toxic steam */
body.p4.night.busy-mode .p4-busy-kettle {
  filter: drop-shadow(0 0 12px #ef4444) !important;
  top: 8% !important;
}

body.p4.night.busy-mode .p4-kettle-body {
  background: #7f1d1d !important;
  border-color: #ef4444 !important;
}

body.p4.night.busy-mode .p4-kettle-steam {
  background: rgba(239, 68, 68, 0.4) !important;
  filter: blur(4px) !important;
}

/* 6. Screaming Fax Machine: warning print tape */
body.p4.night.busy-mode .p4-fax-body {
  background: linear-gradient(135deg, #1e293b, #0f172a) !important;
  border-color: #ef4444 !important;
  box-shadow: 0 0 10px rgba(239, 68, 68, 0.4) !important;
}

body.p4.night.busy-mode .p4-fax-paper {
  overflow: hidden !important;
  border-width: 0px !important;
  height: 0px !important;
  transition: height 1s cubic-bezier(0.075, 0.82, 0.165, 1), border-width 0.1s !important;
}

body.p4.night.busy-mode .p4-busy-fax.active .p4-fax-paper {
  height: 30px !important;
  border-width: 1px !important;
  border-color: #f87171 !important;
}

body.p4.night.busy-mode .p4-fax-paper::after {
  content: "OVERTIME ORDER!!" !important;
  color: #ef4444 !important;
  font-size: 5px !important;
  font-family: 'Courier New', Courier, monospace !important;
  font-weight: 900 !important;
  display: block;
  text-align: center;
  line-height: 7px;
  padding: 3px 1px 0 1px;
  word-wrap: break-word;
  white-space: normal;
  text-shadow: 0 0 2px rgba(239, 68, 68, 0.4);
}

body.p4.night.busy-mode .p4-busy-fax.active::before {
  content: '';
  position: absolute;
  bottom: 22px;
  left: 6px;
  width: 33px;
  height: 2px;
  background: #ef4444;
  box-shadow: 0 0 8px #ef4444, 0 0 15px #ef4444;
  z-index: 5;
  animation: p4FaxLaserScan 0.3s infinite alternate;
}

body.p4.night.busy-mode .p4-fax-light {
  background: #ef4444 !important;
  box-shadow: 0 0 8px #ef4444 !important;
}

@keyframes p4FaxLaserScan {
  0% { transform: scaleX(0.9); opacity: 0.8; }

  100% { transform: scaleX(1.1); opacity: 1; }

}

/* 7. Task Board: "NO ESCAPE", "STAY LATE" */
body.p4.night.busy-mode .bnote-1 {
  background: #7f1d1d !important;
  color: #ffebeb !important;
  border: 1px solid #f87171 !important;
}

body.p4.night.busy-mode .bnote-1::after {
  content: "STAY LATE" !important;
  font-size: 7px !important;
  display: block;
}

body.p4.night.busy-mode .bnote-2 {
  background: #991b1b !important;
  color: #ffebeb !important;
}

body.p4.night.busy-mode .bnote-2::after {
  content: "NO WEEKEND" !important;
  font-size: 7px !important;
  display: block;
}

body.p4.night.busy-mode .bnote-3 {
  background: #ef4444 !important;
  color: #fff !important;
}

body.p4.night.busy-mode .bnote-3::after {
  content: "OVERTIME" !important;
  font-size: 7px !important;
  display: block;
}

body.p4.night.busy-mode .bnote {
  font-size: 0px !important;
}

/* 8. Spinning Executive Chair: shakes violently, trash paper trail */
body.p4.night.busy-mode .p4-busy-chair {
  right: 215px !important;
  will-change: transform;
}

body.p4.night.busy-mode .p4-busy-chair.active {
  /* Removed chaotic shake animation to make the interaction less stressful and smoother */
}

body.p4.night.busy-mode .p4-chair-svg {
  filter: drop-shadow(0 0 8px rgba(56, 189, 248, 0.6)) drop-shadow(0 4px 10px rgba(0,0,0,0.5)) !important;
  will-change: transform;
}

body.p4.night.busy-mode .p4-chair-svg path:nth-child(1) {
  fill: #0f172a !important; /* dark slate backrest */
  stroke: #38bdf8 !important; /* calm neon cyan border */
  stroke-width: 1.5px !important;
}

body.p4.night.busy-mode .p4-chair-svg path:nth-child(2) {
  fill: #1e293b !important; /* dark slate seat */
  stroke: #0284c7 !important; /* calm neon blue border */
  stroke-width: 1.5px !important;
}

body.p4.night.busy-mode .p4-chair-svg path:nth-child(3) {
  fill: #475569 !important; /* slate grey pole */
  stroke: #38bdf8 !important;
  stroke-width: 1px !important;
}

body.p4.night.busy-mode .p4-chair-svg path:nth-child(4) {
  fill: #1e293b !important; /* base */
  stroke: #38bdf8 !important;
  stroke-width: 1.5px !important;
}

body.p4.night.busy-mode .p4-cpaper {
  background: #ffebeb !important;
  border: 1px solid #ef4444 !important;
}

/* 9. Out-of-Control Cabinet & Exploding doc stack */
body.p4.night.busy-mode .p4-busy-cabinet {
  border-color: #ef4444 !important;
  box-shadow: 0 0 15px rgba(239, 68, 68, 0.25) !important;
}

body.p4.night.busy-mode .p4-doc-sheet {
  background: #fecaca !important;
  border: 1px solid #ef4444 !important;
}

/* 10. Steaming Document Shredder: glows overheated warning, shreds hopes */
body.p4.night.busy-mode .p4-busy-shredder {
  border-color: #ef4444 !important;
  box-shadow: 0 0 15px rgba(239, 68, 68, 0.4) !important;
}

body.p4.night.busy-mode .p4-shredder-paper {
  background: #b91c1c !important;
}

/* 11. Espress-O-Matic: cup overflows with toxic caffeine green */
body.p4.night.busy-mode .p4-espresso-cup::after {
  content: 'CAFFEINE' !important;
  font-size: 5px !important;
  color: #a3e635 !important;
}

body.p4.night.busy-mode .p4-espresso-drip {
  background: #a3e635 !important;
  box-shadow: 0 0 10px #a3e635 !important;
}

/* 12. Infinite Label Maker Stream: "STRESS OVERLOAD" labels */
body.p4.night.busy-mode .p4-label-tape {
  font-size: 0px !important;
}

body.p4.night.busy-mode .p4-label-tape::before {
  content: "STRESS OVERLOAD!!! NO FREE TIME! STAY LATE! NO HOLIDAY!" !important;
  font-size: 7px !important;
  color: #ef4444 !important;
  font-weight: bold !important;
}

/* 13. Glitching Monitor: Blue Screen of Death (BSOD) */
body.p4.night.busy-mode .p4-monitor-screen {
  background: #1e3a8a !important;
  border-color: #3b82f6 !important;
  box-shadow: 0 0 15px rgba(59, 130, 246, 0.5) !important;
  will-change: transform;
}

body.p4.night.busy-mode .p4-monitor-warning {
  top: 2px !important;
  color: #fff !important;
  font-size: 7px !important;
  line-height: 8px !important;
  font-family: monospace !important;
  text-shadow: 0 0 2px rgba(255, 255, 255, 0.4) !important;
  will-change: transform, opacity;
}

body.p4.night.busy-mode .p4-monitor-warning::before {
  content: "SYSTEM FAILURE" !important;
  display: block;
}

body.p4.night.busy-mode .p4-monitor-timer {
  bottom: 2px !important;
  color: #fca5a5 !important;
  font-size: 6px !important;
  line-height: 7px !important;
  text-shadow: 0 0 2px rgba(252, 165, 165, 0.3) !important;
  will-change: transform, opacity;
}

body.p4.night.busy-mode .p4-monitor-timer::before {
  content: "0x000000D1" !important;
  display: block;
}

/* Smooth custom active animations for BSOD monitor to prevent red/yellow clash and stutter */
body.p4.night.busy-mode .p4-busy-monitor.active .p4-monitor-glitch-bg {
  animation: p4BlueBSODGlitch 0.25s infinite steps(2) !important;
}

body.p4.night.busy-mode .p4-busy-monitor.active .p4-monitor-warning {
  animation: p4BSODTextFlash 0.4s infinite alternate !important;
}

body.p4.night.busy-mode .p4-busy-monitor.active .p4-monitor-timer {
  animation: p4BSODTimerGlitch 0.25s infinite !important;
}

@keyframes p4BlueBSODGlitch {
  0% { background: rgba(59, 130, 246, 0.1); }

  50% { background: rgba(255, 255, 255, 0.15); }

  100% { background: rgba(30, 58, 138, 0.2); }

}

@keyframes p4BSODTextFlash {
  0% { opacity: 0.3; text-shadow: 0 0 2px rgba(255,255,255,0.4); }

  100% { opacity: 1; text-shadow: 0 0 8px rgba(255,255,255,0.9), 0 0 15px rgba(59, 130, 246, 0.8); }

}

@keyframes p4BSODTimerGlitch {
  0% { transform: skewX(-3deg) scaleY(0.97); color: #fca5a5; }

  50% { transform: skewX(6deg) scaleY(1.03); color: #ffffff; text-shadow: 0 0 6px rgba(255,255,255,0.8); }

  100% { transform: skewX(0) scaleY(1); }

}

/* 14. Document Tray: Inbox of Death */
body.p4.night.busy-mode .folder-red::after {
  content: "DEATH" !important;
  font-size: 6px !important;
  display: block;
}

body.p4.night.busy-mode .folder-red {
  font-size: 0px !important;
}

/* 15. Calendar: WORKDAY */
body.p4.night.busy-mode .p4-calendar-page {
  font-size: 0px !important;
}

body.p4.night.busy-mode .p4-calendar-page::before {
  content: "WORKDAY" !important;
  font-size: 9px !important;
  font-weight: 900 !important;
  color: #ef4444 !important;
}

/* 16. Smartphone: messages */
body.p4.night.busy-mode .p4-phone-msg {
  color: #ef4444 !important;
}

body.p4.night.busy-mode .p4-phone-sub {
  color: #fecaca !important;
}

/* 17. Melting Calculator */
body.p4.night.busy-mode .p4-calc-glow {
  background: radial-gradient(circle, rgba(239, 68, 68, 0.4) 0%, transparent 80%) !important;
}

/* 18. Levitating Pen Cup */
body.p4.night.busy-mode .p4-busy-pencup.active {
  box-shadow: 0 0 15px #a855f7 !important;
}

/* 9. Hanging Rope Light Switch (Night Busy Brightness Toggle) */
.p4-night-rope-switch {
  position: absolute !important;
  top: 0 !important;
  left: 58% !important;
  width: 30px !important;
  height: 260px !important;
  cursor: pointer !important;
  z-index: 99999 !important;
  pointer-events: auto !important;
  transition: transform 0.2s ease-out;
  transform-origin: top center;
}

.p4-rope-line {
  position: absolute;
  top: 0;
  left: 13px;
  width: 4px;
  height: 220px;
  background: linear-gradient(90deg, #facc15, #ca8a04 50%, #854d0e);
  box-shadow: 0 0 10px rgba(250, 204, 21, 0.7), 0 0 20px rgba(250, 204, 21, 0.3);
}

.p4-rope-handle {
  position: absolute;
  bottom: 0;
  left: 5px;
  width: 20px;
  height: 40px;
  background: radial-gradient(circle at 50% 30%, #ef4444, #b91c1c 70%, #7f1d1d);
  border: 2px solid #fda4af;
  border-radius: 10px;
  box-shadow: 0 0 20px rgba(239, 68, 68, 0.9), 0 4px 8px rgba(0,0,0,0.6);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Toggled ON state for light switch */
.p4-night-busy-bright .p4-rope-handle {
  background: radial-gradient(circle at 50% 30%, #4ade80, #16a34a 70%, #14532d) !important;
  border-color: #bbf7d0 !important;
  box-shadow: 0 0 25px rgba(74, 222, 128, 0.95), 0 4px 10px rgba(0,0,0,0.6) !important;
}

.p4-night-rope-switch.pull-active {
  animation: p4RopePull 0.8s cubic-bezier(0.25, 1, 0.5, 1);
}

@keyframes p4RopePull {
  0% { transform: translateY(0) scaleY(1); }

  30% { transform: translateY(40px) scaleY(0.9); }

  50% { transform: translateY(-12px) scaleY(1.05); }

  70% { transform: translateY(6px) scaleY(0.98); }

  100% { transform: translateY(0) scaleY(1); }

}

/* Night Busy Mode - BRIGHT ON state styling for the section background */
body.p4.night.busy-mode .p4-about.p4-night-busy-bright::before {
  background: url('../image/busy_night_overtime_bright.png') center center / cover no-repeat fixed !important;
  filter: brightness(1.15) contrast(1.1) !important;
}

body.p4.night.busy-mode .p4-about.p4-night-busy-bright::after {
  background: linear-gradient(180deg,
    rgba(15, 23, 42, 0.2) 0%,
    rgba(15, 23, 42, 0.05) 25%,
    rgba(15, 23, 42, 0.2) 100%
  ) !important;
}

/* Table overrides in Night Busy Mode (match Night Available Mode table colors) */
body.p4.night.busy-mode .p4-desk-top,
body.p4.night.busy-mode .p4-desk-drawer,
body.p4.night.busy-mode .p4-desk-leg {
  transition: background 0.8s ease, border-color 0.8s ease, box-shadow 0.8s ease;
}

body.p4.night.busy-mode .p4-desk-top {
  background: linear-gradient(180deg, rgba(80,80,100,0.9), rgba(60,60,80,0.9)) !important;
  border-color: rgba(100,100,120,0.6) !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3), inset 0 2px 4px rgba(150,150,180,0.3) !important;
}

body.p4.night.busy-mode .p4-desk-drawer {
  background: rgba(50,50,70,0.8) !important;
  border-color: rgba(80,80,100,0.5) !important;
}

body.p4.night.busy-mode .p4-desk-drawer::after {
  background: rgba(255,255,255,0.15) !important;
}

body.p4.night.busy-mode .p4-desk-leg {
  background: linear-gradient(90deg, #3a3a4a, #555568, #3a3a4a) !important;
  box-shadow: 2px 0 4px rgba(0,0,0,0.3) !important;
}

/* Illuminating the desk in bright switch ON state */
body.p4.night.busy-mode .p4-about.p4-night-busy-bright .p4-desk-top {
  background: linear-gradient(180deg, rgba(110,110,135,0.9), rgba(80,80,105,0.9)) !important;
  border-color: rgba(130,130,155,0.6) !important;
}

body.p4.night.busy-mode .p4-about.p4-night-busy-bright .p4-desk-drawer {
  background: rgba(70,70,95,0.8) !important;
}

body.p4.night.busy-mode .p4-about.p4-night-busy-bright .p4-desk-leg {
  background: linear-gradient(90deg, #505065, #757590, #505065) !important;
}

/* ──────────────────────────────────────────────────────────
   NIGHT HOLIDAY PARTY MODE STYLING & ANIMATIONS
   ────────────────────────────────────────────────────────── */
/* Glassmorphic Light Switch Toggle Container */
.p4-party-switch-wrapper {
  position: absolute;
  top: 10px;
  right: 0;
  display: none; /* Hidden by default, shown in Night Holiday Mode */
  align-items: center;
  gap: 12px;
  background: rgba(15, 23, 42, 0.55);
  backdrop-filter: blur(12px) saturate(130%);
  -webkit-backdrop-filter: blur(12px) saturate(130%);
  border: 1px solid rgba(255, 255, 255, 0.15);
  padding: 8px 18px;
  border-radius: 30px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), inset 0 1px 2px rgba(255, 255, 255, 0.15);
  pointer-events: auto !important; /* Critical so it is clickable */
  z-index: 100;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.p4-party-switch-wrapper:hover {
  border-color: rgba(244, 114, 182, 0.4);
  box-shadow: 0 12px 40px rgba(236, 72, 153, 0.15), 0 8px 32px rgba(0, 0, 0, 0.5);
  transform: translateY(-1px);
}

body.p4.night.holiday-mode .p4-party-switch-wrapper {
  display: flex;
}

.p4-party-switch-label {
  font-family: 'Outfit', 'Inter', sans-serif;
  font-size: 13.5px;
  font-weight: 700;
  color: #f8fafc;
  text-shadow: 0 0 8px rgba(255, 255, 255, 0.2);
  letter-spacing: 0.8px;
  text-transform: uppercase;
  user-select: none;
}

.p4-party-switch {
  position: relative;
  display: inline-block;
  width: 52px;
  height: 28px;
  cursor: pointer;
}

.p4-party-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.p4-party-switch-slider {
  position: absolute;
  cursor: pointer;
  top: 0; left: 0; right: 0; bottom: 0;
  background-color: rgba(15, 23, 42, 0.6);
  border: 1.5px solid rgba(255, 255, 255, 0.2);
  border-radius: 34px;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.5);
}

.p4-party-switch-knob {
  position: absolute;
  height: 18px;
  width: 18px;
  left: 4px;
  bottom: 3.5px;
  background-color: #94a3b8;
  border-radius: 50%;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
}

/* Checked Switch State */
.p4-party-switch input:checked + .p4-party-switch-slider {
  background-color: rgba(236, 72, 153, 0.25);
  border-color: rgba(236, 72, 153, 0.7);
  box-shadow: 0 0 15px rgba(236, 72, 153, 0.4), inset 0 1px 3px rgba(255, 255, 255, 0.2);
}

.p4-party-switch input:checked + .p4-party-switch-slider .p4-party-switch-knob {
  transform: translateX(23px);
  background-color: #f472b6;
  box-shadow: 0 0 10px rgba(244, 114, 182, 0.8), 0 0 20px rgba(244, 114, 182, 0.4);
}

/* Background containers for Night Holiday Beach Party */
.p4-about-bg-night-holiday-anim {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.8s ease, visibility 0.8s ease;
}

body.p4.night.holiday-mode .p4-about-bg-night-holiday-anim {
  opacity: 1;
  visibility: visible;
}

.p4-about-bg-night-holiday-elements {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: 20;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.8s ease, visibility 0.8s ease;
}

body.p4.night.holiday-mode .p4-about-bg-night-holiday-elements {
  opacity: 1;
  visibility: visible;
}

/* Override and hide default workspace wallpaper in night holiday mode */
body.p4.night.holiday-mode .p4-about::before {
  opacity: 0 !important;
}

.p4-party-bg-less, .p4-party-bg-extra {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  filter: brightness(1.7) contrast(1.1) saturate(1.15);
}

.p4-party-bg-less {
  background: url('../image/malaysia_night_party_less.png') center center / cover no-repeat fixed;
  z-index: 1;
  transition: opacity 1s ease-in-out;
}

.p4-party-bg-extra {
  background: url('../image/malaysia_night_party_extra.png') center center / cover no-repeat fixed;
  opacity: 0;
  z-index: 2;
  transition: opacity 1s ease-in-out;
}

body.p4-extra-party-active .p4-party-bg-extra {
  opacity: 1;
}

/* Disco laser overlay and animations */
.p4-party-disco-laser-overlay {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: 3;
  pointer-events: none;
  opacity: 0;
  mix-blend-mode: screen;
  transition: opacity 0.8s ease;
}

body.p4-extra-party-active .p4-party-disco-laser-overlay {
  opacity: 1;
}

/* Thin sweeping neon laser lines */
.p4-laser {
  position: absolute;
  bottom: 0;
  width: 3px;
  height: 180%;
  transform-origin: bottom center;
  filter: blur(1.5px);
}

.p4-laser-cyan {
  left: 15%;
  background: linear-gradient(to top, rgba(6, 182, 212, 0.95), rgba(6, 182, 212, 0));
  box-shadow: 0 0 20px rgba(6, 182, 212, 0.9), 0 0 40px rgba(6, 182, 212, 0.4);
  animation: p4LaserSweepCyan 4.5s ease-in-out infinite alternate;
}

.p4-laser-pink {
  right: 15%;
  background: linear-gradient(to top, rgba(236, 72, 153, 0.95), rgba(236, 72, 153, 0));
  box-shadow: 0 0 20px rgba(236, 72, 153, 0.9), 0 0 40px rgba(236, 72, 153, 0.4);
  animation: p4LaserSweepPink 5.5s ease-in-out infinite alternate;
}

.p4-laser-yellow {
  left: 50%;
  background: linear-gradient(to top, rgba(234, 179, 8, 0.95), rgba(234, 179, 8, 0));
  box-shadow: 0 0 20px rgba(234, 179, 8, 0.9), 0 0 40px rgba(234, 179, 8, 0.4);
  animation: p4LaserSweepYellow 6.5s ease-in-out infinite alternate;
}

@keyframes p4LaserSweepCyan {
  0% { transform: rotate(-40deg); }

  100% { transform: rotate(25deg); }

}

@keyframes p4LaserSweepPink {
  0% { transform: rotate(40deg); }

  100% { transform: rotate(-30deg); }

}

@keyframes p4LaserSweepYellow {
  0% { transform: rotate(-55deg); }

  100% { transform: rotate(55deg); }

}

/* Pulsing strobe beats (120 BPM) */
.p4-disco-strobe {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: radial-gradient(circle at 50% 0%, rgba(236, 72, 153, 0.15), transparent 75%),
              radial-gradient(circle at 15% 10%, rgba(6, 182, 212, 0.12), transparent 65%),
              radial-gradient(circle at 85% 20%, rgba(234, 179, 8, 0.1), transparent 60%);
  animation: p4StrobePulse 1s steps(2, start) infinite;
}

@keyframes p4StrobePulse {
  0%, 100% { opacity: 0.4; }

  50% { opacity: 0.8; filter: hue-rotate(90deg) saturate(120%); }

}

/* Glowy text header color transitions */
body.p4-extra-party-active .p4-about .p4-heading .p4-glow {
  animation: p4TextPartyGlow 2s ease-in-out infinite alternate;
}

@keyframes p4TextPartyGlow {
  0% {
    color: #f472b6 !important;
    text-shadow: 0 0 10px #f472b6, 0 0 20px #f472b6, 0 0 30px #ec4899;
  }

  33% {
    color: #06b6d4 !important;
    text-shadow: 0 0 10px #06b6d4, 0 0 20px #06b6d4, 0 0 30px #0891b2;
  }

  66% {
    color: #eab308 !important;
    text-shadow: 0 0 10px #eab308, 0 0 20px #eab308, 0 0 30px #ca8a04;
  }

  100% {
    color: #a855f7 !important;
    text-shadow: 0 0 10px #a855f7, 0 0 20px #a855f7, 0 0 30px #9333ea;
  }

}

/* ──────────────────────────────────────────────────────────
   40 HOLIDAY PARTY INTERACTIVE ELEMENTS STYLING
   ────────────────────────────────────────────────────────── */
/* Common styling for all party elements */
.p4-party-element {
  position: absolute;
  pointer-events: auto !important;
  cursor: pointer !important;
  z-index: 10;
  transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), filter 0.3s ease;
  filter: brightness(1.6) saturate(1.4) drop-shadow(0 2px 4px rgba(0,0,0,0.4));
}

.p4-party-element:hover {
  transform: scale(1.15) translateY(-2px);
  filter: brightness(1.85) saturate(1.6) drop-shadow(0 0 10px var(--p4-neon, #f472b6));
}

.p4-party-svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* 1. Hanging Disco Ball */
.p4-party-disco-ball {
  left: 49%; top: -10px;
  width: 60px; height: 110px;
  transform-origin: top center;
  animation: p4DiscoBallSway 6s ease-in-out infinite alternate;
}

@keyframes p4DiscoBallSway {
  0% { transform: rotate(-4deg); }

  100% { transform: rotate(4deg); }

}

/* Base states & transitions for sphere, beams, and aura */
.p4-disco-sphere, .p4-disco-beams-group, .p4-disco-glow-aura {
  transition: transform 1.2s cubic-bezier(0.25, 0.8, 0.25, 1), 
              opacity 1.2s cubic-bezier(0.25, 0.8, 0.25, 1), 
              filter 1.2s ease;
}

/* 3D Sphere slow facet rotation */
.p4-disco-sphere {
  transform-origin: 40px 75px;
  animation: p4DiscoSphereSpin 15s linear infinite;
}

@keyframes p4DiscoSphereSpin {
  0% { transform: rotate(0deg); }

  100% { transform: rotate(360deg); }

}

/* Rotating Light Beams */
.p4-disco-beams-group {
  transform-origin: 40px 75px;
  animation: p4DiscoBeamsRotate 18s linear infinite;
}

@keyframes p4DiscoBeamsRotate {
  0% { transform: rotate(0deg); }

  100% { transform: rotate(360deg); }

}

/* Pulsing background aura glow */
.p4-disco-glow-aura {
  transform-origin: 40px 75px;
  animation: p4DiscoGlowPulse 4s ease-in-out infinite alternate;
}

@keyframes p4DiscoGlowPulse {
  0% { transform: scale(0.9); opacity: 0.55; }

  100% { transform: scale(1.1); opacity: 0.85; filter: hue-rotate(60deg); }

}

/* ACTIVE / CLICK STATE */
.p4-party-disco-ball.active {
  animation: p4DiscoBallActiveBounce 0.6s ease-in-out 5; /* Bounces to the beat */
}

@keyframes p4DiscoBallActiveBounce {
  0%, 100% { transform: translateY(0); }

  50% { transform: translateY(-10px) scaleY(1.06); }

}

/* Rapid spin on click */
.p4-party-disco-ball.active .p4-disco-sphere {
  animation: p4DiscoSphereSpinActive 0.8s linear infinite;
}

@keyframes p4DiscoSphereSpinActive {
  0% { transform: rotate(0deg); }

  100% { transform: rotate(360deg); }

}

/* Rapid spin and hue cycling beams */
.p4-party-disco-ball.active .p4-disco-beams-group {
  animation: p4DiscoBeamsRotateActive 0.6s linear infinite;
  filter: saturate(2) brightness(1.6);
}

@keyframes p4DiscoBeamsRotateActive {
  0% { transform: rotate(0deg); filter: hue-rotate(0deg); }

  100% { transform: rotate(360deg); filter: hue-rotate(360deg); }

}

/* Heavy flashing active glow */
.p4-party-disco-ball.active .p4-disco-glow-aura {
  animation: p4DiscoGlowActive 0.3s ease-in-out infinite alternate;
}

@keyframes p4DiscoGlowActive {
  0% { transform: scale(1.1); opacity: 0.75; }

  100% { transform: scale(1.6); opacity: 1; filter: saturate(2.5) brightness(2); }

}

/* 2. Neon "CHILL" Sign */
.p4-party-neon-chill {
  left: 42%; top: 45px;
  width: 135px; height: 50px;
  transform-origin: top center;
  animation: p4NeonSignSway 5s ease-in-out infinite alternate;
}

/* Detailed Chains */
.p4-neon-chain-l,
.p4-neon-chain-r {
  position: absolute;
  width: 2px;
  height: 40px;
  background: linear-gradient(to bottom, rgba(71, 85, 105, 0.8), rgba(30, 41, 59, 0.9));
  border-left: 1px dashed rgba(148, 163, 184, 0.6);
  top: -40px;
}

.p4-neon-chain-l { left: 20px; }

.p4-neon-chain-r { right: 20px; }

/* Backing Sign Board */
.p4-neon-sign-board {
  position: relative;
  width: 100%;
  height: 100%;
  background: rgba(9, 15, 29, 0.85);
  border-radius: 6px;
  border: 2px solid #1e293b;
  box-shadow: inset 0 0 15px rgba(0, 0, 0, 0.9), 0 4px 12px rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  transition: transform 1.2s cubic-bezier(0.175, 0.885, 0.32, 1.275), 
              filter 1.2s ease, 
              box-shadow 1.2s ease;
}

/* Inner Neon Glass Tubing Border */
.p4-neon-tubing-border {
  position: absolute;
  top: 4px; left: 4px; right: 4px; bottom: 4px;
  border: 2px double rgba(244, 114, 182, 0.85);
  border-radius: 4px;
  box-shadow: 0 0 8px rgba(244, 114, 182, 0.6), inset 0 0 8px rgba(244, 114, 182, 0.4);
  transition: border-color 1.5s ease, box-shadow 1.5s ease;
}

/* Neon Text Container */
.p4-neon-text {
  display: flex;
  gap: 3px;
  font-family: 'Inter', 'JetBrains Mono', sans-serif;
  font-size: 15px;
  font-weight: 900;
  letter-spacing: 2px;
  z-index: 2;
}

/* Letter Spans */
.p4-neon-text span {
  color: #ffe4e6;
  text-shadow: 0 0 4px #fff, 0 0 10px #f472b6, 0 0 20px #ec4899, 0 0 30px #db2777;
  transition: color 1.5s ease, text-shadow 1.5s ease, opacity 1.5s ease;
}

/* Individual letter animations */
.p4-neon-text .l-c {
  animation: p4NeonLetterFlickerC 7s infinite;
}

.p4-neon-text .l-i {
  animation: p4NeonLetterFlickerI 9s infinite;
}

.p4-neon-text .l-h,
.p4-neon-text .l-l1,
.p4-neon-text .l-l2 {
  animation: p4NeonLetterBreathe 4s ease-in-out infinite alternate;
}

/* Sway animation for Neon Sign */
@keyframes p4NeonSignSway {
  0% { transform: rotate(-2.5deg); }

  100% { transform: rotate(2.5deg); }

}

/* Letter Flicker C */
@keyframes p4NeonLetterFlickerC {
  0%, 18%, 22%, 25%, 53%, 57%, 100% {
    opacity: 1;
    text-shadow: 0 0 4px #fff, 0 0 10px #f472b6, 0 0 20px #ec4899, 0 0 30px #db2777;
    color: #ffe4e6;
  }

  20%, 24%, 55% {
    opacity: 0.3;
    text-shadow: 0 0 2px rgba(244, 114, 182, 0.3);
    color: rgba(255, 228, 230, 0.4);
  }

}

/* Letter Flicker I */
@keyframes p4NeonLetterFlickerI {
  0%, 34%, 38%, 42%, 46%, 78%, 82%, 100% {
    opacity: 1;
    text-shadow: 0 0 4px #fff, 0 0 10px #f472b6, 0 0 20px #ec4899, 0 0 30px #db2777;
    color: #ffe4e6;
  }

  36%, 40%, 44%, 80% {
    opacity: 0.15;
    text-shadow: 0 0 1px rgba(244, 114, 182, 0.15);
    color: rgba(255, 228, 230, 0.25);
  }

}

/* General breathing animation for stable letters */
@keyframes p4NeonLetterBreathe {
  0% { filter: brightness(0.9) contrast(0.9); }

  100% { filter: brightness(1.15) contrast(1.1); }

}

/* ACTIVE STATE (Power Surge) */
.p4-party-neon-chill.active .p4-neon-sign-board {
  animation: p4NeonSignActiveShake 0.07s linear infinite;
  box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.9), 0 0 25px rgba(6, 182, 212, 0.6);
  border-color: #334155;
}

/* Tubing Border Color Surge */
.p4-party-neon-chill.active .p4-neon-tubing-border {
  animation: p4NeonBorderSurge 0.15s linear infinite;
  transition: none; /* Disable transition during power surge */
}

/* Text & Letters Color Surge */
.p4-party-neon-chill.active .p4-neon-text span {
  animation: p4NeonTextSurge 0.2s linear infinite;
  transition: none; /* Disable transition during power surge */
}

/* Cascade letter animations slightly using animation delays */
.p4-party-neon-chill.active .l-c { animation-delay: 0s; }

.p4-party-neon-chill.active .l-h { animation-delay: 0.04s; }

.p4-party-neon-chill.active .l-i { animation-delay: 0.08s; }

.p4-party-neon-chill.active .l-l1 { animation-delay: 0.12s; }

.p4-party-neon-chill.active .l-l2 { animation-delay: 0.16s; }

/* Active shake animation */
@keyframes p4NeonSignActiveShake {
  0% { transform: translate(0, 0) rotate(0deg); }

  20% { transform: translate(-2px, 1px) rotate(-0.5deg); }

  40% { transform: translate(1.5px, -1px) rotate(0.5deg); }

  60% { transform: translate(-1px, -1.5px) rotate(-0.3deg); }

  80% { transform: translate(2px, 1px) rotate(0.4deg); }

  100% { transform: translate(0, 0) rotate(0deg); }

}

/* Tubing border surge keyframes */
@keyframes p4NeonBorderSurge {
  0%, 100% {
    border-color: #06b6d4;
    box-shadow: 0 0 15px #06b6d4, inset 0 0 10px #0891b2;
  }

  50% {
    border-color: #ec4899;
    box-shadow: 0 0 15px #ec4899, inset 0 0 10px #db2777;
  }

}

/* Text surge keyframes */
@keyframes p4NeonTextSurge {
  0%, 100% {
    color: #e0f2fe;
    text-shadow: 0 0 6px #fff, 0 0 15px #06b6d4, 0 0 30px #0891b2, 0 0 45px #0369a1;
  }

  50% {
    color: #fdf2f8;
    text-shadow: 0 0 6px #fff, 0 0 15px #f472b6, 0 0 30px #ec4899, 0 0 45px #be185d;
  }

}

/* 3. Confetti Cannon Left */
.p4-party-cannon-l {
  left: 2%; bottom: 10px;
  width: 55px; height: 55px;
}

.p4-party-cannon-l .p4-cannon-barrel {
  transform: rotate(-35deg);
  transition: transform 1.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  animation: p4CannonSwayL 4s ease-in-out infinite alternate;
}

@keyframes p4CannonSwayL {
  0% { transform: rotate(-38deg); }

  100% { transform: rotate(-32deg); }

}

.p4-party-cannon-l.active .p4-cannon-barrel {
  animation: p4CannonRecoilL 0.7s cubic-bezier(0.15, 0.85, 0.15, 1);
  transition: none; /* Disable transition during active animation */
}

@keyframes p4CannonRecoilL {
  0% { transform: rotate(-35deg) translate(0, 0); }

  12% { transform: rotate(-42deg) translate(-14px, 4px) scale(0.85); }

  100% { transform: rotate(-35deg) translate(0, 0); }

}

/* Neon laser pulse stripe */
.p4-cannon-laser-line {
  animation: p4CannonLaserPulse 2.5s ease-in-out infinite alternate;
  filter: drop-shadow(0 0 4px #00d2ff);
}

@keyframes p4CannonLaserPulse {
  0% { opacity: 0.6; stroke-width: 1.5px; }

  100% { opacity: 1; stroke-width: 2.5px; filter: drop-shadow(0 0 6px #00d2ff) brightness(1.25); }

}

/* Muzzle glow breathe */
.p4-cannon-muzzle-glow {
  animation: p4CannonMuzzleGlowPulse 3s ease-in-out infinite alternate;
}

@keyframes p4CannonMuzzleGlowPulse {
  0% { transform: scale(0.9); opacity: 0.4; }

  100% { transform: scale(1.15); opacity: 0.75; }

}

/* Continuous Idle Confetti Drift - Left */
.p4-party-cannon-l .p4-cannon-idle-confetti * {
  animation: p4IdleConfettiDriftL 3.5s ease-in-out infinite;
  transform-origin: center;
}

.p4-party-cannon-l .p4-c-idle-1 { animation-delay: 0s; }

.p4-party-cannon-l .p4-c-idle-2 { animation-delay: 1.2s; }

.p4-party-cannon-l .p4-c-idle-3 { animation-delay: 2.4s; }

@keyframes p4IdleConfettiDriftL {
  0% { transform: translate(0, 0) scale(0.7) rotate(0deg); opacity: 0; }

  25% { opacity: 0.85; }

  75% { opacity: 0.85; }

  100% { transform: translate(18px, -12px) scale(0.3) rotate(240deg); opacity: 0; }

}

/* Active Confetti Blast Group */
.p4-cannon-active-blast {
  opacity: 0;
  pointer-events: none;
}

.p4-party-cannon-l.active .p4-cannon-active-blast,
.p4-party-cannon-r.active .p4-cannon-active-blast {
  opacity: 1;
}

.p4-party-cannon-l.active .p4-c-spark-lines {
  animation: p4SparkBurstL 0.6s ease-out forwards;
}

.p4-party-cannon-l.active .p4-c-blast-1 {
  animation: p4BlastParticleL1 0.7s cubic-bezier(0.1, 0.8, 0.3, 1) forwards;
}

.p4-party-cannon-l.active .p4-c-blast-2 {
  animation: p4BlastParticleL2 0.8s cubic-bezier(0.1, 0.8, 0.3, 1) forwards;
}

.p4-party-cannon-l.active .p4-c-blast-3 {
  animation: p4BlastParticleL3 0.75s cubic-bezier(0.1, 0.8, 0.3, 1) forwards;
}

.p4-party-cannon-l.active .p4-c-blast-4 {
  animation: p4BlastParticleL4 0.65s cubic-bezier(0.1, 0.8, 0.3, 1) forwards;
}

.p4-party-cannon-l.active .p4-c-blast-5 {
  animation: p4BlastParticleL5 0.85s cubic-bezier(0.1, 0.8, 0.3, 1) forwards;
}

@keyframes p4SparkBurstL {
  0% { opacity: 0; stroke-width: 1px; transform: scale(0.6); }

  20% { opacity: 1; stroke-width: 2.5px; }

  100% { opacity: 0; transform: scale(1.6); }

}

@keyframes p4BlastParticleL1 {
  0% { transform: translate(0, 0) rotate(0deg) scale(0.3); opacity: 0; }

  15% { opacity: 1; }

  100% { transform: translate(50px, -35px) rotate(420deg) scale(1.2); opacity: 0; }

}

@keyframes p4BlastParticleL2 {
  0% { transform: translate(0, 0) rotate(0deg) scale(0.3); opacity: 0; }

  15% { opacity: 1; }

  100% { transform: translate(75px, -15px) rotate(-360deg) scale(1); opacity: 0; }

}

@keyframes p4BlastParticleL3 {
  0% { transform: translate(0, 0) rotate(0deg) scale(0.3); opacity: 0; }

  15% { opacity: 1; }

  100% { transform: translate(60px, 15px) rotate(280deg) scale(1.15); opacity: 0; }

}

@keyframes p4BlastParticleL4 {
  0% { transform: translate(0, 0) rotate(0deg) scale(0.3); opacity: 0; }

  15% { opacity: 1; }

  100% { transform: translate(45px, -10px) rotate(-180deg) scale(0.8); opacity: 0; }

}

@keyframes p4BlastParticleL5 {
  0% { transform: translate(0, 0) rotate(0deg) scale(0.3); opacity: 0; }

  15% { opacity: 1; }

  100% { transform: translate(85px, -50px) rotate(540deg) scale(0.9); opacity: 0; }

}

/* Blast Ring Wave Overlay */
.p4-cannon-blast-ring {
  position: absolute;
  width: 18px; height: 18px;
  border-radius: 50%;
  border: 2px solid #00d2ff;
  box-shadow: 0 0 8px #00d2ff, inset 0 0 4px #38bdf8;
  opacity: 0;
  pointer-events: none;
  transform: scale(0.5);
}

.p4-party-cannon-l .p4-cannon-blast-ring {
  left: 36px; top: 10px;
}

.p4-party-cannon-r .p4-cannon-blast-ring {
  left: 4px; top: 10px;
}

.p4-party-cannon-l.active .p4-cannon-blast-ring,
.p4-party-cannon-r.active .p4-cannon-blast-ring {
  animation: p4BlastRingWave 0.6s cubic-bezier(0.1, 0.8, 0.3, 1) forwards;
}

@keyframes p4BlastRingWave {
  0% { opacity: 0; transform: scale(0.5); }

  25% { opacity: 1; }

  100% { opacity: 0; transform: scale(3.5); border-color: #e056fd; box-shadow: 0 0 15px #e056fd; }

}

/* 4. Confetti Cannon Right */
.p4-party-cannon-r {
  right: 2%; bottom: 10px;
  width: 55px; height: 55px;
}

.p4-party-cannon-r .p4-cannon-barrel {
  transform: rotate(-35deg);
  transition: transform 1.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  animation: p4CannonSwayR 4s ease-in-out infinite alternate;
}

@keyframes p4CannonSwayR {
  0% { transform: rotate(-32deg); }

  100% { transform: rotate(-38deg); }

}

.p4-party-cannon-r.active .p4-cannon-barrel {
  animation: p4CannonRecoilR 0.7s cubic-bezier(0.15, 0.85, 0.15, 1);
  transition: none; /* Disable transition during active animation */
}

@keyframes p4CannonRecoilR {
  0% { transform: rotate(-35deg) translate(0, 0); }

  12% { transform: rotate(-28deg) translate(14px, 4px) scale(0.85); }

  100% { transform: rotate(-35deg) translate(0, 0); }

}

/* Continuous Idle Confetti Drift - Right */
.p4-party-cannon-r .p4-cannon-idle-confetti * {
  animation: p4IdleConfettiDriftR 3.5s ease-in-out infinite;
  transform-origin: center;
}

.p4-party-cannon-r .p4-c-idle-1 { animation-delay: 0s; }

.p4-party-cannon-r .p4-c-idle-2 { animation-delay: 1.2s; }

.p4-party-cannon-r .p4-c-idle-3 { animation-delay: 2.4s; }

@keyframes p4IdleConfettiDriftR {
  0% { transform: translate(0, 0) scale(0.7) rotate(0deg); opacity: 0; }

  25% { opacity: 0.85; }

  75% { opacity: 0.85; }

  100% { transform: translate(-18px, -12px) scale(0.3) rotate(-240deg); opacity: 0; }

}

/* Right active blast sparks & particle bursts */
.p4-party-cannon-r.active .p4-c-spark-lines {
  animation: p4SparkBurstR 0.6s ease-out forwards;
}

.p4-party-cannon-r.active .p4-c-blast-1 {
  animation: p4BlastParticleR1 0.7s cubic-bezier(0.1, 0.8, 0.3, 1) forwards;
}

.p4-party-cannon-r.active .p4-c-blast-2 {
  animation: p4BlastParticleR2 0.8s cubic-bezier(0.1, 0.8, 0.3, 1) forwards;
}

.p4-party-cannon-r.active .p4-c-blast-3 {
  animation: p4BlastParticleR3 0.75s cubic-bezier(0.1, 0.8, 0.3, 1) forwards;
}

.p4-party-cannon-r.active .p4-c-blast-4 {
  animation: p4BlastParticleR4 0.65s cubic-bezier(0.1, 0.8, 0.3, 1) forwards;
}

.p4-party-cannon-r.active .p4-c-blast-5 {
  animation: p4BlastParticleR5 0.85s cubic-bezier(0.1, 0.8, 0.3, 1) forwards;
}

@keyframes p4SparkBurstR {
  0% { opacity: 0; stroke-width: 1px; transform: scale(0.6); }

  20% { opacity: 1; stroke-width: 2.5px; }

  100% { opacity: 0; transform: scale(1.6); }

}

@keyframes p4BlastParticleR1 {
  0% { transform: translate(0, 0) rotate(0deg) scale(0.3); opacity: 0; }

  15% { opacity: 1; }

  100% { transform: translate(-50px, -35px) rotate(-420deg) scale(1.2); opacity: 0; }

}

@keyframes p4BlastParticleR2 {
  0% { transform: translate(0, 0) rotate(0deg) scale(0.3); opacity: 0; }

  15% { opacity: 1; }

  100% { transform: translate(-75px, -15px) rotate(360deg) scale(1); opacity: 0; }

}

@keyframes p4BlastParticleR3 {
  0% { transform: translate(0, 0) rotate(0deg) scale(0.3); opacity: 0; }

  15% { opacity: 1; }

  100% { transform: translate(-60px, 15px) rotate(-280deg) scale(1.15); opacity: 0; }

}

@keyframes p4BlastParticleR4 {
  0% { transform: translate(0, 0) rotate(0deg) scale(0.3); opacity: 0; }

  15% { opacity: 1; }

  100% { transform: translate(-45px, -10px) rotate(180deg) scale(0.8); opacity: 0; }

}

@keyframes p4BlastParticleR5 {
  0% { transform: translate(0, 0) rotate(0deg) scale(0.3); opacity: 0; }

  15% { opacity: 1; }

  100% { transform: translate(-85px, -50px) rotate(-540deg) scale(0.9); opacity: 0; }

}

/* 5. Balloons Left */
.p4-party-balloons-l {
  left: 20%; top: 120px;
  width: 65px; height: 90px;
  transform-origin: center bottom;
  animation: p4BalloonsIdleBobL 7s ease-in-out infinite alternate;
}

@keyframes p4BalloonsIdleBobL {
  0% { transform: translateY(0) rotate(-3deg); }

  50% { transform: translateY(-7px) rotate(1.5deg); }

  100% { transform: translateY(-14px) rotate(-2deg); }

}

.p4-party-balloons-l.active,
.p4-party-balloons-r.active {
  animation: p4BalloonsActiveBounce 1s cubic-bezier(0.15, 0.85, 0.3, 1.3);
  transition: none; /* Disable transition while active */
}

@keyframes p4BalloonsActiveBounce {
  0% { transform: scale(1) translateY(0); }

  15% { transform: scale(0.7, 1.4) translateY(-25px) rotate(8deg); filter: brightness(1.3) saturate(1.2) drop-shadow(0 8px 16px rgba(0,0,0,0.3)); }

  40% { transform: scale(1.2, 0.8) translateY(10px) rotate(-5deg); }

  65% { transform: scale(0.9, 1.1) translateY(-4px); }

  85% { transform: scale(1.04, 0.96) translateY(1px); }

  100% { transform: scale(1) translateY(0); }

}

/* Independent sub-balloon micro-sways inside the bundle */
.p4-balloon-bundle-group .p4-sb-1 {
  animation: p4SubBalloonSway1 5s ease-in-out infinite alternate;
}

.p4-balloon-bundle-group .p4-sb-2 {
  animation: p4SubBalloonSway2 6s ease-in-out infinite alternate;
}

.p4-balloon-bundle-group .p4-sb-3 {
  animation: p4SubBalloonSway3 4.5s ease-in-out infinite alternate;
}

@keyframes p4SubBalloonSway1 {
  0% { transform: translate(0, 0) rotate(-2.5deg); }

  100% { transform: translate(-2px, -3px) rotate(2deg); }

}

@keyframes p4SubBalloonSway2 {
  0% { transform: translate(0, 0) rotate(3deg); }

  100% { transform: translate(2px, -2px) rotate(-3deg); }

}

@keyframes p4SubBalloonSway3 {
  0% { transform: translate(0, 0) rotate(-1.5deg); }

  100% { transform: translate(1px, -4px) rotate(1.5deg); }

}

/* Active Sparkles Burst */
.p4-balloon-sparkles path {
  opacity: 0;
  transform-origin: center;
}

.p4-party-balloons-l.active .p4-b-sparkle,
.p4-party-balloons-r.active .p4-b-sparkle {
  animation: p4BalloonsSparkleBurst 0.8s cubic-bezier(0.1, 0.8, 0.3, 1) forwards;
}

.p4-party-balloons-l.active .p4-bs-1,
.p4-party-balloons-r.active .p4-bs-1 {
  animation-delay: 0.05s;
}

.p4-party-balloons-l.active .p4-bs-2,
.p4-party-balloons-r.active .p4-bs-2 {
  animation-delay: 0.15s;
}

.p4-party-balloons-l.active .p4-bs-3,
.p4-party-balloons-r.active .p4-bs-3 {
  animation-delay: 0.1s;
}

@keyframes p4BalloonsSparkleBurst {
  0% { opacity: 0; transform: scale(0.3) rotate(0deg); }

  30% { opacity: 1; }

  100% { opacity: 0; transform: scale(1.6) rotate(90deg); }

}

/* 6. Balloons Right */
.p4-party-balloons-r {
  right: 22%; top: 140px;
  width: 65px; height: 90px;
  transform-origin: center bottom;
  animation: p4BalloonsIdleBobR 7s ease-in-out infinite alternate;
}

@keyframes p4BalloonsIdleBobR {
  0% { transform: translateY(-14px) rotate(2deg); }

  50% { transform: translateY(-7px) rotate(-1.5deg); }

  100% { transform: translateY(0) rotate(3deg); }

}

/* 7. Garland Banner */
.p4-party-garland {
  left: 10%; top: 5px;
  width: 80%; height: 50px;
  animation: p4GarlandIdleSwing 6s ease-in-out infinite alternate;
  transform-origin: top center;
  transition: transform 1.5s ease-out;
}

@keyframes p4GarlandIdleSwing {
  0% { transform: rotate(-1.5deg) translateY(0); }

  100% { transform: rotate(1.5deg) translateY(2px); }

}

.p4-party-garland.active {
  animation: p4GarlandRippleActive 1s cubic-bezier(0.15, 0.85, 0.3, 1.2);
  transition: none; /* Disable transition during active animation */
}

@keyframes p4GarlandRippleActive {
  0% { transform: scaleY(1) rotate(0); }

  20% { transform: scaleY(1.3) rotate(-3.5deg) translateY(5px); }

  40% { transform: scaleY(0.7) rotate(3.5deg) translateY(-3px); }

  60% { transform: scaleY(1.1) rotate(-1.5deg) translateY(2px); }

  80% { transform: scaleY(0.9) rotate(1.5deg) translateY(-1px); }

  100% { transform: scaleY(1) rotate(0); }

}

/* Fairy LED light wraps */
.p4-g-light {
  animation: p4GarlandLightGlow 2.5s ease-in-out infinite alternate;
  filter: drop-shadow(0 0 3px currentColor);
  transition: color 1.5s ease, filter 1.5s ease, opacity 1.5s ease;
}

.p4-gl-1, .p4-gl-5, .p4-gl-9, .p4-gl-13 { animation-delay: 0s; color: #00d2ff; }

.p4-gl-2, .p4-gl-6, .p4-gl-10, .p4-gl-14 { animation-delay: 0.6s; color: #f472b6; }

.p4-gl-3, .p4-gl-7, .p4-gl-11, .p4-gl-15 { animation-delay: 1.2s; color: #ffd966; }

.p4-gl-4, .p4-gl-8, .p4-gl-12, .p4-gl-16 { animation-delay: 1.8s; color: #a855f7; }

@keyframes p4GarlandLightGlow {
  0% { opacity: 0.5; filter: drop-shadow(0 0 2px currentColor) brightness(0.85); }

  100% { opacity: 1; filter: drop-shadow(0 0 6px currentColor) brightness(1.35); }

}

/* Continuous Subtle Ornament Sway */
.p4-g-orn {
  transform-origin: 0 0;
  animation: p4GarlandOrnSway 4s ease-in-out infinite alternate;
}

.p4-g-flag { animation-duration: 4.5s; }

.p4-g-star { animation-duration: 3.8s; }

.p4-g-ball { animation-duration: 5s; }

.p4-gf-1, .p4-gs-1, .p4-gf-5, .p4-gs-3 { animation-delay: 0s; }

.p4-gf-2, .p4-gb-1, .p4-gf-6, .p4-gb-2 { animation-delay: 1s; }

.p4-gf-3, .p4-gs-2, .p4-gf-7, .p4-gs-4 { animation-delay: 2s; }

.p4-gf-4, .p4-gf-8 { animation-delay: 3s; }

@keyframes p4GarlandOrnSway {
  0% { transform: rotate(-5deg); }

  100% { transform: rotate(5deg); }

}

/* Active clicked state loops for ornaments & lights */
.p4-party-garland.active .p4-g-orn {
  animation: p4OrnamentBobActive 0.8s ease-in-out;
}

@keyframes p4OrnamentBobActive {
  0%, 100% { transform: scale(1) rotate(0deg); }

  30% { transform: scale(1.25, 0.75) translateY(7px) rotate(-14deg); }

  65% { transform: scale(0.85, 1.15) translateY(-5px) rotate(14deg); }

}

.p4-party-garland.active .p4-g-light {
  animation: p4GarlandLightChaseActive 0.15s linear infinite;
  transition: none;
}

.p4-party-garland.active .p4-gl-1,
.p4-party-garland.active .p4-gl-5,
.p4-party-garland.active .p4-gl-9,
.p4-party-garland.active .p4-gl-13 { animation-delay: 0s; }

.p4-party-garland.active .p4-gl-2,
.p4-party-garland.active .p4-gl-6,
.p4-party-garland.active .p4-gl-10,
.p4-party-garland.active .p4-gl-14 { animation-delay: 0.03s; }

.p4-party-garland.active .p4-gl-3,
.p4-party-garland.active .p4-gl-7,
.p4-party-garland.active .p4-gl-11,
.p4-party-garland.active .p4-gl-15 { animation-delay: 0.06s; }

.p4-party-garland.active .p4-gl-4,
.p4-party-garland.active .p4-gl-8,
.p4-party-garland.active .p4-gl-12,
.p4-party-garland.active .p4-gl-16 { animation-delay: 0.09s; }

@keyframes p4GarlandLightChaseActive {
  0%, 100% { filter: drop-shadow(0 0 10px currentColor) brightness(2.2); opacity: 1; }

  50% { filter: drop-shadow(0 0 2px currentColor) brightness(0.5); opacity: 0.4; }

}

/* 8. Hanging Mistletoe */
.p4-party-mistletoe {
  left: 30%; top: 0;
  width: 45px; height: 65px;
  transform-origin: top center;
  animation: p4MistletoeIdleSway 5.5s ease-in-out infinite alternate;
  transition: transform 1.2s cubic-bezier(0.25, 0.8, 0.25, 1);
}

@keyframes p4MistletoeIdleSway {
  0% { transform: rotate(-5deg); }

  100% { transform: rotate(5deg); }

}

/* Pearly berries glowing loop */
.p4-mistletoe-berry {
  animation: p4MistletoeBerryGlow 2.5s ease-in-out infinite alternate;
}

@keyframes p4MistletoeBerryGlow {
  0% { filter: drop-shadow(0 0 1px #99f6e4) brightness(0.9); }

  100% { filter: drop-shadow(0 0 4px #2dd4bf) brightness(1.2); }

}

.p4-party-mistletoe.active {
  animation: p4MistletoeActiveShake 0.9s cubic-bezier(0.15, 0.85, 0.2, 1.2);
  transition: none; /* Disable transition while active */
}

@keyframes p4MistletoeActiveShake {
  0%, 100% { transform: rotate(0) scale(1); }

  15% { transform: rotate(-25deg) scale(1.1); }

  30% { transform: rotate(20deg) scale(0.95); }

  45% { transform: rotate(-15deg) scale(1.05); }

  60% { transform: rotate(10deg) scale(0.98); }

  75% { transform: rotate(-5deg) scale(1.02); }

}

/* Floating Love Hearts Fountain */
.p4-love-heart {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  transform-origin: center;
}

.p4-love-heart.h-1 { color: #f43f5e; font-size: 18px; left: 10px; bottom: -10px; }

.p4-love-heart.h-2 { color: #ec4899; font-size: 14px; left: 22px; bottom: -8px; }

.p4-love-heart.h-3 { color: #f472b6; font-size: 15px; left: 5px; bottom: -5px; }

.p4-party-mistletoe.active .h-1 {
  animation: p4HeartFloat1 1.2s cubic-bezier(0.1, 0.8, 0.3, 1) forwards;
}

.p4-party-mistletoe.active .h-2 {
  animation: p4HeartFloat2 1.4s cubic-bezier(0.1, 0.8, 0.3, 1) forwards;
  animation-delay: 0.15s;
}

.p4-party-mistletoe.active .h-3 {
  animation: p4HeartFloat3 1.3s cubic-bezier(0.1, 0.8, 0.3, 1) forwards;
  animation-delay: 0.08s;
}

@keyframes p4HeartFloat1 {
  0% { opacity: 0; transform: translateY(0) scale(0.4) rotate(0deg); }

  20% { opacity: 1; }

  100% { opacity: 0; transform: translateY(-45px) translateX(-15px) scale(1.3) rotate(-35deg); }

}

@keyframes p4HeartFloat2 {
  0% { opacity: 0; transform: translateY(0) scale(0.4) rotate(0deg); }

  20% { opacity: 1; }

  100% { opacity: 0; transform: translateY(-55px) translateX(12px) scale(1.1) rotate(40deg); }

}

@keyframes p4HeartFloat3 {
  0% { opacity: 0; transform: translateY(0) scale(0.4) rotate(0deg); }

  20% { opacity: 1; }

  100% { opacity: 0; transform: translateY(-38px) translateX(-4px) scale(1.2) rotate(-15deg); }

}

/* 9. Fairy Lights String 1 & 10. Fairy Lights String 2 */
.p4-party-lights-1, .p4-party-lights-2 {
  position: absolute; left: 0; top: 0; width: 100%; height: 20px;
  pointer-events: none;
}

.p4-party-lights-2 { top: 40px; }

/* Keep original styles scoped for String 2 fallback/standard modes */






/* Keep original bulb-1 to bulb-5 styles scoped for fallback/standard modes */






/* ── HIGH FIDELITY DESIGN FOR STRING 1 (NIGHT HOLIDAY MODE) ── */
body.p4.night.holiday-mode .p4-party-lights-1 {
  height: 35px;
  transform-origin: top center;
  animation: p4LightsIdleSway 6s ease-in-out infinite alternate;
  transition: transform 1.8s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes p4LightsIdleSway {
  0% { transform: translateY(0) rotate(-0.4deg); }

  100% { transform: translateY(1.2px) rotate(0.4deg); }

}

body.p4.night.holiday-mode .p4-party-lights-1.active {
  animation: p4LightsActiveShake 0.12s linear infinite alternate;
  transition: none;
}

@keyframes p4LightsActiveShake {
  0% { transform: translateY(0) rotate(-1.2deg); }

  100% { transform: translateY(1.5px) rotate(1.2deg); }

}

/* Wire SVG style */
body.p4.night.holiday-mode .p4-party-lights-1 .p4-lights-wire-svg {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 25px;
  pointer-events: none;
  z-index: 1;
}

/* Volumetric 3D bulb styling */
body.p4.night.holiday-mode .p4-party-lights-1 .p4-light-bulb {
  position: absolute;
  width: 15px;
  height: 20px;
  border-radius: 50% 50% 40% 40%;
  pointer-events: auto;
  cursor: pointer;
  z-index: 2;
  transform-origin: top center;
  background: radial-gradient(circle at 35% 35%, #ffffff 8%, var(--bulb-color) 65%, rgba(0, 0, 0, 0.3) 100%);
  box-shadow: 
    0 0 14px var(--bulb-glow), 
    inset 0 2px 3px rgba(255, 255, 255, 0.85), 
    inset 0 -2px 3px rgba(0, 0, 0, 0.35);
  animation: p4LightBreathe 3s ease-in-out infinite alternate;
  /* Smooth transition for active -> idle dampening */
  transition: 
    filter 1.6s cubic-bezier(0.16, 1, 0.3, 1),
    transform 1.6s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 1.6s cubic-bezier(0.16, 1, 0.3, 1),
    opacity 1.6s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Socket caps for the bulbs */
body.p4.night.holiday-mode .p4-party-lights-1 .p4-light-bulb::before {
  content: '';
  position: absolute;
  top: -3.5px;
  left: 4.5px;
  width: 6px;
  height: 4.5px;
  background: linear-gradient(90deg, #1e293b 0%, #475569 50%, #0f172a 100%);
  border-bottom: 1px solid #111827;
  border-radius: 1.5px 1.5px 0 0;
}

/* Hover glow feedback */
body.p4.night.holiday-mode .p4-party-lights-1 .p4-light-bulb:hover {
  filter: brightness(1.5);
  box-shadow: 
    0 0 22px var(--bulb-glow), 
    0 0 35px var(--bulb-glow), 
    inset 0 2px 3px rgba(255, 255, 255, 0.9);
  transform: scale(1.15) rotate(calc(var(--idle-rotation) * 1.3)) !important;
  z-index: 10;
}

/* Staggered bulb positions and colors matching the wire peaks and valleys */
body.p4.night.holiday-mode .p4-party-lights-1 .bulb-1 {
  left: 5%; top: 7px;
  --bulb-color: #ff2a6d; /* Cyber Pink */
  --bulb-glow: rgba(255, 42, 109, 0.85);
  --idle-rotation: -9deg;
  transform: rotate(var(--idle-rotation));
  animation-delay: 0.1s;
}

body.p4.night.holiday-mode .p4-party-lights-1 .bulb-2 {
  left: 15%; top: 7px;
  --bulb-color: #05d9e8; /* Electric Cyan */
  --bulb-glow: rgba(5, 217, 232, 0.85);
  --idle-rotation: 9deg;
  transform: rotate(var(--idle-rotation));
  animation-delay: 0.4s;
}

body.p4.night.holiday-mode .p4-party-lights-1 .bulb-3 {
  left: 25%; top: 7px;
  --bulb-color: #fffe09; /* Canary Yellow */
  --bulb-glow: rgba(255, 254, 9, 0.85);
  --idle-rotation: -9deg;
  transform: rotate(var(--idle-rotation));
  animation-delay: 0.7s;
}

body.p4.night.holiday-mode .p4-party-lights-1 .bulb-4 {
  left: 35%; top: 7px;
  --bulb-color: #01ff70; /* Lime Green */
  --bulb-glow: rgba(1, 255, 112, 0.85);
  --idle-rotation: 9deg;
  transform: rotate(var(--idle-rotation));
  animation-delay: 1.0s;
}

body.p4.night.holiday-mode .p4-party-lights-1 .bulb-5 {
  left: 45%; top: 7px;
  --bulb-color: #b900ff; /* Electric Purple */
  --bulb-glow: rgba(185, 0, 255, 0.85);
  --idle-rotation: -7deg;
  transform: rotate(var(--idle-rotation));
  animation-delay: 1.3s;
}

body.p4.night.holiday-mode .p4-party-lights-1 .bulb-6 {
  left: 55%; top: 7px;
  --bulb-color: #ff5e00; /* Neon Orange */
  --bulb-glow: rgba(255, 94, 0, 0.85);
  --idle-rotation: 7deg;
  transform: rotate(var(--idle-rotation));
  animation-delay: 1.6s;
}

body.p4.night.holiday-mode .p4-party-lights-1 .bulb-7 {
  left: 65%; top: 7px;
  --bulb-color: #ff007f; /* Hot Pink */
  --bulb-glow: rgba(255, 0, 127, 0.85);
  --idle-rotation: -9deg;
  transform: rotate(var(--idle-rotation));
  animation-delay: 1.9s;
}

body.p4.night.holiday-mode .p4-party-lights-1 .bulb-8 {
  left: 75%; top: 7px;
  --bulb-color: #00f3ff; /* Electric Cyan */
  --bulb-glow: rgba(0, 243, 255, 0.85);
  --idle-rotation: 9deg;
  transform: rotate(var(--idle-rotation));
  animation-delay: 2.2s;
}

body.p4.night.holiday-mode .p4-party-lights-1 .bulb-9 {
  left: 85%; top: 7px;
  --bulb-color: #ffbf00; /* Warm Amber */
  --bulb-glow: rgba(255, 191, 0, 0.85);
  --idle-rotation: -8deg;
  transform: rotate(var(--idle-rotation));
  animation-delay: 2.5s;
}

body.p4.night.holiday-mode .p4-party-lights-1 .bulb-10 {
  left: 95%; top: 7px;
  --bulb-color: #00ffaa; /* Emerald Green */
  --bulb-glow: rgba(0, 255, 170, 0.85);
  --idle-rotation: 8deg;
  transform: rotate(var(--idle-rotation));
  animation-delay: 2.8s;
}

/* Idle slow breathing animation */
@keyframes p4LightBreathe {
  0%, 100% {
    opacity: 0.65;
    filter: brightness(0.85) drop-shadow(0 0 3px var(--bulb-glow));
  }

  50% {
    opacity: 1;
    filter: brightness(1.35) drop-shadow(0 0 14px var(--bulb-glow)) drop-shadow(0 0 20px var(--bulb-glow));
  }

}

/* Active Chase wave animation: high speed strobe with physical scale pulse */
body.p4.night.holiday-mode .p4-party-lights-1.active .p4-light-bulb {
  animation: p4LightChase 0.5s linear infinite;
  transition: none; /* Instant feedback on active */
}

/* Delay staggered offsets for chasing wave */
body.p4.night.holiday-mode .p4-party-lights-1.active .bulb-1  { animation-delay: 0s; }

body.p4.night.holiday-mode .p4-party-lights-1.active .bulb-2  { animation-delay: 0.05s; }

body.p4.night.holiday-mode .p4-party-lights-1.active .bulb-3  { animation-delay: 0.1s; }

body.p4.night.holiday-mode .p4-party-lights-1.active .bulb-4  { animation-delay: 0.15s; }

body.p4.night.holiday-mode .p4-party-lights-1.active .bulb-5  { animation-delay: 0.2s; }

body.p4.night.holiday-mode .p4-party-lights-1.active .bulb-6  { animation-delay: 0.25s; }

body.p4.night.holiday-mode .p4-party-lights-1.active .bulb-7  { animation-delay: 0.3s; }

body.p4.night.holiday-mode .p4-party-lights-1.active .bulb-8  { animation-delay: 0.35s; }

body.p4.night.holiday-mode .p4-party-lights-1.active .bulb-9  { animation-delay: 0.4s; }

body.p4.night.holiday-mode .p4-party-lights-1.active .bulb-10 { animation-delay: 0.45s; }

@keyframes p4LightChase {
  0%, 100% {
    opacity: 0.4;
    filter: brightness(0.65) drop-shadow(0 0 2px var(--bulb-glow));
    transform: scale(0.95) rotate(var(--idle-rotation));
  }

  50% {
    opacity: 1;
    filter: brightness(2.1) drop-shadow(0 0 24px var(--bulb-glow)) drop-shadow(0 0 38px var(--bulb-glow));
    transform: scale(1.22) rotate(calc(var(--idle-rotation) * 2.2));
  }

}

@keyframes p4LightBlink {
  0%, 100% { opacity: 0.4; filter: brightness(0.5); }

  50% { opacity: 1; filter: brightness(1.3); box-shadow: 0 0 12px currentColor; }

}

/* ── HIGH FIDELITY DESIGN FOR STRING 2 (NIGHT HOLIDAY MODE) ── */
body.p4.night.holiday-mode .p4-party-lights-2 {
  top: 40px;
  height: 35px;
  transform-origin: top center;
  /* Phase/delay offset from String 1 for natural asynchronous swing */
  animation: p4Lights2IdleSway 7s ease-in-out infinite alternate;
  animation-delay: -1.5s;
  transition: transform 1.8s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes p4Lights2IdleSway {
  0% { transform: translateY(0) rotate(0.5deg); }

  100% { transform: translateY(1.4px) rotate(-0.5deg); }

}

body.p4.night.holiday-mode .p4-party-lights-2.active {
  animation: p4Lights2ActiveShake 0.13s linear infinite alternate;
  transition: none;
}

@keyframes p4Lights2ActiveShake {
  0% { transform: translateY(0) rotate(1.4deg); }

  100% { transform: translateY(1.8px) rotate(-1.4deg); }

}

/* Wire SVG style for String 2 */
body.p4.night.holiday-mode .p4-party-lights-2 .p4-lights-wire-svg {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 25px;
  pointer-events: none;
  z-index: 1;
}

/* Volumetric 3D bulb styling for String 2 */
body.p4.night.holiday-mode .p4-party-lights-2 .p4-light-bulb {
  position: absolute;
  width: 15px;
  height: 20px;
  border-radius: 50% 50% 40% 40%;
  pointer-events: auto;
  cursor: pointer;
  z-index: 2;
  transform-origin: top center;
  background: radial-gradient(circle at 35% 35%, #ffffff 8%, var(--bulb-color) 65%, rgba(0, 0, 0, 0.3) 100%);
  box-shadow: 
    0 0 14px var(--bulb-glow), 
    inset 0 2px 3px rgba(255, 255, 255, 0.85), 
    inset 0 -2px 3px rgba(0, 0, 0, 0.35);
  animation: p4Light2Breathe 3.2s ease-in-out infinite alternate;
  /* Smooth transition for active -> idle dampening */
  transition: 
    filter 1.6s cubic-bezier(0.16, 1, 0.3, 1),
    transform 1.6s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 1.6s cubic-bezier(0.16, 1, 0.3, 1),
    opacity 1.6s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Socket caps for String 2 bulbs */
body.p4.night.holiday-mode .p4-party-lights-2 .p4-light-bulb::before {
  content: '';
  position: absolute;
  top: -3.5px;
  left: 4.5px;
  width: 6px;
  height: 4.5px;
  background: linear-gradient(90deg, #1e293b 0%, #475569 50%, #0f172a 100%);
  border-bottom: 1px solid #111827;
  border-radius: 1.5px 1.5px 0 0;
}

/* Hover glow feedback for String 2 */
body.p4.night.holiday-mode .p4-party-lights-2 .p4-light-bulb:hover {
  filter: brightness(1.5);
  box-shadow: 
    0 0 22px var(--bulb-glow), 
    0 0 35px var(--bulb-glow), 
    inset 0 2px 3px rgba(255, 255, 255, 0.9);
  transform: scale(1.15) rotate(calc(var(--idle-rotation) * 1.3)) !important;
  z-index: 10;
}

/* Staggered bulb positions and colors matching the 4-loop wire peaks and valleys */
body.p4.night.holiday-mode .p4-party-lights-2 .bulb-1 {
  left: 6.25%; top: 7px;
  --bulb-color: #00f3ff; /* Electric Cyan */
  --bulb-glow: rgba(0, 243, 255, 0.85);
  --idle-rotation: -9deg;
  transform: rotate(var(--idle-rotation));
  animation-delay: 0.2s;
}

body.p4.night.holiday-mode .p4-party-lights-2 .bulb-2 {
  left: 18.75%; top: 7px;
  --bulb-color: #ff007f; /* Hot Pink */
  --bulb-glow: rgba(255, 0, 127, 0.85);
  --idle-rotation: 9deg;
  transform: rotate(var(--idle-rotation));
  animation-delay: 0.6s;
}

body.p4.night.holiday-mode .p4-party-lights-2 .bulb-3 {
  left: 31.25%; top: 7px;
  --bulb-color: #ff5e00; /* Warm Orange */
  --bulb-glow: rgba(255, 94, 0, 0.85);
  --idle-rotation: -8deg;
  transform: rotate(var(--idle-rotation));
  animation-delay: 1.0s;
}

body.p4.night.holiday-mode .p4-party-lights-2 .bulb-4 {
  left: 43.75%; top: 7px;
  --bulb-color: #00ffaa; /* Emerald Green */
  --bulb-glow: rgba(0, 255, 170, 0.85);
  --idle-rotation: 8deg;
  transform: rotate(var(--idle-rotation));
  animation-delay: 1.4s;
}

body.p4.night.holiday-mode .p4-party-lights-2 .bulb-5 {
  left: 56.25%; top: 7px;
  --bulb-color: #ff2a6d; /* Cyber Pink */
  --bulb-glow: rgba(255, 42, 109, 0.85);
  --idle-rotation: -9deg;
  transform: rotate(var(--idle-rotation));
  animation-delay: 1.8s;
}

body.p4.night.holiday-mode .p4-party-lights-2 .bulb-6 {
  left: 68.75%; top: 7px;
  --bulb-color: #fffe09; /* Canary Yellow */
  --bulb-glow: rgba(255, 254, 9, 0.85);
  --idle-rotation: 9deg;
  transform: rotate(var(--idle-rotation));
  animation-delay: 2.2s;
}

body.p4.night.holiday-mode .p4-party-lights-2 .bulb-7 {
  left: 81.25%; top: 7px;
  --bulb-color: #01ff70; /* Lime Green */
  --bulb-glow: rgba(1, 255, 112, 0.85);
  --idle-rotation: -7deg;
  transform: rotate(var(--idle-rotation));
  animation-delay: 2.6s;
}

body.p4.night.holiday-mode .p4-party-lights-2 .bulb-8 {
  left: 93.75%; top: 7px;
  --bulb-color: #b900ff; /* Electric Purple */
  --bulb-glow: rgba(185, 0, 255, 0.85);
  --idle-rotation: 8deg;
  transform: rotate(var(--idle-rotation));
  animation-delay: 3.0s;
}

/* Idle slow breathing animation for String 2 */
@keyframes p4Light2Breathe {
  0%, 100% {
    opacity: 0.65;
    filter: brightness(0.85) drop-shadow(0 0 3px var(--bulb-glow));
  }

  50% {
    opacity: 1;
    filter: brightness(1.35) drop-shadow(0 0 14px var(--bulb-glow)) drop-shadow(0 0 20px var(--bulb-glow));
  }

}

/* Active Chase wave animation for String 2: high speed strobe with physical scale pulse */
body.p4.night.holiday-mode .p4-party-lights-2.active .p4-light-bulb {
  animation: p4Light2Chase 0.5s linear infinite;
  transition: none; /* Instant feedback on active */
}

/* Delay staggered offsets for chasing wave on String 2 */
body.p4.night.holiday-mode .p4-party-lights-2.active .bulb-1  { animation-delay: 0s; }

body.p4.night.holiday-mode .p4-party-lights-2.active .bulb-2  { animation-delay: 0.06s; }

body.p4.night.holiday-mode .p4-party-lights-2.active .bulb-3  { animation-delay: 0.12s; }

body.p4.night.holiday-mode .p4-party-lights-2.active .bulb-4  { animation-delay: 0.18s; }

body.p4.night.holiday-mode .p4-party-lights-2.active .bulb-5  { animation-delay: 0.24s; }

body.p4.night.holiday-mode .p4-party-lights-2.active .bulb-6  { animation-delay: 0.30s; }

body.p4.night.holiday-mode .p4-party-lights-2.active .bulb-7  { animation-delay: 0.36s; }

body.p4.night.holiday-mode .p4-party-lights-2.active .bulb-8  { animation-delay: 0.42s; }

@keyframes p4Light2Chase {
  0%, 100% {
    opacity: 0.4;
    filter: brightness(0.65) drop-shadow(0 0 2px var(--bulb-glow));
    transform: scale(0.95) rotate(var(--idle-rotation));
  }

  50% {
    opacity: 1;
    filter: brightness(2.1) drop-shadow(0 0 24px var(--bulb-glow)) drop-shadow(0 0 38px var(--bulb-glow));
    transform: scale(1.22) rotate(calc(var(--idle-rotation) * 2.2));
  }

}

/* 11. Champagne Bottle */
.p4-party-champagne {
  left: 4%; top: 340px;
  width: 24px; height: 60px;
  transform-origin: center bottom;
  transition: transform 1.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* Fallback/standard mode scoping */

@keyframes p4ChampagneIdleWobble {
  0% { transform: rotate(-1.5deg) scale(1); }

  100% { transform: rotate(1.5deg) scale(1); }

}

/* Premium Night Holiday Mode specific styling */
body.p4.night.holiday-mode .p4-party-champagne {
  pointer-events: auto;
  cursor: pointer;
}

/* Continuous Leak/Fizzing Bubble animations */
body.p4.night.holiday-mode .p4-party-champagne .p4-fizz-bubble {
  position: absolute;
  background: radial-gradient(circle at 35% 35%, rgba(255,255,255,0.9) 0%, rgba(253,224,71,0.6) 60%, rgba(251,191,36,0.1) 100%);
  border: 0.5px solid rgba(254,240,138,0.7);
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
}

/* Staggered positions for idle fizz */
body.p4.night.holiday-mode .p4-party-champagne .fb-1 { left: 10px; top: -2px; width: 4px; height: 4px; }

body.p4.night.holiday-mode .p4-party-champagne .fb-2 { left: 12px; top: 0px; width: 3px; height: 3px; }

body.p4.night.holiday-mode .p4-party-champagne .fb-3 { left: 9px; top: 2px; width: 5px; height: 5px; }

/* Continuous fizz loop for idle bubbles */
body.p4.night.holiday-mode .p4-party-champagne:not(.active) .fb-1 { animation: p4IdleFizzLeak 2.5s infinite; }

body.p4.night.holiday-mode .p4-party-champagne:not(.active) .fb-2 { animation: p4IdleFizzLeak 2.8s infinite 0.8s; }

body.p4.night.holiday-mode .p4-party-champagne:not(.active) .fb-3 { animation: p4IdleFizzLeak 2.2s infinite 1.6s; }

@keyframes p4IdleFizzLeak {
  0% { opacity: 0; transform: translateY(0) scale(0.6); }

  20% { opacity: 0.85; }

  100% { opacity: 0; transform: translateY(-16px) translateX(calc(sin(1) * 3px)) scale(1.2); }

}

/* Active Click Shockwave & Pop Shake */
body.p4.night.holiday-mode .p4-party-champagne.active {
  animation: p4ChampagneActiveShake 0.75s cubic-bezier(0.15, 0.85, 0.15, 1);
  transition: none; /* No transition while actively popping */
}

@keyframes p4ChampagneActiveShake {
  0%, 100% { transform: rotate(0) scale(1); }

  15% { transform: rotate(-18deg) scale(0.85); }

  30% { transform: rotate(18deg) scale(1.15); }

  45% { transform: rotate(-8deg) scale(0.95); }

  60% { transform: rotate(8deg) scale(1.05); }

  75% { transform: rotate(-3deg) scale(0.98); }

}

/* Cork Pop Rocket Animation */
body.p4.night.holiday-mode .p4-party-champagne.active .p4-champagne-cork {
  animation: p4CorkLaunch 0.9s cubic-bezier(0.1, 0.8, 0.2, 1) forwards;
}

@keyframes p4CorkLaunch {
  0% { transform: translateY(0) scale(1); opacity: 1; }

  15% { transform: translateY(-10px) scale(0.95); }

  35% { opacity: 1; }

  100% { transform: translateY(-90px) rotate(420deg) scale(0.6); opacity: 0; }

}

/* Foam & Sparks Fountain elements */
body.p4.night.holiday-mode .p4-party-champagne .p4-fizz-spark {
  position: absolute;
  color: #fef08a;
  font-size: 11px;
  text-shadow: 0 0 6px #f59e0b;
  opacity: 0;
  pointer-events: none;
}

/* Layout for Active Eruption */
body.p4.night.holiday-mode .p4-party-champagne.active .fb-1 { animation: p4FoamErupt1 0.7s cubic-bezier(0.1, 0.8, 0.3, 1) forwards; }

body.p4.night.holiday-mode .p4-party-champagne.active .fb-2 { animation: p4FoamErupt2 0.8s cubic-bezier(0.1, 0.8, 0.3, 1) forwards; }

body.p4.night.holiday-mode .p4-party-champagne.active .fb-3 { animation: p4FoamErupt3 0.75s cubic-bezier(0.1, 0.8, 0.3, 1) forwards; }

body.p4.night.holiday-mode .p4-party-champagne.active .fb-4 { animation: p4FoamErupt4 0.65s cubic-bezier(0.1, 0.8, 0.3, 1) forwards; }

body.p4.night.holiday-mode .p4-party-champagne.active .fb-5 { animation: p4FoamErupt5 0.85s cubic-bezier(0.1, 0.8, 0.3, 1) forwards; }

body.p4.night.holiday-mode .p4-party-champagne.active .fb-6 { animation: p4FoamErupt6 0.9s cubic-bezier(0.1, 0.8, 0.3, 1) forwards; }

body.p4.night.holiday-mode .p4-party-champagne.active .fs-1 { animation: p4FoamSpark1 0.6s cubic-bezier(0.1, 0.8, 0.3, 1) forwards; }

body.p4.night.holiday-mode .p4-party-champagne.active .fs-2 { animation: p4FoamSpark2 0.7s cubic-bezier(0.1, 0.8, 0.3, 1) forwards; }

body.p4.night.holiday-mode .p4-party-champagne.active .fs-3 { animation: p4FoamSpark3 0.65s cubic-bezier(0.1, 0.8, 0.3, 1) forwards; }

/* Eruption Keyframes */
@keyframes p4FoamErupt1 {
  0% { opacity: 0; transform: translate(11px, 2px) scale(0.4); }

  15% { opacity: 1; }

  100% { opacity: 0; transform: translate(4px, -45px) scale(1.8); }

}

@keyframes p4FoamErupt2 {
  0% { opacity: 0; transform: translate(13px, 2px) scale(0.4); }

  15% { opacity: 1; }

  100% { opacity: 0; transform: translate(22px, -35px) scale(1.5); }

}

@keyframes p4FoamErupt3 {
  0% { opacity: 0; transform: translate(11px, 2px) scale(0.4); }

  15% { opacity: 1; }

  100% { opacity: 0; transform: translate(-10px, -55px) scale(1.6); }

}

@keyframes p4FoamErupt4 {
  0% { opacity: 0; transform: translate(12px, 2px) scale(0.3); }

  15% { opacity: 1; }

  100% { opacity: 0; transform: translate(15px, -65px) scale(2.2); }

}

@keyframes p4FoamErupt5 {
  0% { opacity: 0; transform: translate(10px, 2px) scale(0.4); }

  15% { opacity: 1; }

  100% { opacity: 0; transform: translate(-2px, -75px) scale(2); }

}

@keyframes p4FoamErupt6 {
  0% { opacity: 0; transform: translate(12px, 2px) scale(0.4); }

  15% { opacity: 1; }

  100% { opacity: 0; transform: translate(8px, -90px) scale(2.4); }

}

@keyframes p4FoamSpark1 {
  0% { opacity: 0; transform: translate(11px, 2px) scale(0.3) rotate(0); }

  25% { opacity: 1; }

  100% { opacity: 0; transform: translate(-15px, -50px) scale(1.4) rotate(180deg); }

}

@keyframes p4FoamSpark2 {
  0% { opacity: 0; transform: translate(12px, 2px) scale(0.3) rotate(0); }

  25% { opacity: 1; }

  100% { opacity: 0; transform: translate(25px, -60px) scale(1.6) rotate(-180deg); }

}

@keyframes p4FoamSpark3 {
  0% { opacity: 0; transform: translate(11px, 2px) scale(0.3) rotate(0); }

  25% { opacity: 1; }

  100% { opacity: 0; transform: translate(5px, -80px) scale(1.5) rotate(240deg); }

}

/* 12. Glow Sticks in cup */
.p4-party-glowsticks {
  left: 15%; top: 380px;
  width: 25px; height: 40px;
  transform-origin: center bottom;
}

/* Glassmorphic cup for glowsticks */
.p4-party-cup {
  position: absolute; bottom: 0; left: 3px;
  width: 19px; height: 24px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.05) 100%);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-bottom: 2px solid rgba(255, 255, 255, 0.35);
  border-radius: 3px 3px 6px 6px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.35), inset 0 2px 4px rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  z-index: 5;
}

/* Inner liquid/reflection line */
.p4-party-cup::before {
  content: '';
  position: absolute;
  top: 1px; left: 2px; right: 2px; height: 1px;
  background: rgba(255, 255, 255, 0.4);
  border-radius: 50%;
}

.p4-glow-stick {
  position: absolute; bottom: 8px; width: 4px; height: 28px;
  border-radius: 2px;
  box-shadow: 0 0 10px currentColor, inset 0 1px 2px rgba(255, 255, 255, 0.7);
  z-index: 2;
  transition: all 0.4s ease;
}

/* Staggered offsets, angles, colors, and continuous breathing loop */
.stick-cyan { left: 4px; color: #00f3ff; transform: rotate(-16deg); }

.stick-pink { left: 8px; color: #ff007f; transform: rotate(-4deg); }

.stick-green { left: 12px; color: #00ffaa; transform: rotate(8deg); }

.stick-purple { left: 16px; color: #b900ff; transform: rotate(18deg); }

body.p4.night.holiday-mode .p4-glow-stick {
  animation: p4GlowstickBreathe 2.8s ease-in-out infinite alternate;
}

body.p4.night.holiday-mode .stick-cyan { animation-delay: 0.1s; }

body.p4.night.holiday-mode .stick-pink { animation-delay: 0.8s; }

body.p4.night.holiday-mode .stick-green { animation-delay: 1.5s; }

body.p4.night.holiday-mode .stick-purple { animation-delay: 2.2s; }

@keyframes p4GlowstickBreathe {
  0% {
    opacity: 0.55;
    filter: brightness(0.8) drop-shadow(0 0 2px currentColor);
  }

  100% {
    opacity: 1;
    filter: brightness(1.4) drop-shadow(0 0 12px currentColor);
  }

}

/* Active Click Surge & Shake for Glowsticks */
body.p4.night.holiday-mode .p4-party-glowsticks.active {
  animation: p4GlowsticksActiveShake 0.6s ease-in-out;
}

@keyframes p4GlowsticksActiveShake {
  0%, 100% { transform: rotate(0) scale(1); }

  20%, 60% { transform: rotate(-8deg) scale(0.95); }

  40%, 80% { transform: rotate(8deg) scale(1.05); }

}

body.p4.night.holiday-mode .p4-party-glowsticks.active .p4-glow-stick {
  animation: p4GlowstickSurge 0.15s linear infinite;
  transition: none;
}

@keyframes p4GlowstickSurge {
  0%, 100% { filter: brightness(2.2) drop-shadow(0 0 18px currentColor); opacity: 1; }

  50% { filter: brightness(0.6) drop-shadow(0 0 2px currentColor); opacity: 0.5; }

}

/* Floating neon sparks on click */
body.p4.night.holiday-mode .p4-party-glowsticks .p4-glow-spark {
  position: absolute;
  font-size: 10px;
  opacity: 0;
  pointer-events: none;
}

body.p4.night.holiday-mode .p4-party-glowsticks .gs-1 { color: #00f3ff; left: 4px; top: -5px; }

body.p4.night.holiday-mode .p4-party-glowsticks .gs-2 { color: #ff007f; left: 10px; top: -8px; }

body.p4.night.holiday-mode .p4-party-glowsticks .gs-3 { color: #00ffaa; left: 16px; top: -4px; }

body.p4.night.holiday-mode .p4-party-glowsticks .gs-4 { color: #b900ff; left: 8px; top: -6px; }

body.p4.night.holiday-mode .p4-party-glowsticks.active .gs-1 { animation: p4GlowSparkFloat1 1.2s ease-out forwards; }

body.p4.night.holiday-mode .p4-party-glowsticks.active .gs-2 { animation: p4GlowSparkFloat2 1.0s ease-out forwards; }

body.p4.night.holiday-mode .p4-party-glowsticks.active .gs-3 { animation: p4GlowSparkFloat3 1.1s ease-out forwards; }

body.p4.night.holiday-mode .p4-party-glowsticks.active .gs-4 { animation: p4GlowSparkFloat4 0.9s ease-out forwards; }

@keyframes p4GlowSparkFloat1 {
  0% { opacity: 0; transform: translateY(0) scale(0.4); }

  20% { opacity: 1; }

  100% { opacity: 0; transform: translateY(-35px) translateX(-10px) scale(1.4); }

}

@keyframes p4GlowSparkFloat2 {
  0% { opacity: 0; transform: translateY(0) scale(0.4); }

  20% { opacity: 1; }

  100% { opacity: 0; transform: translateY(-45px) translateX(6px) scale(1.2); }

}

@keyframes p4GlowSparkFloat3 {
  0% { opacity: 0; transform: translateY(0) scale(0.4); }

  20% { opacity: 1; }

  100% { opacity: 0; transform: translateY(-30px) translateX(12px) scale(1.5); }

}

@keyframes p4GlowSparkFloat4 {
  0% { opacity: 0; transform: translateY(0) scale(0.4); }

  20% { opacity: 1; }

  100% { opacity: 0; transform: translateY(-40px) translateX(-4px) scale(1.3); }

}

/* 13. Plate of cupcakes */
.p4-party-cupcakes {
  right: 15%; top: 415px;
  width: 56px; height: 35px;
  transform-origin: center bottom;
  transition: transform 1.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* Platter sways gently in a tiny bobbing loop */
body.p4.night.holiday-mode .p4-party-cupcakes {
  animation: p4CupcakesIdleBob 5.5s ease-in-out infinite alternate;
}

@keyframes p4CupcakesIdleBob {
  0% { transform: translateY(0) rotate(-1deg); }

  100% { transform: translateY(1.2px) rotate(1deg); }

}

body.p4.night.holiday-mode .p4-party-cupcakes .p4-party-svg {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 3;
}

/* Rising Aroma Steam styling */
body.p4.night.holiday-mode .p4-party-cupcakes .p4-cupcake-steam {
  position: absolute;
  width: 1px;
  height: 12px;
  background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.18) 70%, rgba(255,255,255,0) 100%);
  border-left: 0.8px dashed rgba(255, 255, 255, 0.25);
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
}

body.p4.night.holiday-mode .p4-party-cupcakes .st-1 { left: 16px; top: 1px; }

body.p4.night.holiday-mode .p4-party-cupcakes .st-2 { left: 29px; top: -6px; }

body.p4.night.holiday-mode .p4-party-cupcakes .st-3 { left: 42px; top: 1px; }

body.p4.night.holiday-mode .p4-party-cupcakes:not(.active) .st-1 { animation: p4CupcakeSteamRise 3.5s infinite; }

body.p4.night.holiday-mode .p4-party-cupcakes:not(.active) .st-2 { animation: p4CupcakeSteamRise 3.8s infinite 1.2s; }

body.p4.night.holiday-mode .p4-party-cupcakes:not(.active) .st-3 { animation: p4CupcakeSteamRise 3.2s infinite 2.4s; }

@keyframes p4CupcakeSteamRise {
  0% { opacity: 0; transform: translateY(0) scaleX(0.5) skewX(0); }

  25% { opacity: 0.8; }

  100% { opacity: 0; transform: translateY(-18px) scaleX(1.5) skewX(20deg); }

}

/* Active Click Plat bounce & jiggle */
body.p4.night.holiday-mode .p4-party-cupcakes.active {
  animation: p4CupcakesActiveBounce 0.9s cubic-bezier(0.15, 0.85, 0.3, 1.2);
  transition: none;
}

@keyframes p4CupcakesActiveBounce {
  0% { transform: scale(1) translateY(0); }

  15% { transform: scale(1.15, 0.8) translateY(2px) rotate(-3deg); }

  35% { transform: scale(0.85, 1.2) translateY(-14px) rotate(4deg); }

  60% { transform: scale(1.05, 0.93) translateY(3px) rotate(-1.5deg); }

  80% { transform: scale(0.97, 1.03) translateY(-1px); }

  100% { transform: scale(1) translateY(0); }

}

/* Staggered jiggle on cupcakes themselves on click */
body.p4.night.holiday-mode .p4-party-cupcakes.active .cc-left   { animation: p4CCJiggle 0.8s ease-in-out; animation-delay: 0.05s; }

body.p4.night.holiday-mode .p4-party-cupcakes.active .cc-center { animation: p4CCJiggle 0.8s ease-in-out; animation-delay: 0s; }

body.p4.night.holiday-mode .p4-party-cupcakes.active .cc-right  { animation: p4CCJiggle 0.8s ease-in-out; animation-delay: 0.1s; }

@keyframes p4CCJiggle {
  0%, 100% { transform: scale(1) rotate(0); }

  20% { transform: scale(0.9, 1.1) translateY(-4px) rotate(-5deg); }

  50% { transform: scale(1.1, 0.9) translateY(1px) rotate(5deg); }

  75% { transform: scale(0.96, 1.04) rotate(-2deg); }

}

/* Sprinkle Burst details */
body.p4.night.holiday-mode .p4-party-cupcakes .p4-sprinkle-spark {
  position: absolute;
  color: #fda4af;
  font-size: 11px;
  text-shadow: 0 0 5px #f43f5e;
  opacity: 0;
  pointer-events: none;
  z-index: 2;
}

body.p4.night.holiday-mode .p4-party-cupcakes .ss-1 { left: 16px; top: 12px; }

body.p4.night.holiday-mode .p4-party-cupcakes .ss-2 { left: 28px; top: 8px; color: #facc15; text-shadow: 0 0 5px #eab308; }

body.p4.night.holiday-mode .p4-party-cupcakes .ss-3 { left: 42px; top: 12px; color: #38bdf8; text-shadow: 0 0 5px #0284c7; }

body.p4.night.holiday-mode .p4-party-cupcakes.active .ss-1 { animation: p4SprinkleSparkBurst1 0.8s cubic-bezier(0.1, 0.8, 0.3, 1) forwards; }

body.p4.night.holiday-mode .p4-party-cupcakes.active .ss-2 { animation: p4SprinkleSparkBurst2 0.75s cubic-bezier(0.1, 0.8, 0.3, 1) forwards; }

body.p4.night.holiday-mode .p4-party-cupcakes.active .ss-3 { animation: p4SprinkleSparkBurst3 0.85s cubic-bezier(0.1, 0.8, 0.3, 1) forwards; }

@keyframes p4SprinkleSparkBurst1 {
  0% { opacity: 0; transform: translate(0, 0) scale(0.4) rotate(0deg); }

  20% { opacity: 1; }

  100% { opacity: 0; transform: translate(-12px, -38px) scale(1.5) rotate(180deg); }

}

@keyframes p4SprinkleSparkBurst2 {
  0% { opacity: 0; transform: translate(0, 0) scale(0.4) rotate(0deg); }

  20% { opacity: 1; }

  100% { opacity: 0; transform: translate(2px, -45px) scale(1.6) rotate(-240deg); }

}

@keyframes p4SprinkleSparkBurst3 {
  0% { opacity: 0; transform: translate(0, 0) scale(0.4) rotate(0deg); }

  20% { opacity: 1; }

  100% { opacity: 0; transform: translate(14px, -35px) scale(1.4) rotate(140deg); }

}

/* 14. Plate of Gingerbread Men — REDESIGNED */
.p4-party-gingerbread {
  right: 10%; top: 400px;
  width: 80px; height: 55px;
  transform-origin: center bottom;
  animation: p4GingerbreadIdleRock 5s ease-in-out infinite alternate;
  transition: transform 1.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}

@keyframes p4GingerbreadIdleRock {
  0% { transform: rotate(-2deg) translateY(0); }

  50% { transform: rotate(0deg) translateY(-2px); }

  100% { transform: rotate(2deg) translateY(0); }

}

/* Gingerbread men idle jiggle */
.p4-gb-man {
  transform-origin: center bottom;
}

.p4-gb-man.gb-1 { animation: p4GBManIdle1 4s ease-in-out infinite alternate; }

.p4-gb-man.gb-2 { animation: p4GBManIdle2 3.5s ease-in-out infinite alternate; }

.p4-gb-man.gb-3 { animation: p4GBManIdle3 4.5s ease-in-out infinite alternate; }

@keyframes p4GBManIdle1 {
  0% { transform: translate(18px, 20px) rotate(-10deg); }

  100% { transform: translate(18px, 20px) rotate(-6deg); }

}

@keyframes p4GBManIdle2 {
  0% { transform: translate(48px, 14px) rotate(-1deg); }

  100% { transform: translate(48px, 14px) rotate(1deg); }

}

@keyframes p4GBManIdle3 {
  0% { transform: translate(80px, 22px) rotate(8deg); }

  100% { transform: translate(80px, 22px) rotate(12deg); }

}

/* Icing sugar sparkles — idle float */
.p4-gb-sparkle {
  position: absolute;
  font-size: 8px;
  color: #fef3c7;
  opacity: 0;
  pointer-events: none;
  text-shadow: 0 0 6px #fbbf24, 0 0 12px #f59e0b;
  animation: p4GBSparkleFloat 3.5s ease-in-out infinite;
}

.p4-gb-sparkle.sp-1 { top: 8px; left: 20%; animation-delay: 0s; }

.p4-gb-sparkle.sp-2 { top: 5px; left: 50%; animation-delay: 1.2s; }

.p4-gb-sparkle.sp-3 { top: 10px; left: 75%; animation-delay: 2.4s; }

@keyframes p4GBSparkleFloat {
  0% { opacity: 0; transform: translateY(0) scale(0.5); }

  25% { opacity: 0.8; }

  50% { opacity: 0.9; transform: translateY(-8px) scale(1); }

  75% { opacity: 0.5; }

  100% { opacity: 0; transform: translateY(-16px) scale(0.3) rotate(60deg); }

}

/* Cookie crumbs — hidden by default */
.p4-gb-crumb {
  position: absolute;
  width: 4px; height: 4px;
  border-radius: 40%;
  background: #b45309;
  opacity: 0;
  pointer-events: none;
  bottom: 10px;
  left: 50%;
}

/* ── ACTIVE: Platter bounce ── */
.p4-party-gingerbread.active {
  animation: p4GingerbreadActiveBounce 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes p4GingerbreadActiveBounce {
  0% { transform: scale(1) translateY(0); }

  15% { transform: scale(1.05, 0.92) translateY(4px); }

  35% { transform: scale(0.93, 1.12) translateY(-12px); }

  55% { transform: scale(1.04, 0.96) translateY(2px); }

  75% { transform: scale(0.98, 1.04) translateY(-4px); }

  100% { transform: scale(1) translateY(0); }

}

/* Active gingerbread men jiggle */
.p4-party-gingerbread.active .p4-gb-man.gb-1 {
  animation: p4GBManJiggle 0.5s ease-in-out 3;
}

.p4-party-gingerbread.active .p4-gb-man.gb-2 {
  animation: p4GBManJiggle 0.5s ease-in-out 3;
  animation-delay: 0.1s;
}

.p4-party-gingerbread.active .p4-gb-man.gb-3 {
  animation: p4GBManJiggle 0.5s ease-in-out 3;
  animation-delay: 0.2s;
}

@keyframes p4GBManJiggle {
  0%, 100% { transform: rotate(0deg) translateY(0); }

  25% { transform: rotate(12deg) translateY(-3px); }

  75% { transform: rotate(-12deg) translateY(-2px); }

}

/* Active crumbs scatter */
.p4-party-gingerbread.active .p4-gb-crumb { opacity: 1; }

.p4-party-gingerbread.active .cr-1 { animation: p4GBCrumbScatter1 0.9s ease-out forwards; }

.p4-party-gingerbread.active .cr-2 { animation: p4GBCrumbScatter2 0.9s ease-out forwards; animation-delay: 0.1s; }

.p4-party-gingerbread.active .cr-3 { animation: p4GBCrumbScatter3 0.9s ease-out forwards; animation-delay: 0.2s; }

@keyframes p4GBCrumbScatter1 {
  0% { opacity: 1; transform: translate(0, 0) scale(1); }

  100% { opacity: 0; transform: translate(-25px, 20px) scale(0.4) rotate(120deg); }

}

@keyframes p4GBCrumbScatter2 {
  0% { opacity: 1; transform: translate(0, 0) scale(1); }

  100% { opacity: 0; transform: translate(10px, 25px) scale(0.3) rotate(-90deg); }

}

@keyframes p4GBCrumbScatter3 {
  0% { opacity: 1; transform: translate(0, 0) scale(1); }

  100% { opacity: 0; transform: translate(30px, 18px) scale(0.5) rotate(200deg); }

}

/* Active sparkle bursts (stronger) */
.p4-party-gingerbread.active .p4-gb-sparkle.sp-1 { animation: p4GBSparkleBurst1 0.8s ease-out forwards; }

.p4-party-gingerbread.active .p4-gb-sparkle.sp-2 { animation: p4GBSparkleBurst2 0.8s ease-out forwards; animation-delay: 0.1s; }

.p4-party-gingerbread.active .p4-gb-sparkle.sp-3 { animation: p4GBSparkleBurst3 0.8s ease-out forwards; animation-delay: 0.15s; }

@keyframes p4GBSparkleBurst1 {
  0% { opacity: 0; transform: translate(0, 0) scale(0.5); }

  30% { opacity: 1; }

  100% { opacity: 0; transform: translate(-15px, -30px) scale(1.8) rotate(90deg); }

}

@keyframes p4GBSparkleBurst2 {
  0% { opacity: 0; transform: translate(0, 0) scale(0.5); }

  30% { opacity: 1; }

  100% { opacity: 0; transform: translate(5px, -35px) scale(2) rotate(-60deg); }

}

@keyframes p4GBSparkleBurst3 {
  0% { opacity: 0; transform: translate(0, 0) scale(0.5); }

  30% { opacity: 1; }

  100% { opacity: 0; transform: translate(20px, -28px) scale(1.6) rotate(120deg); }

}

/* 15. Party Horn Blowout — REDESIGNED */
.p4-party-horn {
  left: 35%; top: 100px;
  width: 85px; height: 35px;
  transform-origin: left center;
  animation: p4HornIdleSway 4s ease-in-out infinite alternate;
  transition: transform 1.2s cubic-bezier(0.25, 0.8, 0.25, 1);
}

@keyframes p4HornIdleSway {
  0% { transform: rotate(-3deg) translateY(0); }

  50% { transform: rotate(0deg) translateY(-1.5px); }

  100% { transform: rotate(3deg) translateY(0); }

}

/* Horn tube idle */
.p4-horn-tube {
  transition: transform 1.2s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* Fringe flutter */
.p4-horn-fringe {
  transform-origin: left center;
  animation: p4HornFringeFlutter 2.5s ease-in-out infinite alternate;
}

@keyframes p4HornFringeFlutter {
  0% { transform: translate(96px, 22px) rotate(-4deg) scaleX(0.95); }

  100% { transform: translate(96px, 22px) rotate(4deg) scaleX(1.05); }

}

/* Sound wave rings — hidden by default */
.p4-horn-wave {
  position: absolute;
  right: -5px; top: 50%;
  width: 14px; height: 14px;
  border: 2px solid rgba(251, 191, 36, 0.7);
  border-radius: 50%;
  transform: translate(50%, -50%) scale(0);
  opacity: 0;
  pointer-events: none;
}

/* Confetti particles — hidden by default */
.p4-horn-confetti {
  position: absolute;
  right: 0; top: 40%;
  font-size: 7px;
  opacity: 0;
  pointer-events: none;
}

.hc-1 { color: #ec4899; }

.hc-2 { color: #22c55e; }

.hc-3 { color: #38bdf8; }

.hc-4 { color: #fbbf24; }

/* ── ACTIVE: Horn blow recoil ── */
.p4-party-horn.active {
  animation: p4HornBlowRecoil 0.7s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes p4HornBlowRecoil {
  0% { transform: rotate(0deg) scale(1); }

  15% { transform: rotate(-8deg) scale(1.05, 0.92) translateX(-4px); }

  35% { transform: rotate(5deg) scale(0.95, 1.08) translateX(3px); }

  55% { transform: rotate(-3deg) scale(1.02); }

  75% { transform: rotate(1deg) scale(0.99); }

  100% { transform: rotate(0deg) scale(1); }

}

/* Active tube unroll/extend */
.p4-party-horn.active .p4-horn-tube {
  animation: p4HornUnroll 0.6s ease-out;
}

@keyframes p4HornUnroll {
  0% { transform: scaleX(1); }

  30% { transform: scaleX(1.3) translateX(8px); }

  60% { transform: scaleX(1.15) translateX(4px); }

  100% { transform: scaleX(1) translateX(0); }

}

/* Active fringe violent flutter */
.p4-party-horn.active .p4-horn-fringe {
  animation: p4HornFringeActive 0.3s ease-in-out 5;
}

@keyframes p4HornFringeActive {
  0%, 100% { transform: translate(96px, 22px) rotate(0deg) scaleX(1); }

  25% { transform: translate(96px, 22px) rotate(12deg) scaleX(1.2); }

  75% { transform: translate(96px, 22px) rotate(-12deg) scaleX(0.85); }

}

/* Active sound wave pulses */
.p4-party-horn.active .p4-horn-wave { opacity: 1; }

.p4-party-horn.active .hw-1 { animation: p4HornWavePulse 0.8s ease-out forwards; }

.p4-party-horn.active .hw-2 { animation: p4HornWavePulse 0.8s ease-out forwards; animation-delay: 0.15s; }

.p4-party-horn.active .hw-3 { animation: p4HornWavePulse 0.8s ease-out forwards; animation-delay: 0.3s; }

@keyframes p4HornWavePulse {
  0% { transform: translate(50%, -50%) scale(0); opacity: 0.9; border-color: rgba(251, 191, 36, 0.8); }

  50% { opacity: 0.5; }

  100% { transform: translate(50%, -50%) scale(4); opacity: 0; border-color: rgba(236, 72, 153, 0.2); }

}

/* Active confetti blasts */
.p4-party-horn.active .p4-horn-confetti { opacity: 1; }

.p4-party-horn.active .hc-1 { animation: p4HornConfetti1 0.9s ease-out forwards; }

.p4-party-horn.active .hc-2 { animation: p4HornConfetti2 0.9s ease-out forwards; animation-delay: 0.05s; }

.p4-party-horn.active .hc-3 { animation: p4HornConfetti3 0.9s ease-out forwards; animation-delay: 0.1s; }

.p4-party-horn.active .hc-4 { animation: p4HornConfetti4 0.9s ease-out forwards; animation-delay: 0.15s; }

@keyframes p4HornConfetti1 {
  0% { opacity: 1; transform: translate(0, 0) scale(1) rotate(0deg); }

  100% { opacity: 0; transform: translate(35px, -25px) scale(1.5) rotate(180deg); }

}

@keyframes p4HornConfetti2 {
  0% { opacity: 1; transform: translate(0, 0) scale(1) rotate(0deg); }

  100% { opacity: 0; transform: translate(40px, 5px) scale(1.3) rotate(-120deg); }

}

@keyframes p4HornConfetti3 {
  0% { opacity: 1; transform: translate(0, 0) scale(1) rotate(0deg); }

  100% { opacity: 0; transform: translate(30px, -35px) scale(1.6) rotate(240deg); }

}

@keyframes p4HornConfetti4 {
  0% { opacity: 1; transform: translate(0, 0) scale(1) rotate(0deg); }

  100% { opacity: 0; transform: translate(45px, 15px) scale(1.2) rotate(-200deg); }

}

/* 16. Hanging Tinsel Streamers Left */
.p4-party-tinsel-l {
  left: 5%;
  top: 0;
  width: 50px;
  height: 180px;
  transform-origin: top center;
  animation: p4TinselIdleWaveL 4.5s ease-in-out infinite alternate;
  transition: transform 1.2s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.p4-party-tinsel-l.active {
  animation: p4TinselActiveShiverL 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  transition: none;
}

.p4-tinsel-particle {
  position: absolute;
  font-size: 14px;
  opacity: 0;
  pointer-events: none;
}

.p4-tinsel-particle.tpl-1 { left: 25%; bottom: 20px; color: #fbbf24; text-shadow: 0 0 5px #f59e0b; }

.p4-tinsel-particle.tpl-2 { left: 45%; bottom: 20px; color: #ec4899; text-shadow: 0 0 5px #db2777; }

.p4-tinsel-particle.tpl-3 { left: 65%; bottom: 20px; color: #38bdf8; text-shadow: 0 0 5px #0284c7; }

.p4-party-tinsel-l.active .p4-tinsel-particle.tpl-1 {
  animation: p4TinselDrift1 1.2s ease-out forwards;
}

.p4-party-tinsel-l.active .p4-tinsel-particle.tpl-2 {
  animation: p4TinselDrift2 1.2s ease-out forwards;
}

.p4-party-tinsel-l.active .p4-tinsel-particle.tpl-3 {
  animation: p4TinselDrift3 1.2s ease-out forwards;
}

/* 17. Hanging Tinsel Streamers Right */
.p4-party-tinsel-r {
  right: 5%;
  top: 0;
  width: 50px;
  height: 180px;
  transform-origin: top center;
  animation: p4TinselIdleWaveR 5s ease-in-out infinite alternate;
  transition: transform 1.2s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.p4-party-tinsel-r.active {
  animation: p4TinselActiveShiverR 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  transition: none;
}

.p4-tinsel-particle.tpr-1 { left: 25%; bottom: 20px; color: #fbbf24; text-shadow: 0 0 5px #f59e0b; }

.p4-tinsel-particle.tpr-2 { left: 45%; bottom: 20px; color: #22c55e; text-shadow: 0 0 5px #15803d; }

.p4-tinsel-particle.tpr-3 { left: 65%; bottom: 20px; color: #ec4899; text-shadow: 0 0 5px #db2777; }

.p4-party-tinsel-r.active .p4-tinsel-particle.tpr-1 {
  animation: p4TinselDrift1 1.2s ease-out forwards;
}

.p4-party-tinsel-r.active .p4-tinsel-particle.tpr-2 {
  animation: p4TinselDrift2 1.2s ease-out forwards;
}

.p4-party-tinsel-r.active .p4-tinsel-particle.tpr-3 {
  animation: p4TinselDrift3 1.2s ease-out forwards;
}

@keyframes p4TinselIdleWaveL {
  0% { transform: rotate(-5deg) scaleX(0.95); }

  100% { transform: rotate(5deg) scaleX(1.05); }

}

@keyframes p4TinselIdleWaveR {
  0% { transform: rotate(5deg) scaleX(1.05); }

  100% { transform: rotate(-5deg) scaleX(0.95); }

}

@keyframes p4TinselActiveShiverL {
  0% { transform: rotate(0) scale(1); }

  15% { transform: rotate(-25deg) scale(1.3, 0.7); filter: brightness(1.2); }

  30% { transform: rotate(20deg) scale(0.7, 1.3); filter: brightness(1.3) drop-shadow(0 0 8px rgba(56, 189, 248, 0.5)); }

  45% { transform: rotate(-15deg) scale(1.15, 0.85); }

  60% { transform: rotate(10deg) scale(0.9, 1.1); }

  75% { transform: rotate(-4deg) scale(1.03, 0.97); }

  100% { transform: rotate(0) scale(1); }

}

@keyframes p4TinselActiveShiverR {
  0% { transform: rotate(0) scale(1); }

  15% { transform: rotate(25deg) scale(1.3, 0.7); filter: brightness(1.2); }

  30% { transform: rotate(-20deg) scale(0.7, 1.3); filter: brightness(1.3) drop-shadow(0 0 8px rgba(251, 191, 36, 0.5)); }

  45% { transform: rotate(15deg) scale(1.15, 0.85); }

  60% { transform: rotate(-10deg) scale(0.9, 1.1); }

  75% { transform: rotate(4deg) scale(1.03, 0.97); }

  100% { transform: rotate(0) scale(1); }

}

@keyframes p4TinselDrift1 {
  0% { opacity: 0; transform: translateY(0) scale(0.5); }

  25% { opacity: 1; }

  100% { opacity: 0; transform: translate(-20px, 70px) scale(1.3) rotate(90deg); }

}

@keyframes p4TinselDrift2 {
  0% { opacity: 0; transform: translateY(0) scale(0.5); }

  25% { opacity: 1; }

  100% { opacity: 0; transform: translate(5px, 80px) scale(1.5) rotate(-180deg); }

}

@keyframes p4TinselDrift3 {
  0% { opacity: 0; transform: translateY(0) scale(0.5); }

  25% { opacity: 1; }

  100% { opacity: 0; transform: translate(25px, 65px) scale(1.2) rotate(120deg); }

}

/* 18. Santa Hat on the Bookshelf — REDESIGNED */
.p4-party-santa-hat {
  left: 8%; top: 420px;
  width: 60px; height: 50px;
  transform-origin: bottom center;
  animation: p4HatIdleSway 5s ease-in-out infinite alternate;
  transition: transform 1.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

@keyframes p4HatIdleSway {
  0%   { transform: rotate(-4deg) translateY(0); }

  50%  { transform: rotate(0deg)  translateY(-2px); }

  100% { transform: rotate(4deg)  translateY(0); }

}

/* Pompom idle bounce */
.p4-hat-pompom {
  transform-origin: 38px 6px;
  animation: p4HatPomBounce 2.8s ease-in-out infinite alternate;
}

@keyframes p4HatPomBounce {
  0%   { transform: translateY(0) scale(1); }

  60%  { transform: translateY(-2px) scale(1.08, 0.93); }

  100% { transform: translateY(0) scale(0.95, 1.06); }

}

/* Hat bell idle jingle */
.p4-hat-bell {
  transform-origin: 56px 50px;
  animation: p4HatBellJingle 3.5s ease-in-out infinite alternate;
}

@keyframes p4HatBellJingle {
  0%   { transform: rotate(-8deg); }

  50%  { transform: rotate(0deg); }

  100% { transform: rotate(8deg); }

}

/* Snowflake drift — idle */
.p4-hat-snow {
  position: absolute;
  font-size: 9px;
  color: #bae6fd;
  opacity: 0;
  pointer-events: none;
  text-shadow: 0 0 6px #7dd3fc, 0 0 12px #38bdf8;
  animation: p4HatSnowDrift 4s ease-in-out infinite;
}

.p4-hat-snow.sn-1 { top: 20px; left: 8%;  animation-delay: 0s;   }

.p4-hat-snow.sn-2 { top: 12px; left: 42%; animation-delay: 1.4s; }

.p4-hat-snow.sn-3 { top: 22px; left: 72%; animation-delay: 2.8s; }

@keyframes p4HatSnowDrift {
  0%   { opacity: 0; transform: translateY(0)   rotate(0deg)   scale(0.6); }

  20%  { opacity: 0.7; }

  55%  { opacity: 0.8; transform: translateY(-10px) rotate(90deg)  scale(1); }

  85%  { opacity: 0.3; }

  100% { opacity: 0; transform: translateY(-20px) rotate(180deg) scale(0.4); }

}

/* Hat sparkles — idle glow */
.p4-hat-sparkle {
  position: absolute;
  font-size: 8px;
  color: #fef3c7;
  opacity: 0;
  pointer-events: none;
  text-shadow: 0 0 5px #fbbf24, 0 0 10px #f59e0b;
  animation: p4HatSparkleIdle 3s ease-in-out infinite;
}

.p4-hat-sparkle.hsp-1 { top: 5px; left: 30%; animation-delay: 0s; }

.p4-hat-sparkle.hsp-2 { top: 8px; left: 60%; animation-delay: 1.5s; }

@keyframes p4HatSparkleIdle {
  0%,100% { opacity: 0; transform: scale(0.5); }

  40%     { opacity: 0.9; transform: scale(1.2) rotate(30deg); }

}

/* ── ACTIVE: Hat tip-toss ── */
.p4-party-santa-hat.active {
  animation: p4HatActiveToss 0.9s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes p4HatActiveToss {
  0%   { transform: rotate(0deg)   scale(1)     translateY(0); }

  20%  { transform: rotate(-12deg) scale(1.05, 0.92) translateY(3px); }

  45%  { transform: rotate(8deg)   scale(0.92, 1.1)  translateY(-14px); }

  65%  { transform: rotate(-4deg)  scale(1.04, 0.97) translateY(-2px); }

  82%  { transform: rotate(2deg)   scale(0.98, 1.03) translateY(-6px); }

  100% { transform: rotate(0deg)   scale(1)     translateY(0); }

}

/* Active pompom eject wobble */
.p4-party-santa-hat.active .p4-hat-pompom {
  animation: p4HatPomActive 0.5s ease-out 4;
}

@keyframes p4HatPomActive {
  0%,100% { transform: translateY(0) scale(1); }

  30%     { transform: translateY(-5px) scale(1.15, 0.85); }

  70%     { transform: translateY(2px) scale(0.9, 1.12); }

}

/* Active bell violent jingle */
.p4-party-santa-hat.active .p4-hat-bell {
  animation: p4HatBellActive 0.25s ease-in-out 8;
}

@keyframes p4HatBellActive {
  0%,100% { transform: rotate(0deg); }

  25%     { transform: rotate(-20deg); }

  75%     { transform: rotate(20deg); }

}

/* Active snowflake burst */
.p4-party-santa-hat.active .sn-1 { animation: p4HatSnowBurst1 0.8s ease-out forwards; }

.p4-party-santa-hat.active .sn-2 { animation: p4HatSnowBurst2 0.8s ease-out forwards; animation-delay: 0.08s; }

.p4-party-santa-hat.active .sn-3 { animation: p4HatSnowBurst3 0.8s ease-out forwards; animation-delay: 0.16s; }

@keyframes p4HatSnowBurst1 {
  0%   { opacity: 1; transform: translate(0,0) scale(1) rotate(0deg); }

  100% { opacity: 0; transform: translate(-20px, -30px) scale(1.6) rotate(180deg); }

}

@keyframes p4HatSnowBurst2 {
  0%   { opacity: 1; transform: translate(0,0) scale(1) rotate(0deg); }

  100% { opacity: 0; transform: translate(5px, -36px) scale(1.8) rotate(-120deg); }

}

@keyframes p4HatSnowBurst3 {
  0%   { opacity: 1; transform: translate(0,0) scale(1) rotate(0deg); }

  100% { opacity: 0; transform: translate(22px, -28px) scale(1.4) rotate(220deg); }

}

/* Active sparkle flash */
.p4-party-santa-hat.active .hsp-1 { animation: p4HatSparkleBurst1 0.7s ease-out forwards; }

.p4-party-santa-hat.active .hsp-2 { animation: p4HatSparkleBurst2 0.7s ease-out forwards; animation-delay: 0.12s; }

@keyframes p4HatSparkleBurst1 {
  0%   { opacity: 0; transform: translate(0,0) scale(0.5); }

  30%  { opacity: 1; }

  100% { opacity: 0; transform: translate(-18px,-25px) scale(2) rotate(90deg); }

}

@keyframes p4HatSparkleBurst2 {
  0%   { opacity: 0; transform: translate(0,0) scale(0.5); }

  30%  { opacity: 1; }

  100% { opacity: 0; transform: translate(15px,-30px) scale(2.2) rotate(-70deg); }

}

/* 19. Reindeer Antlers Headband — REDESIGNED */
.p4-party-antlers {
  left: 10%; top: 330px;
  width: 80px; height: 55px;
  transform-origin: center bottom;
  animation: p4AntlersIdleSway 6s ease-in-out infinite alternate;
  transition: transform 1.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

@keyframes p4AntlersIdleSway {
  0%   { transform: rotate(-3deg) translateY(0); }

  50%  { transform: rotate(0deg) translateY(-1.5px); }

  100% { transform: rotate(3deg) translateY(0); }

}

/* Individual antler idle sway */
.p4-antler-l {
  transform-origin: 28px 58px;
  animation: p4AntlerLIdle 4.5s ease-in-out infinite alternate;
}

.p4-antler-r {
  transform-origin: 92px 58px;
  animation: p4AntlerRIdle 4s ease-in-out infinite alternate;
}

@keyframes p4AntlerLIdle {
  0%   { transform: rotate(-2deg); }

  100% { transform: rotate(2deg); }

}

@keyframes p4AntlerRIdle {
  0%   { transform: rotate(2deg); }

  100% { transform: rotate(-2deg); }

}

/* Rudolph nose pulse (glow breathing) */
.p4-nose {
  animation: p4NoseGlowPulse 2s ease-in-out infinite alternate;
}

.p4-nose-glow {
  animation: p4NoseAuraPulse 2s ease-in-out infinite alternate;
}

@keyframes p4NoseGlowPulse {
  0%   { filter: drop-shadow(0 0 3px #ef4444); }

  100% { filter: drop-shadow(0 0 9px #ef4444) drop-shadow(0 0 16px #fca5a5); }

}

@keyframes p4NoseAuraPulse {
  0%   { opacity: 0.4; r: 9; }

  100% { opacity: 0.8; r: 13; }

}

/* Jingle bells idle sway */
.p4-ant-bell {
  animation: p4AntBellJingle 3s ease-in-out infinite alternate;
}

.p4-ant-bell-r { animation-delay: 0.5s; animation-direction: alternate-reverse; }

@keyframes p4AntBellJingle {
  0%   { transform: rotate(-10deg); }

  100% { transform: rotate(10deg); }

}

/* Note: individual bell transforms applied via translate in their group, override with combined transform */
.p4-ant-bell-l { transform-origin: 30px 66px; }

.p4-ant-bell-r { transform-origin: 90px 66px; }

/* Star sparkle particles — idle */
.p4-ant-sparkle {
  position: absolute;
  font-size: 8px;
  opacity: 0;
  pointer-events: none;
  animation: p4AntSparkleFloat 3.8s ease-in-out infinite;
}

.p4-ant-sparkle.as-1 { top: 5px;  left: 10%; color: #fbbf24; text-shadow: 0 0 6px #fbbf24; animation-delay: 0s; }

.p4-ant-sparkle.as-2 { top: 0px;  left: 50%; color: #f9a8d4; text-shadow: 0 0 6px #ec4899; animation-delay: 1.3s; }

.p4-ant-sparkle.as-3 { top: 5px;  left: 85%; color: #67e8f9; text-shadow: 0 0 6px #22d3ee; animation-delay: 2.6s; }

@keyframes p4AntSparkleFloat {
  0%   { opacity: 0; transform: translateY(0) scale(0.5); }

  25%  { opacity: 0.8; }

  55%  { opacity: 0.9; transform: translateY(-8px) scale(1.1); }

  80%  { opacity: 0.4; }

  100% { opacity: 0; transform: translateY(-16px) scale(0.3) rotate(60deg); }

}

/* Jingle text — hidden by default */
.p4-ant-jingle {
  position: absolute;
  font-size: 10px;
  color: #fbbf24;
  opacity: 0;
  pointer-events: none;
  text-shadow: 0 0 8px #f59e0b;
}

.p4-ant-jingle.aj-1 { top: 40px; left: 18%; }

.p4-ant-jingle.aj-2 { top: 38px; left: 72%; }

/* ── ACTIVE: Antler buck ── */
.p4-party-antlers.active {
  animation: p4AntlersActiveBuck 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes p4AntlersActiveBuck {
  0%   { transform: scale(1)    translateY(0)   rotate(0deg); }

  18%  { transform: scale(1.04, 0.92) translateY(4px)  rotate(0deg); }

  38%  { transform: scale(0.93, 1.1)  translateY(-14px) rotate(-4deg); }

  55%  { transform: scale(1.03, 0.97) translateY(-4px) rotate(3deg); }

  72%  { transform: scale(0.98, 1.03) translateY(-8px) rotate(-2deg); }

  88%  { transform: scale(1.01, 0.99) translateY(-2px) rotate(1deg); }

  100% { transform: scale(1)    translateY(0)   rotate(0deg); }

}

/* Active antlers spread wide */
.p4-party-antlers.active .p4-antler-l {
  animation: p4AntlerLActive 0.6s ease-out 3;
}

.p4-party-antlers.active .p4-antler-r {
  animation: p4AntlerRActive 0.6s ease-out 3;
}

@keyframes p4AntlerLActive {
  0%,100% { transform: rotate(0deg); }

  40%     { transform: rotate(-12deg) translateX(-3px); }

}

@keyframes p4AntlerRActive {
  0%,100% { transform: rotate(0deg); }

  40%     { transform: rotate(12deg) translateX(3px); }

}

/* Active nose flash */
.p4-party-antlers.active .p4-nose {
  animation: p4NoseFlashActive 0.3s ease-in-out 6;
}

@keyframes p4NoseFlashActive {
  0%,100% { filter: drop-shadow(0 0 4px #ef4444); }

  50%     { filter: drop-shadow(0 0 16px #ef4444) drop-shadow(0 0 30px #fca5a5) brightness(1.5); }

}

/* Active bells violent jingle */
.p4-party-antlers.active .p4-ant-bell {
  animation: p4AntBellActive 0.2s ease-in-out 10;
}

@keyframes p4AntBellActive {
  0%,100% { transform: rotate(0deg); }

  30%     { transform: rotate(-22deg); }

  70%     { transform: rotate(22deg); }

}

/* Active jingle notes float */
.p4-party-antlers.active .p4-ant-jingle { opacity: 1; }

.p4-party-antlers.active .aj-1 { animation: p4JingleFloat 0.9s ease-out forwards; }

.p4-party-antlers.active .aj-2 { animation: p4JingleFloat 0.9s ease-out forwards; animation-delay: 0.12s; }

@keyframes p4JingleFloat {
  0%   { opacity: 1; transform: translate(0, 0) scale(1); }

  100% { opacity: 0; transform: translate(0, -28px) scale(1.4) rotate(20deg); }

}

/* Active star sparkle burst */
.p4-party-antlers.active .as-1 { animation: p4AntSparkleBurst1 0.8s ease-out forwards; }

.p4-party-antlers.active .as-2 { animation: p4AntSparkleBurst2 0.8s ease-out forwards; animation-delay: 0.1s; }

.p4-party-antlers.active .as-3 { animation: p4AntSparkleBurst3 0.8s ease-out forwards; animation-delay: 0.2s; }

@keyframes p4AntSparkleBurst1 {
  0%   { opacity: 0; transform: translate(0,0) scale(0.5); }

  25%  { opacity: 1; }

  100% { opacity: 0; transform: translate(-22px,-30px) scale(2) rotate(90deg); }

}

@keyframes p4AntSparkleBurst2 {
  0%   { opacity: 0; transform: translate(0,0) scale(0.5); }

  25%  { opacity: 1; }

  100% { opacity: 0; transform: translate(2px,-36px) scale(2.2) rotate(-60deg); }

}

@keyframes p4AntSparkleBurst3 {
  0%   { opacity: 0; transform: translate(0,0) scale(0.5); }

  25%  { opacity: 1; }

  100% { opacity: 0; transform: translate(25px,-28px) scale(1.8) rotate(150deg); }

}

/* 20. Mini Christmas Tree */
.p4-party-mini-tree {
  left: 12%;
  top: 375px;
  width: 65px;
  height: 90px;
  transform-origin: bottom center;
  animation: p4TreeIdleSway 6s ease-in-out infinite alternate;
  transition: transform 1.2s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.p4-party-mini-tree.active {
  animation: p4TreeActiveBounce 0.9s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  transition: none;
}

.p4-tree-star-glow {
  animation: p4TreeStarPulse 2s ease-in-out infinite alternate;
  transform-origin: 50px 15px;
}

.p4-tree-light {
  animation: p4LightBreathe 1.5s ease-in-out infinite alternate;
}

.p4-tree-light.l-1 { animation-delay: 0s; }

.p4-tree-light.l-2 { animation-delay: 0.25s; }

.p4-tree-light.l-3 { animation-delay: 0.5s; }

.p4-tree-light.l-4 { animation-delay: 0.75s; }

.p4-tree-light.l-5 { animation-delay: 1s; }

.p4-tree-light.l-6 { animation-delay: 1.25s; }

.p4-tree-light.l-7 { animation-delay: 0.1s; }

.p4-tree-particle {
  position: absolute;
  font-size: 14px;
  color: #fef08a;
  text-shadow: 0 0 5px #f59e0b;
  opacity: 0;
  pointer-events: none;
}

.p4-tree-particle.tp-1 { left: 45%; top: 30%; }

.p4-tree-particle.tp-2 { left: 30%; top: 50%; }

.p4-tree-particle.tp-3 { left: 60%; top: 50%; }

.p4-party-mini-tree.active .p4-tree-particle.tp-1 {
  animation: p4TreeParticleBurst1 0.9s ease-out forwards;
}

.p4-party-mini-tree.active .p4-tree-particle.tp-2 {
  animation: p4TreeParticleBurst2 0.9s ease-out forwards;
}

.p4-party-mini-tree.active .p4-tree-particle.tp-3 {
  animation: p4TreeParticleBurst3 0.9s ease-out forwards;
}

@keyframes p4TreeIdleSway {
  0% { transform: rotate(-1.5deg); }

  100% { transform: rotate(1.5deg); }

}

@keyframes p4TreeActiveBounce {
  0% { transform: scale(1) rotate(0); }

  15% { transform: scale(0.85, 1.15) rotate(-6deg); filter: brightness(1.2); }

  30% { transform: scale(1.15, 0.85) rotate(5deg); filter: brightness(1.3) drop-shadow(0 0 12px rgba(251, 191, 36, 0.6)); }

  45% { transform: scale(0.92, 1.08) rotate(-3deg); filter: brightness(1.2); }

  60% { transform: scale(1.05, 0.95) rotate(2deg); }

  75% { transform: scale(0.98, 1.02) rotate(-1deg); }

  100% { transform: scale(1) rotate(0); }

}

@keyframes p4TreeStarPulse {
  0% { opacity: 0.3; transform: scale(0.85); filter: brightness(0.9); }

  100% { opacity: 0.85; transform: scale(1.15); filter: brightness(1.4) drop-shadow(0 0 8px #fbbf24); }

}

@keyframes p4LightBreathe {
  0% { opacity: 0.2; filter: brightness(0.6) drop-shadow(0 0 0px #fbbf24); }

  100% { opacity: 1; filter: brightness(1.5) drop-shadow(0 0 5px #fbbf24); }

}

@keyframes p4TreeParticleBurst1 {
  0% { opacity: 0; transform: translate(0, 0) scale(0.5); }

  20% { opacity: 1; }

  100% { opacity: 0; transform: translate(-25px, -60px) scale(1.5) rotate(180deg); }

}

@keyframes p4TreeParticleBurst2 {
  0% { opacity: 0; transform: translate(0, 0) scale(0.5); }

  20% { opacity: 1; }

  100% { opacity: 0; transform: translate(-45px, -35px) scale(1.2) rotate(-120deg); }

}

@keyframes p4TreeParticleBurst3 {
  0% { opacity: 0; transform: translate(0, 0) scale(0.5); }

  20% { opacity: 1; }

  100% { opacity: 0; transform: translate(35px, -45px) scale(1.4) rotate(240deg); }

}

/* 21. Christmas Stocking */
.p4-party-stocking {
  left: 21%;
  top: 15px;
  width: 60px;
  height: 80px;
  transform-origin: 20px 6px;
  animation: p4StockingIdlePendulum 5s ease-in-out infinite alternate;
  transition: transform 1.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.p4-party-stocking.active {
  animation: p4StockingActiveKick 0.9s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  transition: none;
}

.p4-stocking-presents {
  animation: p4PresentsBob 3s ease-in-out infinite alternate;
  transform-origin: bottom center;
}

.p4-stocking-particle {
  position: absolute;
  font-size: 14px;
  opacity: 0;
  pointer-events: none;
}

.p4-stocking-particle.st-1 { left: 35%; top: 15px; }

.p4-stocking-particle.st-2 { left: 45%; top: 15px; }

.p4-stocking-particle.st-3 { left: 55%; top: 15px; }

.p4-party-stocking.active .p4-stocking-particle.st-1 {
  animation: p4StockingCandyBurst1 0.9s ease-out forwards;
}

.p4-party-stocking.active .p4-stocking-particle.st-2 {
  animation: p4StockingCandyBurst2 0.9s ease-out forwards;
}

.p4-party-stocking.active .p4-stocking-particle.st-3 {
  animation: p4StockingCandyBurst3 0.9s ease-out forwards;
}

@keyframes p4StockingIdlePendulum {
  0% { transform: rotate(-5deg); }

  100% { transform: rotate(5deg); }

}

@keyframes p4StockingActiveKick {
  0% { transform: rotate(0) scale(1); }

  15% { transform: rotate(-25deg) scale(1.15, 0.85); filter: brightness(1.2); }

  35% { transform: rotate(35deg) scale(0.9, 1.1) translate(5px, -2px); filter: brightness(1.3) drop-shadow(0 0 10px rgba(239, 68, 68, 0.5)); }

  55% { transform: rotate(-15deg) scale(1.05, 0.95); }

  75% { transform: rotate(8deg) scale(0.97, 1.03); }

  100% { transform: rotate(0) scale(1); }

}

@keyframes p4PresentsBob {
  0% { transform: translateY(0); }

  100% { transform: translateY(-2px) rotate(1deg); }

}

@keyframes p4StockingCandyBurst1 {
  0% { opacity: 0; transform: translate(0, 0) scale(0.5); }

  25% { opacity: 1; }

  100% { opacity: 0; transform: translate(-30px, -45px) scale(1.3) rotate(-180deg); }

}

@keyframes p4StockingCandyBurst2 {
  0% { opacity: 0; transform: translate(0, 0) scale(0.5); }

  25% { opacity: 1; }

  100% { opacity: 0; transform: translate(5px, -55px) scale(1.5) rotate(90deg); }

}

@keyframes p4StockingCandyBurst3 {
  0% { opacity: 0; transform: translate(0, 0) scale(0.5); }

  25% { opacity: 1; }

  100% { opacity: 0; transform: translate(35px, -40px) scale(1.2) rotate(180deg); }

}

/* 22. Wall Star */
.p4-party-wall-star {
  right: 12%;
  top: 130px;
  width: 55px;
  height: 55px;
  transform-origin: center center;
  animation: p4WallStarBreathe 4s ease-in-out infinite alternate;
  transition: transform 1.2s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.p4-party-wall-star.active {
  animation: p4WallStarActiveSpin 0.9s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  transition: none;
}

.p4-wall-star-glow {
  animation: p4WallStarHaloPulse 3s ease-in-out infinite alternate;
  transform-origin: 40px 40px;
}

.p4-star-sparkle {
  position: absolute;
  font-size: 14px;
  color: #a7f3d0;
  text-shadow: 0 0 5px #34d399;
  opacity: 0;
  pointer-events: none;
}

.p4-star-sparkle.wsp-1 { left: 40%; top: 40%; }

.p4-star-sparkle.wsp-2 { left: 40%; top: 40%; }

.p4-star-sparkle.wsp-3 { left: 40%; top: 40%; }

.p4-party-wall-star.active .p4-star-sparkle.wsp-1 {
  animation: p4WallStarSparkBurst1 0.9s ease-out forwards;
}

.p4-party-wall-star.active .p4-star-sparkle.wsp-2 {
  animation: p4WallStarSparkBurst2 0.9s ease-out forwards;
}

.p4-party-wall-star.active .p4-star-sparkle.wsp-3 {
  animation: p4WallStarSparkBurst3 0.9s ease-out forwards;
}

@keyframes p4WallStarBreathe {
  0% { transform: scale(0.92); filter: brightness(0.9) drop-shadow(0 0 4px rgba(52, 211, 153, 0.4)); }

  100% { transform: scale(1.08); filter: brightness(1.2) drop-shadow(0 0 12px rgba(52, 211, 153, 0.8)); }

}

@keyframes p4WallStarHaloPulse {
  0% { opacity: 0.4; transform: scale(0.85); }

  100% { opacity: 0.85; transform: scale(1.15); }

}

@keyframes p4WallStarActiveSpin {
  0% { transform: scale(1) rotate(0); }

  15% { transform: scale(1.3) rotate(90deg); filter: brightness(1.4) drop-shadow(0 0 15px #34d399); }

  35% { transform: scale(0.8) rotate(220deg); filter: brightness(1.5) drop-shadow(0 0 20px #a7f3d0); }

  55% { transform: scale(1.15) rotate(360deg); }

  75% { transform: scale(0.95) rotate(420deg); }

  100% { transform: scale(1) rotate(480deg); }

}

@keyframes p4WallStarSparkBurst1 {
  0% { opacity: 0; transform: translate(0, 0) scale(0.5); }

  25% { opacity: 1; }

  100% { opacity: 0; transform: translate(-45px, -35px) scale(1.4) rotate(-140deg); }

}

@keyframes p4WallStarSparkBurst2 {
  0% { opacity: 0; transform: translate(0, 0) scale(0.5); }

  25% { opacity: 1; }

  100% { opacity: 0; transform: translate(50px, -20px) scale(1.5) rotate(180deg); }

}

@keyframes p4WallStarSparkBurst3 {
  0% { opacity: 0; transform: translate(0, 0) scale(0.5); }

  25% { opacity: 1; }

  100% { opacity: 0; transform: translate(-10px, 50px) scale(1.2) rotate(120deg); }

}

/* 23. Gift Box A & 24. Gift Box B */
.p4-party-gift-a {
  left: 24%;
  bottom: 10px;
  width: 60px;
  height: 64px;
  transform-origin: bottom center;
  animation: p4GiftIdleWobbleA 5.5s ease-in-out infinite alternate;
  transition: transform 1.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.p4-party-gift-b {
  left: 6%;
  top: 360px;
  width: 55px;
  height: 59px;
  transform-origin: bottom center;
  animation: p4GiftIdleWobbleB 6s ease-in-out infinite alternate;
  transition: transform 1.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* Ambient glow breathing */
.p4-gift-glow-a {
  animation: p4GiftGlowBreatheA 3.5s ease-in-out infinite alternate;
}

.p4-gift-glow-b {
  animation: p4GiftGlowBreatheB 4s ease-in-out infinite alternate;
}

/* Ribbon sparkle */
.p4-gift-ribbon-sparkle-a {
  animation: p4GiftRibbonSparkle 2.8s ease-in-out infinite alternate;
}

.p4-gift-ribbon-sparkle-b {
  animation: p4GiftRibbonSparkle 3.2s ease-in-out infinite alternate-reverse;
}

/* Gift tag pendulum (Gift A only) */
.p4-gift-tag-a {
  transform-origin: 26px 37px;
  animation: p4GiftTagSwing 3.5s ease-in-out infinite alternate;
}

/* Jewel sparkle (Gift B only) */
.p4-gift-jewel-b {
  animation: p4GiftJewelPulse 2s ease-in-out infinite alternate;
}

/* Lid group idle */
.p4-gift-lid-group {
  transition: transform 1.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  transform-origin: 40px 28px;
}

/* Active states */
.p4-party-gift-a.active {
  animation: p4GiftActiveBounceA 1.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  transition: none;
}

.p4-party-gift-b.active {
  animation: p4GiftActiveBounceB 1.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  transition: none;
}

/* Lid pop on active */
.p4-party-gift-a.active .p4-gift-lid-group {
  animation: p4LidPopA 1.2s cubic-bezier(0.25, 0.8, 0.25, 1.4) forwards;
  transition: none;
}

.p4-party-gift-b.active .p4-gift-lid-group {
  animation: p4LidPopB 1.2s cubic-bezier(0.25, 0.8, 0.25, 1.4) forwards;
  transition: none;
}

/* Active glow surge */
.p4-party-gift-a.active .p4-gift-glow-a {
  animation: p4GiftGlowSurgeA 1.2s ease-out;
}

.p4-party-gift-b.active .p4-gift-glow-b {
  animation: p4GiftGlowSurgeB 1.2s ease-out;
}

/* Active tag wild swing */
.p4-party-gift-a.active .p4-gift-tag-a {
  animation: p4GiftTagWild 0.6s ease-in-out 3;
}

/* Active jewel flash */
.p4-party-gift-b.active .p4-gift-jewel-b {
  animation: p4GiftJewelFlash 0.15s linear infinite;
}

/* Particles */
.p4-gift-particle {
  position: absolute;
  font-size: 13px;
  opacity: 0;
  pointer-events: none;
  z-index: 10;
}

.p4-gift-particle.gpa-1 { left: 25%; top: 20px; }

.p4-gift-particle.gpa-2 { left: 40%; top: 15px; }

.p4-gift-particle.gpa-3 { left: 55%; top: 18px; }

.p4-gift-particle.gpa-4 { left: 15%; top: 22px; }

.p4-gift-particle.gpa-5 { left: 65%; top: 20px; }

.p4-gift-particle.gpb-1 { left: 25%; top: 20px; }

.p4-gift-particle.gpb-2 { left: 40%; top: 15px; }

.p4-gift-particle.gpb-3 { left: 55%; top: 18px; }

.p4-gift-particle.gpb-4 { left: 15%; top: 22px; }

.p4-gift-particle.gpb-5 { left: 65%; top: 20px; }

/* Trigger particles A */
.p4-party-gift-a.active .p4-gift-particle.gpa-1 { animation: p4GiftAConfetti1 1s ease-out forwards; }

.p4-party-gift-a.active .p4-gift-particle.gpa-2 { animation: p4GiftAConfetti2 1s ease-out forwards 0.05s; }

.p4-party-gift-a.active .p4-gift-particle.gpa-3 { animation: p4GiftAConfetti3 1s ease-out forwards 0.1s; }

.p4-party-gift-a.active .p4-gift-particle.gpa-4 { animation: p4GiftAConfetti4 1s ease-out forwards 0.15s; }

.p4-party-gift-a.active .p4-gift-particle.gpa-5 { animation: p4GiftAConfetti5 1s ease-out forwards 0.2s; }

/* Trigger particles B */
.p4-party-gift-b.active .p4-gift-particle.gpb-1 { animation: p4GiftBConfetti1 1s ease-out forwards; }

.p4-party-gift-b.active .p4-gift-particle.gpb-2 { animation: p4GiftBConfetti2 1s ease-out forwards 0.05s; }

.p4-party-gift-b.active .p4-gift-particle.gpb-3 { animation: p4GiftBConfetti3 1s ease-out forwards 0.1s; }

.p4-party-gift-b.active .p4-gift-particle.gpb-4 { animation: p4GiftBConfetti4 1s ease-out forwards 0.15s; }

.p4-party-gift-b.active .p4-gift-particle.gpb-5 { animation: p4GiftBConfetti5 1s ease-out forwards 0.2s; }

/* ---- IDLE KEYFRAMES ---- */
@keyframes p4GiftIdleWobbleA {
  0% { transform: rotate(-2.5deg) translateY(0); }

  30% { transform: rotate(0.5deg) translateY(-1.5px); }

  60% { transform: rotate(2deg) translateY(-0.5px); }

  100% { transform: rotate(-1.5deg) translateY(0); }

}

@keyframes p4GiftIdleWobbleB {
  0% { transform: rotate(2.5deg) translateY(0); }

  30% { transform: rotate(-0.5deg) translateY(-1px); }

  60% { transform: rotate(-2deg) translateY(-0.5px); }

  100% { transform: rotate(1.5deg) translateY(0); }

}

@keyframes p4GiftGlowBreatheA {
  0% { opacity: 0.6; transform: scale(0.9); }

  100% { opacity: 1; transform: scale(1.1); }

}

@keyframes p4GiftGlowBreatheB {
  0% { opacity: 0.5; transform: scale(0.85); }

  100% { opacity: 1; transform: scale(1.15); }

}

@keyframes p4GiftRibbonSparkle {
  0% { opacity: 0.3; r: 1; }

  50% { opacity: 1; r: 2; }

  100% { opacity: 0.3; r: 1; }

}

@keyframes p4GiftTagSwing {
  0% { transform: rotate(-12deg); }

  50% { transform: rotate(-18deg); }

  100% { transform: rotate(-8deg); }

}

@keyframes p4GiftJewelPulse {
  0% { fill: #22d3ee; filter: drop-shadow(0 0 2px #22d3ee); r: 1.5; }

  100% { fill: #67e8f9; filter: drop-shadow(0 0 5px #67e8f9); r: 2; }

}

/* ---- ACTIVE KEYFRAMES ---- */
@keyframes p4GiftActiveBounceA {
  0% { transform: scale(1) rotate(0) translateY(0); }

  8% { transform: scale(1.08, 0.88) rotate(0); }

  18% { transform: scale(1.2, 0.78) rotate(-4deg) translateY(2px); filter: brightness(1.15); }

  32% { transform: scale(0.82, 1.22) rotate(5deg) translateY(-14px); filter: brightness(1.3) drop-shadow(0 0 12px rgba(59,130,246,0.5)); }

  48% { transform: scale(1.08, 0.92) rotate(-3deg) translateY(-4px); }

  62% { transform: scale(0.95, 1.05) rotate(2deg) translateY(-8px); filter: brightness(1.1); }

  78% { transform: scale(1.03, 0.97) rotate(-1deg) translateY(-2px); }

  100% { transform: scale(1) rotate(0) translateY(0); filter: brightness(1); }

}

@keyframes p4GiftActiveBounceB {
  0% { transform: scale(1) rotate(0) translateY(0); }

  8% { transform: scale(1.1, 0.85) rotate(0); }

  18% { transform: scale(1.22, 0.75) rotate(5deg) translateY(2px); filter: brightness(1.15); }

  32% { transform: scale(0.8, 1.24) rotate(-6deg) translateY(-16px); filter: brightness(1.3) drop-shadow(0 0 12px rgba(217,70,239,0.5)); }

  48% { transform: scale(1.1, 0.9) rotate(4deg) translateY(-5px); }

  62% { transform: scale(0.94, 1.06) rotate(-2deg) translateY(-9px); filter: brightness(1.1); }

  78% { transform: scale(1.02, 0.98) rotate(1deg) translateY(-2px); }

  100% { transform: scale(1) rotate(0) translateY(0); filter: brightness(1); }

}

@keyframes p4LidPopA {
  0% { transform: translate(0, 0) rotate(0) scale(1); }

  20% { transform: translate(-14px, -28px) rotate(-25deg) scale(1.08); }

  45% { transform: translate(-8px, -18px) rotate(-15deg) scale(1.02); }

  70% { transform: translate(-3px, -6px) rotate(-5deg); }

  100% { transform: translate(0, 0) rotate(0) scale(1); }

}

@keyframes p4LidPopB {
  0% { transform: translate(0, 0) rotate(0) scale(1); }

  20% { transform: translate(14px, -28px) rotate(25deg) scale(1.08); }

  45% { transform: translate(8px, -18px) rotate(15deg) scale(1.02); }

  70% { transform: translate(3px, -6px) rotate(5deg); }

  100% { transform: translate(0, 0) rotate(0) scale(1); }

}

@keyframes p4GiftGlowSurgeA {
  0% { opacity: 0.6; transform: scale(1); }

  30% { opacity: 1; transform: scale(1.6); filter: drop-shadow(0 0 15px rgba(59,130,246,0.6)); }

  100% { opacity: 0.6; transform: scale(1); }

}

@keyframes p4GiftGlowSurgeB {
  0% { opacity: 0.5; transform: scale(1); }

  30% { opacity: 1; transform: scale(1.7); filter: drop-shadow(0 0 15px rgba(217,70,239,0.6)); }

  100% { opacity: 0.5; transform: scale(1); }

}

@keyframes p4GiftTagWild {
  0% { transform: rotate(-12deg); }

  25% { transform: rotate(-30deg); }

  50% { transform: rotate(5deg); }

  75% { transform: rotate(-25deg); }

  100% { transform: rotate(-12deg); }

}

@keyframes p4GiftJewelFlash {
  0% { fill: #22d3ee; filter: drop-shadow(0 0 6px #22d3ee); }

  33% { fill: #ec4899; filter: drop-shadow(0 0 6px #ec4899); }

  66% { fill: #fbbf24; filter: drop-shadow(0 0 6px #fbbf24); }

  100% { fill: #22d3ee; filter: drop-shadow(0 0 6px #22d3ee); }

}

/* ---- CONFETTI KEYFRAMES A ---- */
@keyframes p4GiftAConfetti1 {
  0% { opacity: 0; transform: translate(0, 0) scale(0.3) rotate(0); }

  15% { opacity: 1; }

  100% { opacity: 0; transform: translate(-40px, -55px) scale(1.5) rotate(-180deg); }

}

@keyframes p4GiftAConfetti2 {
  0% { opacity: 0; transform: translate(0, 0) scale(0.3) rotate(0); }

  15% { opacity: 1; }

  100% { opacity: 0; transform: translate(5px, -65px) scale(1.6) rotate(200deg); }

}

@keyframes p4GiftAConfetti3 {
  0% { opacity: 0; transform: translate(0, 0) scale(0.3) rotate(0); }

  15% { opacity: 1; }

  100% { opacity: 0; transform: translate(45px, -50px) scale(1.4) rotate(120deg); }

}

@keyframes p4GiftAConfetti4 {
  0% { opacity: 0; transform: translate(0, 0) scale(0.3) rotate(0); }

  15% { opacity: 1; }

  100% { opacity: 0; transform: translate(-55px, -35px) scale(1.3) rotate(-240deg); }

}

@keyframes p4GiftAConfetti5 {
  0% { opacity: 0; transform: translate(0, 0) scale(0.3) rotate(0); }

  15% { opacity: 1; }

  100% { opacity: 0; transform: translate(50px, -40px) scale(1.5) rotate(280deg); }

}

/* ---- CONFETTI KEYFRAMES B ---- */
@keyframes p4GiftBConfetti1 {
  0% { opacity: 0; transform: translate(0, 0) scale(0.3) rotate(0); }

  15% { opacity: 1; }

  100% { opacity: 0; transform: translate(-35px, -50px) scale(1.4) rotate(-160deg); }

}

@keyframes p4GiftBConfetti2 {
  0% { opacity: 0; transform: translate(0, 0) scale(0.3) rotate(0); }

  15% { opacity: 1; }

  100% { opacity: 0; transform: translate(0, -60px) scale(1.6) rotate(220deg); }

}

@keyframes p4GiftBConfetti3 {
  0% { opacity: 0; transform: translate(0, 0) scale(0.3) rotate(0); }

  15% { opacity: 1; }

  100% { opacity: 0; transform: translate(40px, -45px) scale(1.5) rotate(150deg); }

}

@keyframes p4GiftBConfetti4 {
  0% { opacity: 0; transform: translate(0, 0) scale(0.3) rotate(0); }

  15% { opacity: 1; }

  100% { opacity: 0; transform: translate(-50px, -30px) scale(1.3) rotate(-200deg); }

}

@keyframes p4GiftBConfetti5 {
  0% { opacity: 0; transform: translate(0, 0) scale(0.3) rotate(0); }

  15% { opacity: 1; }

  100% { opacity: 0; transform: translate(45px, -35px) scale(1.4) rotate(260deg); }

}

/* 25. Punch Bowl */
.p4-party-punchbowl {
  right: 5%;
  top: 395px;
  width: 70px;
  height: 50px;
  transform-origin: bottom center;
  animation: p4PunchActiveShake 0.9s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  transition: transform 1.2s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.p4-party-punchbowl.active {
  animation: p4PunchActiveShake 0.9s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  transition: none;
}

.p4-fruit-group {
  animation: p4FruitBob 4s ease-in-out infinite alternate;
  transform-origin: center center;
}

.p4-punch-ladle-group {
  transform-origin: 52px 10px;
  animation: p4LadleIdleWobble 5s ease-in-out infinite alternate;
  transition: transform 1.2s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.p4-party-punchbowl.active .p4-punch-ladle-group {
  animation: p4LadleDip 0.9s ease-in-out forwards;
  transition: none;
}

.p4-punch-drop {
  position: absolute;
  font-size: 10px;
  color: #f43f5e;
  text-shadow: 0 0 3px #9f1239;
  opacity: 0;
  pointer-events: none;
}

.p4-punch-drop.pd-1 { left: 30%; top: 25px; }

.p4-punch-drop.pd-2 { left: 45%; top: 20px; }

.p4-punch-drop.pd-3 { left: 60%; top: 25px; }

.p4-party-punchbowl.active .p4-punch-drop.pd-1 {
  animation: p4PunchSplash1 0.9s ease-out forwards;
}

.p4-party-punchbowl.active .p4-punch-drop.pd-2 {
  animation: p4PunchSplash2 0.9s ease-out forwards;
}

.p4-party-punchbowl.active .p4-punch-drop.pd-3 {
  animation: p4PunchSplash3 0.9s ease-out forwards;
}

/* 26. Champagne Flute glass */
.p4-party-champagne-glass {
  right: 17%;
  top: 385px;
  width: 32px;
  height: 60px;
  transform-origin: 20px 74px;
  animation: p4FluteSway 6s ease-in-out infinite alternate;
  transition: transform 1.2s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.p4-party-champagne-glass.active {
  animation: p4FluteActiveClink 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  transition: none;
}

.p4-flute-liquid-svg {
  transition: transform 1.2s cubic-bezier(0.25, 0.8, 0.25, 1);
  transform-origin: 20px 48px;
}

.p4-party-champagne-glass.active .p4-flute-liquid-svg {
  animation: p4FluteSip 0.8s ease-in-out forwards;
  transition: none;
}

.p4-flute-bubble {
  animation: p4FluteBubbleRise 2.5s linear infinite;
}

.p4-flute-bubble.b-1 { animation-delay: 0s; transform-origin: 16px 40px; }

.p4-flute-bubble.b-2 { animation-delay: 0.7s; transform-origin: 24px 44px; }

.p4-flute-bubble.b-3 { animation-delay: 1.3s; transform-origin: 18px 32px; }

.p4-flute-bubble.b-4 { animation-delay: 1.9s; transform-origin: 22px 36px; }

.p4-flute-spark {
  position: absolute;
  font-size: 14px;
  color: #fde047;
  text-shadow: 0 0 5px #eab308;
  opacity: 0;
  pointer-events: none;
}

.p4-flute-spark.fs-1 { left: 30%; top: 15px; }

.p4-flute-spark.fs-2 { left: 50%; top: 10px; }

.p4-flute-spark.fs-3 { left: 70%; top: 15px; }

.p4-party-champagne-glass.active .p4-flute-spark.fs-1 {
  animation: p4FluteFizz1 0.8s ease-out forwards;
}

.p4-party-champagne-glass.active .p4-flute-spark.fs-2 {
  animation: p4FluteFizz2 0.8s ease-out forwards;
}

.p4-party-champagne-glass.active .p4-flute-spark.fs-3 {
  animation: p4FluteFizz3 0.8s ease-out forwards;
}

@keyframes p4FruitBob {
  0% { transform: translateY(0) rotate(0deg); }

  100% { transform: translateY(2px) rotate(4deg); }

}

@keyframes p4LadleIdleWobble {
  0% { transform: rotate(-3deg); }

  100% { transform: rotate(3deg); }

}

@keyframes p4PunchActiveShake {
  0% { transform: scale(1) rotate(0); }

  15% { transform: scale(1.1, 0.9) rotate(-3deg); }

  35% { transform: scale(0.95, 1.05) rotate(3deg); }

  55% { transform: scale(1.02, 0.98) rotate(-1deg); }

  75% { transform: scale(0.99, 1.01) rotate(1deg); }

  100% { transform: scale(1) rotate(0); }

}

@keyframes p4LadleDip {
  0% { transform: rotate(0) translate(0, 0); }

  25% { transform: rotate(-15deg) translate(-2px, -3px); }

  50% { transform: rotate(10deg) translate(-6px, 12px); }

  75% { transform: rotate(-8deg) translate(-1px, -5px); }

  100% { transform: rotate(0) translate(0, 0); }

}

@keyframes p4PunchSplash1 {
  0% { opacity: 0; transform: translate(0, 0) scale(0.5); }

  25% { opacity: 1; }

  100% { opacity: 0; transform: translate(-25px, -35px) scale(1.3); }

}

@keyframes p4PunchSplash2 {
  0% { opacity: 0; transform: translate(0, 0) scale(0.5); }

  25% { opacity: 1; }

  100% { opacity: 0; transform: translate(5px, -45px) scale(1.5); }

}

@keyframes p4PunchSplash3 {
  0% { opacity: 0; transform: translate(0, 0) scale(0.5); }

  25% { opacity: 1; }

  100% { opacity: 0; transform: translate(25px, -30px) scale(1.2); }

}

@keyframes p4FluteSway {
  0% { transform: rotate(-2deg); }

  100% { transform: rotate(2deg); }

}

@keyframes p4FluteBubbleRise {
  0% { transform: translateY(0) scale(0.6); opacity: 0; }

  20% { opacity: 0.8; }

  80% { opacity: 0.8; }

  100% { transform: translateY(-24px) scale(1.2); opacity: 0; }

}

@keyframes p4FluteActiveClink {
  0% { transform: rotate(0) scale(1); }

  15% { transform: rotate(-20deg) scale(0.9, 1.1); }

  35% { transform: rotate(25deg) scale(1.1, 0.9); filter: brightness(1.2) drop-shadow(0 0 8px rgba(253, 224, 71, 0.5)); }

  55% { transform: rotate(-10deg) scale(0.95, 1.05); }

  75% { transform: rotate(5deg) scale(1.02, 0.98); }

  100% { transform: rotate(0) scale(1); }

}

@keyframes p4FluteSip {
  0% { transform: scaleY(1); }

  40% { transform: scaleY(0.2); }

  70% { transform: scaleY(0.2); }

  100% { transform: scaleY(1); }

}

@keyframes p4FluteFizz1 {
  0% { opacity: 0; transform: translate(0, 0) scale(0.5); }

  20% { opacity: 1; }

  100% { opacity: 0; transform: translate(-15px, -35px) scale(1.3) rotate(-60deg); }

}

@keyframes p4FluteFizz2 {
  0% { opacity: 0; transform: translate(0, 0) scale(0.5); }

  20% { opacity: 1; }

  100% { opacity: 0; transform: translate(5px, -45px) scale(1.5) rotate(90deg); }

}

@keyframes p4FluteFizz3 {
  0% { opacity: 0; transform: translate(0, 0) scale(0.5); }

  20% { opacity: 1; }

  100% { opacity: 0; transform: translate(15px, -30px) scale(1.2) rotate(120deg); }

}

/* 27. Plate of Cookies */
.p4-party-cookies {
  right: 18%;
  top: 380px;
  width: 65px;
  height: 35px;
  transform-origin: bottom center;
  animation: p4CookiesIdleBob 5s ease-in-out infinite alternate;
  transition: transform 1.2s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.p4-party-cookies.active {
  animation: p4CookiesActiveBounce 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  transition: none;
}

.p4-cookie-steam {
  animation: p4CookieSteamRise 3s ease-in-out infinite;
}

.p4-cookie-steam.cst-1 { animation-delay: 0s; }

.p4-cookie-steam.cst-2 { animation-delay: 1.5s; }

.p4-cookie-crumb {
  position: absolute;
  font-size: 10px;
  opacity: 0;
  pointer-events: none;
}

.p4-cookie-crumb.ckc-1 { left: 20%; top: 15px; }

.p4-cookie-crumb.ckc-2 { left: 45%; top: 12px; }

.p4-cookie-crumb.ckc-3 { left: 70%; top: 15px; }

.p4-party-cookies.active .p4-cookie-crumb.ckc-1 {
  animation: p4CookieCrumbScatter1 0.8s ease-out forwards;
}

.p4-party-cookies.active .p4-cookie-crumb.ckc-2 {
  animation: p4CookieCrumbScatter2 0.8s ease-out forwards;
}

.p4-party-cookies.active .p4-cookie-crumb.ckc-3 {
  animation: p4CookieCrumbScatter3 0.8s ease-out forwards;
}

/* 28. Sparkler in glass */
.p4-party-sparkler {
  left: 22%;
  top: 370px;
  width: 35px;
  height: 75px;
  transform-origin: 20px 78px;
  animation: p4FluteSway 6s ease-in-out infinite alternate;
  transition: transform 1.2s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.p4-party-sparkler.active {
  animation: p4SparklerActiveBounce 0.9s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  transition: none;
}

.p4-sparkler-flare-glow {
  animation: p4SparklerFlarePulse 1s ease-in-out infinite alternate;
  transform-origin: 20px 18px;
}

.p4-party-sparkler.active .p4-sparkler-flare-glow {
  animation: p4SparklerActiveFlash 0.15s infinite alternate;
  transition: none;
}

.p4-party-sparkler.active .p4-sparkler-lines {
  animation: p4SparklerActiveFlash 0.1s infinite alternate;
}

.p4-sparkler-spark {
  position: absolute;
  font-size: 14px;
  color: #fde047;
  text-shadow: 0 0 5px #eab308;
  opacity: 0;
  pointer-events: none;
  animation: p4SparkIdleFizz 1.5s linear infinite;
}

.p4-sparkler-spark.spk-1 { left: 40%; top: 15px; animation-delay: 0s; --dx: -12px; --dy: -18px; }

.p4-sparkler-spark.spk-2 { left: 55%; top: 10px; animation-delay: 0.35s; --dx: 12px; --dy: -15px; }

.p4-sparkler-spark.spk-3 { left: 30%; top: 15px; animation-delay: 0.7s; --dx: -8px; --dy: -25px; }

.p4-sparkler-spark.spk-4 { left: 48%; top: 8px; animation-delay: 1.05s; --dx: 8px; --dy: -22px; }

.p4-party-sparkler.active .p4-sparkler-spark.spk-1 {
  animation: p4SparklerActiveSparks1 0.8s ease-out forwards;
}

.p4-party-sparkler.active .p4-sparkler-spark.spk-2 {
  animation: p4SparklerActiveSparks2 0.8s ease-out forwards;
}

.p4-party-sparkler.active .p4-sparkler-spark.spk-3 {
  animation: p4SparklerActiveSparks3 0.8s ease-out forwards;
}

.p4-party-sparkler.active .p4-sparkler-spark.spk-4 {
  animation: p4SparklerActiveSparks4 0.8s ease-out forwards;
}

@keyframes p4CookiesIdleBob {
  0% { transform: translateY(0) rotate(0deg); }

  100% { transform: translateY(1.5px) rotate(1deg); }

}

@keyframes p4CookieSteamRise {
  0% { transform: translateY(0) scale(0.8); opacity: 0; }

  25% { opacity: 0.4; }

  75% { opacity: 0.4; }

  100% { transform: translateY(-16px) scale(1.2); opacity: 0; }

}

@keyframes p4CookiesActiveBounce {
  0% { transform: scale(1) rotate(0); }

  15% { transform: scale(1.15, 0.85) rotate(-3deg); }

  35% { transform: scale(0.9, 1.1) rotate(4deg) translateY(-5px); filter: brightness(1.2) drop-shadow(0 0 8px rgba(255,255,255,0.4)); }

  55% { transform: scale(1.05, 0.95) rotate(-1deg); }

  75% { transform: scale(0.98, 1.02) rotate(1deg); }

  100% { transform: scale(1) rotate(0); }

}

@keyframes p4CookieCrumbScatter1 {
  0% { opacity: 0; transform: translate(0, 0) scale(0.5) rotate(0deg); }

  20% { opacity: 1; }

  100% { opacity: 0; transform: translate(-30px, -25px) scale(1.2) rotate(-120deg); }

}

@keyframes p4CookieCrumbScatter2 {
  0% { opacity: 0; transform: translate(0, 0) scale(0.5) rotate(0deg); }

  20% { opacity: 1; }

  100% { opacity: 0; transform: translate(5px, -35px) scale(1.5) rotate(180deg); }

}

@keyframes p4CookieCrumbScatter3 {
  0% { opacity: 0; transform: translate(0, 0) scale(0.5) rotate(0deg); }

  20% { opacity: 1; }

  100% { opacity: 0; transform: translate(30px, -20px) scale(1.2) rotate(90deg); }

}

@keyframes p4SparkIdleFizz {
  0% { opacity: 0; transform: translate(0, 0) scale(0.5); }

  20% { opacity: 0.8; }

  80% { opacity: 0.8; }

  100% { opacity: 0; transform: translate(var(--dx, 5px), var(--dy, -20px)) scale(1.1); }

}

@keyframes p4SparklerFlarePulse {
  0% { opacity: 0.4; transform: scale(0.85); }

  100% { opacity: 0.75; transform: scale(1.15); }

}

@keyframes p4SparklerActiveBounce {
  0% { transform: scale(1) rotate(0); }

  15% { transform: scale(0.9, 1.1) rotate(-8deg); }

  35% { transform: scale(1.15, 0.85) rotate(12deg); filter: brightness(1.3) drop-shadow(0 0 12px #fde047); }

  55% { transform: scale(0.95, 1.05) rotate(-5deg); }

  75% { transform: scale(1.02, 0.98) rotate(3deg); }

  100% { transform: scale(1) rotate(0); }

}

@keyframes p4SparklerActiveFlash {
  0% { opacity: 0.3; filter: brightness(0.8); }

  100% { opacity: 1; filter: brightness(1.6) drop-shadow(0 0 15px #fff); }

}

@keyframes p4SparklerActiveSparks1 {
  0% { opacity: 0; transform: translate(0, 0) scale(0.5); }

  20% { opacity: 1; }

  100% { opacity: 0; transform: translate(-35px, -55px) scale(1.5) rotate(-180deg); }

}

@keyframes p4SparklerActiveSparks2 {
  0% { opacity: 0; transform: translate(0, 0) scale(0.5); }

  20% { opacity: 1; }

  100% { opacity: 0; transform: translate(35px, -55px) scale(1.5) rotate(180deg); }

}

@keyframes p4SparklerActiveSparks3 {
  0% { opacity: 0; transform: translate(0, 0) scale(0.5); }

  20% { opacity: 1; }

  100% { opacity: 0; transform: translate(-45px, 15px) scale(1.2) rotate(-90deg); }

}

@keyframes p4SparklerActiveSparks4 {
  0% { opacity: 0; transform: translate(0, 0) scale(0.5); }

  20% { opacity: 1; }

  100% { opacity: 0; transform: translate(45px, 15px) scale(1.2) rotate(90deg); }

}

/* 29. Holiday Party Invite Card */
.p4-party-invite {
  left: 5%;
  top: 410px;
  width: 60px;
  height: 40px;
  perspective: 400px;
  transform-origin: bottom center;
  animation: p4InviteIdleBob 5.5s ease-in-out infinite alternate;
  transition: transform 1.2s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.p4-party-invite.active {
  animation: p4InviteActiveBounce 0.9s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  transition: none;
}

.p4-invite-container {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
}

.p4-envelope-back {
  position: absolute;
  left: 0;
  top: 0;
  width: 60px;
  height: 40px;
  z-index: 1;
}

.p4-invite-card {
  position: absolute;
  left: 4px;
  top: 3px;
  width: 52px;
  height: 34px;
  z-index: 2;
  transform-origin: bottom center;
  transition: transform 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.p4-envelope-front {
  position: absolute;
  left: 0;
  top: 0;
  width: 60px;
  height: 40px;
  z-index: 3;
  pointer-events: none;
}

.p4-envelope-flap {
  position: absolute;
  left: 0;
  top: 0;
  width: 60px;
  height: 22px;
  z-index: 4;
  transform-origin: top center;
  transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Active animations for Envelope and Card */
.p4-party-invite.active .p4-envelope-flap {
  transform: rotateX(160deg);
  z-index: 0;
}

.p4-party-invite.active .p4-invite-card {
  transform: translateY(-28px) rotate(-4deg);
  z-index: 5;
  filter: drop-shadow(0 4px 10px rgba(0,0,0,0.4));
}

.p4-invite-sparkle {
  position: absolute;
  font-size: 12px;
  opacity: 0;
  pointer-events: none;
}

.p4-invite-sparkle.is-1 { left: 15%; top: 15px; }

.p4-invite-sparkle.is-2 { left: 45%; top: 10px; }

.p4-invite-sparkle.is-3 { left: 75%; top: 15px; }

.p4-party-invite.active .p4-invite-sparkle.is-1 {
  animation: p4InviteSparkleBlast1 0.8s ease-out forwards;
}

.p4-party-invite.active .p4-invite-sparkle.is-2 {
  animation: p4InviteSparkleBlast2 0.8s ease-out forwards;
}

.p4-party-invite.active .p4-invite-sparkle.is-3 {
  animation: p4InviteSparkleBlast3 0.8s ease-out forwards;
}

/* 30. Disco Party Glasses */
.p4-party-glasses {
  left: 24%;
  top: 310px;
  width: 60px;
  height: 30px;
  transform-origin: center center;
  animation: p4GlassesIdleSway 4.5s ease-in-out infinite alternate;
  transition: transform 1.2s cubic-bezier(0.25, 0.8, 0.25, 1), filter 0.3s ease;
}

.p4-party-glasses.active {
  animation: p4GlassesActiveFlip 1.2s cubic-bezier(0.25, 0.8, 0.25, 1.2);
  transition: none;
}

.p4-shutter-bar {
  animation: p4GlassesShutterBreathe 3s ease-in-out infinite alternate;
}

.p4-shutter-bar:nth-child(even) {
  animation-delay: 1.5s;
}

.p4-party-glasses.active .p4-glasses-glow-ring {
  animation: p4GlassesRingStrobe 0.15s infinite alternate;
}

.p4-glasses-ring {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 40px;
  height: 20px;
  border: 1.5px solid #f472b6;
  border-radius: 8px;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(1);
}

.p4-glasses-ring.gr-2 { border-color: #a855f7; }

.p4-glasses-ring.gr-3 { border-color: #3b82f6; }

.p4-party-glasses.active .p4-glasses-ring.gr-1 {
  animation: p4GlassesRingExpansion1 1.2s ease-out forwards;
}

.p4-party-glasses.active .p4-glasses-ring.gr-2 {
  animation: p4GlassesRingExpansion2 1.2s ease-out forwards;
}

.p4-party-glasses.active .p4-glasses-ring.gr-3 {
  animation: p4GlassesRingExpansion3 1.2s ease-out forwards;
}

@keyframes p4InviteIdleBob {
  0% { transform: translateY(0) rotate(0deg); }

  100% { transform: translateY(-3px) rotate(1.5deg); }

}

@keyframes p4InviteActiveBounce {
  0% { transform: scale(1); }

  15% { transform: scale(1.12, 0.88); }

  35% { transform: scale(0.92, 1.08) translateY(-4px); }

  55% { transform: scale(1.05, 0.95); }

  75% { transform: scale(0.98, 1.02); }

  100% { transform: scale(1); }

}

@keyframes p4InviteSparkleBlast1 {
  0% { opacity: 0; transform: translate(0, 0) scale(0.5); }

  20% { opacity: 1; }

  100% { opacity: 0; transform: translate(-25px, -35px) scale(1.2) rotate(-90deg); }

}

@keyframes p4InviteSparkleBlast2 {
  0% { opacity: 0; transform: translate(0, 0) scale(0.5); }

  20% { opacity: 1; }

  100% { opacity: 0; transform: translate(5px, -45px) scale(1.4) rotate(180deg); }

}

@keyframes p4InviteSparkleBlast3 {
  0% { opacity: 0; transform: translate(0, 0) scale(0.5); }

  20% { opacity: 1; }

  100% { opacity: 0; transform: translate(25px, -30px) scale(1.2) rotate(90deg); }

}

@keyframes p4GlassesIdleSway {
  0% { transform: translateY(0) rotate(-1.5deg); }

  100% { transform: translateY(-2.5px) rotate(1.5deg); }

}

@keyframes p4GlassesShutterBreathe {
  0% { opacity: 0.3; }

  100% { opacity: 0.8; }

}

@keyframes p4GlassesActiveFlip {
  0% { transform: scale(1) rotate(0) rotateY(0); }

  25% { transform: scale(1.2) rotate(-10deg) rotateY(90deg); filter: brightness(1.4) drop-shadow(0 0 12px #f472b6); }

  50% { transform: scale(1.3) rotate(10deg) rotateY(180deg); filter: brightness(1.6) drop-shadow(0 0 16px #a855f7); }

  75% { transform: scale(1.1) rotate(-5deg) rotateY(270deg); filter: brightness(1.4) drop-shadow(0 0 12px #3b82f6); }

  100% { transform: scale(1) rotate(0) rotateY(360deg); }

}

@keyframes p4GlassesRingStrobe {
  0% { opacity: 0; filter: brightness(0.8); }

  100% { opacity: 1; filter: brightness(1.8) drop-shadow(0 0 8px currentColor); }

}

@keyframes p4GlassesRingExpansion1 {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.8); }

  20% { opacity: 0.7; }

  100% { opacity: 0; transform: translate(-50%, -50%) scale(2.2); }

}

@keyframes p4GlassesRingExpansion2 {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.8); }

  35% { opacity: 0.7; }

  100% { opacity: 0; transform: translate(-50%, -50%) scale(2.8); }

}

@keyframes p4GlassesRingExpansion3 {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.8); }

  50% { opacity: 0.7; }

  100% { opacity: 0; transform: translate(-50%, -50%) scale(3.4); }

}

/* 31. LED Rave Ring */
.p4-party-rave-ring {
  right: 24%;
  top: 350px;
  width: 45px;
  height: 45px;
  transform-origin: center center;
  animation: p4RaveRingSpin 10s linear infinite;
  transition: transform 1.2s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.p4-party-rave-ring.active {
  animation: p4RaveRingActiveBounce 0.9s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  transition: none;
}

.p4-ring-node {
  transform-origin: center center;
  animation: p4RaveNodeGlow 2s ease-in-out infinite alternate;
}

.p4-ring-node.rn-1 { animation-delay: 0s; }

.p4-ring-node.rn-2 { animation-delay: 0.25s; }

.p4-ring-node.rn-3 { animation-delay: 0.5s; }

.p4-ring-node.rn-4 { animation-delay: 0.75s; }

.p4-ring-node.rn-5 { animation-delay: 1s; }

.p4-ring-node.rn-6 { animation-delay: 1.25s; }

.p4-ring-node.rn-7 { animation-delay: 1.5s; }

.p4-ring-node.rn-8 { animation-delay: 1.75s; }

.p4-party-rave-ring.active .p4-ring-node {
  animation: p4RaveNodeChasing 0.2s linear infinite;
}

.p4-party-rave-ring.active .p4-ring-node.rn-2 { animation-delay: 0.025s; }

.p4-party-rave-ring.active .p4-ring-node.rn-3 { animation-delay: 0.05s; }

.p4-party-rave-ring.active .p4-ring-node.rn-4 { animation-delay: 0.075s; }

.p4-party-rave-ring.active .p4-ring-node.rn-5 { animation-delay: 0.1s; }

.p4-party-rave-ring.active .p4-ring-node.rn-6 { animation-delay: 0.125s; }

.p4-party-rave-ring.active .p4-ring-node.rn-7 { animation-delay: 0.15s; }

.p4-party-rave-ring.active .p4-ring-node.rn-8 { animation-delay: 0.175s; }

.p4-ring-spark {
  position: absolute;
  font-size: 14px;
  color: #ffffff;
  opacity: 0;
  pointer-events: none;
}

.p4-ring-spark.rp-1 { left: 45%; top: 45%; color: #ec4899; text-shadow: 0 0 5px #ec4899; }

.p4-ring-spark.rp-2 { left: 45%; top: 45%; color: #3b82f6; text-shadow: 0 0 5px #3b82f6; }

.p4-ring-spark.rp-3 { left: 45%; top: 45%; color: #10b981; text-shadow: 0 0 5px #10b981; }

.p4-ring-spark.rp-4 { left: 45%; top: 45%; color: #eab308; text-shadow: 0 0 5px #eab308; }

.p4-party-rave-ring.active .p4-ring-spark.rp-1 { animation: p4RaveSparkBlast1 0.8s ease-out forwards; }

.p4-party-rave-ring.active .p4-ring-spark.rp-2 { animation: p4RaveSparkBlast2 0.8s ease-out forwards; }

.p4-party-rave-ring.active .p4-ring-spark.rp-3 { animation: p4RaveSparkBlast3 0.8s ease-out forwards; }

.p4-party-rave-ring.active .p4-ring-spark.rp-4 { animation: p4RaveSparkBlast4 0.8s ease-out forwards; }

/* 32. Party Pinwheel decoration */
.p4-party-pinwheel {
  right: 26%;
  top: 270px;
  width: 50px;
  height: 50px;
  transform-origin: 30px 30px;
  transition: transform 1.5s cubic-bezier(0.1, 0.9, 0.2, 1);
}

.p4-party-pinwheel .p4-pinwheel-blades {
  transform-origin: 30px 30px;
  animation: p4PinwheelSpinIdle 8s linear infinite;
  transition: transform 1.5s cubic-bezier(0.1, 0.9, 0.2, 1);
}

.p4-party-pinwheel.active .p4-pinwheel-blades {
  animation: p4PinwheelSpinTurbo 0.4s linear infinite;
  transition: none;
}

.p4-party-pinwheel.active {
  animation: p4PinwheelWobble 0.9s ease-in-out;
  transition: none;
}

.p4-pinwheel-wind {
  position: absolute;
  left: 30px;
  top: 20px;
  width: 15px;
  height: 2px;
  background: linear-gradient(90deg, rgba(255,255,255,0.7), rgba(255,255,255,0));
  opacity: 0;
  pointer-events: none;
  border-radius: 1px;
}

.p4-pinwheel-wind.pw-1 { top: 15px; }

.p4-pinwheel-wind.pw-2 { top: 25px; animation-delay: 0.15s; }

.p4-pinwheel-wind.pw-3 { top: 35px; animation-delay: 0.3s; }

.p4-party-pinwheel.active .p4-pinwheel-wind.pw-1 {
  animation: p4PinwheelWindSlide 0.6s ease-out forwards;
}

.p4-party-pinwheel.active .p4-pinwheel-wind.pw-2 {
  animation: p4PinwheelWindSlide 0.6s ease-out forwards;
}

.p4-party-pinwheel.active .p4-pinwheel-wind.pw-3 {
  animation: p4PinwheelWindSlide 0.6s ease-out forwards;
}

@keyframes p4RaveRingSpin {
  0% { transform: rotate(0deg); }

  100% { transform: rotate(360deg); }

}

@keyframes p4RaveNodeGlow {
  0% { opacity: 0.4; filter: brightness(0.6) drop-shadow(0 0 2px currentColor); }

  100% { opacity: 1; filter: brightness(1.4) drop-shadow(0 0 6px currentColor); }

}

@keyframes p4RaveRingActiveBounce {
  0% { transform: scale(1) rotate(0); }

  15% { transform: scale(1.15) rotate(45deg); filter: brightness(1.2) drop-shadow(0 0 8px rgba(168,85,247,0.4)); }

  35% { transform: scale(0.9, 1.1) rotate(180deg) translateY(-5px); }

  55% { transform: scale(1.05, 0.95) rotate(270deg); }

  75% { transform: scale(0.98, 1.02) rotate(315deg); }

  100% { transform: scale(1) rotate(360deg); }

}

@keyframes p4RaveNodeChasing {
  0% { opacity: 0.3; filter: brightness(0.6); }

  50% { opacity: 1; filter: brightness(1.8) drop-shadow(0 0 8px currentColor); }

  100% { opacity: 0.3; filter: brightness(0.6); }

}

@keyframes p4RaveSparkBlast1 {
  0% { opacity: 0; transform: translate(0, 0) scale(0.5); }

  20% { opacity: 1; }

  100% { opacity: 0; transform: translate(-30px, -30px) scale(1.3) rotate(-120deg); }

}

@keyframes p4RaveSparkBlast2 {
  0% { opacity: 0; transform: translate(0, 0) scale(0.5); }

  20% { opacity: 1; }

  100% { opacity: 0; transform: translate(30px, -30px) scale(1.3) rotate(120deg); }

}

@keyframes p4RaveSparkBlast3 {
  0% { opacity: 0; transform: translate(0, 0) scale(0.5); }

  20% { opacity: 1; }

  100% { opacity: 0; transform: translate(30px, 30px) scale(1.3) rotate(60deg); }

}

@keyframes p4RaveSparkBlast4 {
  0% { opacity: 0; transform: translate(0, 0) scale(0.5); }

  20% { opacity: 1; }

  100% { opacity: 0; transform: translate(-30px, 30px) scale(1.3) rotate(-60deg); }

}

@keyframes p4PinwheelSpinIdle {
  0% { transform: rotate(0deg); }

  100% { transform: rotate(360deg); }

}

@keyframes p4PinwheelSpinTurbo {
  0% { transform: rotate(0deg); }

  100% { transform: rotate(360deg); }

}

@keyframes p4PinwheelWobble {
  0% { transform: rotate(0deg); }

  15% { transform: rotate(-8deg) scale(0.95); }

  35% { transform: rotate(6deg) scale(1.05); }

  55% { transform: rotate(-4deg); }

  75% { transform: rotate(2deg); }

  100% { transform: rotate(0deg); }

}

@keyframes p4PinwheelWindSlide {
  0% { opacity: 0; transform: translate(0, 0) scaleX(0.5); }

  30% { opacity: 0.8; }

  100% { opacity: 0; transform: translate(45px, 0) scaleX(1.8); }

}

/* 33. LED Cube Lamp */
.p4-party-cube-lamp {
  left: 16%;
  top: 430px;
  width: 45px;
  height: 45px;
  transform-origin: bottom center;
  animation: p4CubeIdleSway 4.5s ease-in-out infinite alternate, p4CubeColorShift 6s linear infinite;
  transition: transform 1.2s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.p4-party-cube-lamp.active {
  animation: p4CubeActiveBounce 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275), p4CubeColorStrobe 0.15s linear infinite;
  transition: none;
}

.p4-cube-faces {
  transform-origin: 30px 30px;
}

.p4-cube-face {
  transition: fill 0.5s ease, stroke 0.5s ease;
}

.p4-cube-floor-light {
  position: absolute;
  left: 50%;
  bottom: 0px;
  width: 32px;
  height: 8px;
  background: radial-gradient(ellipse, var(--cube-color-glow, rgba(168,85,247,0.5)) 0%, rgba(0,0,0,0) 70%);
  opacity: 0.8;
  pointer-events: none;
  transform: translateX(-50%) scale(1);
}

.p4-party-cube-lamp.active .p4-cube-floor-light {
  animation: p4CubeFloorFlash 0.8s ease-out forwards;
}

/* 34. Balloon Single Pink */
.p4-party-balloon-pink {
  left: 28%;
  top: 200px;
  width: 40px;
  height: 65px;
  transform-origin: 15px 30px;
  animation: p4PinkBalloonIdleBob 5s ease-in-out infinite alternate;
  transition: transform 1.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.p4-party-balloon-pink.active {
  animation: p4PinkBalloonActiveWobble 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  transition: none;
}

.p4-party-balloon-pink .p4-balloon-string {
  transform-origin: 15px 30px;
  animation: p4BalloonStringSwing 3s ease-in-out infinite alternate;
}

.p4-balloon-sparkle {
  position: absolute;
  font-size: 11px;
  opacity: 0;
  pointer-events: none;
}

.p4-party-balloon-pink .p4-balloon-sparkle {
  color: #fbcfe8;
  text-shadow: 0 0 4px #ec4899;
}

.p4-balloon-sparkle.ps-1 { left: 10%; top: 15px; }

.p4-balloon-sparkle.ps-2 { left: 45%; top: 5px; }

.p4-balloon-sparkle.ps-3 { left: 80%; top: 15px; }

.p4-party-balloon-pink.active .p4-balloon-sparkle.ps-1 {
  animation: p4PinkBalloonSparkleBlast1 0.8s ease-out forwards;
}

.p4-party-balloon-pink.active .p4-balloon-sparkle.ps-2 {
  animation: p4PinkBalloonSparkleBlast2 0.8s ease-out forwards;
}

.p4-party-balloon-pink.active .p4-balloon-sparkle.ps-3 {
  animation: p4PinkBalloonSparkleBlast3 0.8s ease-out forwards;
}

/* 35. Balloon Single Cyan */
.p4-party-balloon-cyan {
  right: 32%;
  top: 230px;
  width: 40px;
  height: 65px;
  transform-origin: 15px 30px;
  animation: p4CyanBalloonIdleBob 4.8s ease-in-out infinite alternate;
  transition: transform 1.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.p4-party-balloon-cyan.active {
  animation: p4CyanBalloonActiveWobble 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  transition: none;
}

.p4-party-balloon-cyan .p4-balloon-string {
  transform-origin: 15px 30px;
  animation: p4BalloonStringSwingCyan 2.7s ease-in-out infinite alternate;
}

.p4-party-balloon-cyan .p4-balloon-sparkle {
  color: #cffafe;
  text-shadow: 0 0 4px #22d3ee;
}

.p4-balloon-sparkle.cs-1 { left: 10%; top: 15px; }

.p4-balloon-sparkle.cs-2 { left: 45%; top: 5px; }

.p4-balloon-sparkle.cs-3 { left: 80%; top: 15px; }

.p4-party-balloon-cyan.active .p4-balloon-sparkle.cs-1 {
  animation: p4CyanBalloonSparkleBlast1 0.8s ease-out forwards;
}

.p4-party-balloon-cyan.active .p4-balloon-sparkle.cs-2 {
  animation: p4CyanBalloonSparkleBlast2 0.8s ease-out forwards;
}

.p4-party-balloon-cyan.active .p4-balloon-sparkle.cs-3 {
  animation: p4CyanBalloonSparkleBlast3 0.8s ease-out forwards;
}

@keyframes p4CubeIdleSway {
  0% { transform: translateY(0) rotate(-1deg) scale(1); }

  100% { transform: translateY(-2px) rotate(1deg) scale(1.02); }

}

@keyframes p4CubeColorShift {
  0%, 100% {
    --cube-color-core: #ec4899;
    --cube-color-glow: #a855f7;
    --cube-face-left: rgba(168, 85, 247, 0.35);
    --cube-face-right: rgba(168, 85, 247, 0.25);
    --cube-face-top: rgba(236, 72, 153, 0.45);
    --cube-stroke: #a855f7;
  }

  33% {
    --cube-color-core: #f43f5e;
    --cube-color-glow: #fb7185;
    --cube-face-left: rgba(244, 63, 94, 0.35);
    --cube-face-right: rgba(244, 63, 94, 0.25);
    --cube-face-top: rgba(251, 113, 133, 0.45);
    --cube-stroke: #f43f5e;
  }

  66% {
    --cube-color-core: #3b82f6;
    --cube-color-glow: #60a5fa;
    --cube-face-left: rgba(59, 130, 246, 0.35);
    --cube-face-right: rgba(59, 130, 246, 0.25);
    --cube-face-top: rgba(96, 165, 250, 0.45);
    --cube-stroke: #3b82f6;
  }

}

@keyframes p4CubeActiveBounce {
  0% { transform: scale(1) translateY(0); }

  20% { transform: scale(1.2, 0.85) translateY(2px); }

  50% { transform: scale(0.9, 1.15) translateY(-5px); filter: brightness(1.3) drop-shadow(0 0 10px rgba(255,255,255,0.4)); }

  75% { transform: scale(1.05, 0.95) translateY(-1px); }

  100% { transform: scale(1) translateY(0); }

}

@keyframes p4CubeColorStrobe {
  0%, 100% {
    --cube-color-core: #ffffff;
    --cube-color-glow: #ec4899;
    --cube-face-left: rgba(236, 72, 153, 0.7);
    --cube-face-right: rgba(236, 72, 153, 0.5);
    --cube-face-top: rgba(255, 255, 255, 0.8);
    --cube-stroke: #ffffff;
  }

  50% {
    --cube-color-core: #ffffff;
    --cube-color-glow: #3b82f6;
    --cube-face-left: rgba(59, 130, 246, 0.7);
    --cube-face-right: rgba(59, 130, 246, 0.5);
    --cube-face-top: rgba(255, 255, 255, 0.8);
    --cube-stroke: #ffffff;
  }

}

@keyframes p4CubeFloorFlash {
  0% { opacity: 0.8; transform: translateX(-50%) scale(1); }

  100% { opacity: 0; transform: translateX(-50%) scale(3.5); }

}

@keyframes p4PinkBalloonIdleBob {
  0% { transform: translateY(0) rotate(-1.5deg); }

  100% { transform: translateY(-4px) rotate(1.5deg); }

}

@keyframes p4BalloonStringSwing {
  0% { transform: rotate(-5deg); }

  100% { transform: rotate(5deg); }

}

@keyframes p4PinkBalloonActiveWobble {
  0% { transform: scale(1) translateY(0); }

  15% { transform: scale(1.15, 0.85) rotate(-8deg); }

  35% { transform: scale(0.85, 1.15) rotate(12deg) translateY(-8px); filter: brightness(1.2) drop-shadow(0 0 8px #f472b6); }

  55% { transform: scale(1.05, 0.95) rotate(-4deg) translateY(-2px); }

  75% { transform: scale(0.98, 1.02) rotate(2deg); }

  100% { transform: scale(1) translateY(0); }

}

@keyframes p4PinkBalloonSparkleBlast1 {
  0% { opacity: 0; transform: translate(0, 0) scale(0.5); }

  20% { opacity: 1; }

  100% { opacity: 0; transform: translate(-25px, -35px) scale(1.2) rotate(-90deg); }

}

@keyframes p4PinkBalloonSparkleBlast2 {
  0% { opacity: 0; transform: translate(0, 0) scale(0.5); }

  20% { opacity: 1; }

  100% { opacity: 0; transform: translate(0, -45px) scale(1.4) rotate(180deg); }

}

@keyframes p4PinkBalloonSparkleBlast3 {
  0% { opacity: 0; transform: translate(0, 0) scale(0.5); }

  20% { opacity: 1; }

  100% { opacity: 0; transform: translate(25px, -30px) scale(1.2) rotate(90deg); }

}

/* 36. Holiday Wreath */
.p4-party-wreath {
  left: 68%;
  top: 20px;
  width: 65px;
  height: 65px;
  transform-origin: 30px 6px;
  animation: p4WreathIdleSway 6s ease-in-out infinite alternate;
  transition: transform 1.2s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.p4-party-wreath.active {
  animation: p4WreathActiveBounce 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  transition: none;
}

.p4-wreath-bow-group {
  transform-origin: 30px 43px;
}

.p4-party-wreath.active .p4-wreath-bow-group {
  animation: p4WreathBowJiggle 0.8s ease-in-out;
}

.p4-wreath-bell {
  transform-origin: 40px 14px;
}

.p4-party-wreath.active .p4-wreath-bell {
  animation: p4WreathBowJiggle 0.8s ease-in-out alternate infinite;
}

.p4-wreath-led {
  transform-origin: center center;
  animation: p4WreathLedBreathe 2s ease-in-out infinite alternate;
}

.p4-wreath-led.led-1 { animation-delay: 0s; }

.p4-wreath-led.led-2 { animation-delay: 0.4s; }

.p4-wreath-led.led-3 { animation-delay: 0.8s; }

.p4-wreath-led.led-4 { animation-delay: 1.2s; }

.p4-wreath-led.led-5 { animation-delay: 1.6s; }

.p4-party-wreath.active .p4-wreath-led {
  animation: p4WreathLedChasing 0.25s linear infinite;
}

.p4-party-wreath.active .p4-wreath-led.led-2 { animation-delay: 0.05s; }

.p4-party-wreath.active .p4-wreath-led.led-3 { animation-delay: 0.1s; }

.p4-party-wreath.active .p4-wreath-led.led-4 { animation-delay: 0.15s; }

.p4-party-wreath.active .p4-wreath-led.led-5 { animation-delay: 0.2s; }

.p4-wreath-note {
  position: absolute;
  font-size: 14px;
  opacity: 0;
  pointer-events: none;
}

.p4-wreath-note.wn-1 { left: 25%; top: 40%; }

.p4-wreath-note.wn-2 { left: 45%; top: 35%; }

.p4-wreath-note.wn-3 { left: 65%; top: 40%; }

.p4-party-wreath.active .p4-wreath-note.wn-1 { animation: p4WreathNoteBlast1 0.8s ease-out forwards; }

.p4-party-wreath.active .p4-wreath-note.wn-2 { animation: p4WreathNoteBlast2 0.8s ease-out forwards; }

.p4-party-wreath.active .p4-wreath-note.wn-3 { animation: p4WreathNoteBlast3 0.8s ease-out forwards; }

/* 37. Party Popper */
.p4-party-popper {
  right: 25%;
  bottom: 25px;
  width: 45px;
  height: 45px;
  transform-origin: 33px 33px;
  animation: p4PopperIdleSway 5s ease-in-out infinite alternate;
  transition: transform 1.2s cubic-bezier(0.25, 0.8, 0.25, 1.15);
}

.p4-party-popper.active {
  animation: p4PopperActiveBlast 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  transition: none;
}

.p4-party-popper .p4-popper-string {
  transform-origin: 33px 33px;
  animation: p4PopperStringWiggle 3.5s ease-in-out infinite alternate;
  transition: transform 0.8s ease;
}

.p4-party-popper.active .p4-popper-string {
  animation: none;
  transform: translate(3px, 3px) scaleY(0.85);
}

.p4-party-popper .p4-popper-ring {
  transform-origin: 33px 33px;
  animation: p4PopperStringWiggle 3.5s ease-in-out infinite alternate;
  transition: transform 0.8s ease;
}

.p4-party-popper.active .p4-popper-ring {
  animation: none;
  transform: translate(3px, 3px);
}

/* Blast Ring & Flash */
.p4-popper-blast-ring {
  transform-origin: 14px 14px;
}

.p4-party-popper.active .p4-popper-blast-ring {
  animation: p4PopperRingBlast 0.6s ease-out forwards;
}

.p4-party-popper.active .p4-popper-muzzle-flash {
  animation: p4PopperFlash 0.3s ease-out forwards;
}

/* Confetti styling */
.p4-popper-confetti {
  position: absolute;
  font-size: 10px;
  opacity: 0;
  pointer-events: none;
  z-index: 10;
}

.p4-popper-confetti.pc-1 { color: #22d3ee; left: 10px; top: 10px; text-shadow: 0 0 3px #06b6d4; }

.p4-popper-confetti.pc-2 { color: #ec4899; left: 12px; top: 8px; text-shadow: 0 0 3px #d946ef; }

.p4-popper-confetti.pc-3 { color: #facc15; left: 8px; top: 12px; font-size: 8px; }

.p4-popper-confetti.pc-4 { color: #10b981; left: 14px; top: 10px; font-size: 7px; }

.p4-popper-confetti.pc-5 { color: #a855f7; left: 6px; top: 6px; text-shadow: 0 0 3px #8b5cf6; }

.p4-popper-confetti.pc-6 { color: #f97316; left: 15px; top: 14px; font-size: 8px; }

.p4-party-popper.active .p4-popper-confetti.pc-1 { animation: p4PopperConfettiBlast1 0.8s cubic-bezier(0.1, 0.8, 0.3, 1) forwards; }

.p4-party-popper.active .p4-popper-confetti.pc-2 { animation: p4PopperConfettiBlast2 0.75s cubic-bezier(0.1, 0.8, 0.3, 1) forwards; }

.p4-party-popper.active .p4-popper-confetti.pc-3 { animation: p4PopperConfettiBlast3 0.85s cubic-bezier(0.1, 0.8, 0.3, 1) forwards; }

.p4-party-popper.active .p4-popper-confetti.pc-4 { animation: p4PopperConfettiBlast4 0.7s cubic-bezier(0.1, 0.8, 0.3, 1) forwards; }

.p4-party-popper.active .p4-popper-confetti.pc-5 { animation: p4PopperConfettiBlast5 0.9s cubic-bezier(0.1, 0.8, 0.3, 1) forwards; }

.p4-party-popper.active .p4-popper-confetti.pc-6 { animation: p4PopperConfettiBlast6 0.8s cubic-bezier(0.1, 0.8, 0.3, 1) forwards; }

@keyframes p4PopperIdleSway {
  0% { transform: translateY(0) rotate(-2deg); }

  100% { transform: translateY(-1.5px) rotate(2deg); }

}

@keyframes p4PopperStringWiggle {
  0% { transform: rotate(-5deg); }

  100% { transform: rotate(5deg); }

}

@keyframes p4PopperActiveBlast {
  0% { transform: scale(1) translate(0, 0); }

  15% { transform: scale(0.8, 1.2) translate(5px, 5px) rotate(8deg); }

  35% { transform: scale(1.2, 0.8) translate(-6px, -6px) rotate(-12deg); filter: brightness(1.25) drop-shadow(0 0 10px #22d3ee); }

  55% { transform: scale(0.95, 1.05) translate(1px, 1px) rotate(3deg); }

  75% { transform: scale(1.02, 0.98) translate(-1px, -1px); }

  100% { transform: scale(1) translate(0, 0); }

}

@keyframes p4PopperRingBlast {
  0% { opacity: 0; transform: scale(0.5) translate(0, 0); }

  20% { opacity: 1; stroke-width: 2px; }

  100% { opacity: 0; transform: scale(3.5) translate(-15px, -15px); stroke-width: 0.5px; }

}

@keyframes p4PopperFlash {
  0% { opacity: 0; transform: scale(0.3); }

  25% { opacity: 1; transform: scale(1.2); }

  100% { opacity: 0; transform: scale(1.8); }

}

@keyframes p4PopperConfettiBlast1 {
  0% { opacity: 0; transform: translate(0, 0) scale(0.4) rotate(0deg); }

  20% { opacity: 1; }

  100% { opacity: 0; transform: translate(-45px, -45px) scale(1.5) rotate(270deg); }

}

@keyframes p4PopperConfettiBlast2 {
  0% { opacity: 0; transform: translate(0, 0) scale(0.4) rotate(0deg); }

  20% { opacity: 1; }

  100% { opacity: 0; transform: translate(-25px, -60px) scale(1.6) rotate(-180deg); }

}

@keyframes p4PopperConfettiBlast3 {
  0% { opacity: 0; transform: translate(0, 0) scale(0.4) rotate(0deg); }

  20% { opacity: 1; }

  100% { opacity: 0; transform: translate(-60px, -25px) scale(1.4) rotate(360deg); }

}

@keyframes p4PopperConfettiBlast4 {
  0% { opacity: 0; transform: translate(0, 0) scale(0.4) rotate(0deg); }

  20% { opacity: 1; }

  100% { opacity: 0; transform: translate(-35px, -50px) scale(1.5) rotate(-90deg); }

}

@keyframes p4PopperConfettiBlast5 {
  0% { opacity: 0; transform: translate(0, 0) scale(0.4) rotate(0deg); }

  20% { opacity: 1; }

  100% { opacity: 0; transform: translate(-50px, -35px) scale(1.3) rotate(180deg); }

}

@keyframes p4PopperConfettiBlast6 {
  0% { opacity: 0; transform: translate(0, 0) scale(0.4) rotate(0deg); }

  20% { opacity: 1; }

  100% { opacity: 0; transform: translate(-30px, -30px) scale(1.2) rotate(-120deg); }

}

/* 38. Disco Spotlight Floor Left */
.p4-party-spotlight-l {
  left: 32%;
  bottom: 0px;
  width: 70px;
  height: 140px;
  transform-origin: 35px 135px;
  transition: transform 1.2s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.p4-party-spotlight-l .p4-spotlight-head-group {
  transform-origin: 30px 95px;
  animation: p4SpotlightSwingL 4.5s ease-in-out infinite alternate;
  transition: transform 1.2s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.p4-party-spotlight-l.active .p4-spotlight-head-group {
  animation: p4SpotlightSwingLActive 1.2s ease-in-out infinite alternate;
}

.p4-party-spotlight-l.active .beam-pink,
.p4-party-spotlight-l.active .lens-pink {
  opacity: 0;
  transition: opacity 0.3s ease;
}

.p4-party-spotlight-l.active .beam-cyan-active,
.p4-party-spotlight-l.active .lens-cyan-active {
  opacity: 1;
  transition: opacity 0.3s ease;
}

/* 39. Disco Spotlight Floor Right */
.p4-party-spotlight-r {
  right: 34%;
  bottom: 0px;
  width: 70px;
  height: 140px;
  transform-origin: 35px 135px;
  transition: transform 1.2s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.p4-party-spotlight-r .p4-spotlight-head-group {
  transform-origin: 30px 95px;
  animation: p4SpotlightSwingR 4.5s ease-in-out infinite alternate;
  transition: transform 1.2s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.p4-party-spotlight-r.active .p4-spotlight-head-group {
  animation: p4SpotlightSwingRActive 1.2s ease-in-out infinite alternate;
}

.p4-party-spotlight-r.active .beam-cyan,
.p4-party-spotlight-r.active .lens-cyan {
  opacity: 0;
  transition: opacity 0.3s ease;
}

.p4-party-spotlight-r.active .beam-pink-active,
.p4-party-spotlight-r.active .lens-pink-active {
  opacity: 1;
  transition: opacity 0.3s ease;
}

/* Spotlight Dust Particles styling */
.p4-spotlight-particle {
  position: absolute;
  width: 2px;
  height: 2px;
  background: #ffffff;
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
  z-index: 5;
}

.p4-party-spotlight-l .sp-1 { left: 40%; bottom: 60px; animation: p4SpotlightDustL 3s linear infinite; }

.p4-party-spotlight-l .sp-2 { left: 25%; bottom: 80px; animation: p4SpotlightDustL 2.5s linear infinite 0.6s; }

.p4-party-spotlight-l .sp-3 { left: 60%; bottom: 50px; animation: p4SpotlightDustL 3.2s linear infinite 1.2s; }

.p4-party-spotlight-l .sp-4 { left: 50%; bottom: 90px; animation: p4SpotlightDustL 2.8s linear infinite 1.8s; }

.p4-party-spotlight-r .sp-1 { left: 40%; bottom: 60px; animation: p4SpotlightDustR 3s linear infinite; }

.p4-party-spotlight-r .sp-2 { left: 25%; bottom: 80px; animation: p4SpotlightDustR 2.5s linear infinite 0.6s; }

.p4-party-spotlight-r .sp-3 { left: 60%; bottom: 50px; animation: p4SpotlightDustR 3.2s linear infinite 1.2s; }

.p4-party-spotlight-r .sp-4 { left: 50%; bottom: 90px; animation: p4SpotlightDustR 2.8s linear infinite 1.8s; }

/* Click Interaction Jolt */
.p4-party-spotlight-l.active,
.p4-party-spotlight-r.active {
  animation: p4SpotlightJoltActive 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* Animations */
@keyframes p4SpotlightSwingL {
  0% { transform: rotate(-35deg); }

  100% { transform: rotate(5deg); }

}

@keyframes p4SpotlightSwingLActive {
  0% { transform: rotate(-45deg) scaleX(1.15); }

  100% { transform: rotate(15deg) scaleX(0.9); }

}

@keyframes p4SpotlightSwingR {
  0% { transform: rotate(35deg); }

  100% { transform: rotate(-5deg); }

}

@keyframes p4SpotlightSwingRActive {
  0% { transform: rotate(45deg) scaleX(1.15); }

  100% { transform: rotate(-15deg) scaleX(0.9); }

}

@keyframes p4SpotlightJoltActive {
  0% { transform: scale(1); }

  15% { transform: scale(1.15, 0.85) translateY(2px); }

  35% { transform: scale(0.9, 1.15) translateY(-5px); }

  55% { transform: scale(1.05, 0.95); }

  100% { transform: scale(1); }

}

@keyframes p4SpotlightDustL {
  0% { opacity: 0; transform: translateY(0) translateX(0) scale(0.5); }

  30% { opacity: 0.6; }

  100% { opacity: 0; transform: translateY(-70px) translateX(-20px) scale(1.3); }

}

@keyframes p4SpotlightDustR {
  0% { opacity: 0; transform: translateY(0) translateX(0) scale(0.5); }

  30% { opacity: 0.6; }

  100% { opacity: 0; transform: translateY(-70px) translateX(20px) scale(1.3); }

}

/* 40. Holiday Music Record Player */
.p4-party-record-player {
  right: 4%;
  top: 460px;
  width: 60px;
  height: 50px;
  transform-origin: center bottom;
  animation: p4RecordIdleSway 6s ease-in-out infinite alternate;
  transition: transform 1.2s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.p4-party-record-player.active {
  animation: p4RecordActiveBounce 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  transition: none;
}

/* Vinyl rotation */
.p4-record-platter-group {
  transform-origin: 32px 25px;
  animation: p4RecordSpin 4s linear infinite;
}

.p4-party-record-player.active .p4-record-platter-group {
  animation: p4RecordSpinActive 1.2s linear infinite;
}

/* Tonearm swing */
.p4-record-arm-group {
  transform-origin: 48px 16px;
  transform: rotate(5deg);
  animation: p4RecordArmIdle 3s ease-in-out infinite alternate;
  transition: transform 1.2s cubic-bezier(0.25, 0.8, 0.25, 1.15);
}

.p4-party-record-player.active .p4-record-arm-group {
  animation: none;
  transform: rotate(26deg);
}

/* Power LED indicator */
.p4-party-record-player.active .p4-player-led {
  animation: p4RecordLedFlash 0.2s linear infinite;
}

/* Music notes */
.p4-music-note {
  position: absolute;
  font-size: 11px;
  opacity: 0;
  pointer-events: none;
  z-index: 10;
}

.p4-music-note.mn-1 { left: 15px; top: 10px; color: #ec4899; text-shadow: 0 0 4px #ec4899; }

.p4-music-note.mn-2 { left: 25px; top: 5px; color: #a855f7; text-shadow: 0 0 4px #a855f7; }

.p4-music-note.mn-3 { left: 40px; top: 10px; color: #22d3ee; text-shadow: 0 0 4px #22d3ee; }

.p4-party-record-player.active .p4-music-note.mn-1 { animation: p4RecordNoteBlast1 1.2s ease-out forwards; }

.p4-party-record-player.active .p4-music-note.mn-2 { animation: p4RecordNoteBlast2 1.2s ease-out forwards 0.15s; }

.p4-party-record-player.active .p4-music-note.mn-3 { animation: p4RecordNoteBlast3 1.2s ease-out forwards 0.3s; }

@keyframes p4RecordIdleSway {
  0% { transform: translateY(0) rotate(-1deg); }

  100% { transform: translateY(-1.5px) rotate(1deg); }

}

@keyframes p4RecordSpin {
  0% { transform: rotate(0deg); }

  100% { transform: rotate(360deg); }

}

@keyframes p4RecordSpinActive {
  0% { transform: rotate(0deg); }

  100% { transform: rotate(360deg); }

}

@keyframes p4RecordArmIdle {
  0% { transform: rotate(4deg); }

  100% { transform: rotate(7deg); }

}

@keyframes p4RecordLedFlash {
  0%, 100% { fill: #ef4444; filter: drop-shadow(0 0 4px #ef4444); }

  50% { fill: #b91c1c; filter: none; }

}

@keyframes p4RecordActiveBounce {
  0% { transform: scale(1) translateY(0); }

  15% { transform: scale(1.15, 0.8) translateY(2px); }

  35% { transform: scale(0.85, 1.2) translateY(-8px) rotate(-3deg); filter: brightness(1.15) drop-shadow(0 0 8px rgba(180,83,9,0.3)); }

  55% { transform: scale(1.05, 0.95) translateY(1px) rotate(2deg); }

  75% { transform: scale(0.98, 1.02); }

  100% { transform: scale(1) translateY(0); }

}

@keyframes p4RecordNoteBlast1 {
  0% { opacity: 0; transform: translate(0, 0) scale(0.5) rotate(0deg); }

  25% { opacity: 1; }

  100% { opacity: 0; transform: translate(-30px, -45px) scale(1.4) rotate(-45deg); }

}

@keyframes p4RecordNoteBlast2 {
  0% { opacity: 0; transform: translate(0, 0) scale(0.5) rotate(0deg); }

  25% { opacity: 1; }

  100% { opacity: 0; transform: translate(0, -60px) scale(1.6) rotate(60deg); }

}

@keyframes p4RecordNoteBlast3 {
  0% { opacity: 0; transform: translate(0, 0) scale(0.5) rotate(0deg); }

  25% { opacity: 1; }

  100% { opacity: 0; transform: translate(30px, -45px) scale(1.4) rotate(45deg); }

}

@keyframes p4CyanBalloonIdleBob {
  0% { transform: translateY(0) rotate(-1.5deg); }

  100% { transform: translateY(-4px) rotate(1.5deg); }

}

@keyframes p4BalloonStringSwingCyan {
  0% { transform: rotate(-6deg); }

  100% { transform: rotate(6deg); }

}

@keyframes p4CyanBalloonActiveWobble {
  0% { transform: scale(1) translateY(0); }

  15% { transform: scale(1.15, 0.85) rotate(-8deg); }

  35% { transform: scale(0.85, 1.15) rotate(12deg) translateY(-8px); filter: brightness(1.2) drop-shadow(0 0 8px #22d3ee); }

  55% { transform: scale(1.05, 0.95) rotate(-4deg) translateY(-2px); }

  75% { transform: scale(0.98, 1.02) rotate(2deg); }

  100% { transform: scale(1) translateY(0); }

}

@keyframes p4CyanBalloonSparkleBlast1 {
  0% { opacity: 0; transform: translate(0, 0) scale(0.5); }

  20% { opacity: 1; }

  100% { opacity: 0; transform: translate(-25px, -35px) scale(1.2) rotate(-90deg); }

}

@keyframes p4CyanBalloonSparkleBlast2 {
  0% { opacity: 0; transform: translate(0, 0) scale(0.5); }

  20% { opacity: 1; }

  100% { opacity: 0; transform: translate(0, -45px) scale(1.4) rotate(180deg); }

}

@keyframes p4CyanBalloonSparkleBlast3 {
  0% { opacity: 0; transform: translate(0, 0) scale(0.5); }

  20% { opacity: 1; }

  100% { opacity: 0; transform: translate(25px, -30px) scale(1.2) rotate(90deg); }

}

@keyframes p4WreathIdleSway {
  0% { transform: rotate(-2deg); }

  100% { transform: rotate(2deg); }

}

@keyframes p4WreathActiveBounce {
  0% { transform: scale(1) rotate(0) translateY(0); }

  15% { transform: scale(1.1, 0.9) rotate(-6deg) translateY(3px); filter: brightness(1.25) drop-shadow(0 0 8px rgba(4,120,87,0.4)); }

  30% { transform: scale(0.92, 1.08) rotate(8deg) translateY(-4px); }

  45% { transform: scale(1.04, 0.96) rotate(-4deg) translateY(1px); }

  60% { transform: scale(0.98, 1.02) rotate(2deg); }

  100% { transform: scale(1) rotate(0) translateY(0); }

}

@keyframes p4WreathBowJiggle {
  0%, 100% { transform: rotate(0) scale(1); }

  20% { transform: rotate(-15deg) scale(1.1); }

  40% { transform: rotate(12deg) scale(0.95); }

  60% { transform: rotate(-8deg) scale(1.05); }

  80% { transform: rotate(4deg) scale(0.98); }

}

@keyframes p4WreathLedBreathe {
  0% { opacity: 0.3; filter: brightness(0.6) drop-shadow(0 0 1px currentColor); }

  100% { opacity: 1; filter: brightness(1.5) drop-shadow(0 0 5px currentColor); }

}

@keyframes p4WreathLedChasing {
  0%, 100% { opacity: 0.2; filter: brightness(0.5); }

  50% { opacity: 1; filter: brightness(1.8) drop-shadow(0 0 6px currentColor); }

}

@keyframes p4WreathNoteBlast1 {
  0% { opacity: 0; transform: translate(0, 0) scale(0.5) rotate(0deg); }

  20% { opacity: 1; }

  100% { opacity: 0; transform: translate(-25px, -45px) scale(1.3) rotate(-60deg); }

}

@keyframes p4WreathNoteBlast2 {
  0% { opacity: 0; transform: translate(0, 0) scale(0.5) rotate(0deg); }

  20% { opacity: 1; }

  100% { opacity: 0; transform: translate(0, -60px) scale(1.5) rotate(90deg); }

}

@keyframes p4WreathNoteBlast3 {
  0% { opacity: 0; transform: translate(0, 0) scale(0.5) rotate(0deg); }

  20% { opacity: 1; }

  100% { opacity: 0; transform: translate(25px, -45px) scale(1.3) rotate(60deg); }

}

/* ──────────────────────────────────────────────────────────
   NIGHT HOLIDAY MODE — Food Elements Grouped (Bottom-Right)
   Arranges all food/drink elements into a cozy party buffet
   cluster in the bottom-right corner of the section.
   ────────────────────────────────────────────────────────── */

/* Punch Bowl — center-back, the showpiece */
body.p4.night.holiday-mode .p4-party-punchbowl {
  right: 8%;
  top: auto;
  bottom: 15px;
}

/* Gingerbread Platter — left of punch bowl */
body.p4.night.holiday-mode .p4-party-gingerbread {
  right: 18%;
  top: auto;
  bottom: 8px;
}

/* Cookies Plate — front-right, beside punch bowl */
body.p4.night.holiday-mode .p4-party-cookies {
  right: 2%;
  top: auto;
  bottom: 10px;
}

/* Cupcakes Tray — front-left, beside gingerbread */
body.p4.night.holiday-mode .p4-party-cupcakes {
  right: 27%;
  top: auto;
  bottom: 12px;
}

/* Champagne Bottle — tall, standing behind cookies */
body.p4.night.holiday-mode .p4-party-champagne {
  left: auto;
  right: 4%;
  top: auto;
  bottom: 45px;
}

/* Champagne Flute — next to the bottle */
body.p4.night.holiday-mode .p4-party-champagne-glass {
  right: 14%;
  top: auto;
  bottom: 35px;
}

/* ──────────────────────────────────────────────────────────
   NIGHT HOLIDAY MODE — 4 Elements Moved to Top-Center
   (Balloons-R, Balloon-Cyan, Sparkler, Rave Ring)
   ────────────────────────────────────────────────────────── */

/* Hanging Helium Balloons Right — top-center, slightly right */
body.p4.night.holiday-mode .p4-party-balloons-r {
  right: auto;
  left: 60%;
  top: 55px;
}

/* Balloon Single Cyan — left of the balloons bunch */
body.p4.night.holiday-mode .p4-party-balloon-cyan {
  right: auto;
  left: 53%;
  top: 70px;
}

/* Sparkler in Glass — below, slightly left */
body.p4.night.holiday-mode .p4-party-sparkler {
  left: 55%;
  top: 110px;
}

/* LED Rave Ring — below, slightly right */
body.p4.night.holiday-mode .p4-party-rave-ring {
  right: auto;
  left: 62%;
  top: 130px;
}

/* ──────────────────────────────────────────────────────────
   NIGHT HOLIDAY MODE — 7 Elements Spread Across Center Gap
   (Envelope, Gift, Hat, Antlers, Tree, Glowsticks, Cube)
   ────────────────────────────────────────────────────────── */

body.p4.night.holiday-mode .p4-party-invite {
  left: 40%;
  right: auto;
  top: auto;
  bottom: 210px;
}

body.p4.night.holiday-mode .p4-party-gift-a {
  left: 46%;
  right: auto;
  top: auto;
  bottom: 320px;
}

body.p4.night.holiday-mode .p4-party-santa-hat {
  left: 52%;
  right: auto;
  top: auto;
  bottom: 205px;
}

body.p4.night.holiday-mode .p4-party-antlers {
  left: 58%;
  right: auto;
  top: auto;
  bottom: 335px;
}

body.p4.night.holiday-mode .p4-party-mini-tree {
  left: 64%;
  right: auto;
  top: auto;
  bottom: 210px;
}

body.p4.night.holiday-mode .p4-party-glowsticks {
  left: 70%;
  right: auto;
  top: auto;
  bottom: 300px;
}

body.p4.night.holiday-mode .p4-party-cube-lamp {
  left: 76%;
  right: auto;
  top: auto;
  bottom: 215px;
}

/* ──────────────────────────────────────────────────────────
   NIGHT HOLIDAY MODE — 3 Elements Moved to Left Shelf
   (Balloons-L, Balloon-Pink, Glasses)
   ────────────────────────────────────────────────────────── */

body.p4.night.holiday-mode .p4-party-balloons-l {
  left: 4%;
  right: auto;
  top: auto;
  bottom: 250px;
}

body.p4.night.holiday-mode .p4-party-balloon-pink {
  left: 10%;
  right: auto;
  top: auto;
  bottom: 210px;
}

body.p4.night.holiday-mode .p4-party-glasses {
  left: 7%;
  right: auto;
  top: auto;
  bottom: 170px;
}

/* ──────────────────────────────────────────────────────────
   DAY HOLIDAY MODE — BENEFITS BACKGROUND (IMAGE 2 DESIGN)
   ────────────────────────────────────────────────────────── */

/* Set section wrapper to relative and z-index */
body.p4.day.holiday-mode .p4-benefits {
  background: #0f1624 !important; /* modern dark building contrast */
  overflow: hidden;
  transition: all 0.5s ease;
}

body.p4.day.holiday-mode .p4-benefits .p4-wrap {
  position: relative;
  z-index: 10;
}

/* Make cards pop over the facade */
body.p4.day.holiday-mode .p4-benefits .p4-bf-bubble,
body.p4.day.holiday-mode .p4-benefits .p4-req-row {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
}

body.p4.day.holiday-mode .p4-benefits .p4-bf-label,
body.p4.day.holiday-mode .p4-benefits .p4-eyebrow,
body.p4.day.holiday-mode .p4-benefits .p4-heading {
  color: #ffffff !important;
  text-shadow: 0 2px 10px rgba(0,0,0,0.5);
}

body.p4.day.holiday-mode .p4-benefits .p4-heading .p4-glow {
  color: #5de2ff !important;
  text-shadow: 0 0 10px #5de2ff, 0 0 20px #00a2ff;
}

/* Background wrapper */
.p4-benefits-holiday-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
}

body.p4.day.holiday-mode .p4-benefits-holiday-bg {
  opacity: 1;
}

/* Sky gradient backdrop */
.p4-bh-sky {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, #6ec6d4 0%, #a4e1eb 40%, #e2f4f7 100%);
  z-index: 1;
}

/* Soft Sun overlay */
.p4-bh-sun {
  position: absolute;
  top: -50px;
  right: 15%;
  width: 300px;
  height: 300px;
  background: radial-gradient(circle, rgba(255, 253, 220, 0.6) 0%, rgba(255, 230, 150, 0.2) 50%, transparent 70%);
  z-index: 2;
  border-radius: 50%;
  filter: blur(10px);
}

/* Building container */
.p4-bh-building {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 3;
}

/* Concrete pillars (vertical structure) */
.p4-bh-columns {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-between;
  padding: 0 2%;
  z-index: 6;
}

.p4-bh-col {
  width: 38px;
  height: 100%;
  background: linear-gradient(90deg, #4b4855 0%, #686576 30%, #7d7a8c 50%, #585563 80%, #3e3c46 100%);
  box-shadow: 2px 0 10px rgba(0,0,0,0.3), -2px 0 10px rgba(0,0,0,0.3);
}

/* Concrete floors/beams */
.p4-bh-beams {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 7;
}

.p4-bh-beam {
  position: absolute;
  left: 0;
  width: 100%;
  background: linear-gradient(180deg, #7c798a 0%, #5a5767 40%, #403e4b 100%);
  box-shadow: 0 4px 12px rgba(0,0,0,0.4);
}

.p4-bh-beam.beam-top {
  top: 0;
  height: 35px;
}

.p4-bh-beam.beam-mid2 {
  top: 33%;
  height: 40px;
  background: linear-gradient(180deg, #8a8799 0%, #636071 40%, #464452 80%, #2f2e37 100%);
}

.p4-bh-beam.beam-mid1 {
  top: 66%;
  height: 45px;
  background: linear-gradient(180deg, #8a8799 0%, #636071 40%, #464452 80%, #2f2e37 100%);
}

.p4-bh-beam.beam-bottom {
  bottom: 0;
  height: 50px;
}

/* Glass window panes container */
.p4-bh-windows {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  z-index: 4;
}

.p4-bh-win-row {
  width: 100%;
  display: flex;
  justify-content: space-between;
}

.p4-bh-win-row.f3 {
  height: 33%;
}

.p4-bh-win-row.f2 {
  height: 33%;
}

.p4-bh-win-row.f1 {
  height: 34%;
}

.p4-bh-pane {
  flex: 1;
  height: 100%;
  position: relative;
  border-right: 1px solid rgba(255, 255, 255, 0.1);
  border-left: 1px solid rgba(0, 0, 0, 0.2);
  background: linear-gradient(135deg, rgba(82, 185, 172, 0.8) 0%, rgba(45, 126, 116, 0.85) 60%, rgba(27, 92, 84, 0.9) 100%);
  overflow: hidden;
}

/* Glass glare reflection lines overlay */
.p4-bh-pane::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 200%;
  height: 100%;
  background: linear-gradient(115deg, 
    rgba(255, 255, 255, 0) 0%, 
    rgba(255, 255, 255, 0) 30%, 
    rgba(255, 255, 255, 0.25) 32%, 
    rgba(255, 255, 255, 0) 34%,
    rgba(255, 255, 255, 0.15) 38%,
    rgba(255, 255, 255, 0) 42%
  );
  transform: translateX(-50%);
  pointer-events: none;
}

/* Room interior warmth glow */
.p4-bh-room-glow.warm {
  position: absolute;
  bottom: 0;
  left: 10%;
  width: 80%;
  height: 90%;
  background: radial-gradient(circle at bottom, rgba(255, 180, 70, 0.45) 0%, rgba(255, 120, 30, 0.1) 60%, transparent 80%);
  mix-blend-mode: screen;
}

/* Planter boxes and draping green ivy */
.p4-bh-planters {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 8;
}

.p4-bh-planter {
  position: absolute;
  height: 60px;
  width: 120px;
}

.p4-bh-planter.planter-1 {
  top: calc(33% - 10px);
  left: 15%;
}

.p4-bh-planter.planter-2 {
  top: calc(33% - 10px);
  left: 70%;
}

.p4-bh-planter.planter-3 {
  top: calc(66% - 10px);
  left: 45%;
}

.p4-bh-planter::before {
  content: '';
  position: absolute;
  bottom: 30px;
  left: 5%;
  width: 90%;
  height: 15px;
  background: linear-gradient(180deg, #443f3c 0%, #2b2725 100%);
  border-radius: 3px;
  box-shadow: 0 3px 6px rgba(0,0,0,0.5);
  border: 1px solid #57524f;
}

.p4-bh-planter svg {
  position: absolute;
  bottom: 0;
  left: 5%;
  width: 90%;
  height: 45px;
  filter: drop-shadow(0 4px 6px rgba(0,0,0,0.4));
}

/* "HOLIDAY TOURS" Glowing Sign */
.p4-bh-sign {
  position: absolute;
  top: 6%;
  right: 8%;
  display: flex;
  align-items: center;
  gap: 15px;
  z-index: 9;
  background: rgba(16, 25, 41, 0.4);
  padding: 10px 24px;
  border-radius: 12px;
  backdrop-filter: blur(4px);
  border: 1px solid rgba(93, 226, 255, 0.2);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3), inset 0 0 15px rgba(93, 226, 255, 0.1);
  animation: p4SignFlicker 6s infinite alternate;
}

.p4-bh-sign-logo {
  width: 60px;
  height: 36px;
  filter: drop-shadow(0 0 8px rgba(93, 226, 255, 0.8)) drop-shadow(0 0 15px rgba(0, 162, 255, 0.6));
}

.p4-bh-sign-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.p4-bh-sign-title {
  font-family: 'Outfit', 'Montserrat', 'Inter', sans-serif;
  font-size: 1.6rem;
  font-weight: 800;
  color: #ffffff;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-shadow: 0 0 4px #fff, 0 0 10px #5de2ff, 0 0 20px #00a2ff, 0 0 30px #00a2ff;
  line-height: 1.1;
}

.p4-bh-sign-url {
  font-family: 'Fira Code', 'Courier New', monospace;
  font-size: 0.75rem;
  font-weight: 600;
  color: #8bf2ff;
  letter-spacing: 0.5px;
  text-shadow: 0 0 6px rgba(93, 226, 255, 0.8);
  margin-top: 2px;
}

@keyframes p4SignFlicker {
  0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% {
    opacity: 1;
  }
  20%, 24%, 55% {
    opacity: 0.95;
    filter: brightness(0.9);
  }
  22% {
    opacity: 0.9;
  }
}

/* Swaying Tree Branches in foreground */
.p4-bh-tree-left {
  position: absolute;
  top: -30px;
  left: -20px;
  z-index: 10;
  pointer-events: none;
  transform-origin: top left;
  animation: p4TreeSwayL 6s ease-in-out infinite alternate;
  filter: drop-shadow(2px 4px 10px rgba(0,0,0,0.3));
  width: 250px;
  height: 250px;
}

.p4-bh-tree-right {
  position: absolute;
  top: -20px;
  right: -30px;
  z-index: 10;
  pointer-events: none;
  transform-origin: top right;
  animation: p4TreeSwayR 7s ease-in-out infinite alternate;
  filter: drop-shadow(-2px 4px 10px rgba(0,0,0,0.3));
  width: 220px;
  height: 220px;
}

.p4-bh-tree-left svg,
.p4-bh-tree-right svg {
  display: block;
  width: 100%;
  height: 100%;
}

@keyframes p4TreeSwayL {
  0% {
    transform: rotate(0deg) scale(1);
  }
  100% {
    transform: rotate(4deg) scale(1.02);
  }
}

@keyframes p4TreeSwayR {
  0% {
    transform: rotate(0deg) scale(1);
  }
  100% {
    transform: rotate(-3deg) scale(1.01);
  }
}


/* ──────────────────────────────────────────────────────────
   NIGHT HOLIDAY MODE — PARTY BUILDING FACADE (IMAGE 2 THEME)
   ────────────────────────────────────────────────────────── */

/* Day Holiday Mode - Hide night party elements */
body.p4.day.holiday-mode .p4-bh-lasers,
body.p4.day.holiday-mode .p4-bh-beam-lights,
body.p4.day.holiday-mode .p4-bh-party-glow {
  display: none !important;
}

/* Night Holiday Mode Section Background Styling */
body.p4.night.holiday-mode .p4-benefits {
  background: #060b13 !important; /* deep dark background contrast */
  overflow: hidden;
  transition: all 0.5s ease;
}

body.p4.night.holiday-mode .p4-benefits .p4-wrap {
  position: relative;
  z-index: 10;
}

/* Make benefits bubbles look like premium dark cyber glass bubbles */
body.p4.night.holiday-mode .p4-benefits .p4-bf-bubble,
body.p4.night.holiday-mode .p4-benefits .p4-req-row {
  background: rgba(10, 20, 35, 0.85) !important;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(93, 226, 255, 0.25) !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), inset 0 0 15px rgba(93, 226, 255, 0.05);
  transition: all 0.3s ease;
}

body.p4.night.holiday-mode .p4-benefits .p4-bf-bubble:hover {
  transform: translateY(-2px);
  border-color: #5de2ff !important;
  box-shadow: 0 12px 40px rgba(0, 162, 255, 0.3), inset 0 0 20px rgba(93, 226, 255, 0.15);
}

body.p4.night.holiday-mode .p4-benefits .p4-bf-label,
body.p4.night.holiday-mode .p4-benefits .p4-eyebrow,
body.p4.night.holiday-mode .p4-benefits .p4-heading {
  color: #ffffff !important;
  text-shadow: 0 0 8px rgba(255, 255, 255, 0.3), 0 2px 10px rgba(0,0,0,0.8);
}

body.p4.night.holiday-mode .p4-benefits .p4-heading .p4-glow {
  color: #5de2ff !important;
  text-shadow: 0 0 10px #5de2ff, 0 0 20px #00a2ff, 0 0 30px #0055ff;
}

body.p4.night.holiday-mode .p4-benefits .p4-bf-bubble strong,
body.p4.night.holiday-mode .p4-benefits .p4-req-val {
  color: #ffffff !important;
}

body.p4.night.holiday-mode .p4-benefits .p4-bf-bubble span,
body.p4.night.holiday-mode .p4-benefits .p4-req-key {
  color: #8fa0ba !important;
}

body.p4.night.holiday-mode .p4-benefits .p4-bf-ico {
  color: #5de2ff !important;
  filter: drop-shadow(0 0 5px rgba(93, 226, 255, 0.8));
}

/* Background Activation in Night Mode */
body.p4.night.holiday-mode .p4-benefits-holiday-bg {
  opacity: 1;
}

/* Night sky style */
body.p4.night.holiday-mode .p4-bh-sky {
  background: linear-gradient(180deg, #050b14 0%, #0d1527 50%, #15203a 100%) !important;
}

/* Starry sky background overlay */
body.p4.night.holiday-mode .p4-bh-sky::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: 
    radial-gradient(circle at 12% 18%, rgba(255,255,255,0.8) 1px, transparent 1px),
    radial-gradient(circle at 35% 24%, rgba(255,255,255,0.7) 1px, transparent 1px),
    radial-gradient(circle at 58% 12%, rgba(255,255,255,0.8) 1px, transparent 1px),
    radial-gradient(circle at 82% 28%, rgba(255,255,255,0.7) 1.5px, transparent 1.5px),
    radial-gradient(circle at 24% 75%, rgba(255,255,255,0.6) 1px, transparent 1px),
    radial-gradient(circle at 71% 68%, rgba(255,255,255,0.8) 1px, transparent 1px),
    radial-gradient(circle at 90% 85%, rgba(255,255,255,0.7) 1px, transparent 1px);
  background-size: 400px 400px;
  opacity: 0.65;
  animation: p4StarsTwinkle 8s infinite alternate;
}

@keyframes p4StarsTwinkle {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 0.85; }
}

/* Sun styled as a glowing party neon moon */
body.p4.night.holiday-mode .p4-bh-sun {
  top: -20px;
  right: 18%;
  width: 180px;
  height: 180px;
  background: radial-gradient(circle, rgba(220, 245, 255, 0.9) 0%, rgba(93, 226, 255, 0.4) 30%, rgba(0, 162, 255, 0.1) 60%, transparent 75%) !important;
  border-radius: 50%;
  filter: drop-shadow(0 0 25px rgba(93, 226, 255, 0.6));
  animation: p4MoonPulse 4s ease-in-out infinite alternate;
}

@keyframes p4MoonPulse {
  0% { transform: scale(1); filter: drop-shadow(0 0 20px rgba(93, 226, 255, 0.5)); }
  100% { transform: scale(1.05); filter: drop-shadow(0 0 35px rgba(93, 226, 255, 0.8)); }
}

/* Concrete pillars reflecting neon highlights */
body.p4.night.holiday-mode .p4-bh-col {
  background: linear-gradient(90deg, #1d1b24 0%, #2f2d38 30%, #3a3845 50%, #292831 80%, #17161c 100%) !important;
  box-shadow: 
    inset -1px 0 3px rgba(93, 226, 255, 0.15), 
    inset 1px 0 3px rgba(255, 93, 172, 0.1),
    2px 0 12px rgba(0,0,0,0.6);
}

/* Concrete beams reflecting neon highlights */
body.p4.night.holiday-mode .p4-bh-beam {
  background: linear-gradient(180deg, #3d3b4a 0%, #25242c 40%, #15141a 100%) !important;
  box-shadow: 
    0 4px 15px rgba(0,0,0,0.6), 
    inset 0 1px 2px rgba(255,255,255,0.1),
    0 -1px 4px rgba(93, 226, 255, 0.15);
}

/* Darken base window panes, and show bright party lights inside */
body.p4.night.holiday-mode .p4-bh-pane {
  background: linear-gradient(135deg, rgba(8, 14, 25, 0.95) 0%, rgba(15, 27, 46, 0.9) 100%) !important;
  border-right-color: rgba(255, 255, 255, 0.05) !important;
  border-left-color: rgba(0, 0, 0, 0.4) !important;
}

/* Disable warm daylight glow in night mode */
body.p4.night.holiday-mode .p4-bh-room-glow.warm {
  display: none !important;
}

/* Style the party glows inside windows */
.p4-bh-party-glow {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
}

body.p4.night.holiday-mode .p4-bh-party-glow {
  opacity: 0.65;
  mix-blend-mode: screen;
}

/* Pink strobe window */
body.p4.night.holiday-mode .p4-bh-party-glow.p-pink {
  background: radial-gradient(circle at bottom, rgba(255, 46, 140, 0.8) 0%, rgba(255, 46, 140, 0.2) 60%, transparent 80%);
  animation: p4StrobeSlow 4s ease-in-out infinite alternate;
}

/* Cyan strobe window */
body.p4.night.holiday-mode .p4-bh-party-glow.p-cyan {
  background: radial-gradient(circle at bottom, rgba(0, 242, 254, 0.8) 0%, rgba(0, 242, 254, 0.2) 60%, transparent 80%);
  animation: p4StrobeFast 3s ease-in-out infinite alternate-reverse;
}

/* Purple strobe window */
body.p4.night.holiday-mode .p4-bh-party-glow.p-purple {
  background: radial-gradient(circle at bottom, rgba(186, 42, 229, 0.8) 0%, rgba(186, 42, 229, 0.2) 60%, transparent 80%);
  animation: p4StrobeSlow 5s ease-in-out infinite alternate-reverse;
}

/* Lime green strobe window */
body.p4.night.holiday-mode .p4-bh-party-glow.p-lime {
  background: radial-gradient(circle at bottom, rgba(74, 222, 128, 0.7) 0%, rgba(74, 222, 128, 0.15) 60%, transparent 80%);
  animation: p4StrobeFast 3.5s ease-in-out infinite alternate;
}

/* Orange/Amber strobe window */
body.p4.night.holiday-mode .p4-bh-party-glow.p-orange {
  background: radial-gradient(circle at bottom, rgba(251, 146, 60, 0.8) 0%, rgba(251, 146, 60, 0.2) 60%, transparent 80%);
  animation: p4StrobeSlow 4.5s ease-in-out infinite alternate;
}

@keyframes p4StrobeSlow {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 0.75; filter: brightness(1.2); }
}

@keyframes p4StrobeFast {
  0%, 100% { opacity: 0.2; }
  25% { opacity: 0.8; filter: brightness(1.3); }
  50% { opacity: 0.4; }
  75% { opacity: 0.85; filter: brightness(1.1); }
}

/* Neon Laser overlay */
.p4-bh-lasers {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 5;
  pointer-events: none;
  display: none;
}

body.p4.night.holiday-mode .p4-bh-lasers {
  display: block;
}

.p4-bh-laser {
  position: absolute;
  top: 0;
  width: 6px;
  height: 200%;
  transform-origin: top center;
  opacity: 0.45;
  mix-blend-mode: screen;
}

/* Cyan laser sweeping from top-left */
.p4-bh-laser.l1 {
  left: 20%;
  background: linear-gradient(180deg, rgba(93, 226, 255, 1) 0%, rgba(93, 226, 255, 0.1) 80%, transparent 100%);
  box-shadow: 0 0 15px rgba(93, 226, 255, 0.8);
  animation: p4LaserSweepL 8s ease-in-out infinite alternate;
}

/* Pink laser sweeping from top-right */
.p4-bh-laser.l2 {
  right: 25%;
  background: linear-gradient(180deg, rgba(255, 93, 172, 1) 0%, rgba(255, 93, 172, 0.1) 80%, transparent 100%);
  box-shadow: 0 0 15px rgba(255, 93, 172, 0.8);
  animation: p4LaserSweepR 7s ease-in-out infinite alternate;
}

/* Purple laser sweeping from top-left offset */
.p4-bh-laser.l3 {
  left: 45%;
  background: linear-gradient(180deg, rgba(186, 42, 229, 1) 0%, rgba(186, 42, 229, 0.1) 80%, transparent 100%);
  box-shadow: 0 0 15px rgba(186, 42, 229, 0.8);
  animation: p4LaserSweepL2 9s ease-in-out infinite alternate;
}

/* Green laser sweeping from top-right offset */
.p4-bh-laser.l4 {
  right: 40%;
  background: linear-gradient(180deg, rgba(74, 222, 128, 1) 0%, rgba(74, 222, 128, 0.1) 80%, transparent 100%);
  box-shadow: 0 0 15px rgba(74, 222, 128, 0.8);
  animation: p4LaserSweepR2 6.5s ease-in-out infinite alternate;
}

@keyframes p4LaserSweepL {
  0% { transform: rotate(15deg) scaleX(0.8); }
  100% { transform: rotate(65deg) scaleX(1.3); }
}

@keyframes p4LaserSweepR {
  0% { transform: rotate(-20deg) scaleX(1.2); }
  100% { transform: rotate(-70deg) scaleX(0.7); }
}

@keyframes p4LaserSweepL2 {
  0% { transform: rotate(-30deg) scaleX(1.1); }
  100% { transform: rotate(30deg) scaleX(1.1); }
}

@keyframes p4LaserSweepR2 {
  0% { transform: rotate(40deg) scaleX(0.9); }
  100% { transform: rotate(-25deg) scaleX(1.4); }
}

/* Draped string fairy lights */
.p4-bh-beam-lights {
  position: absolute;
  bottom: calc(100% - 8px); /* drape on top of balconies */
  left: 0;
  width: 100%;
  height: 25px;
  display: flex;
  justify-content: space-around;
  padding: 0 5%;
  box-sizing: border-box;
  display: none;
}

body.p4.night.holiday-mode .p4-bh-beam-lights {
  display: flex;
}

/* Light bulbs styling */
.p4-bhl-bulb {
  width: 8px;
  height: 10px;
  border-radius: 50%;
  box-shadow: 0 2px 8px rgba(255,255,255,0.3);
  position: relative;
  animation: p4FairyBulbBreathe 2s ease-in-out infinite alternate;
}

/* Socket bases */
.p4-bhl-bulb::before {
  content: '';
  position: absolute;
  top: -3px;
  left: 2px;
  width: 4px;
  height: 4px;
  background: #3a3634;
  border-radius: 1px;
}

/* Stagger colors and animations */
.p4-bhl-bulb.b1, .p4-bhl-bulb.b6, .p4-bhl-bulb.b11 {
  background: #ff2e8c;
  box-shadow: 0 0 6px #ff2e8c, 0 0 12px #ff2e8c;
  animation-delay: 0.1s;
}
.p4-bhl-bulb.b2, .p4-bhl-bulb.b7, .p4-bhl-bulb.b12 {
  background: #00f2fe;
  box-shadow: 0 0 6px #00f2fe, 0 0 12px #00f2fe;
  animation-delay: 0.4s;
}
.p4-bhl-bulb.b3, .p4-bhl-bulb.b8, .p4-bhl-bulb.b13 {
  background: #ba2ae5;
  box-shadow: 0 0 6px #ba2ae5, 0 0 12px #ba2ae5;
  animation-delay: 0.7s;
}
.p4-bhl-bulb.b4, .p4-bhl-bulb.b9, .p4-bhl-bulb.b14 {
  background: #4ade80;
  box-shadow: 0 0 6px #4ade80, 0 0 12px #4ade80;
  animation-delay: 1.1s;
}
.p4-bhl-bulb.b5, .p4-bhl-bulb.b10, .p4-bhl-bulb.b15 {
  background: #fb923c;
  box-shadow: 0 0 6px #fb923c, 0 0 12px #fb923c;
  animation-delay: 1.5s;
}

@keyframes p4FairyBulbBreathe {
  0% { transform: scale(0.85); opacity: 0.4; }
  100% { transform: scale(1.15); opacity: 1; filter: brightness(1.4); }
}

/* Intense neon signage glow at night */
body.p4.night.holiday-mode .p4-bh-sign {
  background: rgba(10, 18, 30, 0.7) !important;
  border-color: rgba(93, 226, 255, 0.45) !important;
  box-shadow: 
    0 10px 40px rgba(0, 0, 0, 0.5), 
    inset 0 0 20px rgba(93, 226, 255, 0.2),
    0 0 15px rgba(93, 226, 255, 0.25) !important;
}

body.p4.night.holiday-mode .p4-bh-sign-logo {
  filter: drop-shadow(0 0 10px rgba(93, 226, 255, 0.95)) drop-shadow(0 0 22px rgba(0, 162, 255, 0.75)) !important;
}

body.p4.night.holiday-mode .p4-bh-sign-title {
  text-shadow: 0 0 5px #fff, 0 0 12px #5de2ff, 0 0 25px #00a2ff, 0 0 40px #0055ff, 0 0 50px #0055ff !important;
}

body.p4.night.holiday-mode .p4-bh-sign-url {
  text-shadow: 0 0 8px rgba(93, 226, 255, 0.95), 0 0 15px rgba(0, 162, 255, 0.5) !important;
}


/* ──────────────────────────────────────────────────────────
   DAY HOLIDAY MODE — 3 BIG INTERACTIVE VACATION ITEMS
   ────────────────────────────────────────────────────────── */

/* Common styling for building interactive items */
.p4-bh-item-suitcase,
.p4-bh-item-coconut,
.p4-bh-item-beachball {
  position: absolute;
  z-index: 15;
  cursor: pointer;
  pointer-events: auto !important; /* overrides container pointer-events: none */
  transition: transform 0.3s ease;
}

/* Hide by default, show only in Holiday Mode */
.p4-bh-item-suitcase,
.p4-bh-item-coconut,
.p4-bh-item-beachball {
  display: none;
}

body.p4.holiday-mode .p4-bh-item-suitcase,
body.p4.holiday-mode .p4-bh-item-coconut,
body.p4.holiday-mode .p4-bh-item-beachball {
  display: block;
}

/* Hover effects */
.p4-bh-item-suitcase:hover,
.p4-bh-item-coconut:hover,
.p4-bh-item-beachball:hover {
  transform: scale(1.08);
  filter: drop-shadow(0 4px 15px rgba(0,0,0,0.3));
}

/* ──────────────────────────────────────────────────────────
   1. RETRO TRAVEL SUITCASE
   ────────────────────────────────────────────────────────── */
.p4-bh-item-suitcase {
  left: 8%;
  bottom: 25px;
  width: 90px;
  height: 72px;
  transform-origin: bottom center;
  animation: p4SuitcaseIdle 4s ease-in-out infinite alternate;
}

@keyframes p4SuitcaseIdle {
  0% { transform: rotate(0deg) translateY(0); }
  100% { transform: rotate(-2deg) translateY(-2px); }
}

/* Suitcase Lid Group default transition */
.p4-bhi-suitcase-lid {
  transform-origin: 15px 45px;
  transition: transform 0.8s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* Emerging items default transition */
.p4-bhi-suitcase-items {
  transform-origin: 50px 35px;
  transform: translateY(20px) scale(0);
  opacity: 0;
  transition: all 0.8s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* Active State Jump & Pop */
.p4-bh-item-suitcase.active {
  animation: p4SuitcaseJump 1.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

.p4-bh-item-suitcase.active .p4-bhi-suitcase-lid {
  transform: rotate(-75deg);
}

.p4-bh-item-suitcase.active .p4-bhi-suitcase-items {
  transform: translateY(-15px) scale(1.2);
  opacity: 1;
}

@keyframes p4SuitcaseJump {
  0% { transform: scale(1) translateY(0); }
  15% { transform: scale(1.15, 0.75) translateY(0); }
  40% { transform: scale(0.85, 1.2) translateY(-25px); }
  60% { transform: scale(1.05, 0.95) translateY(-5px); }
  80% { transform: scale(0.98, 1.02) translateY(0); }
  100% { transform: scale(1) translateY(0); }
}


/* ──────────────────────────────────────────────────────────
   2. TROPICAL COCONUT DRINK
   ────────────────────────────────────────────────────────── */
.p4-bh-item-coconut {
  left: 72%;
  top: calc(33% - 25px);
  width: 58px;
  height: 58px;
  transform-origin: bottom center;
  animation: p4CoconutIdle 5s ease-in-out infinite alternate;
}

@keyframes p4CoconutIdle {
  0% { transform: rotate(0deg) translateY(0); }
  100% { transform: rotate(3deg) translateY(-1px); }
}

/* Umbrella group default transition */
.p4-bhi-coconut-umbrella {
  transform-origin: 58px 42px;
  transition: transform 1s cubic-bezier(0.25, 0.8, 0.25, 1.1);
}

/* Bubbles list */
.p4-bhi-coconut-bubble {
  transition: all 0.6s ease-out;
}

/* Active state wobble and umbrella spin */
.p4-bh-item-coconut.active {
  animation: p4CoconutWobble 0.8s ease-in-out infinite alternate;
}

.p4-bh-item-coconut.active .p4-bhi-coconut-umbrella {
  transform: rotate(720deg) scale(1.1);
}

/* Active bubbles pop out */
.p4-bh-item-coconut.active .p4-bhi-coconut-bubble {
  opacity: 0.9;
}
.p4-bh-item-coconut.active .p4-bhi-coconut-bubble.b1 {
  transform: translate(-10px, -20px) scale(1.2);
  animation: p4CCBubbleFade 1.5s forwards;
}
.p4-bh-item-coconut.active .p4-bhi-coconut-bubble.b2 {
  transform: translate(5px, -30px) scale(1.3);
  animation: p4CCBubbleFade 1.2s forwards 0.2s;
}
.p4-bh-item-coconut.active .p4-bhi-coconut-bubble.b3 {
  transform: translate(-20px, -15px) scale(1);
  animation: p4CCBubbleFade 1.4s forwards 0.1s;
}
.p4-bh-item-coconut.active .p4-bhi-coconut-bubble.b4 {
  transform: translate(15px, -25px) scale(1.4);
  animation: p4CCBubbleFade 1.6s forwards 0.3s;
}

@keyframes p4CoconutWobble {
  0% { transform: rotate(-5deg) scale(1.05); }
  100% { transform: rotate(5deg) scale(1.05); }
}

@keyframes p4CCBubbleFade {
  0% { opacity: 0.9; }
  100% { opacity: 0; transform: translate(0, -50px) scale(0.3); }
}


/* ──────────────────────────────────────────────────────────
   3. INFLATABLE BEACH BALL
   ────────────────────────────────────────────────────────── */
.p4-bh-item-beachball {
  right: 12%;
  bottom: 25px;
  width: 75px;
  height: 75px;
  transform-origin: bottom center;
  animation: p4BeachballIdle 6s ease-in-out infinite alternate;
}

@keyframes p4BeachballIdle {
  0% { transform: rotate(0deg) translateY(0); }
  100% { transform: rotate(15deg) translateY(-2px); }
}

/* Splash ring styling */
.p4-bh-beachball-ring {
  position: absolute;
  bottom: -2px;
  left: 10%;
  width: 80%;
  height: 10px;
  border-radius: 50%;
  border: 2px solid rgba(0, 162, 255, 0.4);
  background: radial-gradient(circle, rgba(93, 226, 255, 0.3) 0%, transparent 80%);
  transform: scale(0);
  opacity: 0;
  transition: all 0.5s ease;
  pointer-events: none;
}

/* Active Bounce Animation */
.p4-bh-item-beachball.active {
  animation: p4BeachballBounce 1.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

.p4-bh-item-beachball.active .p4-bh-beachball-ring {
  animation: p4BeachballRingWave 1.8s ease-out forwards;
}

@keyframes p4BeachballBounce {
  0% { transform: scale(1) translateY(0) rotate(0deg); }
  10% { transform: scale(1.2, 0.7) translateY(0) rotate(15deg); }
  35% { transform: scale(0.9, 1.1) translateY(-180px) rotate(180deg); }
  60% { transform: scale(1.05, 0.95) translateY(0) rotate(360deg); }
  72% { transform: scale(1.15, 0.8) translateY(0) rotate(380deg); }
  85% { transform: scale(0.95, 1.05) translateY(-30px) rotate(420deg); }
  100% { transform: scale(1) translateY(0) rotate(450deg); }
}

@keyframes p4BeachballRingWave {
  0%, 100% { transform: scale(0); opacity: 0; }
  10% { transform: scale(1.3); opacity: 0.9; }
  25% { transform: scale(2); opacity: 0; }
  60% { transform: scale(0); opacity: 0; }
  72% { transform: scale(1.2); opacity: 0.7; }
  85% { transform: scale(1.5); opacity: 0; }
}


/* Foreground interactive overlay container */
.p4-benefits .p4-wrap {
  position: relative;
  z-index: 10 !important;
}

.p4-benefits-holiday-elements {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 8;
  pointer-events: none; /* passes clicks through to underlying cards/text */
  overflow: hidden;
  display: none;
}

body.p4.holiday-mode .p4-benefits-holiday-elements {
  display: block;
}

/* ==========================================================================
   §4.1b DAY & NIGHT AVAILABLE MODE BACKGROUNDS & DESK ELEMENTS
   ========================================================================== */

/* Available Mode background wrappers display */
.p4-benefits-available-bg,
.p4-benefits-available-elements {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
}
.p4-benefits-available-bg {
  z-index: 1;
}
.p4-benefits-available-elements {
  z-index: 8;
}

body.p4.available-mode .p4-benefits-available-bg,
body.p4.available-mode .p4-benefits-available-elements {
  opacity: 1;
}

/* Wood Table available mode styling */
.p4-ba-table-wood {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.p4-wood-rect-avail {
  fill: url(#p4WoodBaseDay);
  transition: fill 0.8s ease;
}
body.p4.night.available-mode .p4-wood-rect-avail {
  fill: url(#p4WoodBaseNight);
}

.p4-wood-seam-avail {
  stroke: rgba(60, 35, 15, 0.22);
  stroke-width: 2px;
  transition: stroke 0.8s ease;
}
body.p4.night.available-mode .p4-wood-seam-avail {
  stroke: rgba(0, 0, 0, 0.65);
}

.p4-wood-grain-avail {
  fill: none;
  stroke: rgba(60, 35, 15, 0.08);
  stroke-width: 1px;
  transition: stroke 0.8s ease;
}
body.p4.night.available-mode .p4-wood-grain-avail {
  stroke: rgba(255, 255, 255, 0.015);
}

.p4-wood-knot-avail {
  fill: rgba(60, 35, 15, 0.06);
  stroke: rgba(60, 35, 15, 0.1);
  stroke-width: 1px;
  transition: fill 0.8s ease, stroke 0.8s ease;
}
body.p4.night.available-mode .p4-wood-knot-avail {
  fill: rgba(0, 0, 0, 0.3);
  stroke: rgba(255, 255, 255, 0.02);
}

/* Card layout transparency overrides under Day/Night Available modes */
body.p4.day.available-mode .p4-benefits {
  background: none !important;
}
body.p4.day.available-mode .p4-benefits .p4-wrap {
  position: relative;
  z-index: 10;
}
body.p4.day.available-mode .p4-benefits .p4-bf-bubble,
body.p4.day.available-mode .p4-benefits .p4-req-row {
  background: rgba(255, 255, 255, 0.88) !important;
  backdrop-filter: blur(8px) !important;
  border: 1px solid rgba(100, 100, 100, 0.1) !important; /* Gentle grey tint (calm work) */
  box-shadow: 0 4px 20px rgba(0,0,0,0.05);
  transition: transform 0.2s ease, background 0.3s ease;
}
body.p4.day.available-mode .p4-benefits .p4-bf-bubble:hover {
  transform: translateY(-2px);
  background: rgba(255, 255, 255, 0.95) !important;
  box-shadow: 0 6px 24px rgba(0,0,0,0.08);
}

body.p4.night.available-mode .p4-benefits {
  background: none !important;
}
body.p4.night.available-mode .p4-benefits .p4-wrap {
  position: relative;
  z-index: 10;
}
body.p4.night.available-mode .p4-benefits .p4-bf-bubble,
body.p4.night.available-mode .p4-benefits .p4-req-row {
  background: rgba(13, 20, 32, 0.82) !important;
  backdrop-filter: blur(8px) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important; /* Gentle dark tint */
  box-shadow: 0 4px 25px rgba(0,0,0,0.45);
  transition: transform 0.2s ease, border-color 0.3s ease;
}
body.p4.night.available-mode .p4-benefits .p4-bf-bubble:hover {
  transform: translateY(-2px);
  border-color: rgba(255, 255, 255, 0.2) !important;
  box-shadow: 0 6px 24px rgba(255, 255, 255, 0.06);
}

/* Available items general positioning */
.p4-avail-item {
  position: absolute;
  pointer-events: auto;
}

/* Laptop (Center-Bottom) */
.p4-avail-laptop {
  left: 20%;
  bottom: -35px;
  width: 240px;
  height: 180px;
  transform: translateX(-50%);
  z-index: 15;
}
.p4-avail-laptop-svg {
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 8px 16px rgba(0,0,0,0.15));
}
.p4-avail-laptop-chassis {
  transition: fill 0.8s ease, stroke 0.8s ease;
}
body.p4.night.available-mode .p4-avail-laptop-chassis {
  fill: #1e293b;
  stroke: #0f172a;
}
.p4-avail-screen-glare {
  fill: #1e1e24;
  transition: fill 0.8s ease;
}
body.p4.day.available-mode .p4-avail-screen-glare {
  fill: #272730;
}
body.p4.night.available-mode .p4-avail-screen-glare {
  fill: #090d16;
}
.p4-avail-screen-lines {
  transition: opacity 0.8s ease;
}
body.p4.night.available-mode .p4-avail-screen-lines {
  opacity: 0;
}

/* Left Tablet (Bottom-Left) */
.p4-avail-tablet-left {
  left: 4%;
  bottom: 25px;
  width: 140px;
  height: 160px;
  z-index: 12;
}
.p4-avail-tablet-svg {
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 6px 12px rgba(0,0,0,0.12));
}
.p4-avail-tablet-screen {
  fill: #f8fafc;
  transition: fill 0.8s ease;
}
body.p4.night.available-mode .p4-avail-tablet-left .p4-avail-tablet-screen {
  fill: #090d16;
}
.p4-avail-tablet-charts {
  transition: opacity 0.8s ease;
}
body.p4.night.available-mode .p4-avail-tablet-charts {
  opacity: 0;
}

/* Right Tablet (Middle-Right) */
.p4-avail-tablet-right {
  right: 4%;
  top: 45px;
  width: 150px;
  height: 170px;
  z-index: 12;
}
body.p4.night.available-mode .p4-avail-tablet-right .p4-avail-tablet-screen {
  fill: #090d16;
}
.p4-avail-tablet-screen-core {
  fill: #ffffff;
  transition: fill 0.8s ease;
}
body.p4.night.available-mode .p4-avail-tablet-right .p4-avail-tablet-screen-core {
  fill: #090d16;
}

.p4-avail-lying-stylus {
  transition: opacity 0.8s ease;
  opacity: 0;
}
body.p4.night.available-mode .p4-avail-lying-stylus {
  opacity: 0.85;
}

/* Scattered Papers positioning and tints */
.p4-avail-paper-tl {
  left: 6%;
  top: 30px;
  width: 110px;
  height: 140px;
  z-index: 5;
  transform: rotate(10deg);
}
.p4-avail-paper-tr {
  right: 22%;
  top: 15px;
  width: 120px;
  height: 150px;
  z-index: 5;
  transform: rotate(-15deg);
}
.p4-avail-paper-br {
  right: 6%;
  bottom: 20px;
  width: 120px;
  height: 140px;
  z-index: 5;
  transform: rotate(8deg);
}
.p4-avail-paper-svg {
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,0.08));
}
.p4-avail-paper-svg rect,
.p4-avail-paper-svg path,
.p4-avail-paper-svg line,
.p4-avail-paper-svg circle {
  transition: fill 0.8s ease, stroke 0.8s ease, opacity 0.8s ease;
}

/* Night available mode paper color dimming */
body.p4.night.available-mode .p4-avail-paper-svg rect[fill="#ffffff"] {
  fill: #1b2230;
}
body.p4.night.available-mode .p4-avail-paper-svg line,
body.p4.night.available-mode .p4-avail-paper-svg path[stroke] {
  stroke: #475569;
}
body.p4.night.available-mode .p4-avail-paper-svg rect:not([fill="#ffffff"]),
body.p4.night.available-mode .p4-avail-paper-svg circle:not([fill="none"]),
body.p4.night.available-mode .p4-avail-paper-svg path:not([stroke]) {
  fill: #334155;
  opacity: 0.5;
}
body.p4.night.available-mode .p4-avail-paper-svg text {
  fill: #475569;
}

/* Coffee Cups */
.p4-avail-coffee-left {
  left: 14%;
  bottom: 220px;
  width: 60px;
  height: 60px;
  z-index: 8;
}
.p4-avail-coffee-right {
  right: 20%;
  bottom: 240px;
  width: 60px;
  height: 60px;
  z-index: 8;
  transform: rotate(45deg);
}
.p4-avail-coffee-svg {
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,0.1));
}
.p4-avail-coffee-liquid {
  transition: fill 0.8s ease;
}
body.p4.night.available-mode .p4-avail-coffee-svg circle[fill="#f8fafc"] {
  fill: #1e293b;
  stroke: #334155;
}
body.p4.night.available-mode .p4-avail-coffee-svg circle[fill="#f1f5f9"] {
  fill: #0f172a;
  stroke: #1e293b;
}

/* Steam lines */
.p4-avail-steam {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 3px;
  pointer-events: none;
}
.p4-avail-steam span {
  width: 1.5px;
  height: 10px;
  background: rgba(255, 255, 255, 0.4);
  border-radius: 1px;
}
/* Smooth slow animations */
body.p4.day.available-mode:not(.relaxed-mode) .p4-avail-steam span {
  animation: p4AvailSteamRise 2.5s infinite linear;
}
body.p4.day.available-mode:not(.relaxed-mode) .p4-avail-steam span.s1 { animation-delay: 0s; }
body.p4.day.available-mode:not(.relaxed-mode) .p4-avail-steam span.s2 { animation-delay: 0.8s; }
body.p4.day.available-mode:not(.relaxed-mode) .p4-avail-steam span.s3 { animation-delay: 1.6s; }

@keyframes p4AvailSteamRise {
  0% { transform: translateY(5px) scaleY(0.5); opacity: 0; }
  50% { opacity: 0.6; }
  100% { transform: translateY(-12px) scaleY(1.2); opacity: 0; }
}

/* Hands Display Toggles */
.p4-avail-hands {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.p4-avail-only-day {
  display: none;
}
body.p4.day.available-mode .p4-avail-only-day {
  display: block;
}
body.p4.night.available-mode .p4-avail-only-day {
  display: none;
}

/* Hand positioning inside items */
.p4-avail-hand-left {
  position: absolute;
  left: -20px;
  bottom: -40px;
  width: 110px;
  height: 165px;
  z-index: 20;
}
.p4-avail-hand-right {
  position: absolute;
  right: -20px;
  bottom: -40px;
  width: 110px;
  height: 165px;
  z-index: 20;
}
.p4-avail-hand-left-resting {
  position: absolute;
  left: -35px;
  bottom: -20px;
  width: 90px;
  height: 110px;
  z-index: 20;
  transform: rotate(35deg);
}
.p4-avail-hand-right-scribble {
  position: absolute;
  right: -25px;
  top: 50px;
  width: 100px;
  height: 120px;
  z-index: 20;
  transform: rotate(-10deg);
}

/* Settle/Slow animations for hands in available mode (calm and relaxed normal work) */
body.p4.day.available-mode:not(.relaxed-mode) .p4-avail-hand-left .f1 { animation: p4AvailTap 1.6s infinite ease-in-out alternate; }
body.p4.day.available-mode:not(.relaxed-mode) .p4-avail-hand-left .f2 { animation: p4AvailTap 1.8s infinite ease-in-out alternate 0.2s; }
body.p4.day.available-mode:not(.relaxed-mode) .p4-avail-hand-left .f3 { animation: p4AvailTap 1.5s infinite ease-in-out alternate 0.4s; }
body.p4.day.available-mode:not(.relaxed-mode) .p4-avail-hand-left .f4 { animation: p4AvailTap 1.9s infinite ease-in-out alternate 0.1s; }

body.p4.day.available-mode:not(.relaxed-mode) .p4-avail-hand-right .f1 { animation: p4AvailTap 1.5s infinite ease-in-out alternate 0.3s; }
body.p4.day.available-mode:not(.relaxed-mode) .p4-avail-hand-right .f2 { animation: p4AvailTap 1.7s infinite ease-in-out alternate 0.1s; }
body.p4.day.available-mode:not(.relaxed-mode) .p4-avail-hand-right .f3 { animation: p4AvailTap 1.6s infinite ease-in-out alternate 0.5s; }
body.p4.day.available-mode:not(.relaxed-mode) .p4-avail-hand-right .f4 { animation: p4AvailTap 1.4s infinite ease-in-out alternate 0.2s; }

body.p4.day.available-mode:not(.relaxed-mode) .p4-avail-hand-right-scribble {
  animation: p4AvailScribble 4.5s infinite ease-in-out;
}

@keyframes p4AvailTap {
  0% { transform: translateY(0); }
  100% { transform: translateY(3.5px); }
}

@keyframes p4AvailScribble {
  0%, 100% { transform: translate(0, 0) rotate(-10deg); }
  25% { transform: translate(-2px, 3px) rotate(-8deg); }
  50% { transform: translate(3px, -2px) rotate(-12deg); }
  75% { transform: translate(-1px, -1px) rotate(-9deg); }
}

/* Calm day typing/scrolling code lines animation on laptop screen */
body.p4.day.available-mode:not(.relaxed-mode) .p4-avail-screen-lines rect {
  animation: p4AvailLineType 5s infinite both;
}
body.p4.day.available-mode:not(.relaxed-mode) .p4-avail-screen-lines rect:nth-child(1) { animation-delay: 0.1s; }
body.p4.day.available-mode:not(.relaxed-mode) .p4-avail-screen-lines rect:nth-child(2) { animation-delay: 0.3s; }
body.p4.day.available-mode:not(.relaxed-mode) .p4-avail-screen-lines rect:nth-child(3) { animation-delay: 0.5s; }
body.p4.day.available-mode:not(.relaxed-mode) .p4-avail-screen-lines rect:nth-child(4) { animation-delay: 0.8s; }
body.p4.day.available-mode:not(.relaxed-mode) .p4-avail-screen-lines rect:nth-child(5) { animation-delay: 1.1s; }
body.p4.day.available-mode:not(.relaxed-mode) .p4-avail-screen-lines rect:nth-child(6) { animation-delay: 1.4s; }
body.p4.day.available-mode:not(.relaxed-mode) .p4-avail-screen-lines rect:nth-child(7) { animation-delay: 1.7s; }
body.p4.day.available-mode:not(.relaxed-mode) .p4-avail-screen-lines rect:nth-child(8) { animation-delay: 2.0s; }
body.p4.day.available-mode:not(.relaxed-mode) .p4-avail-screen-lines rect:nth-child(9) { animation-delay: 2.3s; }
body.p4.day.available-mode:not(.relaxed-mode) .p4-avail-screen-lines rect:nth-child(10) { animation-delay: 2.6s; }

@keyframes p4AvailLineType {
  0%, 8% { opacity: 0.15; transform: scaleX(0.15); transform-origin: left; }
  35%, 85% { opacity: 1; transform: scaleX(1); transform-origin: left; }
  92%, 100% { opacity: 0.15; transform: scaleX(0.15); transform-origin: left; }
}

/* Calm live data feed pulsing on left tablet screen */
body.p4.day.available-mode:not(.relaxed-mode) .p4-avail-tablet-charts rect {
  transform-origin: bottom;
  animation: p4AvailBarPulse 3.5s infinite ease-in-out alternate;
}
body.p4.day.available-mode:not(.relaxed-mode) .p4-avail-tablet-charts rect:nth-of-type(1) { animation-duration: 2.6s; animation-delay: 0.1s; }
body.p4.day.available-mode:not(.relaxed-mode) .p4-avail-tablet-charts rect:nth-of-type(2) { animation-duration: 3.2s; animation-delay: 0.4s; }
body.p4.day.available-mode:not(.relaxed-mode) .p4-avail-tablet-charts rect:nth-of-type(3) { animation-duration: 2.9s; animation-delay: 0.2s; }
body.p4.day.available-mode:not(.relaxed-mode) .p4-avail-tablet-charts rect:nth-of-type(4) { animation-duration: 3.6s; animation-delay: 0.5s; }
body.p4.day.available-mode:not(.relaxed-mode) .p4-avail-tablet-charts rect:nth-of-type(5) { animation-duration: 3.0s; animation-delay: 0.3s; }

@keyframes p4AvailBarPulse {
  0% { transform: scaleY(0.8); }
  100% { transform: scaleY(1.08); }
}

/* Calm pie chart segment rotation on right tablet screen */
body.p4.day.available-mode:not(.relaxed-mode) .p4-avail-pie-ring {
  transform-origin: 80px 70px;
  animation: p4AvailPieRotate 20s infinite linear;
}
@keyframes p4AvailPieRotate {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Progress bar fill loading/unloading gently on right tablet screen */
body.p4.day.available-mode:not(.relaxed-mode) .p4-avail-tablet-right rect[fill="#06b6d4"] {
  transform-origin: left;
  animation: p4AvailProgressPulse 5s infinite ease-in-out alternate;
}
@keyframes p4AvailProgressPulse {
  0% { transform: scaleX(0.7); }
  100% { transform: scaleX(1.05); }
}

/* Relaxed Mode overrides for available elements */
body.relaxed-mode .p4-benefits-available-bg,
body.relaxed-mode .p4-benefits-available-elements,
body.relaxed-mode .p4-avail-item,
body.relaxed-mode .p4-avail-hands,
body.relaxed-mode .p4-avail-steam,
body.relaxed-mode .p4-avail-steam span,
body.relaxed-mode .p4-avail-finger,
body.relaxed-mode .p4-avail-screen-lines rect,
body.relaxed-mode .p4-avail-tablet-charts rect,
body.relaxed-mode .p4-avail-pie-ring,
body.relaxed-mode .p4-avail-tablet-right rect[fill="#06b6d4"] {
  animation: none !important;
  filter: none !important;
  transition: none !important;
  transform: none !important;
}

/* ==========================================================================
   §4.2 DAY & NIGHT BUSY MODE BACKGROUNDS & DESK ELEMENTS
   ========================================================================== */

/* Background wrapper */
.p4-benefits-busy-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
}
body.p4.busy-mode .p4-benefits-busy-bg {
  opacity: 1;
}

/* SVG wood table styling */
.p4-bb-table-wood {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.p4-wood-rect {
  fill: url(#p4WoodBaseDay);
  transition: fill 0.8s ease;
}
body.p4.night.busy-mode .p4-wood-rect {
  fill: url(#p4WoodBaseNight);
}
.p4-wood-seam {
  stroke: rgba(60, 35, 15, 0.22);
  stroke-width: 2px;
  transition: stroke 0.8s ease;
}
body.p4.night.busy-mode .p4-wood-seam {
  stroke: rgba(0, 0, 0, 0.65);
}
.p4-wood-grain {
  fill: none;
  stroke: rgba(60, 35, 15, 0.08);
  stroke-width: 1px;
  transition: stroke 0.8s ease;
}
body.p4.night.busy-mode .p4-wood-grain {
  stroke: rgba(255, 255, 255, 0.015);
}
.p4-wood-knot {
  fill: rgba(60, 35, 15, 0.06);
  stroke: rgba(60, 35, 15, 0.1);
  stroke-width: 1px;
  transition: fill 0.8s ease, stroke 0.8s ease;
}
body.p4.night.busy-mode .p4-wood-knot {
  fill: rgba(0, 0, 0, 0.3);
  stroke: rgba(255, 255, 255, 0.02);
}

/* Screen glow projection overlay (Night Mode only) */
.p4-bb-screen-glows {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 5;
  pointer-events: none;
}
.p4-busy-screen-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(40px);
  opacity: 0;
  transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1);
  mix-blend-mode: screen;
}
body.p4.night.busy-mode .p4-busy-screen-glow {
  opacity: 0.75;
}

/* Glow profiles */
.p4-bb-glow-laptop-bl {
  bottom: -40px;
  left: -40px;
  width: 420px;
  height: 420px;
  background: radial-gradient(circle, rgba(0, 242, 254, 0.45) 0%, rgba(0, 162, 255, 0.12) 50%, transparent 70%);
}
.p4-bb-glow-laptop-tr {
  top: -50px;
  right: -50px;
  width: 420px;
  height: 420px;
  background: radial-gradient(circle, rgba(74, 222, 128, 0.4) 0%, rgba(34, 197, 94, 0.1) 50%, transparent 70%);
}
.p4-bb-glow-phone-tl {
  top: -10px;
  left: 2%;
  width: 240px;
  height: 240px;
  background: radial-gradient(circle, rgba(251, 146, 60, 0.4) 0%, rgba(249, 115, 22, 0.08) 60%, transparent 80%);
}
.p4-bb-glow-tablet-br {
  bottom: -20px;
  right: 2%;
  width: 300px;
  height: 300px;
  background: radial-gradient(circle, rgba(255, 46, 140, 0.45) 0%, rgba(186, 42, 229, 0.12) 50%, transparent 70%);
}

/* Foreground busy elements wrapper */
.p4-benefits-busy-elements {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 8;
  pointer-events: none;
  overflow: hidden;
  display: none;
}
body.p4.busy-mode .p4-benefits-busy-elements {
  display: block;
}

/* Card layout transparency overrides under Day/Night Busy modes */
body.p4.day.busy-mode .p4-benefits {
  background: none !important;
}
body.p4.day.busy-mode .p4-benefits .p4-wrap {
  position: relative;
  z-index: 10;
}
body.p4.day.busy-mode .p4-benefits .p4-bf-bubble,
body.p4.day.busy-mode .p4-benefits .p4-req-row {
  background: rgba(255, 255, 255, 0.88) !important;
  backdrop-filter: blur(8px) !important;
  border: 1px solid rgba(239, 68, 68, 0.15) !important; /* Stress warning red tint */
  box-shadow: 0 4px 20px rgba(0,0,0,0.05);
  transition: transform 0.2s ease, background 0.3s ease;
}
body.p4.day.busy-mode .p4-benefits .p4-bf-bubble:hover {
  transform: translateY(-2px);
  background: rgba(255, 255, 255, 0.95) !important;
  box-shadow: 0 6px 24px rgba(239, 68, 68, 0.12);
}

body.p4.night.busy-mode .p4-benefits {
  background: none !important;
}
body.p4.night.busy-mode .p4-benefits .p4-wrap {
  position: relative;
  z-index: 10;
}
body.p4.night.busy-mode .p4-benefits .p4-bf-bubble,
body.p4.night.busy-mode .p4-benefits .p4-req-row {
  background: rgba(13, 20, 32, 0.85) !important;
  backdrop-filter: blur(8px) !important;
  border: 1px solid rgba(0, 242, 254, 0.2) !important; /* Cyber neon cyan tint */
  box-shadow: 0 4px 25px rgba(0,0,0,0.45);
  transition: transform 0.2s ease, border-color 0.3s ease;
}
body.p4.night.busy-mode .p4-benefits .p4-bf-bubble:hover {
  transform: translateY(-2px);
  border-color: rgba(0, 242, 254, 0.5) !important;
  box-shadow: 0 6px 24px rgba(0, 242, 254, 0.18);
}

/* Individual items */
.p4-busy-item {
  position: absolute;
  pointer-events: auto;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.8s ease, opacity 0.5s ease;
}

/* Laptops */
.p4-busy-laptop-bl {
  left: 2%;
  bottom: 15px;
  width: 220px;
  height: 165px;
  transform-origin: bottom left;
  animation: p4StressJitter 0.6s infinite alternate;
  cursor: pointer;
}
.p4-busy-laptop-bl:hover {
  transform: scale(1.06) rotate(1deg);
}
.p4-busy-laptop-tr {
  right: 2%;
  top: 15px;
  width: 210px;
  height: 158px;
  transform-origin: top right;
  animation: p4StressJitter 0.7s infinite alternate-reverse;
  cursor: pointer;
}
.p4-busy-laptop-tr:hover {
  transform: scale(1.06) rotate(-1deg);
}
.p4-busy-laptop-svg {
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 10px 20px rgba(0,0,0,0.22));
}

.p4-busy-screen-content {
  fill: #edf2f7;
  transition: fill 0.8s ease;
}
body.p4.night.busy-mode .p4-busy-laptop-bl .p4-busy-screen-content {
  fill: rgba(0, 242, 254, 0.95);
  filter: drop-shadow(0 0 5px #00f2fe);
}
body.p4.night.busy-mode .p4-busy-laptop-tr .p4-busy-screen-content {
  fill: rgba(74, 222, 128, 0.95);
  filter: drop-shadow(0 0 5px #4ade80);
}

/* Phone */
.p4-busy-phone-tl {
  left: 8%;
  top: 25px;
  width: 60px;
  height: 100px;
  transform-origin: center;
  animation: p4StressJitter 0.5s infinite alternate;
}
.p4-busy-phone-svg {
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 6px 12px rgba(0,0,0,0.18));
}
.p4-busy-phone-screen {
  fill: #cbd5e0;
  transition: fill 0.8s ease;
}
body.p4.night.busy-mode .p4-busy-phone-screen {
  fill: #1e1b18;
}
body.p4.night.busy-mode .p4-busy-phone-tl .p4-busy-phone-screen {
  fill: #fb923c;
  filter: drop-shadow(0 0 4px #fb923c);
}

/* Tablet */
.p4-busy-tablet-br {
  right: 6%;
  bottom: 10px;
  width: 140px;
  height: 162px;
  transform-origin: bottom right;
  animation: p4StressJitter 0.8s infinite alternate;
}
.p4-busy-tablet-svg {
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 10px 18px rgba(0,0,0,0.2));
}
.p4-busy-tablet-screen {
  fill: #edf2f7;
  transition: fill 0.8s ease;
}
body.p4.night.busy-mode .p4-busy-tablet-br .p4-busy-tablet-screen {
  fill: #ff2e8c;
  filter: drop-shadow(0 0 6px #ff2e8c);
}

/* Papers under Tablet */
.p4-busy-papers {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}
.p4-busy-paper.paper1 {
  position: absolute;
  left: -20px;
  bottom: -5px;
  width: 95px;
  height: 110px;
  transform: rotate(-12deg);
  filter: drop-shadow(0 4px 8px rgba(0,0,0,0.12));
  transition: filter 0.8s ease;
}
body.p4.night.busy-mode .p4-busy-paper.paper1 {
  filter: drop-shadow(0 4px 8px rgba(0,0,0,0.45)) brightness(0.35);
}

/* Coffee cups */
.p4-busy-coffee-tl {
  left: 3%;
  top: 145px;
  width: 55px;
  height: 55px;
  animation: p4StressJitter 0.5s infinite;
}
.p4-busy-coffee-br {
  right: 3%;
  bottom: 190px;
  width: 55px;
  height: 55px;
  animation: p4StressJitter 0.55s infinite reverse;
}
.p4-busy-coffee-svg {
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 4px 10px rgba(0,0,0,0.15));
}
.p4-busy-coffee-liquid {
  fill: #3b2314;
  transition: fill 0.8s ease;
}
body.p4.night.busy-mode .p4-busy-coffee-liquid {
  fill: #1a0f08;
}

.p4-busy-coffee-ripple {
  fill: none;
  stroke: rgba(255, 255, 255, 0.35);
  stroke-width: 1.5px;
  transform-origin: center;
  opacity: 0;
}
body.p4.day.busy-mode:not(.relaxed-mode) .p4-busy-coffee-ripple.ripple1 {
  animation: p4CoffeeRipple 1.2s infinite linear;
}
body.p4.day.busy-mode:not(.relaxed-mode) .p4-busy-coffee-ripple.ripple2 {
  animation: p4CoffeeRipple 1.2s infinite linear 0.6s;
}
body.p4.night.busy-mode:not(.relaxed-mode) .p4-busy-coffee-ripple.ripple1 {
  stroke: rgba(0, 242, 254, 0.4);
  animation: p4CoffeeRipple 1s infinite linear;
}
body.p4.night.busy-mode:not(.relaxed-mode) .p4-busy-coffee-ripple.ripple2 {
  stroke: rgba(255, 46, 140, 0.4);
  animation: p4CoffeeRipple 1s infinite linear 0.5s;
}

/* Coffee Steam */
.p4-busy-steam-container {
  position: absolute;
  top: -20px;
  left: 25%;
  width: 50%;
  height: 25px;
  display: flex;
  justify-content: space-around;
  pointer-events: none;
}
.p4-busy-steam-line {
  width: 2px;
  height: 100%;
  background: linear-gradient(180deg, transparent, rgba(255,255,255,0.4) 40%, rgba(255,255,255,0.1));
  border-radius: 2px;
  transform-origin: bottom center;
  opacity: 0;
}
body.p4.night.busy-mode .p4-busy-steam-line {
  background: linear-gradient(180deg, transparent, rgba(0, 242, 254, 0.2) 40%, transparent);
}
body.p4.busy-mode:not(.relaxed-mode) .p4-busy-steam-line.s1 {
  animation: p4SteamRise 1.6s infinite ease-in-out;
}
body.p4.busy-mode:not(.relaxed-mode) .p4-busy-steam-line.s2 {
  animation: p4SteamRise 1.8s infinite ease-in-out 0.5s;
}
body.p4.busy-mode:not(.relaxed-mode) .p4-busy-steam-line.s3 {
  animation: p4SteamRise 1.5s infinite ease-in-out 1.0s;
}

/* Typing hands container */
.p4-busy-hands-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
  pointer-events: none;
}
.p4-busy-hand-type {
  position: absolute;
  width: 85px;
  height: 120px;
}
.p4-busy-hand-type.hand-left {
  left: 15px;
  bottom: -55px;
  transform-origin: bottom center;
}
.p4-busy-hand-type.hand-right {
  right: 15px;
  bottom: -55px;
  transform-origin: bottom center;
}

/* Smart watch and tracker screens */
.p4-watch-screen {
  animation: p4WatchPulse 1.5s infinite;
  font-family: sans-serif;
}
.p4-tracker-pulse {
  animation: p4TrackerPulse 1s infinite alternate;
}

@keyframes p4WatchPulse {
  0%, 100% { fill: #ef4444; filter: drop-shadow(0 0 1px #ef4444); }
  50% { fill: #f87171; filter: drop-shadow(0 0 4px #ef4444); }
}
@keyframes p4TrackerPulse {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 1; }
}

/* Typing animations - Smooth continuous loops (Day Mode) */
body.p4.day.busy-mode:not(.relaxed-mode) .p4-busy-laptop-bl:not(.active) .hand-left {
  animation: p4HandFloatLeft 3.5s infinite ease-in-out alternate;
}
body.p4.day.busy-mode:not(.relaxed-mode) .p4-busy-laptop-bl:not(.active) .hand-right {
  animation: p4HandFloatRight 3.2s infinite ease-in-out alternate;
}
body.p4.day.busy-mode:not(.relaxed-mode) .p4-busy-laptop-tr:not(.active) .hand-left {
  animation: p4HandFloatLeft 3.8s infinite ease-in-out alternate-reverse;
}
body.p4.day.busy-mode:not(.relaxed-mode) .p4-busy-laptop-tr:not(.active) .hand-right {
  animation: p4HandFloatRight 3.4s infinite ease-in-out alternate-reverse;
}

/* Typing animations - Smooth continuous loops (Night Mode) */
body.p4.night.busy-mode:not(.relaxed-mode) .p4-busy-laptop-bl:not(.active) .hand-left {
  animation: p4HandFloatLeft 3.2s infinite ease-in-out alternate;
}
body.p4.night.busy-mode:not(.relaxed-mode) .p4-busy-laptop-bl:not(.active) .hand-right {
  animation: p4HandFloatRight 2.9s infinite ease-in-out alternate;
}
body.p4.night.busy-mode:not(.relaxed-mode) .p4-busy-laptop-tr:not(.active) .hand-left {
  animation: p4HandFloatLeft 3.5s infinite ease-in-out alternate-reverse;
}
body.p4.night.busy-mode:not(.relaxed-mode) .p4-busy-laptop-tr:not(.active) .hand-right {
  animation: p4HandFloatRight 3.1s infinite ease-in-out alternate-reverse;
}

/* transform-origin for individual fingers */
.p4-busy-hand-type.hand-left .f0 { transform-origin: 38px 50px; }
.p4-busy-hand-type.hand-left .f1 { transform-origin: 46px 38px; }
.p4-busy-hand-type.hand-left .f2 { transform-origin: 51px 36px; }
.p4-busy-hand-type.hand-left .f3 { transform-origin: 56px 38px; }
.p4-busy-hand-type.hand-left .f4 { transform-origin: 61px 44px; }

.p4-busy-hand-type.hand-right .f0 { transform-origin: 62px 50px; }
.p4-busy-hand-type.hand-right .f1 { transform-origin: 54px 38px; }
.p4-busy-hand-type.hand-right .f2 { transform-origin: 49px 36px; }
.p4-busy-hand-type.hand-right .f3 { transform-origin: 44px 38px; }
.p4-busy-hand-type.hand-right .f4 { transform-origin: 39px 44px; }

/* Day Mode - Apply wiggling finger tapping loops when NOT active */
body.p4.day.busy-mode:not(.relaxed-mode) .p4-busy-laptop-bl:not(.active) .hand-left .f0 { animation: p4FingerTapThumbLeft 1.2s infinite ease-in-out; }
body.p4.day.busy-mode:not(.relaxed-mode) .p4-busy-laptop-bl:not(.active) .hand-left .f1 { animation: p4FingerTapIndexLeft 0.28s infinite ease-in-out alternate; }
body.p4.day.busy-mode:not(.relaxed-mode) .p4-busy-laptop-bl:not(.active) .hand-left .f2 { animation: p4FingerTapMiddleLeft 0.26s infinite ease-in-out alternate 0.08s; }
body.p4.day.busy-mode:not(.relaxed-mode) .p4-busy-laptop-bl:not(.active) .hand-left .f3 { animation: p4FingerTapRingLeft 0.3s infinite ease-in-out alternate 0.14s; }
body.p4.day.busy-mode:not(.relaxed-mode) .p4-busy-laptop-bl:not(.active) .hand-left .f4 { animation: p4FingerTapPinkyLeft 0.34s infinite ease-in-out alternate 0.04s; }

body.p4.day.busy-mode:not(.relaxed-mode) .p4-busy-laptop-bl:not(.active) .hand-right .f0 { animation: p4FingerTapThumbRight 1.5s infinite ease-in-out 0.3s; }
body.p4.day.busy-mode:not(.relaxed-mode) .p4-busy-laptop-bl:not(.active) .hand-right .f1 { animation: p4FingerTapIndexRight 0.24s infinite ease-in-out alternate 0.06s; }
body.p4.day.busy-mode:not(.relaxed-mode) .p4-busy-laptop-bl:not(.active) .hand-right .f2 { animation: p4FingerTapMiddleRight 0.28s infinite ease-in-out alternate 0.12s; }
body.p4.day.busy-mode:not(.relaxed-mode) .p4-busy-laptop-bl:not(.active) .hand-right .f3 { animation: p4FingerTapRingRight 0.26s infinite ease-in-out alternate 0.02s; }
body.p4.day.busy-mode:not(.relaxed-mode) .p4-busy-laptop-bl:not(.active) .hand-right .f4 { animation: p4FingerTapPinkyRight 0.32s infinite ease-in-out alternate 0.1s; }

body.p4.day.busy-mode:not(.relaxed-mode) .p4-busy-laptop-tr:not(.active) .hand-left .f0 { animation: p4FingerTapThumbLeft 1.3s infinite ease-in-out 0.1s; }
body.p4.day.busy-mode:not(.relaxed-mode) .p4-busy-laptop-tr:not(.active) .hand-left .f1 { animation: p4FingerTapIndexLeft 0.3s infinite ease-in-out alternate 0.05s; }
body.p4.day.busy-mode:not(.relaxed-mode) .p4-busy-laptop-tr:not(.active) .hand-left .f2 { animation: p4FingerTapMiddleLeft 0.28s infinite ease-in-out alternate 0.1s; }
body.p4.day.busy-mode:not(.relaxed-mode) .p4-busy-laptop-tr:not(.active) .hand-left .f3 { animation: p4FingerTapRingLeft 0.32s infinite ease-in-out alternate 0.18s; }
body.p4.day.busy-mode:not(.relaxed-mode) .p4-busy-laptop-tr:not(.active) .hand-left .f4 { animation: p4FingerTapPinkyLeft 0.36s infinite ease-in-out alternate 0.08s; }

body.p4.day.busy-mode:not(.relaxed-mode) .p4-busy-laptop-tr:not(.active) .hand-right .f0 { animation: p4FingerTapThumbRight 1.4s infinite ease-in-out 0.2s; }
body.p4.day.busy-mode:not(.relaxed-mode) .p4-busy-laptop-tr:not(.active) .hand-right .f1 { animation: p4FingerTapIndexRight 0.26s infinite ease-in-out alternate 0.08s; }
body.p4.day.busy-mode:not(.relaxed-mode) .p4-busy-laptop-tr:not(.active) .hand-right .f2 { animation: p4FingerTapMiddleRight 0.3s infinite ease-in-out alternate 0.14s; }
body.p4.day.busy-mode:not(.relaxed-mode) .p4-busy-laptop-tr:not(.active) .hand-right .f3 { animation: p4FingerTapRingRight 0.28s infinite ease-in-out alternate 0.04s; }
body.p4.day.busy-mode:not(.relaxed-mode) .p4-busy-laptop-tr:not(.active) .hand-right .f4 { animation: p4FingerTapPinkyRight 0.34s infinite ease-in-out alternate 0.12s; }

/* Night Mode - Apply wiggling finger tapping loops when NOT active */
body.p4.night.busy-mode:not(.relaxed-mode) .p4-busy-laptop-bl:not(.active) .hand-left .f0 { animation: p4FingerTapThumbLeft 1.0s infinite ease-in-out; }
body.p4.night.busy-mode:not(.relaxed-mode) .p4-busy-laptop-bl:not(.active) .hand-left .f1 { animation: p4FingerTapIndexLeft 0.24s infinite ease-in-out alternate; }
body.p4.night.busy-mode:not(.relaxed-mode) .p4-busy-laptop-bl:not(.active) .hand-left .f2 { animation: p4FingerTapMiddleLeft 0.22s infinite ease-in-out alternate 0.05s; }
body.p4.night.busy-mode:not(.relaxed-mode) .p4-busy-laptop-bl:not(.active) .hand-left .f3 { animation: p4FingerTapRingLeft 0.26s infinite ease-in-out alternate 0.12s; }
body.p4.night.busy-mode:not(.relaxed-mode) .p4-busy-laptop-bl:not(.active) .hand-left .f4 { animation: p4FingerTapPinkyLeft 0.3s infinite ease-in-out alternate 0.02s; }

body.p4.night.busy-mode:not(.relaxed-mode) .p4-busy-laptop-bl:not(.active) .hand-right .f0 { animation: p4FingerTapThumbRight 1.2s infinite ease-in-out 0.2s; }
body.p4.night.busy-mode:not(.relaxed-mode) .p4-busy-laptop-bl:not(.active) .hand-right .f1 { animation: p4FingerTapIndexRight 0.2s infinite ease-in-out alternate 0.04s; }
body.p4.night.busy-mode:not(.relaxed-mode) .p4-busy-laptop-bl:not(.active) .hand-right .f2 { animation: p4FingerTapMiddleRight 0.24s infinite ease-in-out alternate 0.1s; }
body.p4.night.busy-mode:not(.relaxed-mode) .p4-busy-laptop-bl:not(.active) .hand-right .f3 { animation: p4FingerTapRingRight 0.22s infinite ease-in-out alternate 0.01s; }
body.p4.night.busy-mode:not(.relaxed-mode) .p4-busy-laptop-bl:not(.active) .hand-right .f4 { animation: p4FingerTapPinkyRight 0.28s infinite ease-in-out alternate 0.08s; }

body.p4.night.busy-mode:not(.relaxed-mode) .p4-busy-laptop-tr:not(.active) .hand-left .f0 { animation: p4FingerTapThumbLeft 1.1s infinite ease-in-out 0.1s; }
body.p4.night.busy-mode:not(.relaxed-mode) .p4-busy-laptop-tr:not(.active) .hand-left .f1 { animation: p4FingerTapIndexLeft 0.26s infinite ease-in-out alternate 0.04s; }
body.p4.night.busy-mode:not(.relaxed-mode) .p4-busy-laptop-tr:not(.active) .hand-left .f2 { animation: p4FingerTapMiddleLeft 0.24s infinite ease-in-out alternate 0.08s; }
body.p4.night.busy-mode:not(.relaxed-mode) .p4-busy-laptop-tr:not(.active) .hand-left .f3 { animation: p4FingerTapRingLeft 0.28s infinite ease-in-out alternate 0.14s; }
body.p4.night.busy-mode:not(.relaxed-mode) .p4-busy-laptop-tr:not(.active) .hand-left .f4 { animation: p4FingerTapPinkyLeft 0.32s infinite ease-in-out alternate 0.06s; }

body.p4.night.busy-mode:not(.relaxed-mode) .p4-busy-laptop-tr:not(.active) .hand-right .f0 { animation: p4FingerTapThumbRight 1.3s infinite ease-in-out 0.1s; }
body.p4.night.busy-mode:not(.relaxed-mode) .p4-busy-laptop-tr:not(.active) .hand-right .f1 { animation: p4FingerTapIndexRight 0.22s infinite ease-in-out alternate 0.06s; }
body.p4.night.busy-mode:not(.relaxed-mode) .p4-busy-laptop-tr:not(.active) .hand-right .f2 { animation: p4FingerTapMiddleRight 0.26s infinite ease-in-out alternate 0.12s; }
body.p4.night.busy-mode:not(.relaxed-mode) .p4-busy-laptop-tr:not(.active) .hand-right .f3 { animation: p4FingerTapRingRight 0.24s infinite ease-in-out alternate 0.03s; }
body.p4.night.busy-mode:not(.relaxed-mode) .p4-busy-laptop-tr:not(.active) .hand-right .f4 { animation: p4FingerTapPinkyRight 0.3s infinite ease-in-out alternate 0.15s; }

/* Glowing casts on hands */
body.p4.night.busy-mode .p4-busy-laptop-bl .p4-busy-hand-type {
  filter: drop-shadow(0 0 5px rgba(0, 242, 254, 0.45)) brightness(1.25);
}
body.p4.night.busy-mode .p4-busy-laptop-tr .p4-busy-hand-type {
  filter: drop-shadow(0 0 5px rgba(74, 222, 128, 0.45)) brightness(1.25);
}

/* Tapping Hand (Phone) */
.p4-busy-hand-tap {
  position: absolute;
  left: -15px;
  top: -15px;
  width: 90px;
  height: 120px;
  z-index: 10;
  pointer-events: none;
  transform-origin: bottom center;
}
body.p4.day.busy-mode:not(.relaxed-mode) .p4-busy-hand-tap {
  animation: p4HandTap 0.2s infinite alternate;
}
body.p4.night.busy-mode:not(.relaxed-mode) .p4-busy-hand-tap {
  animation: p4HandTap 0.16s infinite alternate;
}
body.p4.night.busy-mode .p4-busy-hand-tap {
  filter: drop-shadow(0 0 5px rgba(251, 146, 60, 0.45)) brightness(1.25);
}

/* Scribbling Hand (Tablet) */
.p4-busy-hand-scribble {
  position: absolute;
  left: 20px;
  top: 15px;
  width: 105px;
  height: 125px;
  z-index: 10;
  pointer-events: none;
  transform-origin: bottom left;
}
body.p4.day.busy-mode:not(.relaxed-mode) .p4-busy-hand-scribble {
  animation: p4HandScribble 0.22s infinite ease-in-out;
}
body.p4.night.busy-mode:not(.relaxed-mode) .p4-busy-hand-scribble {
  animation: p4HandScribble 0.18s infinite ease-in-out;
}
body.p4.night.busy-mode .p4-busy-hand-scribble {
  filter: drop-shadow(0 0 6px rgba(255, 46, 140, 0.45)) brightness(1.25);
}

/* Sticky notes (Day Mode focus, darkened at night) */
.p4-busy-sticky {
  z-index: 13;
  width: 75px;
  height: 75px;
  filter: drop-shadow(0 3px 6px rgba(0,0,0,0.12));
  transition: transform 0.2s ease, opacity 0.5s ease;
}
body.p4.night.busy-mode .p4-busy-sticky {
  opacity: 0.35;
  filter: drop-shadow(0 3px 6px rgba(0,0,0,0.45)) brightness(0.4);
}

.sticky-deadline {
  left: 26%;
  top: 10%;
  transform: rotate(-5deg);
}
.sticky-urgent {
  right: 32%;
  bottom: 12%;
  transform: rotate(6deg);
}
.sticky-asap {
  left: 10%;
  bottom: 40%;
  transform: rotate(-10deg);
}

.p4-busy-sticky-body {
  width: 100%;
  height: 100%;
  padding: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  position: relative;
}

.sticky-deadline .p4-busy-sticky-body { background: #fef08a; border-left: 2px solid #facc15; }
.sticky-urgent .p4-busy-sticky-body { background: #fecaca; border-left: 2px solid #ef4444; }
.sticky-asap .p4-busy-sticky-body { background: #fed7aa; border-left: 2px solid #f97316; }

.p4-busy-sticky-pin {
  position: absolute;
  top: -4px;
  left: calc(50% - 3px);
  width: 6px;
  height: 6px;
  background: #ef4444;
  border-radius: 50%;
  box-shadow: 0 1px 2px rgba(0,0,0,0.3);
}
.p4-busy-sticky-title {
  font-family: 'Outfit', sans-serif;
  font-size: 8px;
  font-weight: 900;
  color: #dc2626;
  margin: 0 0 2px 0;
  letter-spacing: 0.5px;
  text-align: center;
}
.p4-busy-sticky-text {
  font-family: 'Outfit', sans-serif;
  font-size: 7px;
  font-weight: bold;
  color: #4b5563;
  margin: 0;
  text-align: center;
  line-height: 1.1;
}

.p4-busy-sticky:hover {
  transform: scale(1.18) rotate(0deg) !important;
  z-index: 20;
  filter: drop-shadow(0 6px 12px rgba(0,0,0,0.2));
}

/* Keyboard Sparks Elements styling */
.p4-busy-key-sparks {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 15;
}
.p4-key-spark {
  position: absolute;
  font-family: 'Outfit', monospace;
  font-size: 11px;
  font-weight: 900;
  color: #ef4444;
  background: linear-gradient(180deg, #ffffff 0%, #e2e8f0 100%);
  border: 1px solid #cbd5e1;
  border-radius: 5px;
  padding: 2px 5px;
  opacity: 0;
  pointer-events: none;
  text-shadow: 0 0 2px rgba(239, 68, 68, 0.4);
  box-shadow: inset 0 -2.5px 0px rgba(148, 163, 184, 0.5), inset 0 1px 0px #ffffff, 0 4px 10px rgba(0,0,0,0.12);
  transition: transform 0.1s ease;
}
body.p4.night.busy-mode .p4-key-spark {
  background: linear-gradient(180deg, #1e293b 0%, #0f172a 100%);
  border-color: #334155;
  color: #00f2fe;
  text-shadow: 0 0 5px #00f2fe;
  box-shadow: inset 0 -2.5px 0px rgba(0, 0, 0, 0.6), inset 0 1px 0px rgba(255,255,255,0.05), 0 4px 12px rgba(0, 242, 254, 0.25);
}

/* Active trigger states - Turbo Typing and Chassis Shaking */
body.p4.busy-mode:not(.relaxed-mode) .p4-busy-laptop-bl.active .hand-left {
  animation: p4HandFloatLeftActive 0.3s infinite ease-in-out alternate;
}
body.p4.busy-mode:not(.relaxed-mode) .p4-busy-laptop-bl.active .hand-right {
  animation: p4HandFloatRightActive 0.28s infinite ease-in-out alternate;
}
body.p4.busy-mode:not(.relaxed-mode) .p4-busy-laptop-tr.active .hand-left {
  animation: p4HandFloatLeftActive 0.32s infinite ease-in-out alternate-reverse;
}
body.p4.busy-mode:not(.relaxed-mode) .p4-busy-laptop-tr.active .hand-right {
  animation: p4HandFloatRightActive 0.26s infinite ease-in-out alternate-reverse;
}

/* Active turbo speed finger type wiggles */
body.p4.busy-mode:not(.relaxed-mode) .p4-busy-laptop-bl.active .hand-left .f0 { animation: p4FingerTapThumbLeft 0.15s infinite ease-in-out; }
body.p4.busy-mode:not(.relaxed-mode) .p4-busy-laptop-bl.active .hand-left .f1 { animation: p4FingerTapIndexLeft 0.06s infinite alternate linear; }
body.p4.busy-mode:not(.relaxed-mode) .p4-busy-laptop-bl.active .hand-left .f2 { animation: p4FingerTapMiddleLeft 0.05s infinite alternate linear 0.01s; }
body.p4.busy-mode:not(.relaxed-mode) .p4-busy-laptop-bl.active .hand-left .f3 { animation: p4FingerTapRingLeft 0.07s infinite alternate linear 0.02s; }
body.p4.busy-mode:not(.relaxed-mode) .p4-busy-laptop-bl.active .hand-left .f4 { animation: p4FingerTapPinkyLeft 0.06s infinite alternate linear 0.01s; }

body.p4.busy-mode:not(.relaxed-mode) .p4-busy-laptop-bl.active .hand-right .f0 { animation: p4FingerTapThumbRight 0.18s infinite ease-in-out; }
body.p4.busy-mode:not(.relaxed-mode) .p4-busy-laptop-bl.active .hand-right .f1 { animation: p4FingerTapIndexRight 0.05s infinite alternate linear 0.01s; }
body.p4.busy-mode:not(.relaxed-mode) .p4-busy-laptop-bl.active .hand-right .f2 { animation: p4FingerTapMiddleRight 0.06s infinite alternate linear 0.02s; }
body.p4.busy-mode:not(.relaxed-mode) .p4-busy-laptop-bl.active .hand-right .f3 { animation: p4FingerTapRingRight 0.04s infinite alternate linear 0.01s; }
body.p4.busy-mode:not(.relaxed-mode) .p4-busy-laptop-bl.active .hand-right .f4 { animation: p4FingerTapPinkyRight 0.07s infinite alternate linear 0.03s; }

body.p4.busy-mode:not(.relaxed-mode) .p4-busy-laptop-tr.active .hand-left .f0 { animation: p4FingerTapThumbLeft 0.16s infinite ease-in-out; }
body.p4.busy-mode:not(.relaxed-mode) .p4-busy-laptop-tr.active .hand-left .f1 { animation: p4FingerTapIndexLeft 0.07s infinite alternate linear 0.02s; }
body.p4.busy-mode:not(.relaxed-mode) .p4-busy-laptop-tr.active .hand-left .f2 { animation: p4FingerTapMiddleLeft 0.06s infinite alternate linear 0.01s; }
body.p4.busy-mode:not(.relaxed-mode) .p4-busy-laptop-tr.active .hand-left .f3 { animation: p4FingerTapRingLeft 0.08s infinite alternate linear 0.03s; }
body.p4.busy-mode:not(.relaxed-mode) .p4-busy-laptop-tr.active .hand-left .f4 { animation: p4FingerTapPinkyLeft 0.07s infinite alternate linear 0.01s; }

body.p4.busy-mode:not(.relaxed-mode) .p4-busy-laptop-tr.active .hand-right .f0 { animation: p4FingerTapThumbRight 0.17s infinite ease-in-out; }
body.p4.busy-mode:not(.relaxed-mode) .p4-busy-laptop-tr.active .hand-right .f1 { animation: p4FingerTapIndexRight 0.06s infinite alternate linear 0.01s; }
body.p4.busy-mode:not(.relaxed-mode) .p4-busy-laptop-tr.active .hand-right .f2 { animation: p4FingerTapMiddleRight 0.07s infinite alternate linear 0.03s; }
body.p4.busy-mode:not(.relaxed-mode) .p4-busy-laptop-tr.active .hand-right .f3 { animation: p4FingerTapRingRight 0.05s infinite alternate linear 0.02s; }
body.p4.busy-mode:not(.relaxed-mode) .p4-busy-laptop-tr.active .hand-right .f4 { animation: p4FingerTapPinkyRight 0.08s infinite alternate linear 0.04s; }

body.p4.busy-mode:not(.relaxed-mode) .p4-busy-laptop-bl.active {
  animation: p4LaptopActiveShake 0.15s infinite linear;
}
body.p4.busy-mode:not(.relaxed-mode) .p4-busy-laptop-tr.active {
  animation: p4LaptopActiveShake 0.15s infinite linear reverse;
}

.p4-busy-laptop-bl.active .ks1 { animation: p4SparkBlast1 0.8s forwards; }
.p4-busy-laptop-bl.active .ks2 { animation: p4SparkBlast2 0.8s forwards 0.1s; }
.p4-busy-laptop-bl.active .ks3 { animation: p4SparkBlast3 0.8s forwards 0.05s; }
.p4-busy-laptop-bl.active .ks4 { animation: p4SparkBlast4 0.8s forwards 0.15s; }
.p4-busy-laptop-bl.active .ks5 { animation: p4SparkBlast5 0.8s forwards 0.2s; }

.p4-busy-laptop-tr.active .ks1 { animation: p4SparkBlast1 0.8s forwards; }
.p4-busy-laptop-tr.active .ks2 { animation: p4SparkBlast2 0.8s forwards 0.1s; }
.p4-busy-laptop-tr.active .ks3 { animation: p4SparkBlast3 0.8s forwards 0.05s; }
.p4-busy-laptop-tr.active .ks4 { animation: p4SparkBlast4 0.8s forwards 0.15s; }
.p4-busy-laptop-tr.active .ks5 { animation: p4SparkBlast5 0.8s forwards 0.2s; }

/* Animations Keyframes */

/* Vibrating Jitter */
@keyframes p4StressJitter {
  0%, 100% { transform: translate(0, 0) rotate(var(--busy-rotate, 0deg)); }
  20% { transform: translate(-1.5px, 1px) rotate(calc(var(--busy-rotate, 0deg) + 0.5deg)); }
  40% { transform: translate(1px, -1.5px) rotate(calc(var(--busy-rotate, 0deg) - 0.5deg)); }
  60% { transform: translate(-1px, -1px) rotate(calc(var(--busy-rotate, 0deg) + 0.3deg)); }
  80% { transform: translate(1.5px, 1px) rotate(calc(var(--busy-rotate, 0deg) - 0.3deg)); }
}
.sticky-deadline { --busy-rotate: -5deg; }
.sticky-urgent { --busy-rotate: 6deg; }
.sticky-asap { --busy-rotate: -10deg; }

/* Chassis Active Vibration */
@keyframes p4LaptopActiveShake {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  25% { transform: translate(-2px, 1px) rotate(-0.5deg); }
  50% { transform: translate(1px, -2px) rotate(0.5deg); }
  75% { transform: translate(-1px, -1px) rotate(-0.2deg); }
}

/* Smooth organic hand sways and finger typing keyframes */
@keyframes p4HandFloatLeft {
  0% { transform: translate(0, 0) rotate(0deg); }
  100% { transform: translate(-3px, -2px) rotate(1deg); }
}
@keyframes p4HandFloatRight {
  0% { transform: translate(0, 0) rotate(0deg); }
  100% { transform: translate(3px, -2px) rotate(-1deg); }
}
@keyframes p4HandFloatLeftActive {
  0% { transform: translate(0, 0) rotate(0deg); }
  100% { transform: translate(-5px, -3px) rotate(2.5deg); }
}
@keyframes p4HandFloatRightActive {
  0% { transform: translate(0, 0) rotate(0deg); }
  100% { transform: translate(5px, -3px) rotate(-2.5deg); }
}

@keyframes p4FingerTapThumbLeft {
  0%, 100% { transform: rotate(0deg); }
  50% { transform: rotate(-4deg) translateY(0.8px); }
}
@keyframes p4FingerTapThumbRight {
  0%, 100% { transform: rotate(0deg); }
  50% { transform: rotate(4deg) translateY(0.8px); }
}
@keyframes p4FingerTapIndexLeft {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(5deg) translateY(1.5px); }
}
@keyframes p4FingerTapMiddleLeft {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(6deg) translateY(1.8px); }
}
@keyframes p4FingerTapRingLeft {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(5deg) translateY(1.5px); }
}
@keyframes p4FingerTapPinkyLeft {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(4deg) translateY(1.2px); }
}

@keyframes p4FingerTapIndexRight {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(-5deg) translateY(1.5px); }
}
@keyframes p4FingerTapMiddleRight {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(-6deg) translateY(1.8px); }
}
@keyframes p4FingerTapRingRight {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(-5deg) translateY(1.5px); }
}
@keyframes p4FingerTapPinkyRight {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(-4deg) translateY(1.2px); }
}

/* Phone Tapping */
@keyframes p4HandTap {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(-3px, -5px) scale(0.95); }
}

/* Stylus Writing */
@keyframes p4HandScribble {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  30% { transform: translate(8px, -4px) rotate(3deg); }
  70% { transform: translate(-6px, 6px) rotate(-4deg); }
}

/* Cup Ripple */
@keyframes p4CoffeeRipple {
  0% { transform: scale(0.4); opacity: 0.85; }
  100% { transform: scale(1.15); opacity: 0; }
}

/* Hot Steam */
@keyframes p4SteamRise {
  0% { transform: translateY(0) scaleX(1); opacity: 0; }
  15% { opacity: 0.45; }
  80% { opacity: 0.2; }
  100% { transform: translateY(-16px) scaleX(1.4); opacity: 0; }
}

/* Keycap Spark Blast Animations */
@keyframes p4SparkBlast1 {
  0% { transform: translate(50px, 90px) scale(0.3) rotate(0deg); opacity: 0; }
  20% { opacity: 1; }
  100% { transform: translate(15px, 20px) scale(1.1) rotate(-35deg); opacity: 0; }
}
@keyframes p4SparkBlast2 {
  0% { transform: translate(110px, 90px) scale(0.3) rotate(0deg); opacity: 0; }
  20% { opacity: 1; }
  100% { transform: translate(145px, 25px) scale(1.1) rotate(40deg); opacity: 0; }
}
@keyframes p4SparkBlast3 {
  0% { transform: translate(75px, 95px) scale(0.3) rotate(0deg); opacity: 0; }
  20% { opacity: 1; }
  100% { transform: translate(45px, 15px) scale(1.2) rotate(15deg); opacity: 0; }
}
@keyframes p4SparkBlast4 {
  0% { transform: translate(130px, 85px) scale(0.3) rotate(0deg); opacity: 0; }
  20% { opacity: 1; }
  100% { transform: translate(165px, 10px) scale(1.2) rotate(-25deg); opacity: 0; }
}
@keyframes p4SparkBlast5 {
  0% { transform: translate(95px, 100px) scale(0.3) rotate(0deg); opacity: 0; }
  20% { opacity: 1; }
  100% { transform: translate(95px, 5px) scale(1.1) rotate(10deg); opacity: 0; }
}

/* ── NEW INTERACTIVE CLOCK, PHONE & TABLET STYLING ── */

.p4-busy-clock-tcr {
  right: 28%;
  top: 10px;
  width: 65px;
  height: 65px;
  transform-origin: bottom center;
  animation: p4ClockPanicIdle 2.5s infinite ease-in-out alternate;
  cursor: pointer;
  z-index: 10;
}
.p4-busy-clock-tcr:hover {
  transform: scale(1.08) rotate(2deg);
}
.p4-busy-clock-svg {
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 6px 12px rgba(0,0,0,0.18));
}

/* Clock Animations */
@keyframes p4ClockPanicIdle {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  20% { transform: translate(-1.5px, 0.5px) rotate(-2deg); }
  40% { transform: translate(1px, -1px) rotate(2deg); }
  65% { transform: translate(-1px, -0.5px) rotate(-1.5deg); }
  85% { transform: translate(1.5px, 0.5px) rotate(1.5deg); }
}

.p4-clock-second-hand-group {
  transform-origin: 40px 46px;
  animation: p4ClockSecondSweep 1.2s infinite linear;
}
@keyframes p4ClockSecondSweep {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

body.p4.busy-mode:not(.relaxed-mode) .p4-busy-clock-tcr.active {
  animation: p4ClockRingActive 0.08s infinite linear alternate;
}
body.p4.busy-mode:not(.relaxed-mode) .p4-busy-clock-tcr.active .p4-clock-hammer {
  transform-origin: 40px 22px;
  animation: p4ClockHammerTurbo 0.04s infinite linear alternate;
}
body.p4.busy-mode:not(.relaxed-mode) .p4-busy-clock-tcr.active .p4-clock-waves {
  animation: p4ClockWavesFlash 0.15s infinite ease-in-out;
}
body.p4.busy-mode:not(.relaxed-mode) .p4-busy-clock-tcr.ending {
  animation: p4ClockEndingSettle 1s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

@keyframes p4ClockRingActive {
  0% { transform: scale(1.08) rotate(-4deg) translate(-2px, 1px); }
  100% { transform: scale(1.08) rotate(4deg) translate(2px, -1px); }
}
@keyframes p4ClockHammerTurbo {
  0% { transform: rotate(-15deg); }
  100% { transform: rotate(15deg); }
}
@keyframes p4ClockWavesFlash {
  0%, 100% { opacity: 0; transform: scale(0.85); }
  50% { opacity: 1; transform: scale(1.15); }
}
@keyframes p4ClockEndingSettle {
  0% { transform: scale(1.08) rotate(4deg); }
  35% { transform: scale(1.03) rotate(-2deg); }
  65% { transform: scale(1.01) rotate(1deg); }
  100% { transform: scale(1) rotate(0deg); }
}

/* Phone Upgrades */
.p4-busy-phone-tl {
  cursor: pointer;
  animation: p4PhonePanicIdle 2.2s infinite ease-in-out alternate;
}
.p4-busy-phone-tl:hover {
  transform: scale(1.08) rotate(2deg);
}

@keyframes p4PhonePanicIdle {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  25% { transform: translate(-1.2px, 0.8px) rotate(-1.5deg); }
  50% { transform: translate(0.8px, -1.2px) rotate(1.5deg); }
  75% { transform: translate(-0.8px, -0.8px) rotate(-1deg); }
}

body.p4.busy-mode:not(.relaxed-mode) .p4-busy-phone-tl.active {
  animation: p4PhoneActiveShake 0.08s infinite linear alternate;
}
body.p4.busy-mode:not(.relaxed-mode) .p4-busy-phone-tl.active .p4-busy-phone-screen {
  fill: #ef4444 !important;
  filter: drop-shadow(0 0 8px #ef4444);
}
body.p4.busy-mode:not(.relaxed-mode) .p4-busy-phone-tl.active .p4-phone-tap-finger {
  animation: p4HandTapTurbo 0.06s infinite linear alternate;
}
body.p4.busy-mode:not(.relaxed-mode) .p4-busy-phone-tl.ending {
  animation: p4PhoneEndingSettle 1s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}
body.p4.busy-mode:not(.relaxed-mode) .p4-busy-phone-tl.ending .p4-busy-phone-screen {
  fill: #f59e0b !important;
  filter: drop-shadow(0 0 4px #f59e0b);
  transition: fill 0.8s ease;
}

@keyframes p4PhoneActiveShake {
  0% { transform: scale(1.08) rotate(-3deg) translate(-2px, 2px); }
  100% { transform: scale(1.08) rotate(3deg) translate(2px, -2px); }
}
@keyframes p4HandTapTurbo {
  0% { transform: translateY(0) scaleY(1); }
  100% { transform: translateY(8px) scaleY(0.85); }
}
@keyframes p4PhoneEndingSettle {
  0% { transform: scale(1.08) rotate(3deg); }
  40% { transform: scale(1.02) rotate(-1.5deg); }
  75% { transform: scale(1.01) rotate(0.8deg); }
  100% { transform: scale(1) rotate(0deg); }
}

/* Tablet Upgrades */
.p4-busy-tablet-br {
  cursor: pointer;
  animation: p4TabletPanicIdle 2.8s infinite ease-in-out alternate;
}
.p4-busy-tablet-br:hover {
  transform: scale(1.06) rotate(-1deg);
}

@keyframes p4TabletPanicIdle {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  30% { transform: translate(-0.8px, 0.6px) rotate(-0.5deg); }
  70% { transform: translate(0.6px, -0.8px) rotate(0.5deg); }
}

body.p4.busy-mode:not(.relaxed-mode) .p4-busy-tablet-br.active {
  animation: p4TabletActiveShake 0.09s infinite linear alternate;
}
body.p4.busy-mode:not(.relaxed-mode) .p4-busy-tablet-br.active .p4-busy-tablet-screen {
  fill: #1e3a8a !important;
  filter: drop-shadow(0 0 10px #3b82f6);
}
body.p4.busy-mode:not(.relaxed-mode) .p4-busy-tablet-br.active .p4-busy-tablet-charts {
  filter: invert(1) hue-rotate(180deg) saturate(3);
}
body.p4.busy-mode:not(.relaxed-mode) .p4-busy-tablet-br.active .p4-busy-hand-scribble {
  animation: p4HandScribbleTurbo 0.07s infinite linear alternate;
}
body.p4.busy-mode:not(.relaxed-mode) .p4-busy-tablet-br.ending {
  animation: p4TabletEndingSettle 1s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}
body.p4.busy-mode:not(.relaxed-mode) .p4-busy-tablet-br.ending .p4-busy-tablet-screen {
  fill: #10b981 !important;
  filter: drop-shadow(0 0 4px #10b981);
  transition: fill 0.8s ease;
}

@keyframes p4TabletActiveShake {
  0% { transform: scale(1.05) rotate(-2deg) translate(-1.5px, 1.5px); }
  100% { transform: scale(1.05) rotate(2deg) translate(1.5px, -1.5px); }
}
@keyframes p4HandScribbleTurbo {
  0% { transform: translate(0, 0) rotate(-5deg); }
  100% { transform: translate(12px, -8px) rotate(8deg); }
}
@keyframes p4TabletEndingSettle {
  0% { transform: scale(1.05) rotate(2deg); }
  40% { transform: scale(1.02) rotate(-1deg); }
  75% { transform: scale(1.01) rotate(0.5deg); }
  100% { transform: scale(1) rotate(0deg); }
}

/* Sparks Particles styling */
.p4-phone-spark, .p4-clock-spark, .p4-tablet-spark {
  position: absolute;
  font-family: 'Outfit', monospace;
  font-size: 9px;
  font-weight: 900;
  padding: 2px 4px;
  border-radius: 4px;
  opacity: 0;
  pointer-events: none;
  transition: transform 0.1s ease;
  z-index: 15;
}
.p4-phone-spark {
  color: #f59e0b;
  background: #0f172a;
  border: 1px solid #f59e0b;
  box-shadow: inset 0 -1.5px 0 rgba(0,0,0,0.3), 0 0 6px rgba(245, 158, 11, 0.35);
}
.p4-clock-spark {
  color: #ef4444;
  background: #ffffff;
  border: 1px solid #ef4444;
  box-shadow: inset 0 -1.5px 0 rgba(0,0,0,0.15), 0 0 6px rgba(239, 68, 68, 0.35);
}
.p4-tablet-spark {
  color: #3b82f6;
  background: #0f172a;
  border: 1px solid #3b82f6;
  box-shadow: inset 0 -1.5px 0 rgba(0,0,0,0.3), 0 0 6px rgba(59, 130, 246, 0.35);
}

.p4-busy-phone-tl.active .ps1 { animation: p4PhoneSparkBlast1 0.8s forwards; }
.p4-busy-phone-tl.active .ps2 { animation: p4PhoneSparkBlast2 0.8s forwards 0.1s; }
.p4-busy-phone-tl.active .ps3 { animation: p4PhoneSparkBlast3 0.8s forwards 0.2s; }

.p4-busy-clock-tcr.active .cs1 { animation: p4ClockSparkBlast1 0.8s forwards; }
.p4-busy-clock-tcr.active .cs2 { animation: p4ClockSparkBlast2 0.8s forwards 0.1s; }
.p4-busy-clock-tcr.active .cs3 { animation: p4ClockSparkBlast3 0.8s forwards 0.2s; }

.p4-busy-tablet-br.active .ts1 { animation: p4TabletSparkBlast1 0.8s forwards; }
.p4-busy-tablet-br.active .ts2 { animation: p4TabletSparkBlast2 0.8s forwards 0.1s; }
.p4-busy-tablet-br.active .ts3 { animation: p4TabletSparkBlast3 0.8s forwards 0.2s; }

@keyframes p4PhoneSparkBlast1 {
  0% { transform: translate(30px, 50px) scale(0.3); opacity: 0; }
  20% { opacity: 1; }
  100% { transform: translate(-30px, -20px) scale(1.1) rotate(-15deg); opacity: 0; }
}
@keyframes p4PhoneSparkBlast2 {
  0% { transform: translate(30px, 50px) scale(0.3); opacity: 0; }
  20% { opacity: 1; }
  100% { transform: translate(65px, -5px) scale(1.1) rotate(20deg); opacity: 0; }
}
@keyframes p4PhoneSparkBlast3 {
  0% { transform: translate(30px, 50px) scale(0.3); opacity: 0; }
  20% { opacity: 1; }
  100% { transform: translate(20px, -45px) scale(1.1); opacity: 0; }
}

@keyframes p4ClockSparkBlast1 {
  0% { transform: translate(30px, 30px) scale(0.3); opacity: 0; }
  20% { opacity: 1; }
  100% { transform: translate(-20px, -20px) scale(1.1) rotate(-15deg); opacity: 0; }
}
@keyframes p4ClockSparkBlast2 {
  0% { transform: translate(30px, 30px) scale(0.3); opacity: 0; }
  20% { opacity: 1; }
  100% { transform: translate(65px, -15px) scale(1.1) rotate(15deg); opacity: 0; }
}
@keyframes p4ClockSparkBlast3 {
  0% { transform: translate(30px, 30px) scale(0.3); opacity: 0; }
  20% { opacity: 1; }
  100% { transform: translate(25px, 60px) scale(1.1); opacity: 0; }
}

@keyframes p4TabletSparkBlast1 {
  0% { transform: translate(60px, 70px) scale(0.3); opacity: 0; }
  20% { opacity: 1; }
  100% { transform: translate(15px, 15px) scale(1.1) rotate(-15deg); opacity: 0; }
}
@keyframes p4TabletSparkBlast2 {
  0% { transform: translate(60px, 70px) scale(0.3); opacity: 0; }
  20% { opacity: 1; }
  100% { transform: translate(110px, 25px) scale(1.1) rotate(15deg); opacity: 0; }
}
@keyframes p4TabletSparkBlast3 {
  0% { transform: translate(60px, 70px) scale(0.3); opacity: 0; }
  20% { opacity: 1; }
  100% { transform: translate(60px, 125px) scale(1.1); opacity: 0; }
}

/* Relaxed Mode overrides to protect client system performance */
body.relaxed-mode .p4-benefits-busy-bg,
body.relaxed-mode .p4-benefits-busy-elements,
body.relaxed-mode .p4-busy-item,
body.relaxed-mode .p4-busy-hand-type,
body.relaxed-mode .p4-busy-hand-tap,
body.relaxed-mode .p4-busy-hand-scribble,
body.relaxed-mode .p4-busy-coffee-ripple,
body.relaxed-mode .p4-busy-steam-line,
body.relaxed-mode .p4-busy-screen-glow,
body.relaxed-mode .p4-key-spark,
body.relaxed-mode .p4-watch-screen,
body.relaxed-mode .p4-tracker-pulse,
body.relaxed-mode .p4-finger,
body.relaxed-mode .p4-busy-clock-tcr,
body.relaxed-mode .p4-clock-hammer,
body.relaxed-mode .p4-clock-waves,
body.relaxed-mode .p4-clock-spark,
body.relaxed-mode .p4-tablet-spark {
  animation: none !important;
  filter: none !important;
  transition: none !important;
}

/* ==========================================================================
   §4.1c DAY & NIGHT AVAILABLE MODE BACKDROP FOR COURSE 1 (OFFICE ADMIN)
   ========================================================================== */

/* Available Mode Background wrappers display */
.p4-c1-available-bg,
.p4-c1-available-elements {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
}
.p4-c1-available-bg {
  z-index: 1;
}
.p4-c1-available-elements {
  z-index: 9; /* sits below cards which are z-index: 10 */
}

/* Enable display in available mode */
body.p4.available-mode .p4-c1-available-bg,
body.p4.available-mode .p4-c1-available-elements {
  opacity: 1;
}

body.p4.available-mode #p4Course1,
body.p4.busy-mode #p4Course1 {
  background: none !important;
  overflow: hidden;
}
body.p4.available-mode #p4Course1 .p4-wrap,
body.p4.busy-mode #p4Course1 .p4-wrap {
  position: relative;
  z-index: 10;
  pointer-events: none;
}
body.p4.available-mode #p4Course1 .p4-module-card,
body.p4.busy-mode #p4Course1 .p4-module-card {
  pointer-events: auto;
}

/* Glassmorphic card styling inside Course 1 under Available & Busy Modes */
body.p4.day.available-mode #p4Course1 .p4-module-card,
body.p4.day.busy-mode #p4Course1 .p4-module-card {
  background: rgba(255, 255, 255, 0.85) !important;
  backdrop-filter: blur(8px) !important;
  border: 1px solid rgba(100, 100, 100, 0.1) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
}
body.p4.day.available-mode #p4Course1 .p4-module-card:hover,
body.p4.day.busy-mode #p4Course1 .p4-module-card:hover {
  background: rgba(255, 255, 255, 0.95) !important;
  border-color: var(--p4-gold) !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

body.p4.night #p4Course1 .p4-module-card,
body.p4.night.busy-mode #p4Course1 .p4-module-card {
  background: rgba(13, 20, 32, 0.80) !important;
  backdrop-filter: blur(8px) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  box-shadow: 0 4px 25px rgba(0, 0, 0, 0.4);
}
body.p4.night #p4Course1 .p4-module-card:hover,
body.p4.night.busy-mode #p4Course1 .p4-module-card:hover {
  border-color: var(--p4-neon) !important;
  box-shadow: 0 8px 32px rgba(255, 255, 255, 0.05);
}

/* Desk Surface & Line */
.p4-c1-desk {
  fill: url(#p4C1DeskDay);
  transition: fill 0.8s ease;
}
body.p4.night .p4-c1-desk {
  fill: url(#p4C1DeskNight);
}
.p4-c1-desk-line {
  stroke: #cbd5e1;
  transition: stroke 0.8s ease;
}
body.p4.night .p4-c1-desk-line {
  stroke: #334155;
}

/* Background Wall & columns */
.p4-c1-wall-rect {
  fill: url(#p4C1WallDay);
  transition: fill 0.8s ease;
}
body.p4.night .p4-c1-wall-rect {
  fill: url(#p4C1WallNight);
}
.p4-c1-wall-column {
  fill: #e5e7eb;
  transition: fill 0.8s ease;
}
body.p4.night .p4-c1-wall-column {
  fill: #0e1524;
}
.p4-c1-wall-seam {
  stroke: #cbd5e1;
  transition: stroke 0.8s ease;
}
body.p4.night .p4-c1-wall-seam {
  stroke: #1e293b;
}
.p4-c1-night-glow {
  fill: url(#p4C1NightGlow);
  opacity: 0;
  transition: opacity 0.8s ease;
}
body.p4.night .p4-c1-night-glow {
  opacity: 1;
}

/* Plant Leaves Styling */
.p4-c1-leaf {
  fill: url(#p4C1PlantLeaf);
  transition: fill 0.8s ease;
}
body.p4.night .p4-c1-leaf {
  fill: #14532d;
  opacity: 0.4;
}

/* iMac Styling */
.p4-c1-imac-stand,
.p4-c1-imac-stand-base,
.p4-c1-imac-body,
.p4-c1-imac-bezel {
  transition: fill 0.8s ease, stroke 0.8s ease;
}
body.p4.night .p4-c1-imac-stand,
body.p4.night .p4-c1-imac-stand-base {
  fill: #334155;
  stroke: #1e293b;
}
body.p4.night .p4-c1-imac-body {
  fill: #1e293b;
  stroke: #0f172a;
}
body.p4.night .p4-c1-imac-bezel {
  fill: #1e293b;
}

/* iMac Screen */
.p4-c1-imac-screen {
  fill: #f8fafc;
  stroke: #cbd5e1;
  stroke-width: 1;
  transition: fill 0.8s ease, stroke 0.8s ease;
}
body.p4.night .p4-c1-imac-screen {
  fill: #090d16;
  stroke: #1e293b;
}

/* Day screen display contents */
.p4-c1-imac-display-content {
  transition: opacity 0.8s ease;
}
body.p4.night .p4-c1-imac-display-content {
  opacity: 0;
}

/* Glare & Logo */
.p4-c1-imac-glare {
  transition: opacity 0.8s ease;
}
body.p4.night .p4-c1-imac-glare {
  opacity: 0.02;
}
.p4-c1-imac-logo {
  transition: fill 0.8s ease;
}
body.p4.night .p4-c1-imac-logo {
  fill: #475569;
}

/* Peripherals (Keyboard, Mouse) */
.p4-c1-kb-base,
.p4-c1-kb-keys,
.p4-c1-mouse-body {
  transition: fill 0.8s ease, stroke 0.8s ease;
}
body.p4.night .p4-c1-kb-base {
  fill: #1e293b;
  stroke: #0f172a;
}
body.p4.night .p4-c1-kb-keys {
  fill: #334155;
}
body.p4.night .p4-c1-mouse-body {
  fill: #1e293b;
  stroke: #0f172a;
}

/* Standby LED (Night standby indicator) */
.p4-c1-imac-standby-led {
  opacity: 0;
  transition: opacity 0.8s ease;
}
body.p4.night:not(.relaxed-mode) .p4-c1-imac-standby-led {
  animation: p4C1StandbyBlink 3s infinite alternate;
}
@keyframes p4C1StandbyBlink {
  0% { opacity: 0.2; }
  100% { opacity: 1; filter: drop-shadow(0 0 2px #3b82f6); }
}

/* Resting Phone (Night Mode Only) */
.p4-c1-resting-phone {
  display: none;
  transition: opacity 0.8s ease;
}
body.p4.night .p4-c1-resting-phone {
  display: block;
  opacity: 0.7;
}

/* Employee (Day Mode Only) */
.p4-c1-employee {
  display: none;
}
body.p4.day.available-mode .p4-c1-employee {
  display: block;
}

/* Employee animations */
.p4-c1-head-phone-group {
  transform-origin: 558px 335px;
}
.p4-c1-ponytail-group {
  transform-origin: 584px 302px;
}

body.p4.day.available-mode:not(.relaxed-mode) .p4-c1-employee {
  animation: p4C1EmployeeBreathe 4s infinite ease-in-out;
}
@keyframes p4C1EmployeeBreathe {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-2px); }
}

/* Head Nodding / Conversation tilt animation */
body.p4.day.available-mode:not(.relaxed-mode) .p4-c1-head-phone-group {
  animation: p4C1HeadNod 6s infinite ease-in-out;
}
@keyframes p4C1HeadNod {
  0%, 100% { transform: rotate(0deg); }
  30% { transform: rotate(1.5deg) translateY(0.5px); }
  40% { transform: rotate(-0.5deg) translateY(-0.2px); }
  70% { transform: rotate(1deg) translateY(0.3px); }
}

/* Ponytail swaying animation */
body.p4.day.available-mode:not(.relaxed-mode) .p4-c1-ponytail-group {
  animation: p4C1PonytailSway 4.5s infinite ease-in-out;
}
@keyframes p4C1PonytailSway {
  0%, 100% { transform: rotate(0deg); }
  50% { transform: rotate(-6deg); }
}

/* Typing left arm animation */
body.p4.day.available-mode:not(.relaxed-mode) .p4-c1-left-arm-group {
  animation: p4C1LeftArmType 1.5s infinite ease-in-out;
}
@keyframes p4C1LeftArmType {
  0%, 100% { transform: translate(0, 0); }
  33% { transform: translate(-1.5px, -1px); }
  66% { transform: translate(1px, -1.5px); }
}

/* Progress bar micro-pulse on iMac screen */
body.p4.day.available-mode:not(.relaxed-mode) .p4-c1-imac-progress {
  animation: p4C1ProgressPulse 3s infinite ease-in-out alternate;
}
@keyframes p4C1ProgressPulse {
  0% { width: 50px; }
  100% { width: 110px; }
}

/* Blinking cursor / indicator on iMac */
body.p4.day.available-mode:not(.relaxed-mode) .p4-c1-imac-indicator {
  animation: p4C1CursorBlink 1s infinite alternate;
}
@keyframes p4C1CursorBlink {
  0% { opacity: 0.2; }
  100% { opacity: 1; }
}

/* Relaxed Mode overrides to freeze animations and save GPU resource */
body.relaxed-mode .p4-c1-imac-standby-led,
body.relaxed-mode .p4-c1-employee,
body.relaxed-mode .p4-c1-left-arm-group,
body.relaxed-mode .p4-c1-head-phone-group,
body.relaxed-mode .p4-c1-ponytail-group,
body.relaxed-mode .p4-c1-imac-progress,
body.relaxed-mode .p4-c1-imac-indicator {
  animation: none !important;
  transform: none !important;
  filter: none !important;
}

/* Glassmorphic box container for course header and meta across all modes to improve readability */
.p4-course-info-box {
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: 12px;
  padding: 18px 22px;
  margin-bottom: 28px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
  transition: background var(--p4-transition), border-color var(--p4-transition);
}

body.p4.night .p4-course-info-box {
  background: rgba(30, 41, 59, 0.45); /* lighter slate for improved visibility and contrast */
  border-color: rgba(255, 255, 255, 0.1);
  box-shadow: 0 4px 22px rgba(0, 0, 0, 0.25);
}

/* Custom tinted backgrounds and borders for night modes to enhance visibility and reduce darkness */
body.p4.night.available-mode .p4-course-info-box {
  background: rgba(20, 38, 28, 0.55);
  border-color: rgba(46, 204, 113, 0.25);
  box-shadow: 0 4px 20px rgba(46, 204, 113, 0.08);
}

body.p4.night.busy-mode .p4-course-info-box {
  background: rgba(38, 20, 20, 0.55);
  border-color: rgba(231, 76, 60, 0.25);
  box-shadow: 0 4px 20px rgba(231, 76, 60, 0.08);
}

body.p4.night.holiday-mode .p4-course-info-box {
  background: rgba(32, 20, 38, 0.55);
  border-color: rgba(224, 86, 253, 0.25);
  box-shadow: 0 4px 20px rgba(224, 86, 253, 0.08);
}

/* Adjust nested elements margins and contrast inside the info box */
.p4-course-info-box .p4-course-header {
  margin-bottom: 8px !important;
}
.p4-course-info-box .p4-course-meta {
  margin-bottom: 0 !important;
  color: var(--p4-text) !important;
}
body.p4.night .p4-course-info-box .p4-course-meta {
  color: var(--p4-night-text) !important;
}
.p4-course-info-box .p4-course-code {
  background: rgba(0, 0, 0, 0.06) !important;
  color: var(--p4-text) !important;
  font-weight: 600;
}
body.p4.night .p4-course-info-box .p4-course-code {
  background: rgba(255, 255, 255, 0.1) !important;
  color: var(--p4-night-text) !important;
}

/* Day/Night Available Mode Office Windows (Course 1) */
.p4-c1-win-border {
  fill: #ffffff;
  stroke: #cbd5e1;
  stroke-width: 3px;
  transition: fill 0.8s ease, stroke 0.8s ease;
}
body.p4.night .p4-c1-win-border {
  fill: #1e293b;
  stroke: #0f172a;
}

.p4-c1-win-pane {
  fill: url(#p4C1SkyDay);
  transition: fill 0.8s ease;
}
body.p4.night .p4-c1-win-pane {
  fill: url(#p4C1SkyNight);
}

.p4-c1-win-divider {
  stroke: #ffffff;
  stroke-width: 3px;
  transition: stroke 0.8s ease;
}
body.p4.night .p4-c1-win-divider {
  stroke: #1e293b;
}

.p4-c1-win-day-details {
  opacity: 1;
  transition: opacity 0.8s ease;
}
body.p4.night .p4-c1-win-day-details {
  opacity: 0;
}

.p4-c1-win-night-details {
  opacity: 0;
  transition: opacity 0.8s ease;
}
body.p4.night .p4-c1-win-night-details {
  opacity: 1;
}

/* Star Twinkling Animation (Night Only) */
body.p4.night:not(.relaxed-mode) .p4-c1-star {
  animation: p4C1StarPulse 2s infinite alternate;
}
body.p4.night:not(.relaxed-mode) .p4-c1-star.star1 { animation-delay: 0s; }
body.p4.night:not(.relaxed-mode) .p4-c1-star.star2 { animation-delay: 0.3s; }
body.p4.night:not(.relaxed-mode) .p4-c1-star.star3 { animation-delay: 0.6s; }
body.p4.night:not(.relaxed-mode) .p4-c1-star.star4 { animation-delay: 0.1s; }
body.p4.night:not(.relaxed-mode) .p4-c1-star.star5 { animation-delay: 0.4s; }
body.p4.night:not(.relaxed-mode) .p4-c1-star.star6 { animation-delay: 0.7s; }
body.p4.night:not(.relaxed-mode) .p4-c1-star.star7 { animation-delay: 0.2s; }

@keyframes p4C1StarPulse {
  0% { opacity: 0.3; transform: scale(0.9); }
  100% { opacity: 1; transform: scale(1.1); }
}

/* Relaxed mode override for stars */
body.relaxed-mode .p4-c1-star {
  animation: none !important;
}

/* ==========================================================================
   Interactive Desk Elements for Course 1 (Mug, Lamp, Folder, Calendar, Globe)
   ========================================================================== */

/* 1. Sleek Mug (Bottom-Left) */
.p4-c1-mug .mug-body,
.p4-c1-mug .mug-handle,
.p4-c1-mug .mug-rim,
.p4-c1-mug .mug-liquid {
  transition: fill 0.8s ease, stroke 0.8s ease;
}
.p4-c1-mug-steam-group {
  transition: opacity 0.8s ease;
}
body.p4.night .p4-c1-mug-steam-group {
  opacity: 0;
}
body.p4.day.available-mode:not(.relaxed-mode) .mug-steam.s1 {
  animation: p4C1MugSteamWave1 2.2s infinite linear;
}
body.p4.day.available-mode:not(.relaxed-mode) .mug-steam.s2 {
  animation: p4C1MugSteamWave2 2.2s infinite linear;
  animation-delay: 1.1s;
}
@keyframes p4C1MugSteamWave1 {
  0% { transform: translate(0, 4px) scale(0.7); opacity: 0; }
  20% { opacity: 0.7; }
  50% { transform: translate(3px, -6px) scale(1); opacity: 0.4; }
  80% { opacity: 0.1; }
  100% { transform: translate(-2px, -15px) scale(1.2); opacity: 0; }
}
@keyframes p4C1MugSteamWave2 {
  0% { transform: translate(0, 4px) scale(0.7); opacity: 0; }
  20% { opacity: 0.7; }
  50% { transform: translate(-3px, -6px) scale(1); opacity: 0.4; }
  80% { opacity: 0.1; }
  100% { transform: translate(2px, -15px) scale(1.2); opacity: 0; }
}

/* Mug continuous warm glow */
body.p4.day.available-mode:not(.relaxed-mode) .p4-c1-mug {
  animation: p4C1MugHeatGlow 4s infinite ease-in-out alternate;
}
@keyframes p4C1MugHeatGlow {
  0% { filter: drop-shadow(0 0 2px rgba(236, 72, 153, 0.2)); }
  100% { filter: drop-shadow(0 0 6px rgba(236, 72, 153, 0.5)); }
}

/* Mug active double-sip wiggle + tilt up */
.p4-c1-mug.active {
  transform-origin: 37px 569px;
  animation: p4C1MugActiveSip 2.5s cubic-bezier(0.4, 0, 0.2, 1) forwards !important;
}
@keyframes p4C1MugActiveSip {
  0% { transform: rotate(0deg) translate(0, 0); }
  20% { transform: rotate(-25deg) translate(-2px, -4px); }
  40% { transform: rotate(-16deg) translate(-1px, -3px); }
  60% { transform: rotate(-25deg) translate(-2px, -4px); }
  80% { transform: rotate(-25deg) translate(-2px, -4px); }
  100% { transform: rotate(0deg) translate(0, 0); }
}
/* Mug steam ring rises on click */
.mug-steam-ring {
  transform-origin: 38px 542px;
  opacity: 0;
  transition: transform 0.6s ease, opacity 0.6s ease;
}
.p4-c1-mug.active .mug-steam-ring {
  opacity: 0.85;
  transform: translateY(-25px) scale(1.7);
  transition: transform 1.8s cubic-bezier(0.1, 0.8, 0.3, 1), opacity 1.8s ease;
}

/* Mug ending bouncy settle */
.p4-c1-mug.ending {
  transform-origin: 37px 569px;
  animation: p4C1MugEndingSettle 1.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards !important;
}
@keyframes p4C1MugEndingSettle {
  0% { transform: rotate(0deg); }
  30% { transform: rotate(8deg); }
  60% { transform: rotate(-4deg); }
  85% { transform: rotate(2deg); }
  100% { transform: rotate(0deg); }
}

/* Mug Night Dimming */
body.p4.night .p4-c1-mug .mug-body {
  fill: #660e34 !important;
}
body.p4.night .p4-c1-mug .mug-handle {
  stroke: #660e34 !important;
}
body.p4.night .p4-c1-mug .mug-liquid {
  fill: #4c0519 !important;
}
body.p4.night .p4-c1-mug .mug-rim {
  fill: #881337 !important;
}

/* 2. Desk Lamp (Bottom-Center-Left) */
.lamp-base,
.lamp-stem,
.lamp-shade,
.lamp-hinge,
.lamp-inside {
  transition: all 0.8s ease;
}
.lamp-light-beam {
  opacity: 0.75;
  transition: opacity 0.6s ease, visibility 0.6s ease;
  transform-origin: 130px 460px;
}

/* Lamp light shimmer idle loop */
body.p4.day.available-mode:not(.relaxed-mode) .lamp-light-beam {
  animation: p4C1LampShimmerDay 4s infinite ease-in-out alternate;
}
body.p4.night:not(.relaxed-mode) .lamp-light-beam {
  animation: p4C1LampShimmerNight 3s infinite ease-in-out alternate;
}
@keyframes p4C1LampShimmerDay {
  0% { opacity: 0.18; }
  100% { opacity: 0.28; }
}
@keyframes p4C1LampShimmerNight {
  0% { opacity: 0.65; filter: drop-shadow(0 0 8px rgba(253, 224, 71, 0.35)); }
  100% { opacity: 0.95; filter: drop-shadow(0 0 16px rgba(253, 224, 71, 0.65)); }
}

/* Lamp active electrical flicker off */
.p4-c1-desklamp.active .lamp-light-beam {
  animation: p4C1LampFlickerOff 2.5s steps(1) forwards !important;
}
.p4-c1-desklamp.active .lamp-shade {
  animation: p4C1LampShadeFlicker 2.5s steps(1) forwards;
}
.p4-c1-desklamp.active .lamp-switch {
  transform: translateY(2.5px);
  fill: #ef4444 !important;
}
@keyframes p4C1LampFlickerOff {
  0% { opacity: 0.75; }
  10% { opacity: 0; }
  15% { opacity: 0.75; }
  20% { opacity: 0; }
  25% { opacity: 0.75; }
  30% { opacity: 0; }
  100% { opacity: 0; }
}
@keyframes p4C1LampShadeFlicker {
  0% { fill: #fbbf24; }
  10% { fill: #334155; }
  15% { fill: #fbbf24; }
  20% { fill: #334155; }
  25% { fill: #fbbf24; }
  30% { fill: #334155; }
  100% { fill: #334155; }
}

/* Lamp ending soft settle wobble */
.p4-c1-desklamp.ending {
  transform-origin: 125px 445px;
  animation: p4C1LampEndingSettle 1.2s cubic-bezier(0.25, 0.8, 0.25, 1.25) forwards;
}
@keyframes p4C1LampEndingSettle {
  0% { transform: scale(0.98) translateY(1px) rotate(0); }
  30% { transform: scale(1.01) translateY(-1px) rotate(-6deg); }
  60% { transform: scale(0.99) rotate(3deg); }
  100% { transform: scale(1) translateY(0) rotate(0); }
}

/* Night Mode Lamp ambient colors */
body.p4.night .lamp-base {
  fill: #1e293b !important;
  stroke: #0f172a !important;
}
body.p4.night .lamp-stem {
  stroke: #451a03 !important; /* wood turns deep dark mahogany */
}
body.p4.night .lamp-shade:not(.active) {
  fill: #b45309 !important;
  stroke: #78350f !important;
}
body.p4.night .lamp-hinge {
  fill: #ca8a04 !important;
}

/* 2b. Redesigned Interactive Modern Plant (Left) */
.plant-pot,
.plant-soil,
.pot-rim,
.p4-c1-leaf,
.leaf-vein {
  transition: all 0.8s ease;
}

/* Leaf breeze sway idle loops */
body.p4.day.available-mode:not(.relaxed-mode) .leaf1 {
  transform-origin: 70px 470px;
  animation: p4C1PlantSway1 7s infinite ease-in-out alternate;
}
body.p4.day.available-mode:not(.relaxed-mode) .leaf2 {
  transform-origin: 70px 470px;
  animation: p4C1PlantSway2 8s infinite ease-in-out alternate;
}
body.p4.day.available-mode:not(.relaxed-mode) .leaf3 {
  transform-origin: 70px 470px;
  animation: p4C1PlantSway1 6s infinite ease-in-out alternate;
  animation-delay: -1.5s;
}
body.p4.day.available-mode:not(.relaxed-mode) .leaf4 {
  transform-origin: 70px 470px;
  animation: p4C1PlantSway2 7.5s infinite ease-in-out alternate;
  animation-delay: -2s;
}
body.p4.day.available-mode:not(.relaxed-mode) .leaf5 {
  transform-origin: 70px 470px;
  animation: p4C1PlantSway1 9s infinite ease-in-out alternate;
  animation-delay: -0.5s;
}
@keyframes p4C1PlantSway1 {
  0% { transform: rotate(0deg) skewX(0deg); }
  100% { transform: rotate(2deg) skewX(1deg); }
}
@keyframes p4C1PlantSway2 {
  0% { transform: rotate(0deg) skewX(0deg); }
  100% { transform: rotate(-2.5deg) skewX(-1.5deg); }
}

/* Plant active gust shake */
.p4-c1-plant.active .plant-leaves-group {
  transform-origin: 70px 530px;
  animation: p4C1PlantShakeActive 2.5s ease-in-out forwards;
}
@keyframes p4C1PlantShakeActive {
  0%, 100% { transform: rotate(0); }
  15% { transform: rotate(-8deg) skewX(-4deg); }
  30% { transform: rotate(6deg) skewX(3deg); }
  45% { transform: rotate(-4deg) skewX(-2deg); }
  60% { transform: rotate(3deg) skewX(1deg); }
  75% { transform: rotate(-1deg); }
}

/* Flower blooms on click */
.plant-flower {
  opacity: 0;
  transform: scale(0);
  transition: transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.8s ease;
}
.p4-c1-plant.active .plant-flower {
  opacity: 1;
  transform: scale(1);
}

/* Plant ending settle wobble */
.p4-c1-plant.ending .plant-leaves-group {
  transform-origin: 70px 530px;
  animation: p4C1PlantSettleEnding 1.2s ease-out forwards;
}
@keyframes p4C1PlantSettleEnding {
  0% { transform: rotate(-2deg); }
  40% { transform: rotate(1deg); }
  70% { transform: rotate(-0.5deg); }
  100% { transform: rotate(0deg); }
}
.p4-c1-plant.ending .plant-flower {
  opacity: 0;
  transform: scale(0);
  transition: transform 1.2s ease-in, opacity 1.2s ease-in;
}

/* Plant Night Dimming */
body.p4.night .plant-pot {
  fill: #111827 !important;
  stroke: #030712 !important;
}
body.p4.night .pot-rim {
  stroke: #d97706 !important;
}
body.p4.night .p4-c1-leaf {
  fill: #064e3b !important;
  stroke: #022c22 !important;
}
body.p4.night .leaf-vein {
  stroke: #022c22 !important;
}

/* 3. Document Folder (Bottom-Center) */
.folder-back,
.folder-front,
.folder-paper,
.folder-line {
  transition: all 0.8s ease;
}
.folder-front {
  transform-origin: 1070px 540px;
  transition: transform 0.6s cubic-bezier(0.25, 0.8, 0.25, 1.1);
}

/* Paper breeze flutter idle loop */
body.p4.day.available-mode:not(.relaxed-mode) .p4-c1-folder .folder-paper {
  transform-origin: 1070px 540px;
  animation: p4C1PaperFlutter 5s infinite ease-in-out;
}
@keyframes p4C1PaperFlutter {
  0%, 100% { transform: rotate(0deg); }
  50% { transform: rotate(-1deg) translateY(-0.6px); }
}

/* Folder active wide open cover + rising pages */
.p4-c1-folder.active .folder-front {
  transform: rotate(-45deg) scaleX(0.6) translate(-15px, 8px);
}
.p4-c1-folder.active .folder-paper {
  transform: translate(-4px, -12px) rotate(-2deg);
}
.p4-c1-folder.active .folder-line {
  transform: translate(-4px, -12px);
  stroke: #3b82f6 !important;
}

/* Folder ending slam shut bounce */
.p4-c1-folder.ending .folder-front {
  transform-origin: 1070px 540px;
  animation: p4C1FolderSlamShut 1.2s cubic-bezier(0.25, 1, 0.2, 1.1) forwards;
}
@keyframes p4C1FolderSlamShut {
  0% { transform: rotate(-30deg) scaleX(0.7); }
  40% { transform: rotate(3deg); }
  70% { transform: rotate(-1.5deg); }
  100% { transform: rotate(0deg); }
}

/* Folder Night Dimming */
body.p4.night .folder-back {
  fill: #1e3a8a !important;
  stroke: #172554 !important;
}
body.p4.night .folder-front {
  fill: #1d4ed8 !important;
  stroke: #1e3a8a !important;
}
body.p4.night .folder-paper {
  fill: #cbd5e1 !important;
}
body.p4.night .folder-line {
  stroke: #475569 !important;
}

/* 4. Desk Calendar (Bottom-Right-Center) */
.calendar-stand,
.calendar-pages,
.calendar-top {
  transition: fill 0.8s ease, stroke 0.8s ease;
}

/* Calendar breeze wind skew idle loop */
body.p4.day.available-mode:not(.relaxed-mode) .calendar-pages {
  transform-origin: 1125px 570px;
  animation: p4C1CalendarBreeze 6s infinite ease-in-out alternate;
}
@keyframes p4C1CalendarBreeze {
  0% { transform: skewX(0deg) scaleY(1); }
  100% { transform: skewX(1.5deg) scaleY(0.99); }
}

/* Calendar active page flip + date text flash */
.calendar-leaf {
  transform-origin: 1125px 557px;
  opacity: 0;
  fill: #f1f5f9;
  transition: transform 0.8s ease-in-out, opacity 0.8s ease-in-out;
}
.p4-c1-calendar.active .calendar-leaf {
  opacity: 0.95;
  transform: rotateX(-180deg) translateY(-8px);
}
.p4-c1-calendar.active .calendar-date-text {
  animation: p4C1CalendarFlipDate 2.5s ease-in-out;
}
@keyframes p4C1CalendarFlipDate {
  0%, 20% { opacity: 1; }
  45% { opacity: 0; transform: translateY(-5px); }
  60% { opacity: 1; transform: translateY(0); }
}

/* Calendar ending leaf flutter settle */
.p4-c1-calendar.ending .calendar-leaf {
  transform-origin: 1125px 557px;
  animation: p4C1CalendarLeafSettle 1.2s ease-out forwards;
}
@keyframes p4C1CalendarLeafSettle {
  0% { opacity: 0.8; transform: rotateX(-40deg); }
  30% { opacity: 0.4; transform: rotateX(15deg); }
  60% { opacity: 0.1; transform: rotateX(-5deg); }
  100% { opacity: 0; transform: rotateX(0deg); }
}

/* Calendar Night Dimming */
body.p4.night .calendar-stand {
  fill: #1e293b !important;
  stroke: #0f172a !important;
}
body.p4.night .calendar-pages {
  fill: #cbd5e1 !important;
  stroke: #475569 !important;
}
body.p4.night .calendar-top {
  fill: #991b1b !important;
}

/* 5. Desktop Globe (Bottom-Right) */
.globe-stand,
.globe-stand-base,
.globe-ball,
.globe-land {
  transition: fill 0.8s ease, stroke 0.8s ease;
}

/* Globe slow spin idle loop */
body.p4.day.available-mode:not(.relaxed-mode) .globe-sphere-group {
  transform-origin: 1005px 566px;
  animation: p4C1GlobeOrbit 35s infinite linear;
}
@keyframes p4C1GlobeOrbit {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Globe active high-speed spin + precession wobble */
.p4-c1-globe.active .globe-sphere-group {
  transform-origin: 1005px 566px;
  animation: p4C1GlobeActiveSpin 2.5s cubic-bezier(0.15, 0.85, 0.35, 1) forwards !important;
}
@keyframes p4C1GlobeActiveSpin {
  0% { transform: rotate(0deg) skewX(0deg); }
  30% { transform: rotate(720deg) skewX(6deg); }
  60% { transform: rotate(1080deg) skewX(-4deg); }
  85% { transform: rotate(1260deg) skewX(2deg); }
  100% { transform: rotate(1440deg) skewX(0deg); }
}

/* Globe ending wobbly spin decay */
.p4-c1-globe.ending .globe-sphere-group {
  transform-origin: 1005px 566px;
  animation: p4C1GlobeEndingSettle 1.2s ease-out forwards;
}
@keyframes p4C1GlobeEndingSettle {
  0% { transform: rotate(0deg) skewX(5deg); }
  40% { transform: rotate(90deg) skewX(-3deg); }
  70% { transform: rotate(30deg) skewX(1deg); }
  100% { transform: rotate(0deg) skewX(0deg); }
}

/* Globe Night Dimming */
body.p4.night .globe-stand,
body.p4.night .globe-stand-base {
  stroke: #475569 !important;
}
body.p4.night .globe-ball {
  fill: #1d4ed8 !important;
  stroke: #1e3a8a !important;
}
body.p4.night .globe-land {
  fill: #166534 !important;
}
/* ==========================================================================
   Wall Elements (Clock, Framed Diploma, AC)
   ========================================================================== */

/* 11. Redesigned Premium Wall Clock */
.clock-frame,
.clock-internal-gears,
.clock-gear-left,
.clock-gear-right,
.clock-hands {
  transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Gear transform-origins */
.clock-gear-left {
  transform-origin: 510px 110px;
}
.clock-gear-right {
  transform-origin: 526px 113px;
}
.clock-hand-sec {
  transform-origin: 520px 110px;
}

/* Continuous Idle Animations */
body.p4.day.available-mode:not(.relaxed-mode) .clock-hand-sec {
  animation: p4C1ClockSecSweep 60s infinite linear;
}
body.p4.day.available-mode:not(.relaxed-mode) .clock-gear-left {
  animation: p4C1GearClockwise 12s infinite linear;
}
body.p4.day.available-mode:not(.relaxed-mode) .clock-gear-right {
  animation: p4C1GearCounter 8s infinite linear;
}

@keyframes p4C1ClockSecSweep {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
@keyframes p4C1GearClockwise {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
@keyframes p4C1GearCounter {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(-360deg); }
}

/* Active Fast Gear Spin + Scale Pulse */
.p4-c1-clock.active {
  transform-origin: 520px 110px;
  animation: p4C1ClockGlowPulse 2.5s infinite alternate ease-in-out !important;
}
.p4-c1-clock.active .clock-hand-sec {
  transform-origin: 520px 110px;
  animation: p4C1ClockSecActive 2.5s cubic-bezier(0.2, 0.8, 0.2, 1) forwards !important;
}
.p4-c1-clock.active .clock-hand-min {
  transform-origin: 520px 110px;
  animation: p4C1ClockMinActive 2.5s cubic-bezier(0.2, 0.8, 0.2, 1) forwards !important;
}
.p4-c1-clock.active .clock-hand-hour {
  transform-origin: 520px 110px;
  animation: p4C1ClockHourActive 2.5s cubic-bezier(0.2, 0.8, 0.2, 1) forwards !important;
}
.p4-c1-clock.active .clock-gear-left {
  animation: p4C1GearClockwise 0.5s infinite linear !important;
}
.p4-c1-clock.active .clock-gear-right {
  animation: p4C1GearCounter 0.5s infinite linear !important;
}

@keyframes p4C1ClockGlowPulse {
  0% { transform: scale(1); filter: drop-shadow(0 0 1px rgba(251, 191, 36, 0.2)); }
  100% { transform: scale(1.06); filter: drop-shadow(0 0 12px rgba(251, 191, 36, 0.8)); }
}
@keyframes p4C1ClockSecActive {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(2880deg); } /* 8 full spins */
}
@keyframes p4C1ClockMinActive {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(720deg); }  /* 2 full spins */
}
@keyframes p4C1ClockHourActive {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }  /* 1 full spin */
}

/* Ending Settle Recovery */
.p4-c1-clock.ending .clock-hand-sec {
  transform-origin: 520px 110px;
  animation: p4C1ClockSecSettle 1.2s cubic-bezier(0.25, 1, 0.2, 1.1) forwards !important;
}
.p4-c1-clock.ending .clock-hand-min {
  transform-origin: 520px 110px;
  animation: p4C1ClockMinSettle 1.2s ease-out forwards !important;
}
.p4-c1-clock.ending .clock-hand-hour {
  transform-origin: 520px 110px;
  animation: p4C1ClockHourSettle 1.2s ease-out forwards !important;
}
.p4-c1-clock.ending .clock-gear-left {
  animation: p4C1GearSettleCW 1.2s cubic-bezier(0.25, 0.8, 0.25, 1.2) forwards;
}
.p4-c1-clock.ending .clock-gear-right {
  animation: p4C1GearSettleCCW 1.2s cubic-bezier(0.25, 0.8, 0.25, 1.2) forwards;
}

@keyframes p4C1ClockSecSettle {
  0% { transform: rotate(2880deg); }
  35% { transform: rotate(2886deg); }
  70% { transform: rotate(2877deg); }
  100% { transform: rotate(2880deg); }
}
@keyframes p4C1ClockMinSettle {
  0% { transform: rotate(720deg); }
  45% { transform: rotate(722deg); }
  100% { transform: rotate(720deg); }
}
@keyframes p4C1ClockHourSettle {
  0% { transform: rotate(360deg); }
  100% { transform: rotate(360deg); }
}
@keyframes p4C1GearSettleCW {
  0% { transform: rotate(360deg); }
  50% { transform: rotate(370deg); }
  100% { transform: rotate(360deg); }
}
@keyframes p4C1GearSettleCCW {
  0% { transform: rotate(-360deg); }
  50% { transform: rotate(-370deg); }
  100% { transform: rotate(-360deg); }
}

/* Clock Night Mode Colors */
body.p4.night .clock-frame {
  fill: #090d16 !important;
  stroke: #1e293b !important;
  filter: drop-shadow(0 0 4px rgba(59, 130, 246, 0.3));
}
body.p4.night .clock-internal-gears {
  opacity: 0.3;
}
body.p4.night .clock-hand-hour,
body.p4.night .clock-hand-min {
  stroke: #475569 !important;
}

/* 12. Redesigned Premium Framed Diploma */
.frame-wood,
.frame-mat,
.frame-paper,
.frame-seal,
.frame-ribbons,
.frame-shine {
  transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.frame-ribbons {
  transform-origin: 637px 116px;
}

/* Multi-layered Glare Wave Continuous Idle */
body.p4.day.available-mode:not(.relaxed-mode) .p4-c1-frame .frame-shine.fs1 {
  animation: p4C1FrameGlareWave 9s infinite ease-in-out;
}
body.p4.day.available-mode:not(.relaxed-mode) .p4-c1-frame .frame-shine.fs2 {
  animation: p4C1FrameGlareWave 9s infinite ease-in-out;
  animation-delay: 4.5s;
}

@keyframes p4C1FrameGlareWave {
  0% { transform: translate(-8px, -8px) opacity(0); }
  30%, 50% { opacity: 0.8; }
  80%, 100% { transform: translate(12px, 12px) opacity(0); }
}

/* Active Tilting + Ribbon Sway + Sparkles */
.p4-c1-frame.active {
  transform-origin: 637px 70px;
  animation: p4C1FrameBumpSway 2.5s cubic-bezier(0.3, 2, 0.4, 0.8) forwards !important;
}
.p4-c1-frame.active .frame-ribbons {
  animation: p4C1RibbonSwayActive 2.5s ease-in-out forwards;
}
.p4-c1-frame.active .frame-sparkle.s1 {
  animation: p4C1SparkleStar 1.2s ease-out forwards;
}
.p4-c1-frame.active .frame-sparkle.s2 {
  animation: p4C1SparkleStar 1.2s ease-out forwards;
  animation-delay: 0.4s;
}

@keyframes p4C1FrameBumpSway {
  0% { transform: rotate(0deg); }
  25% { transform: rotate(13deg); }
  50% { transform: rotate(7deg); }
  75% { transform: rotate(11deg); }
  100% { transform: rotate(10deg); }
}
@keyframes p4C1RibbonSwayActive {
  0% { transform: rotate(0deg); }
  20% { transform: rotate(20deg); }
  45% { transform: rotate(-15deg); }
  70% { transform: rotate(10deg); }
  100% { transform: rotate(5deg); }
}
@keyframes p4C1SparkleStar {
  0% { transform: scale(0) rotate(0deg); opacity: 0; }
  50% { transform: scale(1.3) rotate(180deg); opacity: 1; }
  100% { transform: scale(1) rotate(360deg); opacity: 0; }
}

/* Ending Settle Damping */
.p4-c1-frame.ending {
  transform-origin: 637px 70px;
  animation: p4C1FrameSettleDamp 1.2s cubic-bezier(0.25, 0.8, 0.25, 1.25) forwards !important;
}
.p4-c1-frame.ending .frame-ribbons {
  animation: p4C1RibbonSettleDamp 1.2s ease-out forwards;
}

@keyframes p4C1FrameSettleDamp {
  0% { transform: rotate(10deg); }
  35% { transform: rotate(-6deg); }
  65% { transform: rotate(3deg); }
  85% { transform: rotate(-1deg); }
  100% { transform: rotate(0deg); }
}
@keyframes p4C1RibbonSettleDamp {
  0% { transform: rotate(5deg); }
  40% { transform: rotate(-4deg); }
  80% { transform: rotate(1deg); }
  100% { transform: rotate(0deg); }
}

/* Frame Night Mode Dimming & Seal Glow */
body.p4.night .frame-wood {
  fill: #0f172a !important;
  stroke: #451a03 !important;
}
body.p4.night .frame-mat {
  fill: #1e293b !important;
}
body.p4.night .frame-paper {
  fill: #78350f !important;
  stroke: #451a03 !important;
}
body.p4.night .frame-seal {
  fill: #ca8a04 !important;
  stroke: #a16207 !important;
  animation: p4C1SealGlowNight 3s infinite ease-in-out alternate;
}

@keyframes p4C1SealGlowNight {
  0% { filter: drop-shadow(0 0 1px rgba(234, 179, 8, 0.2)); opacity: 0.7; }
  100% { filter: drop-shadow(0 0 5px rgba(234, 179, 8, 0.7)); opacity: 1; }
}

/* 13. Smart AC Casing & Wind Flow */
.ac-case,
.ac-display-bg,
.ac-temp-text,
.ac-status-led,
.ac-louver,
.ac-wind,
.ac-led-strip,
.ac-fan-blade {
  transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Fan Blade spin */
body.p4.day.available-mode:not(.relaxed-mode) .ac-fan-blade {
  transform-origin: 814px 92.5px;
  animation: p4C1AcFanSpin 5s infinite linear;
}
@keyframes p4C1AcFanSpin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Louver sway & air flow continuous idle loop */
body.p4.day.available-mode:not(.relaxed-mode) .ac-louver {
  transform-origin: 797px 114px;
  animation: p4C1AcLouverIdle 6s infinite ease-in-out alternate;
}
body.p4.day.available-mode:not(.relaxed-mode) .ac-wind {
  animation: p4C1AcWindIdleFlow 4s infinite linear;
}
body.p4.day.available-mode:not(.relaxed-mode) .ac-wind.w2 {
  animation-delay: 1.3s;
}
body.p4.day.available-mode:not(.relaxed-mode) .ac-wind.w3 {
  animation-delay: 2.6s;
}

@keyframes p4C1AcLouverIdle {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(10deg); }
}
@keyframes p4C1AcWindIdleFlow {
  0% { stroke-dasharray: 4, 16; stroke-dashoffset: 0; opacity: 0; }
  25% { opacity: 0.35; }
  75% { opacity: 0.05; }
  100% { stroke-dasharray: 4, 16; stroke-dashoffset: -20; opacity: 0; }
}

/* AC LED light strip pulse */
body.p4.day.available-mode:not(.relaxed-mode) .ac-led-strip {
  animation: p4C1AcLedStripPulse 3s infinite alternate ease-in-out;
}
@keyframes p4C1AcLedStripPulse {
  0% { stroke: #10b981; opacity: 0.6; }
  100% { stroke: #34d399; opacity: 1; filter: drop-shadow(0 0 2px rgba(52, 211, 153, 0.6)); }
}

/* AC Active Operation: Turbo Cooling + Snow Particles */
.p4-c1-ac.active .ac-louver {
  transform-origin: 797px 114px;
  transform: rotate(35deg) !important;
  transition: transform 0.5s cubic-bezier(0.25, 0.8, 0.25, 1.1);
}
.p4-c1-ac.active .ac-temp-text.t24 {
  display: none !important;
}
.p4-c1-ac.active .ac-temp-text.t16 {
  display: block !important;
  animation: p4C1AcTempFlash 0.5s infinite alternate ease-in-out;
}
.p4-c1-ac.active .ac-fan-blade {
  animation: p4C1AcFanSpin 0.3s infinite linear !important;
}
.p4-c1-ac.active .ac-led-strip {
  animation: p4C1AcLedStripActive 0.4s infinite alternate ease-in-out !important;
}
.p4-c1-ac.active .ac-wind {
  animation: p4C1AcWindTurbulent 0.8s infinite linear !important;
  stroke: #3b82f6 !important;
}
.p4-c1-ac.active .ac-snow {
  animation: p4C1AcSnowFall 2.5s infinite linear;
}
.p4-c1-ac.active .ac-snow.s2 {
  animation-delay: 0.8s;
}
.p4-c1-ac.active .ac-snow.s3 {
  animation-delay: 1.6s;
}

@keyframes p4C1AcTempFlash {
  0% { opacity: 0.5; }
  100% { opacity: 1; }
}
@keyframes p4C1AcLedStripActive {
  0% { stroke: #3b82f6; filter: drop-shadow(0 0 1px rgba(59, 130, 246, 0.5)); }
  100% { stroke: #60a5fa; filter: drop-shadow(0 0 6px rgba(96, 165, 250, 0.9)); }
}
@keyframes p4C1AcWindTurbulent {
  0% { stroke-dasharray: 12, 12; stroke-dashoffset: 0; opacity: 0.8; }
  100% { stroke-dasharray: 12, 12; stroke-dashoffset: -24; opacity: 0; }
}
@keyframes p4C1AcSnowFall {
  0% { transform: translateY(0) rotate(0deg) scale(0); opacity: 0; }
  20% { opacity: 0.9; transform: translateY(5px) rotate(45deg) scale(1); }
  80% { opacity: 0.4; }
  100% { transform: translateY(50px) rotate(360deg) scale(0.6); opacity: 0; }
}

/* AC Ending Settle louver bounce */
.p4-c1-ac.ending .ac-louver {
  transform-origin: 797px 114px;
  animation: p4C1AcLouverSettle 1.2s ease-out forwards !important;
}
@keyframes p4C1AcLouverSettle {
  0% { transform: rotate(35deg); }
  35% { transform: rotate(-4deg); }
  65% { transform: rotate(4deg); }
  100% { transform: rotate(0deg); }
}

/* AC Night Mode Dimming */
body.p4.night .ac-case {
  fill: #0d1527 !important;
  stroke: #1e293b !important;
}
body.p4.night .ac-carbon-bar {
  fill: #020617 !important;
}
body.p4.night .ac-display-bg {
  fill: #020617 !important;
  stroke: #1e3a8a !important;
}
body.p4.night .ac-temp-text {
  fill: #1e3a8a !important;
}
body.p4.night .ac-led-strip {
  stroke: #1e3a8a !important;
  animation: none !important;
}
body.p4.night .ac-wind-group {
  opacity: 0.12;
}

/* Relaxed mode overrides for interactive items */
body.relaxed-mode .mug-steam,
body.relaxed-mode .p4-c1-mug,
body.relaxed-mode .lamp-light-beam,
body.relaxed-mode .calendar-pages,
body.relaxed-mode .globe-sphere-group,
body.relaxed-mode .folder-paper,
body.relaxed-mode .clock-hand-sec,
body.relaxed-mode .clock-hands,
body.relaxed-mode .clock-internal-gears,
body.relaxed-mode .clock-gear-left,
body.relaxed-mode .clock-gear-right,
body.relaxed-mode .frame-shine,
body.relaxed-mode .frame-ribbons,
body.relaxed-mode .frame-sparkle,
body.relaxed-mode .ac-louver,
body.relaxed-mode .ac-wind,
body.relaxed-mode .ac-led-strip,
body.relaxed-mode .ac-fan-blade,
body.relaxed-mode .ac-snow,
body.relaxed-mode .p4-c1-clock,
body.relaxed-mode .p4-c1-frame,
body.relaxed-mode .p4-c1-ac {
  animation: none !important;
  transform: none !important;
  filter: none !important;
}

/* ==========================================================================
   BUSY MODE SPECIFIC STYLES & OVERLOAD ANIMATIONS
   ========================================================================== */

/* Show background in busy mode too */
body.p4.busy-mode .p4-c1-available-bg {
  opacity: 1;
}
body.p4.busy-mode .p4-c1-available-elements {
  display: none !important;
}

/* Toggle Available vs. Busy elements display */
body.p4.available-mode .p4-c1-busy-only {
  display: none !important;
}
body.p4.busy-mode .p4-c1-employee {
  display: none !important;
}
body.p4.busy-mode .p4-c1-imac-display-content {
  display: none !important;
}
body.p4.busy-mode .p4-c1-resting-phone {
  display: none !important;
}

/* Day vs. Night Busy displays */
body.p4.day.busy-mode .ac-monitor-logs-night,
body.p4.day.busy-mode .p4-c1-imac-busy-night,
body.p4.day.busy-mode .p4-c1-busy-night-workers {
  display: none !important;
}
body.p4.night.busy-mode .ac-monitor-logs-day,
body.p4.night.busy-mode .p4-c1-imac-busy-day,
body.p4.night.busy-mode .p4-c1-busy-day-workers {
  display: none !important;
}

/* Night Busy Mode Dimming / Styling */
body.p4.night.busy-mode .p4-c1-extra-monitor .ac-case {
  fill: #0d1527 !important;
  stroke: #1e293b !important;
}
body.p4.night.busy-mode .p4-c1-extra-laptop path {
  fill: #1e293b !important;
}
body.p4.night.busy-mode .p4-c1-stacked-docs path,
body.p4.night.busy-mode .p4-c1-stacked-docs polygon {
  fill-opacity: 0.3;
}

/* --- day busy worker 1 frantic typing blur --- */
body.p4.day.busy-mode:not(.relaxed-mode) .p4-c1-frantic-arm.a1 {
  transform-origin: 580px 390px;
  animation: p4C1FranticType1 0.14s infinite alternate ease-in-out;
}
body.p4.day.busy-mode:not(.relaxed-mode) .p4-c1-frantic-arm.a2 {
  transform-origin: 580px 390px;
  animation: p4C1FranticType2 0.11s infinite alternate ease-in-out;
  animation-delay: -0.04s;
}
body.p4.day.busy-mode:not(.relaxed-mode) .p4-c1-frantic-arm.a3 {
  transform-origin: 580px 390px;
  animation: p4C1FranticType3 0.16s infinite alternate ease-in-out;
  animation-delay: -0.08s;
}

@keyframes p4C1FranticType1 {
  0% { transform: translateY(0) rotate(0deg); opacity: 0.9; }
  100% { transform: translateY(-4px) rotate(-3deg); opacity: 0.3; }
}
@keyframes p4C1FranticType2 {
  0% { transform: translateY(-2px) rotate(2deg); opacity: 0.2; }
  100% { transform: translateY(3px) rotate(-1deg); opacity: 0.9; }
}
@keyframes p4C1FranticType3 {
  0% { transform: translateY(3px) rotate(-4deg); opacity: 0.3; }
  100% { transform: translateY(-3px) rotate(3deg); opacity: 0.8; }
}

/* --- day busy worker 2 frantic writing --- */
body.p4.day.busy-mode:not(.relaxed-mode) .p4-c1-writing-arm-group {
  transform-origin: 850px 410px;
  animation: p4C1WritingFrantic 0.15s infinite alternate ease-in-out;
}
@keyframes p4C1WritingFrantic {
  0% { transform: rotate(0deg) translate(0, 0); }
  100% { transform: rotate(-5deg) translate(-2px, -3px); }
}

/* --- flying papers --- */
body.p4.day.busy-mode:not(.relaxed-mode) .p4-c1-fly-paper.fp1 {
  animation: p4C1FlyPaper1 5s infinite linear;
}
body.p4.day.busy-mode:not(.relaxed-mode) .p4-c1-fly-paper.fp2 {
  animation: p4C1FlyPaper2 7s infinite linear;
  animation-delay: -2s;
}
@keyframes p4C1FlyPaper1 {
  0% { transform: translate(0, 0) rotate(0deg); opacity: 0; }
  10% { opacity: 0.85; }
  90% { opacity: 0.85; }
  100% { transform: translate(-80px, 90px) rotate(-50deg); opacity: 0; }
}
@keyframes p4C1FlyPaper2 {
  0% { transform: translate(0, 0) rotate(0deg); opacity: 0; }
  15% { opacity: 0.8; }
  85% { opacity: 0.8; }
  100% { transform: translate(-100px, 120px) rotate(65deg); opacity: 0; }
}

/* --- display warning flashing --- */
body.p4.day.busy-mode:not(.relaxed-mode) .p4-c1-warn-blink {
  animation: p4C1WarnBlink 0.5s infinite alternate steps(1);
}
@keyframes p4C1WarnBlink {
  0% { fill: #ef4444; opacity: 1; }
  100% { fill: #ffffff; opacity: 0.35; }
}

body.p4.day.busy-mode:not(.relaxed-mode) .p4-c1-alert-dot {
  animation: p4C1AlertDotBlink 0.4s infinite alternate ease-in-out;
}
@keyframes p4C1AlertDotBlink {
  0% { fill: #ef4444; filter: drop-shadow(0 0 1px #ef4444); }
  100% { fill: #f59e0b; filter: drop-shadow(0 0 5px #fbbf24); }
}

/* --- night busy worker Zzz floating & origins --- */
body.p4.night.busy-mode:not(.relaxed-mode) .p4-c1-zzz.z1 {
  animation: p4C1ZzzFloat1 3.5s infinite linear;
}
body.p4.night.busy-mode:not(.relaxed-mode) .p4-c1-zzz.z2 {
  animation: p4C1ZzzFloat2 3.5s infinite linear;
  animation-delay: 1.1s;
}
body.p4.night.busy-mode:not(.relaxed-mode) .p4-c1-zzz.z3 {
  animation: p4C1ZzzFloat3 3.5s infinite linear;
  animation-delay: 2.2s;
}

/* Worker 1 (Manager) Zzz transform origins */
.p4-c1-worker1-night .z1 { transform-origin: 375px 410px; }
.p4-c1-worker1-night .z2 { transform-origin: 365px 390px; }
.p4-c1-worker1-night .z3 { transform-origin: 355px 365px; }

/* Worker 2 (Assistant) Zzz transform origins */
.p4-c1-worker2-night .z1 { transform-origin: 895px 300px; }
.p4-c1-worker2-night .z2 { transform-origin: 905px 285px; }
.p4-c1-worker2-night .z3 { transform-origin: 915px 270px; }

/* Worker 4 (Right) Zzz transform origins */
.p4-c1-w4-zzz-group .z1,
.p4-c1-worker4-night .z1 { transform-origin: 980px 310px; }
.p4-c1-w4-zzz-group .z2,
.p4-c1-worker4-night .z2 { transform-origin: 990px 295px; }
.p4-c1-w4-zzz-group .z3,
.p4-c1-worker4-night .z3 { transform-origin: 1000px 275px; }

/* Wobbly drift snooze keyframes */
@keyframes p4C1ZzzFloat1 {
  0% { transform: translate(0, 0) scale(0.4); opacity: 0; }
  20% { transform: translate(-4px, -10px) scale(0.7); opacity: 0.8; }
  50% { transform: translate(6px, -24px) scale(0.95); opacity: 0.9; }
  75% { transform: translate(-8px, -38px) scale(1.15); opacity: 0.5; }
  100% { transform: translate(4px, -50px) scale(1.3); opacity: 0; }
}
@keyframes p4C1ZzzFloat2 {
  0% { transform: translate(0, 0) scale(0.4); opacity: 0; }
  20% { transform: translate(4px, -10px) scale(0.7); opacity: 0.8; }
  50% { transform: translate(-6px, -26px) scale(1.0); opacity: 0.9; }
  75% { transform: translate(7px, -40px) scale(1.2); opacity: 0.5; }
  100% { transform: translate(-4px, -54px) scale(1.35); opacity: 0; }
}
@keyframes p4C1ZzzFloat3 {
  0% { transform: translate(0, 0) scale(0.4); opacity: 0; }
  20% { transform: translate(-5px, -12px) scale(0.75); opacity: 0.8; }
  50% { transform: translate(7px, -28px) scale(1.05); opacity: 0.9; }
  75% { transform: translate(-9px, -44px) scale(1.25); opacity: 0.5; }
  100% { transform: translate(5px, -60px) scale(1.4); opacity: 0; }
}

/* Continuous snooze breathing animations for workers */
body.p4.night.busy-mode:not(.relaxed-mode) .p4-c1-worker1-night:not(.active):not(.ending) {
  transform-origin: 507px 450px;
  animation: p4C1Worker1Snooze 5s infinite ease-in-out;
}
@keyframes p4C1Worker1Snooze {
  0%, 100% { transform: scale(1) translateY(0); }
  50% { transform: scale(1.015) translateY(1px); }
}
body.p4.night.busy-mode:not(.relaxed-mode) .p4-c1-worker1-night:not(.active):not(.ending) .p4-c1-sleeping-head-group {
  transform-origin: 410px 440px;
  animation: p4C1Worker1HeadSnooze 5s infinite ease-in-out;
}
@keyframes p4C1Worker1HeadSnooze {
  0%, 100% { transform: rotate(0); }
  50% { transform: rotate(2deg) translate(0.5px, 0.5px); }
}

body.p4.night.busy-mode:not(.relaxed-mode) .p4-c1-worker2-night:not(.active):not(.ending) {
  transform-origin: 887px 430px;
  animation: p4C1Worker2Snooze 4.8s infinite ease-in-out;
}
@keyframes p4C1Worker2Snooze {
  0%, 100% { transform: scale(1) translateY(0); }
  50% { transform: scale(1.008) translateY(1.2px); }
}

/* --- night busy worker 2 head nodding --- */
body.p4.night.busy-mode:not(.relaxed-mode) .p4-c1-nodding-head {
  transform-origin: 870px 380px;
  animation: p4C1HeadNod 4s infinite ease-in-out;
}
@keyframes p4C1HeadNod {
  0%, 100% { transform: rotate(0deg); }
  45% { transform: rotate(14deg) translateY(1.8px); }
  60% { transform: rotate(16deg) translateY(2.5px); }
  75% { transform: rotate(4deg); }
}

/* --- dim screen digital clock blinking --- */
body.p4.night.busy-mode:not(.relaxed-mode) .p4-c1-clock-blink {
  animation: p4C1ClockBlink 1s infinite alternate steps(1);
}
@keyframes p4C1ClockBlink {
  0% { fill: #ef4444; opacity: 1; }
  100% { fill: #ef4444; opacity: 0.25; }
}

body.p4.night.busy-mode:not(.relaxed-mode) .p4-c1-night-progress {
  animation: p4C1NightProgress 6s infinite ease-in-out alternate;
}
@keyframes p4C1NightProgress {
  0% { width: 10px; }
  100% { width: 80px; }
}

/* --- Enable continuous available animations in busy-mode too --- */

/* Day Busy Mode: High speed frantic loops */
body.p4.day.busy-mode:not(.relaxed-mode) .clock-hand-sec {
  animation: p4C1ClockSecSweep 4s infinite linear;
}
body.p4.day.busy-mode:not(.relaxed-mode) .clock-gear-left {
  animation: p4C1GearClockwise 2.5s infinite linear;
}
body.p4.day.busy-mode:not(.relaxed-mode) .clock-gear-right {
  animation: p4C1GearCounter 1.5s infinite linear;
}
body.p4.day.busy-mode:not(.relaxed-mode) .ac-fan-blade {
  transform-origin: 814px 92.5px;
  animation: p4C1AcFanSpin 1.2s infinite linear;
}
body.p4.day.busy-mode:not(.relaxed-mode) .ac-louver {
  transform-origin: 797px 114px;
  animation: p4C1AcLouverIdle 3s infinite ease-in-out alternate;
}
body.p4.day.busy-mode:not(.relaxed-mode) .ac-wind {
  animation: p4C1AcWindIdleFlow 1.5s infinite linear;
}
body.p4.day.busy-mode:not(.relaxed-mode) .ac-wind.w2 {
  animation-delay: 0.5s;
}
body.p4.day.busy-mode:not(.relaxed-mode) .ac-wind.w3 {
  animation-delay: 1.0s;
}
body.p4.day.busy-mode:not(.relaxed-mode) .ac-led-strip {
  animation: p4C1AcLedStripPulse 1.2s infinite alternate ease-in-out;
}
body.p4.day.busy-mode .p4-c1-frame {
  transform-origin: 637px 70px;
}
body.p4.day.busy-mode:not(.relaxed-mode) .p4-c1-frame {
  animation: p4C1FrameVibrateContinuous 1.5s infinite ease-in-out;
}
body.p4.day.busy-mode:not(.relaxed-mode) .p4-c1-frame .frame-shine.fs1 {
  animation: p4C1FrameGlareWave 4s infinite ease-in-out;
}
body.p4.day.busy-mode:not(.relaxed-mode) .p4-c1-frame .frame-shine.fs2 {
  animation: p4C1FrameGlareWave 4s infinite ease-in-out;
  animation-delay: 2s;
}

/* Night Busy Mode: Dragging sleepy loops */
body.p4.night.busy-mode:not(.relaxed-mode) .clock-hand-sec {
  animation: p4C1ClockSecSweep 12s infinite linear;
}
body.p4.night.busy-mode:not(.relaxed-mode) .clock-gear-left {
  animation: p4C1GearClockwise 5s infinite linear;
}
body.p4.night.busy-mode:not(.relaxed-mode) .clock-gear-right {
  animation: p4C1GearCounter 3.5s infinite linear;
}
body.p4.night.busy-mode .ac-temp-text.t24 {
  display: block !important;
  fill: #1e3a8a !important;
}
body.p4.night.busy-mode .ac-temp-text.t16 {
  display: none !important;
}
body.p4.night.busy-mode:not(.relaxed-mode) .ac-fan-blade {
  transform-origin: 814px 92.5px;
  animation: p4C1AcFanSpin 8s infinite linear;
}
body.p4.night.busy-mode:not(.relaxed-mode) .ac-louver {
  transform-origin: 797px 114px;
  animation: p4C1AcLouverIdle 8s infinite ease-in-out alternate;
}
body.p4.night.busy-mode:not(.relaxed-mode) .ac-wind {
  animation: p4C1AcWindIdleFlow 6s infinite linear;
  opacity: 0.15;
}
body.p4.night.busy-mode:not(.relaxed-mode) .ac-wind.w2 {
  animation-delay: 2.0s;
}
body.p4.night.busy-mode:not(.relaxed-mode) .ac-wind.w3 {
  animation-delay: 4.0s;
}
body.p4.night.busy-mode:not(.relaxed-mode) .ac-led-strip {
  animation: none !important;
  stroke: #1e3a8a !important;
}
body.p4.night.busy-mode .p4-c1-frame {
  transform-origin: 637px 70px;
}
body.p4.night.busy-mode:not(.relaxed-mode) .p4-c1-frame {
  animation: p4C1FrameSleepySwayContinuous 6s infinite ease-in-out;
}
body.p4.night.busy-mode:not(.relaxed-mode) .p4-c1-frame .frame-shine.fs1 {
  animation: p4C1FrameGlareWave 10s infinite ease-in-out;
}
body.p4.night.busy-mode:not(.relaxed-mode) .p4-c1-frame .frame-shine.fs2 {
  animation: p4C1FrameGlareWave 10s infinite ease-in-out;
  animation-delay: 5s;
}

@keyframes p4C1FrameVibrateContinuous {
  0%, 100% { transform: rotate(0deg) translate(0, 0); }
  20% { transform: rotate(0.4deg) translate(-0.3px, 0.2px); }
  40% { transform: rotate(-0.3deg) translate(0.3px, -0.2px); }
  60% { transform: rotate(0.3deg) translate(-0.2px, -0.3px); }
  80% { transform: rotate(-0.4deg) translate(0.2px, 0.3px); }
}
@keyframes p4C1FrameSleepySwayContinuous {
  0%, 100% { transform: rotate(0deg); }
  50% { transform: rotate(1.2deg); }
}

body.p4.day.busy-mode:not(.relaxed-mode) .mug-steam.s1 {
  animation: p4C1MugSteamWave1 2.2s infinite linear;
}
body.p4.day.busy-mode:not(.relaxed-mode) .mug-steam.s2 {
  animation: p4C1MugSteamWave2 2.2s infinite linear;
  animation-delay: 1.1s;
}
body.p4.day.busy-mode:not(.relaxed-mode) .p4-c1-mug {
  animation: p4C1MugHeatGlow 4s infinite ease-in-out alternate;
}
body.p4.day.busy-mode:not(.relaxed-mode) .lamp-light-beam {
  animation: p4C1LampShimmerDay 4s infinite ease-in-out alternate;
}
body.p4.night.busy-mode:not(.relaxed-mode) .lamp-light-beam {
  animation: p4C1LampShimmerNight 3s infinite ease-in-out alternate;
}

body.p4.day.busy-mode:not(.relaxed-mode) .leaf1 {
  transform-origin: 70px 470px;
  animation: p4C1PlantSway1 7s infinite ease-in-out alternate;
}
body.p4.day.busy-mode:not(.relaxed-mode) .leaf2 {
  transform-origin: 70px 470px;
  animation: p4C1PlantSway2 8s infinite ease-in-out alternate;
}
body.p4.day.busy-mode:not(.relaxed-mode) .leaf3 {
  transform-origin: 70px 470px;
  animation: p4C1PlantSway1 6s infinite ease-in-out alternate;
  animation-delay: -1.5s;
}
body.p4.day.busy-mode:not(.relaxed-mode) .leaf4 {
  transform-origin: 70px 470px;
  animation: p4C1PlantSway2 7.5s infinite ease-in-out alternate;
  animation-delay: -2s;
}
body.p4.day.busy-mode:not(.relaxed-mode) .leaf5 {
  transform-origin: 70px 470px;
  animation: p4C1PlantSway1 9s infinite ease-in-out alternate;
  animation-delay: -0.5s;
}

body.p4.day.busy-mode:not(.relaxed-mode) .p4-c1-folder .folder-paper {
  transform-origin: 1070px 540px;
  animation: p4C1PaperFlutter 5s infinite ease-in-out;
}
body.p4.day.busy-mode:not(.relaxed-mode) .calendar-pages {
  transform-origin: 1125px 573px;
  animation: p4C1CalendarBreeze 6s infinite ease-in-out;
}
body.p4.day.busy-mode:not(.relaxed-mode) .globe-sphere-group {
  transform-origin: 1005px 566px;
  animation: p4C1GlobeOrbit 35s infinite linear;
}

/* Show/hide for monitor 3, workers 3 & 4 and phone components */
body.p4.day.busy-mode .p4-c1-monitor3-night,
body.p4.day.busy-mode .p4-c1-worker3-night,
body.p4.day.busy-mode .p4-c1-worker4-night,
body.p4.day.busy-mode .p4-c1-alarm-clock,
body.p4.day.busy-mode .p4-c1-late-steam {
  display: none !important;
}
body.p4.night.busy-mode .p4-c1-monitor3-day,
body.p4.night.busy-mode .p4-c1-worker3-day,
body.p4.night.busy-mode .p4-c1-worker4-day,
body.p4.night.busy-mode .phone-ring-waves {
  display: none !important;
}

/* Night Busy styling overrides for monitors, folders and cups */
body.p4.night.busy-mode .p4-c1-monitor3 .ac-case {
  fill: #0d1527 !important;
  stroke: #1e293b !important;
}
body.p4.night.busy-mode .p4-c1-ringing-phone .phone-base {
  fill: #1e293b !important;
}
body.p4.night.busy-mode .p4-c1-ringing-phone .phone-receiver {
  fill: #1e293b !important;
}
body.p4.night.busy-mode .p4-c1-coffee-cups path {
  fill-opacity: 0.4;
  stroke: #1e293b !important;
}

/* --- phone ringing --- */
body.p4.day.busy-mode:not(.relaxed-mode) .p4-c1-ringing-phone {
  transform-origin: 401px 480px;
  animation: p4C1PhoneRing 0.15s infinite alternate ease-in-out;
}
@keyframes p4C1PhoneRing {
  0% { transform: rotate(-3deg) scale(1); }
  100% { transform: rotate(3deg) scale(1.05); }
}
body.p4.day.busy-mode:not(.relaxed-mode) .phone-ring-waves .ring-wave {
  animation: p4C1RingWave 0.3s infinite ease-in-out alternate;
}
@keyframes p4C1RingWave {
  0% { opacity: 0.2; transform: scale(0.95); }
  100% { opacity: 1; transform: scale(1.1); }
}

/* --- worker 3 day typing & arm movements --- */
body.p4.day.busy-mode:not(.relaxed-mode) .p4-c1-w3-arm-left {
  transform-origin: 710px 410px;
  animation: p4C1Worker3Type 0.12s infinite alternate ease-in-out;
}
body.p4.day.busy-mode:not(.relaxed-mode) .p4-c1-w3-phone-arm {
  transform-origin: 770px 410px;
  animation: p4C1Worker3PhoneArm 2s infinite alternate ease-in-out;
}
@keyframes p4C1Worker3Type {
  0% { transform: translateY(0) rotate(0deg); opacity: 0.95; }
  100% { transform: translateY(-3px) rotate(-2deg); opacity: 0.4; }
}
@keyframes p4C1Worker3PhoneArm {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(-4deg) translateY(-2px); }
}

/* --- worker 4 day wobbly folders & panic --- */
body.p4.day.busy-mode:not(.relaxed-mode) .p4-c1-wobbly-folders {
  transform-origin: 900px 360px;
  animation: p4C1FolderStackWobble 0.8s infinite ease-in-out alternate;
}
@keyframes p4C1FolderStackWobble {
  0% { transform: rotate(-2deg) translateX(-1px); }
  100% { transform: rotate(4deg) translateX(2px); }
}
body.p4.day.busy-mode:not(.relaxed-mode) .p4-c1-worker4-day {
  animation: p4C1Worker4Panic 3s infinite ease-in-out alternate;
}
@keyframes p4C1Worker4Panic {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-1.5px); }
}

/* --- flying papers expansion --- */
body.p4.day.busy-mode:not(.relaxed-mode) .p4-c1-fly-paper.fp3 {
  animation: p4C1FlyPaper3 6s infinite linear;
  animation-delay: -1s;
}
body.p4.day.busy-mode:not(.relaxed-mode) .p4-c1-fly-paper.fp4 {
  animation: p4C1FlyPaper4 4.5s infinite linear;
  animation-delay: -3s;
}
body.p4.day.busy-mode:not(.relaxed-mode) .p4-c1-fly-paper.fp5 {
  animation: p4C1FlyPaper5 5.5s infinite linear;
  animation-delay: -1.5s;
}
@keyframes p4C1FlyPaper3 {
  0% { transform: translate(0, 0) rotate(0deg); opacity: 0; }
  15% { opacity: 0.9; }
  85% { opacity: 0.9; }
  100% { transform: translate(-120px, 80px) rotate(-35deg); opacity: 0; }
}
@keyframes p4C1FlyPaper4 {
  0% { transform: translate(0, 0) rotate(0deg); opacity: 0; }
  10% { opacity: 0.75; }
  90% { opacity: 0.75; }
  100% { transform: translate(-90px, 140px) rotate(45deg); opacity: 0; }
}
@keyframes p4C1FlyPaper5 {
  0% { transform: translate(0, 0) rotate(0deg); opacity: 0; }
  20% { opacity: 0.8; }
  80% { opacity: 0.8; }
  100% { transform: translate(-70px, 110px) rotate(-60deg); opacity: 0; }
}

/* --- inbox badge blink --- */
body.p4.day.busy-mode:not(.relaxed-mode) .p4-c1-inbox-badge {
  animation: p4C1InboxBadgeFlash 0.6s infinite alternate steps(1);
}
@keyframes p4C1InboxBadgeFlash {
  0% { fill: #ef4444; }
  100% { fill: #f59e0b; }
}

/* --- worker 3 night head yawn & nod --- */
@keyframes p4C1Worker3Yawn {
  0%, 100% { transform: rotate(0deg); }
  40% { transform: rotate(-8deg) translateY(1px); }
  55% { transform: rotate(-10deg) translateY(1.5px); }
  70% { transform: rotate(-3deg); }
}

/* --- worker 4 night slumped breathing & rising Zzz --- */
body.p4.night.busy-mode:not(.relaxed-mode) .p4-c1-worker4-night:not(.active):not(.ending) {
  animation: p4C1Worker4Snooze 4.5s infinite ease-in-out;
}
@keyframes p4C1Worker4Snooze {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(1.5px) scale(0.99); }
}
body.p4.night.busy-mode:not(.relaxed-mode) .p4-c1-worker4-night:not(.active):not(.ending) .p4-c1-face-folder {
  transform-origin: 955px 348px;
  animation: p4C1Worker4FolderSnooze 4.5s infinite ease-in-out;
}
@keyframes p4C1Worker4FolderSnooze {
  0%, 100% { transform: rotate(0) translateY(0); }
  50% { transform: rotate(3deg) translateY(-1px); }
}

/* --- digital clock blink --- */
body.p4.night.busy-mode:not(.relaxed-mode) .p4-c1-alarm-blink {
  animation: p4C1AlarmBlink 1.2s infinite alternate steps(1);
}
@keyframes p4C1AlarmBlink {
  0% { fill: #f43f5e; opacity: 1; }
  100% { fill: #f43f5e; opacity: 0.3; }
}

/* --- late steam rising --- */
body.p4.night.busy-mode:not(.relaxed-mode) .p4-c1-late-steam {
  animation: p4C1LateSteam 2.5s infinite linear;
}
@keyframes p4C1LateSteam {
  0% { transform: translate(0, 0) scale(0.8); opacity: 0; }
  50% { opacity: 0.7; }
  100% { transform: translate(-3px, -12px) scale(1.2); opacity: 0; }
}

/* --- night monitor 3 progress bar --- */
body.p4.night.busy-mode:not(.relaxed-mode) .p4-c1-night-progress2 {
  animation: p4C1NightProgress2 8s infinite ease-in-out alternate;
}
@keyframes p4C1NightProgress2 {
  0% { width: 10px; }
  100% { width: 100px; }
}

/* --- 15 Brand New Busy Interactive Elements Styling --- */

/* Disable original Available Mode elements in Busy Mode (excluding Clock, Frame, AC) */
body.p4.busy-mode .p4-c1-interactive:not(.p4-c1-clock):not(.p4-c1-frame):not(.p4-c1-ac),
body.p4.busy-mode .p4-c1-imac,
body.p4.busy-mode .p4-c1-keyboard {
  cursor: default !important;
  pointer-events: none !important;
}

/* --- Revamped Busy Mode Active/Ending Animations for Clock, Frame, AC --- */

/* Clock Active Busy */
body.p4.busy-mode .p4-c1-clock.active {
  transform-origin: 520px 110px;
  animation: p4C1ClockActiveFrantic 2.5s infinite alternate ease-in-out, p4C1ClockActiveRumble 0.15s infinite !important;
}
body.p4.busy-mode .p4-c1-clock.active .clock-hand-sec {
  transform-origin: 520px 110px;
  animation: p4C1ClockSecActiveBusy 2.5s infinite linear !important;
}
body.p4.busy-mode .p4-c1-clock.active .clock-gear-left {
  animation: p4C1GearClockwise 0.25s infinite linear !important;
}
body.p4.busy-mode .p4-c1-clock.active .clock-gear-right {
  animation: p4C1GearCounter 0.2s infinite linear !important;
}

/* Clock Ending Settle Busy */
body.p4.busy-mode .p4-c1-clock.ending .clock-gear-left {
  animation: p4C1GearSettleCW 1.5s cubic-bezier(0.25, 0.8, 0.25, 1.2) forwards !important;
}
body.p4.busy-mode .p4-c1-clock.ending .clock-gear-right {
  animation: p4C1GearSettleCCW 1.5s cubic-bezier(0.25, 0.8, 0.25, 1.2) forwards !important;
}

/* Frame Active Busy */
body.p4.busy-mode .p4-c1-frame.active {
  transform-origin: 637px 70px;
  animation: p4C1FrameActiveRattle 2.5s infinite alternate ease-in-out, p4C1FrameActiveRumble 0.1s infinite !important;
}
body.p4.busy-mode .p4-c1-frame.active .frame-seal {
  animation: p4C1SealActivePulseRed 0.3s infinite alternate ease-in-out !important;
}

/* Frame Ending Settle Busy */
body.p4.busy-mode .p4-c1-frame.ending {
  transform-origin: 637px 70px;
  animation: p4C1FrameSettleDamp 1.5s cubic-bezier(0.25, 0.8, 0.25, 1.25) forwards !important;
}

/* AC Active Busy */
body.p4.busy-mode .p4-c1-ac.active .ac-temp-text.t24,
body.p4.busy-mode .p4-c1-ac.active .ac-temp-text.t16 {
  display: none !important;
}
body.p4.busy-mode .p4-c1-ac.active .ac-temp-text.t-err {
  display: block !important;
  fill: #ef4444 !important;
  animation: p4C1AcTempFlash 0.3s infinite alternate ease-in-out;
}
body.p4.busy-mode .p4-c1-ac.active .ac-led-strip {
  stroke: #ef4444 !important;
  animation: p4C1AcLedStripActiveRed 0.2s infinite alternate ease-in-out !important;
}
body.p4.busy-mode .p4-c1-ac.active .ac-louver {
  transform-origin: 797px 114px;
  transform: rotate(38deg) !important;
  animation: p4C1AcLouverShudder 0.08s infinite !important;
}
body.p4.busy-mode .p4-c1-ac.active .ac-fan-blade {
  animation: p4C1AcFanSpin 0.15s infinite linear !important;
}
body.p4.busy-mode .p4-c1-ac.active .ac-wind {
  animation: p4C1AcWindTurbulent 0.4s infinite linear !important;
  stroke: #3b82f6 !important;
}
body.p4.busy-mode .p4-c1-ac.active .ac-snow {
  animation: p4C1AcSnowFall 1.5s infinite linear !important;
}

/* Keyframes for revamped top-row busy mode active animations */
@keyframes p4C1ClockActiveFrantic {
  0% { filter: drop-shadow(0 0 2px rgba(239, 68, 68, 0.4)) brightness(1); }
  100% { filter: drop-shadow(0 0 15px rgba(239, 68, 68, 1)) brightness(1.2); }
}
@keyframes p4C1ClockActiveRumble {
  0%, 100% { transform: scale(1.08) translate(0, 0); }
  25% { transform: scale(1.08) translate(-1px, 1px) rotate(-1deg); }
  50% { transform: scale(1.08) translate(1px, -1px) rotate(1deg); }
  75% { transform: scale(1.08) translate(-1px, -1px) rotate(0.5deg); }
}
@keyframes p4C1ClockSecActiveBusy {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(1440deg); }
}
@keyframes p4C1FrameActiveRattle {
  0% { filter: drop-shadow(0 0 2px rgba(239, 68, 68, 0.3)); }
  100% { filter: drop-shadow(0 0 12px rgba(239, 68, 68, 0.9)); }
}
@keyframes p4C1FrameActiveRumble {
  0%, 100% { transform: scale(1.06) translate(0, 0); }
  33% { transform: scale(1.06) translate(-1.5px, 0.5px) rotate(-2deg); }
  66% { transform: scale(1.06) translate(1.5px, -0.5px) rotate(2deg); }
}
@keyframes p4C1SealActivePulseRed {
  0% { fill: #ef4444 !important; opacity: 0.5; }
  100% { fill: #f43f5e !important; opacity: 1; filter: drop-shadow(0 0 4px #ef4444); }
}
@keyframes p4C1AcLedStripActiveRed {
  0% { opacity: 0.4; filter: drop-shadow(0 0 1px #ef4444); }
  100% { opacity: 1; filter: drop-shadow(0 0 6px #ef4444); }
}
@keyframes p4C1AcLouverShudder {
  0%, 100% { transform: rotate(38deg) translate(0, 0); }
  50% { transform: rotate(36deg) translate(0.5px, -0.5px); }
}

/* 1. Extra Vertical Coding Monitor */
.p4-c1-extra-monitor {
  transform-origin: 372px 310px;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.3s ease;
}
.p4-c1-extra-monitor:hover {
  transform: scale(1.05);
  filter: drop-shadow(0 0 10px rgba(34, 197, 94, 0.7));
}
.p4-c1-extra-monitor.active {
  animation: extraMonitorShake 0.4s ease;
}
.p4-c1-extra-monitor.active .ac-monitor-logs-day line {
  stroke: #ef4444 !important;
  stroke-dasharray: none !important;
  animation: p4C1LineFlash 0.1s infinite alternate;
}
.p4-c1-extra-monitor.active .p4-c1-alert-dot {
  fill: #f59e0b !important;
  animation: p4C1AlertFlash 0.1s infinite alternate;
}
.p4-c1-extra-monitor.ending {
  animation: extraMonitorSettle 0.6s ease;
}

@keyframes extraMonitorShake {
  0%, 100% { transform: scale(1.05) translate(0, 0); }
  20%, 60% { transform: scale(1.05) translate(-2px, 3px) rotate(-1deg); }
  40%, 80% { transform: scale(1.05) translate(3px, -2px) rotate(1deg); }
}
@keyframes extraMonitorSettle {
  0% { transform: scale(1.05) rotate(1deg); }
  50% { transform: scale(0.97) rotate(-0.5deg); }
  100% { transform: scale(1) rotate(0deg); }
}
@keyframes p4C1LineFlash {
  0% { opacity: 0.3; }
  100% { opacity: 1; }
}
@keyframes p4C1AlertFlash {
  0% { fill: #ef4444; filter: drop-shadow(0 0 2px #ef4444); }
  100% { fill: #eab308; filter: drop-shadow(0 0 8px #eab308); }
}

/* 2. Additional Laptop on Left Desk */
.p4-c1-extra-laptop {
  transform-origin: 115px 483px;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.3s ease;
}
.p4-c1-extra-laptop:hover {
  transform: scale(1.08);
  filter: drop-shadow(0 0 8px rgba(6, 182, 212, 0.6));
}
.p4-c1-extra-laptop.active {
  animation: extraLaptopJump 0.4s ease;
}
.p4-c1-extra-laptop.active .p4-c1-laptop-wave {
  stroke: #a855f7 !important;
  stroke-width: 2px !important;
  animation: laptopWaveFrantic 0.2s infinite linear;
}
.p4-c1-extra-laptop.ending {
  animation: extraLaptopSettle 0.5s ease;
}

@keyframes extraLaptopJump {
  0%, 100% { transform: scale(1.08) translateY(0); }
  50% { transform: scale(1.08) translateY(-6px) rotate(-2deg); }
}
@keyframes extraLaptopSettle {
  0% { transform: scale(1.08) translateY(-2px); }
  50% { transform: scale(0.95) translateY(1px); }
  100% { transform: scale(1) translateY(0); }
}
@keyframes laptopWaveFrantic {
  0% { stroke-dashoffset: 0; stroke: #a855f7; }
  50% { stroke: #ec4899; }
  100% { stroke-dashoffset: -30; stroke: #06b6d4; }
}

/* 3. Horizontal Monitor 3 */
.p4-c1-monitor3 {
  transform-origin: 735px 360px;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.3s ease;
}
.p4-c1-monitor3:hover {
  transform: scale(1.04);
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.25));
}
.p4-c1-monitor3.active {
  animation: monitor3Pulse 0.4s ease;
}
.p4-c1-monitor3.active .p4-c1-m3-active-overlay {
  opacity: 1 !important;
  animation: overlayPulse 0.2s infinite alternate;
}
.p4-c1-monitor3.ending {
  animation: monitor3Settle 0.5s ease;
}
.p4-c1-monitor3.ending .p4-c1-m3-active-overlay {
  opacity: 0;
  transition: opacity 0.5s ease;
}

@keyframes monitor3Pulse {
  0%, 100% { transform: scale(1.04); }
  50% { transform: scale(1.08); }
}
@keyframes monitor3Settle {
  0% { transform: scale(1.04); }
  50% { transform: scale(0.98); }
  100% { transform: scale(1); }
}
@keyframes overlayPulse {
  0% { fill: #166534; }
  100% { fill: #15803d; }
}

/* 4. Ringing Desk Phone */
.p4-c1-ringing-phone {
  transform-origin: 401px 480px;
  transition: transform 0.3s ease, filter 0.3s ease;
}
.p4-c1-ringing-phone:hover {
  transform: scale(1.1) rotate(-2deg);
  filter: drop-shadow(0 2px 6px rgba(239, 68, 68, 0.4));
}
.p4-c1-ringing-phone.active {
  animation: phoneJump 0.3s infinite alternate ease-in-out;
}
.p4-c1-ringing-phone.active .phone-receiver {
  transform: translate(-10px, -20px) rotate(-45deg);
  transform-origin: 393px 468px;
  transition: transform 0.2s ease;
}
.p4-c1-ringing-phone.active .phone-call-bubble {
  opacity: 1 !important;
  animation: bubbleWiggle 0.4s infinite alternate ease-in-out;
}
.p4-c1-ringing-phone.ending {
  transform: scale(1);
  transition: transform 0.5s ease;
}
.p4-c1-ringing-phone.ending .phone-receiver {
  transform: translate(0, 0) rotate(0deg);
  transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}
.p4-c1-ringing-phone.ending .phone-call-bubble {
  opacity: 0;
  transition: opacity 0.4s ease;
}

@keyframes phoneJump {
  0% { transform: scale(1.1) translateY(0) rotate(-4deg); }
  100% { transform: scale(1.1) translateY(-8px) rotate(4deg); }
}
@keyframes bubbleWiggle {
  0% { transform: rotate(-3deg); }
  100% { transform: rotate(3deg); }
}

/* 5. Stacked Coffee Cups */
.p4-c1-coffee-cups {
  transform-origin: 297px 480px;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.p4-c1-coffee-cups:hover {
  transform: scale(1.15) rotate(5deg);
}
.p4-c1-coffee-cups.active {
  animation: coffeeCrazed 0.2s infinite ease-in-out;
}
.p4-c1-coffee-cups.active .p4-c1-late-steam {
  animation: coffeeSteamSpurt 0.5s infinite linear;
  stroke: #f472b6 !important;
}
.p4-c1-coffee-cups.ending {
  animation: coffeeSettle 0.6s ease;
}

@keyframes coffeeCrazed {
  0%, 100% { transform: scale(1.15) translate(0, 0) rotate(2deg); }
  25% { transform: scale(1.15) translate(-3px, -2px) rotate(-4deg); }
  75% { transform: scale(1.15) translate(3px, 1px) rotate(5deg); }
}
@keyframes coffeeSettle {
  0% { transform: scale(1.15) rotate(5deg); }
  50% { transform: scale(0.9) rotate(-3deg); }
  100% { transform: scale(1) rotate(0deg); }
}
@keyframes coffeeSteamSpurt {
  0% { transform: translate(0, 0) scale(1); opacity: 0.8; }
  100% { transform: translate(-15px, -35px) scale(2.8); opacity: 0; }
}

/* 6. Worker 1 (Manager) */
.p4-c1-worker1-day {
  transform-origin: 585px 390px;
  transition: transform 0.3s ease;
}
.p4-c1-worker1-day:hover {
  transform: scale(1.02);
}
.p4-c1-worker1-day.active {
  animation: worker1DayStress 0.15s infinite alternate ease-in-out;
}
.p4-c1-worker1-day.active .p4-c1-frantic-arm {
  animation: typingTurbulence 0.05s infinite alternate linear;
}
.p4-c1-worker1-day.ending {
  transform: scale(1);
  transition: transform 0.5s ease;
}

.p4-c1-worker1-night {
  transform-origin: 507px 450px;
  transition: transform 0.3s ease;
}
.p4-c1-worker1-night:hover {
  transform: scale(1.02);
}
.p4-c1-worker1-night.active {
  animation: worker1NightSigh 2.5s ease-in-out;
}
.p4-c1-worker1-night.active .p4-c1-zzz {
  animation: zzzOvertimeFlurry 0.6s infinite linear;
}
.p4-c1-worker1-night.ending {
  transform: scale(1);
  transition: transform 0.5s ease;
}

@keyframes worker1DayStress {
  0% { transform: translateY(0) scale(1.02); }
  100% { transform: translateY(-3px) scale(1.03) rotate(0.5deg); }
}
@keyframes typingTurbulence {
  0% { transform: translate(-2px, -3px) scaleY(1.1); }
  100% { transform: translate(3px, 2px) scaleY(0.9); }
}
@keyframes worker1NightSigh {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.04) translateY(-2px); }
}
@keyframes zzzOvertimeFlurry {
  0% { transform: translate(0,0) scale(0.6); opacity: 0; }
  50% { opacity: 1; }
  100% { transform: translate(-25px, -50px) scale(1.5); opacity: 0; }
}

/* 7. Worker 2 (Assistant) */
.p4-c1-worker2-day {
  transform-origin: 887px 430px;
  transition: transform 0.3s ease;
}
.p4-c1-worker2-day:hover {
  transform: scale(1.02);
}
.p4-c1-worker2-day.active {
  animation: worker2DayType 0.12s infinite alternate ease-in-out;
}
.p4-c1-worker2-day.active .p4-c1-writing-arm-group {
  animation: scribbleWildly 0.08s infinite alternate ease-in-out;
}
.p4-c1-worker2-day.ending {
  transform: scale(1);
  transition: transform 0.5s ease;
}

.p4-c1-worker2-night {
  transform-origin: 887px 430px;
  transition: transform 0.3s ease;
}
.p4-c1-worker2-night:hover {
  transform: scale(1.02);
}
.p4-c1-worker2-night.active {
  animation: worker2NightSnore 2.5s ease-in-out;
}
.p4-c1-worker2-night.active .p4-c1-nodding-head {
  animation: deepNodAsleep 0.8s infinite alternate ease-in-out;
}
.p4-c1-worker2-night.ending {
  transform: scale(1);
  transition: transform 0.5s ease;
}

@keyframes worker2DayType {
  0% { transform: translateY(0); }
  100% { transform: translateY(-2px) rotate(-0.5deg); }
}
@keyframes scribbleWildly {
  0% { transform: translate(-3px, -2px) rotate(-3deg); }
  100% { transform: translate(3px, 3px) rotate(4deg); }
}
@keyframes worker2NightSnore {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(3px); }
}
@keyframes deepNodAsleep {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(15deg) translateY(5px); }
}

/* 8. Worker 3 (Clerk) */
.p4-c1-worker3-day {
  transform-origin: 757px 430px;
  transition: transform 0.3s ease;
}
.p4-c1-worker3-day:hover {
  transform: scale(1.02);
}
.p4-c1-worker3-day.active {
  animation: worker3DayStress 0.15s infinite alternate ease-in-out;
}
.p4-c1-worker3-day.active .p4-c1-w3-phone-arm {
  animation: armShakePanic 0.1s infinite alternate;
}
.p4-c1-worker3-day.ending {
  transform: scale(1);
  transition: transform 0.5s ease;
}

.p4-c1-worker3-night {
  transform-origin: 757px 430px;
  transition: transform 0.3s ease;
}
.p4-c1-worker3-night:hover {
  transform: scale(1.02);
}
.p4-c1-worker3-night.active {
  animation: worker3NightYawn 2.5s ease-in-out;
}
.p4-c1-worker3-night.ending {
  transform: scale(1);
  transition: transform 0.5s ease;
}

@keyframes worker3DayStress {
  0% { transform: translateY(0); }
  100% { transform: translateY(-3px) rotate(0.8deg); }
}
@keyframes armShakePanic {
  0% { transform: rotate(0deg) translate(-2px, -1px); }
  100% { transform: rotate(-8deg) translate(3px, 2px); }
}
@keyframes worker3NightYawn {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.02) translateY(-1px); }
}
@keyframes yawnMouthStretch {
  0% { r: 3; }
  100% { r: 6.5; fill: #1e293b; }
}

/* 9. Worker 4 (Intern) */
.p4-c1-worker4-day {
  transform-origin: 967px 430px;
  transition: transform 0.3s ease;
}
.p4-c1-worker4-day:hover {
  transform: scale(1.02);
}
.p4-c1-worker4-day.active {
  animation: worker4DayPanic 0.2s infinite alternate;
}
.p4-c1-worker4-day.active .p4-c1-wobbly-folders {
  animation: stackToppling 0.3s infinite alternate ease-in-out;
}
.p4-c1-worker4-day.ending {
  transform: scale(1);
  transition: transform 0.5s ease;
}

.p4-c1-worker4-night {
  transform-origin: 967px 430px;
  transition: transform 0.3s ease;
}
.p4-c1-worker4-night:hover {
  transform: scale(1.02);
}
.p4-c1-worker4-night.active {
  animation: worker4NightOvertime 2.5s ease-in-out;
}
.p4-c1-worker4-night.active .p4-c1-face-folder {
  animation: faceFolderSlide 1.2s infinite alternate ease-in-out;
}
.p4-c1-worker4-night.ending {
  transform: scale(1);
  transition: transform 0.5s ease;
}

@keyframes worker4DayPanic {
  0% { transform: translateY(0) scale(1.02); }
  100% { transform: translateY(-4px) scale(1.02) rotate(-0.5deg); }
}
@keyframes stackToppling {
  0% { transform: rotate(-6deg) translateX(-4px); }
  100% { transform: rotate(12deg) translateX(6px); }
}
@keyframes worker4NightOvertime {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.02) translateY(2px); }
}
@keyframes faceFolderSlide {
  0% { transform: translate(0, 0) rotate(0deg); }
  100% { transform: translate(6px, 12px) rotate(8deg); }
}

/* 10. iMac Busy Screen Overlay */
.p4-c1-imac-busy-screen {
  transform-origin: 240px 308px;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.3s ease;
}
.p4-c1-imac-busy-screen:hover {
  transform: scale(1.03);
  filter: drop-shadow(0 0 10px rgba(239, 68, 68, 0.5));
}
.p4-c1-imac-busy-screen.active {
  animation: imacScreenPulse 0.4s ease;
}
.p4-c1-imac-busy-screen.active .p4-c1-imac-active-overlay {
  opacity: 1 !important;
  animation: databaseOverlayFlash 0.2s infinite alternate;
}
.p4-c1-imac-busy-screen.ending {
  animation: imacScreenSettle 0.5s ease;
}
.p4-c1-imac-busy-screen.ending .p4-c1-imac-active-overlay {
  opacity: 0;
  transition: opacity 0.5s ease;
}

@keyframes imacScreenPulse {
  0%, 100% { transform: scale(1.03); }
  50% { transform: scale(1.07); }
}
@keyframes imacScreenSettle {
  0% { transform: scale(1.03); }
  50% { transform: scale(0.98); }
  100% { transform: scale(1); }
}
@keyframes databaseOverlayFlash {
  0% { fill: #047857; }
  100% { fill: #065f46; }
}

/* 11. Paper Shredder */
.p4-c1-shredder {
  transform-origin: 1150px 490px;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.p4-c1-shredder:hover {
  transform: scale(1.1);
  filter: drop-shadow(0 0 6px rgba(34, 197, 94, 0.4));
}
.p4-c1-shredder.active {
  animation: shredderShake 0.15s infinite;
}
.p4-c1-shredder.active .shredder-paper {
  animation: paperFeedDown 2.5s cubic-bezier(0.55, 0.085, 0.68, 0.53) forwards;
}
.p4-c1-shredder.active .shredder-led {
  animation: ledAlertPulse 0.1s infinite alternate;
}
.p4-c1-shredder.active .shredder-strips {
  opacity: 1 !important;
  animation: stripWiggle 0.1s infinite alternate;
}
.p4-c1-shredder.ending {
  animation: shredderSettle 0.5s ease;
}
.p4-c1-shredder.ending .shredder-paper {
  transform: translateY(0);
}
.p4-c1-shredder.ending .shredder-strips {
  opacity: 0;
  transition: opacity 0.5s ease;
}

@keyframes shredderShake {
  0%, 100% { transform: scale(1.1) translate(0, 0); }
  50% { transform: scale(1.1) translate(-1px, 1.5px); }
}
@keyframes paperFeedDown {
  0% { transform: translateY(0); opacity: 1; }
  100% { transform: translateY(12px); opacity: 0; }
}
@keyframes ledAlertPulse {
  0% { fill: #ef4444; filter: drop-shadow(0 0 1px #ef4444); }
  100% { fill: #eab308; filter: drop-shadow(0 0 5px #eab308); }
}
@keyframes stripWiggle {
  0% { transform: skewX(-2deg); }
  100% { transform: skewX(2deg); }
}
@keyframes shredderSettle {
  0% { transform: scale(1.1); }
  50% { transform: scale(0.95); }
  100% { transform: scale(1); }
}

/* 12. Office Water Cooler */
.p4-c1-watercooler {
  transform-origin: 25px 440px;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.p4-c1-watercooler:hover {
  transform: scale(1.05) rotate(1deg);
  filter: drop-shadow(0 4px 6px rgba(0,0,0,0.15));
}
.p4-c1-watercooler.active {
  animation: coolerGargle 0.3s infinite alternate ease-in-out;
}
.p4-c1-watercooler.active .cooler-bubbles circle {
  opacity: 0.8 !important;
  animation: bubbleRiseUp 1s infinite linear;
}
.p4-c1-watercooler.active .cooler-bubbles .b2 {
  animation-delay: 0.3s;
}
.p4-c1-watercooler.active .cooler-bubbles .b3 {
  animation-delay: 0.6s;
}
.p4-c1-watercooler.active .cooler-stream {
  opacity: 0.95 !important;
  animation: waterPourEffect 0.15s infinite alternate;
}
.p4-c1-watercooler.active .cooler-cup {
  animation: cupWobbleFill 0.2s infinite;
}
.p4-c1-watercooler.ending {
  animation: coolerSettle 0.6s ease;
}
.p4-c1-watercooler.ending .cooler-stream {
  opacity: 0;
  transition: opacity 0.3s ease;
}

@keyframes coolerGargle {
  0% { transform: scale(1.05) rotate(0.5deg); }
  100% { transform: scale(1.05) rotate(-0.5deg); }
}
@keyframes bubbleRiseUp {
  0% { transform: translateY(15px) scale(0.5); opacity: 0; }
  50% { opacity: 0.9; }
  100% { transform: translateY(-25px) scale(1.2); opacity: 0; }
}
@keyframes waterPourEffect {
  0% { stroke-dasharray: 2, 4; stroke-dashoffset: 0; }
  100% { stroke-dasharray: 4, 2; stroke-dashoffset: 6; }
}
@keyframes cupWobbleFill {
  0%, 100% { transform: rotate(0deg) scale(1.05); }
  50% { transform: rotate(-3deg) scale(1.05); }
}
@keyframes coolerSettle {
  0% { transform: scale(1.05); }
  50% { transform: scale(0.97); }
  100% { transform: scale(1); }
}

/* 13. Desk Calculator */
.p4-c1-calculator {
  transform-origin: 461px 519px;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.p4-c1-calculator:hover {
  transform: scale(1.15);
}
.p4-c1-calculator.active {
  animation: calcMathFrantic 0.15s infinite alternate;
}
.p4-c1-calculator.active .calc-screen-text {
  fill: #1c1917 !important;
  animation: calcTextScroll 0.2s infinite steps(2);
}
.p4-c1-calculator.active rect[fill="#cbd5e1"] {
  fill: #a3e635 !important;
  transition: fill 0.1s ease;
}
.p4-c1-calculator.ending {
  animation: calcSettle 0.5s ease;
}

@keyframes calcMathFrantic {
  0% { transform: scale(1.15) rotate(-1deg); }
  100% { transform: scale(1.15) rotate(1deg) translateY(-2px); }
}
@keyframes calcTextScroll {
  0% { opacity: 0.9; }
  50% { opacity: 0.4; }
}
@keyframes calcSettle {
  0% { transform: scale(1.15); }
  50% { transform: scale(0.9); }
  100% { transform: scale(1); }
}

/* 14. Bulletin Board */
.p4-c1-bulletin {
  transform-origin: 915px 135px;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.p4-c1-bulletin:hover {
  transform: scale(1.04) rotate(-0.5deg);
  filter: drop-shadow(0 6px 12px rgba(0,0,0,0.2));
}
.p4-c1-bulletin.active {
  animation: boardThump 0.3s ease;
}
.p4-c1-bulletin.active .bulletin-note {
  transform-origin: center top;
  animation: notesFlapping 0.5s infinite alternate ease-in-out;
}
.p4-c1-bulletin.active .n2 {
  animation-delay: 0.12s;
}
.p4-c1-bulletin.active .n3 {
  animation-delay: 0.25s;
}
.p4-c1-bulletin.ending {
  animation: boardSettle 0.6s ease;
}

@keyframes boardThump {
  0% { transform: scale(1) translate(0, 0); }
  30% { transform: scale(1.06) translate(2px, -3px) rotate(1deg); }
  100% { transform: scale(1.04); }
}
@keyframes notesFlapping {
  0% { transform: skewX(-5deg) rotate(-5deg); }
  100% { transform: skewX(10deg) rotate(8deg); }
}
@keyframes boardSettle {
  0% { transform: scale(1.04); }
  50% { transform: scale(0.98) rotate(0.5deg); }
  100% { transform: scale(1) rotate(0); }
}

/* 15. Paper Trash Can */
.p4-c1-trashbin {
  transform-origin: 185px 565px;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.p4-c1-trashbin:hover {
  transform: scale(1.1);
}
.p4-c1-trashbin.active {
  animation: binSquish 0.5s ease;
}
.p4-c1-trashbin.active .trashbin-stamper {
  opacity: 1 !important;
  animation: stamperCompress 0.5s ease forwards;
}
.p4-c1-trashbin.active .trashbin-crumpled {
  animation: paperSquash 0.5s ease forwards;
}
.p4-c1-trashbin.ending {
  animation: binSettle 0.5s ease;
}

@keyframes binSquish {
  0% { transform: scale(1.1); }
  40% { transform: scale(1.2, 0.8) translateY(4px); }
  100% { transform: scale(1.1); }
}
@keyframes stamperCompress {
  0% { transform: translateY(-20px); opacity: 0; }
  35% { transform: translateY(12px); opacity: 1; }
  70% { transform: translateY(12px); opacity: 1; }
  100% { transform: translateY(-20px); opacity: 0; }
}
@keyframes paperSquash {
  0% { transform: scaleY(1); }
  35% { transform: scaleY(0.5) translateY(6px); }
  70% { transform: scaleY(0.5) translateY(6px); }
  100% { transform: scaleY(1); }
}
@keyframes binSettle {
  0% { transform: scale(1.1); }
  50% { transform: scale(0.9); }
  100% { transform: scale(1); }
}

/* Night Busy Mode Dimming Overrides */
body.p4.night.busy-mode .p4-c1-extra-monitor .ac-case {
  fill: #0c0a09 !important;
  stroke: #292524 !important;
}
body.p4.night.busy-mode .p4-c1-extra-laptop path[fill="#1e293b"] {
  fill: #0f172a !important;
}
body.p4.night.busy-mode .p4-c1-ringing-phone .phone-base {
  fill: #0f172a !important;
}
body.p4.night.busy-mode .p4-c1-ringing-phone .phone-receiver {
  fill: #0f172a !important;
}
body.p4.night.busy-mode .p4-c1-coffee-cups path {
  fill-opacity: 0.6 !important;
}
body.p4.night.busy-mode .p4-c1-watercooler path[opacity="0.85"] {
  opacity: 0.55 !important;
}
body.p4.night.busy-mode .p4-c1-bulletin .bulletin-cork {
  opacity: 0.15 !important;
}

/* Relaxed mode overrides for busy animations */
body.relaxed-mode .p4-c1-extra-monitor,
body.relaxed-mode .p4-c1-extra-laptop,
body.relaxed-mode .p4-c1-monitor3,
body.relaxed-mode .p4-c1-ringing-phone,
body.relaxed-mode .p4-c1-coffee-cups,
body.relaxed-mode .p4-c1-worker1-day,
body.relaxed-mode .p4-c1-worker1-night,
body.relaxed-mode .p4-c1-worker2-day,
body.relaxed-mode .p4-c1-worker2-night,
body.relaxed-mode .p4-c1-worker3-day,
body.relaxed-mode .p4-c1-worker3-night,
body.relaxed-mode .p4-c1-worker4-day,
body.relaxed-mode .p4-c1-worker4-night,
body.relaxed-mode .p4-c1-imac-busy-screen,
body.relaxed-mode .p4-c1-shredder,
body.relaxed-mode .p4-c1-watercooler,
body.relaxed-mode .p4-c1-calculator,
body.relaxed-mode .p4-c1-bulletin,
body.relaxed-mode .p4-c1-trashbin,
body.relaxed-mode .shredder-paper,
body.relaxed-mode .shredder-led,
body.relaxed-mode .shredder-strips,
body.relaxed-mode .cooler-bubbles circle,
body.relaxed-mode .cooler-stream,
body.relaxed-mode .cooler-cup,
body.relaxed-mode .calc-screen-text,
body.relaxed-mode .bulletin-note,
body.relaxed-mode .trashbin-stamper,
body.relaxed-mode .trashbin-crumpled,
body.relaxed-mode .p4-c1-frantic-arm,
body.relaxed-mode .p4-c1-writing-arm-group,
body.relaxed-mode .p4-c1-w3-phone-arm,
body.relaxed-mode .p4-c1-wobbly-folders,
body.relaxed-mode .p4-c1-face-folder,
body.relaxed-mode .p4-c1-zzz {
  animation: none !important;
  transform: none !important;
  filter: none !important;
}


/* Position and visibility rules for Course 1 Busy Mode container */
.p4-c1-busy-only {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
  z-index: 9;
}
body.p4.busy-mode .p4-c1-busy-only {
  opacity: 1;
}

/* ============================================================
   Interactive Document Folders (.p4-c1-stacked-docs)
   ============================================================ */
.p4-c1-stacked-docs {
  cursor: pointer;
  pointer-events: auto;
  transform-origin: 1065px 515px;
  transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1.15), filter 0.3s ease;
}
.p4-c1-stacked-docs:hover {
  transform: scale(1.08);
  filter: drop-shadow(0 0 6px rgba(251, 191, 36, 0.6));
}

/* Continuous idle animations */
body.p4.day.busy-mode:not(.relaxed-mode) .p4-c1-stacked-docs {
  animation: p4C1StackedDocsDayIdle 0.12s infinite alternate linear;
}
body.p4.night.busy-mode:not(.relaxed-mode) .p4-c1-stacked-docs {
  animation: p4C1StackedDocsNightIdle 2.5s infinite ease-in-out;
}

@keyframes p4C1StackedDocsDayIdle {
  0% { transform: translate(0, 0) rotate(0); }
  50% { transform: translate(1px, -0.5px) rotate(0.3deg); }
  100% { transform: translate(-0.5px, 0.8px) rotate(-0.2deg); }
}

@keyframes p4C1StackedDocsNightIdle {
  0% { transform: translate(0, 0) rotate(0); }
  50% { transform: translate(0.5px, 1.5px) rotate(-0.5deg); }
  100% { transform: translate(0, 0) rotate(0); }
}

/* Day/Night Busy Mode Click Active Animation (Wobbly Shuffle & Scatter) */
.p4-c1-stacked-docs.active path:nth-child(1) {
  transform-origin: 1065px 520px;
  animation: p4C1DocOrangeShuffle 0.4s infinite alternate ease-in-out !important;
}
.p4-c1-stacked-docs.active path:nth-child(2) {
  transform-origin: 1067px 510px;
  animation: p4C1DocBlueShuffle 0.35s infinite alternate ease-in-out !important;
}
.p4-c1-stacked-docs.active path:nth-child(3) {
  transform-origin: 1065px 503px;
  animation: p4C1DocGreenShuffle 0.38s infinite alternate ease-in-out !important;
}
.p4-c1-stacked-docs.active polygon:nth-child(4) {
  transform-origin: 1038px 528px;
  animation: p4C1StickyNoteFly 0.45s infinite alternate ease-in-out !important;
}

@keyframes p4C1DocOrangeShuffle {
  0% { transform: translate(0, 0) rotate(0); }
  20% { transform: translate(4px, 2px) rotate(1deg); }
  40% { transform: translate(-3px, 1px) rotate(-1deg); }
  60% { transform: translate(6px, 3px) rotate(2deg); }
  80% { transform: translate(2px, -1px) rotate(0); }
  100% { transform: translate(5px, 2px) rotate(1.5deg); }
}

@keyframes p4C1DocBlueShuffle {
  0% { transform: translate(0, 0) rotate(0); }
  25% { transform: translate(-8px, -1px) rotate(-3deg); }
  50% { transform: translate(-5px, 2px) rotate(2deg); }
  75% { transform: translate(-10px, -2px) rotate(-4deg); }
  100% { transform: translate(-7px, 0) rotate(-2deg); }
}

@keyframes p4C1DocGreenShuffle {
  0% { transform: translate(0, 0) rotate(0); }
  20% { transform: translate(5px, -8px) rotate(4deg); }
  40% { transform: translate(-2px, -12px) rotate(-2deg); }
  60% { transform: translate(8px, -10px) rotate(6deg); }
  80% { transform: translate(3px, -7px) rotate(2deg); }
  100% { transform: translate(6px, -10px) rotate(5deg); }
}

@keyframes p4C1StickyNoteFly {
  0% { transform: translate(0, 0) rotate(0); }
  15% { transform: translate(-12px, -15px) rotate(-20deg); }
  30% { transform: translate(-8px, -25px) rotate(-35deg) scale(1.1); filter: drop-shadow(0 0 10px rgba(236, 72, 153, 0.9)); }
  45% { transform: translate(-15px, -20px) rotate(-25deg) scale(1.05); }
  60% { transform: translate(-10px, -28px) rotate(-40deg) scale(1.15); filter: drop-shadow(0 0 12px rgba(236, 72, 153, 1)); }
  75% { transform: translate(-18px, -18px) rotate(-30deg) scale(1.08); }
  90% { transform: translate(-11px, -26px) rotate(-38deg) scale(1.12); }
  100% { transform: translate(-14px, -22px) rotate(-32deg) scale(1.1); }
}

/* Settle transition (ending state) */
.p4-c1-stacked-docs.ending path:nth-child(1) {
  transform-origin: 1065px 520px;
  animation: p4C1DocOrangeSettle 1.2s cubic-bezier(0.25, 0.8, 0.25, 1.2) forwards !important;
}
.p4-c1-stacked-docs.ending path:nth-child(2) {
  transform-origin: 1067px 510px;
  animation: p4C1DocBlueSettle 1.2s cubic-bezier(0.25, 0.8, 0.25, 1.2) forwards !important;
}
.p4-c1-stacked-docs.ending path:nth-child(3) {
  transform-origin: 1065px 503px;
  animation: p4C1DocGreenSettle 1.2s cubic-bezier(0.25, 0.8, 0.25, 1.2) forwards !important;
}
.p4-c1-stacked-docs.ending polygon:nth-child(4) {
  transform-origin: 1038px 528px;
  animation: p4C1StickyNoteSettle 1.2s cubic-bezier(0.25, 0.8, 0.25, 1.25) forwards !important;
}

@keyframes p4C1DocOrangeSettle {
  0% { transform: translate(5px, 2px) rotate(1.5deg); }
  30% { transform: translate(-2px, -1px) rotate(-0.5deg); }
  60% { transform: translate(1px, 0.5px) rotate(0.2deg); }
  100% { transform: translate(0, 0) rotate(0); }
}

@keyframes p4C1DocBlueSettle {
  0% { transform: translate(-7px, 0) rotate(-2deg); }
  30% { transform: translate(3px, 1px) rotate(1deg); }
  60% { transform: translate(-1px, 0) rotate(-0.3deg); }
  100% { transform: translate(0, 0) rotate(0); }
}

@keyframes p4C1DocGreenSettle {
  0% { transform: translate(6px, -10px) rotate(5deg); }
  30% { transform: translate(-3px, 4px) rotate(-2deg); }
  60% { transform: translate(1px, -1px) rotate(0.5deg); }
  100% { transform: translate(0, 0) rotate(0); }
}

@keyframes p4C1StickyNoteSettle {
  0% { transform: translate(-14px, -22px) rotate(-32deg) scale(1.1); }
  30% { transform: translate(4px, 6px) rotate(8deg) scale(0.9); }
  60% { transform: translate(-1px, -2px) rotate(-2deg) scale(1.02); }
  100% { transform: translate(0, 0) rotate(0) scale(1); }
}

/* Relaxed mode overrides to completely freeze animations */
body.relaxed-mode .p4-c1-stacked-docs,
body.relaxed-mode .p4-c1-stacked-docs path,
body.relaxed-mode .p4-c1-stacked-docs polygon {
  animation: none !important;
  transform: none !important;
  filter: none !important;
}

/* ============================================================
   Busy Mode Storm Weather Effects (Left & Right Windows)
   ============================================================ */
.p4-c1-win-busy-weather {
  opacity: 0;
  transition: opacity 0.8s ease;
  pointer-events: none;
}
body.p4.busy-mode .p4-c1-win-busy-weather {
  opacity: 1;
}

/* Storm Background Color Changes inside Window Panes */
body.p4.day.busy-mode .p4-c1-win-pane {
  fill: #475569 !important; /* Hectic grey-blue */
}
body.p4.night.busy-mode .p4-c1-win-pane {
  fill: #090d16 !important; /* Pitch black stormy sky */
}

/* Fast and Slow horizontal cloud drifts */
body.p4.busy-mode:not(.relaxed-mode) .p4-c1-win-clouds-slow {
  animation: p4C1WinCloudsSlow 25s infinite linear;
}
body.p4.busy-mode:not(.relaxed-mode) .p4-c1-win-clouds-fast {
  animation: p4C1WinCloudsFast 12s infinite linear;
}

@keyframes p4C1WinCloudsSlow {
  0% { transform: translateX(-150px); }
  100% { transform: translateX(200px); }
}
@keyframes p4C1WinCloudsFast {
  0% { transform: translateX(-180px); }
  100% { transform: translateX(220px); }
}

/* Rapid diagonal storm rain */
body.p4.busy-mode:not(.relaxed-mode) .p4-c1-win-rain {
  animation: p4C1WinRainFall 0.3s infinite linear;
}

@keyframes p4C1WinRainFall {
  0% { transform: translate(0, 0); }
  100% { transform: translate(-30px, 120px); }
}

/* Double-strike dynamic lightning flash overlay */
body.p4.busy-mode:not(.relaxed-mode) .p4-c1-win-lightning {
  animation: p4C1WinLightningFlash 8s infinite ease-in-out;
}

@keyframes p4C1WinLightningFlash {
  0%, 88%, 94%, 100% { opacity: 0; }
  89% { opacity: 0.85; }
  90% { opacity: 0.15; }
  92% { opacity: 0.9; }
  93% { opacity: 0; }
}

/* Relaxed mode weather overrides to completely freeze motion */
body.relaxed-mode .p4-c1-win-clouds-slow,
body.relaxed-mode .p4-c1-win-clouds-fast,
body.relaxed-mode .p4-c1-win-rain,
body.relaxed-mode .p4-c1-win-lightning {
  animation: none !important;
  transform: none !important;
  opacity: 0 !important;
}


/* Course 1 Holiday Mode styles */
.p4-c1-holiday-only {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
  z-index: 9;
}
body.p4.holiday-mode .p4-c1-holiday-only {
  opacity: 1;
}
body.p4.holiday-mode .p4-c1-available-bg {
  opacity: 1;
}

/* --- Holiday Window Details Visibilities --- */
.p4-c1-win-holiday-details {
  display: none;
}
body.p4.holiday-mode .p4-c1-win-holiday-details {
  display: block;
}

/* Hide default day/night details in holiday mode */
body.p4.holiday-mode .p4-c1-win-day-details,
body.p4.holiday-mode .p4-c1-win-night-details {
  display: none !important;
  opacity: 0 !important;
}

/* Show holiday-specific day/night details */
.p4-c1-win-holiday-day-details,
.p4-c1-win-holiday-night-details {
  display: none;
}
body.p4.day.holiday-mode .p4-c1-win-holiday-day-details {
  display: block;
}
body.p4.night.holiday-mode .p4-c1-win-holiday-night-details {
  display: block;
}

/* Redesigned Window Pane Fill for Night Holiday Mode:
   Use dark night sky gradient backdrop with a golden glowing outline instead of flat solid gold */
body.p4.night.holiday-mode .p4-c1-win-pane {
  fill: url(#p4C1SkyNight) !important;
  stroke: #ca8a04 !important;
  stroke-width: 2.5px !important;
  filter: drop-shadow(0 0 12px rgba(251, 191, 36, 0.7));
  animation: p4C1WindowFlickerGold 4s ease-in-out infinite alternate;
}

@keyframes p4C1WindowFlickerGold {
  0% { stroke: #d97706; filter: drop-shadow(0 0 8px rgba(217, 119, 6, 0.5)); }
  50% { stroke: #f59e0b; filter: drop-shadow(0 0 16px rgba(245, 158, 11, 0.8)); }
  100% { stroke: #fbbf24; filter: drop-shadow(0 0 12px rgba(251, 191, 36, 0.6)); }
}

/* --- Window Holiday Animations --- */

/* Swaying Palm Trees (Tropical Summer) */
body.p4.day.holiday-mode .p4-c1-palm-tree-left {
  animation: p4C1PalmTreeSwayLeft 5s ease-in-out infinite alternate;
}
body.p4.day.holiday-mode .p4-c1-palm-tree-right {
  animation: p4C1PalmTreeSwayRight 5s ease-in-out infinite alternate;
}

@keyframes p4C1PalmTreeSwayLeft {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(4deg) skewX(2deg); }
}
@keyframes p4C1PalmTreeSwayRight {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(-4deg) skewX(-2deg); }
}

/* Blinking Window String Lights */
body.p4.night.holiday-mode .win-light-blink {
  animation: p4C1WinLightBlink 1.5s ease-in-out infinite alternate;
}

@keyframes p4C1WinLightBlink {
  0% { opacity: 0.3; fill: #ca8a04; filter: drop-shadow(0 0 1px #ca8a04); }
  100% { opacity: 1; fill: #fef08a; filter: drop-shadow(0 0 6px #fef08a); }
}

/* Exploding/Fading Fireworks (Malaysian Night Celebrations) */
body.p4.night.holiday-mode .p4-c1-firework {
  transform-origin: center;
  animation: p4C1FireworkExplode 4s cubic-bezier(0.1, 0.8, 0.3, 1) infinite;
}

@keyframes p4C1FireworkExplode {
  0% { transform: scale(0); opacity: 0; }
  5% { transform: scale(0); opacity: 1; }
  15% { transform: scale(1.3); opacity: 1; }
  35% { transform: scale(1.5); opacity: 0.8; }
  60% { transform: scale(1.6); opacity: 0; }
  100% { transform: scale(1.6); opacity: 0; }
}

/* Snowflakes continuous rotation/drift */
body.p4.day.holiday-mode .p4-c1-win-snowflake {
  transform-origin: center;
  animation: p4C1SnowflakeRotate 12s linear infinite;
}
@keyframes p4C1SnowflakeRotate {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Relaxed mode overrides for holiday elements */
body.relaxed-mode .p4-c1-win-pane {
  animation: none !important;
}
body.relaxed-mode.night.holiday-mode .p4-c1-win-pane {
  stroke: #ca8a04 !important;
  fill: url(#p4C1SkyNight) !important;
}
body.relaxed-mode .p4-c1-palm-tree-left,
body.relaxed-mode .p4-c1-palm-tree-right,
body.relaxed-mode .win-light-blink,
body.relaxed-mode .p4-c1-firework,
body.relaxed-mode .p4-c1-win-snowflake {
  animation: none !important;
  transform: none !important;
  filter: none !important;
  opacity: 1 !important;
}
body.relaxed-mode .p4-anim-bob {
  animation: none !important;
}
body.relaxed-mode .p4-fairy-light-red,
body.relaxed-mode .p4-fairy-light-yellow,
body.relaxed-mode .p4-fairy-light-blue,
body.relaxed-mode .p4-fairy-light-green,
body.relaxed-mode .p4-fairy-light-pink {
  animation: none !important;
  opacity: 0.9 !important;
  filter: none !important;
}

/* ==========================================================================
   HOLIDAY MODE — COURSE 1 SECTION SETUP
   Mirror the available/busy-mode layout so the toggle button works
   ========================================================================== */

/* Remove opaque section bg so SVGs show through */
body.p4.holiday-mode #p4Course1 {
  background: none !important;
  overflow: hidden;
}

/* Layer the wrap above bg SVGs but below the toggle button */
body.p4.holiday-mode #p4Course1 .p4-wrap {
  position: relative;
  z-index: 10;
  pointer-events: none;
}

/* Keep cards and interactive children clickable */
body.p4.holiday-mode #p4Course1 .p4-module-card,
body.p4.holiday-mode #p4Course1 .p4-heading,
body.p4.holiday-mode #p4Course1 .p4-eyebrow,
body.p4.holiday-mode #p4Course1 .p4-course-info-box {
  pointer-events: auto;
}

/* Glassmorphic module cards — Day Holiday */
body.p4.day.holiday-mode #p4Course1 .p4-module-card {
  background: rgba(255, 255, 255, 0.85) !important;
  backdrop-filter: blur(8px) !important;
  border: 1px solid rgba(100, 100, 100, 0.1) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
}
body.p4.day.holiday-mode #p4Course1 .p4-module-card:hover {
  background: rgba(255, 255, 255, 0.95) !important;
  border-color: var(--p4-holiday) !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

/* Glassmorphic module cards — Night Holiday */
body.p4.night.holiday-mode #p4Course1 .p4-module-card {
  background: rgba(13, 20, 32, 0.80) !important;
  backdrop-filter: blur(8px) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  box-shadow: 0 4px 25px rgba(0, 0, 0, 0.4);
}
body.p4.night.holiday-mode #p4Course1 .p4-module-card:hover {
  border-color: var(--p4-holiday) !important;
  box-shadow: 0 8px 32px rgba(255, 255, 255, 0.05);
}

/* Hide non-holiday overlays in holiday mode */
body.p4.holiday-mode .p4-c1-available-elements {
  display: none !important;
}
body.p4.holiday-mode .p4-c1-busy-only {
  display: none !important;
}

/* ==========================================================================
   TOGGLE BUTTON — UNIVERSAL FIX (all modes)
   Raise z-index so no SVG overlay can cover the button, and ensure the
   content-hidden rule wins regardless of mode-specific selectors.
   ========================================================================== */

/* Guarantee the toggle button sits above every layer */
#p4Course1 > .p4-bg-toggle,
#p4Overview > .p4-bg-toggle {
  z-index: 50 !important;
  pointer-events: auto !important;
}

/* High-specificity hidden state — beats any mode selector that sets opacity */
#p4Course1 .p4-wrap.p4-content-hidden,
#p4Overview .p4-wrap.p4-content-hidden {
  opacity: 0 !important;
  pointer-events: none !important;
  transition: opacity 0.5s ease;
}

/* ==========================================================================
   HOLIDAY MODE CONTINUOUS MOVEMENT ANIMATIONS (Course 1 Party Scene)
   ========================================================================== */

/* Day Holiday Mode - Relaxing, Celebrating & Cheers */
body.p4.day.holiday-mode .p4-c1-worker1-holiday {
  animation: p4C1WorkerRelax1 6s ease-in-out infinite;
  transform-origin: 585px 480px;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.15));
}
body.p4.day.holiday-mode .p4-c1-worker2-holiday {
  animation: p4C1WorkerRelax2 6.5s ease-in-out infinite;
  animation-delay: 0.5s;
  transform-origin: 887px 480px;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.15));
}
body.p4.day.holiday-mode .p4-c1-worker3-holiday {
  animation: p4C1WorkerRelax3 5.8s ease-in-out infinite;
  animation-delay: 1s;
  transform-origin: 757px 480px;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.15));
}
body.p4.day.holiday-mode .p4-c1-worker4-holiday {
  animation: p4C1WorkerRelax4 6.2s ease-in-out infinite;
  animation-delay: 1.5s;
  transform-origin: 967px 480px;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.15));
}

/* Day Holiday Mode - Gentle cheers arm toast */
body.p4.day.holiday-mode .p4-c1-worker1-holiday .p4-c1-worker-arm-group {
  animation: p4C1ArmToastDay1 4.5s ease-in-out infinite;
  animation-delay: 0.3s;
}
body.p4.day.holiday-mode .p4-c1-worker2-holiday .p4-c1-worker-arm-group {
  animation: p4C1ArmToastDay2 5s ease-in-out infinite;
  animation-delay: 1s;
}
body.p4.day.holiday-mode .p4-c1-worker3-holiday .p4-c1-worker-arm-group {
  animation: p4C1ArmToastDay3 4.2s ease-in-out infinite;
  animation-delay: 1.5s;
}
body.p4.day.holiday-mode .p4-c1-worker4-holiday .p4-c1-worker-arm-group {
  animation: p4C1ArmToastDay4 4.8s ease-in-out infinite;
  animation-delay: 0.7s;
}

/* Day Holiday Mode - Gentle Santa hat wobble */
body.p4.day.holiday-mode .p4-santa-hat {
  animation: p4SantaHatWobbleDay 4s ease-in-out infinite alternate;
}
body.p4.day.holiday-mode .p4-c1-worker2-holiday .p4-santa-hat {
  animation-delay: 0.3s;
}
body.p4.day.holiday-mode .p4-c1-worker3-holiday .p4-santa-hat {
  animation-delay: 0.6s;
}
body.p4.day.holiday-mode .p4-c1-worker4-holiday .p4-santa-hat {
  animation-delay: 0.1s;
}


/* Night Holiday Mode - Dancing & Having Fun (Groovy Party Glows) */
body.p4.night.holiday-mode .p4-c1-worker1-holiday {
  animation: p4C1WorkerDanceNight1 3s ease-in-out infinite;
  transform-origin: 585px 480px;
  filter: drop-shadow(0 0 10px rgba(49, 46, 129, 0.65)) drop-shadow(0 0 15px rgba(245, 158, 11, 0.4));
}
body.p4.night.holiday-mode .p4-c1-worker2-holiday {
  animation: p4C1WorkerDanceNight2 3.2s ease-in-out infinite;
  animation-delay: 0.25s;
  transform-origin: 887px 480px;
  filter: drop-shadow(0 0 10px rgba(37, 99, 235, 0.65)) drop-shadow(0 0 15px rgba(245, 158, 11, 0.4));
}
body.p4.night.holiday-mode .p4-c1-worker3-holiday {
  animation: p4C1WorkerDanceNight3 2.8s ease-in-out infinite;
  animation-delay: 0.5s;
  transform-origin: 757px 480px;
  filter: drop-shadow(0 0 10px rgba(120, 53, 15, 0.65)) drop-shadow(0 0 15px rgba(245, 158, 11, 0.4));
}
body.p4.night.holiday-mode .p4-c1-worker4-holiday {
  animation: p4C1WorkerDanceNight4 3.1s ease-in-out infinite;
  animation-delay: 0.75s;
  transform-origin: 967px 480px;
  filter: drop-shadow(0 0 10px rgba(16, 185, 129, 0.65)) drop-shadow(0 0 15px rgba(245, 158, 11, 0.4));
}

/* Night Holiday Mode - Fun, energetic arm waving/clinking */
body.p4.night.holiday-mode .p4-c1-worker1-holiday .p4-c1-worker-arm-group {
  animation: p4C1ArmToastNight1 2.5s ease-in-out infinite;
  animation-delay: 0.1s;
}
body.p4.night.holiday-mode .p4-c1-worker2-holiday .p4-c1-worker-arm-group {
  animation: p4C1ArmToastNight2 2.8s ease-in-out infinite;
  animation-delay: 0.5s;
}
body.p4.night.holiday-mode .p4-c1-worker3-holiday .p4-c1-worker-arm-group {
  animation: p4C1ArmToastNight3 2.3s ease-in-out infinite;
  animation-delay: 0.9s;
}
body.p4.night.holiday-mode .p4-c1-worker4-holiday .p4-c1-worker-arm-group {
  animation: p4C1ArmToastNight4 2.6s ease-in-out infinite;
  animation-delay: 0.3s;
}

/* Night Holiday Mode - Lively Santa hat wobble */
body.p4.night.holiday-mode .p4-santa-hat {
  animation: p4SantaHatWobbleNight 1.8s ease-in-out infinite alternate;
}
body.p4.night.holiday-mode .p4-c1-worker2-holiday .p4-santa-hat {
  animation-delay: 0.3s;
}
body.p4.night.holiday-mode .p4-c1-worker3-holiday .p4-santa-hat {
  animation-delay: 0.6s;
}
body.p4.night.holiday-mode .p4-c1-worker4-holiday .p4-santa-hat {
  animation-delay: 0.1s;
}

/* Garland Baubles Swing */
body.p4.holiday-mode .p4-c1-bauble {
  animation: p4C1BaubleSway 3.5s ease-in-out infinite alternate;
}
body.p4.holiday-mode .p4-c1-bauble:nth-child(2n) {
  animation-duration: 4s;
  animation-delay: 0.5s;
}
body.p4.holiday-mode .p4-c1-bauble:nth-child(3n) {
  animation-duration: 3.2s;
  animation-delay: 1.1s;
}
body.p4.holiday-mode .p4-c1-bauble:nth-child(4n) {
  animation-duration: 3.8s;
  animation-delay: 1.6s;
}

/* Champagne Bucket Sparkles & Bubbles */
body.p4.holiday-mode .p4-c1-bubble {
  animation: p4C1ChampagneBubble 2s linear infinite;
  transform-origin: center;
}
body.p4.holiday-mode .p4-c1-bubble.b1 { animation-delay: 0s; }
body.p4.holiday-mode .p4-c1-bubble.b2 { animation-delay: 0.5s; }
body.p4.holiday-mode .p4-c1-bubble.b3 { animation-delay: 1s; }
body.p4.holiday-mode .p4-c1-bubble.b4 { animation-delay: 1.5s; }

/* Holiday Gift Boxes Glowing */
body.p4.holiday-mode .p4-c1-gifts > g:nth-child(1) {
  animation: p4C1GiftGlowRed 3s ease-in-out infinite alternate;
}
body.p4.holiday-mode .p4-c1-gifts > g:nth-child(2) {
  animation: p4C1GiftGlowGreen 3.5s ease-in-out infinite alternate;
}

/* Day - Relaxing Dance sways */
@keyframes p4C1WorkerRelax1 {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(1.5px) rotate(1deg); }
}
@keyframes p4C1WorkerRelax2 {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(1px) rotate(-0.8deg); }
}
@keyframes p4C1WorkerRelax3 {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(1.8px) rotate(-1deg); }
}
@keyframes p4C1WorkerRelax4 {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(1.2px) rotate(0.8deg); }
}

/* Day - Gentle cheers arm toasts */
@keyframes p4C1ArmToastDay1 {
  0%, 100% { transform: rotate(0deg); }
  50% { transform: rotate(5deg); }
}
@keyframes p4C1ArmToastDay2 {
  0%, 100% { transform: rotate(0deg); }
  50% { transform: rotate(4deg); }
}
@keyframes p4C1ArmToastDay3 {
  0%, 100% { transform: rotate(0deg); }
  50% { transform: rotate(6deg); }
}
@keyframes p4C1ArmToastDay4 {
  0%, 100% { transform: rotate(0deg); }
  50% { transform: rotate(4.5deg); }
}

/* Day - Gentle Santa hat wobble */
@keyframes p4SantaHatWobbleDay {
  0%, 100% { transform: rotate(-2deg); }
  50% { transform: rotate(3deg); }
}

/* Night - Energetic Dancing */
@keyframes p4C1WorkerDanceNight1 {
  0%, 100% { transform: translateY(0) translateX(0) rotate(0deg); }
  25% { transform: translateY(-7px) translateX(2px) rotate(2.5deg); }
  50% { transform: translateY(1px) translateX(0) rotate(-1deg); }
  75% { transform: translateY(-4px) translateX(-2px) rotate(3deg); }
}
@keyframes p4C1WorkerDanceNight2 {
  0%, 100% { transform: translateY(0) translateX(0) rotate(0deg); }
  25% { transform: translateY(-6px) translateX(-3px) rotate(-3.5deg); }
  50% { transform: translateY(2px) translateX(0) rotate(1.2deg); }
  75% { transform: translateY(-8px) translateX(2px) rotate(-2deg); }
}
@keyframes p4C1WorkerDanceNight3 {
  0%, 100% { transform: translateY(0) translateX(0) rotate(0deg); }
  25% { transform: translateY(-8px) translateX(1px) rotate(-2deg); }
  50% { transform: translateY(1px) translateX(0) rotate(2.5deg); }
  75% { transform: translateY(-5px) translateX(-1px) rotate(-1.5deg); }
}
@keyframes p4C1WorkerDanceNight4 {
  0%, 100% { transform: translateY(0) translateX(0) rotate(0deg); }
  25% { transform: translateY(-5px) translateX(3px) rotate(3deg); }
  50% { transform: translateY(3px) translateX(0) rotate(-2deg); }
  75% { transform: translateY(-9px) translateX(-2px) rotate(3.5deg); }
}

/* Night - Active Waving / Celebrating */
@keyframes p4C1ArmToastNight1 {
  0%, 100% { transform: rotate(0deg); }
  33% { transform: rotate(14deg); }
  66% { transform: rotate(-4deg); }
}
@keyframes p4C1ArmToastNight2 {
  0%, 100% { transform: rotate(0deg); }
  33% { transform: rotate(11deg); }
  66% { transform: rotate(-5deg); }
}
@keyframes p4C1ArmToastNight3 {
  0%, 100% { transform: rotate(0deg); }
  33% { transform: rotate(15deg); }
  66% { transform: rotate(-3deg); }
}
@keyframes p4C1ArmToastNight4 {
  0%, 100% { transform: rotate(0deg); }
  33% { transform: rotate(12deg); }
  66% { transform: rotate(-6deg); }
}

/* Night - Wild Santa hat wobble */
@keyframes p4SantaHatWobbleNight {
  0%, 100% { transform: rotate(-7deg); }
  50% { transform: rotate(9deg); }
}

@keyframes p4C1BaubleSway {
  0%, 100% { transform: rotate(-5deg); }
  50% { transform: rotate(5deg); }
}

@keyframes p4C1ChampagneBubble {
  0% { transform: translateY(0) scale(0.3); opacity: 0; }
  30% { opacity: 0.9; }
  90% { opacity: 0.9; }
  100% { transform: translateY(-25px) scale(1.1); opacity: 0; }
}

@keyframes p4C1GiftGlowRed {
  0%, 100% { filter: drop-shadow(0 0 2px rgba(239, 68, 68, 0.3)); }
  50% { filter: drop-shadow(0 0 10px rgba(239, 68, 68, 0.7)); }
}

@keyframes p4C1GiftGlowGreen {
  0%, 100% { filter: drop-shadow(0 0 2px rgba(16, 185, 129, 0.3)); }
  50% { filter: drop-shadow(0 0 10px rgba(16, 185, 129, 0.7)); }
}

/* Relaxed Mode Overrides to completely freeze and clean styling */
body.relaxed-mode .p4-c1-worker1-holiday,
body.relaxed-mode .p4-c1-worker2-holiday,
body.relaxed-mode .p4-c1-worker3-holiday,
body.relaxed-mode .p4-c1-worker4-holiday,
body.relaxed-mode .p4-c1-worker-arm-group,
body.relaxed-mode .p4-santa-hat,
body.relaxed-mode .p4-c1-bauble,
body.relaxed-mode .p4-c1-bubble,
body.relaxed-mode .p4-c1-gifts > g {
  animation: none !important;
  transform: none !important;
  filter: none !important;
}

/* ==========================================================================
   WALL CLOCK, CERTIFICATE FRAME, & AC UNIT HOLIDAY REDESIGNS
   ========================================================================== */

/* --- Temperature Readout Display Swaps in Holiday Mode --- */
body.p4.holiday-mode .p4-c1-ac.active .ac-temp-text.t24,
body.p4.holiday-mode .p4-c1-ac.active .ac-temp-text.t16,
body.p4.holiday-mode .p4-c1-ac.active .ac-temp-text.t-err {
  display: none !important;
}
body.p4.day.holiday-mode .p4-c1-ac.active .ac-temp-text.t-hol-day {
  display: block !important;
}
body.p4.night.holiday-mode .p4-c1-ac.active .ac-temp-text.t-hol-night {
  display: block !important;
}

/* --- DAY HOLIDAY MODE (Cheers / Celebrating Vibe) --- */

/* Clock: bouncing clink (Cheers!) */
body.p4.day.holiday-mode .p4-c1-clock.active {
  animation: p4C1ClockCheersDay 2.5s ease-in-out forwards;
}
body.p4.day.holiday-mode .p4-c1-clock.active .clock-hands {
  animation: p4C1ClockHandsCheersDay 2.5s cubic-bezier(0.25, 0.8, 0.25, 1.25);
  transform-origin: 520px 110px;
}
body.p4.day.holiday-mode .p4-c1-clock.active .clock-gear-left {
  animation: p4C1GearCheersDay 2.5s ease-in-out;
  transform-origin: 510px 110px;
}

/* Frame: elegant celebratory sway + warm golden star sparkles */
body.p4.day.holiday-mode .p4-c1-frame.active {
  animation: p4C1FrameSwayDay 2.5s ease-in-out forwards;
}
body.p4.day.holiday-mode .p4-c1-frame.active .frame-sparkle.s1 {
  animation: p4C1SparkleDay1 2.5s cubic-bezier(0.19, 1, 0.22, 1) forwards;
  transform-origin: 618px 72px;
}
body.p4.day.holiday-mode .p4-c1-frame.active .frame-sparkle.s2 {
  animation: p4C1SparkleDay2 2.5s cubic-bezier(0.19, 1, 0.22, 1) forwards;
  transform-origin: 652px 126px;
}

/* AC: cheerful louver waves + soft cozy warm breeze streams */
body.p4.day.holiday-mode .p4-c1-ac.active .ac-louver {
  animation: p4C1AcLouverCheersDay 2.5s ease-in-out forwards;
  transform-origin: 797px 114px;
}
body.p4.day.holiday-mode .p4-c1-ac.active .ac-wind {
  stroke: #fbbf24 !important; /* Golden/amber warm air curves */
  stroke-dasharray: 4,4;
  animation: p4C1AcWindCheersDay 2.5s ease-in-out infinite;
}
body.p4.day.holiday-mode .p4-c1-ac.active .ac-fan-blade {
  animation: p4C1AcFanCheersDay 2.5s cubic-bezier(0.1, 0.8, 0.2, 1);
}


/* --- NIGHT HOLIDAY MODE (Party Vibe) --- */

/* Clock: disco pulsing colors + heavy dancing bounce + rapid spinning hands */
body.p4.night.holiday-mode .p4-c1-clock {
  filter: drop-shadow(0 0 5px rgba(245, 158, 11, 0.4));
}
body.p4.night.holiday-mode .p4-c1-clock.active {
  animation: p4C1ClockPartyNight 2.5s infinite linear;
}
body.p4.night.holiday-mode .p4-c1-clock.active .clock-hands {
  animation: p4C1ClockHandsPartyNight 2.5s linear infinite;
  transform-origin: 520px 110px;
}
body.p4.night.holiday-mode .p4-c1-clock.active .clock-gear-left {
  animation: p4C1GearPartyNight1 2.5s linear infinite;
  transform-origin: 510px 110px;
}
body.p4.night.holiday-mode .p4-c1-clock.active .clock-gear-right {
  animation: p4C1GearPartyNight2 2.5s linear infinite;
  transform-origin: 526px 113px;
}

/* Frame: speaker-bass rattle shake + neon purple/pink glow flashes + crazy star rotations */
body.p4.night.holiday-mode .p4-c1-frame {
  filter: drop-shadow(0 0 4px rgba(239, 68, 68, 0.3));
}
body.p4.night.holiday-mode .p4-c1-frame.active {
  animation: p4C1FramePartyNight 0.15s linear infinite;
}
body.p4.night.holiday-mode .p4-c1-frame.active .frame-sparkle.s1 {
  animation: p4C1SparklePartyNight1 0.8s ease-in-out infinite alternate;
  transform-origin: 618px 72px;
}
body.p4.night.holiday-mode .p4-c1-frame.active .frame-sparkle.s2 {
  animation: p4C1SparklePartyNight2 0.8s ease-in-out infinite alternate;
  transform-origin: 652px 126px;
}

/* AC: flashing LED RGB rainbow + louver flips + hot pink laser wind streams */
body.p4.night.holiday-mode .p4-c1-ac .ac-led-strip {
  animation: p4C1AcLedRainbow 3s linear infinite;
}
body.p4.night.holiday-mode .p4-c1-ac.active .ac-louver {
  animation: p4C1AcLouverPartyNight 0.3s ease-in-out infinite alternate;
  transform-origin: 797px 114px;
}
body.p4.night.holiday-mode .p4-c1-ac.active .ac-wind {
  stroke: #ec4899 !important; /* Hot pink neon party laser lines! */
  animation: p4C1AcWindPartyNight 0.25s linear infinite alternate;
}
body.p4.night.holiday-mode .p4-c1-ac.active .ac-fan-blade {
  animation: p4C1AcFanPartyNight 0.4s linear infinite;
}


/* --- ANIMATION KEYFRAMES --- */

/* Day - Clock */
@keyframes p4C1ClockCheersDay {
  0% { transform: translateY(0) scale(1); }
  15% { transform: translateY(-16px) rotate(8deg) scale(1.08); }
  35% { transform: translateY(-16px) rotate(-8deg) scale(1.08); }
  55% { transform: translateY(-10px) rotate(4deg) scale(1.04); }
  75% { transform: translateY(-10px) rotate(-4deg) scale(1.04); }
  100% { transform: translateY(0) scale(1); }
}
@keyframes p4C1ClockHandsCheersDay {
  0% { transform: rotate(0deg); }
  30% { transform: rotate(720deg); }
  100% { transform: rotate(1080deg); }
}
@keyframes p4C1GearCheersDay {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(-540deg); }
}

/* Day - Frame */
@keyframes p4C1FrameSwayDay {
  0%, 100% { transform: rotate(0deg) scale(1); }
  25% { transform: rotate(8deg) scale(1.06); }
  50% { transform: rotate(-6deg) scale(1.04); }
  75% { transform: rotate(4deg) scale(1.02); }
}
@keyframes p4C1SparkleDay1 {
  0% { transform: scale(0) rotate(0deg); opacity: 0; filter: drop-shadow(0 0 2px #f59e0b); }
  20% { transform: scale(1.5) rotate(90deg); opacity: 1; filter: drop-shadow(0 0 10px #fbbf24); }
  80% { transform: scale(1) rotate(180deg); opacity: 1; filter: drop-shadow(0 0 5px #fbbf24); }
  100% { transform: scale(0) rotate(270deg); opacity: 0; }
}
@keyframes p4C1SparkleDay2 {
  0% { transform: scale(0) rotate(0deg); opacity: 0; filter: drop-shadow(0 0 2px #f59e0b); }
  30% { transform: scale(1.6) rotate(-90deg); opacity: 1; filter: drop-shadow(0 0 12px #fbbf24); }
  85% { transform: scale(1) rotate(-180deg); opacity: 1; filter: drop-shadow(0 0 6px #fbbf24); }
  100% { transform: scale(0) rotate(-270deg); opacity: 0; }
}

/* Day - AC */
@keyframes p4C1AcLouverCheersDay {
  0%, 100% { transform: rotate(0deg); }
  20%, 80% { transform: rotateX(65deg) translateY(-2px); }
  40%, 60% { transform: rotateX(45deg) translateY(1px); }
}
@keyframes p4C1AcWindCheersDay {
  0%, 100% { opacity: 0.2; transform: scaleY(0.9); }
  50% { opacity: 0.75; transform: scaleY(1.05); }
}
@keyframes p4C1AcFanCheersDay {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(1800deg); }
}


/* Night - Clock */
@keyframes p4C1ClockPartyNight {
  0%, 100% { transform: scale(1) translateY(0); filter: drop-shadow(0 0 8px #ef4444); }
  25% { transform: scale(1.12) translateY(-8px) rotate(5deg); filter: drop-shadow(0 0 16px #3b82f6); }
  50% { transform: scale(1) translateY(0); filter: drop-shadow(0 0 8px #10b981); }
  75% { transform: scale(1.12) translateY(-6px) rotate(-5deg); filter: drop-shadow(0 0 16px #ec4899); }
}
@keyframes p4C1ClockHandsPartyNight {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(2160deg); }
}
@keyframes p4C1GearPartyNight1 {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(1080deg); }
}
@keyframes p4C1GearPartyNight2 {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(-1440deg); }
}

/* Night - Frame */
@keyframes p4C1FramePartyNight {
  0%, 100% { transform: translate(0, 0) rotate(0deg); filter: drop-shadow(0 0 8px #d946ef); }
  20% { transform: translate(-3px, 1.5px) rotate(-3deg); filter: drop-shadow(0 0 15px #3b82f6); }
  40% { transform: translate(2px, -2px) rotate(2deg); filter: drop-shadow(0 0 8px #10b981); }
  60% { transform: translate(-1.5px, -3px) rotate(3deg); filter: drop-shadow(0 0 18px #fbbf24); }
  80% { transform: translate(3px, 2px) rotate(-2deg); filter: drop-shadow(0 0 12px #ec4899); }
}
@keyframes p4C1SparklePartyNight1 {
  0% { transform: scale(0.6) rotate(0deg); opacity: 0.5; filter: drop-shadow(0 0 4px #ec4899); }
  100% { transform: scale(1.6) rotate(360deg); opacity: 1; filter: drop-shadow(0 0 14px #a855f7); }
}
@keyframes p4C1SparklePartyNight2 {
  0% { transform: scale(0.6) rotate(0deg); opacity: 0.5; filter: drop-shadow(0 0 4px #3b82f6); }
  100% { transform: scale(1.6) rotate(-360deg); opacity: 1; filter: drop-shadow(0 0 14px #22d3ee); }
}

/* Night - AC */
@keyframes p4C1AcLouverPartyNight {
  0% { transform: rotateX(30deg); }
  100% { transform: rotateX(85deg) translateY(-3px); }
}
@keyframes p4C1AcWindPartyNight {
  0% { opacity: 0.15; transform: scaleY(0.8) skewX(-2deg); }
  100% { opacity: 0.95; transform: scaleY(1.15) skewX(2deg); }
}
@keyframes p4C1AcFanPartyNight {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(1440deg); }
}

/* --- Floor Interactive Decor Origins --- */
.p4-c1-floor-bottle-red { transform-origin: 60px 535px; }
.p4-c1-floor-glass-gold { transform-origin: 80px 540px; }
.p4-c1-floor-cupcakes { transform-origin: 125px 540px; }
.p4-c1-floor-glass-red { transform-origin: 155px 540px; }
.p4-c1-floor-gift-red { transform-origin: 210px 532px; }
.p4-c1-floor-gift-green { transform-origin: 1090px 540px; }
.p4-c1-floor-bottle-green { transform-origin: 1125px 540px; }

/* --- Continuous Idle Animations for Floor Decor --- */

/* Day Idle - Gentle breathing float */
body.p4.day.holiday-mode .p4-c1-floor-decor {
  animation: p4C1FloorIdleDay 6s ease-in-out infinite alternate;
}
body.p4.day.holiday-mode .p4-c1-floor-decor:nth-child(2n) {
  animation-duration: 6.8s;
  animation-delay: 0.5s;
}
body.p4.day.holiday-mode .p4-c1-floor-decor:nth-child(3n) {
  animation-duration: 5.2s;
  animation-delay: 1.1s;
}

@keyframes p4C1FloorIdleDay {
  0% { transform: translateY(0); }
  100% { transform: translateY(-2px); }
}

/* Night Idle - Tiny rhythmic vibration / party bounce */
body.p4.night.holiday-mode .p4-c1-floor-decor {
  animation: p4C1FloorIdleNight 1.5s ease-in-out infinite alternate;
}
body.p4.night.holiday-mode .p4-c1-floor-decor:nth-child(2n) {
  animation-duration: 1.8s;
  animation-delay: 0.3s;
}
body.p4.night.holiday-mode .p4-c1-floor-decor:nth-child(3n) {
  animation-duration: 1.3s;
  animation-delay: 0.7s;
}

@keyframes p4C1FloorIdleNight {
  0% { transform: translateY(0) scale(1); }
  100% { transform: translateY(-1.5px) scale(1.03); }
}

/* --- Click Active Animations --- */

/* Day Click Active - Cheerful Bouncing Clink (Cheers!) */
body.p4.day.holiday-mode .p4-c1-floor-decor.active {
  animation: p4C1ActiveDayClick 2.5s ease-in-out forwards;
}

@keyframes p4C1ActiveDayClick {
  0% { transform: scale(1) translateY(0); }
  15% { transform: scale(1.22) translateY(-18px) rotate(12deg); }
  35% { transform: scale(1.22) translateY(-18px) rotate(-12deg); }
  55% { transform: scale(1.12) translateY(-10px) rotate(6deg); }
  75% { transform: scale(1.06) translateY(-5px) rotate(-4deg); }
  100% { transform: scale(1) translateY(0); }
}

/* Night Click Active - Wild Spinning / Bass Beat Party Scale & Rainbow Hue Cycles */
body.p4.night.holiday-mode .p4-c1-floor-decor.active {
  animation: p4C1ActiveNightClick 2.5s ease-in-out forwards;
}

@keyframes p4C1ActiveNightClick {
  0% { transform: scale(1) translateY(0); filter: hue-rotate(0deg) drop-shadow(0 0 4px #d946ef); }
  20% { transform: scale(1.35) translateY(-25px) rotate(25deg); filter: hue-rotate(90deg) drop-shadow(0 0 16px #3b82f6); }
  40% { transform: scale(1.35) translateY(-25px) rotate(-25deg); filter: hue-rotate(180deg) drop-shadow(0 0 16px #10b981); }
  60% { transform: scale(1.18) translateY(0) rotate(15deg); filter: hue-rotate(270deg) drop-shadow(0 0 20px #fbbf24); }
  80% { transform: scale(1.25) translateY(-12px) rotate(-15deg); filter: hue-rotate(360deg) drop-shadow(0 0 14px #ec4899); }
  100% { transform: scale(1) translateY(0); filter: none; }
}

/* --- Ending Settle Recovery Animation --- */
body.p4.holiday-mode .p4-c1-floor-decor.ending {
  animation: p4C1FloorEndingSettle 1.2s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

@keyframes p4C1FloorEndingSettle {
  0% { transform: translateY(-5px) scale(1.08); }
  30% { transform: translateY(3px) scale(0.96); }
  60% { transform: translateY(-1.5px) scale(1.02); }
  100% { transform: translateY(0) scale(1); }
}

/* Relaxed Mode Overrides to completely freeze all continuous and interactive holiday animations */
body.relaxed-mode .p4-c1-worker1-holiday,
body.relaxed-mode .p4-c1-worker2-holiday,
body.relaxed-mode .p4-c1-worker3-holiday,
body.relaxed-mode .p4-c1-worker4-holiday,
body.relaxed-mode .p4-c1-worker-arm-group,
body.relaxed-mode .p4-santa-hat,
body.relaxed-mode .p4-c1-bauble,
body.relaxed-mode .p4-c1-bubble,
body.relaxed-mode .p4-c1-gifts > g,
body.relaxed-mode .p4-c1-clock,
body.relaxed-mode .p4-c1-frame,
body.relaxed-mode .p4-c1-ac,
body.relaxed-mode .p4-c1-clock.active,
body.relaxed-mode .p4-c1-frame.active,
body.relaxed-mode .p4-c1-ac.active,
body.relaxed-mode .p4-c1-clock.active .clock-hands,
body.relaxed-mode .p4-c1-clock.active .clock-gear-left,
body.relaxed-mode .p4-c1-clock.active .clock-gear-right,
body.relaxed-mode .p4-c1-frame.active .frame-sparkle,
body.relaxed-mode .p4-c1-ac.active .ac-louver,
body.relaxed-mode .p4-c1-ac.active .ac-wind,
body.relaxed-mode .p4-c1-ac.active .ac-fan-blade,
body.relaxed-mode .p4-c1-floor-decor,
body.relaxed-mode .p4-c1-floor-decor.active,
body.relaxed-mode .p4-c1-floor-decor.ending {
  animation: none !important;
  transform: none !important;
  filter: none !important;
}

/* ==========================================================================
   MOBILE & SMARTPHONE (ANDROID / IOS) OPTIMIZATIONS FOR COURSE 1
   ========================================================================== */
@media (max-width: 968px) {
  /* Prevent section height collapse/overflow and match background colors below the room */
  body.p4.day.available-mode #p4Course1,
  body.p4.day.busy-mode #p4Course1,
  body.p4.day.holiday-mode #p4Course1 {
    background: #e5e7eb !important;
    position: relative !important;
    overflow: visible !important;
    padding: 0 !important;
  }
  body.p4.night.available-mode #p4Course1,
  body.p4.night.busy-mode #p4Course1,
  body.p4.night.holiday-mode #p4Course1 {
    background: #0d1527 !important;
    position: relative !important;
    overflow: visible !important;
    padding: 0 !important;
  }

  /* Room background containers (Constrain height to 380px at the top) */
  .p4-c1-available-bg,
  .p4-c1-available-elements,
  .p4-c1-busy-only,
  .p4-c1-holiday-only {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 380px !important;
    overflow: hidden !important;
  }

  /* Prevent SVGs from stretching vertically by applying proportional cover fitting */
  .p4-c1-available-bg svg,
  .p4-c1-available-elements svg,
  .p4-c1-busy-only svg,
  .p4-c1-holiday-only svg {
    width: 100% !important;
    height: 100% !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    object-fit: cover !important;
  }

  /* Pushes content layout down to avoid overlapping the room background details */
  #p4Course1 .p4-wrap {
    position: relative !important;
    padding-top: 400px !important; /* Pushes grid below the 380px room height */
    padding-left: 16px !important;
    padding-right: 16px !important;
    padding-bottom: 60px !important;
    box-sizing: border-box !important;
    width: 100% !important;
    pointer-events: none !important;
  }

  /* Re-enable pointers on text and header controls */
  #p4Course1 .p4-course-header {
    margin-bottom: 12px !important;
    pointer-events: auto !important;
  }
  #p4Course1 .p4-course-title {
    font-size: 2.2rem !important;
    line-height: 1.25 !important;
  }
  #p4Course1 .p4-course-info-box {
    margin-bottom: 24px !important;
    pointer-events: auto !important;
    max-width: 100% !important;
  }

  /* Align card grid layout with Course 2 (Administrative Management) */
  #p4Course1 .p4-modules-grid {
    gap: 18px !important;
    pointer-events: none !important;
  }
  #p4Course1 .p4-module-card {
    pointer-events: auto !important;
  }

  /* Remove eye toggle button from Course Structure on mobile/tablet viewports */
  #p4Course1 > .p4-bg-toggle {
    display: none !important;
  }

  /* Force foreground text/cards to be 100% visible on mobile, even if hidden on desktop */
  #p4Course1 .p4-wrap.p4-content-hidden {
    opacity: 1 !important;
    pointer-events: none !important; /* Keep parent none, children override */
  }
  #p4Course1 .p4-wrap.p4-content-hidden .p4-course-header,
  #p4Course1 .p4-wrap.p4-content-hidden .p4-course-info-box,
  #p4Course1 .p4-wrap.p4-content-hidden .p4-module-card {
    pointer-events: auto !important; /* Re-enable clicks for items */
  }

  /* --- About Program Section mobile optimizations --- */
  /* Bring cards wrapper (content) to the foreground */
  .p4-about .p4-wrap {
    z-index: 10 !important;
  }

  /* Send all background animation containers and floating elements to the background (behind cards) */
  .p4-about-bg-anim,
  .p4-about-bg-night-anim,
  .p4-about-bg-busy-anim,
  .p4-about-bg-holiday-anim,
  .p4-about-bg-night-holiday-anim,
  .p4-about-bg-night-holiday-elements {
    z-index: 2 !important;
  }

  /* Scale down floating sticky note and calendar on mobile to prevent overflow */
  .p4-sticky-note {
    transform: rotate(-3deg) scale(0.8) !important;
    transform-origin: top left !important;
  }
  .p4-hol-calendar {
    transform: scale(0.8) !important;
    transform-origin: top left !important;
  }

  /* Simplify Administrative Management (Course 2) on mobile */
  #p4Course2 .p4-c2-exec-team,
  #p4Course2 .p4-c2-interactive {
    display: none !important;
  }
}

/* Redesigned Night Busy Mode Overtime Employee Animations */
.p4-c1-nodding-head-group {
  transform-origin: 870px 375px;
}
.p4-c1-yawning-head-group {
  transform-origin: 740px 375px;
}
.p4-c1-slumped-head-w4-group {
  transform-origin: 955px 385px;
}

/* Manager Sleeping Breathe */
body.p4.night.busy-mode:not(.relaxed-mode) .p4-c1-worker1-night {
  animation: p4C1ManagerSleepBreathe 5s infinite ease-in-out;
}
@keyframes p4C1ManagerSleepBreathe {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(1.5px) scaleY(0.98); }
}

/* Assistant Nodding Sleep */
body.p4.night.busy-mode:not(.relaxed-mode) .p4-c1-nodding-head-group {
  animation: p4C1AssistantNod 4s infinite ease-in-out;
}
@keyframes p4C1AssistantNod {
  0%, 100% { transform: rotate(0deg); }
  40% { transform: rotate(3deg) translateY(1px); }
  60% { transform: rotate(-1deg); }
}

/* Yawning Accountant sleep sway */
body.p4.night.busy-mode:not(.relaxed-mode) .p4-c1-yawning-head-group {
  animation: p4C1AccountantSway 4.5s infinite ease-in-out;
}
@keyframes p4C1AccountantSway {
  0%, 100% { transform: rotate(0deg); }
  50% { transform: rotate(-2.5deg) translateX(-0.5px); }
}

/* Intern sleep chest rise */
body.p4.night.busy-mode:not(.relaxed-mode) .p4-c1-slumped-head-w4-group {
  animation: p4C1InternSleep 6s infinite ease-in-out;
}
@keyframes p4C1InternSleep {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(1px); }
}

/* Relaxed mode overrides for night busy workers */
body.relaxed-mode .p4-c1-worker1-night,
body.relaxed-mode .p4-c1-nodding-head-group,
body.relaxed-mode .p4-c1-yawning-head-group,
body.relaxed-mode .p4-c1-slumped-head-w4-group {
  animation: none !important;
  transform: none !important;
}

/* Executive Course 2 Background styling based on Image 2 */
.p4-c2-available-bg {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  overflow: hidden !important;
  z-index: 1 !important;
}
.p4-c2-available-bg svg {
  width: 100% !important;
  height: 100% !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  object-fit: cover !important;
}

/* Visibility toggling for day vs night elements inside Course 2 background */
body.p4.day .p4-c2-night-only {
  display: none !important;
}
body.p4.night .p4-c2-day-only {
  display: none !important;
}

/* Ensure the background shows up in available mode and hides in busy/holiday modes */
body.p4.available-mode .p4-c2-available-bg,
body.p4.busy-mode .p4-c2-available-bg {
  display: block !important;
}
body.p4.holiday-mode .p4-c2-available-bg {
  display: block !important;
}

/* Overlay course content directly on top of the room background */
#p4Course2 .p4-wrap {
  position: relative !important;
  padding-top: 80px !important; /* Normal padding, sitting on top of the bg */
  padding-left: 16px !important;
  padding-right: 16px !important;
  padding-bottom: 80px !important;
  box-sizing: border-box !important;
  width: 100% !important;
  pointer-events: none !important;
  z-index: 5 !important;
}
#p4Course2 .p4-wrap * {
  pointer-events: auto !important;
}

/* Specific section background properties for p4Course2 */
body.p4.day.available-mode #p4Course2,
body.p4.day.busy-mode #p4Course2 {
  background: #f3f4f6 !important;
  position: relative !important;
  overflow: hidden !important;
  padding: 0 !important;
}
body.p4.night.available-mode #p4Course2,
body.p4.night.busy-mode #p4Course2 {
  background: #090d16 !important;
  position: relative !important;
  overflow: hidden !important;
  padding: 0 !important;
}

/* Neon glow pulsing effect for night mode accents */
@keyframes p4C2NeonPulse {
  0%, 100% { opacity: 0.55; }
  50% { opacity: 0.85; }
}
body.p4.night.available-mode:not(.relaxed-mode) .p4-c2-neon-glow {
  animation: p4C2NeonPulse 3s infinite ease-in-out;
}
body.relaxed-mode .p4-c2-neon-glow {
  animation: none !important;
  opacity: 0.75 !important;
}




/* ──────────────────────────────────────────────────────────
   COURSE 2 AVAILABLE MODE — 10+ BOARDROOM INTERACTIVE STYLES
   ────────────────────────────────────────────────────────── */

/* 1. Common Hover & Layout for Boardroom Interactives */
.p4-c2-interactive {
  transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), filter 0.4s ease;
  transform-origin: center center;
}

/* Hover scales up and glows elements slightly */
.p4-c2-interactive:hover {
  transform: scale(1.03);
  filter: drop-shadow(0 4px 12px rgba(56, 189, 248, 0.25));
}
body.p4.night .p4-c2-interactive:hover {
  filter: drop-shadow(0 0 15px rgba(6, 182, 212, 0.65));
}

/* Specific transform origins for perspective-friendly scaling */
.p4-c2-tablet1 { transform-origin: 270px 530px; }
.p4-c2-tablet2 { transform-origin: 930px 530px; }
.p4-c2-document { transform-origin: 590px 535px; }
.p4-c2-glass { transform-origin: 1060px 550px; }
.p4-c2-coffee { transform-origin: 1125px 480px; }
.p4-c2-lamp { transform-origin: 125px 510px; }
.p4-c2-laptop { transform-origin: 395px 530px; }
.p4-c2-carafe { transform-origin: 995px 560px; }
.p4-c2-screen { transform-origin: 150px 120px; }
.p4-c2-clock { transform-origin: 320px 90px; }
.p4-c2-ac { transform-origin: 975px 52px; }



















/* 13. Settle / Ending States transitions */
.p4-c2-interactive.ending {
  transition: transform 1.2s cubic-bezier(0.25, 0.8, 0.25, 1);
  transform: rotate(0deg) scale(1);
}


.p4-c2-document.ending .doc-pen-group {
  transform: rotate(0deg) translate(0, 0);
  transition: transform 1.2s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* 14. Relaxed Mode overrides to freeze animations and heavy visual transitions */
body.relaxed-mode .p4-c2-interactive,
body.relaxed-mode .p4-c2-interactive * {
  animation: none !important;
  transition: none !important;
  transform: none !important;
}
body.relaxed-mode .screen-content,
body.relaxed-mode .ac-wind-lines,
body.relaxed-mode .coffee-stream,
body.relaxed-mode .coffee-steam,
body.relaxed-mode .lamp-beam,
body.relaxed-mode .lamp-dust,
body.relaxed-mode .laptop-open-screen,
body.relaxed-mode .carafe-day-stream-outer {
  opacity: 0 !important;
}
body.relaxed-mode .laptop-closed-lid {
  opacity: 1 !important;
}


/* ──────────────────────────────────────────────────────────
   COURSE 2 — SMART SCREEN (Redesigned Premium Ultra-Wide)
   ────────────────────────────────────────────────────────── */

/* ── Continuous Idle Animations (Always Playing) ── */

/* Screen: Ambient logo breathe (subtle heartbeat pulse) */
.p4-c2-screen .screen-idle-logo {
  animation: p4C2ScreenLogoPulse 4s ease-in-out infinite;
}
@keyframes p4C2ScreenLogoPulse {
  0%, 100% { opacity: 0.15; transform: scale(1); }
  50% { opacity: 0.35; transform: scale(1.05); }
}

/* Screen: Scan line sweeps vertically down the display */
.p4-c2-screen .screen-scanline {
  animation: p4C2ScreenScanline 6s linear infinite;
}
@keyframes p4C2ScreenScanline {
  0% { transform: translateY(-30px); opacity: 0; }
  10% { opacity: 0.3; }
  90% { opacity: 0.3; }
  100% { transform: translateY(105px); opacity: 0; }
}

/* Screen: Status bar slowly fills and resets */
.p4-c2-screen .screen-status-bar {
  animation: p4C2StatusBarFill 8s ease-in-out infinite;
}
@keyframes p4C2StatusBarFill {
  0% { width: 30px; fill: #1e3a5f; }
  50% { width: 180px; fill: #0ea5e9; }
  100% { width: 30px; fill: #1e3a5f; }
}

/* Screen: Corner ambient glow shift */
.p4-c2-screen .screen-ambient-glow {
  animation: p4C2AmbientGlowL 5s ease-in-out infinite alternate;
}
.p4-c2-screen .screen-ambient-glow-r {
  animation: p4C2AmbientGlowR 7s ease-in-out infinite alternate;
}
@keyframes p4C2AmbientGlowL {
  0% { opacity: 0.03; r: 12; }
  100% { opacity: 0.08; r: 20; }
}
@keyframes p4C2AmbientGlowR {
  0% { opacity: 0.03; r: 12; }
  100% { opacity: 0.08; r: 20; }
}

/* Screen: Power LED dim breathe */
.p4-c2-screen .screen-power-led {
  animation: p4C2PowerLedBreathe 3s ease-in-out infinite;
}
@keyframes p4C2PowerLedBreathe {
  0%, 100% { fill: #334155; }
  50% { fill: #22c55e; opacity: 0.8; }
}

/* Night mode: Neon rim glow pulses */
body.p4.night.available-mode .p4-c2-screen .screen-night-glow {
  opacity: 0.25;
  animation: p4C2ScreenNeonRim 3s ease-in-out infinite alternate;
}
@keyframes p4C2ScreenNeonRim {
  0% { opacity: 0.15; stroke-width: 0.8; }
  100% { opacity: 0.4; stroke-width: 1.5; }
}

/* ── Interactive Click Animations (Active State) ── */

/* Webcam LED turns green (recording) */
.p4-c2-screen.active .screen-webcam-dot {
  fill: #22c55e;
  animation: p4C2WebcamBlink 0.6s infinite alternate;
}
@keyframes p4C2WebcamBlink {
  0% { fill: #22c55e; opacity: 1; }
  100% { fill: #4ade80; opacity: 0.5; }
}

/* Power LED turns solid bright green */
.p4-c2-screen.active .screen-power-led {
  fill: #22c55e;
  animation: none;
}

/* Hide idle content, show dashboard */
.p4-c2-screen .screen-content {
  transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
.p4-c2-screen.active .screen-idle-content {
  opacity: 0;
  transition: opacity 0.3s ease;
}
.p4-c2-screen.active .screen-content {
  opacity: 1;
}

/* KPI cards slide in from left with stagger */
.p4-c2-screen.active .screen-kpi-card {
  animation: p4C2KpiSlideIn 0.5s cubic-bezier(0.25, 0.8, 0.25, 1) both;
}
.p4-c2-screen.active .screen-kpi-panel > g:nth-child(2) .screen-kpi-card,
.p4-c2-screen.active .screen-kpi-card:nth-of-type(2) { animation-delay: 0.1s; }
.p4-c2-screen.active .screen-kpi-panel > g:nth-child(3) .screen-kpi-card,
.p4-c2-screen.active .screen-kpi-card:nth-of-type(3) { animation-delay: 0.2s; }
@keyframes p4C2KpiSlideIn {
  0% { transform: translateX(-15px); opacity: 0; }
  100% { transform: translateX(0); opacity: 1; }
}

/* KPI value numbers counting shimmer */
.p4-c2-screen.active .screen-kpi-val {
  animation: p4C2KpiValuePulse 1.5s ease-in-out infinite alternate;
}
@keyframes p4C2KpiValuePulse {
  0% { opacity: 0.8; }
  100% { opacity: 1; filter: brightness(1.3); }
}

/* Chart line draws itself progressively */
.p4-c2-screen.active .screen-chart-line {
  stroke-dasharray: 300;
  stroke-dashoffset: 300;
  animation: p4C2ChartLineDraw 2s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
@keyframes p4C2ChartLineDraw {
  to { stroke-dashoffset: 0; }
}

/* Area fill fades in after line draws */
.p4-c2-screen.active .screen-area-fill {
  animation: p4C2AreaFadeIn 1s ease 1.5s both;
}
@keyframes p4C2AreaFadeIn {
  0% { opacity: 0; }
  100% { opacity: 0.15; }
}

/* Data dots pop in with bounce */
.p4-c2-screen.active .screen-data-dot {
  animation: p4C2DotPop 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
}
.p4-c2-screen.active .screen-data-dot:nth-child(2) { animation-delay: 0.6s; }
.p4-c2-screen.active .screen-data-dot:nth-child(3) { animation-delay: 0.9s; }
.p4-c2-screen.active .screen-data-dot:nth-child(4) { animation-delay: 1.2s; }
@keyframes p4C2DotPop {
  0% { r: 0; opacity: 0; }
  60% { r: 3; }
  100% { r: 2; opacity: 1; }
}

/* Bar chart bars grow from bottom with stagger */
.p4-c2-screen.active .screen-bar {
  transform-origin: center bottom;
  animation: p4C2BarGrow 0.6s cubic-bezier(0.25, 0.8, 0.25, 1) both;
}
.p4-c2-screen.active .screen-bar:nth-child(2) { animation-delay: 0.1s; }
.p4-c2-screen.active .screen-bar:nth-child(3) { animation-delay: 0.2s; }
.p4-c2-screen.active .screen-bar:nth-child(4) { animation-delay: 0.3s; }
.p4-c2-screen.active .screen-bar:nth-child(5) { animation-delay: 0.4s; }
@keyframes p4C2BarGrow {
  0% { transform: scaleY(0); opacity: 0; }
  60% { transform: scaleY(1.15); }
  100% { transform: scaleY(1); opacity: 1; }
}

/* Ticker dots pulse */
.p4-c2-screen.active .screen-ticker-dot {
  animation: p4C2TickerDotPulse 1s ease-in-out infinite alternate;
}
.p4-c2-screen.active .screen-ticker-dot:nth-child(3) { animation-delay: 0.3s; }
.p4-c2-screen.active .screen-ticker-dot:nth-child(5) { animation-delay: 0.6s; }
@keyframes p4C2TickerDotPulse {
  0% { opacity: 0.5; r: 1.5; }
  100% { opacity: 1; r: 2.5; }
}

/* Night mode: Screen bezel glows brighter when active */
body.p4.night .p4-c2-screen.active .screen-night-glow {
  opacity: 0.6;
  animation: none;
}

/* ── Ending/Settle Animation ── */
.p4-c2-screen.ending .screen-content {
  opacity: 0;
  transition: opacity 0.8s ease-out;
}
.p4-c2-screen.ending .screen-idle-content {
  opacity: 1;
  transition: opacity 1s ease-in 0.4s;
}
.p4-c2-screen.ending .screen-power-led {
  animation: p4C2PowerLedBreathe 3s ease-in-out infinite;
}
.p4-c2-screen.ending {
  animation: p4C2ScreenSettle 1.2s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
@keyframes p4C2ScreenSettle {
  0% { transform: scale(1.01); }
  40% { transform: scale(0.995); }
  70% { transform: scale(1.003); }
  100% { transform: scale(1); }
}

/* ──────────────────────────────────────────────────────────
   COURSE 2 — WALL CLOCK (Redesigned Premium Boardroom Timepiece)
   ────────────────────────────────────────────────────────── */

/* ── Continuous Idle Animations (Always Playing) ── */

/* Second hand ticks continuously (60s per full rotation) */
.p4-c2-clock .clock-second-hand-group {
  transform-origin: 320px 90px;
  animation: p4C2SecondTick 60s linear infinite;
}
@keyframes p4C2SecondTick {
  to { transform: rotate(360deg); }
}

/* Pendulum arm swings left-right */
.p4-c2-clock .clock-pendulum-arm {
  transform-origin: 320px 118px;
  animation: p4C2PendulumSwing 1s cubic-bezier(0.4, 0, 0.6, 1) infinite alternate;
}
@keyframes p4C2PendulumSwing {
  0% { transform: rotate(-12deg); }
  100% { transform: rotate(12deg); }
}

/* Glass glare subtle shimmer */
.p4-c2-clock .clock-glass-glare {
  animation: p4C2GlassShimmer 6s ease-in-out infinite alternate;
}
@keyframes p4C2GlassShimmer {
  0% { opacity: 0.12; }
  100% { opacity: 0.25; }
}

/* Wall shadow slight breathe */
.p4-c2-clock .clock-shadow {
  animation: p4C2ClockShadowBreathe 4s ease-in-out infinite alternate;
}
@keyframes p4C2ClockShadowBreathe {
  0% { ry: 3; opacity: 0.06; }
  100% { ry: 5; opacity: 0.1; }
}

/* Night: neon rim glow pulse */
body.p4.night.available-mode .p4-c2-clock .clock-night-glow {
  opacity: 0.2;
  animation: p4C2ClockNeonGlow 3s ease-in-out infinite alternate;
}
@keyframes p4C2ClockNeonGlow {
  0% { opacity: 0.12; stroke-width: 0.7; }
  100% { opacity: 0.35; stroke-width: 1.4; }
}

/* Clock hands default positions and transforms */
.p4-c2-clock .clock-hour {
  transform-origin: 320px 90px;
  transition: transform 0.4s ease;
}
.p4-c2-clock .clock-min {
  transform-origin: 320px 90px;
  transition: transform 0.4s ease;
}

/* ── Interactive Click Animations (Active State) ── */

/* Active: All three hands spin at different frenetic speeds */
.p4-c2-clock.active .clock-hour {
  animation: p4C2ClockHourSpin 2s linear infinite;
}
.p4-c2-clock.active .clock-min {
  animation: p4C2ClockMinSpin 0.5s linear infinite;
}
.p4-c2-clock.active .clock-second-hand-group {
  animation: p4C2ClockSecSpin 0.15s linear infinite;
}
@keyframes p4C2ClockHourSpin {
  to { transform: rotate(360deg); }
}
@keyframes p4C2ClockMinSpin {
  to { transform: rotate(360deg); }
}
@keyframes p4C2ClockSecSpin {
  to { transform: rotate(360deg); }
}

/* Active: Outer rim vibrates/wiggles excitedly */
.p4-c2-clock.active .clock-outer-rim {
  animation: p4C2ClockRimVibrate 0.08s linear infinite alternate;
}
@keyframes p4C2ClockRimVibrate {
  0% { transform: translate(-0.3px, 0.2px); }
  100% { transform: translate(0.3px, -0.2px); }
}

/* Active: Pendulum swings much faster and wider */
.p4-c2-clock.active .clock-pendulum-arm {
  animation: p4C2PendulumFrantic 0.2s cubic-bezier(0.4, 0, 0.6, 1) infinite alternate;
}
@keyframes p4C2PendulumFrantic {
  0% { transform: rotate(-25deg); }
  100% { transform: rotate(25deg); }
}

/* Active: Glass glare flashes */
.p4-c2-clock.active .clock-glass-glare {
  animation: p4C2GlassFlash 0.5s ease-in-out infinite alternate;
}
@keyframes p4C2GlassFlash {
  0% { opacity: 0.1; }
  100% { opacity: 0.4; }
}

/* Night active: Neon rim flares bright */
body.p4.night .p4-c2-clock.active .clock-night-glow {
  opacity: 0.7;
  animation: p4C2ClockNeonFlare 0.3s infinite alternate;
}
@keyframes p4C2ClockNeonFlare {
  0% { opacity: 0.5; stroke: #0ea5e9; }
  100% { opacity: 0.9; stroke: #22d3ee; }
}

/* ── Ending/Settle Animation ── */

/* Ending: Whole clock does a springy wobble settle */
.p4-c2-clock.ending {
  animation: p4C2ClockSettle 1.2s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
@keyframes p4C2ClockSettle {
  0% { transform: rotate(3deg) scale(1.02); }
  25% { transform: rotate(-2deg) scale(0.99); }
  50% { transform: rotate(1.5deg) scale(1.005); }
  75% { transform: rotate(-0.5deg) scale(0.998); }
  100% { transform: rotate(0deg) scale(1); }
}

/* Ending: Hands decelerate smoothly back */
.p4-c2-clock.ending .clock-hour {
  transform: rotate(0deg);
  transition: transform 1.2s cubic-bezier(0.25, 0.8, 0.25, 1);
  animation: none;
}
.p4-c2-clock.ending .clock-min {
  transform: rotate(0deg);
  transition: transform 1s cubic-bezier(0.25, 0.8, 0.25, 1);
  animation: none;
}
/* Second hand resumes normal 60s rotation */
.p4-c2-clock.ending .clock-second-hand-group {
  animation: p4C2SecondTick 60s linear infinite;
  transition: none;
}

/* Ending: Pendulum returns to normal */
.p4-c2-clock.ending .clock-pendulum-arm {
  animation: p4C2PendulumSwing 1s cubic-bezier(0.4, 0, 0.6, 1) infinite alternate;
}

/* Ending: Rim stops vibrating */
.p4-c2-clock.ending .clock-outer-rim {
  animation: none;
  transform: none;
}

/* ──────────────────────────────────────────────────────────
   RELAXED MODE OVERRIDES — Screen & Clock Idle Freeze
   ────────────────────────────────────────────────────────── */
body.relaxed-mode .p4-c2-screen .screen-idle-logo,
body.relaxed-mode .p4-c2-screen .screen-scanline,
body.relaxed-mode .p4-c2-screen .screen-status-bar,
body.relaxed-mode .p4-c2-screen .screen-ambient-glow,
body.relaxed-mode .p4-c2-screen .screen-ambient-glow-r,
body.relaxed-mode .p4-c2-screen .screen-power-led,
body.relaxed-mode .p4-c2-screen .screen-night-glow,
body.relaxed-mode .p4-c2-clock .clock-second-hand-group,
body.relaxed-mode .p4-c2-clock .clock-pendulum-arm,
body.relaxed-mode .p4-c2-clock .clock-glass-glare,
body.relaxed-mode .p4-c2-clock .clock-shadow,
body.relaxed-mode .p4-c2-clock .clock-night-glow {
  animation: none !important;
}


/* ──────────────────────────────────────────────────────────
   COURSE 2 — AIR CONDITIONER (Redesigned Premium Executive AC)
   Day & Night have ENTIRELY DIFFERENT animations
   ────────────────────────────────────────────────────────── */

/* ══════════════════════════════════════════════════════════
   SHARED DEFAULTS
   ══════════════════════════════════════════════════════════ */
.p4-c2-ac .ac-flap {
  transform-origin: 975px 64px;
  transition: transform 0.6s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.p4-c2-ac .ac-lcd-text {
  transition: fill 0.4s ease;
}

/* ══════════════════════════════════════════════════════════
   DAY MODE — CONTINUOUS IDLE ANIMATIONS
   Theme: Gentle, breezy, warm office comfort
   ══════════════════════════════════════════════════════════ */

/* LED breathes soft green (eco mode indicator) */
body.p4.day.available-mode:not(.relaxed-mode) .p4-c2-ac .ac-led {
  animation: p4C2AcLedDayBreathe 4s ease-in-out infinite;
}
@keyframes p4C2AcLedDayBreathe {
  0%, 100% { fill: #86efac; opacity: 0.6; }
  50% { fill: #22c55e; opacity: 1; }
}

/* Louver flap gently oscillates (auto-swing mode) */
body.p4.day.available-mode:not(.relaxed-mode) .p4-c2-ac .ac-flap {
  animation: p4C2AcFlapDaySwing 6s ease-in-out infinite;
}
@keyframes p4C2AcFlapDaySwing {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(5deg); }
  75% { transform: rotate(-3deg); }
}

/* Day wind streams visible at low opacity, gentle downward flow */
body.p4.day.available-mode:not(.relaxed-mode) .p4-c2-ac .ac-wind-day {
  opacity: 0.35;
}
body.p4.day.available-mode:not(.relaxed-mode) .p4-c2-ac .ac-wind-d {
  animation: p4C2AcWindDayIdle 3s linear infinite;
}
body.p4.day.available-mode:not(.relaxed-mode) .p4-c2-ac .ac-wind-d.w2 { animation-delay: -0.5s; }
body.p4.day.available-mode:not(.relaxed-mode) .p4-c2-ac .ac-wind-d.w3 { animation-delay: -1s; }
body.p4.day.available-mode:not(.relaxed-mode) .p4-c2-ac .ac-wind-d.w4 { animation-delay: -1.5s; }
body.p4.day.available-mode:not(.relaxed-mode) .p4-c2-ac .ac-wind-d.w5 { animation-delay: -2s; }
@keyframes p4C2AcWindDayIdle {
  to { stroke-dashoffset: -15; }
}

/* Day particles drift gently downward */
body.p4.day.available-mode:not(.relaxed-mode) .p4-c2-ac .ac-particle-d {
  animation: p4C2AcParticleDayDrift 5s ease-in-out infinite;
}
body.p4.day.available-mode:not(.relaxed-mode) .p4-c2-ac .ac-particle-d.dp2 { animation-delay: -1.2s; }
body.p4.day.available-mode:not(.relaxed-mode) .p4-c2-ac .ac-particle-d.dp3 { animation-delay: -2.5s; }
body.p4.day.available-mode:not(.relaxed-mode) .p4-c2-ac .ac-particle-d.dp4 { animation-delay: -3.8s; }
@keyframes p4C2AcParticleDayDrift {
  0% { transform: translate(0, 0); opacity: 0; }
  20% { opacity: 0.5; }
  80% { opacity: 0.4; }
  100% { transform: translate(3px, 25px); opacity: 0; }
}

/* LCD temp display subtle pulse */
body.p4.day.available-mode:not(.relaxed-mode) .p4-c2-ac .ac-lcd-text {
  animation: p4C2AcLcdDayPulse 5s ease-in-out infinite;
}
@keyframes p4C2AcLcdDayPulse {
  0%, 100% { opacity: 0.85; }
  50% { opacity: 1; }
}

/* Wall shadow gentle breathe */
body.p4.day.available-mode:not(.relaxed-mode) .p4-c2-ac .ac-wall-shadow {
  animation: p4C2AcShadowDayBreathe 5s ease-in-out infinite alternate;
}
@keyframes p4C2AcShadowDayBreathe {
  0% { opacity: 0.04; }
  100% { opacity: 0.08; }
}


/* ══════════════════════════════════════════════════════════
   NIGHT MODE — CONTINUOUS IDLE ANIMATIONS
   Theme: Cool, futuristic, neon-accented sleep mode
   ══════════════════════════════════════════════════════════ */

/* LED pulses slow cyan (night eco / sleep indicator) */
body.p4.night.available-mode:not(.relaxed-mode) .p4-c2-ac .ac-led {
  animation: p4C2AcLedNightPulse 3s ease-in-out infinite;
}
@keyframes p4C2AcLedNightPulse {
  0%, 100% { fill: #164e63; opacity: 0.4; }
  50% { fill: #0ea5e9; opacity: 1; }
}

/* Louver barely moves — gentle sleep breathing rhythm */
body.p4.night.available-mode:not(.relaxed-mode) .p4-c2-ac .ac-flap {
  animation: p4C2AcFlapNightBreathe 8s ease-in-out infinite;
}
@keyframes p4C2AcFlapNightBreathe {
  0%, 100% { transform: rotate(0deg); }
  50% { transform: rotate(2deg); }
}

/* Night wind streams visible at low opacity, slow ethereal drift */
body.p4.night.available-mode:not(.relaxed-mode) .p4-c2-ac .ac-wind-night {
  opacity: 0.25;
}
body.p4.night.available-mode:not(.relaxed-mode) .p4-c2-ac .ac-wind-n {
  animation: p4C2AcWindNightIdle 5s linear infinite;
}
body.p4.night.available-mode:not(.relaxed-mode) .p4-c2-ac .ac-wind-n.w2 { animation-delay: -0.8s; }
body.p4.night.available-mode:not(.relaxed-mode) .p4-c2-ac .ac-wind-n.w3 { animation-delay: -1.6s; }
body.p4.night.available-mode:not(.relaxed-mode) .p4-c2-ac .ac-wind-n.w4 { animation-delay: -2.5s; }
body.p4.night.available-mode:not(.relaxed-mode) .p4-c2-ac .ac-wind-n.w5 { animation-delay: -3.3s; }
@keyframes p4C2AcWindNightIdle {
  to { stroke-dashoffset: -18; }
}

/* Night particles glow and float like neon fireflies */
body.p4.night.available-mode:not(.relaxed-mode) .p4-c2-ac .ac-particle-n {
  animation: p4C2AcParticleNightFloat 6s ease-in-out infinite;
}
body.p4.night.available-mode:not(.relaxed-mode) .p4-c2-ac .ac-particle-n.np2 { animation-delay: -1s; }
body.p4.night.available-mode:not(.relaxed-mode) .p4-c2-ac .ac-particle-n.np3 { animation-delay: -2s; }
body.p4.night.available-mode:not(.relaxed-mode) .p4-c2-ac .ac-particle-n.np4 { animation-delay: -3.2s; }
body.p4.night.available-mode:not(.relaxed-mode) .p4-c2-ac .ac-particle-n.np5 { animation-delay: -4.5s; }
@keyframes p4C2AcParticleNightFloat {
  0% { transform: translate(0, 0) scale(1); opacity: 0; }
  15% { opacity: 0.6; }
  50% { transform: translate(-5px, 20px) scale(1.3); opacity: 0.4; }
  85% { opacity: 0.5; }
  100% { transform: translate(3px, 40px) scale(0.6); opacity: 0; }
}

/* LCD display flickers subtly (night digital aesthetic) */
body.p4.night.available-mode:not(.relaxed-mode) .p4-c2-ac .ac-lcd-text {
  animation: p4C2AcLcdNightFlicker 4s ease-in-out infinite;
}
@keyframes p4C2AcLcdNightFlicker {
  0%, 100% { opacity: 0.8; }
  48% { opacity: 0.85; }
  50% { opacity: 0.4; }
  52% { opacity: 0.9; }
  80% { opacity: 1; }
}

/* Neon outline glow breathes */
body.p4.night.available-mode:not(.relaxed-mode) .p4-c2-ac .ac-neon-glow {
  opacity: 0.15;
  animation: p4C2AcNeonGlowIdle 4s ease-in-out infinite alternate;
}
@keyframes p4C2AcNeonGlowIdle {
  0% { opacity: 0.1; stroke-width: 0.6; }
  100% { opacity: 0.3; stroke-width: 1.2; }
}

/* Night shadow glow (cyan tint) */
body.p4.night.available-mode:not(.relaxed-mode) .p4-c2-ac .ac-wall-shadow {
  animation: p4C2AcShadowNightGlow 4s ease-in-out infinite alternate;
}
@keyframes p4C2AcShadowNightGlow {
  0% { opacity: 0.02; }
  100% { opacity: 0.06; }
}


/* ══════════════════════════════════════════════════════════
   DAY MODE — INTERACTIVE CLICK ANIMATIONS (Active State)
   Theme: Full-power turbo blast — cool refreshing rush
   ══════════════════════════════════════════════════════════ */

/* LED turns bright green and pulses fast */
body.p4.day .p4-c2-ac.active .ac-led {
  animation: p4C2AcLedDayActive 0.4s infinite alternate !important;
}
@keyframes p4C2AcLedDayActive {
  0% { fill: #22c55e; r: 1.8; }
  100% { fill: #4ade80; r: 2.5; }
}

/* Louver flap swings wide open */
body.p4.day .p4-c2-ac.active .ac-flap {
  animation: p4C2AcFlapDayBlast 0.8s ease-in-out infinite alternate !important;
}
@keyframes p4C2AcFlapDayBlast {
  0% { transform: rotate(12deg); }
  50% { transform: rotate(18deg); }
  100% { transform: rotate(8deg); }
}

/* Day wind blasts out strongly with high opacity */
body.p4.day .p4-c2-ac.active .ac-wind-day {
  opacity: 0.85 !important;
}
body.p4.day .p4-c2-ac.active .ac-wind-d {
  animation: p4C2AcWindDayBlast 0.4s linear infinite !important;
  stroke-width: 2.5;
}
@keyframes p4C2AcWindDayBlast {
  to { stroke-dashoffset: -25; }
}

/* Day particles rush downward rapidly */
body.p4.day .p4-c2-ac.active .ac-particle-d {
  animation: p4C2AcParticleDayRush 1.2s linear infinite !important;
}
@keyframes p4C2AcParticleDayRush {
  0% { transform: translate(0, -5px); opacity: 0; }
  15% { opacity: 0.7; }
  100% { transform: translate(2px, 50px); opacity: 0; }
}

/* LCD flashes "HI" / turbo indicator */
body.p4.day .p4-c2-ac.active .ac-lcd-text {
  animation: p4C2AcLcdDayFlash 0.6s steps(2) infinite !important;
}
@keyframes p4C2AcLcdDayFlash {
  0%, 49% { fill: #22c55e; opacity: 1; }
  50%, 100% { fill: #86efac; opacity: 0.6; }
}

/* Body vibrates slightly from turbo motor */
body.p4.day .p4-c2-ac.active .ac-body {
  animation: p4C2AcBodyDayVibrate 0.06s linear infinite alternate;
}
@keyframes p4C2AcBodyDayVibrate {
  0% { transform: translate(0, 0.3px); }
  100% { transform: translate(0, -0.3px); }
}

/* Grille slats shimmer from airflow */
body.p4.day .p4-c2-ac.active .ac-grille {
  animation: p4C2AcGrilleDayShimmer 0.8s ease-in-out infinite alternate;
}
@keyframes p4C2AcGrilleDayShimmer {
  0% { opacity: 0.3; }
  100% { opacity: 0.6; }
}


/* ══════════════════════════════════════════════════════════
   NIGHT MODE — INTERACTIVE CLICK ANIMATIONS (Active State)
   Theme: Cyberpunk overload — neon surge, system diagnostic
   ══════════════════════════════════════════════════════════ */

/* LED rapid-flashes between cyan and magenta (diagnostic scan) */
body.p4.night .p4-c2-ac.active .ac-led {
  animation: p4C2AcLedNightScan 0.2s infinite alternate !important;
}
@keyframes p4C2AcLedNightScan {
  0% { fill: #0ea5e9; r: 2; }
  50% { fill: #d946ef; r: 2.5; }
  100% { fill: #22d3ee; r: 1.8; }
}

/* Louver flap does rapid mechanical shutter clicks */
body.p4.night .p4-c2-ac.active .ac-flap {
  animation: p4C2AcFlapNightShutter 0.3s steps(4) infinite !important;
}
@keyframes p4C2AcFlapNightShutter {
  0% { transform: rotate(0deg); }
  25% { transform: rotate(15deg); }
  50% { transform: rotate(-5deg); }
  75% { transform: rotate(20deg); }
  100% { transform: rotate(3deg); }
}

/* Night wind blasts with neon intensity */
body.p4.night .p4-c2-ac.active .ac-wind-night {
  opacity: 0.9 !important;
}
body.p4.night .p4-c2-ac.active .ac-wind-n {
  animation: p4C2AcWindNightSurge 0.25s linear infinite !important;
  stroke-width: 2.2;
}
@keyframes p4C2AcWindNightSurge {
  to { stroke-dashoffset: -20; }
}

/* Night particles explode outward like neon sparks */
body.p4.night .p4-c2-ac.active .ac-particle-n {
  animation: p4C2AcParticleNightSpark 0.8s ease-out infinite !important;
}
@keyframes p4C2AcParticleNightSpark {
  0% { transform: translate(0, 0) scale(0.5); opacity: 0; }
  20% { opacity: 0.9; }
  100% { transform: translate(var(--nx, 5px), 45px) scale(1.8); opacity: 0; }
}
/* Stagger spark directions */
body.p4.night .p4-c2-ac.active .ac-particle-n.np1 { --nx: -8px; animation-delay: 0s !important; }
body.p4.night .p4-c2-ac.active .ac-particle-n.np2 { --nx: 3px; animation-delay: -0.15s !important; }
body.p4.night .p4-c2-ac.active .ac-particle-n.np3 { --nx: -4px; animation-delay: -0.3s !important; }
body.p4.night .p4-c2-ac.active .ac-particle-n.np4 { --nx: 7px; animation-delay: -0.45s !important; }
body.p4.night .p4-c2-ac.active .ac-particle-n.np5 { --nx: -6px; animation-delay: -0.6s !important; }

/* LCD rapid-cycles diagnostic codes */
body.p4.night .p4-c2-ac.active .ac-lcd-text {
  animation: p4C2AcLcdNightDiag 0.3s steps(3) infinite !important;
}
@keyframes p4C2AcLcdNightDiag {
  0%, 32% { fill: #0ea5e9; opacity: 1; }
  33%, 65% { fill: #d946ef; opacity: 0.7; }
  66%, 100% { fill: #22d3ee; opacity: 1; }
}

/* Neon outline flares bright with color cycling */
body.p4.night .p4-c2-ac.active .ac-neon-glow {
  opacity: 0.8 !important;
  animation: p4C2AcNeonFlare 0.5s infinite alternate !important;
}
@keyframes p4C2AcNeonFlare {
  0% { stroke: #0ea5e9; stroke-width: 1; opacity: 0.6; }
  50% { stroke: #d946ef; stroke-width: 1.8; opacity: 0.9; }
  100% { stroke: #22d3ee; stroke-width: 1.2; opacity: 0.7; }
}

/* Body shakes harder at night (high-power surge) */
body.p4.night .p4-c2-ac.active .ac-body {
  animation: p4C2AcBodyNightShake 0.04s linear infinite alternate;
}
@keyframes p4C2AcBodyNightShake {
  0% { transform: translate(-0.4px, 0.3px); }
  100% { transform: translate(0.4px, -0.3px); }
}

/* Grille flashes with neon backlight */
body.p4.night .p4-c2-ac.active .ac-grille {
  animation: p4C2AcGrilleNightFlash 0.5s ease-in-out infinite alternate;
}
@keyframes p4C2AcGrilleNightFlash {
  0% { opacity: 0.3; }
  100% { opacity: 0.7; }
}


/* ══════════════════════════════════════════════════════════
   ENDING / SETTLE ANIMATIONS (Shared Day & Night)
   ══════════════════════════════════════════════════════════ */

/* Whole AC does a springy settle wobble */
.p4-c2-ac.ending {
  animation: p4C2AcSettle 1.2s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
@keyframes p4C2AcSettle {
  0% { transform: translateY(-1px) scale(1.01); }
  30% { transform: translateY(0.5px) scale(0.995); }
  60% { transform: translateY(-0.3px) scale(1.003); }
  100% { transform: translateY(0) scale(1); }
}

/* Flap settles smoothly back to resting */
.p4-c2-ac.ending .ac-flap {
  transform: rotate(0deg) !important;
  transition: transform 1.2s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
  animation: none !important;
}

/* Wind fades out */
.p4-c2-ac.ending .ac-wind-day,
.p4-c2-ac.ending .ac-wind-night {
  opacity: 0 !important;
  transition: opacity 0.8s ease-out !important;
}

/* LED returns to idle */
.p4-c2-ac.ending .ac-led {
  animation: none !important;
  transition: fill 1s ease !important;
}

/* Body stops vibrating */
.p4-c2-ac.ending .ac-body {
  animation: none !important;
  transform: none !important;
}

/* Neon glow fades back */
.p4-c2-ac.ending .ac-neon-glow {
  opacity: 0 !important;
  transition: opacity 1s ease !important;
  animation: none !important;
}


/* ══════════════════════════════════════════════════════════
   RELAXED MODE OVERRIDES — AC Idle Freeze
   ══════════════════════════════════════════════════════════ */
body.relaxed-mode .p4-c2-ac .ac-led,
body.relaxed-mode .p4-c2-ac .ac-flap,
body.relaxed-mode .p4-c2-ac .ac-wind-d,
body.relaxed-mode .p4-c2-ac .ac-wind-n,
body.relaxed-mode .p4-c2-ac .ac-particle-d,
body.relaxed-mode .p4-c2-ac .ac-particle-n,
body.relaxed-mode .p4-c2-ac .ac-lcd-text,
body.relaxed-mode .p4-c2-ac .ac-neon-glow,
body.relaxed-mode .p4-c2-ac .ac-wall-shadow,
body.relaxed-mode .p4-c2-ac .ac-body,
body.relaxed-mode .p4-c2-ac .ac-grille {
  animation: none !important;
}
body.relaxed-mode .p4-c2-ac .ac-wind-day,
body.relaxed-mode .p4-c2-ac .ac-wind-night {
  opacity: 0 !important;
}


/* ──────────────────────────────────────────────────────────
   COURSE 2 — TABLET 1 (Left - Executive Operations Console)
   ────────────────────────────────────────────────────────── */

/* ── Day Mode Styling & Animations (Warm Corporate Theme) ── */

/* Wifi status signal pulse (continuous) */
body.p4.day.available-mode:not(.relaxed-mode) .t1-day-wifi {
  animation: t1DayWifiPulse 2s ease-in-out infinite;
}
body.p4.day.available-mode:not(.relaxed-mode) .t1-day-wifi:nth-child(1) { animation-delay: 0.2s; }
body.p4.day.available-mode:not(.relaxed-mode) .t1-day-wifi:nth-child(2) { animation-delay: 0.5s; }
body.p4.day.available-mode:not(.relaxed-mode) .t1-day-wifi:nth-child(3) { animation-delay: 0.8s; }
@keyframes t1DayWifiPulse {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 1; }
}

/* Typing cursor blink in Day Mode (continuous) */
body.p4.day.available-mode:not(.relaxed-mode) .t1-day-cursor {
  animation: t1DayCursorBlink 1s infinite step-end;
}
@keyframes t1DayCursorBlink {
  0%, 100% { opacity: 0; }
  50% { opacity: 1; }
}

/* Active State Interactions: Gantt Chart Bars Draw/Expand */
.p4-c2-tablet1.active .t1-gantt-bar {
  transform-origin: left center;
  animation: t1GanttBarGrow 1.5s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}
.p4-c2-tablet1.active .t1-gantt-blue { animation-delay: 0.1s; }
.p4-c2-tablet1.active .t1-gantt-orange { animation-delay: 0.3s; }
.p4-c2-tablet1.active .t1-gantt-teal { animation-delay: 0.5s; }
@keyframes t1GanttBarGrow {
  0% { transform: scaleX(0); opacity: 0; }
  100% { transform: scaleX(1); opacity: 1; }
}

/* Active State: Skewed Progress Arc Fills */
.p4-c2-tablet1.active .t1-day-progress-arc {
  stroke-dasharray: 120;
  stroke-dashoffset: 120;
  animation: t1DayArcFill 2s cubic-bezier(0.4, 0, 0.2, 1) forwards 0.3s;
}
@keyframes t1DayArcFill {
  to { stroke-dashoffset: 0; }
}

/* Active State: Alert Banner Slides Down */
.p4-c2-tablet1.active .t1-day-alert-banner {
  animation: t1DayAlertSlide 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards 0.8s;
}
@keyframes t1DayAlertSlide {
  0% { transform: translateY(-5px); opacity: 0; }
  100% { transform: translateY(0); opacity: 1; }
}

/* Active State: Floating Office Bubble Particles */
.p4-c2-tablet1.active .t1-day-bubble {
  animation: t1DayBubbleFloat 1.8s cubic-bezier(0.25, 0.8, 0.25, 1) forwards;
}
.p4-c2-tablet1.active .t1-day-bubble.b1 { animation-delay: 0.2s; }
.p4-c2-tablet1.active .t1-day-bubble.b2 { animation-delay: 0.5s; }
.p4-c2-tablet1.active .t1-day-bubble.b3 { animation-delay: 0.8s; }
.p4-c2-tablet1.active .t1-day-bubble.b4 { animation-delay: 1.1s; }
@keyframes t1DayBubbleFloat {
  0% { transform: translateY(0) scale(0); opacity: 0; }
  30% { opacity: 0.7; }
  100% { transform: translateY(-20px) scale(1.4); opacity: 0; }
}


/* ── Night Mode Styling & Animations (Cyber Network Security Theme) ── */

/* Bezel glowing cyan outline pulses (continuous) */
body.p4.night.available-mode:not(.relaxed-mode) .p4-c2-tablet1 .t1-neon-frame-glow {
  animation: t1NightRimPulse 3s ease-in-out infinite alternate;
}
@keyframes t1NightRimPulse {
  0% { opacity: 0.1; }
  100% { opacity: 0.45; }
}

/* Network nodes glow pulse (continuous) */
body.p4.night.available-mode:not(.relaxed-mode) .t1-night-node {
  animation: t1NightNodeBreathe 3s ease-in-out infinite alternate;
}
body.p4.night.available-mode:not(.relaxed-mode) .t1-night-node.n1 { animation-delay: 0s; }
body.p4.night.available-mode:not(.relaxed-mode) .t1-night-node.n2 { animation-delay: 0.6s; }
body.p4.night.available-mode:not(.relaxed-mode) .t1-night-node.n3 { animation-delay: 1.2s; }
body.p4.night.available-mode:not(.relaxed-mode) .t1-night-node.n4 { animation-delay: 1.8s; }
@keyframes t1NightNodeBreathe {
  0% { opacity: 0.5; filter: brightness(0.9); }
  100% { opacity: 1; filter: brightness(1.3); }
}

/* Data flows along connection links (continuous) */
body.p4.night.available-mode:not(.relaxed-mode) .t1-night-link {
  stroke-dasharray: 6, 6;
  animation: t1NightLinkFlow 1.5s linear infinite;
}
body.p4.night.available-mode:not(.relaxed-mode) .t1-night-link.l1 { animation-delay: 0s; }
body.p4.night.available-mode:not(.relaxed-mode) .t1-night-link.l2 { animation-delay: 0.3s; }
body.p4.night.available-mode:not(.relaxed-mode) .t1-night-link.l3 { animation-delay: 0.6s; }
body.p4.night.available-mode:not(.relaxed-mode) .t1-night-link.l4 { animation-delay: 0.9s; }
@keyframes t1NightLinkFlow {
  to { stroke-dashoffset: -12; }
}

/* Oscilloscope screen running wave (continuous) */
body.p4.night.available-mode:not(.relaxed-mode) .t1-night-oscilloscope {
  stroke-dasharray: 300;
  stroke-dashoffset: 300;
  animation: t1NightOscilloscopeRun 4s linear infinite;
}
@keyframes t1NightOscilloscopeRun {
  to { stroke-dashoffset: -300; }
}

/* Horizontal cybersecurity laser scanner (continuous) */
body.p4.night.available-mode:not(.relaxed-mode) .t1-night-scanbar {
  animation: t1NightLaserScan 6s ease-in-out infinite;
}
@keyframes t1NightLaserScan {
  0%, 100% { transform: translateX(0); opacity: 0.1; }
  50% { transform: translateX(110px); opacity: 0.7; }
}

/* Active State: Cyber ripples pulse outward from center */
.p4-c2-tablet1.active .t1-night-ripple {
  animation: t1NightRippleExpand 1.5s cubic-bezier(0.1, 0.8, 0.3, 1) infinite;
}
.p4-c2-tablet1.active .t1-night-ripple.r2 { animation-delay: 0.75s; }
@keyframes t1NightRippleExpand {
  0% { transform: scale(0.5); opacity: 0; }
  15% { opacity: 0.8; }
  100% { transform: scale(1.5); opacity: 0; }
}

/* Active State: Cyber Threat shield pop */
.p4-c2-tablet1.active .t1-night-shield {
  animation: t1CyberShieldPop 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards 0.2s;
}
@keyframes t1CyberShieldPop {
  0% { transform: scale(0); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

/* Active State: Blinking lock warning LED inside shield */
.p4-c2-tablet1.active .t1-night-lock {
  animation: t1CyberLockBlink 0.5s ease-in-out infinite alternate;
}
@keyframes t1CyberLockBlink {
  0% { fill: #f43f5e; }
  100% { fill: #ffffff; filter: drop-shadow(0 0 4px #f43f5e); }
}

/* Active State: Holographic projected particles float up and out */
.p4-c2-tablet1.active .t1-holo-particles {
  animation: t1HoloParticlesFade 3s cubic-bezier(0.25, 0.8, 0.25, 1) forwards;
}
@keyframes t1HoloParticlesFade {
  0% { opacity: 0; transform: translateY(8px); }
  20% { opacity: 1; }
  80% { opacity: 1; }
  100% { opacity: 0; transform: translateY(-22px); }
}
.p4-c2-tablet1.active .t1-holo-ring.h1 { animation: t1HoloRingSpin1 3.5s linear infinite; }
.p4-c2-tablet1.active .t1-holo-ring.h2 { animation: t1HoloRingSpin2 3.5s linear infinite; }
@keyframes t1HoloRingSpin1 { to { transform: rotate(360deg); } }
@keyframes t1HoloRingSpin2 { to { transform: rotate(-360deg); } }

.p4-c2-tablet1.active .t1-holo-node.hn1 { animation: t1HoloNodeJump 1.2s ease-in-out infinite alternate; }
.p4-c2-tablet1.active .t1-holo-node.hn2 { animation: t1HoloNodeJump 1.2s ease-in-out infinite alternate 0.4s; }
.p4-c2-tablet1.active .t1-holo-node.hn3 { animation: t1HoloNodeJump 1.2s ease-in-out infinite alternate 0.8s; }
@keyframes t1HoloNodeJump {
  0% { transform: translateY(0) scale(0.9); filter: brightness(1); }
  100% { transform: translateY(-5px) scale(1.2); filter: brightness(1.6); }
}


/* ──────────────────────────────────────────────────────────
   COURSE 2 — TABLET 2 (Right - Financial Planning & AI Forecast)
   ────────────────────────────────────────────────────────── */

/* ── Day Mode Styling & Animations (Budgets & Dials Theme) ── */

/* Dial progress arcs fill up on active click */
.p4-c2-tablet2.active .t2-day-dial-budget {
  stroke-dasharray: 120;
  stroke-dashoffset: 120;
  animation: t2DayDialFill 2s cubic-bezier(0.25, 0.8, 0.25, 1) forwards 0.2s;
}
.p4-c2-tablet2.active .t2-day-dial-forecast {
  stroke-dasharray: 120;
  stroke-dashoffset: 120;
  animation: t2DayDialFill 2s cubic-bezier(0.25, 0.8, 0.25, 1) forwards 0.5s;
}
@keyframes t2DayDialFill {
  to { stroke-dashoffset: 0; }
}

/* Active State: Vertical bar chart grows up */
.p4-c2-tablet2.active .t2-day-chart-bar {
  transform-origin: center bottom;
  animation: t2DayBarGrow 1.2s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}
.p4-c2-tablet2.active .t2-day-chart-bar.b1 { animation-delay: 0.3s; }
.p4-c2-tablet2.active .t2-day-chart-bar.b2 { animation-delay: 0.5s; }
.p4-c2-tablet2.active .t2-day-chart-bar.b3 { animation-delay: 0.7s; }
@keyframes t2DayBarGrow {
  0% { transform: scaleY(0); }
  100% { transform: scaleY(1); }
}

/* Active State: Success mark pops */
.p4-c2-tablet2.active .t2-day-success-check {
  animation: t2DayCheckPop 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards 1s;
}
@keyframes t2DayCheckPop {
  0% { transform: scale(0); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}


/* ── Night Mode Styling & Animations (AI Matrix Theme) ── */

/* Bezel glowing magenta outline pulses (continuous) */
body.p4.night.available-mode:not(.relaxed-mode) .p4-c2-tablet2 .t2-neon-frame-glow {
  animation: t2NightRimPulse 3s ease-in-out infinite alternate;
}
@keyframes t2NightRimPulse {
  0% { opacity: 0.1; }
  100% { opacity: 0.45; }
}

/* Central CPU core matrix breathes (continuous) */
body.p4.night.available-mode:not(.relaxed-mode) .t2-night-core-glow {
  animation: t2NightCorePulse 4s ease-in-out infinite alternate;
}
@keyframes t2NightCorePulse {
  0% { opacity: 0.2; transform: scale(0.9); }
  100% { opacity: 0.8; transform: scale(1.1); }
}

/* Synapse flows along pathways (continuous) */
body.p4.night.available-mode:not(.relaxed-mode) .t2-synapse-dot {
  animation: t2SynapseFlow 3s linear infinite;
}
body.p4.night.available-mode:not(.relaxed-mode) .t2-synapse-dot.s1 { animation-delay: 0s; }
body.p4.night.available-mode:not(.relaxed-mode) .t2-synapse-dot.s2 { animation-delay: 0.75s; }
body.p4.night.available-mode:not(.relaxed-mode) .t2-synapse-dot.s3 { animation-delay: 1.5s; }
body.p4.night.available-mode:not(.relaxed-mode) .t2-synapse-dot.s4 { animation-delay: 2.25s; }
@keyframes t2SynapseFlow {
  0% { transform: translate(926px, 533px); opacity: 0; }
  10% { opacity: 1; }
  25% { transform: translate(878px, 527px); }
  50% { transform: translate(947px, 517px); }
  75% { transform: translate(902px, 548px); }
  90% { opacity: 1; }
  100% { transform: translate(970px, 537px); opacity: 0; }
}

/* Active State: sound bars scale rapidly and oscillate */
.p4-c2-tablet2.active .t2-night-soundbar {
  transform-origin: center bottom;
  animation: t2NightSoundbarOscillate 0.3s ease-in-out infinite alternate;
}
.p4-c2-tablet2.active .t2-night-soundbar.sb1 { animation-delay: 0s; }
.p4-c2-tablet2.active .t2-night-soundbar.sb2 { animation-delay: 0.15s; }
.p4-c2-tablet2.active .t2-night-soundbar.sb3 { animation-delay: 0.08s; }
.p4-c2-tablet2.active .t2-night-soundbar.sb4 { animation-delay: 0.23s; }
@keyframes t2NightSoundbarOscillate {
  0% { transform: scaleY(0.2); }
  100% { transform: scaleY(1.5); }
}

/* Active State: Concentric quantum spinning rings */
.p4-c2-tablet2.active .t2-night-quantum {
  transform-origin: 926px 533px;
  animation: t2NightQuantumSpin 5s linear infinite;
}
.p4-c2-tablet2.active .t2-night-quantum.q1 { animation-duration: 3.5s; }
.p4-c2-tablet2.active .t2-night-quantum.q2 { animation-duration: 5.5s; animation-direction: reverse; }
@keyframes t2NightQuantumSpin {
  0% { transform: rotate(0deg); opacity: 0.3; }
  50% { opacity: 0.8; }
  100% { transform: rotate(360deg); opacity: 0.3; }
}

/* Active State: Holographic floating bytes */
.p4-c2-tablet2.active .t2-holo-bytes {
  animation: t2HoloBytesFade 3s cubic-bezier(0.25, 0.8, 0.25, 1) forwards;
}
@keyframes t2HoloBytesFade {
  0% { opacity: 0; transform: translateY(8px); }
  20% { opacity: 1; }
  80% { opacity: 1; }
  100% { opacity: 0; transform: translateY(-22px); }
}
.p4-c2-tablet2.active .t2-holo-ring.h1 { animation: t2HoloRingSpin1 3.5s linear infinite; }
.p4-c2-tablet2.active .t2-holo-ring.h2 { animation: t2HoloRingSpin2 3.5s linear infinite; }
@keyframes t2HoloRingSpin1 { to { transform: rotate(360deg); } }
@keyframes t2HoloRingSpin2 { to { transform: rotate(-360deg); } }

.p4-c2-tablet2.active .t2-holo-glyph {
  animation: t2HoloGlyphFloat 1.4s ease-in-out infinite alternate;
}
.p4-c2-tablet2.active .t2-holo-glyph.g1 { animation-delay: 0s; }
.p4-c2-tablet2.active .t2-holo-glyph.g2 { animation-delay: 0.5s; }
.p4-c2-tablet2.active .t2-holo-glyph.g3 { animation-delay: 0.9s; }
@keyframes t2HoloGlyphFloat {
  0% { transform: translateY(0) scale(0.8); opacity: 0.6; }
  100% { transform: translateY(-6px) scale(1.2); opacity: 1; filter: brightness(1.5); }
}


/* ── Global Device Lift / Active & Ending Settle Animations ── */

/* Active Lift - Tablet 1 Day */
body.p4.day:not(.relaxed-mode) .p4-c2-tablet1.active {
  animation: t1DayLift 3s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}
@keyframes t1DayLift {
  0% { transform: translateY(0) scale(1) rotate(0deg); filter: drop-shadow(0 2px 5px rgba(0,0,0,0.1)); }
  100% { transform: translateY(-7px) scale(1.03) rotate(-0.5deg); filter: drop-shadow(0 8px 16px rgba(0,0,0,0.15)); }
}

/* Active Lift - Tablet 1 Night */
body.p4.night:not(.relaxed-mode) .p4-c2-tablet1.active {
  animation: t1NightLift 3s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}
@keyframes t1NightLift {
  0% { transform: translateY(0) scale(1) rotate(0deg); filter: drop-shadow(0 2px 5px rgba(0,0,0,0.3)); }
  100% { transform: translateY(-10px) scale(1.05) rotate(-1.5deg); filter: drop-shadow(0 12px 24px rgba(14, 165, 233, 0.45)); }
}

/* Active Lift - Tablet 2 Day */
body.p4.day:not(.relaxed-mode) .p4-c2-tablet2.active {
  animation: t2DayLift 3s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}
@keyframes t2DayLift {
  0% { transform: translateY(0) scale(1) rotate(0deg); filter: drop-shadow(0 2px 5px rgba(0,0,0,0.1)); }
  100% { transform: translateY(-7px) scale(1.03) rotate(0.5deg); filter: drop-shadow(0 8px 16px rgba(0,0,0,0.15)); }
}

/* Active Lift - Tablet 2 Night */
body.p4.night:not(.relaxed-mode) .p4-c2-tablet2.active {
  animation: t2NightLift 3s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}
@keyframes t2NightLift {
  0% { transform: translateY(0) scale(1) rotate(0deg); filter: drop-shadow(0 2px 5px rgba(0,0,0,0.3)); }
  100% { transform: translateY(-10px) scale(1.05) rotate(1.5deg); filter: drop-shadow(0 12px 24px rgba(217, 70, 239, 0.45)); }
}

/* Settle Spring - Tablet 1 */
body.p4:not(.relaxed-mode) .p4-c2-tablet1.ending {
  animation: t1SettleSpring 1.2s cubic-bezier(0.25, 1.5, 0.5, 1) forwards;
}
@keyframes t1SettleSpring {
  0% { transform: translateY(-7px) scale(1.03) rotate(-0.5deg); }
  50% { transform: translateY(2px) scale(0.98) rotate(0.3deg); }
  75% { transform: translateY(-1px) scale(1.01) rotate(-0.1deg); }
  100% { transform: translateY(0) scale(1) rotate(0deg); }
}

/* Settle Spring - Tablet 2 */
body.p4:not(.relaxed-mode) .p4-c2-tablet2.ending {
  animation: t2SettleSpring 1.2s cubic-bezier(0.25, 1.5, 0.5, 1) forwards;
}
@keyframes t2SettleSpring {
  0% { transform: translateY(-7px) scale(1.03) rotate(0.5deg); }
  50% { transform: translateY(2px) scale(0.98) rotate(-0.3deg); }
  75% { transform: translateY(-1px) scale(1.01) rotate(0.1deg); }
  100% { transform: translateY(0) scale(1) rotate(0deg); }
}


/* ── Relaxed Mode Overrides (Freeze all Tablet Animations) ── */
body.relaxed-mode .t1-day-wifi,
body.relaxed-mode .t1-day-cursor,
body.relaxed-mode .t1-gantt-bar,
body.relaxed-mode .t1-day-progress-arc,
body.relaxed-mode .t1-day-alert-banner,
body.relaxed-mode .t1-day-bubble,
body.relaxed-mode .p4-c2-tablet1 .t1-neon-frame-glow,
body.relaxed-mode .t1-night-node,
body.relaxed-mode .t1-night-link,
body.relaxed-mode .t1-night-oscilloscope,
body.relaxed-mode .t1-night-scanbar,
body.relaxed-mode .t1-night-ripple,
body.relaxed-mode .t1-night-shield,
body.relaxed-mode .t1-night-lock,
body.relaxed-mode .t1-holo-particles,
body.relaxed-mode .t1-holo-ring,
body.relaxed-mode .t1-holo-node,
body.relaxed-mode .t2-day-dial-budget,
body.relaxed-mode .t2-day-dial-forecast,
body.relaxed-mode .t2-day-chart-bar,
body.relaxed-mode .t2-day-success-check,
body.relaxed-mode .p4-c2-tablet2 .t2-neon-frame-glow,
body.relaxed-mode .t2-night-core-glow,
body.relaxed-mode .t2-synapse-dot,
body.relaxed-mode .t2-night-soundbar,
body.relaxed-mode .t2-night-quantum,
body.relaxed-mode .t2-holo-bytes,
body.relaxed-mode .t2-holo-ring,
body.relaxed-mode .t2-holo-glyph,
body.relaxed-mode .p4-c2-tablet1,
body.relaxed-mode .p4-c2-tablet2,
body.relaxed-mode .p4-c2-tablet1.active,
body.relaxed-mode .p4-c2-tablet2.active,
body.relaxed-mode .p4-c2-tablet1.ending,
body.relaxed-mode .p4-c2-tablet2.ending {
  animation: none !important;
  transform: none !important;
  filter: none !important;
}


/* ──────────────────────────────────────────────────────────
   COURSE 2 — DOCUMENT (Left-Center - Executive Review Ledger)
   ────────────────────────────────────────────────────────── */

/* ── Day Mode Styling & Animations (Warm Wood & Paper) ── */

/* Gold pen breathes on clipboard (continuous) */
body.p4.day.available-mode:not(.relaxed-mode) .p4-c2-document .doc-pen-group {
  animation: docDayPenPulse 4s ease-in-out infinite;
}
@keyframes docDayPenPulse {
  0%, 100% { transform: translate(0, 0) rotate(0); }
  50% { transform: translate(1.5px, -1px) rotate(0.8deg); }
}

/* Active State: Pen moves and physically signs a signature */
.p4-c2-document.active .doc-pen-group {
  transform-origin: 550px 545px;
  animation: docDayPenSign 2.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
@keyframes docDayPenSign {
  0% { transform: translate(0, 0) rotate(0); }
  15% { transform: translate(-30px, -20px) rotate(-8deg); } /* Hover to start of line */
  22% { transform: translate(-28px, -18px) rotate(-4deg); } /* Touch down */
  32% { transform: translate(-15px, -21px) rotate(12deg); } /* Scribble loop 1 */
  45% { transform: translate(2px, -17px) rotate(-8deg); }   /* Scribble loop 2 */
  60% { transform: translate(18px, -21px) rotate(10deg); }  /* Scribble loop 3 */
  75% { transform: translate(35px, -19px) rotate(-4deg); }  /* Scribble loop 4 */
  90% { transform: translate(45px, -18px) rotate(6deg); }   /* Finish */
  100% { transform: translate(60px, -22px) rotate(12deg); }  /* Retract and raise */
}

/* Active State: Signature path draws itself */
.p4-c2-document.active .doc-signature-line {
  opacity: 1 !important;
  stroke-dasharray: 120;
  stroke-dashoffset: 120;
  animation: docDaySignatureDraw 1.8s ease-in-out forwards 0.4s;
}
@keyframes docDaySignatureDraw {
  to { stroke-dashoffset: 0; }
}

/* Active State: Mini indicator progress pills fill up */
.p4-c2-document.active .doc-day-pill {
  transform-origin: left center;
  animation: docDayPillFill 1.2s cubic-bezier(0.25, 1, 0.5, 1) both;
}
.p4-c2-document.active .doc-day-pill.b1 { animation-delay: 0.1s; }
.p4-c2-document.active .doc-day-pill.b2 { animation-delay: 0.3s; }
.p4-c2-document.active .doc-day-pill.b3 { animation-delay: 0.5s; }
@keyframes docDayPillFill {
  0% { transform: scaleX(0); opacity: 0; }
  100% { transform: scaleX(1); opacity: 1; }
}

/* Active State: Area chart fills in */
.p4-c2-document.active .t2-day-chart-area {
  animation: docDayAreaFade 1.2s ease-out forwards 0.2s;
}
@keyframes docDayAreaFade {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

/* Active State: Signature approved status dot pulses */
.p4-c2-document.active .doc-day-signature-dot {
  animation: docDayDotPulse 1.2s ease-in-out infinite alternate 1.8s;
}
@keyframes docDayDotPulse {
  0% { opacity: 0; transform: scale(0.6); }
  100% { opacity: 0.8; transform: scale(1.4); filter: drop-shadow(0 0 3px #10b981); }
}


/* ── Night Mode Styling & Animations (Cyber Ledger & Decryptor) ── */

/* Bezel outline glow pulses (continuous) */
body.p4.night.available-mode:not(.relaxed-mode) .p4-c2-document .doc-night-neon-glow {
  animation: docNightLedgerGlow 3s ease-in-out infinite alternate;
}
@keyframes docNightLedgerGlow {
  0% { opacity: 0.15; }
  100% { opacity: 0.55; }
}

/* Network topology security rings pulse (continuous) */
body.p4.night.available-mode:not(.relaxed-mode) .doc-night-ring {
  transform-origin: 504px 545px;
  animation: docNightSecurityRingPulse 4s ease-in-out infinite alternate;
}
body.p4.night.available-mode:not(.relaxed-mode) .doc-night-ring.r1 { animation-duration: 4s; }
body.p4.night.available-mode:not(.relaxed-mode) .doc-night-ring.r2 { animation-duration: 2.8s; animation-delay: 0.6s; }
@keyframes docNightSecurityRingPulse {
  0% { transform: scale(0.9) rotate(0); opacity: 0.3; }
  100% { transform: scale(1.15) rotate(15deg); opacity: 0.9; }
}

/* Cyber text scan line sweeps vertically (continuous) */
body.p4.night.available-mode:not(.relaxed-mode) .doc-night-scanbar {
  animation: docNightScanSweep 6s linear infinite;
}
@keyframes docNightScanSweep {
  0% { transform: translateY(-10px); opacity: 0; }
  10% { opacity: 0.4; }
  90% { opacity: 0.4; }
  100% { transform: translateY(80px); opacity: 0; }
}

/* Node logs flowing data segments (continuous) */
body.p4.night.available-mode:not(.relaxed-mode) .doc-night-log-line {
  stroke-dasharray: 4, 4;
  animation: docNightLogFeed 1.5s linear infinite;
}
body.p4.night.available-mode:not(.relaxed-mode) .doc-night-log-line.l1 { animation-delay: 0s; }
body.p4.night.available-mode:not(.relaxed-mode) .doc-night-log-line.l2 { animation-delay: 0.3s; }
body.p4.night.available-mode:not(.relaxed-mode) .doc-night-log-line.l3 { animation-delay: 0.6s; }
@keyframes docNightLogFeed {
  to { stroke-dashoffset: -8; }
}

/* Active State: Neon signature line draws */
.p4-c2-document.active .doc-night-signature {
  opacity: 1 !important;
  stroke-dasharray: 120;
  stroke-dashoffset: 120;
  animation: docNightSigDraw 1.8s ease-in-out forwards 0.2s;
}
@keyframes docNightSigDraw {
  to { stroke-dashoffset: 0; }
}

/* Active State: Stylus neon tip glows and flashes */
.p4-c2-document.active .doc-pen-group .stylus-neon-tip {
  animation: docNightStylusGlow 0.2s ease-in-out infinite alternate;
}
@keyframes docNightStylusGlow {
  0% { fill: #f43f5e; filter: drop-shadow(0 0 2px #f43f5e); }
  100% { fill: #22d3ee; filter: drop-shadow(0 0 6px #22d3ee); }
}

/* Active State: Data decryption columns grow horizontally */
.p4-c2-document.active .doc-night-bar {
  transform-origin: left center;
  animation: docNightBarFill 1.5s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}
.p4-c2-document.active .doc-night-bar.b1 { animation-delay: 0.1s; }
.p4-c2-document.active .doc-night-bar.b2 { animation-delay: 0.3s; }
.p4-c2-document.active .doc-night-bar.b3 { animation-delay: 0.5s; }
.p4-c2-document.active .doc-night-bar.b4 { animation-delay: 0.7s; }
@keyframes docNightBarFill {
  0% { transform: scaleX(0); }
  100% { transform: scaleX(1); }
}

/* Active State: Decrypt system verified text flashes */
.p4-c2-document.active .doc-night-alert-txt {
  animation: docNightAlertBlink 0.3s ease infinite alternate;
}
@keyframes docNightAlertBlink {
  0% { fill: #f43f5e; opacity: 0.4; }
  100% { fill: #10b981; opacity: 1; filter: drop-shadow(0 0 3px #10b981); }
}


/* ──────────────────────────────────────────────────────────
   COURSE 2 — WATER GLASS (Right-Center - Crystal Glass)
   ────────────────────────────────────────────────────────── */

/* ── Day Mode Styling & Animations (Crystal & Refreshing Water) ── */

/* Water surface level sways gently (continuous) */
body.p4.day.available-mode:not(.relaxed-mode) .glass-liquid-body {
  animation: glassDayLiquidWave 4s ease-in-out infinite alternate;
}
@keyframes glassDayLiquidWave {
  0% { transform: translateY(0.3px) rotate(0.4deg); }
  100% { transform: translateY(-0.3px) rotate(-0.4deg); }
}

/* Ice cubes float and bob in Day mode (continuous) */
body.p4.day.available-mode:not(.relaxed-mode) .glass-ice-cube {
  animation: glassDayIceBob 3s ease-in-out infinite alternate;
}
body.p4.day.available-mode:not(.relaxed-mode) .glass-ice-cube.i1 { animation-delay: 0s; }
body.p4.day.available-mode:not(.relaxed-mode) .glass-ice-cube.i2 { animation-delay: 0.7s; }
@keyframes glassDayIceBob {
  0% { transform: translateY(0) rotate(15deg); }
  100% { transform: translateY(-2px) rotate(22deg); }
}

/* Rising air bubbles in water (continuous) */
body.p4.day.available-mode:not(.relaxed-mode) .glass-day-bubble {
  animation: glassDayBubbleRise 2.5s ease-in-out infinite;
}
body.p4.day.available-mode:not(.relaxed-mode) .glass-day-bubble.b1 { animation-delay: 0.2s; }
body.p4.day.available-mode:not(.relaxed-mode) .glass-day-bubble.b2 { animation-delay: 0.9s; }
body.p4.day.available-mode:not(.relaxed-mode) .glass-day-bubble.b3 { animation-delay: 1.5s; }
body.p4.day.available-mode:not(.relaxed-mode) .glass-day-bubble.b4 { animation-delay: 2.1s; }
@keyframes glassDayBubbleRise {
  0% { transform: translateY(18px) scale(0); opacity: 0; }
  25% { opacity: 0.8; }
  75% { opacity: 0.8; }
  100% { transform: translateY(0px) scale(1); opacity: 0; }
}

/* Lemon wedge sways gently on rim (continuous) */
body.p4.day.available-mode:not(.relaxed-mode) .glass-lemon-wedge {
  transform-origin: 1044px 498px;
  animation: glassDayLemonSway 5s ease-in-out infinite alternate;
}
@keyframes glassDayLemonSway {
  0% { transform: rotate(-3deg); }
  100% { transform: rotate(3deg); }
}




/* ── Global Settle Animations (Spring Bounce) ── */

/* Clipboard Document Settle */
body.p4:not(.relaxed-mode) .p4-c2-document.ending {
  animation: docSettleSpring 1.2s cubic-bezier(0.25, 1.5, 0.5, 1) forwards;
}
@keyframes docSettleSpring {
  0% { transform: translateY(-8px) scale(1.03) rotate(-0.5deg); }
  50% { transform: translateY(2px) scale(0.98) rotate(0.3deg); }
  75% { transform: translateY(-1px) scale(1.01) rotate(-0.1deg); }
  100% { transform: translateY(0) scale(1) rotate(0deg); }
}




/* ── Relaxed Mode Overrides (Freeze Document & Glass Animations) ── */
body.relaxed-mode .p4-c2-document .doc-pen-group,
body.relaxed-mode .doc-signature-line,
body.relaxed-mode .doc-day-pill,
body.relaxed-mode .t2-day-chart-area,
body.relaxed-mode .doc-day-signature-dot,
body.relaxed-mode .p4-c2-document .doc-night-neon-glow,
body.relaxed-mode .doc-night-ring,
body.relaxed-mode .doc-night-scanbar,
body.relaxed-mode .doc-night-log-line,
body.relaxed-mode .doc-night-signature,
body.relaxed-mode .doc-pen-group .stylus-neon-tip,
body.relaxed-mode .doc-night-bar,
body.relaxed-mode .doc-night-alert-txt,
body.relaxed-mode .glass-liquid-body,
body.relaxed-mode .glass-ice-cube,
body.relaxed-mode .glass-day-bubble,
body.relaxed-mode .glass-lemon-wedge,
body.relaxed-mode .p4-c2-glass,
body.relaxed-mode .glass-day-water, body.relaxed-mode .glass-day-meniscus,
body.relaxed-mode .glass-day-ice,
body.relaxed-mode .glass-night-neon-glow,
body.relaxed-mode .glass-liquid-body-night,
body.relaxed-mode .glass-night-bubble,
body.relaxed-mode .glass-night-ice,
body.relaxed-mode .glass-night-sparks,
body.relaxed-mode .glass-night-sparks .sp1,
body.relaxed-mode .glass-night-sparks .sp2,
body.relaxed-mode .glass-night-sparks .sp3,
body.relaxed-mode .glass-night-sparks .sp4,
body.relaxed-mode .p4-c2-document,
body.relaxed-mode .p4-c2-document.active,
body.relaxed-mode .p4-c2-glass.active,
body.relaxed-mode .p4-c2-document.ending,
body.relaxed-mode .p4-c2-glass.ending {
  animation: none !important;
  transform: none !important;
  filter: none !important;
}


/* ──────────────────────────────────────────────────────────
   COURSE 2 — COFFEE MACHINE (Espresso Bar & Cyber Synth)
   ────────────────────────────────────────────────────────── */

/* ── Day Mode Styling & Animations (Classic Espresso Bar) ── */

/* Power LED breathes softly green (continuous) */
body.p4.day.available-mode:not(.relaxed-mode) .p4-c2-coffee .coffee-day-status-led {
  animation: coffeeDayLedBreathe 3s ease-in-out infinite;
}
@keyframes coffeeDayLedBreathe {
  0%, 100% { fill: #166534; opacity: 0.7; }
  50% { fill: #22c55e; opacity: 1; filter: drop-shadow(0 0 2px #22c55e); }
}

/* Water tank level ripples softly (continuous) */
body.p4.day.available-mode:not(.relaxed-mode) .coffee-water-level {
  animation: coffeeWaterRipple 4s ease-in-out infinite alternate;
}
@keyframes coffeeWaterRipple {
  0% { transform: scaleY(0.96); opacity: 0.6; }
  100% { transform: scaleY(1.02); opacity: 0.8; }
}

/* Screen display LEDs blink randomly (continuous) */
body.p4.day.available-mode:not(.relaxed-mode) .coffee-day-display-led {
  animation: coffeeDayDisplayBlink 0.6s ease-in-out infinite alternate;
}
body.p4.day.available-mode:not(.relaxed-mode) .coffee-day-display-led.b1 { animation-delay: 0.1s; }
body.p4.day.available-mode:not(.relaxed-mode) .coffee-day-display-led.b2 { animation-delay: 0.3s; }
body.p4.day.available-mode:not(.relaxed-mode) .coffee-day-display-led.b3 { animation-delay: 0.5s; }
@keyframes coffeeDayDisplayBlink {
  0% { opacity: 0.3; }
  100% { opacity: 1; }
}

/* Active State: Machine vibrates while brewing */
body.p4.day:not(.relaxed-mode) .p4-c2-coffee.active {
  animation: coffeeDayVibrate 0.1s linear infinite;
}
@keyframes coffeeDayVibrate {
  0% { transform: translate(-0.4px, 0.3px); }
  100% { transform: translate(0.4px, -0.3px); }
}

/* Active State: Espresso double streams pour down */
.p4-c2-coffee.active .coffee-pour-stream {
  opacity: 0.95 !important;
  stroke-dasharray: 4, 4;
  animation: coffeeDayPourFlow 0.4s linear infinite;
}
@keyframes coffeeDayPourFlow {
  to { stroke-dashoffset: -8; }
}

/* Active State: Coffee liquid inside cup grows from empty */
.p4-c2-coffee.active .coffee-fill-liquid {
  transform-origin: center bottom;
  animation: coffeeDayLiquidFill 2.2s cubic-bezier(0.4, 0, 0.6, 1) forwards 0.2s;
}
@keyframes coffeeDayLiquidFill {
  0% { transform: translateY(18px) scaleY(0); }
  100% { transform: translateY(0) scaleY(1); }
}

/* Active State: Steam waves rise and fade */
.p4-c2-coffee.active .coffee-steam-waves {
  opacity: 0.75 !important;
  animation: coffeeDaySteamRise 1.4s ease-out infinite 0.4s;
}
@keyframes coffeeDaySteamRise {
  0% { transform: translateY(4px) scaleX(0.9); opacity: 0; }
  30% { opacity: 0.75; }
  100% { transform: translateY(-10px) scaleX(1.3); opacity: 0; }
}


/* ── Night Mode Styling & Animations (Cyber Synthesizer) ── */

/* Casing neon outline pulses purple (continuous) */
body.p4.night.available-mode:not(.relaxed-mode) .p4-c2-coffee .coffee-night-neon-glow {
  animation: coffeeNightRimPulse 3s ease-in-out infinite alternate;
}
@keyframes coffeeNightRimPulse {
  0% { opacity: 0.15; }
  100% { opacity: 0.55; }
}

/* Cyber fuel core glow pulses (continuous) */
body.p4.night.available-mode:not(.relaxed-mode) .coffee-cyber-core-glow {
  animation: coffeeCyberCorePulse 4s ease-in-out infinite alternate;
}
@keyframes coffeeCyberCorePulse {
  0% { opacity: 0.5; filter: brightness(0.9); }
  100% { opacity: 0.95; filter: brightness(1.3) drop-shadow(0 0 3px #10b981); }
}

/* Cyber core bubble particles float up inside (continuous) */
body.p4.night.available-mode:not(.relaxed-mode) .coffee-core-bubble {
  animation: coffeeCoreBubbleRise 2.5s ease-in-out infinite;
}
body.p4.night.available-mode:not(.relaxed-mode) .coffee-core-bubble.cb1 { animation-delay: 0s; }
body.p4.night.available-mode:not(.relaxed-mode) .coffee-core-bubble.cb2 { animation-delay: 0.6s; }
body.p4.night.available-mode:not(.relaxed-mode) .coffee-core-bubble.cb3 { animation-delay: 1.2s; }
body.p4.night.available-mode:not(.relaxed-mode) .coffee-core-bubble.cb4 { animation-delay: 1.8s; }
@keyframes coffeeCoreBubbleRise {
  0% { transform: translateY(35px) scale(0); opacity: 0; }
  25% { opacity: 0.85; }
  75% { opacity: 0.85; }
  100% { transform: translateY(0px) scale(1.2); opacity: 0; }
}

/* Scrolling diagnostic code logs (continuous) */
body.p4.night.available-mode:not(.relaxed-mode) .coffee-cyber-log {
  stroke-dasharray: 6, 6;
  animation: coffeeCyberLogFlow 1.5s linear infinite;
}
body.p4.night.available-mode:not(.relaxed-mode) .coffee-cyber-log.l1 { animation-delay: 0s; }
body.p4.night.available-mode:not(.relaxed-mode) .coffee-cyber-log.l2 { animation-delay: 0.3s; }
body.p4.night.available-mode:not(.relaxed-mode) .coffee-cyber-log.l3 { animation-delay: 0.6s; }
@keyframes coffeeCyberLogFlow {
  to { stroke-dashoffset: -12; }
}

/* Active State: Machine vibrates intensely */
body.p4.night:not(.relaxed-mode) .p4-c2-coffee.active {
  animation: coffeeNightVibrate 0.08s linear infinite;
}
@keyframes coffeeNightVibrate {
  0% { transform: translate(-0.5px, 0.4px) rotate(-0.3deg); }
  100% { transform: translate(0.5px, -0.4px) rotate(0.3deg); }
}

/* Active State: Neon injector fuel stream pours down */
.p4-c2-coffee.active .coffee-pour-stream-night {
  opacity: 0.95 !important;
  stroke-dasharray: 4, 4;
  animation: coffeeNightPourFlow 0.3s linear infinite;
}
@keyframes coffeeNightPourFlow {
  to { stroke-dashoffset: -8; }
}

/* Active State: Cyber cup neon rim glows */
.p4-c2-coffee.active .coffee-cup-glow-night {
  animation: coffeeCupNightGlow 0.3s ease infinite alternate;
}
@keyframes coffeeCupNightGlow {
  0% { opacity: 0.3; }
  100% { opacity: 0.95; filter: drop-shadow(0 0 3px #22d3ee); }
}

/* Active State: Neon synth fuel fills up cup */
.p4-c2-coffee.active .coffee-fill-liquid-night {
  transform-origin: center bottom;
  animation: coffeeNightLiquidFill 2.2s cubic-bezier(0.4, 0, 0.6, 1) forwards 0.2s;
}
@keyframes coffeeNightLiquidFill {
  0% { transform: translateY(18px) scaleY(0); }
  100% { transform: translateY(0) scaleY(1); }
}

/* Active State: Erupting energy particles float up and fade */
.p4-c2-coffee.active .coffee-night-sparks {
  animation: coffeeNightSparksFade 1.6s ease-out forwards 0.4s;
}
@keyframes coffeeNightSparksFade {
  0% { opacity: 0; transform: translateY(5px); }
  25% { opacity: 1; }
  75% { opacity: 1; }
  100% { opacity: 0; transform: translateY(-18px); }
}

.p4-c2-coffee.active .coffee-night-sparks .csp1 { animation: coffeeSparkFloat1 1.6s ease-out forwards 0.4s; }
.p4-c2-coffee.active .coffee-night-sparks .csp2 { animation: coffeeSparkFloat2 1.6s ease-out forwards 0.4s; }
.p4-c2-coffee.active .coffee-night-sparks .csp3 { animation: coffeeSparkFloat3 1.6s ease-out forwards 0.4s; }
.p4-c2-coffee.active .coffee-night-sparks .csp4 { animation: coffeeSparkFloat4 1.6s ease-out forwards 0.4s; }
@keyframes coffeeSparkFloat1 { 0% { transform: translate(0, 0); } 100% { transform: translate(-8px, -12px) scale(1.5); } }
@keyframes coffeeSparkFloat2 { 0% { transform: translate(0, 0); } 100% { transform: translate(10px, -15px) scale(1.3); } }
@keyframes coffeeSparkFloat3 { 0% { transform: translate(0, 0); } 100% { transform: translate(-3px, -20px) scale(1.4); } }
@keyframes coffeeSparkFloat4 { 0% { transform: translate(0, 0); } 100% { transform: translate(8px, -8px) scale(1.2); } }

/* Active State: Status LED blinks intensely */
.p4-c2-coffee.active .coffee-night-status-led {
  animation: coffeeNightLedBlink 0.2s ease infinite alternate;
}
@keyframes coffeeNightLedBlink {
  0% { fill: #d946ef; filter: drop-shadow(0 0 2px #d946ef); }
  100% { fill: #ffffff; filter: drop-shadow(0 0 5px #22d3ee); }
}


/* ── Ending Settle Animations (Spring Overshoot) ── */

body.p4:not(.relaxed-mode) .p4-c2-coffee.ending {
  animation: coffeeSettleSpring 1.2s cubic-bezier(0.25, 1.5, 0.5, 1) forwards;
}
@keyframes coffeeSettleSpring {
  0% { transform: scale(1.03) translateY(-1px); }
  50% { transform: scale(0.98) translateY(1px); }
  75% { transform: scale(1.005) translateY(-0.3px); }
  100% { transform: scale(1) translateY(0); }
}


/* ── Relaxed Mode Overrides (Freeze Coffee Animations) ── */
body.relaxed-mode .coffee-day-status-led,
body.relaxed-mode .coffee-water-level,
body.relaxed-mode .coffee-day-display-led,
body.relaxed-mode .p4-c2-coffee,
body.relaxed-mode .p4-c2-coffee.active,
body.relaxed-mode .coffee-pour-stream,
body.relaxed-mode .coffee-fill-liquid,
body.relaxed-mode .coffee-steam-waves,
body.relaxed-mode .coffee-night-neon-glow,
body.relaxed-mode .coffee-cyber-core-glow,
body.relaxed-mode .coffee-core-bubble,
body.relaxed-mode .coffee-cyber-log,
body.relaxed-mode .coffee-pour-stream-night,
body.relaxed-mode .coffee-cup-glow-night,
body.relaxed-mode .coffee-fill-liquid-night,
body.relaxed-mode .coffee-night-sparks,
body.relaxed-mode .coffee-night-status-led,
body.relaxed-mode .p4-c2-coffee.ending {
  animation: none !important;
  transform: none !important;
  filter: none !important;
}


/* ──────────────────────────────────────────────────────────
   COURSE 2 — DESK LAMP (Rose Gold Swing Arm & Cyber Projector)
   ────────────────────────────────────────────────────────── */

/* ── Day Mode Styling & Animations (Classic Rose Gold Swing Lamp) ── */

/* Standby base LED breathes softly (continuous) */
body.p4.day.available-mode:not(.relaxed-mode) .p4-c2-lamp .lamp-day-indicator-led {
  animation: lampDayLedBreathe 3s ease-in-out infinite;
}
@keyframes lampDayLedBreathe {
  0%, 100% { fill: #fecdd3; opacity: 0.4; }
  50% { fill: #ffffff; opacity: 1; filter: drop-shadow(0 0 2px #ffffff); }
}

/* Ambient backlight glow of shade pulses softly (continuous) */
body.p4.day.available-mode:not(.relaxed-mode) .lamp-day-bulb {
  animation: lampDayBulbPulse 4s ease-in-out infinite alternate;
}
@keyframes lampDayBulbPulse {
  0% { opacity: 0.15; transform: scale(0.95); }
  100% { opacity: 0.35; transform: scale(1.05); }
}

/* Active State: Lamp arm joints flex and tilt */
body.p4.day:not(.relaxed-mode) .p4-c2-lamp.active {
  animation: lampDayActiveSwing 3s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}
@keyframes lampDayActiveSwing {
  0% { transform: rotate(0deg); }
  10% { transform: rotate(-2.5deg); }
  25% { transform: rotate(1deg); }
  45% { transform: rotate(-0.5deg); }
  100% { transform: rotate(0deg); }
}

.p4-c2-lamp.active .lamp-day-shade {
  animation: lampDayShadeAdjust 3s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}
@keyframes lampDayShadeAdjust {
  0% { transform: rotate(0deg); }
  12% { transform: rotate(5deg); }
  30% { transform: rotate(-1.5deg); }
  100% { transform: rotate(0deg); }
}

/* Active State: Beaded pull chain swings */
.p4-c2-lamp.active .lamp-day-pullchain {
  transform-origin: 141px 465px;
  animation: lampDayPullSwing 2.5s cubic-bezier(0.4, 0, 0.2, 1) infinite alternate;
}
@keyframes lampDayPullSwing {
  0% { transform: rotate(-8deg); }
  100% { transform: rotate(8deg); }
}

/* Active State: Volumetric warm light beam flickers and fades in */
.p4-c2-lamp.active .lamp-beam-day {
  animation: lampDayBeamFlicker 3s ease-out forwards;
}
@keyframes lampDayBeamFlicker {
  0% { opacity: 0; }
  8% { opacity: 0.75; }
  11% { opacity: 0.3; }
  14% { opacity: 0.85; }
  100% { opacity: 0.65; }
}

/* Active State: Floating dust particles drift in light beam */
.p4-c2-lamp.active .lamp-day-dust {
  animation: lampDayDustFade 3s ease-in-out forwards;
}
@keyframes lampDayDustFade {
  0% { opacity: 0; }
  15% { opacity: 0.95; }
  85% { opacity: 0.95; }
  100% { opacity: 0; }
}

.p4-c2-lamp.active .lamp-day-dust circle {
  animation: lampDayDustMove 3s ease-in-out infinite alternate;
}
.p4-c2-lamp.active .lamp-day-dust .dp1 { animation-delay: 0s; }
.p4-c2-lamp.active .lamp-day-dust .dp2 { animation-delay: -0.6s; animation-duration: 2.2s; }
.p4-c2-lamp.active .lamp-day-dust .dp3 { animation-delay: -1.2s; animation-duration: 3.2s; }
.p4-c2-lamp.active .lamp-day-dust .dp4 { animation-delay: -1.8s; animation-duration: 2.6s; }
.p4-c2-lamp.active .lamp-day-dust .dp5 { animation-delay: -2.4s; animation-duration: 2.9s; }
@keyframes lampDayDustMove {
  0% { transform: translate(-4px, -3px); opacity: 0.25; }
  100% { transform: translate(4px, 5px); opacity: 0.95; }
}


/* ── Night Mode Styling & Animations (Cyber Holographic Projector) ── */

/* Standby base LED blinks red (continuous) */
body.p4.night.available-mode:not(.relaxed-mode) .p4-c2-lamp .lamp-night-indicator-led {
  animation: lampNightLedBlink 1.5s step-end infinite;
}
@keyframes lampNightLedBlink {
  0%, 100% { fill: #334155; opacity: 0.4; }
  50% { fill: #f43f5e; opacity: 1; filter: drop-shadow(0 0 2px #f43f5e); }
}

/* Projector lens pulses in cyan (continuous) */
body.p4.night.available-mode:not(.relaxed-mode) .lamp-night-bulb {
  animation: lampNightCorePulse 3s ease-in-out infinite alternate;
}
@keyframes lampNightCorePulse {
  0% { opacity: 0.35; transform: scale(0.92); }
  100% { opacity: 0.8; transform: scale(1.08); filter: drop-shadow(0 0 3px #22d3ee); }
}

/* Active State: Projector arm extends and shifts slightly */
body.p4.night:not(.relaxed-mode) .p4-c2-lamp.active {
  animation: lampNightActiveExtend 3s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}
@keyframes lampNightActiveExtend {
  0% { transform: translateY(0) scale(1) rotate(0); }
  15% { transform: translateY(-4px) scale(1.02) rotate(1deg); }
  85% { transform: translateY(-4px) scale(1.02) rotate(1deg); }
  100% { transform: translateY(0) scale(1) rotate(0); }
}

/* Active State: Volumetric neon laser beam projects and flickers */
.p4-c2-lamp.active .lamp-beam-night {
  animation: lampNightLaserFlicker 0.25s linear infinite;
}
@keyframes lampNightLaserFlicker {
  0%, 100% { opacity: 0.65; }
  50% { opacity: 0.85; filter: brightness(1.2) drop-shadow(0 0 2px #c084fc); }
}

/* Active State: Holographic data nodes rise inside projection beam */
.p4-c2-lamp.active .lamp-night-holograms {
  animation: lampNightHoloFade 3s ease-in-out forwards;
}
@keyframes lampNightHoloFade {
  0% { opacity: 0; }
  15% { opacity: 0.95; }
  85% { opacity: 0.95; }
  100% { opacity: 0; }
}

.p4-c2-lamp.active .lamp-night-holograms .nh1 { animation: holoFloat1 3s ease-out infinite; }
.p4-c2-lamp.active .lamp-night-holograms .nh2 { animation: holoFloat2 3s ease-out infinite 0.5s; }
.p4-c2-lamp.active .lamp-night-holograms .nh3 { animation: holoFloat3 3s ease-out infinite 1s; }
.p4-c2-lamp.active .lamp-night-holograms .nh4 { animation: holoFloat4 3s ease-out infinite 1.5s; }
@keyframes holoFloat1 { 0% { transform: translate(0, 0); opacity: 0; } 10% { opacity: 0.9; } 90% { opacity: 0.9; } 100% { transform: translate(-10px, -25px); opacity: 0; } }
@keyframes holoFloat2 { 0% { transform: translate(0, 0); opacity: 0; } 10% { opacity: 0.9; } 90% { opacity: 0.9; } 100% { transform: translate(12px, -30px); opacity: 0; } }
@keyframes holoFloat3 { 0% { transform: translate(0, 0); opacity: 0; } 10% { opacity: 0.9; } 90% { opacity: 0.9; } 100% { transform: translate(-4px, -20px); opacity: 0; } }
@keyframes holoFloat4 { 0% { transform: translate(0, 0); opacity: 0; } 10% { opacity: 0.9; } 90% { opacity: 0.9; } 100% { transform: translate(8px, -15px); opacity: 0; } }


/* ── Ending Settle Animations (Spring Overshoot) ── */

body.p4:not(.relaxed-mode) .p4-c2-lamp.ending {
  animation: lampSettleSpring 1.2s cubic-bezier(0.25, 1.5, 0.5, 1) forwards;
}
@keyframes lampSettleSpring {
  0% { transform: scale(1.02) rotate(-1deg); }
  50% { transform: scale(0.99) rotate(0.6deg); }
  75% { transform: scale(1.003) rotate(-0.2deg); }
  100% { transform: scale(1) rotate(0deg); }
}


/* ── Relaxed Mode Overrides (Freeze Lamp Animations) ── */
body.relaxed-mode .lamp-day-indicator-led,
body.relaxed-mode .lamp-day-bulb,
body.relaxed-mode .p4-c2-lamp,
body.relaxed-mode .p4-c2-lamp.active,
body.relaxed-mode .lamp-day-shade,
body.relaxed-mode .lamp-day-pullchain,
body.relaxed-mode .lamp-beam-day,
body.relaxed-mode .lamp-day-dust,
body.relaxed-mode .lamp-day-dust circle,
body.relaxed-mode .lamp-night-indicator-led,
body.relaxed-mode .lamp-night-bulb,
body.relaxed-mode .lamp-beam-night,
body.relaxed-mode .lamp-night-holograms,
body.relaxed-mode .lamp-night-holograms *,
body.relaxed-mode .p4-c2-lamp.ending {
  animation: none !important;
  transform: none !important;
  filter: none !important;
}


/* ──────────────────────────────────────────────────────────
   COURSE 2 — LAPTOP (Executive Ultrabook & Cyber Core)
   ────────────────────────────────────────────────────────── */

/* ── Day Mode Styling & Animations (Aluminum Ultrabook) ── */

/* Charging side LED breathes green (continuous) */
body.p4.day.available-mode:not(.relaxed-mode) .p4-c2-laptop .laptop-charging-led {
  animation: laptopDayLedBreathe 3s ease-in-out infinite;
}
@keyframes laptopDayLedBreathe {
  0%, 100% { fill: #166534; opacity: 0.7; }
  50% { fill: #22c55e; opacity: 1; filter: drop-shadow(0 0 2px #22c55e); }
}

/* Closed lid central logo breathes softly (continuous) */
body.p4.day.available-mode:not(.relaxed-mode) .p4-c2-laptop:not(.active) .laptop-closed-lid .laptop-logo {
  animation: laptopDayLogoPulse 4s ease-in-out infinite;
}
@keyframes laptopDayLogoPulse {
  0%, 100% { fill: #475569; opacity: 0.4; }
  50% { fill: #ffffff; opacity: 1; filter: drop-shadow(0 0 2px #ffffff); }
}

/* Active State: Laptop opens smoothly (swings open) */
.p4-c2-laptop.active .laptop-closed-lid {
  opacity: 0 !important;
  transform: rotateX(95deg) translateY(-2px);
  transition: opacity 0.3s ease, transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.p4-c2-laptop.active .laptop-open-screen {
  opacity: 1 !important;
  transition: opacity 0.4s ease 0.1s;
}

/* Active State: Volumetric blue light beam projects downward */
.p4-c2-laptop.active .laptop-beam {
  animation: laptopDayBeamFlicker 3s ease-out forwards 0.2s;
}
@keyframes laptopDayBeamFlicker {
  0% { opacity: 0; }
  10% { opacity: 0.7; }
  12% { opacity: 0.25; }
  15% { opacity: 0.85; }
  100% { opacity: 0.55; }
}

/* Active State: Screen bar charts grow up */
.p4-c2-laptop.active .laptop-day-chart-bar {
  transform-origin: center bottom;
  animation: laptopDayBarGrow 1.2s cubic-bezier(0.25, 1, 0.5, 1) forwards 0.3s;
}
.p4-c2-laptop.active .laptop-day-chart-bar.b1 { animation-delay: 0.3s; }
.p4-c2-laptop.active .laptop-day-chart-bar.b2 { animation-delay: 0.5s; }
.p4-c2-laptop.active .laptop-day-chart-bar.b3 { animation-delay: 0.7s; }
@keyframes laptopDayBarGrow {
  0% { transform: scaleY(0); }
  100% { transform: scaleY(1); }
}

/* Active State: Analytical curves draw progressive segments */
.p4-c2-laptop.active .laptop-day-curve {
  stroke-dasharray: 60;
  stroke-dashoffset: 60;
  animation: laptopDayCurveDraw 1.5s cubic-bezier(0.4, 0, 0.2, 1) forwards 0.5s;
}
.p4-c2-laptop.active .laptop-day-curve.l1 { animation-delay: 0.5s; }
.p4-c2-laptop.active .laptop-day-curve.l2 { animation-delay: 0.8s; }
.p4-c2-laptop.active .laptop-day-curve.l3 { animation-delay: 1.1s; }
@keyframes laptopDayCurveDraw {
  to { stroke-dashoffset: 0; }
}


/* ── Night Mode Styling & Animations (Cyber Core Console) ── */

/* Charging status LED blinks red/magenta (continuous) */
body.p4.night.available-mode:not(.relaxed-mode) .p4-c2-laptop .laptop-charging-led {
  animation: laptopNightLedBlink 1.5s step-end infinite;
}
@keyframes laptopNightLedBlink {
  0%, 100% { fill: #334155; opacity: 0.4; }
  50% { fill: #f43f5e; opacity: 1; filter: drop-shadow(0 0 2px #f43f5e); }
}

/* Closed lid logo breathes purple neon (continuous) */
body.p4.night.available-mode:not(.relaxed-mode) .p4-c2-laptop:not(.active) .laptop-closed-lid .laptop-logo {
  animation: laptopNightLogoPulse 4s ease-in-out infinite;
}
@keyframes laptopNightLogoPulse {
  0%, 100% { fill: #a855f7; opacity: 0.4; }
  50% { fill: #d946ef; opacity: 1; filter: drop-shadow(0 0 3px #d946ef); }
}

/* Active State: Keyboards backlight glows magenta */
.p4-c2-laptop.active .laptop-keyboard-glow {
  opacity: 0.8 !important;
  animation: laptopKeysFlicker 0.5s ease forwards;
}
@keyframes laptopKeysFlicker {
  0% { opacity: 0; }
  40% { opacity: 0.5; }
  60% { opacity: 0.2; }
  100% { opacity: 0.8; filter: drop-shadow(0 0 2px #d946ef); }
}

/* Active State: Projector screen bezel glows cyan */
.p4-c2-laptop.active .laptop-night-bezel-glow {
  animation: laptopBezelGlowBreathe 3s ease-in-out infinite alternate;
}
@keyframes laptopBezelGlowBreathe {
  0% { opacity: 0.25; }
  100% { opacity: 0.7; }
}

/* Active State: Emitters cast a volumetric neon purple beam */
.p4-c2-laptop.active .laptop-beam {
  animation: laptopNightBeamFlicker 0.2s linear infinite;
}
@keyframes laptopNightBeamFlicker {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 0.85; filter: brightness(1.25) drop-shadow(0 0 2px #d946ef); }
}

/* Active State: Cyber matrix core diamond breathes */
.p4-c2-laptop.active .laptop-night-core {
  animation: laptopCoreBreathe 3s ease-in-out infinite alternate;
}
@keyframes laptopCoreBreathe {
  0% { opacity: 0.45; transform: scale(0.92); }
  100% { opacity: 1; transform: scale(1.15); filter: drop-shadow(0 0 4px #d946ef); }
}

/* Active State: Central holographic ring spins */
.p4-c2-laptop.active .laptop-night-ring {
  transform-origin: 400px 505px;
  animation: laptopRingRotate 5s linear infinite;
}
@keyframes laptopRingRotate {
  to { transform: rotate(360deg); }
}

/* Active State: Diagnostic log lines flow */
.p4-c2-laptop.active .laptop-night-log {
  stroke-dasharray: 4, 4;
  animation: laptopLogScroll 1.2s linear infinite;
}
.p4-c2-laptop.active .laptop-night-log.l1 { animation-delay: 0s; }
.p4-c2-laptop.active .laptop-night-log.l2 { animation-delay: 0.3s; }
.p4-c2-laptop.active .laptop-night-log.l3 { animation-delay: 0.6s; }
@keyframes laptopLogScroll {
  to { stroke-dashoffset: -8; }
}

/* Active State: Red warning text flashes */
.p4-c2-laptop.active .laptop-night-warning {
  animation: laptopWarningFlash 0.35s infinite alternate;
}
@keyframes laptopWarningFlash {
  0% { fill: #f43f5e; opacity: 0.4; }
  100% { fill: #22d3ee; opacity: 1; filter: drop-shadow(0 0 2.5px #22d3ee); }
}

/* Active State: Holographic code nodes float inside projection beam */
.p4-c2-laptop.active .laptop-night-holo-code {
  animation: laptopHoloFade 3s ease-in-out forwards;
}
@keyframes laptopHoloFade {
  0% { opacity: 0; }
  15% { opacity: 0.95; }
  85% { opacity: 0.95; }
  100% { opacity: 0; }
}

.p4-c2-laptop.active .laptop-night-holo-code .hc1 { animation: laptopHoloFloat1 3s ease-out infinite; }
.p4-c2-laptop.active .laptop-night-holo-code .hc2 { animation: laptopHoloFloat2 3s ease-out infinite 0.5s; }
.p4-c2-laptop.active .laptop-night-holo-code .hc3 { animation: laptopHoloFloat3 3s ease-out infinite 1s; }
.p4-c2-laptop.active .laptop-night-holo-code .hc4 { animation: laptopHoloFloat4 3s ease-out infinite 1.5s; }
@keyframes laptopHoloFloat1 { 0% { transform: translate(0, 0); opacity: 0; } 10% { opacity: 0.9; } 90% { opacity: 0.9; } 100% { transform: translate(-8px, -20px); opacity: 0; } }
@keyframes laptopHoloFloat2 { 0% { transform: translate(0, 0); opacity: 0; } 10% { opacity: 0.9; } 90% { opacity: 0.9; } 100% { transform: translate(10px, -25px); opacity: 0; } }
@keyframes laptopHoloFloat3 { 0% { transform: translate(0, 0); opacity: 0; } 10% { opacity: 0.9; } 90% { opacity: 0.9; } 100% { transform: translate(-3px, -15px); opacity: 0; } }
@keyframes laptopHoloFloat4 { 0% { transform: translate(0, 0); opacity: 0; } 10% { opacity: 0.9; } 90% { opacity: 0.9; } 100% { transform: translate(6px, -10px); opacity: 0; } }


/* ── Ending Settle Animations (Spring Screen Wobble Lock) ── */

body.p4:not(.relaxed-mode) .p4-c2-laptop.ending {
  animation: laptopSettleSpring 1.2s cubic-bezier(0.25, 1.5, 0.5, 1) forwards;
}
@keyframes laptopSettleSpring {
  0% { transform: scale(1.02) rotate(-0.5deg); }
  50% { transform: scale(0.99) rotate(0.3deg); }
  75% { transform: scale(1.003) rotate(-0.1deg); }
  100% { transform: scale(1) rotate(0deg); }
}


/* ── Relaxed Mode Overrides (Freeze Laptop Animations) ── */
body.relaxed-mode .laptop-charging-led,
body.relaxed-mode .p4-c2-laptop,
body.relaxed-mode .p4-c2-laptop.active,
body.relaxed-mode .laptop-closed-lid,
body.relaxed-mode .laptop-closed-lid .laptop-logo,
body.relaxed-mode .laptop-open-screen,
body.relaxed-mode .laptop-beam,
body.relaxed-mode .laptop-day-chart-bar,
body.relaxed-mode .laptop-day-curve,
body.relaxed-mode .laptop-keyboard-glow,
body.relaxed-mode .laptop-night-bezel-glow,
body.relaxed-mode .laptop-night-core,
body.relaxed-mode .laptop-night-ring,
body.relaxed-mode .laptop-night-log,
body.relaxed-mode .laptop-night-warning,
body.relaxed-mode .laptop-night-holo-code,
body.relaxed-mode .laptop-night-holo-code *,
body.relaxed-mode .p4-c2-laptop.ending {
  animation: none !important;
  transform: none !important;
  filter: none !important;
}


/* ──────────────────────────────────────────────────────────
   COURSE 2 — WATER CARAFE (Redesigned Premium Interactive Decanter)
   ────────────────────────────────────────────────────────── */

/* Transform origins */
.p4-c2-carafe .carafe-tilt-group {
  transform-origin: 995px 560px;
}
.p4-c2-carafe .carafe-day-water {
  transform-origin: 995px 560px;
}
.p4-c2-carafe .carafe-day-stopper,
.p4-c2-carafe .carafe-night-stopper {
  transform-origin: 990px 493px;
  transition: transform 0.6s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.p4-c2-carafe .carafe-night-ripples {
  transform-origin: 1048px 510px;
}

/* ── Day Mode Styling & Animations (Crystal & Hydration Theme) ── */

/* Gentle water level sway when idle (continuous) */
body.p4.day.available-mode:not(.relaxed-mode) .p4-c2-carafe:not(.active):not(.ending) .carafe-day-water {
  animation: carafeDayWaterIdle 4s ease-in-out infinite;
}
@keyframes carafeDayWaterIdle {
  0%, 100% { transform: rotate(0deg) skewX(0deg); }
  25% { transform: rotate(0.6deg) skewX(0.4deg); }
  75% { transform: rotate(-0.6deg) skewX(-0.4deg); }
}

/* Active Tilt Animation (active) */
body.p4.day:not(.relaxed-mode) .p4-c2-carafe.active .carafe-tilt-group {
  animation: carafeDayTiltActive 3s cubic-bezier(0.25, 0.8, 0.25, 1) forwards;
}
@keyframes carafeDayTiltActive {
  0% { transform: rotate(0deg) translate(0, 0); }
  25% { transform: rotate(-38deg) translate(-10px, -15px); }
  90% { transform: rotate(-38deg) translate(-10px, -15px); }
  100% { transform: rotate(-38deg) translate(-10px, -15px); }
}

/* Stopper Flip Open (active) */
body.p4.day .p4-c2-carafe.active .carafe-day-stopper {
  transform: rotate(-75deg) translate(-1px, -1px);
}

/* Day Water Flow Stream (active) */
.p4-c2-carafe .carafe-day-stream-outer,
.p4-c2-carafe .carafe-day-stream-inner {
  transition: opacity 0.4s ease;
}
body.p4.day:not(.relaxed-mode) .p4-c2-carafe.active .carafe-day-stream-outer {
  opacity: 0.85;
  stroke-dasharray: 6, 6;
  animation: carafeDayStreamFlow 1.5s linear infinite;
}
body.p4.day:not(.relaxed-mode) .p4-c2-carafe.active .carafe-day-stream-inner {
  opacity: 0.95;
  stroke-dasharray: 4, 8;
  animation: carafeDayStreamFlow 1s linear infinite reverse;
}
@keyframes carafeDayStreamFlow {
  to { stroke-dashoffset: -24; }
}

/* Day Splash Particles (active) */
.p4-c2-carafe .carafe-day-splashes {
  transition: opacity 0.4s ease;
}
body.p4.day:not(.relaxed-mode) .p4-c2-carafe.active .carafe-day-splashes {
  opacity: 1;
}
body.p4.day:not(.relaxed-mode) .p4-c2-carafe.active .carafe-day-splashes .ds1 {
  animation: carafeDaySplashBubble1 1.2s ease-out infinite;
}
body.p4.day:not(.relaxed-mode) .p4-c2-carafe.active .carafe-day-splashes .ds2 {
  animation: carafeDaySplashBubble2 1.2s ease-out infinite 0.4s;
}
body.p4.day:not(.relaxed-mode) .p4-c2-carafe.active .carafe-day-splashes .ds3 {
  animation: carafeDaySplashBubble3 1.2s ease-out infinite 0.8s;
}
@keyframes carafeDaySplashBubble1 {
  0% { transform: translate(0, 0) scale(0.5); opacity: 0; }
  30% { opacity: 0.9; }
  100% { transform: translate(-3px, -15px) scale(1.3); opacity: 0; }
}
@keyframes carafeDaySplashBubble2 {
  0% { transform: translate(0, 0) scale(0.5); opacity: 0; }
  30% { opacity: 0.9; }
  100% { transform: translate(4px, -12px) scale(1.1); opacity: 0; }
}
@keyframes carafeDaySplashBubble3 {
  0% { transform: translate(0, 0) scale(0.5); opacity: 0; }
  30% { opacity: 0.9; }
  100% { transform: translate(-1px, -18px) scale(1.2); opacity: 0; }
}


/* ── Night Mode Styling & Animations (Cyber Fuel & Laser Theme) ── */

/* Glowing green chemical fuel breathe (continuous) */
body.p4.night.available-mode:not(.relaxed-mode) .carafe-night-water {
  animation: carafeNightWaterBreathe 3s ease-in-out infinite;
}
@keyframes carafeNightWaterBreathe {
  0%, 100% { opacity: 0.5; filter: drop-shadow(0 0 1px #10b981); }
  50% { opacity: 0.85; filter: drop-shadow(0 0 5px #34d399); }
}

/* Fuel Core Bubbles float up (continuous) */
body.p4.night.available-mode:not(.relaxed-mode) .carafe-night-bubbles .nb1 {
  animation: carafeNightBubbleFloat 2.5s ease-in-out infinite;
}
body.p4.night.available-mode:not(.relaxed-mode) .carafe-night-bubbles .nb2 {
  animation: carafeNightBubbleFloat 2.2s ease-in-out infinite 0.5s;
}
body.p4.night.available-mode:not(.relaxed-mode) .carafe-night-bubbles .nb3 {
  animation: carafeNightBubbleFloat 2.8s ease-in-out infinite 1s;
}
body.p4.night.available-mode:not(.relaxed-mode) .carafe-night-bubbles .nb4 {
  animation: carafeNightBubbleFloat 2.4s ease-in-out infinite 1.5s;
}
@keyframes carafeNightBubbleFloat {
  0% { transform: translateY(0); opacity: 0; }
  20% { opacity: 0.9; }
  80% { opacity: 0.9; }
  100% { transform: translateY(-28px); opacity: 0; }
}

/* Active Tilt Animation - Night */
body.p4.night:not(.relaxed-mode) .p4-c2-carafe.active .carafe-tilt-group {
  animation: carafeNightTiltActive 3s cubic-bezier(0.25, 0.8, 0.25, 1) forwards;
}
@keyframes carafeNightTiltActive {
  0% { transform: rotate(0deg) translate(0, 0); }
  25% { transform: rotate(-38deg) translate(-10px, -15px); }
  90% { transform: rotate(-38deg) translate(-10px, -15px); }
  100% { transform: rotate(-38deg) translate(-10px, -15px); }
}

/* Bezel frame neon glow pulse (active) */
body.p4.night:not(.relaxed-mode) .p4-c2-carafe.active .carafe-night-neon-glow {
  animation: carafeNightNeonPulse 1s ease-in-out infinite alternate;
}
@keyframes carafeNightNeonPulse {
  0% { opacity: 0.2; filter: drop-shadow(0 0 1px #d946ef); }
  100% { opacity: 0.95; filter: drop-shadow(0 0 6px #f472b6); }
}

/* Stopper / Projector cap tilt (active) */
body.p4.night .p4-c2-carafe.active .carafe-night-stopper {
  transform: rotate(-45deg) translate(-0.5px, -0.5px);
}

/* Cyber cap LED rapid flashing (active) */
body.p4.night:not(.relaxed-mode) .p4-c2-carafe.active .carafe-night-cap-led {
  animation: carafeNightLedFlash 0.4s ease-in-out infinite alternate;
}
@keyframes carafeNightLedFlash {
  0% { fill: #d946ef; filter: drop-shadow(0 0 1px #d946ef); }
  100% { fill: #00ffff; filter: drop-shadow(0 0 6px #22d3ee); }
}

/* Laser Energy Stream Beam (active) */
.p4-c2-carafe .carafe-night-stream,
.p4-c2-carafe .carafe-night-stream-flow {
  transition: opacity 0.4s ease;
}
body.p4.night:not(.relaxed-mode) .p4-c2-carafe.active .carafe-night-stream {
  opacity: 0.85;
}
body.p4.night:not(.relaxed-mode) .p4-c2-carafe.active .carafe-night-stream-flow {
  opacity: 0.95;
  stroke-dasharray: 6, 6;
  animation: carafeNightStreamFlow 1.2s linear infinite;
}
@keyframes carafeNightStreamFlow {
  to { stroke-dashoffset: -20; }
}

/* Concentric Energy Ripples at glass mouth (active) */
.p4-c2-carafe .carafe-night-ripples {
  transition: opacity 0.4s ease;
}
body.p4.night:not(.relaxed-mode) .p4-c2-carafe.active .carafe-night-ripples {
  opacity: 1;
}
body.p4.night:not(.relaxed-mode) .p4-c2-carafe.active .carafe-night-ripples .nr1 {
  transform-origin: 1048px 510px;
  animation: carafeNightRipplePulse1 1.5s cubic-bezier(0.1, 0.8, 0.3, 1) infinite;
}
body.p4.night:not(.relaxed-mode) .p4-c2-carafe.active .carafe-night-ripples .nr2 {
  transform-origin: 1048px 510px;
  animation: carafeNightRipplePulse2 1.5s cubic-bezier(0.1, 0.8, 0.3, 1) infinite 0.75s;
}
@keyframes carafeNightRipplePulse1 {
  0% { transform: scale(0.5); opacity: 0; }
  15% { opacity: 0.95; }
  100% { transform: scale(1.4); opacity: 0; }
}
@keyframes carafeNightRipplePulse2 {
  0% { transform: scale(0.5); opacity: 0; }
  15% { opacity: 0.8; }
  100% { transform: scale(1.4); opacity: 0; }
}


/* ── Settle Spring / Ending Animations (Settle State) ── */

body.p4:not(.relaxed-mode) .p4-c2-carafe.ending .carafe-tilt-group {
  animation: carafeSettleSpring 1.2s cubic-bezier(0.25, 1.5, 0.5, 1) forwards;
}
@keyframes carafeSettleSpring {
  0% { transform: rotate(-38deg) translate(-10px, -15px); }
  45% { transform: rotate(6deg) translate(1px, 2px); }
  75% { transform: rotate(-3deg) translate(-0.8px, -1px); }
  92% { transform: rotate(1deg) translate(0.3px, 0.4px); }
  100% { transform: rotate(0deg) translate(0, 0); }
}

/* Fade out all active overlays during ending transition */
.p4-c2-carafe.ending .carafe-day-stream-outer,
.p4-c2-carafe.ending .carafe-day-stream-inner,
.p4-c2-carafe.ending .carafe-day-splashes,
.p4-c2-carafe.ending .carafe-night-stream,
.p4-c2-carafe.ending .carafe-night-stream-flow,
.p4-c2-carafe.ending .carafe-night-ripples {
  opacity: 0 !important;
  transition: opacity 0.4s ease;
}


/* ── Relaxed Mode Overrides (Freeze all Carafe Animations) ── */

body.relaxed-mode .carafe-day-water,
body.relaxed-mode .carafe-tilt-group,
body.relaxed-mode .carafe-day-stopper,
body.relaxed-mode .carafe-night-stopper,
body.relaxed-mode .carafe-day-splashes .ds1,
body.relaxed-mode .carafe-day-splashes .ds2,
body.relaxed-mode .carafe-day-splashes .ds3,
body.relaxed-mode .carafe-night-water,
body.relaxed-mode .carafe-night-bubbles .nb1,
body.relaxed-mode .carafe-night-bubbles .nb2,
body.relaxed-mode .carafe-night-bubbles .nb3,
body.relaxed-mode .carafe-night-bubbles .nb4,
body.relaxed-mode .carafe-night-neon-glow,
body.relaxed-mode .carafe-night-cap-led,
body.relaxed-mode .carafe-night-ripples .nr1,
body.relaxed-mode .carafe-night-ripples .nr2,
body.relaxed-mode .p4-c2-carafe.active .carafe-tilt-group,
body.relaxed-mode .p4-c2-carafe.ending .carafe-tilt-group {
  animation: none !important;
  transform: none !important;
  transition: none !important;
  filter: none !important;
}

body.relaxed-mode .carafe-day-stream-outer,
body.relaxed-mode .carafe-day-stream-inner,
body.relaxed-mode .carafe-day-splashes,
body.relaxed-mode .carafe-night-stream,
body.relaxed-mode .carafe-night-stream-flow,
body.relaxed-mode .carafe-night-ripples,
body.relaxed-mode .carafe-night-neon-glow {
  opacity: 0 !important;
}


/* ──────────────────────────────────────────────────────────
   COURSE 2 — TITLE READABILITY IMPROVEMENTS (Strokes & Glows)
   ────────────────────────────────────────────────────────── */

/* Global text paint order for the boardroom course header */
#p4Course2 .p4-eyebrow,
#p4Course2 .p4-heading,
#p4Course2 .p4-heading .p4-glow {
  paint-order: stroke fill !important;
}

/* Day Mode styling: high contrast against light blue background and dark smart screen */
body.p4.day #p4Course2 .p4-eyebrow {
  color: var(--p4-gold) !important;
  -webkit-text-stroke: 1.2px #0f172a !important;
  text-shadow: 0 0 6px rgba(245, 158, 11, 0.4) !important;
}

body.p4.day #p4Course2 .p4-heading {
  color: #0f172a !important;
  -webkit-text-stroke: 1.5px #ffffff !important;
  text-shadow: 0 0 8px rgba(255, 255, 255, 0.9) !important;
}

body.p4.day #p4Course2 .p4-heading .p4-glow {
  color: var(--p4-gold) !important;
  -webkit-text-stroke: 1.5px #0f172a !important;
  text-shadow: 0 0 10px rgba(245, 158, 11, 0.5) !important;
}

/* Night Mode styling: high contrast against dark blue background and light neon elements */
body.p4.night #p4Course2 .p4-eyebrow {
  color: var(--p4-neon) !important;
  -webkit-text-stroke: 1px #090d16 !important;
  text-shadow: 0 0 8px rgba(6, 182, 212, 0.5) !important;
}

body.p4.night #p4Course2 .p4-heading {
  color: var(--p4-night-text) !important;
  -webkit-text-stroke: 1.2px #090d16 !important;
  text-shadow: 0 0 8px rgba(9, 13, 22, 0.9) !important;
}

body.p4.night #p4Course2 .p4-heading .p4-glow {
  color: var(--p4-neon) !important;
  -webkit-text-stroke: 1.2px #090d16 !important;
  text-shadow: 0 0 10px rgba(6, 182, 212, 0.6) !important;
}


/* ──────────────────────────────────────────────────────────
   COURSE 2 — CORPORATE EXECUTIVE TEAM CONTINUOUS ANIMATIONS
   ────────────────────────────────────────────────────────── */

/* Set transform origins at base (legs/bottom edge at Y=480) and shoulders */
.exec-left-man {
  transform-origin: 463px 480px;
}
.exec-right-man {
  transform-origin: 610px 480px;
}
.exec-woman {
  transform-origin: 755px 480px;
}
.exec-left-arm {
  transform-origin: 470px 340px;
}
.exec-right-arm {
  transform-origin: 605px 340px;
}

/* ── Day Available Mode: Calmer, Professional Breathing & Handshake ── */

body.p4.day.available-mode:not(.relaxed-mode) .exec-left-man {
  animation: execLeftManBreatheDay 4.5s ease-in-out infinite;
}
body.p4.day.available-mode:not(.relaxed-mode) .exec-right-man {
  animation: execRightManBreatheDay 4.5s ease-in-out infinite 0.5s;
}
body.p4.day.available-mode:not(.relaxed-mode) .exec-woman {
  animation: execWomanBreatheDay 5s ease-in-out infinite 1s;
}
body.p4.day.available-mode:not(.relaxed-mode) .exec-left-arm {
  animation: execLeftArmShakeDay 1.6s ease-in-out infinite;
}
body.p4.day.available-mode:not(.relaxed-mode) .exec-right-arm {
  animation: execRightArmShakeDay 1.6s ease-in-out infinite;
}

@keyframes execLeftManBreatheDay {
  0%, 100% { transform: scaleY(1); }
  50% { transform: scaleY(1.015); }
}
@keyframes execRightManBreatheDay {
  0%, 100% { transform: scaleY(1); }
  50% { transform: scaleY(1.012); }
}
@keyframes execWomanBreatheDay {
  0%, 100% { transform: scaleY(1) rotate(0deg); }
  50% { transform: scaleY(1.018) rotate(0.4deg); }
}
@keyframes execLeftArmShakeDay {
  0%, 100% { transform: rotate(0deg); }
  50% { transform: rotate(3deg); }
}
@keyframes execRightArmShakeDay {
  0%, 100% { transform: rotate(0deg); }
  50% { transform: rotate(-3deg); }
}

/* ── Night Available Mode: Cyber Floating, Holographic Breathing & Handshake ── */

body.p4.night.available-mode:not(.relaxed-mode) .exec-left-man {
  animation: execLeftManBreatheNight 3.8s ease-in-out infinite;
}
body.p4.night.available-mode:not(.relaxed-mode) .exec-right-man {
  animation: execRightManBreatheNight 3.8s ease-in-out infinite 0.4s;
}
body.p4.night.available-mode:not(.relaxed-mode) .exec-woman {
  animation: execWomanBreatheNight 4.2s ease-in-out infinite 0.8s;
}
body.p4.night.available-mode:not(.relaxed-mode) .exec-left-arm {
  animation: execLeftArmShakeNight 1.2s ease-in-out infinite;
}
body.p4.night.available-mode:not(.relaxed-mode) .exec-right-arm {
  animation: execRightArmShakeNight 1.2s ease-in-out infinite;
}

@keyframes execLeftManBreatheNight {
  0%, 100% { transform: scaleY(1) translateY(0); }
  50% { transform: scaleY(1.02) translateY(-1px); }
}
@keyframes execRightManBreatheNight {
  0%, 100% { transform: scaleY(1) translateY(0); }
  50% { transform: scaleY(1.018) translateY(-1px); }
}
@keyframes execWomanBreatheNight {
  0%, 100% { transform: scaleY(1) rotate(0deg) translateY(0); }
  50% { transform: scaleY(1.022) rotate(-0.5deg) translateY(-1.5px); }
}
@keyframes execLeftArmShakeNight {
  0%, 100% { transform: rotate(0deg); }
  50% { transform: rotate(4deg); }
}
@keyframes execRightArmShakeNight {
  0%, 100% { transform: rotate(0deg); }
  50% { transform: rotate(-4deg); }
}

/* ── Relaxed Mode Overrides (Freeze all Executive Team Animations) ── */

body.relaxed-mode .exec-left-man,
body.relaxed-mode .exec-right-man,
body.relaxed-mode .exec-woman,
body.relaxed-mode .exec-left-arm,
body.relaxed-mode .exec-right-arm {
  animation: none !important;
  transform: none !important;
  transition: none !important;
}


/* ──────────────────────────────────────────────────────────
   COURSE 2 — WATER GLASS (Redesigned Premium Glass & Meniscus)
   ────────────────────────────────────────────────────────── */

/* Transform origins */
.p4-c2-glass .glass-tilt-group {
  transform-origin: 1060px 550px;
}
.p4-c2-glass .glass-liquid-group {
  transform-origin: 1060px 550px;
}
.p4-c2-glass .glass-day-meniscus,
.p4-c2-glass .glass-night-meniscus {
  transform-origin: 1060px 512px;
}
.p4-c2-glass .glass-lemon-wedge {
  transform-origin: 1044px 498px;
}

/* ── Day Mode Styling & Animations (Crystal & Slosh Theme) ── */

/* Carbonation bubbles rise continuously */
body.p4.day.available-mode:not(.relaxed-mode) .glass-day-bubble {
  animation: glassDayBubbleRise 2.5s ease-in-out infinite;
}
body.p4.day.available-mode:not(.relaxed-mode) .glass-day-bubble.b1 { animation-delay: 0s; }
body.p4.day.available-mode:not(.relaxed-mode) .glass-day-bubble.b2 { animation-delay: 0.6s; }
body.p4.day.available-mode:not(.relaxed-mode) .glass-day-bubble.b3 { animation-delay: 1.2s; }
body.p4.day.available-mode:not(.relaxed-mode) .glass-day-bubble.b4 { animation-delay: 1.8s; }
@keyframes glassDayBubbleRise {
  0% { transform: translateY(22px) scale(0); opacity: 0; }
  20% { opacity: 0.85; }
  80% { opacity: 0.85; }
  100% { transform: translateY(0) scale(1.3); opacity: 0; }
}

/* Ice cubes float up/down and sway continuously */
body.p4.day.available-mode:not(.relaxed-mode) .glass-day-ice {
  animation: glassDayIceFloat 3.5s ease-in-out infinite alternate;
}
body.p4.day.available-mode:not(.relaxed-mode) .glass-day-ice.i1 {
  transform-origin: 1053px 525px;
}
body.p4.day.available-mode:not(.relaxed-mode) .glass-day-ice.i2 {
  transform-origin: 1064px 532px;
  animation-delay: 0.8s;
  animation-duration: 4.2s;
}
@keyframes glassDayIceFloat {
  0% { transform: translateY(0) rotate(15deg); }
  100% { transform: translateY(-2px) rotate(10deg); }
}

/* Liquid top surface meniscus sways gently (continuous) */
body.p4.day.available-mode:not(.relaxed-mode) .glass-day-meniscus {
  animation: glassDayMeniscusIdle 5s ease-in-out infinite alternate;
}
@keyframes glassDayMeniscusIdle {
  0% { transform: scaleX(1) skewX(0deg); opacity: 0.7; }
  100% { transform: scaleX(1.02) skewX(0.5deg); opacity: 0.85; }
}

/* Active State: Glass tilts/wobbles */
.p4-c2-glass.active .glass-tilt-group {
  animation: glassWobbleActive 0.6s ease-in-out;
}
@keyframes glassWobbleActive {
  0% { transform: rotate(0deg); }
  15% { transform: rotate(8deg) translate(0.5px, -0.5px); }
  30% { transform: rotate(-6deg) translate(-0.5px, 0.5px); }
  45% { transform: rotate(4deg); }
  60% { transform: rotate(-2deg); }
  75% { transform: rotate(1deg); }
  100% { transform: rotate(0deg); }
}

/* Active State: Liquid sloshes dynamically */
.p4-c2-glass.active .glass-liquid-group {
  animation: glassLiquidSloshActive 1s cubic-bezier(0.25, 0.8, 0.25, 1);
}
@keyframes glassLiquidSloshActive {
  0% { transform: rotate(0deg) skewX(0deg); }
  20% { transform: rotate(-10deg) skewX(-4deg) scaleY(1.05); }
  40% { transform: rotate(8deg) skewX(3deg) scaleY(0.96); }
  60% { transform: rotate(-4deg) skewX(-1.5deg) scaleY(1.02); }
  80% { transform: rotate(2deg) skewX(0.8deg); }
  100% { transform: rotate(0deg) skewX(0deg); }
}

/* Active State: Lemon wedge wiggles on the rim */
.p4-c2-glass.active .glass-lemon-wedge {
  animation: lemonWiggleActive 1.2s ease-out;
}
@keyframes lemonWiggleActive {
  0% { transform: rotate(0deg); }
  20% { transform: rotate(18deg) translate(1px, -1px); }
  40% { transform: rotate(-14deg) translate(-0.8px, 0.8px); }
  60% { transform: rotate(8deg); }
  80% { transform: rotate(-3deg); }
  100% { transform: rotate(0deg); }
}


/* ── Night Mode Styling & Animations (Cyber Energy Tonic Glass) ── */

/* Tonic liquid glows and breathes (continuous) */
body.p4.night.available-mode:not(.relaxed-mode) .glass-night-water {
  animation: glassNightWaterBreathe 3s ease-in-out infinite alternate;
}
@keyframes glassNightWaterBreathe {
  0% { opacity: 0.65; filter: drop-shadow(0 0 1px #0ea5e9); }
  100% { opacity: 0.95; filter: drop-shadow(0 0 4px #22d3ee); }
}

/* Neon carbonation bubbles rise (continuous) */
body.p4.night.available-mode:not(.relaxed-mode) .glass-night-bubble {
  animation: glassNightBubbleRise 2.2s ease-in-out infinite;
}
body.p4.night.available-mode:not(.relaxed-mode) .glass-night-bubble.b1 { animation-delay: 0.2s; }
body.p4.night.available-mode:not(.relaxed-mode) .glass-night-bubble.b2 { animation-delay: 0.7s; }
body.p4.night.available-mode:not(.relaxed-mode) .glass-night-bubble.b3 { animation-delay: 1.2s; }
body.p4.night.available-mode:not(.relaxed-mode) .glass-night-bubble.b4 { animation-delay: 1.7s; }
@keyframes glassNightBubbleRise {
  0% { transform: translateY(22px) scale(0); opacity: 0; }
  20% { opacity: 0.95; }
  80% { opacity: 0.95; }
  100% { transform: translateY(0) scale(1.5); opacity: 0; }
}

/* Holographic glowing ice cubes spin (continuous) */
body.p4.night.available-mode:not(.relaxed-mode) .glass-night-ice {
  animation: glassNightIceSpin 6s linear infinite;
}
body.p4.night.available-mode:not(.relaxed-mode) .glass-night-ice.i1 {
  transform-origin: 1053px 525px;
}
body.p4.night.available-mode:not(.relaxed-mode) .glass-night-ice.i2 {
  transform-origin: 1064px 532px;
  animation-duration: 8s;
  animation-direction: reverse;
}
@keyframes glassNightIceSpin {
  to { transform: rotate(360deg); }
}

/* Neon meniscus surface glows and breathes (continuous) */
body.p4.night.available-mode:not(.relaxed-mode) .glass-night-meniscus {
  animation: glassNightMeniscusBreathe 4s ease-in-out infinite alternate;
}
@keyframes glassNightMeniscusBreathe {
  0% { opacity: 0.5; filter: drop-shadow(0 0 1px #22d3ee); }
  100% { opacity: 0.85; filter: drop-shadow(0 0 3px #d946ef); }
}

/* Glass outer neon rim outline breathes (continuous) */
body.p4.night.available-mode:not(.relaxed-mode) .p4-c2-glass .glass-night-neon-glow {
  animation: glassNightNeonGlowPulse 3s ease-in-out infinite alternate;
}
@keyframes glassNightNeonGlowPulse {
  0% { opacity: 0.15; }
  100% { opacity: 0.55; }
}

/* Active State: Glass tilts/wobbles (Night) */
body.p4.night:not(.relaxed-mode) .p4-c2-glass.active .glass-tilt-group {
  animation: glassWobbleActiveNight 0.6s ease-in-out;
}
@keyframes glassWobbleActiveNight {
  0% { transform: rotate(0deg); }
  15% { transform: rotate(10deg) translate(0.8px, -0.8px); }
  30% { transform: rotate(-8deg) translate(-0.8px, 0.8px); }
  45% { transform: rotate(5deg); }
  60% { transform: rotate(-3deg); }
  75% { transform: rotate(1deg); }
  100% { transform: rotate(0deg); }
}

/* Active State: Tonic liquid sloshes (Night) */
.p4-c2-glass.active .glass-liquid-group {
  animation: glassLiquidSloshActiveNight 1s cubic-bezier(0.25, 0.8, 0.25, 1);
}
@keyframes glassLiquidSloshActiveNight {
  0% { transform: rotate(0deg) skewX(0deg); }
  20% { transform: rotate(-12deg) skewX(-5deg) scaleY(1.06); }
  40% { transform: rotate(9deg) skewX(4deg) scaleY(0.95); }
  60% { transform: rotate(-5deg) skewX(-2deg); }
  80% { transform: rotate(2deg) skewX(1deg); }
  100% { transform: rotate(0deg) skewX(0deg); }
}

/* Active State: Erupting Neon Sparkles rise and expand */
.p4-c2-glass.active .glass-night-sparks {
  animation: glassNightSparksFade 1.6s ease-out forwards;
}
@keyframes glassNightSparksFade {
  0% { opacity: 0; transform: translateY(8px); }
  20% { opacity: 1; }
  80% { opacity: 1; }
  100% { opacity: 0; transform: translateY(-26px); }
}
.p4-c2-glass.active .glass-night-sparks .sp1 { animation: glassNightSpark1 1.6s ease-out forwards; }
.p4-c2-glass.active .glass-night-sparks .sp2 { animation: glassNightSpark2 1.6s ease-out forwards; }
.p4-c2-glass.active .glass-night-sparks .sp3 { animation: glassNightSpark3 1.6s ease-out forwards; }
.p4-c2-glass.active .glass-night-sparks .sp4 { animation: glassNightSpark4 1.6s ease-out forwards; }
@keyframes glassNightSpark1 { 0% { transform: translate(0, 0); } 100% { transform: translate(-14px, -20px) scale(1.5); } }
@keyframes glassNightSpark2 { 0% { transform: translate(0, 0); } 100% { transform: translate(16px, -24px) scale(1.4); } }
@keyframes glassNightSpark3 { 0% { transform: translate(0, 0); } 100% { transform: translate(4px, -28px) scale(1.6); } }
@keyframes glassNightSpark4 { 0% { transform: translate(0, 0); } 100% { transform: translate(-20px, -14px) scale(1.3); } }


/* ── Settle Spring / Ending Animations (Settle State) ── */

body.p4:not(.relaxed-mode) .p4-c2-glass.ending .glass-tilt-group {
  animation: glassSettleSpring 1.2s cubic-bezier(0.25, 1.6, 0.5, 1) forwards;
}
@keyframes glassSettleSpring {
  0% { transform: rotate(8deg) scale(1.02); }
  30% { transform: rotate(-4deg) scale(0.98); }
  60% { transform: rotate(2deg) scale(1.01); }
  85% { transform: rotate(-0.5deg); }
  100% { transform: rotate(0deg) scale(1); }
}

/* Fade out sparks on ending transition */
.p4-c2-glass.ending .glass-night-sparks {
  opacity: 0 !important;
  transition: opacity 0.4s ease;
}


/* ── Relaxed Mode Overrides (Freeze all Glass Animations) ── */

body.relaxed-mode .glass-day-water,
body.relaxed-mode .glass-day-meniscus,
body.relaxed-mode .glass-day-ice,
body.relaxed-mode .glass-day-bubble,
body.relaxed-mode .glass-tilt-group,
body.relaxed-mode .glass-liquid-group,
body.relaxed-mode .glass-lemon-wedge,
body.relaxed-mode .glass-night-water,
body.relaxed-mode .glass-night-meniscus,
body.relaxed-mode .glass-night-ice,
body.relaxed-mode .glass-night-bubble,
body.relaxed-mode .glass-night-neon-glow,
body.relaxed-mode .glass-night-sparks,
body.relaxed-mode .glass-night-sparks .sp1,
body.relaxed-mode .glass-night-sparks .sp2,
body.relaxed-mode .glass-night-sparks .sp3,
body.relaxed-mode .glass-night-sparks .sp4,
body.relaxed-mode .p4-c2-glass.active .glass-tilt-group,
body.relaxed-mode .p4-c2-glass.ending .glass-tilt-group {
  animation: none !important;
  transform: none !important;
  transition: none !important;
  filter: none !important;
}

body.relaxed-mode .glass-night-neon-glow,
body.relaxed-mode .glass-night-sparks {
  opacity: 0 !important;
}


/* Hide corporate executive team silhouettes outside of office hours (Night Available Mode) */
body.p4.night.available-mode .p4-c2-exec-team {
  display: none !important;
}


/* ──────────────────────────────────────────────────────────
   COURSE 2 — NIGHT BACKGROUND ANIMATIONS (Shooting Star & Clouds)
   ────────────────────────────────────────────────────────── */

/* Distant Clouds slow horizontal drift/breathe (Night Available Mode) */
body.p4.night.available-mode:not(.relaxed-mode) .p4-c2-cloud.c1 {
  animation: c1CloudDrift 60s ease-in-out infinite;
}
body.p4.night.available-mode:not(.relaxed-mode) .p4-c2-cloud.c2 {
  animation: c2CloudDrift 80s ease-in-out infinite;
}
body.p4.night.available-mode:not(.relaxed-mode) .p4-c2-cloud.c3 {
  animation: c3CloudDrift 70s ease-in-out infinite;
}

@keyframes c1CloudDrift {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(45px, -2px); }
}
@keyframes c2CloudDrift {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(-60px, 1px); }
}
@keyframes c3CloudDrift {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(35px, -3px); }
}

/* Shooting Star flash loop (Night Available Mode) */
body.p4.night.available-mode:not(.relaxed-mode) .p4-c2-shooting-star {
  animation: c2ShootingStarShoot 12s cubic-bezier(0.25, 1, 0.5, 1) infinite;
}

@keyframes c2ShootingStarShoot {
  0% { transform: translate(0, 0); opacity: 0; }
  1% { opacity: 0.2; }
  4% { opacity: 1; }
  8% { transform: translate(-280px, 140px); opacity: 0; }
  100% { transform: translate(-280px, 140px); opacity: 0; }
}

/* ── Relaxed Mode Overrides (Freeze Night Sky Background Animations) ── */

body.relaxed-mode .p4-c2-cloud,
body.relaxed-mode .p4-c2-shooting-star {
  animation: none !important;
  transform: none !important;
  transition: none !important;
}

body.relaxed-mode .p4-c2-shooting-star {
  opacity: 0 !important;
}




/* ──────────────────────────────────────────────────────────
   COURSE 2 — BUSY MODE BOARDROOM CONFIGURATION
   ────────────────────────────────────────────────────────── */

/* Hide all boardroom interactive elements from available mode when in Busy Mode (Available mode remains untouched) */
body.p4.busy-mode #p4Course2 .p4-c2-interactive {
  display: none !important;
}

/* ============================================================
   COURSE 2 — BUSY-ONLY 17 INTERACTIVE ELEMENTS STYLING
   ============================================================ */

/* Group container: visible only in busy mode */
.p4-c2-busy-only {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}
body.p4.busy-mode .p4-c2-busy-only {
  opacity: 1;
  pointer-events: auto;
}

/* Base interactive styling */
.p4-c2-busy-interactive {
  cursor: pointer;
  pointer-events: auto;
  transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1.15), filter 0.3s ease;
}
.p4-c2-busy-interactive:hover {
  transform: scale(1.05);
}

/* Day mode hover shadow */
body.p4.day .p4-c2-busy-interactive:hover {
  filter: drop-shadow(0 0 5px rgba(15, 23, 42, 0.18));
}

/* Night mode neon glow hover */
body.p4.night .p4-c2-busy-interactive:hover {
  filter: drop-shadow(0 0 8px rgba(34, 211, 238, 0.7)) drop-shadow(0 0 3px rgba(217, 70, 239, 0.4));
}

/* ── 1. Security Camera Redesign ── */
.p4-c2-busy-camera {
  pointer-events: auto;
}

/* Transform Origins */
.camera-head-rotate-day,
.camera-head-rotate-night,
.camera-day-cone,
.camera-night-cone {
  transform-origin: 32px 132px;
  transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1.1);
}

.camera-day-target-grid,
.camera-night-target-grid {
  transform-origin: 180px 360px;
}

/* Day Mode: Busy Surveillance Sweeping (Alert, Fast) */
body.p4.day.busy-mode:not(.relaxed-mode) .p4-c2-busy-camera:not(.active):not(.ending) .camera-head-rotate-day {
  animation: cameraHeadScanDay 4s ease-in-out infinite;
}
body.p4.day.busy-mode:not(.relaxed-mode) .p4-c2-busy-camera:not(.active):not(.ending) .camera-day-cone {
  animation: cameraConeScanDay 4s ease-in-out infinite;
}
body.p4.day.busy-mode .camera-day-led-pulse {
  animation: cameraLedPulseDay 0.8s infinite alternate;
}

@keyframes cameraHeadScanDay {
  0%, 100% { transform: rotate(-5deg); }
  50% { transform: rotate(10deg); }
}
@keyframes cameraConeScanDay {
  0%, 100% { opacity: 0.08; transform: rotate(-5deg); }
  50% { opacity: 0.28; transform: rotate(10deg); }
}
@keyframes cameraLedPulseDay {
  0% { fill: #15803d; }
  100% { fill: #22c55e; }
}

/* Night Mode: Slow Overtime Guard Scanning (Sleepy, Methodical) */
body.p4.night.busy-mode:not(.relaxed-mode) .p4-c2-busy-camera:not(.active):not(.ending) .camera-head-rotate-night {
  animation: cameraHeadScanNight 8s ease-in-out infinite;
}
body.p4.night.busy-mode:not(.relaxed-mode) .p4-c2-busy-camera:not(.active):not(.ending) .camera-night-cone {
  animation: cameraConeScanNight 8s ease-in-out infinite;
}
body.p4.night.busy-mode .camera-night-led-pulse {
  animation: cameraLedPulseNight 1.6s infinite alternate;
}

@keyframes cameraHeadScanNight {
  0%, 100% { transform: rotate(-10deg); }
  50% { transform: rotate(12deg); }
}
@keyframes cameraConeScanNight {
  0%, 100% { opacity: 0.04; transform: rotate(-10deg); }
  50% { opacity: 0.22; transform: rotate(12deg); }
}
@keyframes cameraLedPulseNight {
  0% { fill: #7f1d1d; }
  100% { fill: #ef4444; }
}

/* Active Click: Day Target Locked vs Night Overtime System Alarm Override */
.p4-c2-busy-camera.active .camera-head-rotate-day {
  animation: cameraHeadActiveDay 3s cubic-bezier(0.4, 0, 0.2, 1);
}
.p4-c2-busy-camera.active .camera-day-cone {
  animation: cameraConeActiveDay 3s ease-out;
}
.p4-c2-busy-camera.active .camera-day-target-grid {
  animation: cameraTargetGridActiveDay 3s ease;
}

.p4-c2-busy-camera.active .camera-head-rotate-night {
  animation: cameraHeadActiveNight 3s cubic-bezier(0.4, 0, 0.2, 1);
}
.p4-c2-busy-camera.active .camera-night-cone {
  animation: cameraConeActiveNight 3s ease-out;
}
.p4-c2-busy-camera.active .camera-night-target-grid {
  animation: cameraTargetGridActiveNight 3s ease;
}

/* Day Active Keyframes */
@keyframes cameraHeadActiveDay {
  0% { transform: rotate(-5deg); }
  15% { transform: rotate(22deg); }
  35% { transform: rotate(-12deg); }
  55% { transform: rotate(18deg); }
  75% { transform: rotate(0deg); }
  100% { transform: rotate(5deg); }
}
@keyframes cameraConeActiveDay {
  0% { opacity: 0; transform: scaleX(0.5); }
  15% { opacity: 0.55; transform: scaleX(1.2); }
  30%, 70% { opacity: 0.75; transform: scaleX(1); }
  85% { opacity: 0.3; }
  100% { opacity: 0; }
}
@keyframes cameraTargetGridActiveDay {
  0% { opacity: 0; transform: scale(0.4); }
  15% { opacity: 0.85; transform: scale(1.1); }
  30%, 70% { opacity: 1; transform: scale(1); }
  85% { opacity: 0.4; }
  100% { opacity: 0; }
}

/* Night Active Keyframes */
@keyframes cameraHeadActiveNight {
  0% { transform: rotate(-10deg); }
  12% { transform: rotate(-18deg); }
  30% { transform: rotate(28deg); }
  50% { transform: rotate(-4deg); }
  70% { transform: rotate(22deg); }
  85% { transform: rotate(0deg); }
  100% { transform: rotate(-8deg); }
}
@keyframes cameraConeActiveNight {
  0% { opacity: 0; transform: scaleX(0.4); }
  15% { opacity: 0.8; transform: scaleX(1.25); }
  30%, 75% { opacity: 0.95; transform: scaleX(1); }
  90% { opacity: 0.4; }
  100% { opacity: 0; }
}
@keyframes cameraTargetGridActiveNight {
  0% { opacity: 0; transform: scale(0.5); }
  15% { opacity: 0.9; transform: scale(1.05); }
  30%, 75% { opacity: 1; transform: scale(1); }
  90% { opacity: 0.3; }
  100% { opacity: 0; }
}

/* Redesigned Endings (Settle) Animation */
.p4-c2-busy-camera.ending .camera-head-rotate-day {
  animation: cameraSettleDay 1.2s cubic-bezier(0.25, 1, 0.5, 1);
}
.p4-c2-busy-camera.ending .camera-head-rotate-night {
  animation: cameraSettleNight 1.2s cubic-bezier(0.25, 1, 0.5, 1);
}

@keyframes cameraSettleDay {
  0% { transform: rotate(5deg); }
  30% { transform: rotate(-7deg); }
  55% { transform: rotate(3.5deg); }
  75% { transform: rotate(-1.5deg); }
  100% { transform: rotate(-5deg); }
}
@keyframes cameraSettleNight {
  0% { transform: rotate(-8deg); }
  30% { transform: rotate(8deg); }
  55% { transform: rotate(-4.5deg); }
  75% { transform: rotate(2deg); }
  100% { transform: rotate(-10deg); }
}


/* ── 2. Digital Photo Frame Redesign ── */
.p4-c2-busy-frame {
  transform-origin: 60px 375px;
  pointer-events: auto;
  perspective: 400px;
}

.frame-night-holo {
  transform-origin: 60px 375px;
}

/* Day Mode: Live business metrics telemetry stream (busy workload) */
body.p4.day.busy-mode:not(.relaxed-mode) .p4-c2-busy-frame:not(.active):not(.ending) .frame-day-bar1 {
  animation: frameBarPulseDay1 2.2s ease-in-out infinite alternate;
}
body.p4.day.busy-mode:not(.relaxed-mode) .p4-c2-busy-frame:not(.active):not(.ending) .frame-day-bar2 {
  animation: frameBarPulseDay2 1.7s ease-in-out infinite alternate;
}
body.p4.day.busy-mode:not(.relaxed-mode) .p4-c2-busy-frame:not(.active):not(.ending) .frame-day-bar3 {
  animation: frameBarPulseDay3 2.9s ease-in-out infinite alternate;
}
body.p4.day.busy-mode:not(.relaxed-mode) .p4-c2-busy-frame:not(.active):not(.ending) .frame-day-bar4 {
  animation: frameBarPulseDay4 2s ease-in-out infinite alternate;
}
body.p4.day.busy-mode:not(.relaxed-mode) .p4-c2-busy-frame .frame-day-light1 {
  animation: frameLightBlink1 0.6s steps(2) infinite;
}
body.p4.day.busy-mode:not(.relaxed-mode) .p4-c2-busy-frame .frame-day-light2 {
  animation: frameLightBlink2 0.8s steps(2) infinite;
}
body.p4.day.busy-mode:not(.relaxed-mode) .p4-c2-busy-frame .frame-day-light3 {
  animation: frameLightBlink3 1.1s steps(2) infinite;
}
body.p4.day.busy-mode:not(.relaxed-mode) .p4-c2-busy-frame:not(.active):not(.ending) .frame-day-kpi-ring {
  animation: frameKpiPulseDay 4s ease-in-out infinite alternate;
}

@keyframes frameBarPulseDay1 {
  0% { height: 25px; y: 375px; }
  100% { height: 10px; y: 390px; }
}
@keyframes frameBarPulseDay2 {
  0% { height: 15px; y: 385px; }
  100% { height: 35px; y: 365px; }
}
@keyframes frameBarPulseDay3 {
  0% { height: 20px; y: 380px; }
  100% { height: 42px; y: 358px; }
}
@keyframes frameBarPulseDay4 {
  0% { height: 30px; y: 370px; }
  100% { height: 12px; y: 388px; }
}
@keyframes frameLightBlink1 {
  0%, 100% { fill: #10b981; }
  50% { fill: #059669; opacity: 0.3; }
}
@keyframes frameLightBlink2 {
  0%, 100% { fill: #3b82f6; }
  50% { fill: #1d4ed8; opacity: 0.3; }
}
@keyframes frameLightBlink3 {
  0%, 100% { fill: #f59e0b; }
  50% { fill: #d97706; opacity: 0.4; }
}
@keyframes frameKpiPulseDay {
  0% { stroke-dasharray: 20, 100; }
  100% { stroke-dasharray: 75, 100; }
}

/* Night Mode: Security terminal monitoring (night watch) */
body.p4.night.busy-mode:not(.relaxed-mode) .p4-c2-busy-frame:not(.active):not(.ending) .frame-night-scanline {
  animation: frameScanlineNight 4.5s linear infinite;
}
body.p4.night.busy-mode:not(.relaxed-mode) .p4-c2-busy-frame:not(.active):not(.ending) .frame-night-wave1 {
  animation: frameOscilloscope1 6s linear infinite;
}
body.p4.night.busy-mode:not(.relaxed-mode) .p4-c2-busy-frame:not(.active):not(.ending) .frame-night-wave2 {
  animation: frameOscilloscope2 7s linear infinite;
}
body.p4.night.busy-mode:not(.relaxed-mode) .p4-c2-busy-frame .frame-night-alert-node {
  animation: frameAlertBlink 0.8s infinite alternate;
}
body.p4.night.busy-mode:not(.relaxed-mode) .p4-c2-busy-frame .frame-night-alert-txt {
  animation: frameAlertTextPulse 1.6s infinite alternate;
}
body.p4.night.busy-mode:not(.relaxed-mode) .p4-c2-busy-frame:not(.active):not(.ending) .frame-night-eq1 {
  animation: frameEqPulse 2s ease-in-out infinite alternate;
}
body.p4.night.busy-mode:not(.relaxed-mode) .p4-c2-busy-frame:not(.active):not(.ending) .frame-night-eq2 {
  animation: frameEqPulse 1.3s ease-in-out infinite alternate;
}
body.p4.night.busy-mode:not(.relaxed-mode) .p4-c2-busy-frame:not(.active):not(.ending) .frame-night-eq3 {
  animation: frameEqPulse 2.8s ease-in-out infinite alternate;
}
body.p4.night.busy-mode:not(.relaxed-mode) .p4-c2-busy-frame:not(.active):not(.ending) .frame-night-eq4 {
  animation: frameEqPulse 1.7s ease-in-out infinite alternate;
}
body.p4.night.busy-mode:not(.relaxed-mode) .p4-c2-busy-frame:not(.active):not(.ending) .frame-night-eq5 {
  animation: frameEqPulse 2.4s ease-in-out infinite alternate;
}
body.p4.night.busy-mode:not(.relaxed-mode) .p4-c2-busy-frame:not(.active):not(.ending) .frame-night-eq6 {
  animation: frameEqPulse 1.5s ease-in-out infinite alternate;
}

@keyframes frameScanlineNight {
  0% { y1: 320; y2: 320; opacity: 0; }
  10%, 90% { opacity: 0.75; }
  100% { y1: 430; y2: 430; opacity: 0; }
}
@keyframes frameOscilloscope1 {
  0% { stroke-dashoffset: 0; stroke-dasharray: 100; }
  100% { stroke-dashoffset: -200; stroke-dasharray: 100; }
}
@keyframes frameOscilloscope2 {
  0% { stroke-dashoffset: 0; stroke-dasharray: 85; }
  100% { stroke-dashoffset: 170; stroke-dasharray: 85; }
}
@keyframes frameAlertBlink {
  0% { fill: #ef4444; filter: drop-shadow(0 0 1.5px #ef4444); }
  100% { fill: #7f1d1d; filter: none; }
}
@keyframes frameAlertTextPulse {
  0% { opacity: 0.25; }
  100% { opacity: 1; }
}
@keyframes frameEqPulse {
  0% { y2: 405; }
  100% { y2: 360; }
}

/* Active Interactions: Day 3D tilt synch vs Night shudder warning projection */
.p4-c2-busy-frame.active {
  animation: frameActiveDay 1.5s ease-out;
}
body.p4.night .p4-c2-busy-frame.active {
  animation: frameActiveNight 1.5s ease-out;
}

.p4-c2-busy-frame.active .frame-night-holo {
  animation: frameHoloActiveNight 1.5s ease-out;
}
.p4-c2-busy-frame.active .frame-night-scanline {
  animation: scanlineActiveNight 1.5s linear infinite;
}

.p4-c2-busy-frame.active .frame-day-bar1,
.p4-c2-busy-frame.active .frame-day-bar2,
.p4-c2-busy-frame.active .frame-day-bar3,
.p4-c2-busy-frame.active .frame-day-bar4 {
  animation: barGrowActiveDay 1.5s ease;
}

@keyframes frameActiveDay {
  0% { transform: scale(1) rotateY(0deg); filter: drop-shadow(0 0 0 rgba(59, 130, 246, 0)); }
  20% { transform: scale(1.06) rotateY(30deg); filter: drop-shadow(-8px 4px 12px rgba(59, 130, 246, 0.22)); }
  45% { transform: scale(0.97) rotateY(-25deg); filter: drop-shadow(6px -3px 10px rgba(16, 185, 129, 0.18)); }
  75% { transform: scale(1.02) rotateY(10deg); }
  100% { transform: scale(1) rotateY(0deg); }
}
@keyframes barGrowActiveDay {
  0%, 100% { transform: scaleY(1); }
  35%, 65% { transform: scaleY(1.38); }
}

@keyframes frameActiveNight {
  0% { transform: translate(0,0) scale(1); filter: drop-shadow(0 0 0 rgba(217, 70, 239, 0)); }
  10%, 30%, 50%, 70% { transform: translate(-2px, 1.5px) scale(1.04); filter: drop-shadow(0 0 15px rgba(217, 70, 239, 0.45)) drop-shadow(0 0 5px rgba(34, 211, 238, 0.35)); }
  20%, 40%, 60%, 80% { transform: translate(2px, -1.5px) scale(1.04); filter: drop-shadow(0 0 15px rgba(217, 70, 239, 0.45)) drop-shadow(0 0 5px rgba(34, 211, 238, 0.35)); }
  95% { transform: translate(0,0) scale(1.01); }
  100% { transform: translate(0,0) scale(1); }
}
@keyframes frameHoloActiveNight {
  0% { opacity: 0; transform: scale(0.88); }
  20%, 80% { opacity: 0.88; transform: scale(1.06); }
  100% { opacity: 0; transform: scale(0.88); }
}
@keyframes scanlineActiveNight {
  0% { y1: 320; y2: 320; }
  100% { y1: 430; y2: 430; }
}

/* Redesigned Settle/Ending Animations */
.p4-c2-busy-frame.ending {
  animation: frameSettleDay 1.2s cubic-bezier(0.25, 1.1, 0.5, 1.25);
}
body.p4.night .p4-c2-busy-frame.ending {
  animation: frameSettleNight 1.2s cubic-bezier(0.25, 1.1, 0.5, 1.25);
}

@keyframes frameSettleDay {
  0% { transform: rotateY(15deg) scale(1.03); }
  30% { transform: rotateY(-8deg) scale(0.98); }
  55% { transform: rotateY(4deg) scale(1.01); }
  75% { transform: rotateY(-1.5deg) scale(0.995); }
  100% { transform: rotateY(0deg) scale(1); }
}
@keyframes frameSettleNight {
  0% { transform: translate(3px, -2px) scale(1.04); }
  25% { transform: translate(-2px, 1px) scale(0.98); }
  50% { transform: translate(1px, -0.5px) scale(1.01); }
  75% { transform: translate(-0.5px, 0.2px) scale(0.995); }
  100% { transform: translate(0, 0) scale(1); }
}

/* ── 3. Smart Projection Screen Redesign ── */
.p4-c2-busy-dashboard {
  transform-origin: 825px 92px;
  pointer-events: auto;
  perspective: 400px;
}

.dash-night-sweeper,
.dash-holo-overlay {
  transform-origin: 825px 85px;
}

/* Day Mode: Live business metrics flow stream (busy day focus) */
body.p4.day.busy-mode:not(.relaxed-mode) .p4-c2-busy-dashboard:not(.active):not(.ending) {
  animation: dashDayBob 5s ease-in-out infinite;
}
body.p4.day.busy-mode:not(.relaxed-mode) .p4-c2-busy-dashboard .dash-day-chart1 {
  stroke-dasharray: 200;
  stroke-dashoffset: 0;
  animation: dashDayFlow 7s linear infinite;
}
body.p4.day.busy-mode:not(.relaxed-mode) .p4-c2-busy-dashboard .dash-day-chart2 {
  stroke-dasharray: 6, 4;
  animation: dashDayForecastMove 5s linear infinite;
}
body.p4.day.busy-mode:not(.relaxed-mode) .p4-c2-busy-dashboard .dash-day-status-dot {
  animation: dashDayDotBreathe 1.2s ease-in-out infinite alternate;
}
body.p4.day.busy-mode:not(.relaxed-mode) .p4-c2-busy-dashboard .dash-day-node-pulse {
  animation: dashDayNodePulse 1.8s ease-in-out infinite alternate;
}

@keyframes dashDayBob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3.5px); }
}
@keyframes dashDayFlow {
  0% { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: -200; }
}
@keyframes dashDayForecastMove {
  0% { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: 40; }
}
@keyframes dashDayDotBreathe {
  0% { opacity: 0.35; }
  100% { opacity: 1; filter: drop-shadow(0 0 1.5px #22c55e); }
}
@keyframes dashDayNodePulse {
  0% { r: 1.8px; opacity: 0.6; }
  100% { r: 4.2px; opacity: 1; fill: #2563eb; filter: drop-shadow(0 0 2px #3b82f6); }
}

/* Night Mode: Security sweep and overtime surveillance (busy night watch focus) */
body.p4.night.busy-mode:not(.relaxed-mode) .p4-c2-busy-dashboard:not(.active):not(.ending) {
  animation: dashNightFloat 6s ease-in-out infinite;
}
body.p4.night.busy-mode:not(.relaxed-mode) .p4-c2-busy-dashboard:not(.active) .dash-night-sweeper {
  animation: dashNightRadarSweep 4s linear infinite;
}
body.p4.night.busy-mode:not(.relaxed-mode) .p4-c2-busy-dashboard .dash-night-target1 {
  animation: targetBlink1 1.4s infinite alternate;
}
body.p4.night.busy-mode:not(.relaxed-mode) .p4-c2-busy-dashboard .dash-night-target2 {
  animation: targetBlink2 1.8s infinite alternate;
}
body.p4.night.busy-mode:not(.relaxed-mode) .p4-c2-busy-dashboard .dash-night-wave {
  stroke-dasharray: 120;
  animation: dashNightWaveFlow 3.5s linear infinite;
}
body.p4.night.busy-mode:not(.relaxed-mode) .p4-c2-busy-dashboard .dash-night-warning-box {
  animation: dashNightWarningFlash 1.6s infinite alternate;
}
body.p4.night.busy-mode:not(.relaxed-mode) .p4-c2-busy-dashboard .dash-night-warning-txt {
  animation: dashNightWarningTextPulse 0.8s infinite alternate;
}

@keyframes dashNightFloat {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  33% { transform: translate(-1.8px, -2.5px) rotate(0.4deg); }
  66% { transform: translate(1.8px, 1.8px) rotate(-0.4deg); }
}
@keyframes dashNightRadarSweep {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
@keyframes targetBlink1 {
  0%, 20% { opacity: 0.15; filter: none; }
  60%, 100% { opacity: 1; filter: drop-shadow(0 0 2.5px #ef4444); }
}
@keyframes targetBlink2 {
  0%, 30% { opacity: 0.1; filter: none; }
  70%, 100% { opacity: 1; filter: drop-shadow(0 0 2.5px #eab308); }
}
@keyframes dashNightWaveFlow {
  0% { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: -120; }
}
@keyframes dashNightWarningFlash {
  0% { fill: #450a0a; stroke: #7f1d1d; }
  100% { fill: #7f1d1d; stroke: #f87171; filter: drop-shadow(0 0 2px #ef4444); }
}
@keyframes dashNightWarningTextPulse {
  0% { opacity: 0.45; }
  100% { opacity: 1; fill: #ffffff; }
}

/* Active Click Animations: 3D Volumetric flip vs Shuddering alert lock */
.p4-c2-busy-dashboard.active {
  animation: dashActiveDay 1.6s cubic-bezier(0.25, 0.8, 0.25, 1);

}
body.p4.night .p4-c2-busy-dashboard.active {
  animation: dashActiveNight 1.6s ease-out;
}

.p4-c2-busy-dashboard.active .dash-day-chart1,
.p4-c2-busy-dashboard.active .dash-day-chart2 {
  animation: dashChartActiveGrow 1.6s ease;
}
.p4-c2-busy-dashboard.active .dash-night-sweeper {
  animation: dashNightRadarSweep 0.5s linear infinite;
}
.p4-c2-busy-dashboard.active .dash-holo-overlay {
  animation: dashHoloOverlayPulse 1.6s ease;
}
.p4-c2-busy-dashboard.active .dash-night-warning-box {
  animation: alertActiveBoxFlash 0.2s infinite;
}
.p4-c2-busy-dashboard.active .dash-night-warning-txt {
  animation: alertActiveTextFlash 0.2s infinite;
}

@keyframes dashActiveDay {
  0% { transform: rotateX(0deg) scale(1); filter: drop-shadow(0 0 0 rgba(59, 130, 246, 0)); }
  25% { transform: rotateX(-24deg) scale(1.05); filter: drop-shadow(0 15px 20px rgba(59, 130, 246, 0.35)); }
  55% { transform: rotateX(16deg) scale(0.97); filter: drop-shadow(0 -8px 12px rgba(16, 185, 129, 0.18)); }
  80% { transform: rotateX(-5deg) scale(1.015); }
  100% { transform: rotateX(0deg) scale(1); }
}
@keyframes dashChartActiveGrow {
  0%, 100% { transform: scaleY(1); }
  35%, 65% { transform: scaleY(1.4); }
}
@keyframes dashActiveNight {
  0% { transform: scale(1) translate(0, 0); filter: drop-shadow(0 0 0 rgba(217, 70, 239, 0)); }
  10%, 30%, 50%, 70% { transform: scale(1.04) translate(-1.5px, 1px); filter: drop-shadow(0 0 20px rgba(22, 211, 238, 0.65)) drop-shadow(0 0 6px rgba(217, 70, 239, 0.45)); }
  20%, 40%, 60%, 80% { transform: scale(1.04) translate(1.5px, -1px); filter: drop-shadow(0 0 20px rgba(22, 211, 238, 0.65)) drop-shadow(0 0 6px rgba(217, 70, 239, 0.45)); }
  90% { transform: scale(1.015) translate(0, 0); }
  100% { transform: scale(1) translate(0, 0); }
}
@keyframes dashHoloOverlayPulse {
  0% { opacity: 0; transform: scaleY(0.75); }
  20%, 75% { opacity: 0.72; transform: scaleY(1.05); }
  100% { opacity: 0; transform: scaleY(0.75); }
}
@keyframes alertActiveBoxFlash {
  0%, 100% { fill: #ef4444; stroke: #ffffff; }
  50% { fill: #eab308; stroke: #000000; }
}
@keyframes alertActiveTextFlash {
  0%, 100% { fill: #ffffff; }
  50% { fill: #000000; }
}

/* Redesigned Settle/Ending Animations */
.p4-c2-busy-dashboard.ending {
  animation: dashSettleDay 1.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
body.p4.night .p4-c2-busy-dashboard.ending {
  animation: dashSettleNight 1.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes dashSettleDay {
  0% { transform: rotateX(-15deg) scale(1.03); }
  30% { transform: rotateX(8deg) scale(0.98); }
  55% { transform: rotateX(-4deg) scale(1.01); }
  75% { transform: rotateX(1.5deg) scale(0.995); }
  100% { transform: rotateX(0deg) scale(1); }
}
@keyframes dashSettleNight {
  0% { transform: translate(3px, -2px) scale(1.04) rotate(1.5deg); }
  25% { transform: translate(-2px, 1px) scale(0.98) rotate(-1deg); }
  50% { transform: translate(1px, -0.5px) scale(1.01) rotate(0.5deg); }
  75% { transform: translate(-0.5px, 0.2px) scale(0.995) rotate(-0.2deg); }
  100% { transform: translate(0, 0) scale(1) rotate(0deg); }
}

/* ── 4. Smart Bonsai Redesign ── */
.p4-c2-busy-bonsai {
  transform-origin: 1140px 485px;
  pointer-events: auto;
}

.bonsai-day-branches,
.bonsai-day-foliage,
.bonsai-night-branches,
.bonsai-night-foliage {
  transform-origin: 1140px 445px;
}

/* Day Mode: Hydroponic growth and AC wind sways (busy workday focus) */
body.p4.day.busy-mode:not(.relaxed-mode) .p4-c2-busy-bonsai .bonsai-day-led {
  animation: ledBreatheDay 1.6s infinite alternate;
}
body.p4.day.busy-mode:not(.relaxed-mode) .p4-c2-busy-bonsai .bonsai-day-level {
  animation: hydroponicLevel 5s ease-in-out infinite alternate;
}
body.p4.day.busy-mode:not(.relaxed-mode) .p4-c2-busy-bonsai:not(.active):not(.ending) .bonsai-day-branches {
  animation: bonsaiBranchesSwayDay 6s ease-in-out infinite;
}
body.p4.day.busy-mode:not(.relaxed-mode) .p4-c2-busy-bonsai:not(.active):not(.ending) .bonsai-day-foliage {
  animation: bonsaiFoliageSwayDay 6s ease-in-out infinite 0.4s;
}

@keyframes ledBreatheDay {
  0% { fill: #22c55e; filter: drop-shadow(0 0 1.2px #22c55e); }
  100% { fill: #3b82f6; filter: drop-shadow(0 0 2.5px #3b82f6); }
}
@keyframes hydroponicLevel {
  0% { transform: scaleY(0.65); transform-origin: bottom; }
  100% { transform: scaleY(1); transform-origin: bottom; }
}
@keyframes bonsaiBranchesSwayDay {
  0%, 100% { transform: rotate(0deg); }
  50% { transform: rotate(1.8deg); }
}
@keyframes bonsaiFoliageSwayDay {
  0%, 100% { transform: rotate(0deg); }
  50% { transform: rotate(-1.2deg) translateY(-0.4px); }
}

/* Night Mode: Bioluminescent fiber-optic pulses (surveillance overtime focus) */
body.p4.night.busy-mode:not(.relaxed-mode) .p4-c2-busy-bonsai:not(.active):not(.ending) {
  animation: nightBonsaiHum 8s ease-in-out infinite;
}
body.p4.night.busy-mode:not(.relaxed-mode) .p4-c2-busy-bonsai .bonsai-night-circuit {
  stroke-dasharray: 8, 4;
  animation: nightCircuitMove 3s linear infinite;
}
body.p4.night.busy-mode:not(.relaxed-mode) .p4-c2-busy-bonsai .bonsai-night-fiber {
  animation: nightFiberGlow 3.5s ease-in-out infinite alternate;
}
body.p4.night.busy-mode:not(.relaxed-mode) .p4-c2-busy-bonsai .bonsai-night-leaf-glow {
  animation: nightLeafGlowPulse 2s ease-in-out infinite alternate;
}

@keyframes nightBonsaiHum {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.015) translateY(-0.6px); }
}
@keyframes nightCircuitMove {
  from { stroke-dashoffset: 0; }
  to { stroke-dashoffset: 12; }
}
@keyframes nightFiberGlow {
  0% { stroke: #22d3ee; filter: drop-shadow(0 0 1px #22d3ee); }
  100% { stroke: #d946ef; filter: drop-shadow(0 0 3px #d946ef); }
}
@keyframes nightLeafGlowPulse {
  0% { fill-opacity: 0.45; stroke-opacity: 0.55; filter: drop-shadow(0 0 2px #d946ef); }
  100% { fill-opacity: 0.95; stroke-opacity: 1; filter: drop-shadow(0 0 7px #d946ef) drop-shadow(0 0 2px #22d3ee); }
}

/* Active Click Animations: Cherry blossom drifts vs Bioluminescent spore eruptions */
.p4-c2-busy-bonsai.active {
  animation: plantRustleDay 1.6s cubic-bezier(0.25, 0.8, 0.25, 1);
}
body.p4.night .p4-c2-busy-bonsai.active {
  animation: plantRustleNight 1.6s ease;
}

.p4-c2-busy-bonsai.active .bonsai-day-petal1 {
  animation: petalFall1 1.6s ease-in-out forwards;
}
.p4-c2-busy-bonsai.active .bonsai-day-petal2 {
  animation: petalFall2 1.6s ease-in-out forwards;
}
.p4-c2-busy-bonsai.active .bonsai-day-petal3 {
  animation: petalFall3 1.6s ease-in-out forwards;
}
.p4-c2-busy-bonsai.active .bonsai-spore {
  animation: sporeFloatUp 1.6s cubic-bezier(0.1, 0.8, 0.3, 1) forwards;
}

@keyframes plantRustleDay {
  0% { transform: rotate(0deg) scale(1); }
  15% { transform: rotate(-9deg) scale(1.04); }
  35% { transform: rotate(7deg) scale(0.975); }
  55% { transform: rotate(-5deg) scale(1.02); }
  75% { transform: rotate(2deg) scale(0.995); }
  100% { transform: rotate(0deg) scale(1); }
}
@keyframes petalFall1 {
  0% { opacity: 0; transform: translate(0, 0) rotate(0deg); }
  15% { opacity: 1; }
  100% { opacity: 0; transform: translate(-12px, 35px) rotate(140deg); }
}
@keyframes petalFall2 {
  0% { opacity: 0; transform: translate(0, 0) rotate(0deg); }
  15% { opacity: 1; }
  100% { opacity: 0; transform: translate(6px, 48px) rotate(-100deg); }
}
@keyframes petalFall3 {
  0% { opacity: 0; transform: translate(0, 0) rotate(0deg); }
  15% { opacity: 1; }
  100% { opacity: 0; transform: translate(16px, 42px) rotate(180deg); }
}

@keyframes plantRustleNight {
  0% { transform: scale(1) translate(0,0); }
  10%, 30%, 50%, 70% { transform: scale(1.055) translate(-1.2px, 0.6px); }
  20%, 40%, 60%, 80% { transform: scale(1.055) translate(1.2px, -0.6px); }
  90% { transform: scale(1.01) translate(0,0); }
  100% { transform: scale(1) translate(0,0); }
}
@keyframes sporeFloatUp {
  0% { transform: translate(0, 0) scale(0.3); opacity: 0; }
  15% { opacity: 1; }
  100% { transform: translate(var(--dx, 0px), var(--dy, -50px)) scale(1.6); opacity: 0; }
}

/* Settle / Settle ending animations */
.p4-c2-busy-bonsai.ending {
  animation: bonsaiSettleDay 1.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
body.p4.night .p4-c2-busy-bonsai.ending {
  animation: bonsaiSettleNight 1.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes bonsaiSettleDay {
  0% { transform: rotate(-6deg) scale(1.02); }
  30% { transform: rotate(3.5deg) scale(0.985); }
  55% { transform: rotate(-1.8deg) scale(1.008); }
  75% { transform: rotate(0.7deg) scale(0.997); }
  100% { transform: rotate(0deg) scale(1); }
}
@keyframes bonsaiSettleNight {
  0% { transform: translate(2.5px, -1.2px) scale(1.035); }
  25% { transform: translate(-1.8px, 0.9px) scale(0.98); }
  50% { transform: translate(0.9px, -0.5px) scale(1.01); }
  75% { transform: translate(-0.3px, 0.1px) scale(0.997); }
  100% { transform: translate(0, 0) scale(1); }
}

/* ── 5. Solar Panel / Rooftop Satellite ── */
.p4-c2-busy-solar {
  transform-origin: 980px 260px;
}
.p4-c2-busy-solar.active {
  animation: solarTiltDay 3s ease;
}
body.p4.night .p4-c2-busy-solar.active {
  animation: solarTiltNight 3s ease;
}
.p4-c2-busy-solar.active .solar-laser-beam {
  animation: solarLaserShoot 3s ease;
}
.p4-c2-busy-solar.active .solar-glow-lines {
  stroke: #22d3ee;
  filter: drop-shadow(0 0 6px #22d3ee);
  stroke-width: 1.5;
}
@keyframes solarTiltDay {
  0%, 100% { transform: skewX(0deg); }
  35%, 65% { transform: skewX(7deg); }
}
@keyframes solarTiltNight {
  0%, 100% { transform: rotate(0deg); }
  30%, 70% { transform: rotate(-5deg); }
}
@keyframes solarLaserShoot {
  0%, 100% { opacity: 0; stroke-width: 0.5; }
  25%, 75% { opacity: 1; stroke-width: 4.5; }
  50% { stroke-width: 2.5; }
}

/* ── 6. Flying Drone Redesign ── */
.p4-c2-busy-drone {
  transform-origin: 120px 140px;
  pointer-events: auto;
}

/* Local Propeller Centers for Spin rotation */
.drone-day-prop:nth-of-type(1) { transform-origin: 100px 125px; }
.drone-day-prop:nth-of-type(2) { transform-origin: 140px 125px; }
.drone-day-prop:nth-of-type(3) { transform-origin: 100px 155px; }
.drone-day-prop:nth-of-type(4) { transform-origin: 140px 155px; }

.drone-night-prop:nth-of-type(1) { transform-origin: 98px 123px; }
.drone-night-prop:nth-of-type(2) { transform-origin: 142px 123px; }
.drone-night-prop:nth-of-type(3) { transform-origin: 98px 157px; }
.drone-night-prop:nth-of-type(4) { transform-origin: 142px 157px; }

/* Continuous propeller blur animations in busy mode */
body.p4.busy-mode:not(.relaxed-mode) .p4-c2-busy-drone .drone-day-prop {
  animation: dronePropSpin 0.08s linear infinite;
}
body.p4.busy-mode:not(.relaxed-mode) .p4-c2-busy-drone .drone-night-prop {
  animation: dronePropSpin 0.08s linear infinite;
}

@keyframes dronePropSpin {
  0% { transform: scaleX(1); }
  50% { transform: scaleX(-0.15); }
  100% { transform: scaleX(1); }
}

/* Day Mode: Hover sway and package swing */
body.p4.day.busy-mode:not(.relaxed-mode) .p4-c2-busy-drone:not(.active):not(.ending) {
  animation: droneHoverDay 4s ease-in-out infinite;
}
body.p4.day.busy-mode:not(.relaxed-mode) .p4-c2-busy-drone:not(.active):not(.ending) .drone-day-parcel-group {
  animation: parcelSwayDay 4s ease-in-out infinite 0.2s;
}
body.p4.day.busy-mode:not(.relaxed-mode) .p4-c2-busy-drone .drone-day-camera-led {
  animation: cameraLedBlinkDay 1.2s steps(2, start) infinite;
}

@keyframes droneHoverDay {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  33% { transform: translate(4px, -6px) rotate(1.2deg); }
  66% { transform: translate(-4px, -3px) rotate(-1.2deg); }
}
@keyframes parcelSwayDay {
  0%, 100% { transform: rotate(0deg); }
  33% { transform: rotate(-4deg); }
  66% { transform: rotate(4deg); }
}
@keyframes cameraLedBlinkDay {
  0%, 100% { fill: #22c55e; }
  50% { fill: #15803d; }
}

/* Night Mode: Menacing hover and surveillance camera pulses */
body.p4.night.busy-mode:not(.relaxed-mode) .p4-c2-busy-drone:not(.active):not(.ending) {
  animation: droneHoverNight 5.5s ease-in-out infinite;
}
body.p4.night.busy-mode:not(.relaxed-mode) .p4-c2-busy-drone:not(.active):not(.ending) .drone-searchlight {
  opacity: 0.18;
  transform-origin: 120px 148px;
  animation: droneSlowSearchlight 5.5s ease-in-out infinite alternate;
}
body.p4.night.busy-mode:not(.relaxed-mode) .p4-c2-busy-drone .drone-night-camera-red {
  animation: cameraRedPulse 1.4s ease-in-out infinite alternate;
}

@keyframes droneHoverNight {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  50% { transform: translate(-5px, -9px) rotate(-1.8deg); }
}
@keyframes droneSlowSearchlight {
  0% { transform: rotate(-9deg); opacity: 0.12; }
  100% { transform: rotate(9deg); opacity: 0.24; }
}
@keyframes cameraRedPulse {
  0% { fill: #ef4444; filter: drop-shadow(0 0 1px #ef4444); }
  100% { fill: #f43f5e; filter: drop-shadow(0 0 3px #f43f5e); }
}

/* Active Click Animations: Rapid delivery flight dash vs High-alarm neon laser sweep */
.p4-c2-busy-drone.active {
  animation: droneActiveDay 3s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.p4-c2-busy-drone.active .drone-day-parcel-group {
  animation: parcelActiveDay 3s ease-in-out;
}

body.p4.night .p4-c2-busy-drone.active {
  animation: droneActiveNight 3s ease-in-out;
}
body.p4.night .p4-c2-busy-drone.active .drone-searchlight {
  transform-origin: 120px 148px;
  animation: droneSearchlightSweepActive 3s ease-in-out forwards;
}
body.p4.night .p4-c2-busy-drone.active .drone-night-camera-red {
  animation: cameraRedFlashActive 3s steps(2, start);
}

@keyframes droneActiveDay {
  0% { transform: translate(0, 0) rotate(0deg); }
  15% { transform: translate(32px, -18px) rotate(16deg); }
  40% { transform: translate(-26px, -8px) rotate(-11deg); }
  65% { transform: translate(18px, -12px) rotate(8deg); }
  85% { transform: translate(-8px, -4px) rotate(-3deg); }
  95% { transform: translate(2px, -1px) rotate(1deg); }
  100% { transform: translate(0, 0) rotate(0deg); }
}
@keyframes parcelActiveDay {
  0% { transform: rotate(0deg); }
  15% { transform: rotate(-28deg); }
  40% { transform: rotate(24deg); }
  65% { transform: rotate(-15deg); }
  85% { transform: rotate(7deg); }
  95% { transform: rotate(-2deg); }
  100% { transform: rotate(0deg); }
}

@keyframes droneActiveNight {
  0% { transform: scale(1) translate(0,0) rotate(0deg); }
  10%, 30%, 50%, 70%, 90% { transform: scale(1.08) translate(-2.2px, 1.2px) rotate(-3.5deg); }
  20%, 40%, 60%, 80% { transform: scale(1.08) translate(2.2px, -1.2px) rotate(3.5deg); }
  95% { transform: scale(1.02) translate(0.5px, -0.3px) rotate(1deg); }
  100% { transform: scale(1) translate(0,0) rotate(0deg); }
}
@keyframes droneSearchlightSweepActive {
  0% { opacity: 0.18; fill: url(#p4C2DroneScanGlow); transform: rotate(-9deg) scaleX(1); }
  10% { opacity: 0.95; fill: #ef4444; transform: rotate(18deg) scaleX(1.4); }
  30% { opacity: 0.95; fill: #f59e0b; transform: rotate(-18deg) scaleX(1.4); }
  50% { opacity: 0.95; fill: #ef4444; transform: rotate(15deg) scaleX(1.4); }
  70% { opacity: 0.95; fill: #f59e0b; transform: rotate(-12deg) scaleX(1.4); }
  85% { opacity: 0.8; fill: url(#p4C2DroneScanGlow); transform: rotate(5deg) scaleX(1.1); }
  100% { opacity: 0.18; fill: url(#p4C2DroneScanGlow); transform: rotate(0deg) scaleX(1); }
}
@keyframes cameraRedFlashActive {
  0%, 20%, 40%, 60%, 80%, 100% { fill: #ef4444; }
  10%, 30%, 50%, 70%, 90% { fill: #ffffff; }
}

/* Settle / Ending settle wobble recovery */
.p4-c2-busy-drone.ending {
  animation: droneSettleDay 1.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
body.p4.night .p4-c2-busy-drone.ending {
  animation: droneSettleNight 1.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes droneSettleDay {
  0% { transform: translate(0, 0) rotate(0deg); }
  30% { transform: translate(-4px, 2px) rotate(-2.5deg); }
  60% { transform: translate(2px, -1px) rotate(1.2deg); }
  85% { transform: translate(-0.8px, 0.4px) rotate(-0.5deg); }
  100% { transform: translate(0, 0) rotate(0deg); }
}
@keyframes droneSettleNight {
  0% { transform: translate(0, 0) rotate(0deg); }
  30% { transform: translate(3px, -2px) rotate(1.8deg); }
  60% { transform: translate(-1.5px, 1px) rotate(-0.9deg); }
  85% { transform: translate(0.5px, -0.3px) rotate(0.3deg); }
  100% { transform: translate(0, 0) rotate(0deg); }
}

/* ── 7. Digital Thermostat Redesign ── */
.p4-c2-busy-thermostat {
  transform-origin: 37px 217px;
  pointer-events: auto;
}

/* Day Mode: Eco leaf breathing and LED indicators */
body.p4.day.busy-mode:not(.relaxed-mode) .p4-c2-busy-thermostat .thermo-day-leaf {
  animation: leafBreatheDay 3.5s ease-in-out infinite;
  transform-origin: 24px 202px;
}
body.p4.day.busy-mode:not(.relaxed-mode) .p4-c2-busy-thermostat .thermo-day-led {
  animation: ledBlinkGreen 2.2s infinite alternate;
}

@keyframes leafBreatheDay {
  0%, 100% { opacity: 0.6; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.2); }
}
@keyframes ledBlinkGreen {
  0% { opacity: 0.25; fill: #15803d; }
  100% { opacity: 1; fill: #22c55e; filter: drop-shadow(0 0 2px #22c55e); }
}

/* Night Mode: Radial dial rotation and snowflake breathing */
body.p4.night.busy-mode:not(.relaxed-mode) .p4-c2-busy-thermostat .thermo-night-ticks {
  animation: dialRotateNight 15s linear infinite;
  transform-origin: 37px 217px;
}
body.p4.night.busy-mode:not(.relaxed-mode) .p4-c2-busy-thermostat .thermo-night-snowflake {
  animation: snowflakeBreatheNight 2.8s ease-in-out infinite alternate;
  transform-origin: 37px 205px;
}
body.p4.night.busy-mode:not(.relaxed-mode) .p4-c2-busy-thermostat .thermo-night-led {
  animation: ledBlinkRed 1.4s steps(2, start) infinite;
}

@keyframes dialRotateNight {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
@keyframes snowflakeBreatheNight {
  0% { opacity: 0.35; filter: drop-shadow(0 0 1px #22d3ee); }
  100% { opacity: 1; filter: drop-shadow(0 0 3px #22d3ee); }
}
@keyframes ledBlinkRed {
  0%, 100% { fill: #ef4444; filter: drop-shadow(0 0 1px #ef4444); }
  50% { fill: #7f1d1d; filter: none; }
}

/* Active Click Animations: Day Eco Pulse vs Night Server Fanatical Cooling Speed */
.p4-c2-busy-thermostat.active {
  animation: thermoActiveDay 1.6s ease-in-out;
}
.p4-c2-busy-thermostat.active .thermo-day-btn-up {
  animation: buttonFlashDay 0.4s ease 3;
}
.p4-c2-busy-thermostat.active .thermo-day-btn-down {
  animation: buttonFlashDay 0.4s ease 0.2s 3;
}
.p4-c2-busy-thermostat.active .thermo-day-leaf {
  animation: leafActiveDay 1.6s ease;
}

body.p4.night .p4-c2-busy-thermostat.active {
  animation: thermoActiveNight 1.6s ease;
}
body.p4.night .p4-c2-busy-thermostat.active .thermo-night-ticks {
  animation: ticksSpinActive 1.6s cubic-bezier(0.19, 1, 0.22, 1) forwards;
}
body.p4.night .p4-c2-busy-thermostat.active .thermo-night-snowflake {
  animation: snowflakeActiveNight 1.6s ease forwards;
}
body.p4.night .p4-c2-busy-thermostat.active .thermo-night-sub {
  animation: textFlashWarning 0.4s infinite;
}

@keyframes thermoActiveDay {
  0% { transform: scale(1); filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1)); }
  30% { transform: scale(1.12); filter: drop-shadow(0 8px 16px rgba(0,0,0,0.15)); }
  70% { transform: scale(1.12); }
  100% { transform: scale(1); }
}
@keyframes buttonFlashDay {
  0%, 100% { fill: #3b82f6; }
  50% { fill: #60a5fa; }
}
@keyframes leafActiveDay {
  0%, 100% { transform: scale(1); fill: #22c55e; }
  30%, 75% { transform: scale(1.5); fill: #4ade80; }
}

@keyframes thermoActiveNight {
  0% { transform: scale(1) rotate(0deg); }
  20% { transform: scale(1.12) rotate(16deg); }
  40% { transform: scale(1.12) rotate(-16deg); }
  60% { transform: scale(1.12) rotate(11deg); }
  80% { transform: scale(1.12) rotate(-6deg); }
  100% { transform: scale(1) rotate(0deg); }
}
@keyframes ticksSpinActive {
  0% { transform: rotate(0deg); stroke: #d946ef; }
  50% { transform: rotate(720deg); stroke: #22d3ee; }
  100% { transform: rotate(1080deg); stroke: #d946ef; }
}
@keyframes snowflakeActiveNight {
  0%, 100% { transform: scale(1) rotate(0deg); stroke: #22d3ee; }
  30%, 75% { transform: scale(1.8) rotate(180deg); stroke: #ef4444; }
}
@keyframes textFlashWarning {
  0%, 100% { fill: #d946ef; opacity: 1; }
  50% { fill: #ef4444; opacity: 0.3; }
}

/* Settle / Ending settle wobble recovery */
.p4-c2-busy-thermostat.ending {
  animation: thermoSettleDay 1.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
body.p4.night .p4-c2-busy-thermostat.ending {
  animation: thermoSettleNight 1.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes thermoSettleDay {
  0% { transform: scale(1.15); }
  40% { transform: scale(0.92); }
  70% { transform: scale(1.04); }
  90% { transform: scale(0.98); }
  100% { transform: scale(1); }
}
@keyframes thermoSettleNight {
  0% { transform: scale(1.15) rotate(-8deg); }
  40% { transform: scale(0.92) rotate(4deg); }
  70% { transform: scale(1.03) rotate(-2deg); }
  90% { transform: scale(0.99) rotate(0.5deg); }
  100% { transform: scale(1) rotate(0deg); }
}

/* ── 8. Window Blind Controller Redesign ── */
.p4-c2-busy-blinds {
  transform-origin: 32px 266px;
  pointer-events: auto;
}

/* ── Day Continuous: Motor hum vibration + slat breathing + LED blink ── */
body.p4.day.busy-mode:not(.relaxed-mode) .p4-c2-busy-blinds .blinds-day-motor {
  animation: blindsMotorHumDay 2s ease-in-out infinite;
  transform-origin: 22.5px 249.5px;
}
body.p4.day.busy-mode:not(.relaxed-mode) .p4-c2-busy-blinds .blinds-day-slat1 {
  animation: blindsSlatBreatheDay 4s ease-in-out infinite;
  transform-origin: 31.5px 257px;
}
body.p4.day.busy-mode:not(.relaxed-mode) .p4-c2-busy-blinds .blinds-day-slat2 {
  animation: blindsSlatBreatheDay 4s ease-in-out 0.3s infinite;
  transform-origin: 31.5px 264px;
}
body.p4.day.busy-mode:not(.relaxed-mode) .p4-c2-busy-blinds .blinds-day-slat3 {
  animation: blindsSlatBreatheDay 4s ease-in-out 0.6s infinite;
  transform-origin: 31.5px 271px;
}
body.p4.day.busy-mode:not(.relaxed-mode) .p4-c2-busy-blinds .blinds-day-slat4 {
  animation: blindsSlatBreatheDay 4s ease-in-out 0.9s infinite;
  transform-origin: 31.5px 278px;
}
body.p4.day.busy-mode:not(.relaxed-mode) .p4-c2-busy-blinds .blinds-day-led {
  animation: blindsLedBlinkGreen 2.5s infinite alternate;
}

@keyframes blindsMotorHumDay {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(0.3px); }
  50% { transform: translateX(-0.3px); }
  75% { transform: translateX(0.2px); }
}
@keyframes blindsSlatBreatheDay {
  0%, 100% { transform: scaleY(1); opacity: 0.85; }
  50% { transform: scaleY(1.15); opacity: 1; }
}
@keyframes blindsLedBlinkGreen {
  0% { opacity: 0.3; fill: #15803d; }
  100% { opacity: 1; fill: #22c55e; filter: drop-shadow(0 0 2px #22c55e); }
}

/* ── Night Continuous: Core rotation + sequential neon slat pulses + LED warning ── */
body.p4.night.busy-mode:not(.relaxed-mode) .p4-c2-busy-blinds .blinds-night-core {
  animation: blindsCoreRotateNight 6s linear infinite;
  transform-origin: 32px 249.5px;
}
body.p4.night.busy-mode:not(.relaxed-mode) .p4-c2-busy-blinds .blinds-night-core-dot {
  animation: blindsCoreDotPulse 1.5s ease-in-out infinite alternate;
}
body.p4.night.busy-mode:not(.relaxed-mode) .p4-c2-busy-blinds .blinds-night-slat1 {
  animation: blindsSlatNeonPulse 3s ease-in-out infinite;
}
body.p4.night.busy-mode:not(.relaxed-mode) .p4-c2-busy-blinds .blinds-night-slat2 {
  animation: blindsSlatNeonPulse 3s ease-in-out 0.4s infinite;
}
body.p4.night.busy-mode:not(.relaxed-mode) .p4-c2-busy-blinds .blinds-night-slat3 {
  animation: blindsSlatNeonPulse 3s ease-in-out 0.8s infinite;
}
body.p4.night.busy-mode:not(.relaxed-mode) .p4-c2-busy-blinds .blinds-night-slat4 {
  animation: blindsSlatNeonPulse 3s ease-in-out 1.2s infinite;
}
body.p4.night.busy-mode:not(.relaxed-mode) .p4-c2-busy-blinds .blinds-night-led {
  animation: blindsLedBlinkRed 1.2s steps(2, start) infinite;
}

@keyframes blindsCoreRotateNight {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
@keyframes blindsCoreDotPulse {
  0% { opacity: 0.4; filter: none; }
  100% { opacity: 1; filter: drop-shadow(0 0 3px #22d3ee); }
}
@keyframes blindsSlatNeonPulse {
  0%, 100% { stroke: #0ea5e9; fill: #0c1220; filter: none; }
  50% { stroke: #22d3ee; fill: #132040; filter: drop-shadow(0 0 2px #0ea5e9); }
}
@keyframes blindsLedBlinkRed {
  0%, 100% { fill: #ef4444; filter: drop-shadow(0 0 1px #ef4444); }
  50% { fill: #7f1d1d; filter: none; }
}

/* ── Day Active: Rapid slat-roll cascade + motor buzz ── */
.p4-c2-busy-blinds.active {
  animation: blindsActiveDay 1.6s ease-in-out;
}
.p4-c2-busy-blinds.active .blinds-day-motor {
  animation: blindsMotorBuzzActive 0.15s linear 8 !important;
  transform-origin: 22.5px 249.5px;
}
.p4-c2-busy-blinds.active .blinds-day-slat1 {
  animation: blindsSlatRollDay 1.6s ease 0s !important;
  transform-origin: 19px 257px;
}
.p4-c2-busy-blinds.active .blinds-day-slat2 {
  animation: blindsSlatRollDay 1.6s ease 0.1s !important;
  transform-origin: 19px 264px;
}
.p4-c2-busy-blinds.active .blinds-day-slat3 {
  animation: blindsSlatRollDay 1.6s ease 0.2s !important;
  transform-origin: 19px 271px;
}
.p4-c2-busy-blinds.active .blinds-day-slat4 {
  animation: blindsSlatRollDay 1.6s ease 0.3s !important;
  transform-origin: 19px 278px;
}
.p4-c2-busy-blinds.active .blinds-day-led {
  animation: blindsLedFlashActive 0.2s ease 6 !important;
}

@keyframes blindsActiveDay {
  0% { transform: scale(1); }
  15% { transform: scale(1.08); filter: drop-shadow(0 2px 6px rgba(0,0,0,0.12)); }
  85% { transform: scale(1.08); }
  100% { transform: scale(1); filter: none; }
}
@keyframes blindsMotorBuzzActive {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(0.8px); }
}
@keyframes blindsSlatRollDay {
  0% { transform: rotateX(0deg); }
  20% { transform: rotateX(45deg); }
  40% { transform: rotateX(-30deg); }
  60% { transform: rotateX(20deg); }
  80% { transform: rotateX(-10deg); }
  100% { transform: rotateX(0deg); }
}
@keyframes blindsLedFlashActive {
  0%, 100% { fill: #22c55e; }
  50% { fill: #86efac; filter: drop-shadow(0 0 3px #22c55e); }
}

/* ── Night Active: Cyber shutter lockdown sequence ── */
body.p4.night .p4-c2-busy-blinds.active {
  animation: blindsActiveNight 1.6s ease;
}
body.p4.night .p4-c2-busy-blinds.active .blinds-night-core {
  animation: blindsCoreSpinActive 1.6s cubic-bezier(0.19, 1, 0.22, 1) !important;
  transform-origin: 32px 249.5px;
}
body.p4.night .p4-c2-busy-blinds.active .blinds-night-slat1 {
  animation: blindsSlatLockdownNight 1.6s ease 0s !important;
}
body.p4.night .p4-c2-busy-blinds.active .blinds-night-slat2 {
  animation: blindsSlatLockdownNight 1.6s ease 0.12s !important;
}
body.p4.night .p4-c2-busy-blinds.active .blinds-night-slat3 {
  animation: blindsSlatLockdownNight 1.6s ease 0.24s !important;
}
body.p4.night .p4-c2-busy-blinds.active .blinds-night-slat4 {
  animation: blindsSlatLockdownNight 1.6s ease 0.36s !important;
}
body.p4.night .p4-c2-busy-blinds.active .blinds-night-led {
  animation: blindsNightLedFlashActive 0.15s linear 8 !important;
}

@keyframes blindsActiveNight {
  0% { transform: scale(1) rotate(0deg); }
  15% { transform: scale(1.1) rotate(6deg); }
  35% { transform: scale(1.1) rotate(-6deg); }
  55% { transform: scale(1.1) rotate(4deg); }
  75% { transform: scale(1.1) rotate(-2deg); }
  100% { transform: scale(1) rotate(0deg); }
}
@keyframes blindsCoreSpinActive {
  0% { transform: rotate(0deg); stroke: #22d3ee; }
  50% { transform: rotate(540deg); stroke: #d946ef; }
  100% { transform: rotate(1080deg); stroke: #22d3ee; }
}
@keyframes blindsSlatLockdownNight {
  0% { fill: #0c1220; stroke: #0ea5e9; transform: scaleX(1); }
  25% { fill: #1e3a5f; stroke: #22d3ee; transform: scaleX(0.4); filter: drop-shadow(0 0 4px #22d3ee); }
  50% { fill: #1e3a5f; stroke: #d946ef; transform: scaleX(1.05); filter: drop-shadow(0 0 4px #d946ef); }
  75% { fill: #0c1220; stroke: #22d3ee; transform: scaleX(0.6); }
  100% { fill: #0c1220; stroke: #0ea5e9; transform: scaleX(1); filter: none; }
}
@keyframes blindsNightLedFlashActive {
  0%, 100% { fill: #ef4444; }
  50% { fill: #fbbf24; filter: drop-shadow(0 0 3px #fbbf24); }
}

/* ── Ending Settle Animations ── */
.p4-c2-busy-blinds.ending {
  animation: blindsSettleDay 1.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
body.p4.night .p4-c2-busy-blinds.ending {
  animation: blindsSettleNight 1.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes blindsSettleDay {
  0% { transform: scale(1.1); }
  35% { transform: scale(0.93); }
  60% { transform: scale(1.04); }
  80% { transform: scale(0.98); }
  100% { transform: scale(1); }
}
@keyframes blindsSettleNight {
  0% { transform: scale(1.12) rotate(-5deg); }
  35% { transform: scale(0.92) rotate(3deg); }
  60% { transform: scale(1.03) rotate(-1.5deg); }
  80% { transform: scale(0.99) rotate(0.5deg); }
  100% { transform: scale(1) rotate(0deg); }
}

/* ── 9. Flying Helicopter ── */
.p4-c2-busy-helicopter {
  transform-origin: 870px 100px;
  transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* Day Mode Continuous Flight */
body.p4.day.busy-mode:not(.relaxed-mode) .p4-c2-busy-helicopter {
  animation: heliHoverDay 6s ease-in-out infinite;
}
body.p4.day.busy-mode:not(.relaxed-mode) .p4-c2-rotor-blades-group {
  animation: rotorSpinDay 0.12s linear infinite;
}
body.p4.day.busy-mode:not(.relaxed-mode) .p4-c2-rotor-tail {
  animation: rotorSpinDay 0.08s linear infinite;
}
body.p4.day.busy-mode:not(.relaxed-mode) .p4-c2-heli-beacon-red {
  animation: heliBeaconFlashRed 1s steps(2, start) infinite;
}
body.p4.day.busy-mode:not(.relaxed-mode) .p4-c2-heli-beacon-green {
  animation: heliBeaconFlashGreen 1s steps(2, start) infinite;
}

/* Night Mode Continuous Patrol */
body.p4.night.busy-mode:not(.relaxed-mode) .p4-c2-busy-helicopter {
  animation: heliPatrolNight 12s ease-in-out infinite;
}
body.p4.night.busy-mode:not(.relaxed-mode) .p4-c2-heli-searchlight {
  animation: searchlightSweepNight 6s ease-in-out infinite;
}
body.p4.night.busy-mode:not(.relaxed-mode) .p4-c2-vtol-pod {
  animation: vtolPodHover 4s ease-in-out infinite;
}
body.p4.night.busy-mode:not(.relaxed-mode) .p4-c2-heli-eye {
  animation: scannerEyeBlink 1.5s infinite alternate;
}
body.p4.night.busy-mode:not(.relaxed-mode) .p4-c2-heli-strobe-magenta {
  animation: heliBeaconFlashRed 0.8s steps(2, start) infinite;
}
body.p4.night.busy-mode:not(.relaxed-mode) .p4-c2-heli-strobe-cyan {
  animation: heliBeaconFlashGreen 0.6s steps(2, start) infinite;
}

/* Active Hover overrides for click state */
.p4-c2-busy-helicopter.active {
  animation: heliZipDay 3s cubic-bezier(0.25, 1, 0.5, 1) !important;
}
body.p4.night .p4-c2-busy-helicopter.active {
  animation: heliZipNight 3s cubic-bezier(0.25, 1, 0.5, 1) !important;
}

/* Active states for Day helicopter blades */
.p4-c2-busy-helicopter.active .p4-c2-rotor-blur {
  opacity: 0.75;
}
.p4-c2-busy-helicopter.active .p4-c2-rotor-blades-group {
  animation: rotorSpinDay 0.04s linear infinite !important;
}

/* Active states for Night VTOL pods */
.p4-c2-busy-helicopter.active .p4-c2-vtol-pod {
  transform: rotate(-35deg) !important;
  transition: transform 0.4s ease;
  animation: none !important;
}
.p4-c2-busy-helicopter.active .p4-c2-heli-flame {
  opacity: 1 !important;
  animation: thrustFlamePulse 0.1s infinite alternate;
}
.p4-c2-busy-helicopter.active .p4-c2-heli-searchlight {
  opacity: 0 !important;
  animation: none !important;
}
.p4-c2-busy-helicopter.active .p4-c2-heli-searchlight-alarm {
  opacity: 1 !important;
  animation: searchlightAlarmSweep 0.5s ease-in-out infinite !important;
}

/* Ending Settle states */
.p4-c2-busy-helicopter.ending {
  animation: heliSettleDay 1.2s ease-out !important;
}
body.p4.night .p4-c2-busy-helicopter.ending {
  animation: heliSettleNight 1.2s ease-out !important;
}

/* Keyframes */
@keyframes heliHoverDay {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-7px) rotate(1.5deg); }
}
@keyframes rotorSpinDay {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
@keyframes heliBeaconFlashRed {
  0%, 100% { opacity: 0.2; }
  50% { opacity: 1; }
}
@keyframes heliBeaconFlashGreen {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.2; }
}
@keyframes heliPatrolNight {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  25% { transform: translate(25px, -5px) rotate(2deg); }
  75% { transform: translate(-18px, 6px) rotate(-1.5deg); }
}
@keyframes searchlightSweepNight {
  0%, 100% { transform: rotate(12deg); }
  50% { transform: rotate(-12deg); }
}
@keyframes searchlightAlarmSweep {
  0%, 100% { transform: rotate(25deg); opacity: 0.4; }
  50% { transform: rotate(-25deg); opacity: 0.95; }
}
@keyframes vtolPodHover {
  0%, 100% { transform: rotate(0deg); }
  50% { transform: rotate(6deg); }
}
@keyframes scannerEyeBlink {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 1; }
}
@keyframes thrustFlamePulse {
  0% { transform: scaleY(0.85) scaleX(0.9); opacity: 0.6; }
  100% { transform: scaleY(1.15) scaleX(1.05); opacity: 1; }
}
@keyframes heliZipDay {
  0% { transform: translate(0, 0) rotate(0deg) scale(1); }
  8% { transform: translate(-12px, 3px) rotate(6deg) scale(1.03); }
  35% { transform: translate(160px, -22px) rotate(-16deg) scale(0.45); opacity: 0.7; }
  40% { transform: translate(-220px, -22px) rotate(-10deg) scale(0.3); opacity: 0; }
  50% { transform: translate(-160px, 12px) rotate(10deg) scale(0.65); opacity: 0.85; }
  80% { transform: translate(12px, -3px) rotate(-5deg) scale(1.02); opacity: 1; }
  100% { transform: translate(0, 0) rotate(0deg) scale(1); }
}
@keyframes heliZipNight {
  0% { transform: translate(0, 0) rotate(0deg) scale(1); }
  10% { transform: translate(-18px, -4px) rotate(18deg) scale(1.08); }
  35% { transform: translate(220px, -30px) rotate(-24deg) scale(0.5); }
  45% { transform: translate(220px, -30px) rotate(-24deg) scale(0.5); }
  72% { transform: translate(-100px, 15px) rotate(15deg) scale(1.12); }
  90% { transform: translate(8px, -4px) rotate(-6deg) scale(0.99); }
  100% { transform: translate(0, 0) rotate(0deg) scale(1); }
}
@keyframes heliSettleDay {
  0% { transform: translate(0, 0) rotate(0deg) scale(1); }
  25% { transform: translateY(5px) rotate(2.5deg); }
  50% { transform: translateY(-3px) rotate(-1.5deg); }
  70% { transform: translateY(1.8px) rotate(0.8deg); }
  85% { transform: translateY(-0.8px) rotate(-0.3deg); }
  100% { transform: translateY(0) rotate(0deg); }
}
@keyframes heliSettleNight {
  0% { transform: translate(0, 0) rotate(0deg) scale(1); }
  25% { transform: translateY(6px) rotate(-4deg); }
  50% { transform: translateY(-4px) rotate(2deg); }
  70% { transform: translateY(2px) rotate(-1deg); }
  85% { transform: translateY(-0.8px) rotate(0.5deg); }
  100% { transform: translateY(0) rotate(0deg); }
}

/* ── 10. Digital Clock Widget Redesign ── */
.p4-c2-busy-clock-widget {
  transform-origin: 945px 162px;
  pointer-events: auto;
}

/* ──── Continuous Day Idle Animations ──── */
/* Workload Hum: a very subtle office tension vibration */
body.p4.day.busy-mode:not(.relaxed-mode) .p4-c2-busy-clock-widget:not(.active):not(.ending) {
  animation: dayClockHum 6s ease-in-out infinite;
}
body.p4.day.busy-mode:not(.relaxed-mode) .p4-c2-busy-clock-widget .clock-day-colon {
  animation: dayColonBlink 1s step-end infinite;
}
body.p4.day.busy-mode:not(.relaxed-mode) .p4-c2-busy-clock-widget .clock-day-led {
  animation: dayLedPulse 2s ease-in-out infinite alternate;
}
body.p4.day.busy-mode:not(.relaxed-mode) .p4-c2-busy-clock-widget .clock-day-progress-bar {
  animation: dayProgressFlow 8s ease-in-out infinite;
}

@keyframes dayClockHum {
  0%, 100% { transform: translate(0, 0); }
  25% { transform: translate(0.4px, -0.2px); }
  50% { transform: translate(-0.2px, 0.4px); }
  75% { transform: translate(-0.4px, -0.2px); }
}
@keyframes dayColonBlink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.15; }
}
@keyframes dayLedPulse {
  0% { opacity: 0.3; fill: #166534; filter: none; }
  100% { opacity: 1; fill: #22c55e; filter: drop-shadow(0 0 2px #22c55e); }
}
@keyframes dayProgressFlow {
  0% { width: 10px; fill: #3b82f6; }
  50% { width: 62px; fill: #10b981; }
  100% { width: 10px; fill: #3b82f6; }
}

/* ──── Continuous Night Idle Animations ──── */
/* Cyber sync and backup pulsing glow */
body.p4.night.busy-mode:not(.relaxed-mode) .p4-c2-busy-clock-widget:not(.active):not(.ending) {
  animation: nightClockGlowPulse 4s ease-in-out infinite;
}
body.p4.night.busy-mode:not(.relaxed-mode) .p4-c2-busy-clock-widget .cyber-clock-text {
  animation: cyberTextGlow 2.5s ease-in-out infinite alternate;
}
body.p4.night.busy-mode:not(.relaxed-mode) .p4-c2-busy-clock-widget .clock-night-alert-led {
  animation: nightAlertLedPulse 0.8s steps(2, start) infinite;
}
body.p4.night.busy-mode:not(.relaxed-mode) .p4-c2-busy-clock-widget .clock-night-srv-bar {
  transform-origin: 50% 50%;
  animation: serverLedsFlicker 1.8s ease-in-out infinite alternate;
}
body.p4.night.busy-mode:not(.relaxed-mode) .p4-c2-busy-clock-widget .srv1 { animation-delay: 0.1s; }
body.p4.night.busy-mode:not(.relaxed-mode) .p4-c2-busy-clock-widget .srv2 { animation-delay: 0.4s; }
body.p4.night.busy-mode:not(.relaxed-mode) .p4-c2-busy-clock-widget .srv3 { animation-delay: 0.2s; }
body.p4.night.busy-mode:not(.relaxed-mode) .p4-c2-busy-clock-widget .srv4 { animation-delay: 0.7s; }
body.p4.night.busy-mode:not(.relaxed-mode) .p4-c2-busy-clock-widget .srv5 { animation-delay: 0.3s; }
body.p4.night.busy-mode:not(.relaxed-mode) .p4-c2-busy-clock-widget .srv6 { animation-delay: 0.9s; }
body.p4.night.busy-mode:not(.relaxed-mode) .p4-c2-busy-clock-widget .srv7 { animation-delay: 0.5s; }

@keyframes nightClockGlowPulse {
  0%, 100% { filter: drop-shadow(0 0 1px rgba(14, 165, 233, 0.1)); }
  50% { filter: drop-shadow(0 0 4px rgba(14, 165, 233, 0.45)); }
}
@keyframes cyberTextGlow {
  0% { fill: #22d3ee; filter: drop-shadow(0 0 1px rgba(34, 211, 238, 0.3)); }
  100% { fill: #a5f3fc; filter: drop-shadow(0 0 4px rgba(34, 211, 238, 0.95)); }
}
@keyframes nightAlertLedPulse {
  0%, 100% { fill: #ef4444; filter: drop-shadow(0 0 2px #ef4444); }
  50% { fill: #7f1d1d; filter: none; }
}
@keyframes serverLedsFlicker {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 1; }
}

/* ──── Active Click Interaction State ──── */
/* Day Mode Active Click (Scale, rotate & vibrate with checklist overload) */
body.p4.day .p4-c2-busy-clock-widget.active {
  animation: clockActiveDayRedesign 3s ease-in-out;
}
body.p4.day .p4-c2-busy-clock-widget.active .clock-day-progress-bar {
  animation: clockActiveProgressBarDay 3s cubic-bezier(0.19, 1, 0.22, 1) forwards;
}
body.p4.day .p4-c2-busy-clock-widget.active .clock-day-agenda-text {
  animation: textGlitchFlash 0.3s infinite;
}

@keyframes clockActiveDayRedesign {
  0% { transform: scale(1) rotate(0deg); }
  10% { transform: scale(1.1) rotate(3deg) translate(-2px, -1px); filter: drop-shadow(0 4px 10px rgba(0,0,0,0.15)); }
  20% { transform: scale(1.1) rotate(-3deg) translate(2px, 1px); }
  30% { transform: scale(1.1) rotate(2deg) translate(-1px, 2px); }
  40% { transform: scale(1.1) rotate(-2deg) translate(1px, -2px); }
  50% { transform: scale(1.1) rotate(1.5deg) translate(-2px, 1px); }
  60% { transform: scale(1.1) rotate(-1.5deg) translate(2px, -1px); }
  70% { transform: scale(1.1) rotate(1deg) translate(-1px, 1px); }
  80% { transform: scale(1.1) rotate(-1deg) translate(1px, -1px); }
  90% { transform: scale(1.05) rotate(0.5deg) translate(0px, 0px); }
  100% { transform: scale(1) rotate(0deg); }
}
@keyframes clockActiveProgressBarDay {
  0% { width: 10px; fill: #ef4444; }
  30% { width: 45px; fill: #f59e0b; }
  70%, 100% { width: 70px; fill: #22c55e; }
}
@keyframes textGlitchFlash {
  0%, 100% { fill: #ef4444; opacity: 1; }
  50% { fill: #f97316; opacity: 0.4; }
}

/* Night Mode Active Click (Alarm, code glitches, grid overrides & lasers) */
body.p4.night .p4-c2-busy-clock-widget.active {
  animation: clockActiveNightRedesign 3s ease-in-out;
}
body.p4.night .p4-c2-busy-clock-widget.active .clock-night-scanline {
  opacity: 1;
  animation: cyberScanlineSweep 1s linear infinite;
}
body.p4.night .p4-c2-busy-clock-widget.active .cyber-status-text {
  fill: #ef4444 !important;
  animation: cyberStatusAlert 0.4s steps(2, start) infinite;
}
body.p4.night .p4-c2-busy-clock-widget.active .cyber-clock-text {
  animation: timeTextGlitch 0.5s infinite;
}

@keyframes clockActiveNightRedesign {
  0% { transform: scale(1); filter: drop-shadow(0 0 2px #0ea5e9); }
  5% { transform: scale(1.12) skewX(-4deg); filter: drop-shadow(0 0 12px #ef4444); }
  10% { transform: scale(1.12) skewX(4deg); }
  15% { transform: scale(1.12) skewX(-2deg); }
  20% { transform: scale(1.12) skewX(2deg); }
  25%, 75% { transform: scale(1.12) skewX(0deg); filter: drop-shadow(0 0 15px #d946ef); }
  80% { transform: scale(1.08) skewY(-2deg); }
  85% { transform: scale(1.08) skewY(2deg); }
  90% { transform: scale(1.04) skewX(-1deg); }
  100% { transform: scale(1); filter: drop-shadow(0 0 2px #0ea5e9); }
}
@keyframes cyberScanlineSweep {
  0% { y1: 140; y2: 140; opacity: 0.2; }
  50% { y1: 185; y2: 185; opacity: 0.9; }
  100% { y1: 140; y2: 140; opacity: 0.2; }
}
@keyframes cyberStatusAlert {
  0%, 100% { fill: #ef4444; opacity: 1; }
  50% { fill: #ffffff; opacity: 0.3; }
}
@keyframes timeTextGlitch {
  0%, 100% { transform: translate(0, 0); fill: #22d3ee; }
  20% { transform: translate(-1px, 0.5px); fill: #ef4444; }
  40% { transform: translate(1px, -0.5px); fill: #d946ef; }
  60% { transform: translate(-0.5px, -1px); fill: #ffffff; }
  80% { transform: translate(0.5px, 1px); fill: #00ffff; }
}

/* ──── Settle / Ending Wobble Recovery ──── */
/* Day Settle: Springy rubber-band bounce */
.p4-c2-busy-clock-widget.ending {
  animation: clockSettleDayRedesign 1.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
/* Night Settle: Shaking screen sync recovery decay */
body.p4.night .p4-c2-busy-clock-widget.ending {
  animation: clockSettleNightRedesign 1.2s cubic-bezier(0.25, 0.8, 0.25, 1);
}

@keyframes clockSettleDayRedesign {
  0% { transform: scale(1.15); }
  35% { transform: scale(0.92); }
  60% { transform: scale(1.04); }
  80% { transform: scale(0.98); }
  100% { transform: scale(1); }
}
@keyframes clockSettleNightRedesign {
  0% { transform: translate(-4px, 2px) skewX(3deg); }
  20% { transform: translate(3px, -1.5px) skewX(-2.2deg); }
  40% { transform: translate(-1.8px, 0.9px) skewX(1.4deg); }
  60% { transform: translate(1px, -0.5px) skewX(-0.8deg); }
  80% { transform: translate(-0.4px, 0.2px) skewX(0.4deg); }
  100% { transform: translate(0, 0) skewX(0deg); }
}

/* ──── Relaxed Mode Overrides ──── */
body.relaxed-mode .clock-day-colon,
body.relaxed-mode .clock-day-led,
body.relaxed-mode .clock-day-progress-bar,
body.relaxed-mode .cyber-clock-text,
body.relaxed-mode .clock-night-alert-led,
body.relaxed-mode .clock-night-srv-bar,
body.relaxed-mode .clock-night-scanline,
body.relaxed-mode .clock-day-agenda-text,
body.relaxed-mode .cyber-status-text {
  animation: none !important;
  transform: none !important;
  transition: none !important;
}
body.relaxed-mode .clock-night-scanline {
  opacity: 0 !important;
}


/* ── 11. Weather Sensor Redesign ── */
.p4-c2-busy-sensor {
  transform-origin: 1160px 240px;
  pointer-events: auto;
}

/* ──── Continuous Day Idle Animations ──── */
/* Turbine anemometer spin + day bar levels wave + led pulse */
body.p4.day.busy-mode:not(.relaxed-mode) .p4-c2-busy-sensor:not(.active):not(.ending) .sensor-day-turbine {
  animation: daySensorCupSpin 4s linear infinite;
}
body.p4.day.busy-mode:not(.relaxed-mode) .p4-c2-busy-sensor:not(.active):not(.ending) .sensor-day-bar.bar1 {
  animation: daySensorLevelsWave 2.8s ease-in-out infinite alternate;
}
body.p4.day.busy-mode:not(.relaxed-mode) .p4-c2-busy-sensor:not(.active):not(.ending) .sensor-day-bar.bar2 {
  animation: daySensorLevelsWave 2.2s ease-in-out infinite alternate 0.3s;
}
body.p4.day.busy-mode:not(.relaxed-mode) .p4-c2-busy-sensor:not(.active):not(.ending) .sensor-day-bar.bar3 {
  animation: daySensorLevelsWave 3.2s ease-in-out infinite alternate 0.6s;
}
body.p4.day.busy-mode:not(.relaxed-mode) .p4-c2-busy-sensor .sensor-day-led {
  animation: dayLedPulse 2s ease-in-out infinite alternate;
}

@keyframes daySensorCupSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
@keyframes daySensorLevelsWave {
  0% { height: 4px; y: 245; }
  100% { height: 14px; y: 235; }
}

/* ──── Continuous Night Idle Animations ──── */
/* Emitter node glow + night particle levels flicker + led warning */
body.p4.night.busy-mode:not(.relaxed-mode) .p4-c2-busy-sensor .sensor-night-emitter-node {
  animation: nightSensorEmitterPulse 1.8s ease-in-out infinite alternate;
}
body.p4.night.busy-mode:not(.relaxed-mode) .p4-c2-busy-sensor:not(.active):not(.ending) .sensor-night-bar.nbar1 {
  animation: nightSensorLevelsFlicker 1.4s steps(4, end) infinite alternate;
}
body.p4.night.busy-mode:not(.relaxed-mode) .p4-c2-busy-sensor:not(.active):not(.ending) .sensor-night-bar.nbar2 {
  animation: nightSensorLevelsFlicker 1.8s steps(3, end) infinite alternate 0.4s;
}
body.p4.night.busy-mode:not(.relaxed-mode) .p4-c2-busy-sensor .sensor-night-led {
  animation: nightAlertLedPulse 0.9s steps(2, start) infinite;
}

@keyframes nightSensorEmitterPulse {
  0% { fill: #ef4444; filter: drop-shadow(0 0 1px #ef4444); }
  100% { fill: #22d3ee; filter: drop-shadow(0 0 4px #22d3ee); }
}
@keyframes nightSensorLevelsFlicker {
  0% { height: 3px; y: 247; opacity: 0.4; }
  100% { height: 16px; y: 234; opacity: 1; }
}

/* ──── Active Click Interaction State ──── */
/* Day Active (Frenzied anemometer spin + bar levels overload + wind shake) */
body.p4.day .p4-c2-busy-sensor.active {
  animation: sensorActiveDay 3s ease-in-out;
}
body.p4.day .p4-c2-busy-sensor.active .sensor-day-turbine {
  animation: daySensorCupSpin 0.35s linear infinite !important;
}
body.p4.day .p4-c2-busy-sensor.active .sensor-day-bar {
  animation: daySensorLevelsOverload 3s cubic-bezier(0.19, 1, 0.22, 1) forwards;
}

@keyframes sensorActiveDay {
  0% { transform: scale(1) rotate(0deg); }
  10% { transform: scale(1.08) rotate(-6deg) translate(-1px, -1px); filter: drop-shadow(0 4px 8px rgba(0,0,0,0.12)); }
  20% { transform: scale(1.08) rotate(5deg) translate(1px, 1px); }
  30% { transform: scale(1.08) rotate(-5deg) translate(-1px, 1px); }
  40% { transform: scale(1.08) rotate(4deg) translate(1px, -1px); }
  50% { transform: scale(1.08) rotate(-3deg) translate(-1px, 0); }
  60% { transform: scale(1.08) rotate(3deg) translate(1px, 0); }
  70% { transform: scale(1.08) rotate(-2deg); }
  80% { transform: scale(1.08) rotate(2deg); }
  90% { transform: scale(1.03) rotate(-1deg); }
  100% { transform: scale(1) rotate(0deg); }
}
@keyframes daySensorLevelsOverload {
  0% { height: 4px; y: 245; fill: #ef4444; }
  25% { height: 15px; y: 234; fill: #f59e0b; }
  50%, 100% { height: 15px; y: 234; fill: #22c55e; }
}

/* Night Active (Aggressive LIDAR laser shoot + emitter flash + lidar skew shake) */
body.p4.night .p4-c2-busy-sensor.active {
  animation: sensorActiveNight 3s ease-in-out;
}
body.p4.night .p4-c2-busy-sensor.active .sensor-laser-line {
  opacity: 1;
  animation: sensorLaserShootCore 3s ease-in-out forwards;
}
body.p4.night .p4-c2-busy-sensor.active .sensor-laser-line-core {
  opacity: 1;
  animation: sensorLaserShootInner 3s ease-in-out forwards;
}
body.p4.night .p4-c2-busy-sensor.active .sensor-night-emitter-node {
  animation: sensorEmitterFlashActive 0.2s linear infinite;
}

@keyframes sensorActiveNight {
  0% { transform: scale(1); filter: drop-shadow(0 0 1px #d946ef); }
  10% { transform: scale(1.1) rotate(5deg) skewX(4deg); filter: drop-shadow(0 0 8px #ef4444); }
  20% { transform: scale(1.1) rotate(-5deg) skewX(-4deg); }
  30% { transform: scale(1.1) rotate(3deg) skewX(3deg); }
  40% { transform: scale(1.1) rotate(-3deg) skewX(-3deg); }
  50%, 75% { transform: scale(1.1) rotate(0deg) skewX(0deg); filter: drop-shadow(0 0 12px #22d3ee); }
  85% { transform: scale(1.05) rotate(1deg); }
  100% { transform: scale(1); filter: drop-shadow(0 0 1px #d946ef); }
}
@keyframes sensorLaserShootCore {
  0%, 100% { opacity: 0; stroke-width: 0.5; stroke: #d946ef; }
  15% { opacity: 1; stroke-width: 4.5; stroke: #ef4444; }
  40%, 70% { opacity: 0.95; stroke-width: 3.5; stroke: #22d3ee; }
  85% { opacity: 0.8; stroke-width: 2.0; stroke: #d946ef; }
}
@keyframes sensorLaserShootInner {
  0%, 100% { opacity: 0; stroke-width: 0.2; }
  15%, 80% { opacity: 1; stroke-width: 1.5; }
}
@keyframes sensorEmitterFlashActive {
  0%, 100% { fill: #ffffff; }
  50% { fill: #ef4444; }
}

/* ──── Settle / Ending Wobble Recovery ──── */
/* Day Settle: Turbine wind deceleration and wind-buffet recover */
.p4-c2-busy-sensor.ending {
  animation: sensorSettleDay 1.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.p4-c2-busy-sensor.ending .sensor-day-turbine {
  animation: daySensorCupSpinSettle 1.2s cubic-bezier(0.25, 0.8, 0.25, 1) forwards;
}
/* Night Settle: Emitter scan stabilizer cooling shake */
body.p4.night .p4-c2-busy-sensor.ending {
  animation: sensorSettleNight 1.2s cubic-bezier(0.25, 0.8, 0.25, 1);
}

@keyframes daySensorCupSpinSettle {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(720deg); }
}
@keyframes sensorSettleDay {
  0% { transform: scale(1.1) rotate(-4deg); }
  35% { transform: scale(0.93) rotate(3deg); }
  60% { transform: scale(1.03) rotate(-1.5deg); }
  80% { transform: scale(0.99) rotate(0.5deg); }
  100% { transform: scale(1) rotate(0deg); }
}
@keyframes sensorSettleNight {
  0% { transform: translate(-3px, 1.5px) skewX(2deg); }
  25% { transform: translate(2px, -1.0px) skewX(-1.5deg); }
  50% { transform: translate(-1.2px, 0.6px) skewX(1.0deg); }
  75% { transform: translate(0.5px, -0.3px) skewX(-0.5deg); }
  100% { transform: translate(0, 0) skewX(0deg); }
}

/* ──── Relaxed Mode Overrides ──── */
body.relaxed-mode .sensor-day-turbine,
body.relaxed-mode .sensor-day-bar,
body.relaxed-mode .sensor-day-led,
body.relaxed-mode .sensor-night-emitter-node,
body.relaxed-mode .sensor-night-bar,
body.relaxed-mode .sensor-night-led,
body.relaxed-mode .sensor-laser-line,
body.relaxed-mode .sensor-laser-line-core {
  animation: none !important;
  transform: none !important;
  transition: none !important;
}
body.relaxed-mode .sensor-laser-line,
body.relaxed-mode .sensor-laser-line-core {
  opacity: 0 !important;
}

/* ── 12. Smartphone Redesign ── */
.p4-c2-busy-phone {
  transform-origin: 140px 560px;
  pointer-events: auto;
}

/* ──── Continuous Day Idle Animations ──── */
/* Phone Day Hum: incoming notification vibration */
body.p4.day.busy-mode:not(.relaxed-mode) .p4-c2-busy-phone:not(.active):not(.ending) {
  animation: phoneDayHum 8s ease-in-out infinite;
}
body.p4.day.busy-mode:not(.relaxed-mode) .p4-c2-busy-phone .phone-day-banner {
  animation: dayPhoneBannerPulse 2.5s ease-in-out infinite alternate;
}
body.p4.day.busy-mode:not(.relaxed-mode) .p4-c2-busy-phone .phone-day-led {
  animation: dayPhoneLedPulse 1.2s steps(2, start) infinite;
}

@keyframes phoneDayHum {
  0%, 96%, 100% { transform: translate(0, 0) rotate(0deg); }
  97% { transform: translate(-0.5px, 0.3px) rotate(-0.5deg); }
  98% { transform: translate(0.5px, -0.3px) rotate(0.5deg); }
  99% { transform: translate(-0.3px, -0.2px) rotate(-0.3deg); }
}
@keyframes dayPhoneBannerPulse {
  0% { fill: #ffedd5; stroke: #fed7aa; }
  100% { fill: #ffdbb5; stroke: #fdba74; filter: drop-shadow(0 0 1px #f97316); }
}
@keyframes dayPhoneLedPulse {
  0%, 100% { fill: #ef4444; filter: drop-shadow(0 0 1px #ef4444); }
  50% { fill: #7f1d1d; filter: none; }
}

/* ──── Continuous Night Idle Animations ──── */
/* Screen glow breathing + terminal cursor blink */
body.p4.night.busy-mode:not(.relaxed-mode) .p4-c2-busy-phone:not(.active):not(.ending) {
  animation: nightPhoneGlow 5s ease-in-out infinite alternate;
}
body.p4.night.busy-mode:not(.relaxed-mode) .p4-c2-busy-phone .phone-night-code-cursor {
  animation: nightPhoneCursor 1s step-end infinite;
}

@keyframes nightPhoneGlow {
  0% { filter: drop-shadow(0 0 1px rgba(34, 211, 238, 0.15)); }
  100% { filter: drop-shadow(0 0 4px rgba(34, 211, 238, 0.6)); }
}
@keyframes nightPhoneCursor {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

/* ──── Active Click Interaction State ──── */
/* Day Phone Active (slack/alert surge wiggle and message bubbles pop) */
body.p4.day .p4-c2-busy-phone.active {
  animation: phoneActiveDay 3s ease-in-out;
}
body.p4.day .p4-c2-busy-phone.active .phone-bubble.bubble1 {
  animation: phoneBubblePopUp1 3s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}
body.p4.day .p4-c2-busy-phone.active .phone-bubble-txt.bubble1-txt {
  animation: phoneBubblePopUp1Txt 3s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}
body.p4.day .p4-c2-busy-phone.active .phone-bubble.bubble2 {
  animation: phoneBubblePopUp2 3s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}
body.p4.day .p4-c2-busy-phone.active .phone-bubble-txt.bubble2-txt {
  animation: phoneBubblePopUp2Txt 3s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

@keyframes phoneActiveDay {
  0% { transform: scale(1) translate(0, 0) rotate(0deg); }
  5%, 15%, 25%, 35%, 45% { transform: scale(1.1) translate(-2px, 1px) rotate(-3deg); }
  10%, 20%, 30%, 40% { transform: scale(1.1) translate(2px, -1px) rotate(3deg); }
  50% { transform: scale(1.1) translate(0, 0) rotate(0deg); }
  100% { transform: scale(1) translate(0, 0) rotate(0deg); }
}
@keyframes phoneBubblePopUp1 {
  0% { transform: translate(0, 10px) scale(0.3); opacity: 0; }
  10% { transform: translate(0, 0) scale(1.2); opacity: 1; }
  15% { transform: translate(0, 0) scale(1); opacity: 1; }
  85% { transform: translate(0, -5px) scale(1); opacity: 1; }
  100% { transform: translate(0, -15px) scale(0.5); opacity: 0; }
}
@keyframes phoneBubblePopUp1Txt {
  0% { transform: translate(0, 10px) scale(0.3); opacity: 0; }
  10% { transform: translate(0, 0) scale(1.2); opacity: 1; }
  15% { transform: translate(0, 0) scale(1); opacity: 1; }
  85% { transform: translate(0, -5px) scale(1); opacity: 1; }
  100% { transform: translate(0, -15px) scale(0.5); opacity: 0; }
}
@keyframes phoneBubblePopUp2 {
  0% { transform: translate(0, 10px) scale(0.3); opacity: 0; }
  8% { transform: translate(0, 10px) scale(0.3); opacity: 0; }
  18% { transform: translate(0, 0) scale(1.25); opacity: 1; }
  23% { transform: translate(0, 0) scale(1); opacity: 1; }
  85% { transform: translate(0, -3px) scale(1); opacity: 1; }
  100% { transform: translate(0, -12px) scale(0.5); opacity: 0; }
}
@keyframes phoneBubblePopUp2Txt {
  0% { transform: translate(0, 10px) scale(0.3); opacity: 0; }
  8% { transform: translate(0, 10px) scale(0.3); opacity: 0; }
  18% { transform: translate(0, 0) scale(1.25); opacity: 1; }
  23% { transform: translate(0, 0) scale(1); opacity: 1; }
  85% { transform: translate(0, -3px) scale(1); opacity: 1; }
  100% { transform: translate(0, -12px) scale(0.5); opacity: 0; }
}

/* Night Phone Active (laser terminal upload telemetry) */
body.p4.night .p4-c2-busy-phone.active {
  animation: phoneActiveNight 3s ease-in-out;
}
body.p4.night .p4-c2-busy-phone.active .phone-holo-ring {
  opacity: 1;
  animation: phoneHoloExpandRedesign 3s ease-out forwards;
}
body.p4.night .p4-c2-busy-phone.active .phone-night-hologram-cols {
  opacity: 1;
  animation: phoneHoloColumnsRise 3s ease-out forwards;
}
body.p4.night .p4-c2-busy-phone.active .phone-night-code {
  animation: terminalLinesGlow 0.4s ease-in-out infinite alternate;
}

@keyframes phoneActiveNight {
  0% { transform: scale(1) rotate(0deg); }
  5% { transform: scale(1.1) skewX(-6deg); filter: drop-shadow(0 0 8px #ef4444); }
  10% { transform: scale(1.1) skewX(6deg); }
  15% { transform: scale(1.1) skewX(-3deg); }
  20% { transform: scale(1.1) skewX(3deg); }
  25%, 75% { transform: scale(1.1) skewX(0deg); filter: drop-shadow(0 0 10px #22d3ee); }
  100% { transform: scale(1) rotate(0deg); }
}
@keyframes phoneHoloExpandRedesign {
  0% { transform: scale(0.5) translateY(0); opacity: 0; }
  20% { opacity: 0.95; stroke: #22d3ee; }
  50% { stroke: #d946ef; }
  80% { opacity: 0.6; }
  100% { transform: scale(1.8) translateY(-25px); opacity: 0; }
}
@keyframes phoneHoloColumnsRise {
  0% { transform: scaleY(0.2); opacity: 0; }
  15% { opacity: 0.9; }
  80% { opacity: 0.9; transform: scaleY(1); }
  100% { opacity: 0; transform: scaleY(1.3) translateY(-10px); }
}
@keyframes terminalLinesGlow {
  0% { stroke: #22c55e; }
  100% { stroke: #4ade80; filter: drop-shadow(0 0 2px #22c55e); }
}

/* ──── Settle / Ending Wobble Recovery ──── */
/* Day Settle: Phone notification decay */
.p4-c2-busy-phone.ending {
  animation: phoneSettleDay 1.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
/* Night Settle: Sync stabilizer cooling */
body.p4.night .p4-c2-busy-phone.ending {
  animation: phoneSettleNight 1.2s cubic-bezier(0.25, 0.8, 0.25, 1);
}

@keyframes phoneSettleDay {
  0% { transform: scale(1.12) rotate(-3deg); }
  35% { transform: scale(0.92) rotate(2deg); }
  60% { transform: scale(1.03) rotate(-1deg); }
  80% { transform: scale(0.99) rotate(0deg); }
  100% { transform: scale(1) rotate(0deg); }
}
@keyframes phoneSettleNight {
  0% { transform: translate(-2px, 1px) skewX(2deg); }
  25% { transform: translate(1px, -0.5px) skewX(-1.5deg); }
  50% { transform: translate(-0.5px, 0.2px) skewX(0.8deg); }
  100% { transform: translate(0, 0) skewX(0deg); }
}


/* ── 13. Wireless Charger Redesign ── */
.p4-c2-busy-charger {
  transform-origin: 202px 567px;
  pointer-events: auto;
}

/* ──── Continuous Day Idle Animations ──── */
/* Induction loops wave + status LED breathing */
body.p4.day.busy-mode:not(.relaxed-mode) .p4-c2-busy-charger:not(.active):not(.ending) .charger-day-wave.wave1 {
  animation: chargerInductionWaveDay 3s ease-out infinite;
}
body.p4.day.busy-mode:not(.relaxed-mode) .p4-c2-busy-charger:not(.active):not(.ending) .charger-day-wave.wave2 {
  animation: chargerInductionWaveDay 3s ease-out infinite 1.5s;
}
body.p4.day.busy-mode:not(.relaxed-mode) .p4-c2-busy-charger .charger-day-led {
  animation: dayLedPulse 2s ease-in-out infinite alternate;
}

@keyframes chargerInductionWaveDay {
  0% { transform: scale(0.8); opacity: 0; }
  30% { opacity: 0.7; }
  100% { transform: scale(1.3); opacity: 0; }
}

/* ──── Continuous Night Idle Animations ──── */
/* Energy coil pulsing reactor core */
body.p4.night.busy-mode:not(.relaxed-mode) .p4-c2-busy-charger:not(.active):not(.ending) .charging-coil-glow {
  animation: chargingCoilPulseNight 3s ease-in-out infinite alternate;
}

@keyframes chargingCoilPulseNight {
  0% { stroke: #d946ef; stroke-width: 1.2; filter: drop-shadow(0 0 1px #d946ef); }
  100% { stroke: #f472b6; stroke-width: 2.2; filter: drop-shadow(0 0 4px #d946ef); }
}

/* ──── Active Click Interaction State ──── */
/* Day Charger Active (Power induction burst scale & LED flash) */
body.p4.day .p4-c2-busy-charger.active {
  animation: chargerActiveDay 3s ease-in-out;
}
body.p4.day .p4-c2-busy-charger.active .charger-day-wave {
  animation: chargerActiveWavesDay 1s ease-out 3 !important;
}
body.p4.day .p4-c2-busy-charger.active .charger-day-led {
  animation: dayPhoneLedPulse 0.15s linear infinite;
}

@keyframes chargerActiveDay {
  0% { transform: scale(1); }
  15% { transform: scale(1.1) translateY(2px); filter: drop-shadow(0 2px 8px rgba(0,0,0,0.15)); }
  85% { transform: scale(1.1) translateY(2px); }
  100% { transform: scale(1); }
}
@keyframes chargerActiveWavesDay {
  0% { transform: scale(0.6); opacity: 0; stroke: #3b82f6; }
  50% { opacity: 0.95; stroke: #10b981; }
  100% { transform: scale(1.6); opacity: 0; stroke: #3b82f6; }
}

/* Night Charger Active (Reactor energy spark storm + coil spin + dome glow) */
body.p4.night .p4-c2-busy-charger.active {
  animation: chargerActiveNight 3s ease-in-out;
}
body.p4.night .p4-c2-busy-charger.active .charging-coil-glow {
  animation: chargingCoilSpinActive 3s linear infinite;
  transform-origin: 202px 567px;
}
body.p4.night .p4-c2-busy-charger.active .charger-night-spark.spark1 {
  animation: sparkDischarge 0.3s linear infinite;
}
body.p4.night .p4-c2-busy-charger.active .charger-night-spark.spark2 {
  animation: sparkDischarge 0.4s linear infinite 0.1s;
}
body.p4.night .p4-c2-busy-charger.active .charger-night-spark.spark3 {
  animation: sparkDischarge 0.25s linear infinite 0.15s;
}
body.p4.night .p4-c2-busy-charger.active .charger-night-dome {
  animation: chargingDomeGlowActive 3s ease-in-out forwards;
}

@keyframes chargerActiveNight {
  0% { transform: scale(1) rotate(0deg); }
  15% { transform: scale(1.1) rotate(4deg); filter: drop-shadow(0 0 12px #d946ef); }
  35% { transform: scale(1.1) rotate(-4deg); }
  55% { transform: scale(1.1) rotate(2deg); }
  75% { transform: scale(1.1) rotate(-2deg); }
  100% { transform: scale(1) rotate(0deg); }
}
@keyframes chargingCoilSpinActive {
  from { transform: rotate(0deg); }
  to { transform: rotate(1080deg); }
}
@keyframes sparkDischarge {
  0%, 100% { opacity: 0; stroke-width: 0.2; }
  50% { opacity: 1; stroke-width: 1.5; }
}
@keyframes chargingDomeGlowActive {
  0%, 100% { opacity: 0; transform: scale(0.6); }
  15%, 85% { opacity: 0.75; transform: scale(1.2); }
}

/* ──── Settle / Ending Wobble Recovery ──── */
/* Day Settle: Charger induction return */
.p4-c2-busy-charger.ending {
  animation: chargerSettleDay 1.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
/* Night Settle: Reactor core cooling stabilize */
body.p4.night .p4-c2-busy-charger.ending {
  animation: chargerSettleNight 1.2s cubic-bezier(0.25, 0.8, 0.25, 1);
}

@keyframes chargerSettleDay {
  0% { transform: scale(1.1) translateY(2px); }
  35% { transform: scale(0.93) translateY(-1px); }
  60% { transform: scale(1.03) translateY(0.5px); }
  100% { transform: scale(1) translateY(0); }
}
@keyframes chargerSettleNight {
  0% { transform: scale(1.1) rotate(-3deg); }
  35% { transform: scale(0.92) rotate(2deg); }
  60% { transform: scale(1.02) rotate(-1deg); }
  100% { transform: scale(1) rotate(0deg); }
}

/* ──── Relaxed Mode Overrides ──── */
body.relaxed-mode .phone-day-banner,
body.relaxed-mode .phone-day-led,
body.relaxed-mode .phone-bubble,
body.relaxed-mode .phone-bubble-txt,
body.relaxed-mode .phone-holo-ring,
body.relaxed-mode .phone-night-hologram-cols,
body.relaxed-mode .phone-night-code,
body.relaxed-mode .phone-night-code-cursor,
body.relaxed-mode .charger-day-wave,
body.relaxed-mode .charger-day-led,
body.relaxed-mode .charging-coil-glow,
body.relaxed-mode .charger-night-spark,
body.relaxed-mode .charger-night-dome {
  animation: none !important;
  transform: none !important;
  transition: none !important;
}
body.relaxed-mode .phone-bubble,
body.relaxed-mode .phone-bubble-txt,
body.relaxed-mode .phone-holo-ring,
body.relaxed-mode .phone-night-hologram-cols,
body.relaxed-mode .charger-day-wave,
body.relaxed-mode .charger-night-spark,
body.relaxed-mode .charger-night-dome {
  opacity: 0 !important;
}

/* ── 14. Desk Calculator Redesign ── */
.p4-c2-busy-calc {
  transform-origin: 262px 572px;
  pointer-events: auto;
}

/* ──── Continuous Day Idle Animations ──── */
/* Screen back-light hum breathing */
body.p4.day.busy-mode:not(.relaxed-mode) .p4-c2-busy-calc:not(.active):not(.ending) .calc-day-screen {
  animation: dayCalcScreenPulse 3s ease-in-out infinite alternate;
}
@keyframes dayCalcScreenPulse {
  0% { fill: #ecfdf5; filter: drop-shadow(0 0 0.5px rgba(167, 243, 208, 0.5)); }
  100% { fill: #d1fae5; filter: drop-shadow(0 0 2px rgba(167, 243, 208, 0.9)); }
}

/* ──── Continuous Night Idle Animations ──── */
/* Cyber body outer border glow pulsing cyan & decryption text blink */
body.p4.night.busy-mode:not(.relaxed-mode) .p4-c2-busy-calc:not(.active):not(.ending) .calc-night-body {
  animation: nightCalcBodyPulse 4s ease-in-out infinite alternate;
}
body.p4.night.busy-mode:not(.relaxed-mode) .p4-c2-busy-calc:not(.active):not(.ending) .calc-night-text {
  animation: nightCalcTextBlink 2s step-end infinite;
}
@keyframes nightCalcBodyPulse {
  0% { filter: drop-shadow(0 0 1px rgba(34, 211, 238, 0.3)); }
  100% { filter: drop-shadow(0 0 4px rgba(34, 211, 238, 0.7)); }
}
@keyframes nightCalcTextBlink {
  0%, 100% { fill: #34d399; opacity: 1; }
  50% { fill: #10b981; opacity: 0.75; }
}

/* ──── Active Click Interaction State ──── */
/* Day Calculator Active: button press clicks, receipt roll, floating operators */
body.p4.day .p4-c2-busy-calc.active {
  animation: calcActiveDay 3s ease-in-out;
}
body.p4.day .p4-c2-busy-calc.active .calc-btn {
  animation: calcBtnPressDay 3s ease-in-out;
}
body.p4.day .p4-c2-busy-calc.active .calc-day-receipt-group {
  animation: calcReceiptFeedDay 3s cubic-bezier(0.19, 1, 0.22, 1) forwards;
}
body.p4.day .p4-c2-busy-calc.active .calc-op.op-plus {
  animation: floatOpPlus 3s cubic-bezier(0.25, 0.8, 0.25, 1) forwards;
}
body.p4.day .p4-c2-busy-calc.active .calc-op.op-minus {
  animation: floatOpMinus 3s cubic-bezier(0.25, 0.8, 0.25, 1) forwards 0.3s;
}
body.p4.day .p4-c2-busy-calc.active .calc-op.op-percent {
  animation: floatOpPercent 3s cubic-bezier(0.25, 0.8, 0.25, 1) forwards 0.15s;
}
body.p4.day .p4-c2-busy-calc.active .calc-op.op-equal {
  animation: floatOpEqual 3s cubic-bezier(0.25, 0.8, 0.25, 1) forwards 0.45s;
}

@keyframes calcActiveDay {
  0% { transform: scale(1) rotate(0deg); }
  5%, 15%, 25%, 35%, 45% { transform: scale(1.04) rotate(-1deg); }
  10%, 20%, 30%, 40% { transform: scale(1.04) rotate(1deg); }
  50% { transform: scale(1.04) rotate(0deg); }
  100% { transform: scale(1) rotate(0deg); }
}
@keyframes calcBtnPressDay {
  0%, 100% { transform: translateY(0); filter: none; }
  5%, 15%, 25%, 35%, 45% { transform: translateY(0.5px); filter: brightness(0.9); }
  10%, 20%, 30%, 40% { transform: translateY(0); }
}
@keyframes calcReceiptFeedDay {
  0% { transform: translateY(0); }
  15% { transform: translateY(-7px) rotate(-1deg); }
  35% { transform: translateY(-9px) rotate(1deg); }
  55% { transform: translateY(-10px) rotate(-0.5deg); }
  85% { transform: translateY(-10.5px) rotate(0deg); }
  100% { transform: translateY(-11px); }
}
@keyframes floatOpPlus {
  0% { transform: translate(0, 5px) scale(0.6); opacity: 0; }
  15% { opacity: 0.95; }
  80% { opacity: 0.95; }
  100% { transform: translate(-8px, -22px) scale(1.1); opacity: 0; }
}
@keyframes floatOpMinus {
  0% { transform: translate(0, 5px) scale(0.6); opacity: 0; }
  15% { opacity: 0.95; }
  80% { opacity: 0.95; }
  100% { transform: translate(6px, -24px) scale(1.1); opacity: 0; }
}
@keyframes floatOpPercent {
  0% { transform: translate(0, 5px) scale(0.6); opacity: 0; }
  15% { opacity: 0.95; }
  80% { opacity: 0.95; }
  100% { transform: translate(-3px, -25px) scale(1.1); opacity: 0; }
}
@keyframes floatOpEqual {
  0% { transform: translate(0, 5px) scale(0.6); opacity: 0; }
  15% { opacity: 0.95; }
  80% { opacity: 0.95; }
  100% { transform: translate(8px, -20px) scale(1.2); opacity: 0; }
}

/* Night Calculator Active: neon decrypt screen progress bar fill, laser sweeps, binary telemetry */
body.p4.night .p4-c2-busy-calc.active {
  animation: calcActiveNight 3s ease-in-out;
}
body.p4.night .p4-c2-busy-calc.active .calc-night-bar-fill {
  animation: calcDecryptProgress 3s cubic-bezier(0.075, 0.82, 0.165, 1) forwards;
}
body.p4.night .p4-c2-busy-calc.active .calc-night-laser {
  opacity: 1;
  animation: calcLaserSweep 1s linear infinite;
}
body.p4.night .p4-c2-busy-calc.active .calc-night-key {
  animation: nightKeyFlash 0.3s ease-in-out infinite alternate;
}
body.p4.night .p4-c2-busy-calc.active .calc-telemetry.tele1 {
  animation: floatTelemetry 3s ease-out forwards;
}
body.p4.night .p4-c2-busy-calc.active .calc-telemetry.tele2 {
  animation: floatTelemetry 3s ease-out forwards 0.4s;
}
body.p4.night .p4-c2-busy-calc.active .calc-telemetry.tele3 {
  animation: floatTelemetry 3s ease-out forwards 0.2s;
}
body.p4.night .p4-c2-busy-calc.active .calc-telemetry.tele4 {
  animation: floatTelemetry 3s ease-out forwards 0.6s;
}

@keyframes calcActiveNight {
  0% { transform: scale(1) rotate(0deg); }
  5% { transform: scale(1.05) skewX(-2deg); filter: drop-shadow(0 0 6px #d946ef); }
  10% { transform: scale(1.05) skewX(2deg); }
  15% { transform: scale(1.05) skewX(-1deg); }
  20% { transform: scale(1.05) skewX(1deg); }
  25%, 75% { transform: scale(1.05) skewX(0deg); filter: drop-shadow(0 0 8px #22d3ee); }
  100% { transform: scale(1) rotate(0deg); }
}
@keyframes calcDecryptProgress {
  0% { width: 2px; fill: #ef4444; }
  30% { width: 10px; fill: #f59e0b; }
  60% { width: 22px; fill: #22d3ee; }
  100% { width: 31px; fill: #34d399; }
}
@keyframes calcLaserSweep {
  0% { transform: translateY(0); opacity: 0.1; }
  50% { opacity: 0.8; }
  100% { transform: translateY(6px); opacity: 0.1; }
}
@keyframes nightKeyFlash {
  0% { fill: #090d16; stroke: #22d3ee; filter: drop-shadow(0 0 1px #22d3ee); }
  100% { fill: #1e1b4b; stroke: #d946ef; filter: drop-shadow(0 0 3px #d946ef); }
}
@keyframes floatTelemetry {
  0% { transform: translateY(5px) scale(0.8); opacity: 0; }
  15% { opacity: 0.9; }
  80% { opacity: 0.9; }
  100% { transform: translateY(-18px) scale(1.1); opacity: 0; }
}

/* ──── Settle / Ending Wobble Recovery ──── */
/* Day Settle: Receipt return and bounce settle */
.p4-c2-busy-calc.ending {
  animation: calcSettleDay 1.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
body.p4.day .p4-c2-busy-calc.ending .calc-day-receipt-group {
  animation: calcReceiptSettleDay 1.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
/* Night Settle: Console stabilizing decryption */
body.p4.night .p4-c2-busy-calc.ending {
  animation: calcSettleNight 1.2s ease-out;
}

@keyframes calcSettleDay {
  0% { transform: scale(1.05) rotate(1deg); }
  35% { transform: scale(0.95) rotate(-0.5deg); }
  60% { transform: scale(1.02) rotate(0.2deg); }
  100% { transform: scale(1) rotate(0deg); }
}
@keyframes calcReceiptSettleDay {
  0% { transform: translateY(-11px); }
  100% { transform: translateY(0); }
}
@keyframes calcSettleNight {
  0% { transform: scale(1.05) skewX(-1deg); }
  30% { transform: scale(0.97) skewX(0.5deg); }
  60% { transform: scale(1.01) skewX(-0.2deg); }
  100% { transform: scale(1) skewX(0deg); }
}

/* ──── Relaxed Mode Overrides ──── */
body.relaxed-mode .calc-day-receipt-group,
body.relaxed-mode .calc-op,
body.relaxed-mode .calc-night-laser,
body.relaxed-mode .calc-telemetry {
  animation: none !important;
  transform: none !important;
  opacity: 0 !important;
}
body.relaxed-mode .calc-day-screen,
body.relaxed-mode .calc-night-body,
body.relaxed-mode .calc-night-text,
body.relaxed-mode .calc-night-bar-fill,
body.relaxed-mode .calc-night-key {
  animation: none !important;
  filter: none !important;
}

/* ── 15. Smart Pen & Notebook ── */
.p4-c2-busy-notebook {
  transform-origin: 325px 578px;
}
.p4-c2-busy-notebook.active .writing-trace {
  opacity: 1;
  animation: writingTraceAnim 3s ease forwards;
}
@keyframes writingTraceAnim {
  0% { stroke-dasharray: 0, 100; opacity: 0; }
  20% { opacity: 1; }
  80% { stroke-dasharray: 100, 0; opacity: 1; }
  100% { opacity: 0; }
}

/* ── 16. Voice Assistant Speaker Redesign ── */
.p4-c2-busy-speaker {
  transform-origin: 837px 522px;
  pointer-events: auto;
}

/* ──── Continuous Day Idle Animations ──── */
/* Vocal frequency wave breathing */
body.p4.day.busy-mode:not(.relaxed-mode) .p4-c2-busy-speaker:not(.active):not(.ending) .speaker-day-wave {
  animation: speakerWaveBreatheDay 2.5s ease-in-out infinite alternate;
}
@keyframes speakerWaveBreatheDay {
  0% { transform: scale(0.9) translate(0, 0); opacity: 0.5; }
  100% { transform: scale(1.1) translate(0.1px, 0.1px); opacity: 0.95; filter: drop-shadow(0 0 1px #22c55e); }
}

/* ──── Continuous Night Idle Animations ──── */
/* Cyber radar assistant ring breathing */
body.p4.night.busy-mode:not(.relaxed-mode) .p4-c2-busy-speaker:not(.active):not(.ending) .voice-assistant-ring {
  animation: speakerRingPulseNight 3s ease-in-out infinite alternate;
}
@keyframes speakerRingPulseNight {
  0% { stroke: #22d3ee; opacity: 0.5; transform: scale(0.95); }
  100% { stroke: #00f2ff; opacity: 0.95; transform: scale(1.08); filter: drop-shadow(0 0 2px #00f2ff); }
}

/* ──── Active Click Interaction State ──── */
/* Day Speaker Active: high-tempo scale wiggles, expanding wave circles, and floating bars */
body.p4.day .p4-c2-busy-speaker.active {
  animation: speakerActiveDay 3s ease-in-out;
}
body.p4.day .p4-c2-busy-speaker.active .speaker-day-wave {
  animation: speakerWaveActiveDay 1s ease-out infinite;
}
body.p4.day .p4-c2-busy-speaker.active .speaker-bar.bar1 {
  animation: speakerBarFloatDay 3s ease-out forwards;
}
body.p4.day .p4-c2-busy-speaker.active .speaker-bar.bar2 {
  animation: speakerBarFloatDay 3s ease-out forwards 0.2s;
}
body.p4.day .p4-c2-busy-speaker.active .speaker-bar.bar3 {
  animation: speakerBarFloatDay 3s ease-out forwards 0.1s;
}
body.p4.day .p4-c2-busy-speaker.active .speaker-bar.bar4 {
  animation: speakerBarFloatDay 3s ease-out forwards 0.3s;
}
body.p4.day .p4-c2-busy-speaker.active .speaker-bar.bar5 {
  animation: speakerBarFloatDay 3s ease-out forwards 0.15s;
}

@keyframes speakerActiveDay {
  0% { transform: scale(1) rotate(0deg); }
  5%, 15%, 25%, 35%, 45%, 55% { transform: scale(1.06) translate(-1px, 1px) rotate(-1deg); }
  10%, 20%, 30%, 40%, 50% { transform: scale(1.06) translate(1px, -1px) rotate(1deg); }
  60% { transform: scale(1.03) rotate(0deg); }
  100% { transform: scale(1) rotate(0deg); }
}
@keyframes speakerWaveActiveDay {
  0% { transform: scale(0.6); opacity: 0; stroke-width: 0.5; }
  50% { opacity: 0.9; stroke-width: 1.5; stroke: #3b82f6; }
  100% { transform: scale(1.6); opacity: 0; stroke-width: 0.5; stroke: #ec4899; }
}
@keyframes speakerBarFloatDay {
  0% { transform: translateY(5px) scale(0.7); opacity: 0; }
  15% { opacity: 0.95; }
  80% { opacity: 0.95; }
  100% { transform: translateY(-20px) scale(1.1); opacity: 0; }
}

/* Night Speaker Active: high-tempo skew vibration, active radar sweep, holographic signals */
body.p4.night .p4-c2-busy-speaker.active {
  animation: speakerActiveNight 3s ease-in-out;
}
body.p4.night .p4-c2-busy-speaker.active .voice-assistant-ring {
  animation: speakerRingActiveNight 1s linear infinite;
}
body.p4.night .p4-c2-busy-speaker.active .speaker-sig.sig1 {
  animation: speakerSigFloatNight 3s cubic-bezier(0.19, 1, 0.22, 1) forwards;
}
body.p4.night .p4-c2-busy-speaker.active .speaker-sig.sig2 {
  animation: speakerSigFloatNight 3s cubic-bezier(0.19, 1, 0.22, 1) forwards 0.2s;
}
body.p4.night .p4-c2-busy-speaker.active .speaker-sig.sig3 {
  animation: speakerSigFloatNight 3s cubic-bezier(0.19, 1, 0.22, 1) forwards 0.4s;
}

@keyframes speakerActiveNight {
  0% { transform: scale(1) rotate(0deg); }
  5% { transform: scale(1.08) skewX(-4deg); filter: drop-shadow(0 0 6px #00f2ff); }
  10% { transform: scale(1.08) skewX(4deg); }
  15% { transform: scale(1.08) skewX(-2deg); }
  20% { transform: scale(1.08) skewX(2deg); }
  25%, 75% { transform: scale(1.08) skewX(0deg); filter: drop-shadow(0 0 10px #d946ef); }
  100% { transform: scale(1) rotate(0deg); }
}
@keyframes speakerRingActiveNight {
  0% { transform: scale(0.9); opacity: 0.1; stroke: #22d3ee; }
  50% { opacity: 0.95; stroke: #d946ef; stroke-width: 2.2; }
  100% { transform: scale(1.8); opacity: 0; stroke: #22d3ee; }
}
@keyframes speakerSigFloatNight {
  0% { transform: translateY(8px); opacity: 0; }
  15% { opacity: 0.95; }
  85% { opacity: 0.95; }
  100% { transform: translateY(-24px); opacity: 0; }
}

/* ──── Settle / Ending Wobble Recovery ──── */
/* Day Speaker Settle: springy dampening scale settle */
.p4-c2-busy-speaker.ending {
  animation: speakerSettleDay 1.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
/* Night Speaker Settle: console cooling stabilization */
body.p4.night .p4-c2-busy-speaker.ending {
  animation: speakerSettleNight 1.2s ease-out;
}

@keyframes speakerSettleDay {
  0% { transform: scale(1.08) rotate(1deg); }
  35% { transform: scale(0.92) rotate(-0.5deg); }
  60% { transform: scale(1.03) rotate(0.2deg); }
  100% { transform: scale(1) rotate(0deg); }
}
@keyframes speakerSettleNight {
  0% { transform: scale(1.06) skewX(-2deg); }
  30% { transform: scale(0.97) skewX(1deg); }
  60% { transform: scale(1.01) skewX(-0.5deg); }
  100% { transform: scale(1) skewX(0deg); }
}


/* ── 17. Holographic Projector Redesign ── */
.p4-c2-busy-projector {
  transform-origin: 1115px 527px;
  pointer-events: auto;
}

/* ──── Continuous Day Idle Animations ──── */
/* Lens reflection glow breathing */
body.p4.day.busy-mode:not(.relaxed-mode) .p4-c2-busy-projector:not(.active):not(.ending) .proj-day-lens-glow {
  animation: projLensGlowDay 2s ease-in-out infinite alternate;
}
@keyframes projLensGlowDay {
  0% { opacity: 0.4; fill: #10b981; }
  100% { opacity: 1; fill: #34d399; filter: drop-shadow(0 0 1.5px #10b981); }
}

/* ──── Continuous Night Idle Animations ──── */
/* Laser core neon orange glow breathing */
body.p4.night.busy-mode:not(.relaxed-mode) .p4-c2-busy-projector:not(.active):not(.ending) .holo-lens-glow {
  animation: projLensGlowNight 2.5s ease-in-out infinite alternate;
}
@keyframes projLensGlowNight {
  0% { fill: #f43f5e; filter: drop-shadow(0 0 1px #f43f5e); }
  100% { fill: #ff6b8b; filter: drop-shadow(0 0 4px #f43f5e); }
}

/* ──── Active Click Interaction State ──── */
/* Day Projector Active: lens brightness flash, conference chart dashboard overlay expands */
body.p4.day .p4-c2-busy-projector.active {
  animation: projActiveDay 3s ease-in-out;
}
body.p4.day .p4-c2-busy-projector.active .proj-day-beam {
  animation: projBeamActiveDay 3s ease-in-out;
}
body.p4.day .p4-c2-busy-projector.active .proj-day-chart {
  animation: projChartActiveDay 3s cubic-bezier(0.175, 0.885, 0.32, 1.2) forwards;
}

@keyframes projActiveDay {
  0% { transform: scale(1) rotate(0deg); }
  15% { transform: scale(1.06) translateY(1.5px); }
  85% { transform: scale(1.06) translateY(1.5px); }
  100% { transform: scale(1) rotate(0deg); }
}
@keyframes projBeamActiveDay {
  0%, 100% { opacity: 0; transform: scaleX(0.4); }
  15%, 85% { opacity: 0.45; transform: scaleX(1); }
}
@keyframes projChartActiveDay {
  0% { transform: translateY(15px) scale(0.6); opacity: 0; }
  15%, 85% { transform: translateY(0) scale(1); opacity: 1; }
  100% { transform: translateY(-12px) scale(0.5); opacity: 0; }
}

/* Night Projector Active: volumetric laser sweeps and security shield matrix rotates */
body.p4.night .p4-c2-busy-projector.active {
  animation: projActiveNight 3s ease-in-out;
}
body.p4.night .p4-c2-busy-projector.active .holo-beam-projection {
  animation: projBeamActiveNight 3s ease-in-out;
}
body.p4.night .p4-c2-busy-projector.active .proj-night-shield {
  animation: projShieldActiveNight 3s cubic-bezier(0.175, 0.885, 0.32, 1.25) forwards;
}
body.p4.night .p4-c2-busy-projector.active .shield-ring.ring-outer {
  animation: spinOuter 3s linear infinite;
  transform-origin: 1115px 290px;
}
body.p4.night .p4-c2-busy-projector.active .shield-ring.ring-inner {
  animation: spinInner 3s linear infinite;
  transform-origin: 1115px 290px;
}

@keyframes projActiveNight {
  0% { transform: scale(1) rotate(0deg); }
  5% { transform: scale(1.08) rotate(3deg); filter: drop-shadow(0 0 8px #f43f5e); }
  15% { transform: scale(1.08) rotate(-3deg); }
  25%, 75% { transform: scale(1.08) rotate(0deg); filter: drop-shadow(0 0 12px #d946ef); }
  100% { transform: scale(1) rotate(0deg); }
}
@keyframes projBeamActiveNight {
  0%, 100% { opacity: 0; transform: scaleX(0.5); }
  15%, 85% { opacity: 0.65; transform: scaleX(1); }
}
@keyframes projShieldActiveNight {
  0% { transform: translateY(20px) scale(0.5); opacity: 0; }
  15%, 85% { transform: translateY(0) scale(1); opacity: 1; }
  100% { transform: translateY(-15px) scale(0.5); opacity: 0; }
}
@keyframes spinOuter {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
@keyframes spinInner {
  from { transform: rotate(0deg); }
  to { transform: rotate(-360deg); }
}

/* ──── Settle / Ending Wobble Recovery ──── */
/* Day Projector Settle: springy bounce back */
.p4-c2-busy-projector.ending {
  animation: projSettleDay 1.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
/* Night Projector Settle: laser coil stabilizing */
body.p4.night .p4-c2-busy-projector.ending {
  animation: projSettleNight 1.2s ease-out;
}

@keyframes projSettleDay {
  0% { transform: scale(1.06) translateY(1.5px); }
  35% { transform: scale(0.94) translateY(-1px); }
  60% { transform: scale(1.02) translateY(0.5px); }
  100% { transform: scale(1) translateY(0); }
}
@keyframes projSettleNight {
  0% { transform: scale(1.08) rotate(-2deg); }
  30% { transform: scale(0.96) rotate(1deg); }
  60% { transform: scale(1.01) rotate(-0.5deg); }
  100% { transform: scale(1) rotate(0deg); }
}


/* ── Relaxed Mode Overrides (Freeze and optimize Busy Mode elements) ── */
body.relaxed-mode .p4-c2-busy-interactive,
body.relaxed-mode .p4-c2-busy-bonsai *,
body.relaxed-mode .p4-c2-busy-drone *,
body.relaxed-mode .p4-c2-busy-thermostat *,
body.relaxed-mode .p4-c2-busy-blinds *,
body.relaxed-mode .p4-c2-busy-helicopter *,
body.relaxed-mode .p4-c2-busy-dashboard,
body.relaxed-mode .p4-c2-busy-dashboard *,
body.relaxed-mode .p4-c2-busy-frame,
body.relaxed-mode .p4-c2-busy-frame *,
body.relaxed-mode .camera-head-rotate-day,
body.relaxed-mode .camera-head-rotate-night,
body.relaxed-mode .camera-day-cone,
body.relaxed-mode .camera-night-cone,
body.relaxed-mode .camera-day-target-grid,
body.relaxed-mode .camera-night-target-grid,
body.relaxed-mode .drone-searchlight,
body.relaxed-mode .holo-beam-projection,
body.relaxed-mode .solar-laser-beam,
body.relaxed-mode .sensor-laser-line,
body.relaxed-mode .phone-holo-ring,
body.relaxed-mode .writing-trace,
body.relaxed-mode .voice-assistant-ring,
body.relaxed-mode .bonsai-day-petal1,
body.relaxed-mode .bonsai-day-petal2,
body.relaxed-mode .bonsai-day-petal3,
body.relaxed-mode .bonsai-spore {
  animation: none !important;
  transform: none !important;
  transition: none !important;
}
body.relaxed-mode .dash-holo-overlay,
body.relaxed-mode .frame-night-holo,
body.relaxed-mode .frame-night-scanline,
body.relaxed-mode .camera-day-cone,
body.relaxed-mode .camera-night-cone,
body.relaxed-mode .camera-day-target-grid,
body.relaxed-mode .camera-night-target-grid,
body.relaxed-mode .drone-searchlight,
body.relaxed-mode .holo-beam-projection,
body.relaxed-mode .solar-laser-beam,
body.relaxed-mode .sensor-laser-line,
body.relaxed-mode .phone-holo-ring,
body.relaxed-mode .writing-trace,
body.relaxed-mode .voice-assistant-ring,
body.relaxed-mode .bonsai-day-petal1,
body.relaxed-mode .bonsai-day-petal2,
body.relaxed-mode .bonsai-day-petal3,
body.relaxed-mode .bonsai-spore,
body.relaxed-mode .p4-c2-heli-searchlight,
body.relaxed-mode .p4-c2-heli-searchlight-alarm,
body.relaxed-mode .p4-c2-heli-flame {
  opacity: 0 !important;
}

body.relaxed-mode .speaker-day-wave,
body.relaxed-mode .speaker-bar,
body.relaxed-mode .speaker-sig,
body.relaxed-mode .proj-day-beam,
body.relaxed-mode .proj-day-chart,
body.relaxed-mode .proj-night-shield,
body.relaxed-mode .shield-ring,
body.relaxed-mode .shield-icon,
body.relaxed-mode .proj-night-coil,
body.relaxed-mode .proj-day-lens-glow,
body.relaxed-mode .holo-lens-glow {
  animation: none !important;
  transform: none !important;
  opacity: 0 !important;
  filter: none !important;
}


/* ==========================================================================
   COURSE 2 HOLIDAY MODE REDESIGN (Day: Summer Theme, Night: Party Theme)
   ========================================================================== */

/* Base visibility rule for Course 2 holiday overlays */
.p4-c2-holiday-only {
  display: none;
}
body.p4.holiday-mode .p4-c2-holiday-only {
  display: block;
}

/* Background panel colors for the section itself */
body.p4.day.holiday-mode #p4Course2 {
  background: #fdf2f8 !important;
  position: relative !important;
  overflow: hidden !important;
  padding: 0 !important;
}
body.p4.night.holiday-mode #p4Course2 {
  background: #0f051d !important;
  position: relative !important;
  overflow: hidden !important;
  padding: 0 !important;
}

/* Hide all normal boardroom office elements and busy elements in holiday mode */
body.p4.holiday-mode .p4-c2-interactive,
body.p4.holiday-mode .p4-c2-busy-only {
  display: none !important;
}

/* Screen visibility controls in Holiday mode */
body.p4.holiday-mode .screen-holiday-content {
  opacity: 1 !important;
}
body.p4.holiday-mode .screen-idle-content,
body.p4.holiday-mode .screen-content {
  opacity: 0 !important;
}

/* --- DAY HOLIDAY (Summer Theme) Animations --- */
@keyframes p4C2SunStandbyPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.03); }
}
@keyframes p4C2SunBeamsRotate {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
@keyframes p4C2SunCoronaRotate {
  0% { transform: rotate(360deg); }
  100% { transform: rotate(0deg); }
}
body.p4.day.holiday-mode:not(.relaxed-mode) .p4-c2-hol-sun .sun-standby-wrap {
  animation: p4C2SunStandbyPulse 6s infinite ease-in-out;
}
body.p4.day.holiday-mode:not(.relaxed-mode) .p4-c2-hol-sun .sun-beams-group {
  animation: p4C2SunBeamsRotate 45s linear infinite;
}
body.p4.day.holiday-mode:not(.relaxed-mode) .p4-c2-hol-sun .sun-corona {
  animation: p4C2SunCoronaRotate 35s linear infinite;
}

@keyframes p4C2SeagullFly {
  0% { transform: translate(0, 0); }
  50% { transform: translate(30px, -12px); }
  100% { transform: translate(0, 0); }
}
.p4-c2-seagull {
  animation: p4C2SeagullFly 8s infinite ease-in-out;
}
.p4-c2-seagull.s1 { animation-delay: 0s; }
.p4-c2-seagull.s2 { animation-delay: 3.5s; animation-duration: 10s; }

@keyframes p4C2CloudDrift {
  0% { transform: translateX(0); }
  50% { transform: translateX(60px); }
  100% { transform: translateX(0); }
}

/* --- NIGHT HOLIDAY (Party Theme) Animations --- */

/* Window outline neon shift */
@keyframes p4C2PartyWindowGlow {
  0%, 100% { stroke: #06b6d4; filter: drop-shadow(0 0 2px #06b6d4) drop-shadow(0 0 6px #06b6d4); }
  33% { stroke: #ec4899; filter: drop-shadow(0 0 2px #ec4899) drop-shadow(0 0 6px #ec4899); }
  66% { stroke: #eab308; filter: drop-shadow(0 0 2px #eab308) drop-shadow(0 0 6px #eab308); }
}
body.p4.night.holiday-mode .p4-c2-neon-glow {
  animation: p4C2PartyWindowGlow 4s infinite ease-in-out !important;
}

/* Spotlights/Lasers */
@keyframes p4C2LaserSweep {
  0%, 100% { transform: rotate(0deg); }
  50% { transform: rotate(12deg); }
}
@keyframes p4C2LaserSweepReverse {
  0%, 100% { transform: rotate(0deg); }
  50% { transform: rotate(-12deg); }
}
.p4-c2-laser {
  transform-origin: 600px 0px;
}
.p4-c2-laser.l1 { animation: p4C2LaserSweep 6s infinite ease-in-out; }
.p4-c2-laser.l2 { animation: p4C2LaserSweepReverse 8s infinite ease-in-out; }
.p4-c2-laser.l3 { animation: p4C2LaserSweep 5s infinite ease-in-out 1s; }

/* Disco Ball swing */
@keyframes p4C2DiscoBallSwing {
  0%, 100% { transform: rotate(0deg); }
  50% { transform: rotate(3deg); }
}
.p4-c2-discoball,
.p4-c2-discoball-grid,
.p4-c2-disco-glow-pulse {
  transform-origin: 600px 0px;
  animation: p4C2DiscoBallSwing 4s infinite ease-in-out;
}

/* Disco Glow pulse */
@keyframes p4C2DiscoGlowPulse {
  0%, 100% { transform: scale(1); opacity: 0.35; }
  50% { transform: scale(1.15); opacity: 0.6; }
}
.p4-c2-disco-glow-pulse {
  animation: p4C2DiscoGlowPulse 2.5s infinite ease-in-out, p4C2DiscoBallSwing 4s infinite ease-in-out;
}

/* Balloons swaying */
@keyframes p4C2BalloonSway {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  50% { transform: translate(6px, -8px) rotate(2deg); }
}
.p4-c2-balloon {
  animation: p4C2BalloonSway 6s infinite ease-in-out;
}
.p4-c2-balloon.b1 { animation-delay: 0s; transform-origin: -10px 120px; }
.p4-c2-balloon.b2 { animation-delay: 1.5s; animation-duration: 5s; transform-origin: -20px 90px; }
.p4-c2-balloon.b3 { animation-delay: 0.8s; animation-duration: 7s; transform-origin: 10px 110px; }
.p4-c2-balloon.b4 { animation-delay: 2.2s; animation-duration: 5.5s; transform-origin: 20px 80px; }

/* Confetti Fall */
@keyframes p4C2ConfettiFall {
  0% { transform: translateY(0) rotate(0deg); opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { transform: translateY(620px) rotate(360deg); opacity: 0; }
}
.p4-c2-conf {
  animation: p4C2ConfettiFall 5s linear infinite;
  transform-origin: center;
}
.p4-c2-conf:nth-child(2n) { animation-duration: 4.2s; animation-delay: 1.2s; }
.p4-c2-conf:nth-child(3n) { animation-duration: 6s; animation-delay: 2.5s; }
.p4-c2-conf:nth-child(4n) { animation-duration: 4.8s; animation-delay: 0.5s; }
.p4-c2-conf:nth-child(5n) { animation-duration: 5.5s; animation-delay: 3.1s; }

/* Bouncing Equalizer Screen Bars */
@keyframes p4C2EqualizerBounce {
  0%, 100% { transform: scaleY(0.2); }
  50% { transform: scaleY(1); }
}
.p4-c2-eq-bar {
  animation: p4C2EqualizerBounce 1.2s infinite ease-in-out;
}
.p4-c2-eq-bar.b1 { animation-delay: 0.1s; animation-duration: 1.0s; transform-origin: 59px 150px; }
.p4-c2-eq-bar.b2 { animation-delay: 0.4s; animation-duration: 1.4s; transform-origin: 74px 150px; }
.p4-c2-eq-bar.b3 { animation-delay: 0.2s; animation-duration: 0.8s; transform-origin: 89px 150px; }
.p4-c2-eq-bar.b4 { animation-delay: 0.6s; animation-duration: 1.2s; transform-origin: 104px 150px; }
.p4-c2-eq-bar.b5 { animation-delay: 0.3s; animation-duration: 0.9s; transform-origin: 119px 150px; }
.p4-c2-eq-bar.b6 { animation-delay: 0.7s; animation-duration: 1.5s; transform-origin: 134px 150px; }
.p4-c2-eq-bar.b7 { animation-delay: 0.5s; animation-duration: 1.1s; transform-origin: 154px 150px; }
.p4-c2-eq-bar.b8 { animation-delay: 0.2s; animation-duration: 1.3s; transform-origin: 169px 150px; }
.p4-c2-eq-bar.b9 { animation-delay: 0.8s; animation-duration: 0.7s; transform-origin: 184px 150px; }
.p4-c2-eq-bar.b10 { animation-delay: 0.4s; animation-duration: 1.2s; transform-origin: 199px 150px; }
.p4-c2-eq-bar.b11 { animation-delay: 0.1s; animation-duration: 1.0s; transform-origin: 214px 150px; }

/* Neon text color flash */
@keyframes p4C2NeonTextGlow {
  0%, 100% { text-shadow: 0 0 4px #06b6d4, 0 0 10px #06b6d4; fill: #00ffff; }
  50% { text-shadow: 0 0 8px #ec4899, 0 0 20px #ec4899; fill: #ffffff; }
}
.p4-c2-neon-text {
  animation: p4C2NeonTextGlow 3s infinite ease-in-out;
}


/* --- 15 Brand New Party Decorations (Night Holiday Mode) --- */
.p4-c2-party-deco {
  transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), filter 0.3s ease;
}
.p4-c2-party-deco:hover {
  transform: scale(1.05) !important;
}

/* Transform Origins for Hover Effects */
.p4-c2-hol-neon-cocktail { transform-origin: 75px 120px; }
.p4-c2-hol-star-garland { transform-origin: 35px 70px; }
.p4-c2-hol-neon-dkm { transform-origin: 80px 220px; }
.p4-c2-hol-spotlight-left { transform-origin: 20px 320px; }
.p4-c2-hol-neon-waves { transform-origin: 71px 380px; }
.p4-c2-hol-led-cooler { transform-origin: 130px 440px; }
.p4-c2-hol-neon-garland { transform-origin: 860px 40px; }
.p4-c2-hol-hanging-laser { transform-origin: 840px 25px; }
.p4-c2-hol-firework-burst { transform-origin: 780px 110px; }
.p4-c2-hol-neon-notes { transform-origin: 930px 95px; }
.p4-c2-hol-neon-banner { transform-origin: 870px 160px; }
.p4-c2-hol-party-popper { transform-origin: 1130px 90px; }
.p4-c2-hol-neon-streamers { transform-origin: 1175px 0px; }
.p4-c2-hol-neon-headphones { transform-origin: 1095px 290px; }
.p4-c2-hol-glowstick-jar { transform-origin: 1140px 440px; }

/* Neon Sign Flickering and Glowing Animations */
@keyframes p4C2NeonFlickerPink {
  0%, 100% { filter: drop-shadow(0 0 2px #ff007f) drop-shadow(0 0 6px #ff007f); opacity: 0.95; }
  50% { filter: drop-shadow(0 0 3px #ff007f) drop-shadow(0 0 10px #ff007f); opacity: 1; }
  85% { opacity: 0.9; }
  90% { filter: drop-shadow(0 0 1px #ff007f); opacity: 0.8; }
}
@keyframes p4C2NeonFlickerCyan {
  0%, 100% { filter: drop-shadow(0 0 2px #00ffff) drop-shadow(0 0 6px #00ffff); opacity: 0.95; }
  30% { filter: drop-shadow(0 0 3px #00ffff) drop-shadow(0 0 10px #00ffff); opacity: 1; }
  75% { opacity: 0.9; }
  80% { filter: drop-shadow(0 0 1px #00ffff); opacity: 0.85; }
}
@keyframes p4C2NeonFlickerGold {
  0%, 100% { filter: drop-shadow(0 0 2px #eab308) drop-shadow(0 0 5px #eab308); opacity: 0.95; }
  60% { filter: drop-shadow(0 0 4px #eab308) drop-shadow(0 0 8px #eab308); opacity: 1; }
}
@keyframes p4C2NeonFlickerGreen {
  0%, 100% { filter: drop-shadow(0 0 2px #39ff14) drop-shadow(0 0 5px #39ff14); }
  50% { filter: drop-shadow(0 0 4px #39ff14) drop-shadow(0 0 10px #39ff14); }
}

/* Apply flickering animations */
body.p4.night.holiday-mode:not(.relaxed-mode) .p4-c2-hol-neon-cocktail {
  animation: p4C2NeonFlickerPink 4s infinite alternate;
}
body.p4.night.holiday-mode:not(.relaxed-mode) .p4-c2-hol-neon-dkm {
  animation: p4C2NeonFlickerCyan 3.5s infinite alternate;
}
body.p4.night.holiday-mode:not(.relaxed-mode) .p4-c2-neon-headphones {
  animation: p4C2NeonFlickerPink 5s infinite alternate 0.5s;
}
body.p4.night.holiday-mode:not(.relaxed-mode) .p4-c2-neon-banner {
  animation: p4C2NeonFlickerCyan 6s infinite alternate 1s;
}

/* DECO 1, 2, 3 CONTINUOUS STANDBY ANIMATIONS */
@keyframes p4C2CocktailStandbyFloat {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-3px) rotate(1.5deg); }
}
body.p4.night.holiday-mode:not(.relaxed-mode) .p4-c2-hol-neon-cocktail .cocktail-standby-wrap {
  animation: p4C2CocktailStandbyFloat 4s ease-in-out infinite;
  transform-origin: 75px 120px;
}

@keyframes p4C2StarStandbySway {
  0%, 100% { transform: rotate(0deg); }
  50% { transform: rotate(4deg); }
}
body.p4.night.holiday-mode:not(.relaxed-mode) .p4-c2-hol-star-garland .star-standby-wrap {
  animation: p4C2StarStandbySway 5s ease-in-out infinite;
  transform-origin: 35px 0px;
}
body.p4.night.holiday-mode:not(.relaxed-mode) .star-glow-y { filter: drop-shadow(0 0 4px #eab308); }
body.p4.night.holiday-mode:not(.relaxed-mode) .star-glow-m { filter: drop-shadow(0 0 4px #ff00ff); }
body.p4.night.holiday-mode:not(.relaxed-mode) .star-glow-c { filter: drop-shadow(0 0 4px #00ffff); }

@keyframes p4C2DkmStandbyFloat {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-2px) rotate(-1deg); }
}
body.p4.night.holiday-mode:not(.relaxed-mode) .p4-c2-hol-neon-dkm .dkm-standby-wrap {
  animation: p4C2DkmStandbyFloat 4.5s ease-in-out infinite;
  transform-origin: 80px 220px;
}

/* DECO 1, 2, 3 INTERACTIVE CLICK ACTIVE ANIMATIONS */
@keyframes p4C2CocktailActiveClink {
  0% { transform: scale(1) rotate(0deg); }
  15% { transform: scale(1.15) rotate(-15deg); filter: drop-shadow(0 0 15px #ff007f); }
  35% { transform: scale(1.15) rotate(10deg); filter: drop-shadow(0 0 15px #ff007f); }
  55% { transform: scale(1.1) rotate(-8deg); }
  75% { transform: scale(1.05) rotate(4deg); }
  100% { transform: scale(1.02) rotate(0deg); }
}
body.p4.night.holiday-mode:not(.relaxed-mode) .p4-c2-hol-neon-cocktail.active .cocktail-click-wrap {
  animation: p4C2CocktailActiveClink 1.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
  transform-origin: 75px 120px;
}
@keyframes p4C2CocktailSplash {
  0% { opacity: 0; transform: scale(0.4) translateY(0); }
  30% { opacity: 1; transform: scale(1.2) translateY(-8px); }
  60% { opacity: 0.8; transform: scale(1.2) translateY(-4px); }
  100% { opacity: 0; transform: scale(0.8) translateY(10px); }
}
body.p4.night.holiday-mode:not(.relaxed-mode) .p4-c2-hol-neon-cocktail.active .cocktail-splash-group {
  animation: p4C2CocktailSplash 1.5s ease-out forwards;
  transform-origin: 75px 100px;
}

@keyframes p4C2StarActiveSpin {
  0% { transform: rotate(0deg) scale(1); }
  25% { transform: rotate(45deg) scale(1.15); filter: drop-shadow(0 0 12px #ffff00); }
  50% { transform: rotate(-30deg) scale(1.15); filter: drop-shadow(0 0 12px #ff00ff); }
  75% { transform: rotate(15deg) scale(1.05); }
  100% { transform: rotate(0deg) scale(1.02); }
}
body.p4.night.holiday-mode:not(.relaxed-mode) .p4-c2-hol-star-garland.active .star-click-wrap {
  animation: p4C2StarActiveSpin 1.8s cubic-bezier(0.25, 0.8, 0.25, 1) forwards;
  transform-origin: 35px 70px;
}

@keyframes p4C2DkmActiveSurge {
  0% { transform: scale(1); }
  15% { transform: scale(1.12); filter: drop-shadow(0 0 15px #00ffff) drop-shadow(0 0 25px #00ffff); }
  30% { transform: scale(1.08); filter: drop-shadow(0 0 10px #ff00ff) drop-shadow(0 0 20px #ff00ff); }
  45% { transform: scale(1.12); filter: drop-shadow(0 0 15px #eab308) drop-shadow(0 0 25px #eab308); }
  100% { transform: scale(1.02); }
}
body.p4.night.holiday-mode:not(.relaxed-mode) .p4-c2-hol-neon-dkm.active .dkm-click-wrap {
  animation: p4C2DkmActiveSurge 1.6s ease-in-out forwards;
  transform-origin: 80px 220px;
}
@keyframes p4C2DkmSparkle {
  0% { opacity: 0; transform: scale(0.3); }
  25% { opacity: 1; transform: scale(1.8); }
  50% { opacity: 0.8; transform: scale(1.4); }
  100% { opacity: 0; transform: scale(0.5); }
}
body.p4.night.holiday-mode:not(.relaxed-mode) .p4-c2-hol-neon-dkm.active .dkm-sparkle {
  animation: p4C2DkmSparkle 1.6s ease-out forwards;
}

/* DECO 1, 2, 3 ENDING SETTLE RECOVERY ANIMATIONS */
@keyframes p4C2CocktailSettle {
  0% { transform: scale(1.02) rotate(0deg); }
  50% { transform: scale(0.97) rotate(-2deg); }
  100% { transform: scale(1) rotate(0deg); }
}
body.p4.night.holiday-mode:not(.relaxed-mode) .p4-c2-hol-neon-cocktail.ending .cocktail-click-wrap {
  animation: p4C2CocktailSettle 0.6s ease-out forwards;
  transform-origin: 75px 120px;
}

@keyframes p4C2StarSettle {
  0% { transform: scale(1.02) rotate(0deg); }
  50% { transform: scale(0.97) rotate(-3deg); }
  100% { transform: scale(1) rotate(0deg); }
}
body.p4.night.holiday-mode:not(.relaxed-mode) .p4-c2-hol-star-garland.ending .star-click-wrap {
  animation: p4C2StarSettle 0.8s ease-out forwards;
  transform-origin: 35px 70px;
}

@keyframes p4C2DkmSettle {
  0% { transform: scale(1.02); }
  50% { transform: scale(0.98); }
  100% { transform: scale(1); }
}
body.p4.night.holiday-mode:not(.relaxed-mode) .p4-c2-hol-neon-dkm.ending .dkm-click-wrap {
  animation: p4C2DkmSettle 0.6s ease-out forwards;
  transform-origin: 80px 220px;
}

/* Spotlight scan left */
@keyframes p4C2SpotlightScanLeft {
  0%, 100% { transform: rotate(0deg); }
  50% { transform: rotate(-8deg); }
}
body.p4.night.holiday-mode:not(.relaxed-mode) .p4-c2-hol-spotlight-left .spotlight-standby-wrap {
  animation: p4C2SpotlightScanLeft 7s infinite ease-in-out;
  transform-origin: 20px 320px;
}
body.p4.night.holiday-mode:not(.relaxed-mode) .p4-c2-hol-spotlight-left .spotlight-lens-glow {
  filter: drop-shadow(0 0 10px #eab308);
}

/* Spotlight Click Active */
@keyframes p4C2SpotlightActiveSpin {
  0% { transform: rotate(0deg) scale(1); }
  15% { transform: rotate(-25deg) scale(1.08); filter: drop-shadow(0 0 20px #eab308); }
  35% { transform: rotate(15deg) scale(1.08); filter: drop-shadow(0 0 20px #eab308); }
  55% { transform: rotate(-15deg) scale(1.04); }
  75% { transform: rotate(5deg) scale(1.02); }
  100% { transform: rotate(0deg) scale(1); }
}
@keyframes p4C2LaserConeActive {
  0%, 100% { opacity: 0; transform: scaleY(0.8); }
  20%, 80% { opacity: 0.35; transform: scaleY(1.1); filter: drop-shadow(0 0 12px #00ffff); }
}
body.p4.night.holiday-mode:not(.relaxed-mode) .p4-c2-hol-spotlight-left.active .spotlight-click-wrap {
  animation: p4C2SpotlightActiveSpin 1.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
  transform-origin: 20px 320px;
}
body.p4.night.holiday-mode:not(.relaxed-mode) .p4-c2-hol-spotlight-left.active .spotlight-beam-left-extra {
  animation: p4C2LaserConeActive 1.6s ease-in-out forwards;
  transform-origin: 28px 326px;
}

/* Spotlight Settle */
@keyframes p4C2SpotlightSettle {
  0% { transform: scale(1.02) rotate(0deg); }
  50% { transform: scale(0.97) rotate(-3deg); }
  100% { transform: scale(1) rotate(0deg); }
}
body.p4.night.holiday-mode:not(.relaxed-mode) .p4-c2-hol-spotlight-left.ending .spotlight-click-wrap {
  animation: p4C2SpotlightSettle 0.6s ease-out forwards;
  transform-origin: 20px 320px;
}

/* Equalizer Bars Custom Transform Origins for audio bounce */
body.p4.night.holiday-mode:not(.relaxed-mode) .p4-c2-hol-neon-waves rect {
  filter: drop-shadow(0 0 3px currentColor);
}
body.p4.night.holiday-mode:not(.relaxed-mode) .p4-c2-hol-neon-waves .b1 { transform-origin: 57px 435px; }
body.p4.night.holiday-mode:not(.relaxed-mode) .p4-c2-hol-neon-waves .b2 { transform-origin: 65px 435px; }
body.p4.night.holiday-mode:not(.relaxed-mode) .p4-c2-hol-neon-waves .b3 { transform-origin: 73px 435px; }
body.p4.night.holiday-mode:not(.relaxed-mode) .p4-c2-hol-neon-waves .b4 { transform-origin: 81px 435px; }
body.p4.night.holiday-mode:not(.relaxed-mode) .p4-c2-hol-neon-waves .b5 { transform-origin: 89px 435px; }

/* Equalizer Click Active */
@keyframes p4C2EqualizerFrenzy {
  0%, 100% { transform: scale(1); filter: drop-shadow(0 0 3px currentColor); }
  50% { transform: scale(1.15); filter: drop-shadow(0 0 10px currentColor) drop-shadow(0 0 18px currentColor); }
}
@keyframes p4C2EqualizerBounceFrenzy {
  0%, 100% { transform: scaleY(0.2); }
  50% { transform: scaleY(1.8); }
}
body.p4.night.holiday-mode:not(.relaxed-mode) .p4-c2-hol-neon-waves.active .waves-click-wrap {
  animation: p4C2EqualizerFrenzy 2.0s ease-in-out forwards;
  transform-origin: 71px 380px;
}
body.p4.night.holiday-mode:not(.relaxed-mode) .p4-c2-hol-neon-waves.active rect {
  animation: p4C2EqualizerBounceFrenzy 0.6s infinite ease-in-out !important;
}

/* Equalizer Settle */
@keyframes p4C2EqualizerSettle {
  0% { transform: scale(1.15); }
  100% { transform: scale(1); }
}
body.p4.night.holiday-mode:not(.relaxed-mode) .p4-c2-hol-neon-waves.ending .waves-click-wrap {
  animation: p4C2EqualizerSettle 0.8s cubic-bezier(0.25, 0.8, 0.25, 1) forwards;
  transform-origin: 71px 380px;
}

/* Cooler LED pulse and floating bubbles */
@keyframes p4C2CoolerPulse {
  0%, 100% { filter: drop-shadow(0 0 3px #00ffff); }
  50% { filter: drop-shadow(0 0 8px #00ffff); }
}
body.p4.night.holiday-mode:not(.relaxed-mode) .p4-c2-hol-led-cooler .cooler-glow {
  animation: p4C2CoolerPulse 3s infinite ease-in-out;
}
@keyframes p4C2BubbleFloat {
  0% { transform: translateY(0) scale(1); opacity: 0.8; }
  100% { transform: translateY(-40px) scale(0.6); opacity: 0; }
}
body.p4.night.holiday-mode:not(.relaxed-mode) .p4-c2-hol-led-cooler .bubble-float-1 { animation: p4C2BubbleFloat 3.2s infinite linear; }
body.p4.night.holiday-mode:not(.relaxed-mode) .p4-c2-hol-led-cooler .bubble-float-2 { animation: p4C2BubbleFloat 2.6s infinite linear 0.7s; }
body.p4.night.holiday-mode:not(.relaxed-mode) .p4-c2-hol-led-cooler .bubble-float-3 { animation: p4C2BubbleFloat 3.8s infinite linear 1.5s; }

/* Cooler Click Active */
@keyframes p4C2CoolerVibe {
  0%, 100% { transform: translate(0, 0) scale(1); }
  10%, 30%, 50%, 70%, 90% { transform: translate(-1.5px, 0.5px) scale(1.04); filter: drop-shadow(0 0 12px #00ffff); }
  20%, 40%, 60%, 80% { transform: translate(1.5px, -0.5px) scale(1.04); filter: drop-shadow(0 0 12px #ff00ff); }
}
@keyframes p4C2CorkPopActive {
  0% { transform: translate(0, 0) scaleY(1); opacity: 1; }
  15% { transform: translate(-8px, -25px) scaleY(0.7) rotate(-30deg); opacity: 0.8; }
  30% { transform: translate(-12px, -35px) scaleY(0.5) rotate(-60deg); opacity: 0; }
  80% { transform: translate(-12px, -35px) opacity: 0; }
  100% { transform: translate(0, 0) scaleY(1); opacity: 1; }
}
@keyframes p4C2BubblesActive {
  0% { opacity: 0; transform: translateY(0) scale(0.6); }
  20% { opacity: 1; }
  80% { opacity: 0.8; }
  100% { opacity: 0; transform: translateY(-70px) scale(1.4); }
}
body.p4.night.holiday-mode:not(.relaxed-mode) .p4-c2-hol-led-cooler.active .cooler-click-wrap {
  animation: p4C2CoolerVibe 1.8s ease-in-out forwards;
  transform-origin: 130px 440px;
}
body.p4.night.holiday-mode:not(.relaxed-mode) .p4-c2-hol-led-cooler.active .cooler-cork {
  animation: p4C2CorkPopActive 1.8s ease-out forwards;
  transform-origin: 131px 429px;
}
body.p4.night.holiday-mode:not(.relaxed-mode) .p4-c2-hol-led-cooler.active .cooler-bubbles-group {
  animation: p4C2BubblesActive 1.8s infinite linear;
  transform-origin: 130px 420px;
}

/* Cooler Settle */
@keyframes p4C2CoolerSettle {
  0% { transform: scale(1.04); }
  100% { transform: scale(1); }
}
body.p4.night.holiday-mode:not(.relaxed-mode) .p4-c2-hol-led-cooler.ending .cooler-click-wrap {
  animation: p4C2CoolerSettle 0.6s ease-out forwards;
  transform-origin: 130px 440px;
}

/* DECO 7: Garland Standby, Active, and Settle */
@keyframes p4C2GarlandSway {
  0%, 100% { transform: rotate(0deg); }
  50% { transform: rotate(1.2deg); }
}
body.p4.night.holiday-mode:not(.relaxed-mode) .p4-c2-hol-neon-garland .garland-standby-wrap {
  animation: p4C2GarlandSway 8s infinite ease-in-out;
  transform-origin: 860px 40px;
}
body.p4.night.holiday-mode:not(.relaxed-mode) .pennant-glow-p { filter: drop-shadow(0 0 4px #ff007f); }
body.p4.night.holiday-mode:not(.relaxed-mode) .pennant-glow-c { filter: drop-shadow(0 0 4px #00ffff); }
body.p4.night.holiday-mode:not(.relaxed-mode) .pennant-glow-y { filter: drop-shadow(0 0 4px #eab308); }
body.p4.night.holiday-mode:not(.relaxed-mode) .pennant-glow-g { filter: drop-shadow(0 0 4px #39ff14); }
body.p4.night.holiday-mode:not(.relaxed-mode) .pennant-glow-o { filter: drop-shadow(0 0 4px #ff5e00); }
body.p4.night.holiday-mode:not(.relaxed-mode) .pennant-glow-m { filter: drop-shadow(0 0 4px #ff00ff); }

@keyframes p4C2GarlandActiveWave {
  0%, 100% { transform: rotate(0deg) scale(1); }
  15% { transform: rotate(-8deg) scale(1.05); }
  30% { transform: rotate(8deg) scale(1.05); }
  45% { transform: rotate(-5deg) scale(1.02); }
  60% { transform: rotate(5deg) scale(1.02); }
  75% { transform: rotate(-2deg) scale(1); }
}
body.p4.night.holiday-mode:not(.relaxed-mode) .p4-c2-hol-neon-garland.active .garland-click-wrap {
  animation: p4C2GarlandActiveWave 1.6s ease-in-out forwards;
  transform-origin: 860px 40px;
}
body.p4.night.holiday-mode:not(.relaxed-mode) .p4-c2-hol-neon-garland.active polygon {
  animation: p4C2NeonFlickerPink 0.2s infinite alternate;
}

@keyframes p4C2GarlandSettle {
  0% { transform: scale(1.02) rotate(0deg); }
  50% { transform: scale(0.98) rotate(-1.5deg); }
  100% { transform: scale(1) rotate(0deg); }
}
body.p4.night.holiday-mode:not(.relaxed-mode) .p4-c2-hol-neon-garland.ending .garland-click-wrap {
  animation: p4C2GarlandSettle 0.6s ease-out forwards;
  transform-origin: 860px 40px;
}

/* DECO 8: Hanging Laser Standby, Active, and Settle */
@keyframes p4C2HangingLaserSweep {
  0%, 100% { transform: rotate(0deg); }
  50% { transform: rotate(10deg); }
}
body.p4.night.holiday-mode:not(.relaxed-mode) .p4-c2-hol-hanging-laser .laser-standby-wrap {
  animation: p4C2HangingLaserSweep 6s infinite ease-in-out;
  transform-origin: 840px 0px;
}
@keyframes p4C2LaserLinePulse {
  0%, 100% { opacity: 0.3; stroke-width: 1; }
  50% { opacity: 0.9; stroke-width: 2.2; filter: drop-shadow(0 0 4px #00ffff); }
}
body.p4.night.holiday-mode:not(.relaxed-mode) .laser-beam-line {
  animation: p4C2LaserLinePulse 2s infinite ease-in-out;
  transform-origin: 840px 37px;
}
body.p4.night.holiday-mode:not(.relaxed-mode) .laser-eye-glow {
  filter: drop-shadow(0 0 6px #00ffff);
}

@keyframes p4C2LaserActiveArc {
  0% { transform: rotate(0deg); }
  10%, 30%, 50%, 70%, 90% { transform: rotate(-25deg); }
  20%, 40%, 60%, 80% { transform: rotate(25deg); }
  100% { transform: rotate(0deg); }
}
@keyframes p4C2LaserExtraBeamsSweep {
  0% { opacity: 0; transform: scaleY(0.7); }
  20%, 80% { opacity: 0.7; transform: scaleY(1.2); filter: drop-shadow(0 0 8px #ff00ff) drop-shadow(0 0 8px #39ff14); }
  100% { opacity: 0; transform: scaleY(0.8); }
}
body.p4.night.holiday-mode:not(.relaxed-mode) .p4-c2-hol-hanging-laser.active .laser-click-wrap {
  animation: p4C2LaserActiveArc 1.8s ease-in-out forwards;
  transform-origin: 840px 37px;
}
body.p4.night.holiday-mode:not(.relaxed-mode) .p4-c2-hol-hanging-laser.active .laser-extra-beams {
  animation: p4C2LaserExtraBeamsSweep 1.8s ease-in-out forwards;
  transform-origin: 840px 37px;
}

@keyframes p4C2LaserSettle {
  0% { transform: rotate(5deg); }
  100% { transform: rotate(0deg); }
}
body.p4.night.holiday-mode:not(.relaxed-mode) .p4-c2-hol-hanging-laser.ending .laser-click-wrap {
  animation: p4C2LaserSettle 0.6s ease-out forwards;
  transform-origin: 840px 37px;
}

/* DECO 9: Firework Burst Standby, Active, and Settle */
@keyframes p4C2FireworkSparkle {
  0%, 100% { opacity: 0.3; transform: scale(0.9); }
  50% { opacity: 1; transform: scale(1.05); }
}
body.p4.night.holiday-mode:not(.relaxed-mode) .p4-c2-hol-firework-burst .firework-standby-wrap {
  animation: p4C2FireworkSparkle 3s infinite ease-in-out;
  transform-origin: 780px 110px;
}

@keyframes p4C2FireworkExplosion {
  0% { transform: scale(1); filter: drop-shadow(0 0 2px #fff); }
  15% { transform: scale(1.6); filter: drop-shadow(0 0 15px #fff) drop-shadow(0 0 25px #ff00ff); }
  50% { transform: scale(1.4); }
  100% { transform: scale(1); }
}
@keyframes p4C2FireworkShockwavePulse {
  0% { opacity: 0; r: 8px; }
  10% { opacity: 0.8; }
  80% { opacity: 0.4; }
  100% { opacity: 0; r: 35px; }
}
@keyframes p4C2FireworkOuterSparksActive {
  0% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.4); opacity: 0.8; }
  100% { transform: scale(1); opacity: 1; }
}
body.p4.night.holiday-mode:not(.relaxed-mode) .p4-c2-hol-firework-burst.active .firework-click-wrap {
  animation: p4C2FireworkExplosion 1.5s cubic-bezier(0.1, 0.8, 0.2, 1) forwards;
  transform-origin: 780px 110px;
}
body.p4.night.holiday-mode:not(.relaxed-mode) .p4-c2-hol-firework-burst.active .firework-shockwave {
  animation: p4C2FireworkShockwavePulse 1.5s ease-out forwards;
}
body.p4.night.holiday-mode:not(.relaxed-mode) .p4-c2-hol-firework-burst.active .firework-outer-sparks {
  animation: p4C2FireworkOuterSparksActive 1.5s ease-out forwards;
  transform-origin: 780px 110px;
}

@keyframes p4C2FireworkSettle {
  0% { transform: scale(1.1); }
  100% { transform: scale(1); }
}
body.p4.night.holiday-mode:not(.relaxed-mode) .p4-c2-hol-firework-burst.ending .firework-click-wrap {
  animation: p4C2FireworkSettle 0.5s ease-out forwards;
  transform-origin: 780px 110px;
}

/* DECO 10: Floating Music Notes Standby, Active, and Settle */
@keyframes p4C2NoteFloat {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-10px) rotate(5deg); }
}
body.p4.night.holiday-mode:not(.relaxed-mode) .p4-c2-hol-neon-notes .music-note {
  animation: p4C2NoteFloat 5s infinite ease-in-out;
}
body.p4.night.holiday-mode:not(.relaxed-mode) .p4-c2-hol-neon-notes .music-note.n1 {
  animation-delay: 0s;
  transform-origin: 916px 90px;
  filter: drop-shadow(0 0 4px #ff007f);
}
body.p4.night.holiday-mode:not(.relaxed-mode) .p4-c2-hol-neon-notes .music-note.n2 {
  animation-delay: 2.5s;
  transform-origin: 949px 102px;
  filter: drop-shadow(0 0 4px #00ffff);
}

@keyframes p4C2NotesActiveDance {
  0% { transform: translate(0, 0) scale(1) rotate(0deg); }
  20% { transform: translate(-3px, -15px) scale(1.15) rotate(-15deg); }
  40% { transform: translate(4px, -25px) scale(1.15) rotate(15deg); }
  60% { transform: translate(-2px, -30px) scale(1.1) rotate(-10deg); }
  80% { transform: translate(2px, -15px) scale(1.05) rotate(5deg); }
  100% { transform: translate(0, 0) scale(1) rotate(0deg); }
}
@keyframes p4C2ExtraNoteActive {
  0% { opacity: 0; transform: translate(0, 10px) scale(0.5); }
  30% { opacity: 0.9; transform: translate(-10px, -20px) scale(1.2) rotate(-20deg); }
  70% { opacity: 0.7; transform: translate(-15px, -35px) scale(1.1) rotate(10deg); }
  100% { opacity: 0; transform: translate(-20px, -45px) scale(0.6); }
}
body.p4.night.holiday-mode:not(.relaxed-mode) .p4-c2-hol-neon-notes.active .notes-click-wrap {
  animation: p4C2NotesActiveDance 1.6s ease-in-out forwards;
  transform-origin: 930px 95px;
}
body.p4.night.holiday-mode:not(.relaxed-mode) .p4-c2-hol-neon-notes.active .music-note.n3 {
  animation: p4C2ExtraNoteActive 1.6s ease-out forwards;
  transform-origin: 930px 130px;
}

@keyframes p4C2NotesSettle {
  0% { transform: scale(1.1); }
  100% { transform: scale(1); }
}
body.p4.night.holiday-mode:not(.relaxed-mode) .p4-c2-hol-neon-notes.ending .notes-click-wrap {
  animation: p4C2NotesSettle 0.6s ease-out forwards;
  transform-origin: 930px 95px;
}

/* DECO 11: Neon Banner Standby, Active, and Settle */
@keyframes p4C2BannerSway {
  0%, 100% { transform: rotate(0deg); }
  50% { transform: rotate(-1.5deg); }
}
@keyframes p4C2StreamerSway {
  0%, 100% { transform: rotate(0deg); }
  50% { transform: rotate(15deg); }
}
body.p4.night.holiday-mode:not(.relaxed-mode) .p4-c2-hol-neon-banner .banner-standby-wrap {
  animation: p4C2BannerSway 7s infinite ease-in-out;
  transform-origin: 870px 160px;
}
body.p4.night.holiday-mode:not(.relaxed-mode) .p4-c2-hol-neon-banner .bunting-streamer-1 {
  animation: p4C2StreamerSway 4.5s infinite ease-in-out;
  transform-origin: 825px 164px;
}
body.p4.night.holiday-mode:not(.relaxed-mode) .p4-c2-hol-neon-banner .bunting-streamer-2 {
  animation: p4C2StreamerSway 4s infinite ease-in-out 1s;
  transform-origin: 915px 164px;
}
body.p4.night.holiday-mode:not(.relaxed-mode) .banner-neon-edge {
  filter: drop-shadow(0 0 3px #ff00ff);
}
body.p4.night.holiday-mode:not(.relaxed-mode) .banner-text-neon {
  filter: drop-shadow(0 0 4px #00ffcc);
}

@keyframes p4C2BannerActivePulse {
  0%, 100% { transform: scale(1); }
  15% { transform: scale(1.12); filter: drop-shadow(0 0 15px #ff00ff) drop-shadow(0 0 25px #00ffcc); }
  45% { transform: scale(1.08); }
  75% { transform: scale(1.03); }
}
@keyframes p4C2StreamersActiveSwing {
  0%, 100% { transform: rotate(0deg); }
  20%, 60% { transform: rotate(35deg) scaleY(1.15); filter: drop-shadow(0 0 8px currentColor); }
  40%, 80% { transform: rotate(-35deg) scaleY(1.15); filter: drop-shadow(0 0 8px currentColor); }
}
body.p4.night.holiday-mode:not(.relaxed-mode) .p4-c2-hol-neon-banner.active .banner-click-wrap {
  animation: p4C2BannerActivePulse 1.8s ease-in-out forwards;
  transform-origin: 870px 160px;
}
body.p4.night.holiday-mode:not(.relaxed-mode) .p4-c2-hol-neon-banner.active .bunting-streamer-1 {
  animation: p4C2StreamersActiveSwing 1.8s ease-in-out forwards;
  transform-origin: 825px 164px;
}
body.p4.night.holiday-mode:not(.relaxed-mode) .p4-c2-hol-neon-banner.active .bunting-streamer-2 {
  animation: p4C2StreamersActiveSwing 1.8s ease-in-out forwards;
  transform-origin: 915px 164px;
}
body.p4.night.holiday-mode:not(.relaxed-mode) .p4-c2-hol-neon-banner.active .banner-text-neon {
  animation: p4C2NeonFlickerCyan 0.2s infinite alternate;
}

@keyframes p4C2BannerSettle {
  0% { transform: scale(1.08); }
  100% { transform: scale(1); }
}
body.p4.night.holiday-mode:not(.relaxed-mode) .p4-c2-hol-neon-banner.ending .banner-click-wrap {
  animation: p4C2BannerSettle 0.6s ease-out forwards;
  transform-origin: 870px 160px;
}

/* DECO 12: Party Popper Standby, Active, and Settle */
@keyframes p4C2PopperSway {
  0%, 100% { transform: skewX(0deg) rotate(0deg); }
  50% { transform: skewX(10deg) rotate(-5deg); }
}
body.p4.night.holiday-mode:not(.relaxed-mode) .p4-c2-hol-party-popper .popper-standby-wrap {
  animation: p4C2PopperSway 5s infinite ease-in-out;
  transform-origin: 1130px 90px;
}
body.p4.night.holiday-mode:not(.relaxed-mode) .p4-c2-hol-party-popper .popper-streamer.s1 { filter: drop-shadow(0 0 3px #ff00ff); }
body.p4.night.holiday-mode:not(.relaxed-mode) .p4-c2-hol-party-popper .popper-streamer.s2 { filter: drop-shadow(0 0 3px #00ffff); }
body.p4.night.holiday-mode:not(.relaxed-mode) .p4-c2-hol-party-popper .popper-streamer.s3 { filter: drop-shadow(0 0 3px #eab308); }

@keyframes p4C2PopperActiveKick {
  0% { transform: scale(1) translate(0, 0); }
  15% { transform: scale(0.9) translate(6px, 8px) rotate(10deg); }
  30% { transform: scale(1.05) translate(-4px, -5px) rotate(-5deg); }
  45% { transform: scale(1.02) translate(1px, 2px); }
  100% { transform: scale(1) translate(0, 0); }
}
@keyframes p4C2ConfettiExplosion {
  0% { opacity: 0; transform: scale(0.2) translate(0, 0); }
  15% { opacity: 1; }
  80% { opacity: 0.8; }
  100% { opacity: 0; transform: scale(1.5) translate(-80px, -90px); }
}
body.p4.night.holiday-mode:not(.relaxed-mode) .p4-c2-hol-party-popper.active .popper-click-wrap {
  animation: p4C2PopperActiveKick 1.5s ease-in-out forwards;
  transform-origin: 1130px 90px;
}
body.p4.night.holiday-mode:not(.relaxed-mode) .p4-c2-hol-party-popper.active .popper-confetti-burst {
  animation: p4C2ConfettiExplosion 1.5s cubic-bezier(0.1, 0.8, 0.3, 1) forwards;
  transform-origin: 1125px 75px;
}

@keyframes p4C2PopperSettle {
  0% { transform: scale(0.95); }
  100% { transform: scale(1); }
}
body.p4.night.holiday-mode:not(.relaxed-mode) .p4-c2-hol-party-popper.ending .popper-click-wrap {
  animation: p4C2PopperSettle 0.5s ease-out forwards;
  transform-origin: 1130px 90px;
}

/* DECO 13: Spiral Ribbon Streamers Standby, Active, and Settle */
@keyframes p4C2WallStreamerSway {
  0%, 100% { transform: rotate(0deg); }
  50% { transform: rotate(3deg); }
}
body.p4.night.holiday-mode:not(.relaxed-mode) .p4-c2-hol-neon-streamers .streamers-standby-wrap {
  animation: p4C2WallStreamerSway 8s infinite ease-in-out;
  transform-origin: 1175px 0px;
}
body.p4.night.holiday-mode:not(.relaxed-mode) .p4-c2-hol-neon-streamers .streamer-sway-1 { filter: drop-shadow(0 0 4px #39ff14); }
body.p4.night.holiday-mode:not(.relaxed-mode) .p4-c2-hol-neon-streamers .streamer-sway-2 { filter: drop-shadow(0 0 4px #ff00ff); }

@keyframes p4C2StreamersActiveWiggle {
  0%, 100% { transform: rotate(0deg) scaleX(1); }
  20%, 60% { transform: rotate(-15deg) scaleX(1.3); filter: drop-shadow(0 0 8px #ff00ff); }
  40%, 80% { transform: rotate(15deg) scaleX(1.3); filter: drop-shadow(0 0 8px #39ff14); }
}
body.p4.night.holiday-mode:not(.relaxed-mode) .p4-c2-hol-neon-streamers.active .streamers-click-wrap {
  animation: p4C2StreamersActiveWiggle 1.6s ease-in-out forwards;
  transform-origin: 1175px 0px;
}

@keyframes p4C2StreamersSettle {
  0% { transform: rotate(5deg); }
  100% { transform: rotate(0deg); }
}
body.p4.night.holiday-mode:not(.relaxed-mode) .p4-c2-hol-neon-streamers.ending .streamers-click-wrap {
  animation: p4C2StreamersSettle 0.6s ease-out forwards;
  transform-origin: 1175px 0px;
}

/* DECO 14: DJ Headphones Standby, Active, and Settle */
@keyframes p4C2HeadphonePulse {
  0%, 100% { opacity: 0.3; transform: scale(0.9); }
  50% { opacity: 1; transform: scale(1.1); }
}
body.p4.night.holiday-mode:not(.relaxed-mode) .p4-c2-hol-neon-headphones .headphone-wave {
  animation: p4C2HeadphonePulse 2.5s infinite ease-in-out;
  filter: drop-shadow(0 0 3px #eab308);
}
body.p4.night.holiday-mode:not(.relaxed-mode) .p4-c2-hol-neon-headphones .headphone-wave.w1 {
  transform-origin: 1055px 296px;
}
body.p4.night.holiday-mode:not(.relaxed-mode) .p4-c2-hol-neon-headphones .headphone-wave.w2 {
  transform-origin: 1128px 296px;
  animation-delay: 1.25s;
}

@keyframes p4C2HeadphonesActivePulse {
  0%, 100% { transform: scale(1) rotate(0deg); }
  15% { transform: scale(1.15) rotate(-5deg); filter: drop-shadow(0 0 10px #00ffff); }
  30% { transform: scale(1.15) rotate(5deg); filter: drop-shadow(0 0 10px #ff00ff); }
  45% { transform: scale(1.08) rotate(-3deg); }
  60% { transform: scale(1.05) rotate(2deg); }
}
@keyframes p4C2WavesExtraPulse {
  0% { opacity: 0; transform: scale(0.6); }
  20% { opacity: 0.9; }
  80% { opacity: 0.5; }
  100% { opacity: 0; transform: scale(1.6); }
}
body.p4.night.holiday-mode:not(.relaxed-mode) .p4-c2-hol-neon-headphones.active .headphones-click-wrap {
  animation: p4C2HeadphonesActivePulse 1.6s ease-in-out forwards;
  transform-origin: 1095px 290px;
}
body.p4.night.holiday-mode:not(.relaxed-mode) .p4-c2-hol-neon-headphones.active .headphone-wave-extra {
  animation: p4C2WavesExtraPulse 1.6s ease-out forwards;
}
body.p4.night.holiday-mode:not(.relaxed-mode) .p4-c2-hol-neon-headphones.active .headphone-wave-extra.ex1 {
  transform-origin: 1045px 290px;
}
body.p4.night.holiday-mode:not(.relaxed-mode) .p4-c2-hol-neon-headphones.active .headphone-wave-extra.ex2 {
  transform-origin: 1138px 290px;
}

@keyframes p4C2HeadphonesSettle {
  0% { transform: scale(1.08); }
  100% { transform: scale(1); }
}
body.p4.night.holiday-mode:not(.relaxed-mode) .p4-c2-hol-neon-headphones.ending .headphones-click-wrap {
  animation: p4C2HeadphonesSettle 0.6s ease-out forwards;
  transform-origin: 1095px 290px;
}

/* DECO 15: Glow Stick Jar Standby, Active, and Settle */
@keyframes p4C2StickPulse {
  0%, 100% { filter: drop-shadow(0 0 2px currentColor); }
  50% { filter: drop-shadow(0 0 8px currentColor); }
}
body.p4.night.holiday-mode:not(.relaxed-mode) .p4-c2-hol-glowstick-jar line {
  animation: p4C2StickPulse 3s infinite ease-in-out;
}
body.p4.night.holiday-mode:not(.relaxed-mode) .p4-c2-hol-glowstick-jar .stick-glow-g { color: #39ff14; }
body.p4.night.holiday-mode:not(.relaxed-mode) .p4-c2-hol-glowstick-jar .stick-glow-m { color: #ff00ff; animation-delay: 1s; }
body.p4.night.holiday-mode:not(.relaxed-mode) .p4-c2-hol-glowstick-jar .stick-glow-c { color: #00ffff; animation-delay: 2s; }

@keyframes p4C2JarVibrate {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  10%, 30%, 50%, 70%, 90% { transform: translate(-2px, -1px) rotate(-3deg); }
  20%, 40%, 60%, 80% { transform: translate(2px, 1px) rotate(3deg); }
}
@keyframes p4C2GlowsticksActiveFlare {
  0%, 100% { filter: drop-shadow(0 0 4px currentColor); }
  50% { filter: drop-shadow(0 0 16px currentColor); stroke-width: 4px; }
}
@keyframes p4C2JarSparksRise {
  0% { opacity: 0; transform: translateY(5px) scale(0.4); }
  20% { opacity: 0.95; }
  85% { opacity: 0.6; }
  100% { opacity: 0; transform: translateY(-25px) scale(1.3); }
}
body.p4.night.holiday-mode:not(.relaxed-mode) .p4-c2-hol-glowstick-jar.active .jar-click-wrap {
  animation: p4C2JarVibrate 1.8s ease-in-out forwards;
  transform-origin: 1140px 440px;
}
body.p4.night.holiday-mode:not(.relaxed-mode) .p4-c2-hol-glowstick-jar.active line {
  animation: p4C2GlowsticksActiveFlare 1.8s ease-in-out forwards;
}
body.p4.night.holiday-mode:not(.relaxed-mode) .p4-c2-hol-glowstick-jar.active .jar-sparks {
  animation: p4C2JarSparksRise 1.8s cubic-bezier(0.1, 0.8, 0.3, 1) forwards;
  transform-origin: 1140px 420px;
}

@keyframes p4C2JarSettle {
  0% { transform: rotate(3deg); }
  100% { transform: rotate(0deg); }
}
body.p4.night.holiday-mode:not(.relaxed-mode) .p4-c2-hol-glowstick-jar.ending .jar-click-wrap {
  animation: p4C2JarSettle 0.6s ease-out forwards;
  transform-origin: 1140px 440px;
}


/* Holiday Sky overrides */
body.p4.day.holiday-mode rect[fill="url(#p4C2DaySky)"] {
  fill: url(#p4C2DayHolidaySky) !important;
}
body.p4.night.holiday-mode rect[fill="url(#p4C2NightSky)"] {
  fill: url(#p4C2NightHolidaySky) !important;
}


/* ==========================================================================
   20 SUMMER VACATION INTERACTIVE WIDGETS (Day Holiday Mode Only)
   ========================================================================== */

/* Origins for precise coordinate transitions */
.p4-c2-hol-palm-left { transform-origin: 35px 490px; }
.p4-c2-hol-palm-right { transform-origin: 1165px 490px; }
.p4-c2-hol-cloud1,
.p4-c2-hol-cloud1 .cloud-drift-wrap,
.p4-c2-hol-cloud1 .cloud-click-wrap { transform-origin: 270px 65px; }
.p4-c2-hol-cloud2,
.p4-c2-hol-cloud2 .cloud-drift-wrap,
.p4-c2-hol-cloud2 .cloud-click-wrap { transform-origin: 750px 45px; }
.p4-c2-hol-cloud3,
.p4-c2-hol-cloud3 .cloud-drift-wrap,
.p4-c2-hol-cloud3 .cloud-click-wrap { transform-origin: 540px 75px; }
.p4-c2-hol-gull1 { transform-origin: 310px 146px; }
.p4-c2-hol-gull2 { transform-origin: 860px 106px; }
.p4-c2-hol-gull3 { transform-origin: 610px 126px; }
.p4-c2-hol-sun,
.p4-c2-hol-sun .sun-standby-wrap,
.p4-c2-hol-sun .sun-click-wrap,
.p4-c2-hol-sun .sun-beams-group,
.p4-c2-hol-sun .sun-corona,
.p4-c2-hol-sun .sun-core,
.p4-c2-hol-sun .sun-flare {
  transform-origin: 950px 200px;
}
.p4-c2-hol-coconut { transform-origin: 800px 475px; }
.p4-c2-hol-beachball { transform-origin: 920px 510px; }
.p4-c2-hol-flower-woman { transform-origin: 754px 260px; }
.p4-c2-hol-hat-left,
.p4-c2-hol-hat-left .hat-standby-wrap,
.p4-c2-hol-hat-left .hat-click-wrap,
.p4-c2-hol-hat-left .hat-body-group {
  transform-origin: 472px 275px;
}
.p4-c2-hol-hat-left {
  transform: scale(0.8);
}
body.p4.day.holiday-mode .p4-c2-hol-interactive.p4-c2-hol-hat-left:hover {
  transform: scale(0.824);
}
.p4-c2-hol-glasses-right { transform-origin: 612px 281px; }
.p4-c2-hol-sailboat { transform-origin: 180px 318px; }
.p4-c2-hol-windchime {
  transform-origin: 0px -42px;
}
.p4-c2-hol-windchime .chime-standby-wrap,
.p4-c2-hol-windchime .chime-click-wrap,
.p4-c2-hol-windchime .chime-tubes-group {
  transform-origin: 0px -42px;
}
.p4-c2-hol-windchime .chime-striker-group {
  transform-origin: 0px -37px;
}
.p4-c2-hol-windchime .chime-sail {
  transform-origin: 0px 21px;
}
.p4-c2-hol-seashell { transform-origin: 1080px 520px; }
.p4-c2-hol-crab { transform-origin: 150px 540px; }
.p4-c2-hol-bottle { transform-origin: 250px 530px; }

/* Enable cursor pointer and hover pointer events for interactive holiday items */
body.p4.day.holiday-mode .p4-c2-hol-interactive {
  cursor: pointer !important;
  pointer-events: auto !important;
  transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), filter 0.4s ease;
}

/* Standby Glow on Hover */
body.p4.day.holiday-mode .p4-c2-hol-interactive:hover {
  filter: drop-shadow(0 0 6px rgba(254, 240, 138, 0.7));
  transform: scale(1.03);
}

/* 1. Left Palm Tree active click: sways violently, coconut falls */
@keyframes p4C2PalmSwayClickLeft {
  0% { transform: rotate(0deg) skewX(0deg); }
  15% { transform: rotate(-9deg) skewX(-3deg); }
  35% { transform: rotate(7deg) skewX(2.5deg); }
  55% { transform: rotate(-4deg) skewX(-1.5deg); }
  75% { transform: rotate(2deg) skewX(0.8deg); }
  90% { transform: rotate(-0.5deg) skewX(-0.2deg); }
  100% { transform: rotate(0deg) skewX(0deg); }
}
.p4-c2-hol-palm-left.active {
  animation: p4C2PalmSwayClickLeft 1.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}
@keyframes p4C2CoconutFallL {
  0% { transform: translate(0, 0) scale(1); opacity: 1; }
  5% { transform: translate(-1px, 0) rotate(-3deg); }
  10% { transform: translate(1px, 0) rotate(3deg); }
  15% { transform: translate(-1px, 0) rotate(-3deg); }
  20% { transform: translate(0, 0) rotate(0); opacity: 1; }
  45% { transform: translate(40px, 240px) scale(1); }
  55% { transform: translate(60px, 200px) scale(0.95); }
  70% { transform: translate(80px, 245px) scale(1); }
  80% { transform: translate(95px, 225px) scale(0.98); }
  90% { transform: translate(110px, 250px) scale(1); opacity: 1; }
  100% { transform: translate(160px, 252px) scale(1); opacity: 0; }
}
.p4-c2-hol-palm-left.active .p4-c2-falling-coconut-l {
  animation: p4C2CoconutFallL 1.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
  transform-origin: 37px 261px;
}

/* 2. Right Palm Tree active click: sways violently, coconut falls */
@keyframes p4C2PalmSwayClickRight {
  0% { transform: rotate(0deg) skewX(0deg); }
  15% { transform: rotate(9deg) skewX(3deg); }
  35% { transform: rotate(-7deg) skewX(-2.5deg); }
  55% { transform: rotate(4deg) skewX(1.5deg); }
  75% { transform: rotate(-2deg) skewX(-0.8deg); }
  90% { transform: rotate(0.5deg) skewX(0.2deg); }
  100% { transform: rotate(0deg) skewX(0deg); }
}
.p4-c2-hol-palm-right.active {
  animation: p4C2PalmSwayClickRight 1.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}
@keyframes p4C2CoconutFallR {
  0% { transform: translate(0, 0) scale(1); opacity: 1; }
  5% { transform: translate(1px, 0) rotate(3deg); }
  10% { transform: translate(-1px, 0) rotate(-3deg); }
  15% { transform: translate(1px, 0) rotate(3deg); }
  20% { transform: translate(0, 0) rotate(0); opacity: 1; }
  45% { transform: translate(-40px, 240px) scale(1); }
  55% { transform: translate(-60px, 200px) scale(0.95); }
  70% { transform: translate(-80px, 245px) scale(1); }
  80% { transform: translate(-95px, 225px) scale(0.98); }
  90% { transform: translate(-110px, 250px) scale(1); opacity: 1; }
  100% { transform: translate(-160px, 252px) scale(1); opacity: 0; }
}
.p4-c2-hol-palm-right.active .p4-c2-falling-coconut-r {
  animation: p4C2CoconutFallR 1.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
  transform-origin: 1163px 261px;
}

/* 3. Palm Trees ending settle animations */
@keyframes p4C2PalmSettleLeft {
  0% { transform: rotate(0deg) skewX(0deg); }
  25% { transform: rotate(-1.5deg) skewX(-0.6deg); }
  50% { transform: rotate(1deg) skewX(0.4deg); }
  75% { transform: rotate(-0.5deg) skewX(-0.2deg); }
  100% { transform: rotate(0deg) skewX(0deg); }
}
.p4-c2-hol-palm-left.ending {
  animation: p4C2PalmSettleLeft 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.1) forwards;
}
@keyframes p4C2PalmSettleRight {
  0% { transform: rotate(0deg) skewX(0deg); }
  25% { transform: rotate(1.5deg) skewX(0.6deg); }
  50% { transform: rotate(-1deg) skewX(-0.4deg); }
  75% { transform: rotate(0.5deg) skewX(0.2deg); }
  100% { transform: rotate(0deg) skewX(0deg); }
}
.p4-c2-hol-palm-right.ending {
  animation: p4C2PalmSettleRight 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.1) forwards;
}

/* Coconuts smooth regrow (no sudden appearance or teleport) */
@keyframes p4C2CoconutRegrowL {
  0% { transform: scale(0); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}
.p4-c2-hol-palm-left.ending .p4-c2-falling-coconut-l {
  animation: p4C2CoconutRegrowL 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.2) forwards;
  transform-origin: 37px 261px;
}
@keyframes p4C2CoconutRegrowR {
  0% { transform: scale(0); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}
.p4-c2-hol-palm-right.ending .p4-c2-falling-coconut-r {
  animation: p4C2CoconutRegrowR 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.2) forwards;
  transform-origin: 1163px 261px;
}

/* 3. Cloud 1 Click: Wind sweep horizontal slide and scale shift */
@keyframes p4C2CloudActive1 {
  0% { transform: scale(1) translate(0, 0); }
  15% { transform: scale(0.95) translate(-12px, 2px); }
  40% { transform: scale(1.1) translate(65px, -5px); }
  75% { transform: scale(1.05) translate(70px, -4px); }
  100% { transform: scale(1.02) translate(60px, -2px); }
}
.p4-c2-hol-cloud1.active .cloud-click-wrap {
  animation: p4C2CloudActive1 1.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}
@keyframes p4C2CloudSettle1 {
  0% { transform: scale(1.02) translate(60px, -2px); }
  100% { transform: scale(1) translate(0, 0); }
}
.p4-c2-hol-cloud1.ending .cloud-click-wrap {
  animation: p4C2CloudSettle1 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.15) forwards;
}

/* 4. Cloud 2 Click: Swells up and releases raindrop shower */
@keyframes p4C2CloudActive2 {
  0% { transform: scale(1) translate(0, 0); }
  20% { transform: scale(1.15) translate(0, -10px); }
  40% { transform: scale(1.12) translate(4px, -8px); }
  60% { transform: scale(1.15) translate(-2px, -10px); }
  80% { transform: scale(1.1) translate(1px, -5px); }
  100% { transform: scale(1.05) translate(0, -3px); }
}
.p4-c2-hol-cloud2.active .cloud-click-wrap {
  animation: p4C2CloudActive2 1.5s ease-in-out forwards;
}
@keyframes p4C2RainShowers {
  0% { opacity: 0; transform: translateY(0); }
  10%, 80% { opacity: 0.8; }
  100% { opacity: 0; transform: translateY(35px); }
}
.p4-c2-hol-cloud2.active .cloud-raindrops {
  animation: p4C2RainShowers 0.75s linear infinite;
}
@keyframes p4C2CloudSettle2 {
  0% { transform: scale(1.05) translate(0, -3px); }
  100% { transform: scale(1) translate(0, 0); }
}
.p4-c2-hol-cloud2.ending .cloud-click-wrap {
  animation: p4C2CloudSettle2 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.15) forwards;
}
@keyframes p4C2RainFadeOut {
  0% { opacity: 0.5; transform: translateY(10px); }
  100% { opacity: 0; transform: translateY(25px); }
}
.p4-c2-hol-cloud2.ending .cloud-raindrops {
  animation: p4C2RainFadeOut 0.5s ease-out forwards;
}

/* 5. Cloud 3 Click: storm darkening, thundery woggles, double lightning strike & shockwave */
@keyframes p4C2CloudActive3 {
  0% { transform: scale(1) translate(0, 0); }
  5%, 15%, 25%, 35%, 45% { transform: scale(1.12) translate(-3px, 2px); }
  10%, 20%, 30%, 40% { transform: scale(1.12) translate(3px, -2px); }
  50% { transform: scale(1.15) translate(0, -8px); }
  75% { transform: scale(1.1) translate(0, -4px); }
  100% { transform: scale(1.05) translate(0, -2px); }
}
.p4-c2-hol-cloud3.active .cloud-click-wrap {
  animation: p4C2CloudActive3 1.5s ease-in-out forwards;
}
@keyframes p4C2CloudStormShift {
  0% { filter: brightness(1) contrast(1) drop-shadow(0 0 0px transparent); }
  5% { filter: brightness(0.5) contrast(1.4) drop-shadow(0 0 10px rgba(124, 58, 237, 0.6)); }
  /* First flash */
  8% { filter: brightness(1.8) contrast(1.2) drop-shadow(0 0 25px #fef08a); }
  10% { filter: brightness(0.5) contrast(1.4) drop-shadow(0 0 10px rgba(124, 58, 237, 0.6)); }
  /* Second flash */
  20% { filter: brightness(1.9) contrast(1.2) drop-shadow(0 0 30px #fef08a); }
  24% { filter: brightness(0.5) contrast(1.4) drop-shadow(0 0 10px rgba(124, 58, 237, 0.6)); }
  32% { filter: brightness(1.8) contrast(1.2) drop-shadow(0 0 25px #fef08a); }
  36% { filter: brightness(0.5) contrast(1.4) drop-shadow(0 0 10px rgba(124, 58, 237, 0.6)); }
  /* Recovering */
  60% { filter: brightness(0.8) contrast(1.1) drop-shadow(0 0 5px rgba(124, 58, 237, 0.2)); }
  100% { filter: brightness(1) contrast(1) drop-shadow(0 0 0px transparent); }
}
.p4-c2-hol-cloud3.active .cloud3-main-body {
  animation: p4C2CloudStormShift 1.5s ease-in-out forwards;
}
@keyframes p4C2LightningStrike {
  0%, 4%, 12%, 16%, 36%, 100% { opacity: 0; transform: scaleY(0.4); }
  8%, 10% { opacity: 1; transform: scaleY(1); }
  20%, 32% { opacity: 1; transform: scaleY(1.1); }
}
.p4-c2-hol-cloud3.active .cloud-lightning {
  animation: p4C2LightningStrike 1.5s ease-out forwards;
  transform-origin: 535px 90px;
}
@keyframes p4C2LightningShockwave {
  0%, 18% { opacity: 0; transform: scale(0.2); }
  24% { opacity: 0.8; stroke-width: 3px; }
  50% { opacity: 0; transform: scale(3.5); stroke-width: 0.5px; }
  100% { opacity: 0; }
}
.p4-c2-hol-cloud3.active .lightning-shockwave {
  animation: p4C2LightningShockwave 1.5s ease-out forwards;
  transform-origin: 538px 115px;
}
@keyframes p4C2CloudSettle3 {
  0% { transform: scale(1.05) translate(0, -2px); }
  100% { transform: scale(1) translate(0, 0); }
}
.p4-c2-hol-cloud3.ending .cloud-click-wrap {
  animation: p4C2CloudSettle3 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.15) forwards;
}

/* 6-8. Seagulls Loop */
@keyframes p4C2GullLoopClick {
  0% { transform: translate(0, 0) rotate(0); }
  35% { transform: translate(-20px, -30px) rotate(-90deg); }
  70% { transform: translate(-40px, -10px) rotate(-270deg); }
  100% { transform: translate(0, 0) rotate(-360deg); }
}
.p4-c2-hol-gull1.active .p4-c2-seagull {
  animation: p4C2GullLoopClick 1.5s ease-in-out;
}
.p4-c2-hol-gull2.active .p4-c2-seagull {
  animation: p4C2GullLoopClick 1.5s ease-in-out;
}
.p4-c2-hol-gull3.active .p4-c2-seagull {
  animation: p4C2GullLoopClick 1.5s ease-in-out;
}

/* 9. Sun click flare, active core swell and rapid sunbeams spin */
@keyframes p4C2SunActive {
  0% { transform: scale(1); filter: brightness(1); }
  15% { transform: scale(1.22); filter: brightness(1.25); }
  35% { transform: scale(1.15); filter: brightness(1.15); }
  55% { transform: scale(1.2); filter: brightness(1.2); }
  75% { transform: scale(1.1); filter: brightness(1.08); }
  100% { transform: scale(1.06); filter: brightness(1.04); }
}
.p4-c2-hol-sun.active .sun-click-wrap {
  animation: p4C2SunActive 1.5s ease-in-out forwards;
}

@keyframes p4C2SunBeamsSpinActive {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(720deg); }
}
.p4-c2-hol-sun.active .sun-beams-group {
  animation: p4C2SunBeamsSpinActive 1.5s cubic-bezier(0.25, 1, 0.2, 1) forwards;
}

@keyframes p4C2SunFlareClick {
  0% { transform: scale(0.8); opacity: 0; }
  10%, 40% { opacity: 0.95; }
  100% { transform: scale(1.75); opacity: 0; }
}
.p4-c2-hol-sun.active .sun-flare.f1 {
  animation: p4C2SunFlareClick 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}
.p4-c2-hol-sun.active .sun-flare.f2 {
  animation: p4C2SunFlareClick 1.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards 0.2s;
}

@keyframes p4C2SunSettle {
  0% { transform: scale(1.06); filter: brightness(1.04); }
  100% { transform: scale(1); filter: brightness(1); }
}
.p4-c2-hol-sun.ending .sun-click-wrap {
  animation: p4C2SunSettle 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.15) forwards;
}

/* 10. Coconut Drink active click: straw sip, splashes, umbrella spins */
@keyframes p4C2DrinkSip {
  0%, 100% { transform: scaleY(1); }
  50% { transform: scaleY(0.4); }
}
@keyframes p4C2UmbrellaSpin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
@keyframes p4C2SipSplashClick {
  0% { opacity: 0; transform: translateY(0) scale(0.5); }
  30% { opacity: 1; }
  100% { opacity: 0; transform: translateY(-20px) scale(1.2); }
}
.p4-c2-hol-coconut.active .coconut-liquid {
  transform-origin: 0px -3px;
  animation: p4C2DrinkSip 1.5s ease-in-out;
}
.p4-c2-hol-coconut.active .coconut-umbrella {
  transform-origin: -12px -24px;
  animation: p4C2UmbrellaSpin 1.5s linear;
}
.p4-c2-hol-coconut.active .sip-splash {
  animation: p4C2SipSplashClick 1.2s ease-out;
}

/* 11. Beach Ball click active: bounces up, spins */
@keyframes p4C2BallBounceClickAnim {
  0%, 100% { transform: translateY(0) scale(1); }
  15% { transform: translateY(5px) scale(1.1, 0.85); }
  45% { transform: translateY(-120px) scale(0.9, 1.05); }
  75% { transform: translateY(0) scale(1); }
}
@keyframes p4C2BallSpin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(720deg); }
}
@keyframes p4C2BallShadowClick {
  0%, 100% { transform: scale(1); opacity: 0.2; }
  45% { transform: scale(0.4); opacity: 0.05; }
}
.p4-c2-hol-beachball.active {
  animation: p4C2BallBounceClickAnim 1.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.p4-c2-hol-beachball.active > circle,
.p4-c2-hol-beachball.active > path {
  animation: p4C2BallSpin 1.6s ease-in-out;
}
.p4-c2-hol-beachball.active .ball-shadow {
  animation: p4C2BallShadowClick 1.6s ease-in-out;
}

/* 12. Hibiscus Flower click: spins and sparkles */
@keyframes p4C2FlowerSpin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
@keyframes p4C2FlowerSparkle {
  0% { opacity: 0; transform: translateY(0) scale(0.8); }
  30% { opacity: 1; }
  100% { opacity: 0; transform: translateY(-30px) scale(1.3); }
}
.p4-c2-hol-flower-woman.active {
  animation: p4C2FlowerSpin 1.4s ease-in-out;
}
.p4-c2-hol-flower-woman.active .flower-particles {
  animation: p4C2FlowerSparkle 1.4s ease-out;
}

/* 13. Straw Hat — Standby breeze float, Active toss-and-catch, Ending wobble settle */

/* ── STANDBY: gentle ocean breeze float ── */
body.p4.day.holiday-mode:not(.relaxed-mode) .p4-c2-hol-hat-left .hat-standby-wrap {
  animation: p4C2HatFloatStandby 5s ease-in-out infinite;
}
@keyframes p4C2HatFloatStandby {
  0%   { transform: translateY(0) rotate(0deg); }
  25%  { transform: translateY(-3px) rotate(1.5deg); }
  50%  { transform: translateY(-5px) rotate(-1deg); }
  75%  { transform: translateY(-2px) rotate(1deg); }
  100% { transform: translateY(0) rotate(0deg); }
}

/* Ribbon tails flutter in the breeze (standby continuous) */
body.p4.day.holiday-mode:not(.relaxed-mode) .p4-c2-hol-hat-left .hat-body-group {
  animation: p4C2HatRibbonFlutter 3.2s ease-in-out infinite;
}
@keyframes p4C2HatRibbonFlutter {
  0%, 100% { transform: skewX(0deg); }
  30%  { transform: skewX(0.8deg); }
  70%  { transform: skewX(-0.6deg); }
}

/* ── ACTIVE: toss up, spin, catch bounce ── */
body.p4.day.holiday-mode:not(.relaxed-mode) .p4-c2-hol-hat-left.active .hat-click-wrap {
  animation: p4C2HatActiveToss 1.4s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
@keyframes p4C2HatActiveToss {
  0%   { transform: translateY(0) rotate(0deg) scale(1); }
  8%   { transform: translateY(4px) rotate(-3deg) scale(1.06, 0.92); }
  28%  { transform: translateY(-45px) rotate(18deg) scale(0.95, 1.04); }
  48%  { transform: translateY(-50px) rotate(-12deg) scale(1); }
  62%  { transform: translateY(-15px) rotate(8deg) scale(1.03, 0.96); }
  76%  { transform: translateY(3px) rotate(-4deg) scale(1.04, 0.95); }
  88%  { transform: translateY(-2px) rotate(2deg) scale(1); }
  100% { transform: translateY(0) rotate(0deg) scale(1); }
}

/* Shadow shrinks as hat rises, grows on landing — consistent with toss height */
body.p4.day.holiday-mode:not(.relaxed-mode) .p4-c2-hol-hat-left.active .hat-shadow {
  animation: p4C2HatShadowActive 1.4s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
@keyframes p4C2HatShadowActive {
  0%   { transform: scale(1, 1); opacity: 0.16; }
  8%   { transform: scale(1.08, 1.1); opacity: 0.2; }
  28%  { transform: scale(0.5, 0.4); opacity: 0.04; }
  48%  { transform: scale(0.45, 0.35); opacity: 0.03; }
  62%  { transform: scale(0.75, 0.7); opacity: 0.08; }
  76%  { transform: scale(1.05, 1.06); opacity: 0.18; }
  88%  { transform: scale(0.96, 0.97); opacity: 0.15; }
  100% { transform: scale(1, 1); opacity: 0.16; }
}

/* ── ENDING: damped wobble settle ── */
body.p4.day.holiday-mode:not(.relaxed-mode) .p4-c2-hol-hat-left.ending .hat-click-wrap {
  animation: p4C2HatSettle 0.5s ease-out forwards;
}
@keyframes p4C2HatSettle {
  0%   { transform: translateY(0) rotate(0deg) scale(1); }
  25%  { transform: translateY(-1.5px) rotate(1.5deg) scale(1.01); }
  50%  { transform: translateY(1px) rotate(-1deg) scale(0.99); }
  75%  { transform: translateY(-0.5px) rotate(0.4deg) scale(1); }
  100% { transform: translateY(0) rotate(0deg) scale(1); }
}

/* Shadow settle — gentle pulse back to rest */
body.p4.day.holiday-mode:not(.relaxed-mode) .p4-c2-hol-hat-left.ending .hat-shadow {
  animation: p4C2HatShadowSettle 0.5s ease-out forwards;
}
@keyframes p4C2HatShadowSettle {
  0%   { transform: scale(1, 1); opacity: 0.16; }
  40%  { transform: scale(1.04, 1.03); opacity: 0.18; }
  100% { transform: scale(1, 1); opacity: 0.16; }
}

/* 14. Sunglasses color flash */
@keyframes p4C2GlassesFlash {
  0%, 100% { fill: #111; }
  25% { fill: #00ffff; filter: drop-shadow(0 0 6px #00ffff); }
  50% { fill: #ec4899; filter: drop-shadow(0 0 6px #ec4899); }
  75% { fill: #eab308; filter: drop-shadow(0 0 6px #eab308); }
}
.p4-c2-hol-glasses-right.active .lens {
  animation: p4C2GlassesFlash 1.2s ease-in-out;
}

/* 15. Sailboat click: bobs and sails forward */
@keyframes p4C2BoatSailClick {
  0% { transform: translate(0, 0) rotate(0); }
  25% { transform: translate(30px, 1px) rotate(-2deg); }
  50% { transform: translate(70px, -1px) rotate(3deg); }
  75% { transform: translate(100px, 0) rotate(-1deg); }
  100% { transform: translate(0, 0) rotate(0); }
}
.p4-c2-hol-sailboat.active {
  animation: p4C2BoatSailClick 2.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* 16. Leaping Dolphin leap */
@keyframes p4C2DolphinLeapClick {
  0% { transform: translate(-40px, 0px) scale(0.6) rotate(-20deg); opacity: 0; }
  15% { opacity: 1; }
  45% { transform: translate(15px, -50px) scale(0.7) rotate(15deg); opacity: 1; }
  75% { transform: translate(70px, 0px) scale(0.6) rotate(45deg); opacity: 1; }
  90%, 100% { transform: translate(70px, 10px) scale(0.6); opacity: 0; }
}
@keyframes p4C2DolphinSplashClick {
  0%, 100% { opacity: 0; transform: scale(0.6); }
  10%, 80% { opacity: 1; transform: scale(1.2); }
}

/* 17. Wind Chime — Standby pendulum sway, Active wind gust, Ending damped settle */

/* ── STANDBY: gentle pendulum sway from hanging point ── */
body.p4.day.holiday-mode:not(.relaxed-mode) .p4-c2-hol-windchime .chime-standby-wrap {
  animation: p4C2ChimeStandbySway 6s ease-in-out infinite;
}
@keyframes p4C2ChimeStandbySway {
  0%   { transform: rotate(0deg); }
  25%  { transform: rotate(2deg); }
  50%  { transform: rotate(0deg); }
  75%  { transform: rotate(-1.5deg); }
  100% { transform: rotate(0deg); }
}

/* Individual tubes have subtle offset oscillation (different periods create organic feel) */
body.p4.day.holiday-mode:not(.relaxed-mode) .p4-c2-hol-windchime .chime-tube.t1 { animation: p4C2ChimeTubeIdle1 3.8s ease-in-out infinite; transform-origin: -11px -37px; }
body.p4.day.holiday-mode:not(.relaxed-mode) .p4-c2-hol-windchime .chime-tube.t2 { animation: p4C2ChimeTubeIdle2 4.2s ease-in-out infinite 0.4s; transform-origin: -5px -37px; }
body.p4.day.holiday-mode:not(.relaxed-mode) .p4-c2-hol-windchime .chime-tube.t3 { animation: p4C2ChimeTubeIdle1 3.5s ease-in-out infinite 0.8s; transform-origin: 1px -37px; }
body.p4.day.holiday-mode:not(.relaxed-mode) .p4-c2-hol-windchime .chime-tube.t4 { animation: p4C2ChimeTubeIdle2 4.0s ease-in-out infinite 0.2s; transform-origin: 7px -37px; }
body.p4.day.holiday-mode:not(.relaxed-mode) .p4-c2-hol-windchime .chime-tube.t5 { animation: p4C2ChimeTubeIdle1 3.6s ease-in-out infinite 0.6s; transform-origin: 13px -37px; }

@keyframes p4C2ChimeTubeIdle1 {
  0%, 100% { transform: rotate(0deg); }
  50% { transform: rotate(1.5deg); }
}
@keyframes p4C2ChimeTubeIdle2 {
  0%, 100% { transform: rotate(0deg); }
  50% { transform: rotate(-1.2deg); }
}

/* Striker gently sways out of sync with main body */
body.p4.day.holiday-mode:not(.relaxed-mode) .p4-c2-hol-windchime .chime-striker-group {
  animation: p4C2ChimeStrikerIdle 5s ease-in-out infinite 1s;
}
@keyframes p4C2ChimeStrikerIdle {
  0%, 100% { transform: rotate(0deg); }
  30% { transform: rotate(1.8deg); }
  70% { transform: rotate(-1.2deg); }
}

/* Sail catches breeze */
body.p4.day.holiday-mode:not(.relaxed-mode) .p4-c2-hol-windchime .chime-sail {
  animation: p4C2ChimeSailIdle 4.5s ease-in-out infinite 0.5s;
}
@keyframes p4C2ChimeSailIdle {
  0%, 100% { transform: rotate(0deg); }
  40% { transform: rotate(-2deg); }
  60% { transform: rotate(1.5deg); }
}

/* ── ACTIVE: wind gust — violent swing, tubes fan out, striker smashes ── */
body.p4.day.holiday-mode:not(.relaxed-mode) .p4-c2-hol-windchime.active .chime-click-wrap {
  animation: p4C2ChimeActiveGust 1.8s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
@keyframes p4C2ChimeActiveGust {
  0%   { transform: rotate(0deg); }
  10%  { transform: rotate(18deg); }
  25%  { transform: rotate(-14deg); }
  40%  { transform: rotate(10deg); }
  55%  { transform: rotate(-7deg); }
  70%  { transform: rotate(4deg); }
  85%  { transform: rotate(-2deg); }
  100% { transform: rotate(0deg); }
}

/* Tubes fan outward violently on active (each in its own direction) */
body.p4.day.holiday-mode:not(.relaxed-mode) .p4-c2-hol-windchime.active .chime-tube.t1 { animation: p4C2ChimeTubeActive1 1.8s ease-in-out forwards; transform-origin: -11px -37px; }
body.p4.day.holiday-mode:not(.relaxed-mode) .p4-c2-hol-windchime.active .chime-tube.t2 { animation: p4C2ChimeTubeActive2 1.8s ease-in-out forwards; transform-origin: -5px -37px; }
body.p4.day.holiday-mode:not(.relaxed-mode) .p4-c2-hol-windchime.active .chime-tube.t3 { animation: p4C2ChimeTubeActive1 1.8s ease-in-out 0.05s forwards; transform-origin: 1px -37px; }
body.p4.day.holiday-mode:not(.relaxed-mode) .p4-c2-hol-windchime.active .chime-tube.t4 { animation: p4C2ChimeTubeActive2 1.8s ease-in-out 0.08s forwards; transform-origin: 7px -37px; }
body.p4.day.holiday-mode:not(.relaxed-mode) .p4-c2-hol-windchime.active .chime-tube.t5 { animation: p4C2ChimeTubeActive1 1.8s ease-in-out 0.1s forwards; transform-origin: 13px -37px; }

@keyframes p4C2ChimeTubeActive1 {
  0%   { transform: rotate(0deg); }
  12%  { transform: rotate(-12deg); }
  28%  { transform: rotate(8deg); }
  44%  { transform: rotate(-6deg); }
  60%  { transform: rotate(3deg); }
  80%  { transform: rotate(-1deg); }
  100% { transform: rotate(0deg); }
}
@keyframes p4C2ChimeTubeActive2 {
  0%   { transform: rotate(0deg); }
  12%  { transform: rotate(10deg); }
  28%  { transform: rotate(-9deg); }
  44%  { transform: rotate(5deg); }
  60%  { transform: rotate(-3deg); }
  80%  { transform: rotate(1deg); }
  100% { transform: rotate(0deg); }
}

/* Striker swings wildly during active */
body.p4.day.holiday-mode:not(.relaxed-mode) .p4-c2-hol-windchime.active .chime-striker-group {
  animation: p4C2ChimeStrikerActive 1.8s ease-in-out forwards;
}
@keyframes p4C2ChimeStrikerActive {
  0%   { transform: rotate(0deg); }
  10%  { transform: rotate(-20deg); }
  25%  { transform: rotate(16deg); }
  40%  { transform: rotate(-10deg); }
  55%  { transform: rotate(6deg); }
  70%  { transform: rotate(-3deg); }
  85%  { transform: rotate(1deg); }
  100% { transform: rotate(0deg); }
}

/* Sail whips in the gust */
body.p4.day.holiday-mode:not(.relaxed-mode) .p4-c2-hol-windchime.active .chime-sail {
  animation: p4C2ChimeSailActive 1.8s ease-in-out forwards;
}
@keyframes p4C2ChimeSailActive {
  0%   { transform: rotate(0deg) skewX(0deg); }
  12%  { transform: rotate(15deg) skewX(8deg); }
  28%  { transform: rotate(-12deg) skewX(-6deg); }
  45%  { transform: rotate(8deg) skewX(4deg); }
  65%  { transform: rotate(-3deg) skewX(-2deg); }
  85%  { transform: rotate(1deg) skewX(0deg); }
  100% { transform: rotate(0deg) skewX(0deg); }
}

/* ── ENDING: damped settle back to calm ── */
body.p4.day.holiday-mode:not(.relaxed-mode) .p4-c2-hol-windchime.ending .chime-click-wrap {
  animation: p4C2ChimeSettle 0.6s ease-out forwards;
}
@keyframes p4C2ChimeSettle {
  0%   { transform: rotate(0deg); }
  30%  { transform: rotate(1.5deg); }
  60%  { transform: rotate(-0.8deg); }
  100% { transform: rotate(0deg); }
}

body.p4.day.holiday-mode:not(.relaxed-mode) .p4-c2-hol-windchime.ending .chime-striker-group {
  animation: p4C2ChimeStrikerSettle 0.6s ease-out forwards;
}
@keyframes p4C2ChimeStrikerSettle {
  0%   { transform: rotate(0deg); }
  35%  { transform: rotate(-1.2deg); }
  65%  { transform: rotate(0.5deg); }
  100% { transform: rotate(0deg); }
}

body.p4.day.holiday-mode:not(.relaxed-mode) .p4-c2-hol-windchime.ending .chime-sail {
  animation: p4C2ChimeSailSettle 0.6s ease-out forwards;
}
@keyframes p4C2ChimeSailSettle {
  0%   { transform: rotate(0deg) skewX(0deg); }
  40%  { transform: rotate(1deg) skewX(1deg); }
  100% { transform: rotate(0deg) skewX(0deg); }
}

/* 18. Sea Shell click sound waves */
@keyframes p4C2ShellWaveClick {
  0% { opacity: 0.8; transform: scale(0.7); }
  100% { opacity: 0; transform: scale(1.8); }
}
.p4-c2-hol-seashell.active .shell-waves {
  animation: p4C2ShellWaveClick 1.4s ease-out;
}

/* 19. Crab active click: scuttles sideways and pinches */
@keyframes p4C2CrabScuttle {
  0%, 100% { transform: translate(0, 0) scale(0.9); }
  20% { transform: translate(25px, -3px) scale(0.9) rotate(5deg); }
  40% { transform: translate(50px, 0px) scale(0.9) rotate(-3deg); }
  60% { transform: translate(25px, -2px) scale(0.9) rotate(4deg); }
  80% { transform: translate(-15px, 0px) scale(0.9) rotate(-2deg); }
}
@keyframes p4C2CrabClawPinch {
  0%, 100% { transform: rotate(0); }
  30%, 70% { transform: scale(1.15) rotate(15deg); }
  50% { transform: scale(1.15) rotate(-5deg); }
}
.p4-c2-hol-crab.active {
  animation: p4C2CrabScuttle 2.0s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.p4-c2-hol-crab.active .crab-claws {
  animation: p4C2CrabClawPinch 2.0s ease-in-out;
}

/* 20. Message in a bottle hologram */
@keyframes p4C2BottleHoloReveal {
  0%, 100% { opacity: 0; transform: translate(0, -60px) scale(0.6); }
  15%, 85% { opacity: 1; transform: translate(0, -60px) scale(1); }
}
.p4-c2-hol-bottle.active .hologram-message {
  animation: p4C2BottleHoloReveal 2.5s ease-in-out;
}

/* --- STANDBY IDLE ANIMATIONS --- */
@keyframes p4C2HolGullStandby {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}
body.p4.day.holiday-mode:not(.relaxed-mode) .p4-c2-hol-gull1 { animation: p4C2HolGullStandby 6s infinite ease-in-out; }
body.p4.day.holiday-mode:not(.relaxed-mode) .p4-c2-hol-gull2 { animation: p4C2HolGullStandby 7s infinite ease-in-out 1s; }
body.p4.day.holiday-mode:not(.relaxed-mode) .p4-c2-hol-gull3 { animation: p4C2HolGullStandby 5s infinite ease-in-out 0.5s; }

/* Volumetric Cloud Drifts */
@keyframes p4C2Cloud1Drift {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(30px, -4px); }
}
@keyframes p4C2Cloud2Drift {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(-25px, 3px); }
}
@keyframes p4C2Cloud3Drift {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(20px, -2px); }
}
body.p4.day.holiday-mode:not(.relaxed-mode) .p4-c2-hol-cloud1 .cloud-drift-wrap {
  animation: p4C2Cloud1Drift 28s infinite ease-in-out;
}
body.p4.day.holiday-mode:not(.relaxed-mode) .p4-c2-hol-cloud2 .cloud-drift-wrap {
  animation: p4C2Cloud2Drift 22s infinite ease-in-out;
}
body.p4.day.holiday-mode:not(.relaxed-mode) .p4-c2-hol-cloud3 .cloud-drift-wrap {
  animation: p4C2Cloud3Drift 25s infinite ease-in-out;
}

/* Standby swaying for trunks */
@keyframes p4C2HolPalmStandbyLeft {
  0%, 100% { transform: rotate(0deg) skewX(0deg); }
  50% { transform: rotate(0.8deg) skewX(0.3deg); }
}
@keyframes p4C2HolPalmStandbyRight {
  0%, 100% { transform: rotate(0deg) skewX(0deg); }
  50% { transform: rotate(-0.8deg) skewX(-0.3deg); }
}
body.p4.day.holiday-mode:not(.relaxed-mode) .p4-c2-hol-palm-left { animation: p4C2HolPalmStandbyLeft 8s infinite ease-in-out; }
body.p4.day.holiday-mode:not(.relaxed-mode) .p4-c2-hol-palm-right { animation: p4C2HolPalmStandbyRight 9s infinite ease-in-out 1s; }

/* Standby individual leaf rustling */
body.p4.day.holiday-mode:not(.relaxed-mode) .p4-c2-hol-palm-left .leaf-fl1 { animation: p4C2LeafRustleFL1 6s infinite ease-in-out; transform-origin: 38px 250px; }
body.p4.day.holiday-mode:not(.relaxed-mode) .p4-c2-hol-palm-left .leaf-fl2 { animation: p4C2LeafRustleFL2 5s infinite ease-in-out 0.5s; transform-origin: 38px 250px; }
body.p4.day.holiday-mode:not(.relaxed-mode) .p4-c2-hol-palm-left .leaf-fl3 { animation: p4C2LeafRustleFL3 7s infinite ease-in-out 1s; transform-origin: 38px 250px; }
body.p4.day.holiday-mode:not(.relaxed-mode) .p4-c2-hol-palm-left .leaf-fl4 { animation: p4C2LeafRustleFL4 5.5s infinite ease-in-out 0.3s; transform-origin: 38px 250px; }
body.p4.day.holiday-mode:not(.relaxed-mode) .p4-c2-hol-palm-left .leaf-fl5 { animation: p4C2LeafRustleFL5 6.5s infinite ease-in-out 0.8s; transform-origin: 38px 250px; }

body.p4.day.holiday-mode:not(.relaxed-mode) .p4-c2-hol-palm-right .leaf-fr1 { animation: p4C2LeafRustleFR1 6s infinite ease-in-out 0.2s; transform-origin: 1162px 250px; }
body.p4.day.holiday-mode:not(.relaxed-mode) .p4-c2-hol-palm-right .leaf-fr2 { animation: p4C2LeafRustleFR2 5s infinite ease-in-out 0.7s; transform-origin: 1162px 250px; }
body.p4.day.holiday-mode:not(.relaxed-mode) .p4-c2-hol-palm-right .leaf-fr3 { animation: p4C2LeafRustleFR3 7s infinite ease-in-out 1.2s; transform-origin: 1162px 250px; }
body.p4.day.holiday-mode:not(.relaxed-mode) .p4-c2-hol-palm-right .leaf-fr4 { animation: p4C2LeafRustleFR4 5.5s infinite ease-in-out 0.4s; transform-origin: 1162px 250px; }
body.p4.day.holiday-mode:not(.relaxed-mode) .p4-c2-hol-palm-right .leaf-fr5 { animation: p4C2LeafRustleFR5 6.5s infinite ease-in-out 0.9s; transform-origin: 1162px 250px; }

@keyframes p4C2LeafRustleFL1 { 0%, 100% { transform: rotate(0deg); } 50% { transform: rotate(-3deg); } }
@keyframes p4C2LeafRustleFL2 { 0%, 100% { transform: rotate(0deg); } 50% { transform: rotate(-2deg) scaleY(0.97); } }
@keyframes p4C2LeafRustleFL3 { 0%, 100% { transform: rotate(0deg); } 50% { transform: rotate(1.5deg); } }
@keyframes p4C2LeafRustleFL4 { 0%, 100% { transform: rotate(0deg); } 50% { transform: rotate(2deg) scaleY(0.97); } }
@keyframes p4C2LeafRustleFL5 { 0%, 100% { transform: rotate(0deg); } 50% { transform: rotate(3deg); } }

@keyframes p4C2LeafRustleFR1 { 0%, 100% { transform: rotate(0deg); } 50% { transform: rotate(-3deg); } }
@keyframes p4C2LeafRustleFR2 { 0%, 100% { transform: rotate(0deg); } 50% { transform: rotate(-2deg) scaleY(0.97); } }
@keyframes p4C2LeafRustleFR3 { 0%, 100% { transform: rotate(0deg); } 50% { transform: rotate(1.5deg); } }
@keyframes p4C2LeafRustleFR4 { 0%, 100% { transform: rotate(0deg); } 50% { transform: rotate(2deg) scaleY(0.97); } }
@keyframes p4C2LeafRustleFR5 { 0%, 100% { transform: rotate(0deg); } 50% { transform: rotate(3deg); } }

@keyframes p4C2BoatStandby {
  0%, 100% { transform: translateY(0) rotate(0); }
  50% { transform: translateY(1.5px) rotate(1deg); }
}
body.p4.day.holiday-mode:not(.relaxed-mode) .p4-c2-hol-sailboat { animation: p4C2BoatStandby 4s infinite ease-in-out; }

@keyframes p4C2DolphinRippleStandby {
  0%, 100% { transform: scale(1); opacity: 0.4; }
  50% { transform: scale(1.25); opacity: 0.8; }
}
body.p4.day.holiday-mode:not(.relaxed-mode) .dolphin-ripple { animation: p4C2DolphinRippleStandby 3s infinite ease-in-out; }
body.p4.day.holiday-mode:not(.relaxed-mode) .dolphin-ripple.r2 { animation: p4C2DolphinRippleStandby 3s infinite ease-in-out 1.5s; }


/* ═══════════════════════════════════════════════════════════════
   20 NEW INTERACTIVE SUMMER ADMIN ELEMENTS — DAY HOLIDAY ONLY
   ═══════════════════════════════════════════════════════════════ */
.p4-c2-hol-coconut-folder,
.p4-c2-hol-coconut-folder .coconut-standby-wrap,
.p4-c2-hol-coconut-folder .coconut-click-wrap,
.p4-c2-hol-coconut-folder .coconut-files {
  transform-origin: 48px 508px;
}
.p4-c2-hol-coconut-folder .coconut-left-shell-group {
  transform-origin: 48px 512px;
}
.p4-c2-hol-coconut-folder .coconut-right-shell-group {
  transform-origin: 48px 512px;
}
.p4-c2-hol-coconut-folder .coconut-deco {
  transform-origin: 48px 510px;
}

.p4-c2-hol-starfish-clip,
.p4-c2-hol-starfish-clip .starfish-standby-wrap,
.p4-c2-hol-starfish-clip .starfish-click-wrap,
.p4-c2-hol-starfish-clip .starfish-body-group {
  transform-origin: 1000px 155px;
}

.p4-c2-hol-shell-stapler,
.p4-c2-hol-shell-stapler .stapler-standby-wrap,
.p4-c2-hol-shell-stapler .stapler-click-wrap {
  transform-origin: 110px 520px;
}
.p4-c2-hol-shell-stapler .stapler-jaw-group {
  transform-origin: 96px 523px;
}
.p4-c2-hol-cocktail-mug,
.p4-c2-hol-cocktail-mug .mug-standby-wrap,
.p4-c2-hol-cocktail-mug .mug-click-wrap {
  transform-origin: 980px 495px;
}
.p4-c2-hol-cocktail-mug .cocktail-lime-group {
  transform-origin: 987px 480px;
}
.p4-c2-hol-cocktail-mug .cocktail-umbrella-group {
  transform-origin: 980px 480px;
}

.p4-c2-hol-suitcase-briefcase,
.p4-c2-hol-suitcase-briefcase .briefcase-standby-wrap,
.p4-c2-hol-suitcase-briefcase .briefcase-click-wrap {
  transform-origin: 1030px 460px;
}
.p4-c2-hol-suitcase-briefcase .suitcase-lid-group {
  transform-origin: 1030px 450px;
}
.p4-c2-hol-suitcase-briefcase .luggage-latch.l1 {
  transform-origin: 1013px 448px;
}
.p4-c2-hol-suitcase-briefcase .luggage-latch.l2 {
  transform-origin: 1047px 448px;
}

.p4-c2-hol-sunglasses-organizer,
.p4-c2-hol-sunglasses-organizer .sunglasses-standby-wrap,
.p4-c2-hol-sunglasses-organizer .sunglasses-click-wrap {
  transform-origin: 1090px 480px;
}
.p4-c2-hol-sunglasses-organizer .organized-files-group {
  transform-origin: 1090px 480px;
}
.p4-c2-hol-pineapple-pencup,
.p4-c2-hol-pineapple-pencup .pencup-standby-wrap,
.p4-c2-hol-pineapple-pencup .pencup-click-wrap,
.p4-c2-hol-pineapple-pencup .pineapple-body-group {
  transform-origin: 160px 495px;
}
.p4-c2-hol-pineapple-pencup .pcup-pens-group {
  transform-origin: 160px 480px;
}
.p4-c2-hol-pineapple-pencup .pen-blue {
  transform-origin: 152px 480px;
}
.p4-c2-hol-pineapple-pencup .pen-red {
  transform-origin: 160px 480px;
}
.p4-c2-hol-pineapple-pencup .pen-green {
  transform-origin: 168px 480px;
}

.p4-c2-hol-starfish-memo,
.p4-c2-hol-starfish-memo .memo-standby-wrap,
.p4-c2-hol-starfish-memo .memo-click-wrap,
.p4-c2-hol-starfish-memo .memo-paper {
  transform-origin: 1110px 445px;
}
.p4-c2-hol-starfish-memo .starfish-holder-group {
  transform-origin: 1100px 446px;
}

.p4-c2-hol-hibiscus-tape,
.p4-c2-hol-hibiscus-tape .tape-standby-wrap,
.p4-c2-hol-hibiscus-tape .tape-click-wrap {
  transform-origin: 245px 510px;
}
.p4-c2-hol-hibiscus-tape .hibiscus-flower {
  transform-origin: 250px 510px;
}
.p4-c2-hol-hibiscus-tape .tape-roll-group {
  transform-origin: 232px 510px;
}
.p4-c2-hol-hibiscus-tape .tape-strip-group {
  transform-origin: 232px 504px;
}
.p4-c2-hol-flipflop-ruler,
.p4-c2-hol-flipflop-ruler .sandal-standby-wrap,
.p4-c2-hol-flipflop-ruler .sandal-click-wrap {
  transform-origin: 210px 540px;
}

.p4-c2-hol-sandcastle-cabinet,
.p4-c2-hol-sandcastle-cabinet .sandcastle-standby-wrap,
.p4-c2-hol-sandcastle-cabinet .sandcastle-click-wrap {
  transform-origin: 20px 470px;
}
.p4-c2-hol-sandcastle-cabinet .castle-flag-group {
  transform-origin: 20px 455px;
}
.p4-c2-hol-sandcastle-cabinet .sand-drawer.d2-group {
  transform-origin: 20px 475px;
}

.p4-c2-hol-fish-calculator,
.p4-c2-hol-fish-calculator .fish-standby-wrap,
.p4-c2-hol-fish-calculator .fish-click-wrap {
  transform-origin: 1150px 515px;
}
.p4-c2-hol-fish-calculator .fish-tail-fin {
  transform-origin: 1126px 515px;
}
.p4-c2-hol-fish-calculator .fish-dorsal-fin {
  transform-origin: 1150px 502px;
}
.p4-c2-hol-sun-clock,
.p4-c2-hol-sun-clock .sun-clock-standby-wrap,
.p4-c2-hol-sun-clock .sun-clock-click-wrap,
.p4-c2-hol-sun-clock .sun-clock-rays {
  transform-origin: 930px 70px;
}
.p4-c2-hol-sun-clock .sclock-hand-h,
.p4-c2-hol-sun-clock .sclock-hand-m,
.p4-c2-hol-sun-clock .sclock-hand-s {
  transform-origin: 930px 70px;
}

.p4-c2-hol-compass-protractor,
.p4-c2-hol-compass-protractor .compass-standby-wrap,
.p4-c2-hol-compass-protractor .compass-click-wrap,
.p4-c2-hol-compass-protractor .compass-needle-group {
  transform-origin: 1060px 530px;
}

.p4-c2-hol-bottle-mail,
.p4-c2-hol-bottle-mail .bottle-standby-wrap,
.p4-c2-hol-bottle-mail .bottle-click-wrap,
.p4-c2-hol-bottle-mail .mail-bottle-group {
  transform-origin: 850px 50px;
}
.p4-c2-hol-bottle-mail .mail-letter-group {
  transform-origin: 850px 50px;
}
.p4-c2-hol-bottle-mail .mail-letter {
  transform-origin: 850px 48px;
}
.p4-c2-hol-bottle-mail .mail-cork {
  transform-origin: 850px 32px;
}
.p4-c2-hol-palmtree-organizer,
.p4-c2-hol-palmtree-organizer .palm-standby-wrap,
.p4-c2-hol-palmtree-organizer .palm-click-wrap {
  transform-origin: 885px 140px;
}
.p4-c2-hol-palmtree-organizer .palm-tab {
  transform-origin: 885px 120px;
}

.p4-c2-hol-lotion-dispenser,
.p4-c2-hol-lotion-dispenser .lotion-standby-wrap,
.p4-c2-hol-lotion-dispenser .lotion-click-wrap {
  transform-origin: 80px 530px;
}
.p4-c2-hol-lotion-dispenser .lotion-pump-group {
  transform-origin: 80px 505px;
}
.p4-c2-hol-lotion-dispenser .pump-nozzle {
  transform-origin: 80px 497px;
}
.p4-c2-hol-icecream-highlighter,
.p4-c2-hol-icecream-highlighter .highlighter-standby-wrap,
.p4-c2-hol-icecream-highlighter .highlighter-click-wrap {
  transform-origin: 1000px 549px;
}
.p4-c2-hol-icecream-highlighter .scoop-pink,
.p4-c2-hol-icecream-highlighter .scoop-yellow,
.p4-c2-hol-icecream-highlighter .highlighter-tip {
  transform-origin: 1000px 532px;
}

.p4-c2-hol-beachball-globe,
.p4-c2-hol-beachball-globe .beachglobe-standby-wrap,
.p4-c2-hol-beachball-globe .beachglobe-click-wrap {
  transform-origin: 1035px 111px;
}
.p4-c2-hol-beachball-globe .beachglobe-ball-group {
  transform-origin: 1035px 87px;
}
.p4-c2-hol-surfboard-clipboard,
.p4-c2-hol-surfboard-clipboard .surfboard-standby-wrap,
.p4-c2-hol-surfboard-clipboard .surfboard-click-wrap {
  transform-origin: 135px 503px;
}
.p4-c2-hol-surfboard-clipboard .surfboard-paper-group {
  transform-origin: 135px 440px;
}
.p4-c2-hol-surfboard-clipboard .surfboard-clip-group {
  transform-origin: 135px 436px;
}

/* Disable Hover (scale / filter drop-shadow) specifically for the 20 new elements */
body.p4.day.holiday-mode .p4-c2-hol-coconut-folder:hover,
body.p4.day.holiday-mode .p4-c2-hol-starfish-clip:hover,
body.p4.day.holiday-mode .p4-c2-hol-shell-stapler:hover,
body.p4.day.holiday-mode .p4-c2-hol-cocktail-mug:hover,
body.p4.day.holiday-mode .p4-c2-hol-suitcase-briefcase:hover,
body.p4.day.holiday-mode .p4-c2-hol-sunglasses-organizer:hover,
body.p4.day.holiday-mode .p4-c2-hol-pineapple-pencup:hover,
body.p4.day.holiday-mode .p4-c2-hol-starfish-memo:hover,
body.p4.day.holiday-mode .p4-c2-hol-hibiscus-tape:hover,
body.p4.day.holiday-mode .p4-c2-hol-flipflop-ruler:hover,
body.p4.day.holiday-mode .p4-c2-hol-sandcastle-cabinet:hover,
body.p4.day.holiday-mode .p4-c2-hol-fish-calculator:hover,
body.p4.day.holiday-mode .p4-c2-hol-sun-clock:hover,
body.p4.day.holiday-mode .p4-c2-hol-compass-protractor:hover,
body.p4.day.holiday-mode .p4-c2-hol-bottle-mail:hover,
body.p4.day.holiday-mode .p4-c2-hol-palmtree-organizer:hover,
body.p4.day.holiday-mode .p4-c2-hol-lotion-dispenser:hover,
body.p4.day.holiday-mode .p4-c2-hol-icecream-highlighter:hover,
body.p4.day.holiday-mode .p4-c2-hol-beachball-globe:hover,
body.p4.day.holiday-mode .p4-c2-hol-surfboard-clipboard:hover {
  filter: none !important;
  transform: none !important;
}

/* Animations for Click Interactions */

/* 1. Coconut File Folder */
/* Standby Floating */
body.p4.day.holiday-mode:not(.relaxed-mode) .p4-c2-hol-coconut-folder .coconut-standby-wrap {
  animation: p4C2CoconutStandby 5s ease-in-out infinite;
}
/* Active Click */
body.p4.day.holiday-mode:not(.relaxed-mode) .p4-c2-hol-coconut-folder.active .coconut-click-wrap {
  animation: p4C2CoconutActive 1.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}
body.p4.day.holiday-mode:not(.relaxed-mode) .p4-c2-hol-coconut-folder.active .coconut-left-shell-group {
  animation: p4C2CoconutLeftOpen 1.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}
body.p4.day.holiday-mode:not(.relaxed-mode) .p4-c2-hol-coconut-folder.active .coconut-right-shell-group {
  animation: p4C2CoconutRightOpen 1.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}
body.p4.day.holiday-mode:not(.relaxed-mode) .p4-c2-hol-coconut-folder.active .coconut-files {
  animation: p4C2CoconutFilesUp 1.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}
body.p4.day.holiday-mode:not(.relaxed-mode) .p4-c2-hol-coconut-folder.active .coconut-deco {
  animation: p4C2CoconutDecoActive 1.5s ease-in-out forwards;
}
/* Ending Settle */
body.p4.day.holiday-mode:not(.relaxed-mode) .p4-c2-hol-coconut-folder.ending .coconut-click-wrap {
  animation: p4C2CoconutSettle 0.5s ease-out forwards;
}
body.p4.day.holiday-mode:not(.relaxed-mode) .p4-c2-hol-coconut-folder.ending .coconut-left-shell-group {
  animation: p4C2CoconutLeftSettle 0.5s ease-out forwards;
}
body.p4.day.holiday-mode:not(.relaxed-mode) .p4-c2-hol-coconut-folder.ending .coconut-right-shell-group {
  animation: p4C2CoconutRightSettle 0.5s ease-out forwards;
}
body.p4.day.holiday-mode:not(.relaxed-mode) .p4-c2-hol-coconut-folder.ending .coconut-files {
  animation: p4C2CoconutFilesSettle 0.5s ease-out forwards;
}

@keyframes p4C2CoconutStandby {
  0%, 100% { transform: rotate(0deg) translateY(0); }
  50% { transform: rotate(1.5deg) translateY(-0.8px); }
}
@keyframes p4C2CoconutActive {
  0% { transform: scale(1); }
  15% { transform: scale(1.15) rotate(-3deg); }
  30% { transform: scale(1.15) rotate(3deg); }
  45% { transform: scale(1.1) rotate(-1.5deg); }
  60% { transform: scale(1.1) rotate(1.5deg); }
  75% { transform: scale(1.05) rotate(-0.5deg); }
  100% { transform: scale(1.05) rotate(0deg); }
}
@keyframes p4C2CoconutLeftOpen {
  0% { transform: rotate(0deg); }
  20% { transform: rotate(-35deg); }
  80% { transform: rotate(-35deg); }
  100% { transform: rotate(-30deg); }
}
@keyframes p4C2CoconutRightOpen {
  0% { transform: rotate(0deg); }
  20% { transform: rotate(35deg); }
  80% { transform: rotate(35deg); }
  100% { transform: rotate(30deg); }
}
@keyframes p4C2CoconutFilesUp {
  0% { transform: translateY(5px) scale(0.6); opacity: 0; }
  15% { transform: translateY(-24px) scale(1.05); opacity: 1; }
  30% { transform: translateY(-22px) scale(1) rotate(-2deg); opacity: 1; }
  45% { transform: translateY(-22px) scale(1) rotate(2deg); opacity: 1; }
  80% { transform: translateY(-22px) scale(1) rotate(0deg); opacity: 1; }
  100% { transform: translateY(-20px) scale(1); opacity: 1; }
}
@keyframes p4C2CoconutDecoActive {
  0% { transform: rotate(0deg); }
  25% { transform: rotate(-15deg); }
  75% { transform: rotate(10deg); }
  100% { transform: rotate(0deg); }
}
@keyframes p4C2CoconutSettle {
  0% { transform: scale(1.05) rotate(0deg); }
  40% { transform: scale(0.95) rotate(1.5deg); }
  70% { transform: scale(1.02) rotate(-0.5deg); }
  100% { transform: scale(1) rotate(0deg); }
}
@keyframes p4C2CoconutLeftSettle {
  0% { transform: rotate(-30deg); }
  60% { transform: rotate(4deg); }
  80% { transform: rotate(-2deg); }
  100% { transform: rotate(0deg); }
}
@keyframes p4C2CoconutRightSettle {
  0% { transform: rotate(30deg); }
  60% { transform: rotate(-4deg); }
  80% { transform: rotate(2deg); }
  100% { transform: rotate(0deg); }
}
@keyframes p4C2CoconutFilesSettle {
  0% { transform: translateY(-20px); opacity: 1; }
  40% { transform: translateY(0px) scale(0.8); opacity: 0.5; }
  100% { transform: translateY(5px) scale(0.6); opacity: 0; }
}

/* 2. Starfish Paperclip */
/* Standby Floating */
body.p4.day.holiday-mode:not(.relaxed-mode) .p4-c2-hol-starfish-clip .starfish-standby-wrap {
  animation: p4C2StarfishStandby 6s ease-in-out infinite;
}
/* Active Click */
body.p4.day.holiday-mode:not(.relaxed-mode) .p4-c2-hol-starfish-clip.active .starfish-click-wrap {
  animation: p4C2StarfishActive 1.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}
body.p4.day.holiday-mode:not(.relaxed-mode) .p4-c2-hol-starfish-clip.active .star-eye {
  animation: p4C2StarfishEyesActive 1.5s ease-in-out;
}
/* Ending Settle */
body.p4.day.holiday-mode:not(.relaxed-mode) .p4-c2-hol-starfish-clip.ending .starfish-click-wrap {
  animation: p4C2StarfishSettle 0.5s ease-out forwards;
}

@keyframes p4C2StarfishStandby {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  33% { transform: translateY(-2px) rotate(1.5deg); }
  66% { transform: translateY(1.5px) rotate(-1.5deg); }
}
@keyframes p4C2StarfishActive {
  0% { transform: scale(1) translateY(0) rotate(0deg); filter: none; }
  15% { transform: scale(0.9) translateY(4px) rotate(-10deg); }
  30% { transform: scale(1.25) translateY(-25px) rotate(120deg); filter: drop-shadow(0 0 8px #fb923c); }
  50% { transform: scale(1.25) translateY(-30px) rotate(240deg); filter: drop-shadow(0 0 12px #f97316); }
  70% { transform: scale(1.15) translateY(-5px) rotate(360deg); filter: drop-shadow(0 0 8px #fb923c); }
  85% { transform: scale(1.08) translateY(-2px) rotate(360deg); }
  100% { transform: scale(1.05) translateY(0) rotate(360deg); }
}
@keyframes p4C2StarfishEyesActive {
  0%, 100% { transform: scale(1); }
  30%, 70% { transform: scale(1.3) translate(0.5px, -0.5px); }
}
@keyframes p4C2StarfishSettle {
  0% { transform: scale(1.05) translateY(0) rotate(360deg); }
  25% { transform: scale(1.12, 0.85) translateY(3px) rotate(358deg); }
  50% { transform: scale(0.95, 1.05) translateY(-2px) rotate(361deg); }
  75% { transform: scale(1.02, 0.98) translateY(0.5px) rotate(360deg); }
  100% { transform: scale(1) translateY(0) rotate(360deg); }
}

/* 3. Shell Stapler */
/* Standby Breathing */
body.p4.day.holiday-mode:not(.relaxed-mode) .p4-c2-hol-shell-stapler .stapler-standby-wrap {
  animation: p4C2ShellStaplerStandby 4s ease-in-out infinite;
}
/* Active Click */
body.p4.day.holiday-mode:not(.relaxed-mode) .p4-c2-hol-shell-stapler.active .stapler-click-wrap {
  animation: p4C2StaplerBodyShock 1.5s ease-in-out forwards;
}
body.p4.day.holiday-mode:not(.relaxed-mode) .p4-c2-hol-shell-stapler.active .stapler-jaw-group {
  animation: p4C2ShellStaplerActive 1.5s ease-in-out forwards;
}
body.p4.day.holiday-mode:not(.relaxed-mode) .p4-c2-hol-shell-stapler.active .stapler-spark {
  animation: p4C2StaplerSparkActive 1.5s ease-in-out forwards;
}
/* Ending Settle */
body.p4.day.holiday-mode:not(.relaxed-mode) .p4-c2-hol-shell-stapler.ending .stapler-jaw-group {
  animation: p4C2ShellStaplerSettle 0.5s ease-out forwards;
}

@keyframes p4C2ShellStaplerStandby {
  0%, 100% { transform: rotate(0deg); }
  50% { transform: rotate(3deg); }
}
@keyframes p4C2ShellStaplerActive {
  0% { transform: rotate(0deg); }
  20% { transform: rotate(24deg); }
  28% { transform: rotate(-5deg); }
  33% { transform: rotate(-3deg); }
  38% { transform: rotate(-5deg); }
  45% { transform: rotate(-1deg); }
  70% { transform: rotate(8deg); }
  100% { transform: rotate(4deg); }
}
@keyframes p4C2StaplerSparkActive {
  0%, 25% { opacity: 0; }
  28% { opacity: 1; filter: drop-shadow(0 0 5px #10b981); }
  45% { opacity: 0.5; }
  60% { opacity: 0; }
  100% { opacity: 0; }
}
@keyframes p4C2StaplerBodyShock {
  0% { transform: translate(0, 0); }
  25% { transform: translate(0, -1px); }
  28% { transform: translate(1px, 2px) rotate(1deg); }
  33% { transform: translate(-1px, 0.5px) rotate(-0.5deg); }
  38% { transform: translate(0.5px, 0) rotate(0.2deg); }
  50% { transform: translate(0, 0); }
  100% { transform: translate(0, 0); }
}
@keyframes p4C2ShellStaplerSettle {
  0% { transform: rotate(4deg); }
  50% { transform: rotate(-1.5deg); }
  80% { transform: rotate(0.5deg); }
  100% { transform: rotate(0deg); }
}

/* 4. Tropical Cocktail Mug */
/* Standby Rocking & Bubbles */
body.p4.day.holiday-mode:not(.relaxed-mode) .p4-c2-hol-cocktail-mug .mug-standby-wrap {
  animation: p4C2MugStandby 5.5s ease-in-out infinite;
}
body.p4.day.holiday-mode:not(.relaxed-mode) .p4-c2-hol-cocktail-mug .cbub {
  animation: p4C2MugBubbleFloat 3s infinite linear;
}
body.p4.day.holiday-mode:not(.relaxed-mode) .p4-c2-hol-cocktail-mug .cbub.b1 { animation-delay: 0s; }
body.p4.day.holiday-mode:not(.relaxed-mode) .p4-c2-hol-cocktail-mug .cbub.b2 { animation-delay: 0.5s; }
body.p4.day.holiday-mode:not(.relaxed-mode) .p4-c2-hol-cocktail-mug .cbub.b3 { animation-delay: 1s; }
body.p4.day.holiday-mode:not(.relaxed-mode) .p4-c2-hol-cocktail-mug .cbub.b4 { animation-delay: 1.5s; }
body.p4.day.holiday-mode:not(.relaxed-mode) .p4-c2-hol-cocktail-mug .cbub.b5 { animation-delay: 2s; }
body.p4.day.holiday-mode:not(.relaxed-mode) .p4-c2-hol-cocktail-mug .cbub.b6 { animation-delay: 2.5s; }

/* Active Click */
body.p4.day.holiday-mode:not(.relaxed-mode) .p4-c2-hol-cocktail-mug.active .mug-click-wrap {
  animation: p4C2MugActive 1.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}
body.p4.day.holiday-mode:not(.relaxed-mode) .p4-c2-hol-cocktail-mug.active .cocktail-liquid {
  animation: p4C2MugLiquidSlosh 0.75s ease-in-out infinite alternate;
}
body.p4.day.holiday-mode:not(.relaxed-mode) .p4-c2-hol-cocktail-mug.active .cocktail-lime-group {
  animation: p4C2MugAccActive 1.5s ease-in-out;
}
body.p4.day.holiday-mode:not(.relaxed-mode) .p4-c2-hol-cocktail-mug.active .cocktail-umbrella-group {
  animation: p4C2MugAccActive 1.5s ease-in-out;
}
/* Ending Settle */
body.p4.day.holiday-mode:not(.relaxed-mode) .p4-c2-hol-cocktail-mug.ending .mug-click-wrap {
  animation: p4C2MugSettle 0.5s ease-out forwards;
}

@keyframes p4C2MugStandby {
  0%, 100% { transform: rotate(0deg) translateY(0); }
  50% { transform: rotate(1.2deg) translateY(-0.5px); }
}
@keyframes p4C2MugBubbleFloat {
  0% { transform: translateY(0) scale(1); opacity: 0; }
  20% { opacity: 0.8; }
  80% { opacity: 0.8; }
  100% { transform: translateY(-24px) scale(0.7); opacity: 0; }
}
@keyframes p4C2MugActive {
  0% { transform: rotate(0deg) scale(1); }
  10%, 30%, 50%, 70%, 90% { transform: rotate(-8deg) scale(1.08) translate(-1px, -1px); }
  20%, 40%, 60%, 80% { transform: rotate(8deg) scale(1.08) translate(1px, 1px); }
  100% { transform: rotate(0deg) scale(1.04); }
}
@keyframes p4C2MugLiquidSlosh {
  0%, 100% { transform: scaleY(1) skewX(0deg); }
  25% { transform: scaleY(0.9) skewX(3deg); }
  75% { transform: scaleY(1.05) skewX(-3deg); }
}
@keyframes p4C2MugAccActive {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(-15deg); }
  75% { transform: rotate(15deg); }
}
@keyframes p4C2MugSettle {
  0% { transform: scale(1.04) rotate(0deg); }
  30% { transform: scale(0.96) rotate(-3deg); }
  60% { transform: scale(1.02) rotate(1.5deg); }
  80% { transform: scale(0.99) rotate(-0.5deg); }
  100% { transform: scale(1) rotate(0deg); }
}

/* 5. Suitcase Briefcase */
/* Standby Floating */
body.p4.day.holiday-mode:not(.relaxed-mode) .p4-c2-hol-suitcase-briefcase .briefcase-standby-wrap {
  animation: p4C2BriefcaseStandby 6s ease-in-out infinite;
}
/* Active Click */
body.p4.day.holiday-mode:not(.relaxed-mode) .p4-c2-hol-suitcase-briefcase.active .briefcase-click-wrap {
  animation: p4C2BriefcaseActive 1.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}
body.p4.day.holiday-mode:not(.relaxed-mode) .p4-c2-hol-suitcase-briefcase.active .luggage-latch {
  animation: p4C2LuggageLatchOpen 1.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}
body.p4.day.holiday-mode:not(.relaxed-mode) .p4-c2-hol-suitcase-briefcase.active .suitcase-lid-group {
  animation: p4C2LuggageLidOpen 1.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}
body.p4.day.holiday-mode:not(.relaxed-mode) .p4-c2-hol-suitcase-briefcase.active .suitcase-accessories {
  animation: p4C2LuggageAccUp 1.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}
/* Ending Settle */
body.p4.day.holiday-mode:not(.relaxed-mode) .p4-c2-hol-suitcase-briefcase.ending .briefcase-click-wrap {
  animation: p4C2BriefcaseSettle 0.5s ease-out forwards;
}
body.p4.day.holiday-mode:not(.relaxed-mode) .p4-c2-hol-suitcase-briefcase.ending .luggage-latch {
  animation: p4C2LuggageLatchClose 0.5s ease-out forwards;
}
body.p4.day.holiday-mode:not(.relaxed-mode) .p4-c2-hol-suitcase-briefcase.ending .suitcase-lid-group {
  animation: p4C2LuggageLidClose 0.5s ease-out forwards;
}
body.p4.day.holiday-mode:not(.relaxed-mode) .p4-c2-hol-suitcase-briefcase.ending .suitcase-accessories {
  animation: p4C2LuggageAccClose 0.5s ease-out forwards;
}

@keyframes p4C2BriefcaseStandby {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-1.5px) rotate(-1deg); }
}
@keyframes p4C2BriefcaseActive {
  0% { transform: scale(1) rotate(0deg); }
  15% { transform: scale(1.08) rotate(-4deg); }
  30% { transform: scale(1.05) rotate(4deg); }
  45% { transform: scale(1.05) rotate(-2deg); }
  100% { transform: scale(1.03) rotate(0deg); }
}
@keyframes p4C2LuggageLatchOpen {
  0% { transform: scaleY(1); }
  20% { transform: scaleY(-0.8) translateY(-1px); }
  100% { transform: scaleY(-0.8) translateY(-1px); }
}
@keyframes p4C2LuggageLidOpen {
  0% { transform: translateY(0) scaleY(1); }
  25% { transform: translateY(-10px) rotate(-6deg); }
  100% { transform: translateY(-9px) rotate(-5deg); }
}
@keyframes p4C2LuggageAccUp {
  0% { transform: translateY(5px) scale(0.5); opacity: 0; }
  25% { transform: translateY(-24px) scale(1.05); opacity: 1; }
  50% { transform: translateY(-22px) scale(1) rotate(-3deg); opacity: 1; }
  75% { transform: translateY(-22px) scale(1) rotate(3deg); opacity: 1; }
  100% { transform: translateY(-20px) scale(1); opacity: 1; }
}
@keyframes p4C2LuggageLatchClose {
  0% { transform: scaleY(-0.8) translateY(-1px); }
  100% { transform: scaleY(1); }
}
@keyframes p4C2LuggageLidClose {
  0% { transform: translateY(-9px) rotate(-5deg); }
  60% { transform: translateY(1px) rotate(1deg); }
  100% { transform: translateY(0) rotate(0deg); }
}
@keyframes p4C2LuggageAccClose {
  0% { transform: translateY(-20px); opacity: 1; }
  100% { transform: translateY(5px) scale(0.5); opacity: 0; }
}

/* 6. Sunglasses File Organizer */
/* Standby Floating & Reflections */
body.p4.day.holiday-mode:not(.relaxed-mode) .p4-c2-hol-sunglasses-organizer .sunglasses-standby-wrap {
  animation: p4C2SunglassesStandby 4.8s ease-in-out infinite;
}
body.p4.day.holiday-mode:not(.relaxed-mode) .p4-c2-hol-sunglasses-organizer .lens-reflection {
  animation: p4C2LensReflectStandby 4s infinite ease-in-out;
}

/* Active Click */
body.p4.day.holiday-mode:not(.relaxed-mode) .p4-c2-hol-sunglasses-organizer.active .sunglasses-click-wrap {
  animation: p4C2SunglassesActive 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}
body.p4.day.holiday-mode:not(.relaxed-mode) .p4-c2-hol-sunglasses-organizer.active .lens-glow {
  animation: p4C2LensFlash 1.2s ease-in-out;
}
body.p4.day.holiday-mode:not(.relaxed-mode) .p4-c2-hol-sunglasses-organizer.active .file-red {
  animation: p4C2FileRedSlide 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}
body.p4.day.holiday-mode:not(.relaxed-mode) .p4-c2-hol-sunglasses-organizer.active .file-blue {
  animation: p4C2FileBlueSlide 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}
/* Ending Settle */
body.p4.day.holiday-mode:not(.relaxed-mode) .p4-c2-hol-sunglasses-organizer.ending .sunglasses-click-wrap {
  animation: p4C2SunglassesSettle 0.4s ease-out forwards;
}
body.p4.day.holiday-mode:not(.relaxed-mode) .p4-c2-hol-sunglasses-organizer.ending .org-file {
  animation: p4C2FilesSettleDown 0.4s ease-out forwards;
}

@keyframes p4C2SunglassesStandby {
  0%, 100% { transform: rotate(0deg) translateY(0); }
  50% { transform: rotate(-1.5deg) translateY(-0.5px); }
}
@keyframes p4C2LensReflectStandby {
  0% { transform: translate(-2px, -2px); opacity: 0.3; }
  40% { transform: translate(2px, 2px); opacity: 0.7; }
  80%, 100% { transform: translate(4px, 4px); opacity: 0; }
}
@keyframes p4C2SunglassesActive {
  0% { transform: scale(1) rotate(0); }
  15% { transform: scale(1.1) rotate(4deg); }
  30% { transform: scale(1.1) rotate(-4deg); }
  45% { transform: scale(1.06) rotate(2deg); }
  60% { transform: scale(1.06) rotate(-2deg); }
  100% { transform: scale(1.03) rotate(0); }
}
@keyframes p4C2FileRedSlide {
  0% { transform: translateY(0); }
  20% { transform: translateY(-16px); }
  80% { transform: translateY(-16px); }
  100% { transform: translateY(-14px); }
}
@keyframes p4C2FileBlueSlide {
  0%, 20% { transform: translateY(0); }
  40% { transform: translateY(-16px); }
  80% { transform: translateY(-16px); }
  100% { transform: translateY(-14px); }
}
@keyframes p4C2LensFlash {
  0%, 100% { filter: brightness(1) drop-shadow(0 0 0px transparent); }
  30%, 60% { filter: brightness(1.6) drop-shadow(0 0 6px #fda4af); }
}
@keyframes p4C2SunglassesSettle {
  0% { transform: scale(1.03) rotate(0deg); }
  50% { transform: scale(0.97) rotate(-1deg); }
  100% { transform: scale(1) rotate(0deg); }
}
@keyframes p4C2FilesSettleDown {
  0% { transform: translateY(-14px); }
  100% { transform: translateY(0); }
}

/* 7. Pineapple Pen Cup */
/* Standby Floating */
body.p4.day.holiday-mode:not(.relaxed-mode) .p4-c2-hol-pineapple-pencup .pencup-standby-wrap {
  animation: p4C2PineappleStandby 5.2s ease-in-out infinite;
}
/* Active Click */
body.p4.day.holiday-mode:not(.relaxed-mode) .p4-c2-hol-pineapple-pencup.active .pencup-click-wrap {
  animation: p4C2PineappleActive 1.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}
body.p4.day.holiday-mode:not(.relaxed-mode) .p4-c2-hol-pineapple-pencup.active .pen-blue {
  animation: p4C2PenBlueRattle 1.5s ease-in-out infinite;
}
body.p4.day.holiday-mode:not(.relaxed-mode) .p4-c2-hol-pineapple-pencup.active .pen-red {
  animation: p4C2PenRedRattle 1.5s ease-in-out infinite;
}
body.p4.day.holiday-mode:not(.relaxed-mode) .p4-c2-hol-pineapple-pencup.active .pen-green {
  animation: p4C2PenGreenRattle 1.5s ease-in-out infinite;
}
/* Ending Settle */
body.p4.day.holiday-mode:not(.relaxed-mode) .p4-c2-hol-pineapple-pencup.ending .pencup-click-wrap {
  animation: p4C2PineappleSettle 0.5s ease-out forwards;
}

@keyframes p4C2PineappleStandby {
  0%, 100% { transform: rotate(0deg) translateY(0); }
  50% { transform: rotate(1.5deg) translateY(-0.8px); }
}
@keyframes p4C2PineappleActive {
  0% { transform: rotate(0deg) scale(1); }
  10%, 30%, 50%, 70%, 90% { transform: rotate(-5deg) translate(-1px, 0.5px); }
  20%, 40%, 60%, 80% { transform: rotate(5deg) translate(1px, -0.5px); }
  100% { transform: scale(1.03) rotate(0deg); }
}
@keyframes p4C2PenBlueRattle {
  0%, 100% { transform: rotate(-18deg) translateY(0); }
  25% { transform: rotate(-24deg) translateY(-2px); }
  75% { transform: rotate(-12deg) translateY(1px); }
}
@keyframes p4C2PenRedRattle {
  0%, 100% { transform: rotate(0deg) translateY(0); }
  30% { transform: rotate(8deg) translateY(-3px); }
  70% { transform: rotate(-8deg) translateY(1.5px); }
}
@keyframes p4C2PenGreenRattle {
  0%, 100% { transform: rotate(15deg) translateY(0); }
  20% { transform: rotate(9deg) translateY(-2px); }
  80% { transform: rotate(21deg) translateY(1px); }
}
@keyframes p4C2PineappleSettle {
  0% { transform: scale(1.03) rotate(0deg); }
  40% { transform: scale(0.97) rotate(2deg); }
  80% { transform: scale(1.01) rotate(-0.5deg); }
  100% { transform: scale(1) rotate(0deg); }
}

/* 8. Starfish Sticky Note */
/* Standby Flutter */
body.p4.day.holiday-mode:not(.relaxed-mode) .p4-c2-hol-starfish-memo .memo-paper {
  animation: p4C2MemoFlutterStandby 4s ease-in-out infinite;
}
/* Active Click */
body.p4.day.holiday-mode:not(.relaxed-mode) .p4-c2-hol-starfish-memo.active .memo-paper {
  animation: p4C2MemoActive 1.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}
body.p4.day.holiday-mode:not(.relaxed-mode) .p4-c2-hol-starfish-memo.active .starfish-holder-group {
  animation: p4C2StarfishPinActive 1.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}
/* Ending Settle */
body.p4.day.holiday-mode:not(.relaxed-mode) .p4-c2-hol-starfish-memo.ending .memo-paper {
  animation: p4C2MemoPaperSettle 0.5s ease-out forwards;
}
body.p4.day.holiday-mode:not(.relaxed-mode) .p4-c2-hol-starfish-memo.ending .starfish-holder-group {
  animation: p4C2StarfishPinSettle 0.5s ease-out forwards;
}

@keyframes p4C2MemoFlutterStandby {
  0%, 100% { transform: skewX(0deg) skewY(0deg); }
  50% { transform: skewX(2deg) skewY(0.8deg); }
}
@keyframes p4C2MemoActive {
  0% { transform: scale(1) skewY(0deg); }
  15% { transform: scaleY(0.6) skewY(15deg) translateY(-2px); }
  30% { transform: scaleY(0.55) skewY(18deg) translateY(-3px); }
  70% { transform: scaleY(0.55) skewY(18deg) translateY(-3px); }
  100% { transform: scaleY(0.65) skewY(12deg) translateY(-1px); }
}
@keyframes p4C2StarfishPinActive {
  0% { transform: scale(1) rotate(0deg); }
  15% { transform: scale(1.3) rotate(180deg); }
  30% { transform: scale(1.3) rotate(360deg); }
  45% { transform: scale(1.15) rotate(360deg); }
  100% { transform: scale(1.05) rotate(360deg); }
}
@keyframes p4C2MemoPaperSettle {
  0% { transform: scaleY(0.65) skewY(12deg) translateY(-1px); }
  40% { transform: scaleY(1.05) skewY(-3deg) translateY(0.5px); }
  75% { transform: scaleY(0.97) skewY(1deg); }
  100% { transform: scaleY(1) skewY(0deg) translateY(0); }
}
@keyframes p4C2StarfishPinSettle {
  0% { transform: scale(1.05) rotate(360deg); }
  100% { transform: scale(1) rotate(360deg); }
}

/* 9. Hibiscus Tape Dispenser */
/* Standby Floating */
body.p4.day.holiday-mode:not(.relaxed-mode) .p4-c2-hol-hibiscus-tape .tape-standby-wrap {
  animation: p4C2TapeDispenserStandby 5.5s ease-in-out infinite;
}
/* Active Click */
body.p4.day.holiday-mode:not(.relaxed-mode) .p4-c2-hol-hibiscus-tape.active .tape-click-wrap {
  animation: p4C2TapeActive 1.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}
body.p4.day.holiday-mode:not(.relaxed-mode) .p4-c2-hol-hibiscus-tape.active .tape-roll-group {
  animation: p4C2TapeRollSpin 1.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}
body.p4.day.holiday-mode:not(.relaxed-mode) .p4-c2-hol-hibiscus-tape.active .tape-strip-group {
  animation: p4C2TapeStripStretch 1.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}
body.p4.day.holiday-mode:not(.relaxed-mode) .p4-c2-hol-hibiscus-tape.active .tape-snap-spark {
  animation: p4C2TapeSnapSpark 1.5s ease-in-out forwards;
}
/* Ending Settle */
body.p4.day.holiday-mode:not(.relaxed-mode) .p4-c2-hol-hibiscus-tape.ending .tape-click-wrap {
  animation: p4C2TapeSettle 0.5s ease-out forwards;
}

@keyframes p4C2TapeDispenserStandby {
  0%, 100% { transform: rotate(0deg) translateY(0); }
  50% { transform: rotate(-2deg) translateY(-0.5px); }
}
@keyframes p4C2TapeActive {
  0% { transform: rotate(0deg) scale(1); }
  15% { transform: rotate(-10deg) scale(1.08); }
  30% { transform: rotate(5deg) scale(1.08); }
  100% { transform: scale(1.04) rotate(0deg); }
}
@keyframes p4C2TapeRollSpin {
  0% { transform: rotate(0deg); }
  30% { transform: rotate(90deg); }
  70% { transform: rotate(180deg); }
  100% { transform: rotate(240deg); }
}
@keyframes p4C2TapeStripStretch {
  0% { transform: scaleX(1); }
  28% { transform: scaleX(1.4) skewX(-2deg); }
  29% { transform: scaleX(0.95) skewX(2deg); }
  100% { transform: scaleX(1); }
}
@keyframes p4C2TapeSnapSpark {
  0%, 27% { opacity: 0; transform: scale(0.5); }
  28% { opacity: 1; transform: scale(1.2); filter: drop-shadow(0 0 4px #eab308); }
  40% { opacity: 0.5; transform: scale(0.8); }
  100% { opacity: 0; }
}
@keyframes p4C2TapeSettle {
  0% { transform: scale(1.04) rotate(0deg); }
  50% { transform: scale(0.97) rotate(-2deg); }
  100% { transform: scale(1) rotate(0deg); }
}

/* 10. Flip-Flop Ruler */
/* Standby Floating */
body.p4.day.holiday-mode:not(.relaxed-mode) .p4-c2-hol-flipflop-ruler .sandal-standby-wrap {
  animation: p4C2SandalStandby 5.6s ease-in-out infinite;
}
/* Active Click */
body.p4.day.holiday-mode:not(.relaxed-mode) .p4-c2-hol-flipflop-ruler.active .sandal-click-wrap {
  animation: p4C2SandalWalkSlap 1.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}
body.p4.day.holiday-mode:not(.relaxed-mode) .p4-c2-hol-flipflop-ruler.active .sandal-splashes {
  animation: p4C2SandalSplash 1.5s ease-out forwards;
}
/* Ending Settle */
body.p4.day.holiday-mode:not(.relaxed-mode) .p4-c2-hol-flipflop-ruler.ending .sandal-click-wrap {
  animation: p4C2SandalSettle 0.5s ease-out forwards;
}

@keyframes p4C2SandalStandby {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-0.8px) rotate(-1.5deg); }
}
@keyframes p4C2SandalWalkSlap {
  0% { transform: translateY(0) rotate(0deg); }
  15% { transform: translateY(-16px) rotate(-22deg); }
  30% { transform: translateY(0) rotate(0deg); }
  45% { transform: translateY(-3px) rotate(1deg); }
  60% { transform: translateY(-14px) rotate(-20deg); }
  75% { transform: translateY(0) rotate(0deg); }
  90% { transform: translateY(-2px) rotate(0.5deg); }
  100% { transform: translateY(0) rotate(0deg); }
}
@keyframes p4C2SandalSplash {
  0%, 25% { opacity: 0; }
  28% { opacity: 1; }
  38% { opacity: 0; }
  70% { opacity: 0; }
  73% { opacity: 1; }
  83% { opacity: 0; }
  100% { opacity: 0; }
}
@keyframes p4C2SandalSettle {
  0% { transform: translateY(0) rotate(0deg); }
  40% { transform: translateY(-1.5px) rotate(-1.5deg); }
  80% { transform: translateY(0.5px) rotate(0.5deg); }
  100% { transform: translateY(0) rotate(0deg); }
}

/* 11. Sandcastle Filing Cabinet */
/* Standby Wiggle flag */
body.p4.day.holiday-mode:not(.relaxed-mode) .p4-c2-hol-sandcastle-cabinet .castle-flag {
  animation: p4C2CastleFlagWav 3s ease-in-out infinite;
}
/* Active Click */
body.p4.day.holiday-mode:not(.relaxed-mode) .p4-c2-hol-sandcastle-cabinet.active .sandcastle-click-wrap {
  animation: p4C2CastleActive 1.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}
body.p4.day.holiday-mode:not(.relaxed-mode) .p4-c2-hol-sandcastle-cabinet.active .d2-face {
  animation: p4C2CastleDrawerOpen 1.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}
body.p4.day.holiday-mode:not(.relaxed-mode) .p4-c2-hol-sandcastle-cabinet.active .crab-eyes {
  animation: p4C2CastleCrabPeek 1.5s ease-in-out forwards;
}
/* Ending Settle */
body.p4.day.holiday-mode:not(.relaxed-mode) .p4-c2-hol-sandcastle-cabinet.ending .sandcastle-click-wrap {
  animation: p4C2CastleSettle 0.5s ease-out forwards;
}
body.p4.day.holiday-mode:not(.relaxed-mode) .p4-c2-hol-sandcastle-cabinet.ending .d2-face {
  animation: p4C2CastleDrawerClose 0.5s ease-out forwards;
}

@keyframes p4C2CastleFlagWav {
  0%, 100% { transform: skewY(0deg) scaleX(1); }
  50% { transform: skewY(-5deg) scaleX(0.9); }
}
@keyframes p4C2CastleActive {
  0%, 100% { transform: rotate(0deg) scale(1); }
  15% { transform: rotate(-1.5deg) scale(1.03); }
  30% { transform: rotate(1.5deg) scale(1.03); }
  45% { transform: rotate(-0.8deg) scale(1.01); }
  60% { transform: rotate(0.8deg) scale(1.01); }
}
@keyframes p4C2CastleDrawerOpen {
  0% { transform: translateX(0); }
  20% { transform: translateX(-16px); }
  80% { transform: translateX(-16px); }
  100% { transform: translateX(-15px); }
}
@keyframes p4C2CastleCrabPeek {
  0%, 18% { opacity: 0; }
  25%, 75% { opacity: 1; }
  85%, 100% { opacity: 0; }
}
@keyframes p4C2CastleSettle {
  0% { transform: scale(1.01); }
  100% { transform: scale(1); }
}
@keyframes p4C2CastleDrawerClose {
  0% { transform: translateX(-15px); }
  100% { transform: translateX(0); }
}

/* 12. Fish Calculator */
/* Standby Floating */
body.p4.day.holiday-mode:not(.relaxed-mode) .p4-c2-hol-fish-calculator .fish-standby-wrap {
  animation: p4C2FishStandby 4.6s ease-in-out infinite;
}
body.p4.day.holiday-mode:not(.relaxed-mode) .p4-c2-hol-fish-calculator .fish-tail-fin {
  animation: p4C2FishFinStandby 2.2s ease-in-out infinite;
}
/* Active Click */
body.p4.day.holiday-mode:not(.relaxed-mode) .p4-c2-hol-fish-calculator.active .fish-click-wrap {
  animation: p4C2FishActive 1.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}
body.p4.day.holiday-mode:not(.relaxed-mode) .p4-c2-hol-fish-calculator.active .fish-tail-fin {
  animation: p4C2FishFinActive 1.5s ease-in-out forwards;
}
body.p4.day.holiday-mode:not(.relaxed-mode) .p4-c2-hol-fish-calculator.active .fkey {
  animation: p4C2FishKeysActive 1.5s ease-in-out;
}
body.p4.day.holiday-mode:not(.relaxed-mode) .p4-c2-hol-fish-calculator.active .fkey.k1 { animation-delay: 0s; }
body.p4.day.holiday-mode:not(.relaxed-mode) .p4-c2-hol-fish-calculator.active .fkey.k2 { animation-delay: 0.1s; }
body.p4.day.holiday-mode:not(.relaxed-mode) .p4-c2-hol-fish-calculator.active .fkey.k3 { animation-delay: 0.2s; }
body.p4.day.holiday-mode:not(.relaxed-mode) .p4-c2-hol-fish-calculator.active .fkey.k4 { animation-delay: 0.15s; }
body.p4.day.holiday-mode:not(.relaxed-mode) .p4-c2-hol-fish-calculator.active .fkey.k5 { animation-delay: 0.25s; }
body.p4.day.holiday-mode:not(.relaxed-mode) .p4-c2-hol-fish-calculator.active .fkey.k6 { animation-delay: 0.35s; }
body.p4.day.holiday-mode:not(.relaxed-mode) .p4-c2-hol-fish-calculator.active .fkey.k7 { animation-delay: 0.3s; }
body.p4.day.holiday-mode:not(.relaxed-mode) .p4-c2-hol-fish-calculator.active .fkey.k8 { animation-delay: 0.4s; }
body.p4.day.holiday-mode:not(.relaxed-mode) .p4-c2-hol-fish-calculator.active .fkey.k9 { animation-delay: 0.5s; }

body.p4.day.holiday-mode:not(.relaxed-mode) .p4-c2-hol-fish-calculator.active .fish-lcd-text {
  animation: p4C2FishLCDActive 1.5s ease-in-out forwards;
}
/* Ending Settle */
body.p4.day.holiday-mode:not(.relaxed-mode) .p4-c2-hol-fish-calculator.ending .fish-click-wrap {
  animation: p4C2FishSettle 0.5s ease-out forwards;
}
body.p4.day.holiday-mode:not(.relaxed-mode) .p4-c2-hol-fish-calculator.ending .fish-lcd-text {
  animation: p4C2FishLCDClose 0.5s ease-out forwards;
}

@keyframes p4C2FishStandby {
  0%, 100% { transform: rotate(0deg) translateY(0); }
  50% { transform: rotate(-1.5deg) translateY(-0.5px); }
}
@keyframes p4C2FishFinStandby {
  0%, 100% { transform: rotate(0deg); }
  50% { transform: rotate(-8deg); }
}
@keyframes p4C2FishActive {
  0% { transform: scale(1) translate(0, 0); }
  20% { transform: scale(1.08) translate(-4px, -2px) rotate(-3deg); }
  40% { transform: scale(1.08) translate(3px, 1px) rotate(3deg); }
  60% { transform: scale(1.04) translate(-2px, -1px) rotate(-1.5deg); }
  80% { transform: scale(1.04) translate(1px, 0) rotate(1deg); }
  100% { transform: scale(1.02) translate(0, 0); }
}
@keyframes p4C2FishFinActive {
  0%, 100% { transform: rotate(0deg); }
  10%, 30%, 50%, 70%, 90% { transform: rotate(-24deg); }
  20%, 40%, 60%, 80% { transform: rotate(24deg); }
}
@keyframes p4C2FishKeysActive {
  0%, 100% { fill: #cbd5e1; filter: none; }
  20% { fill: #22d3ee; filter: drop-shadow(0 0 2px #22d3ee); }
  40% { fill: #a7f3d0; filter: drop-shadow(0 0 2px #a7f3d0); }
  60% { fill: #fef08a; filter: drop-shadow(0 0 2px #fef08a); }
  80% { fill: #fda4af; filter: drop-shadow(0 0 2px #fda4af); }
}
@keyframes p4C2FishLCDActive {
  0% { opacity: 0; }
  20%, 85% { opacity: 1; filter: drop-shadow(0 0 3px #22c55e); }
  100% { opacity: 0.9; filter: drop-shadow(0 0 2px #22c55e); }
}
@keyframes p4C2FishSettle {
  0% { transform: scale(1.02) translate(0, 0); }
  50% { transform: scale(0.97) translate(1px, 0.5px); }
  100% { transform: scale(1) translate(0, 0); }
}
@keyframes p4C2FishLCDClose {
  0% { opacity: 0.9; }
  100% { opacity: 0; }
}

/* 13. Sun Clock */
/* Standby Floating & Ray rotation */
body.p4.day.holiday-mode:not(.relaxed-mode) .p4-c2-hol-sun-clock .sun-clock-standby-wrap {
  animation: p4C2SunClockStandby 5s ease-in-out infinite;
}
body.p4.day.holiday-mode:not(.relaxed-mode) .p4-c2-hol-sun-clock .sun-clock-rays {
  animation: p4C2SunClockRayStandby 24s linear infinite;
}
/* Active Click */
body.p4.day.holiday-mode:not(.relaxed-mode) .p4-c2-hol-sun-clock.active .sun-clock-click-wrap {
  animation: p4C2SunClockActive 1.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}
body.p4.day.holiday-mode:not(.relaxed-mode) .p4-c2-hol-sun-clock.active .sclock-hand-m {
  animation: p4C2SunClockSpin 1.5s linear forwards;
}
body.p4.day.holiday-mode:not(.relaxed-mode) .p4-c2-hol-sun-clock.active .sclock-hand-h {
  animation: p4C2SunClockSpin 1.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
body.p4.day.holiday-mode:not(.relaxed-mode) .p4-c2-hol-sun-clock.active .sclock-hand-s {
  animation: p4C2SunClockSecondSpin 1.5s linear forwards;
}
/* Ending Settle */
body.p4.day.holiday-mode:not(.relaxed-mode) .p4-c2-hol-sun-clock.ending .sun-clock-click-wrap {
  animation: p4C2SunClockSettle 0.5s ease-out forwards;
}

@keyframes p4C2SunClockStandby {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-0.6px) scale(1.02); }
}
@keyframes p4C2SunClockRayStandby {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
@keyframes p4C2SunClockActive {
  0% { transform: scale(1); }
  15% { transform: scale(1.1) rotate(-5deg); }
  30% { transform: scale(1.1) rotate(5deg); }
  45% { transform: scale(1.06) rotate(-2deg); }
  60% { transform: scale(1.06) rotate(2deg); }
  100% { transform: scale(1.03) rotate(0deg); }
}
@keyframes p4C2SunClockSpin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(1080deg); }
}
@keyframes p4C2SunClockSecondSpin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(2160deg); }
}
@keyframes p4C2SunClockSettle {
  0% { transform: scale(1.03) rotate(0deg); }
  50% { transform: scale(0.97) rotate(-2deg); }
  100% { transform: scale(1) rotate(0deg); }
}

/* 14. Compass Protractor */
/* Standby Float & Needle Vibration */
body.p4.day.holiday-mode:not(.relaxed-mode) .p4-c2-hol-compass-protractor .compass-standby-wrap {
  animation: p4C2CompassStandby 5.8s ease-in-out infinite;
}
body.p4.day.holiday-mode:not(.relaxed-mode) .p4-c2-hol-compass-protractor .compass-needle-group {
  animation: p4C2CompassNeedleStandby 4s ease-in-out infinite;
}
/* Active Click */
body.p4.day.holiday-mode:not(.relaxed-mode) .p4-c2-hol-compass-protractor.active .compass-click-wrap {
  animation: p4C2CompassActive 1.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}
body.p4.day.holiday-mode:not(.relaxed-mode) .p4-c2-hol-compass-protractor.active .compass-needle-group {
  animation: p4C2CompassNeedleSpin 1.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}
/* Ending Settle */
body.p4.day.holiday-mode:not(.relaxed-mode) .p4-c2-hol-compass-protractor.ending .compass-click-wrap {
  animation: p4C2CompassSettle 0.5s ease-out forwards;
}
body.p4.day.holiday-mode:not(.relaxed-mode) .p4-c2-hol-compass-protractor.ending .compass-needle-group {
  animation: p4C2CompassNeedleSettle 0.5s ease-out forwards;
}

@keyframes p4C2CompassStandby {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-0.8px); }
}
@keyframes p4C2CompassNeedleStandby {
  0%, 100% { transform: rotate(0deg); }
  20% { transform: rotate(-1.5deg); }
  40% { transform: rotate(1deg); }
  60% { transform: rotate(-0.5deg); }
  80% { transform: rotate(1.5deg); }
}
@keyframes p4C2CompassActive {
  0% { transform: scale(1); filter: none; }
  20% { transform: scale(1.08); filter: drop-shadow(0 0 4px rgba(244,63,94,0.4)); }
  100% { transform: scale(1.03); filter: drop-shadow(0 0 2px rgba(244,63,94,0.2)); }
}
@keyframes p4C2CompassNeedleSpin {
  0% { transform: rotate(0deg); }
  30% { transform: rotate(-180deg); }
  70% { transform: rotate(720deg); }
  100% { transform: rotate(1080deg); }
}
@keyframes p4C2CompassSettle {
  0% { transform: scale(1.03); }
  100% { transform: scale(1); filter: none; }
}
@keyframes p4C2CompassNeedleSettle {
  0% { transform: rotate(1080deg); }
  40% { transform: rotate(1065deg); }
  80% { transform: rotate(1083deg); }
  100% { transform: rotate(1080deg); }
}

/* 15. Message-in-a-Bottle Mail */
/* Standby Floating */
body.p4.day.holiday-mode:not(.relaxed-mode) .p4-c2-hol-bottle-mail .bottle-standby-wrap {
  animation: p4C2BottleStandby 6s ease-in-out infinite;
}
/* Active Click */
body.p4.day.holiday-mode:not(.relaxed-mode) .p4-c2-hol-bottle-mail.active .bottle-click-wrap {
  animation: p4C2BottleActive 1.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}
body.p4.day.holiday-mode:not(.relaxed-mode) .p4-c2-hol-bottle-mail.active .mail-cork {
  animation: p4C2CorkPop 1.5s ease-in-out forwards;
}
body.p4.day.holiday-mode:not(.relaxed-mode) .p4-c2-hol-bottle-mail.active .mail-letter-group {
  animation: p4C2ScrollFlyOut 1.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}
body.p4.day.holiday-mode:not(.relaxed-mode) .p4-c2-hol-bottle-mail.active .letter-content {
  animation: p4C2LetterContentFade 1.5s ease-in-out forwards;
}
/* Ending Settle */
body.p4.day.holiday-mode:not(.relaxed-mode) .p4-c2-hol-bottle-mail.ending .bottle-click-wrap {
  animation: p4C2BottleSettle 0.5s ease-out forwards;
}

@keyframes p4C2BottleStandby {
  0%, 100% { transform: rotate(0deg) translateY(0); }
  33% { transform: rotate(1.5deg) translateY(-0.8px); }
  66% { transform: rotate(-1deg) translateY(0.4px); }
}
@keyframes p4C2BottleActive {
  0% { transform: scale(1) rotate(0deg); }
  15% { transform: scale(1.06) rotate(-8deg); }
  30% { transform: scale(1.06) rotate(3deg); }
  100% { transform: scale(1.02) rotate(0deg); }
}
@keyframes p4C2CorkPop {
  0% { transform: translateY(0); }
  15% { transform: translateY(-8px) rotate(-15deg); opacity: 0.8; }
  30% { transform: translateY(-12px) rotate(-30deg); opacity: 0; }
  80% { transform: translateY(-12px) rotate(-30deg); opacity: 0; }
  100% { transform: translateY(0); opacity: 1; }
}
@keyframes p4C2ScrollFlyOut {
  0% { transform: translate(850px, 50px) scale(1) rotate(0deg); }
  15% { transform: translate(850px, 40px) scale(1.1) rotate(-5deg); }
  30% { transform: translate(850px, 20px) scale(1.3) rotate(15deg); }
  70% { transform: translate(850px, 20px) scale(1.3) rotate(15deg); }
  85% { transform: translate(850px, 42px) scale(1.1) rotate(5deg); }
  100% { transform: translate(850px, 50px) scale(1) rotate(0deg); }
}
@keyframes p4C2LetterContentFade {
  0%, 25% { opacity: 0; }
  30%, 65% { opacity: 1; }
  75%, 100% { opacity: 0; }
}
@keyframes p4C2BottleSettle {
  0% { transform: scale(1.02) rotate(0deg); }
  50% { transform: scale(0.98) rotate(-1.5deg); }
  100% { transform: scale(1) rotate(0deg); }
}

/* 16. Palm Tree Page Organizer */
/* Standby Float & leaf breeze */
body.p4.day.holiday-mode:not(.relaxed-mode) .p4-c2-hol-palmtree-organizer .palm-standby-wrap {
  animation: p4C2PalmStandby 5.2s ease-in-out infinite;
}
body.p4.day.holiday-mode:not(.relaxed-mode) .p4-c2-hol-palmtree-organizer .palm-tab.t1,
body.p4.day.holiday-mode:not(.relaxed-mode) .p4-c2-hol-palmtree-organizer .palm-tab.t3 {
  animation: p4C2PalmLeafBreeze 3.5s ease-in-out infinite;
}
body.p4.day.holiday-mode:not(.relaxed-mode) .p4-c2-hol-palmtree-organizer .palm-tab.t2,
body.p4.day.holiday-mode:not(.relaxed-mode) .p4-c2-hol-palmtree-organizer .palm-tab.t4 {
  animation: p4C2PalmLeafBreezeAlt 4.2s ease-in-out infinite;
}
/* Active Click */
body.p4.day.holiday-mode:not(.relaxed-mode) .p4-c2-hol-palmtree-organizer.active .palm-click-wrap {
  animation: p4C2PalmActive 1.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}
body.p4.day.holiday-mode:not(.relaxed-mode) .p4-c2-hol-palmtree-organizer.active .palm-tab {
  animation: p4C2PalmRustling 1.5s ease-in-out forwards;
}
body.p4.day.holiday-mode:not(.relaxed-mode) .p4-c2-hol-palmtree-organizer.active .palm-sparks {
  animation: p4C2PalmSparks 1.5s ease-out forwards;
}
/* Ending Settle */
body.p4.day.holiday-mode:not(.relaxed-mode) .p4-c2-hol-palmtree-organizer.ending .palm-click-wrap {
  animation: p4C2PalmSettle 0.5s ease-out forwards;
}

@keyframes p4C2PalmStandby {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-0.8px); }
}
@keyframes p4C2PalmLeafBreeze {
  0%, 100% { transform: rotate(0deg); }
  50% { transform: rotate(2.5deg); }
}
@keyframes p4C2PalmLeafBreezeAlt {
  0%, 100% { transform: rotate(0deg); }
  50% { transform: rotate(-2.5deg); }
}
@keyframes p4C2PalmActive {
  0% { transform: rotate(0deg) scale(1); }
  15% { transform: rotate(-6deg) scale(1.05); }
  30% { transform: rotate(6deg) scale(1.05); }
  45% { transform: rotate(-3deg) scale(1.02); }
  60% { transform: rotate(3deg) scale(1.02); }
  100% { transform: rotate(0deg) scale(1.01); }
}
@keyframes p4C2PalmRustling {
  0%, 100% { transform: scale(1) rotate(0deg); }
  15% { transform: scale(1.08) rotate(-12deg); }
  35% { transform: scale(1.12) rotate(15deg); }
  55% { transform: scale(1.06) rotate(-8deg); }
  75% { transform: scale(1.08) rotate(10deg); }
}
@keyframes p4C2PalmSparks {
  0% { opacity: 0; transform: translateY(-5px) scale(0.6); }
  20% { opacity: 1; }
  80% { opacity: 0.8; transform: translateY(12px) scale(1); }
  100% { opacity: 0; transform: translateY(18px) scale(0.8); }
}
@keyframes p4C2PalmSettle {
  0% { transform: scale(1.01); }
  100% { transform: scale(1); }
}

/* 17. Sunscreen Lotion Dispenser */
/* Standby Float */
body.p4.day.holiday-mode:not(.relaxed-mode) .p4-c2-hol-lotion-dispenser .lotion-standby-wrap {
  animation: p4C2LotionStandby 5.5s ease-in-out infinite;
}
/* Active Click */
body.p4.day.holiday-mode:not(.relaxed-mode) .p4-c2-hol-lotion-dispenser.active .lotion-click-wrap {
  animation: p4C2LotionActive 1.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}
body.p4.day.holiday-mode:not(.relaxed-mode) .p4-c2-hol-lotion-dispenser.active .lotion-pump-group {
  animation: p4C2LotionPumpPress 1.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}
body.p4.day.holiday-mode:not(.relaxed-mode) .p4-c2-hol-lotion-dispenser.active .lotion-drop {
  animation: p4C2LotionSquirt 1.5s ease-out forwards;
}
body.p4.day.holiday-mode:not(.relaxed-mode) .p4-c2-hol-lotion-dispenser.active .lotion-splat {
  animation: p4C2LotionSplat 1.5s ease-out forwards;
}
/* Ending Settle */
body.p4.day.holiday-mode:not(.relaxed-mode) .p4-c2-hol-lotion-dispenser.ending .lotion-click-wrap {
  animation: p4C2LotionSettle 0.5s ease-out forwards;
}

@keyframes p4C2LotionStandby {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-0.8px); }
}
@keyframes p4C2LotionActive {
  0% { transform: scale(1); }
  12% { transform: scale(1.08, 0.9); }
  24% { transform: scale(0.92, 1.08); }
  40% { transform: scale(1.03, 0.97); }
  100% { transform: scale(1.01); }
}
@keyframes p4C2LotionPumpPress {
  0%, 100% { transform: translate(80px, 505px) scaleY(1); }
  12% { transform: translate(80px, 509px) scaleY(0.6); }
  24% { transform: translate(80px, 505px) scaleY(1.05); }
  40% { transform: translate(80px, 505px) scaleY(1); }
}
@keyframes p4C2LotionSquirt {
  0% { opacity: 0; stroke-dasharray: 0, 30; transform: translateY(-4px); }
  10% { opacity: 1; stroke-dasharray: 10, 20; }
  25% { opacity: 1; stroke-dasharray: 30, 0; transform: translateY(8px); }
  40% { opacity: 0; transform: translateY(22px); }
  100% { opacity: 0; }
}
@keyframes p4C2LotionSplat {
  0%, 20% { opacity: 0; transform: translate(73px, 532px) scale(0.4); }
  25% { opacity: 1; transform: translate(73px, 532px) scale(1.1); }
  38% { opacity: 0.8; transform: translate(73px, 532px) scale(1.2); }
  60% { opacity: 0; transform: translate(73px, 532px) scale(1.4); }
  100% { opacity: 0; }
}
@keyframes p4C2LotionSettle {
  0% { transform: scale(1.01); }
  100% { transform: scale(1); }
}

/* 18. Ice Cream Highlighter */
/* Standby Float & Scoop bobbing */
body.p4.day.holiday-mode:not(.relaxed-mode) .p4-c2-hol-icecream-highlighter .highlighter-standby-wrap {
  animation: p4C2HighlighterStandby 5.4s ease-in-out infinite;
}
body.p4.day.holiday-mode:not(.relaxed-mode) .p4-c2-hol-icecream-highlighter .scoop-yellow {
  animation: p4C2ScoopStandby 3.8s ease-in-out infinite;
}
/* Active Click */
body.p4.day.holiday-mode:not(.relaxed-mode) .p4-c2-hol-icecream-highlighter.active .highlighter-click-wrap {
  animation: p4C2HighlighterActive 1.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}
body.p4.day.holiday-mode:not(.relaxed-mode) .p4-c2-hol-icecream-highlighter.active .highlighter-tip,
body.p4.day.holiday-mode:not(.relaxed-mode) .p4-c2-hol-icecream-highlighter.active .scoop-yellow,
body.p4.day.holiday-mode:not(.relaxed-mode) .p4-c2-hol-icecream-highlighter.active .scoop-pink {
  animation: p4C2HighlighterSweep 1.5s ease-in-out forwards;
}
body.p4.day.holiday-mode:not(.relaxed-mode) .p4-c2-hol-icecream-highlighter.active .highlight-line {
  animation: p4C2HighlightStroke 1.5s ease-out forwards;
}
/* Ending Settle */
body.p4.day.holiday-mode:not(.relaxed-mode) .p4-c2-hol-icecream-highlighter.ending .highlighter-click-wrap {
  animation: p4C2HighlighterSettle 0.5s ease-out forwards;
}

@keyframes p4C2HighlighterStandby {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-0.8px); }
}
@keyframes p4C2ScoopStandby {
  0%, 100% { transform: translateY(0) scaleY(1); }
  50% { transform: translateY(-0.4px) scaleY(1.02); }
}
@keyframes p4C2HighlighterActive {
  0% { transform: scale(1) rotate(0deg); }
  15% { transform: scale(1.08) rotate(-8deg); }
  30% { transform: scale(1.08) rotate(12deg); }
  45% { transform: scale(1.04) rotate(-4deg); }
  60% { transform: scale(1.04) rotate(4deg); }
  100% { transform: scale(1.01) rotate(0deg); }
}
@keyframes p4C2HighlighterSweep {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  15% { transform: translate(-3px, -2px) rotate(-15deg); }
  30% { transform: translate(4px, 1px) rotate(15deg); }
  45% { transform: translate(-2px, 0) rotate(-8deg); }
  60% { transform: translate(2px, 0) rotate(8deg); }
}
@keyframes p4C2HighlightStroke {
  0% { opacity: 0; stroke-dasharray: 0, 50; }
  15% { opacity: 1; stroke-dasharray: 15, 35; }
  45% { opacity: 1; stroke-dasharray: 50, 0; }
  80% { opacity: 0.8; }
  100% { opacity: 0; }
}
@keyframes p4C2HighlighterSettle {
  0% { transform: scale(1.01) rotate(0deg); }
  50% { transform: scale(0.97) rotate(-2deg); }
  100% { transform: scale(1) rotate(0deg); }
}

/* 19. Beachball Desktop Globe */
/* Standby Float & slow rotation */
body.p4.day.holiday-mode:not(.relaxed-mode) .p4-c2-hol-beachball-globe .beachglobe-standby-wrap {
  animation: p4C2BeachGlobeStandby 6s ease-in-out infinite;
}
body.p4.day.holiday-mode:not(.relaxed-mode) .p4-c2-hol-beachball-globe .beachglobe-ball-group {
  animation: p4C2BeachGlobeBallStandby 12s linear infinite;
}
/* Active Click */
body.p4.day.holiday-mode:not(.relaxed-mode) .p4-c2-hol-beachball-globe.active .beachglobe-click-wrap {
  animation: p4C2BeachGlobeActive 1.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}
body.p4.day.holiday-mode:not(.relaxed-mode) .p4-c2-hol-beachball-globe.active .beachglobe-ball-group {
  animation: p4C2BeachGlobeSpin 1.5s cubic-bezier(0.1, 0.8, 0.3, 1) forwards;
}
/* Ending Settle */
body.p4.day.holiday-mode:not(.relaxed-mode) .p4-c2-hol-beachball-globe.ending .beachglobe-click-wrap {
  animation: p4C2BeachGlobeSettle 0.5s ease-out forwards;
}

@keyframes p4C2BeachGlobeStandby {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-0.6px) rotate(1deg); }
}
@keyframes p4C2BeachGlobeBallStandby {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
@keyframes p4C2BeachGlobeActive {
  0% { transform: scale(1) rotate(0deg); }
  15% { transform: scale(1.06) rotate(-5deg); }
  30% { transform: scale(1.06) rotate(5deg); }
  100% { transform: scale(1.02) rotate(0deg); }
}
@keyframes p4C2BeachGlobeSpin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(1080deg); }
}
@keyframes p4C2BeachGlobeSettle {
  0% { transform: scale(1.02) rotate(0deg); }
  50% { transform: scale(0.98) rotate(-1deg); }
  100% { transform: scale(1) rotate(0deg); }
}

/* 20. Surfboard Clipboard */
/* Standby Float & Paper flutter */
body.p4.day.holiday-mode:not(.relaxed-mode) .p4-c2-hol-surfboard-clipboard .surfboard-standby-wrap {
  animation: p4C2SurfboardStandby 5.6s ease-in-out infinite;
}
body.p4.day.holiday-mode:not(.relaxed-mode) .p4-c2-hol-surfboard-clipboard .surfboard-paper {
  animation: p4C2SurfboardPaperSwell 4s ease-in-out infinite;
}
/* Active Click */
body.p4.day.holiday-mode:not(.relaxed-mode) .p4-c2-hol-surfboard-clipboard.active .surfboard-click-wrap {
  animation: p4C2SurfboardActive 1.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}
body.p4.day.holiday-mode:not(.relaxed-mode) .p4-c2-hol-surfboard-clipboard.active .surfboard-clip-group {
  animation: p4C2ClipSnap 1.5s ease-in-out forwards;
}
body.p4.day.holiday-mode:not(.relaxed-mode) .p4-c2-hol-surfboard-clipboard.active .surfboard-paper-group {
  animation: p4C2PaperSlide 1.5s ease-in-out forwards;
}
body.p4.day.holiday-mode:not(.relaxed-mode) .p4-c2-hol-surfboard-clipboard.active .surfboard-breeze {
  animation: p4C2SurfBreeze 1.5s ease-out forwards;
}
/* Ending Settle */
body.p4.day.holiday-mode:not(.relaxed-mode) .p4-c2-hol-surfboard-clipboard.ending .surfboard-click-wrap {
  animation: p4C2SurfboardSettle 0.5s ease-out forwards;
}

@keyframes p4C2SurfboardStandby {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-0.8px) rotate(-0.5deg); }
}
@keyframes p4C2SurfboardPaperSwell {
  0%, 100% { transform: skewX(0deg) scaleY(1); }
  50% { transform: skewX(1.5deg) scaleY(1.01); }
}
@keyframes p4C2SurfboardActive {
  0% { transform: scale(1) rotate(0deg); }
  15% { transform: scale(1.08) rotate(-7deg); }
  30% { transform: scale(1.08) rotate(7deg); }
  45% { transform: scale(1.04) rotate(-3deg); }
  60% { transform: scale(1.04) rotate(3deg); }
  100% { transform: scale(1.01) rotate(0deg); }
}
@keyframes p4C2ClipSnap {
  0%, 100% { transform: translate(135px, 438px) scaleY(1); }
  15% { transform: translate(135px, 436px) scaleY(0.7) rotateX(-20deg); }
  25% { transform: translate(135px, 438px) scaleY(1.05); }
  40% { transform: translate(135px, 436px) scaleY(0.7) rotateX(-20deg); }
  50% { transform: translate(135px, 438px) scaleY(1.05); }
}
@keyframes p4C2PaperSlide {
  0%, 100% { transform: translateY(0); }
  15% { transform: translateY(1.5px); }
  25% { transform: translateY(0); }
  40% { transform: translateY(1.5px); }
  50% { transform: translateY(0); }
}
@keyframes p4C2SurfBreeze {
  0%, 100% { opacity: 0; transform: translateY(-5px); }
  15%, 45% { opacity: 0.8; transform: translateY(5px); }
}
@keyframes p4C2SurfboardSettle {
  0% { transform: scale(1.01) rotate(0deg); }
  50% { transform: scale(0.97) rotate(-2deg); }
  100% { transform: scale(1) rotate(0deg); }
}

/* Relaxed Mode overrides for sky background animations */
body.relaxed-mode .p4-cloud,
body.relaxed-mode .p4-bird,
body.relaxed-mode .p4-balloon,
body.relaxed-mode .p4-star,
body.relaxed-mode .p4-moon,
body.relaxed-mode .p4-car-right,
body.relaxed-mode .p4-car-left {
  animation: none !important;
  filter: none !important;
  transition: none !important;
  transform: none !important;
}

/* Relaxed Mode overrides for buzzing bees */
body.relaxed-mode .p4-office-bee-container {
  display: none !important;
}