/* assets/css/style.css */

/* Custom Scrollbar for better aesthetics */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
::-webkit-scrollbar-track {
    background: transparent;
}
::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

.custom-scrollbar::-webkit-scrollbar {
    width: 4px;
}

/* Animations */
.fade-in {
    animation: fadeIn 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes fadeIn {
    from { 
        opacity: 0; 
        transform: translateY(10px); 
    }
    to { 
        opacity: 1; 
        transform: translateY(0); 
    }
}

/* Custom Select Dropdown Styling (Premium & Soft) */
select.custom-select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%236b7280'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    background-size: 1.2em;
    padding-right: 2.5rem;
    box-shadow: 0 2px 4px rgba(0,0,0,0.02);
    transition: all 0.2s ease-in-out;
    cursor: pointer;
}
select.custom-select:hover {
    box-shadow: 0 4px 6px -1px rgba(79, 70, 229, 0.1), 0 2px 4px -1px rgba(79, 70, 229, 0.06);
    border-color: #c7d2fe;
}
select.custom-select:focus {
    box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.15);
}
select.custom-select:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    background-color: #f3f4f6;
}

/* Custom Status Radio Buttons for Attendance */
.status-radio input:checked + div {
    color: white;
    transform: scale(1.05);
    font-weight: bold;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.status-radio input[value="มา"]:checked + div { 
    background-color: #10b981; /* emerald-500 */
    border-color: #10b981; 
}
.status-radio input[value="สาย"]:checked + div { 
    background-color: #0ea5e9; /* sky-500 */
    border-color: #0ea5e9; 
}
.status-radio input[value="กิจ"]:checked + div { 
    background-color: #a855f7; /* purple-500 */
    border-color: #a855f7; 
}
.status-radio input[value="ป่วย"]:checked + div { 
    background-color: #eab308; /* yellow-500 */
    border-color: #eab308; 
}
.status-radio input[value="ขาด"]:checked + div { 
    background-color: #ef4444; /* red-500 */
    border-color: #ef4444; 
}

/* Sidebar Active State Customization (Ultra-Premium WOW Style - ONLY for Sidebar) */
#sidebar-nav .nav-item.active {
    background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%) !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    box-shadow: 0 10px 20px -5px rgba(79, 70, 229, 0.4), 0 4px 6px -2px rgba(124, 58, 237, 0.2) !important;
    position: relative;
}

#sidebar-nav .nav-item.active i, 
#sidebar-nav .nav-item.active span,
#sidebar-nav .nav-item.active p {
    color: #ffffff !important;
}

#sidebar-nav .nav-item.active::after {
    content: '';
    position: absolute;
    right: 0;
    top: 20%;
    height: 60%;
    width: 4px;
    background: #ffffff;
    border-radius: 4px 0 0 4px;
    box-shadow: 0 0 8px rgba(255, 255, 255, 0.9);
}

/* Micro animations and WOW hover effects */
.wow-card {
    transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}
.wow-card:hover {
    transform: translateY(-6px) scale(1.015) !important;
    box-shadow: 0 20px 30px -10px rgba(99, 102, 241, 0.18), 0 10px 15px -5px rgba(0, 0, 0, 0.04) !important;
}

.wow-icon {
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}
.wow-card:hover .wow-icon {
    transform: scale(1.18) rotate(8deg) !important;
}

/* Pulse badge indicator */
.pulse-glow {
    animation: pulseGlow 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
@keyframes pulseGlow {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.7; transform: scale(1.1); }
}


/* Fix for number input arrows */
input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
  -webkit-appearance: none; 
  margin: 0; 
}

/* Mobile Responsiveness & Zero Horizontal Overflow */
html, body {
  overflow-x: hidden;
  width: 100%;
  max-width: 100vw;
}

@media (max-width: 768px) {
  header.h-20 {
    height: auto !important;
    min-height: 4.5rem !important;
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
    flex-wrap: wrap !important;
    gap: 0.5rem !important;
  }
}

/* =====================================================
   LUXURY FLOATING GLASS BOTTOM DOCK (MOBILE / TABLET)
   Apple iOS & Modern App Style
   ===================================================== */
#mobile-bottom-bar {
  background: rgba(255, 255, 255, 0.78) !important;
  backdrop-filter: blur(28px) saturate(190%) !important;
  -webkit-backdrop-filter: blur(28px) saturate(190%) !important;
  border: 1px solid rgba(255, 255, 255, 0.75) !important;
  box-shadow: 0 12px 36px -6px rgba(15, 23, 42, 0.12),
              0 0 0 1px rgba(226, 232, 240, 0.45) !important;
}

.bnav-tab {
  position: relative;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

.bnav-tab::after {
  display: none !important;
}

.bnav-tab:active {
  transform: scale(0.92);
}

.bnav-tab.active {
  background: transparent !important;
  box-shadow: none !important;
}

.bnav-tab.active .bnav-icon-wrap {
  background: rgba(79, 70, 229, 0.12) !important;
  border-radius: 10px;
}

.bnav-tab.active i {
  color: #4f46e5 !important;
  transform: translateY(-1px);
}

.bnav-tab.active span {
  color: #4338ca !important;
  font-weight: 800 !important;
}

/* Red Alert Pulse Beacon Box (ที่พี่ชอบ) */
.bnav-alert-box {
  position: absolute;
  top: -9px;
  right: 50%;
  transform: translateX(50%);
  background: linear-gradient(135deg, #f43f5e 0%, #e11d48 100%);
  color: #ffffff;
  font-size: 8.5px;
  font-weight: 900;
  padding: 1.5px 6px;
  border-radius: 9999px;
  box-shadow: 0 4px 12px rgba(225, 29, 72, 0.45);
  border: 1.5px solid #ffffff;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  white-space: nowrap;
  letter-spacing: -0.01em;
  z-index: 10;
  pointer-events: none;
  transition: transform 0.18s cubic-bezier(0.16, 1, 0.3, 1), background 0.3s ease, box-shadow 0.3s ease;
}

.bnav-pulse-ring {
  width: 5px;
  height: 5px;
  border-radius: 9999px;
  background-color: #ffffff;
  animation: pulseBeacon 1.5s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes pulseBeacon {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(1.4); }
}

/* Green state when checked */
.bnav-alert-box.is-checked {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
  box-shadow: 0 4px 12px rgba(5, 150, 105, 0.4) !important;
}

/* Prominent Attendance Icon Square */
.bnav-icon-highlight {
  background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
  box-shadow: 0 6px 16px -2px rgba(79, 70, 229, 0.45),
              0 2px 4px rgba(124, 58, 237, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.35);
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.bnav-tab-attendance:active .bnav-icon-highlight {
  transform: scale(0.9);
}

/* Sticky Quick-Save Pill */
#att-sticky-quick-bar {
  transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* More Drawer Animations */
#more-menu-drawer.is-open {
  display: block !important;
}

#more-menu-drawer.is-open .drawer-backdrop {
  opacity: 1;
}

#more-menu-drawer.is-open .drawer-panel {
  transform: translateY(0);
}

.more-drawer-tile {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 18px;
  padding: 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}

.more-drawer-tile:active {
  transform: scale(0.96);
  background: #eef2ff;
  border-color: #c7d2fe;
}

.more-drawer-tile .tile-icon {
  width: 36px;
  height: 36px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 15px;
}

.more-drawer-tile .tile-title {
  font-size: 12px;
  font-weight: 700;
  color: #1e293b;
  line-height: 1.25;
}

.more-drawer-tile .tile-sub {
  font-size: 10px;
  color: #64748b;
  margin-top: 2px;
}

/* ==========================================================================
   PJSIS Creative UI Motion Layer (27 Signature Moves System)
   ========================================================================== */

/* 5. Ambient Floating / Bobbing */
@keyframes floatBob1 { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@keyframes floatBob2 { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
.animate-float-1 { animation: floatBob1 3.2s ease-in-out infinite; }
.animate-float-2 { animation: floatBob2 4.0s ease-in-out 0.6s infinite; }

/* 6. Ripple Rings */
@keyframes ripplePulse {
  0% { transform: scale(0.6); opacity: 0.9; }
  100% { transform: scale(2.2); opacity: 0; }
}
.ripple-ring-beacon {
  animation: ripplePulse 2.4s cubic-bezier(0, 0.2, 0.8, 1) infinite;
}

/* 7. Spotlight Effect (Disabled per user request - completely clean) */
.spotlight-card { position: relative; }
.spotlight-card::before {
  display: none !important;
}

/* 18. Shimmer Card Sweep (ท่า 18: แสงสีเงินกวาดผ่าน - Shimmer Sweep) */
@keyframes shimmerSweepVivid {
  0% {
    transform: translateX(-160%) skewX(-25deg);
  }
  50% {
    transform: translateX(260%) skewX(-25deg);
  }
  100% {
    transform: translateX(260%) skewX(-25deg);
  }
}
.shimmer-sweep-card,
.shimmer-card-hero {
  position: relative;
  overflow: hidden;
}
.shimmer-sweep-card::after,
.shimmer-card-hero::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 65%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.08) 20%,
    rgba(255, 255, 255, 0.88) 50%,
    rgba(255, 255, 255, 0.08) 80%,
    transparent 100%
  );
  transform: translateX(-160%) skewX(-25deg);
  animation: shimmerSweepVivid 3.2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
  pointer-events: none;
  z-index: 25;
}

/* 10. 3D Tilt */
.tilt-card {
  transition: transform 0.15s ease-out;
  transform-style: preserve-3d;
  will-change: transform;
}
.tilt-card.resetting {
  transition: transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* 12. Dual-Layer Neon Glowing Border */
@keyframes neonRainbowShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
@keyframes auraPulse {
  0%, 100% { box-shadow: 0 0 18px rgba(139, 92, 246, 0.55), 0 0 38px rgba(236, 72, 153, 0.35); }
  50% { box-shadow: 0 0 28px rgba(139, 92, 246, 0.8), 0 0 58px rgba(236, 72, 153, 0.55); }
}
.neon-glow-card {
  position: relative;
  padding: 3px;
  border-radius: 26px;
  background: linear-gradient(135deg, #ec4899, #8b5cf6, #3b82f6, #06b6d4, #10b981, #ec4899);
  background-size: 300% 300%;
  animation: neonRainbowShift 4s ease infinite, auraPulse 3s ease-in-out infinite;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.neon-glow-card:hover {
  transform: scale(1.025);
  box-shadow: 0 0 35px rgba(139, 92, 246, 0.95), 0 0 70px rgba(236, 72, 153, 0.75) !important;
}
.neon-glow-inner {
  border-radius: calc(26px - 3px);
  width: 100%;
  height: 100%;
}

/* 17. Tactile Button Click (ท่า 17: ปุ่มเด้งดึ๋ง สปริงชัดเจน นุ่มนวลมีพลัง) */
.tactile-btn {
  transition: transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.15s;
  cursor: pointer;
  user-select: none;
}
.tactile-btn:active,
.status-btn:active {
  transform: scale(0.82) translateY(2px) !important;
}
@keyframes tactileBtnBounce {
  0% {
    transform: scale(0.78);
  }
  38% {
    transform: scale(1.28) translateY(-4px);
  }
  68% {
    transform: scale(0.90) translateY(1px);
  }
  86% {
    transform: scale(1.08) translateY(-1px);
  }
  100% {
    transform: scale(1) translateY(0);
  }
}
.tactile-bounce {
  animation: tactileBtnBounce 0.44s cubic-bezier(0.34, 1.56, 0.64, 1) both;
  z-index: 5;
}

/* 1. Stagger Rows (ท่า 1: แถวสไลด์เรียงคิว - Stagger Cascade Entrance ชัดเจน มีชีวิตชีวา) */
@keyframes staggerAttFadeSlide {
  0% {
    opacity: 0;
    transform: translateY(38px) scale(0.94);
  }
  65% {
    opacity: 1;
    transform: translateY(-4px) scale(1.015);
  }
  85% {
    transform: translateY(2px) scale(0.995);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
.stagger-att-row {
  animation: staggerAttFadeSlide 0.52s cubic-bezier(0.2, 0.8, 0.2, 1) both;
  will-change: transform, opacity;
}

/* 18. Shimmer Button Sweep (ประกายแสงวูบผ่านปุ่มแบบสปาร์คเคิลสวยงาม) */
@keyframes shimmerPass {
  0% { transform: translateX(-160%) skewX(-25deg); }
  60%, 100% { transform: translateX(260%) skewX(-25deg); }
}
.shimmer-btn {
  position: relative;
  overflow: hidden;
}
.shimmer-btn::after {
  content: '';
  position: absolute;
  top: 0; left: 0; width: 60%; height: 100%;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.1) 20%,
    rgba(255, 255, 255, 0.82) 50%,
    rgba(255, 255, 255, 0.1) 80%,
    transparent 100%
  );
  animation: shimmerPass 2.8s cubic-bezier(0.4, 0, 0.2, 1) infinite;
  pointer-events: none;
  z-index: 10;
}

/* 19. Stamp Bounce Effect (ท่า 19: ตราประทับกระแทกหนักแน่นเมื่อบันทึกสำเร็จ) */
@keyframes stampThump {
  0% { transform: scale(2.8) rotate(-16deg); opacity: 0; }
  55% { transform: scale(0.88) rotate(-4deg); opacity: 1; }
  75% { transform: scale(1.1) rotate(-4deg); }
  100% { transform: scale(1) rotate(0deg); opacity: 1; }
}
.stamp-badge-animate {
  display: inline-block;
  animation: stampThump 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

/* 22. Magnetic Hover Item */
.magnetic-item {
  transition: transform 0.2s cubic-bezier(0.25, 1, 0.5, 1);
  will-change: transform;
}

/* 23. Sliding Liquid Tabs */
.liquid-tab-nav {
  position: relative;
  display: inline-flex;
  background: #f1f5f9;
  padding: 4px;
  border-radius: 9999px;
}
.liquid-tab-pill {
  position: absolute;
  top: 4px; bottom: 4px;
  background: #4f46e5;
  border-radius: 9999px;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 4px 12px rgba(79, 70, 229, 0.35);
  pointer-events: none;
}

/* 11. ท่าลำแสงวิ่งรอบกรอบ (Border Beam) */
@keyframes borderBeamSpin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.border-beam-box {
  position: relative;
  overflow: hidden;
  border-radius: 32px;
  background: #ffffff;
  box-shadow: 0 25px 60px -15px rgba(15, 23, 42, 0.12), 0 0 0 1px rgba(226, 232, 240, 0.85);
  border: none;
}

.border-beam-box::before {
  content: '';
  position: absolute;
  inset: -150%;
  background: conic-gradient(
    from 0deg,
    transparent 0deg,
    transparent 280deg,
    rgba(99, 102, 241, 0.85) 320deg,
    rgba(168, 85, 247, 1) 345deg,
    rgba(56, 189, 248, 1) 360deg
  );
  animation: borderBeamSpin 4.5s linear infinite;
  pointer-events: none;
  z-index: 1;
}

.border-beam-box::after {
  content: '';
  position: absolute;
  inset: 2px;
  background: #ffffff;
  border-radius: 30px;
  z-index: 2;
  pointer-events: none;
}

.border-beam-box > * {
  position: relative;
  z-index: 3;
}

/* 24. Multi-Layer 3D Parallax */
.parallax-wrap {
  perspective: 1200px;
  perspective-origin: center center;
}
.parallax-box {
  transform-style: preserve-3d;
  will-change: transform;
  transition: transform 0.14s cubic-bezier(0.2, 0, 0, 1), box-shadow 0.25s ease;
}
.layer-z-back {
  transform: translateZ(0px);
  transform-style: preserve-3d;
}
.layer-z-mid {
  transform: translateZ(28px);
  transform-style: preserve-3d;
}
.layer-z-front {
  transform: translateZ(56px);
  transform-style: preserve-3d;
}

/* 25. Laser Border Draw (Silky Smooth Organic Motion) */
.laser-border-box {
  position: relative;
  transition: border-color 0.2s ease, transform 0.25s ease, box-shadow 0.25s ease;
}
.laser-border-box:hover,
.laser-border-box:active {
  border-color: transparent !important;
}
.laser-svg {
  position: absolute;
  top: -2px;
  left: -2px;
  width: calc(100% + 4px);
  height: calc(100% + 4px);
  pointer-events: none;
  z-index: 10;
  fill: none !important;
  background: transparent !important;
  border-radius: 1.05rem;
  overflow: visible;
}
.laser-svg * {
  fill: none !important;
}
.laser-rect {
  fill: none !important;
  stroke: #8b5cf6;
  stroke-width: 3.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  transition: stroke-dashoffset 1.25s cubic-bezier(0.25, 1, 0.35, 1), opacity 0.35s ease;
  filter: drop-shadow(0 0 6px rgba(139, 92, 246, 0.6)) drop-shadow(0 0 14px rgba(139, 92, 246, 0.35));
  opacity: 0;
}
.laser-rect-green {
  stroke: #10b981 !important;
  filter: drop-shadow(0 0 6px rgba(16, 185, 129, 0.75)) drop-shadow(0 0 14px rgba(16, 185, 129, 0.4)) !important;
}
.laser-rect-sky {
  stroke: #0ea5e9 !important;
  filter: drop-shadow(0 0 6px rgba(14, 165, 233, 0.75)) drop-shadow(0 0 14px rgba(14, 165, 233, 0.4)) !important;
}
.laser-rect-purple {
  stroke: #a855f7 !important;
  filter: drop-shadow(0 0 6px rgba(168, 85, 247, 0.75)) drop-shadow(0 0 14px rgba(168, 85, 247, 0.4)) !important;
}
.laser-rect-red {
  stroke: #f43f5e !important;
  filter: drop-shadow(0 0 6px rgba(244, 63, 94, 0.75)) drop-shadow(0 0 14px rgba(244, 63, 94, 0.4)) !important;
}
.laser-rect-slate {
  stroke: #475569 !important;
  filter: drop-shadow(0 0 6px rgba(71, 85, 105, 0.65)) drop-shadow(0 0 12px rgba(51, 65, 85, 0.35)) !important;
}
.laser-border-box:hover .laser-rect,
.laser-border-box:active .laser-rect {
  stroke-dashoffset: 0;
  opacity: 1;
}

/* 26. ท่าการ์ดยืดขยายคลี่ข้อมูล (Expandable Peek Card / Progressive Disclosure) */
.peek-expandable-card {
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.peek-expandable-card.is-expanded {
  box-shadow: 0 12px 30px -5px rgba(99, 102, 241, 0.12), 0 4px 10px rgba(0, 0, 0, 0.03);
}
.peek-drawer {
  max-height: 0px;
  opacity: 0;
  overflow: hidden;
  transition: max-height 0.45s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.35s ease;
  will-change: max-height, opacity;
}
.peek-expandable-card.is-expanded .peek-drawer {
  opacity: 1;
}
.peek-arrow {
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* 16. macOS Dock Magnification */
.dock-nav-item {
  transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1), font-size 0.22s;
  will-change: transform;
}
.bnav-icon-wrap,
.bnav-icon-highlight {
  transition: transform 0.18s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
}

/* 4. Tracing Beam Accent */
.tracing-beam-wrap {
  position: relative;
  padding-left: 18px;
}
.tracing-beam-line {
  position: absolute;
  left: 6px;
  top: 8px;
  bottom: 8px;
  width: 2.5px;
  background: linear-gradient(180deg, #6366f1 0%, #ec4899 50%, #3b82f6 100%);
  background-size: 100% 300%;
  animation: beamFlow 3.5s linear infinite;
  border-radius: 9999px;
  box-shadow: 0 0 8px rgba(99, 102, 241, 0.6);
}
@keyframes beamFlow {
  0% { background-position: 0% 0%; }
  100% { background-position: 0% 300%; }
}

/* 1. Stagger Cascade Entrance */
@keyframes staggerFadeUp {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.stagger-card {
  animation: staggerFadeUp 0.35s cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* Red Alert Ripple Sonar (Move 6) */
.bnav-alert-ripple {
  position: absolute;
  inset: -4px;
  border-radius: 9999px;
  border: 1.5px solid rgba(244, 63, 94, 0.8);
  animation: rippleRingSonar 2s cubic-bezier(0, 0.2, 0.8, 1) infinite;
  pointer-events: none;
}
@keyframes rippleRingSonar {
  0% { transform: scale(0.9); opacity: 0.95; }
  100% { transform: scale(1.7); opacity: 0; }
}

/* 27. Hacker Text Scramble */
.font-cyber {
  font-family: 'JetBrains Mono', 'Fira Code', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  letter-spacing: 0.06em;
}
.scramble-active {
  color: #4f46e5 !important;
  text-shadow: 0 0 10px rgba(99, 102, 241, 0.45);
}