/* Brand fallbacks (Tailwind @theme lives in index.html) */
.bg-brand-primary{background-color:#15803D}
.text-brand-primary{color:#15803D}
.border-brand-primary{border-color:#15803D}
button.bg-brand-primary:hover,select.bg-brand-primary:hover{background-color:#166534}
button:focus-visible,select:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid #15803D;outline-offset:2px}
button.bg-brand-primary:focus-visible,select.bg-brand-primary:focus-visible{background-color:#166534;color:#fff}
button:disabled,button[disabled]{opacity:1;background-color:#E2E8F0 !important;color:#475569 !important;border-color:#CBD5E1 !important;cursor:not-allowed}
select.bg-brand-primary option{background:#15803D;color:#fff}

  body {
    background-color: #F7F7F7;
    color: #191919;
    font-family: 'Inter', sans-serif;
  }

  ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
  }

  ::-webkit-scrollbar-track {
    background: #f1f1f1;
  }

  ::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 4px;
  }

  ::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
  }

  .card-shadow {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
  }

  .goal-badge {
    font-size: 0.7rem;
    padding: 2px 6px;
    border-radius: 12px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 4px;
  }

  .brand-gradient-bg {
    background: linear-gradient(135deg, #14532D 0%, #22C55E 50%, #15803D 100%);
    background-size: 200% 200%;
    transition: background-position 0.5s ease;
  }

  .brand-gradient-bg:hover {
    background-position: right center;
  }

  .brand-gradient-text {
    background: linear-gradient(135deg, #14532D 0%, #22C55E 60%, #15803D 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  @keyframes pulse-fade {

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

    50% {
      opacity: 0.7;
      transform: scale(1.05);
    }
  }

  .animate-pulse-fade {
    animation: pulse-fade 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  }

  #loading-screen {
    transition: opacity 0.5s ease-out;
  }

  .tree-line-wrapper {
    position: relative;
  }

  .tree-line-wrapper::before {
    content: '';
    position: absolute;
    top: -12px;
    left: -14px;
    bottom: 50%;
    width: 1px;
    background-color: #e2e8f0;
  }

  .tree-line-wrapper::after {
    content: '';
    position: absolute;
    top: 50%;
    left: -14px;
    width: 10px;
    height: 1px;
    background-color: #e2e8f0;
  }

  @keyframes bike-bounce {

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

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

  @keyframes street-scroll {
    from {
      transform: translateX(0);
    }

    to {
      transform: translateX(-100%);
    }
  }

  @keyframes wind-dash {
    0% {
      transform: translateX(100px);
      opacity: 0;
    }

    10% {
      opacity: 1;
    }

    90% {
      opacity: 1;
    }

    100% {
      transform: translateX(-200px);
      opacity: 0;
    }
  }

  .animate-bike {
    animation: bike-bounce 0.8s ease-in-out infinite;
    transform-origin: bottom center;
  }

  .street-line {
    animation: street-scroll 1s linear infinite;
  }

  .wind-line {
    animation: wind-dash linear infinite;
  }

  .wind-1 {
    animation-duration: 1.2s;
    animation-delay: 0s;
  }

  .wind-2 {
    animation-duration: 1.5s;
    animation-delay: 0.4s;
  }

  .wind-3 {
    animation-duration: 0.9s;
    animation-delay: 0.7s;
  }

  /* 🎯 FIX: Smooth Google-style Indeterminate Progress Bar */
  @keyframes progress-indeterminate {
    0% {
      left: -35%;
      width: 35%;
    }

    50% {
      width: 50%;
      /* Lumalapad nang kaunti sa gitna para sa natural na effect */
    }

    100% {
      left: 100%;
      /* Siguradong lalabas sa kanang dulo bago mag-reset */
      width: 35%;
    }
  }

  .animate-progress-indeterminate {
    position: absolute;
    top: 0;
    height: 100%;
    background: linear-gradient(90deg, #14532D, #22C55E, #15803D);
    animation: progress-indeterminate 1.4s infinite cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 9999px;
  }


  @keyframes pulse-fade {

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

    50% {
      opacity: 0.7;
      transform: scale(1.05);
    }
  }

  .animate-pulse-fade {
    animation: pulse-fade 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  }

  #loading-screen {
    transition: opacity 0.5s ease-out;
  }

  @keyframes street-scroll {
    from {
      transform: translateX(0);
    }

    to {
      transform: translateX(-100%);
    }
  }

  @keyframes wind-dash {
    0% {
      transform: translateX(100px);
      opacity: 0;
    }

    10% {
      opacity: 1;
    }

    90% {
      opacity: 1;
    }

    100% {
      transform: translateX(-200px);
      opacity: 0;
    }
  }

  .street-line {
    animation: street-scroll 1s linear infinite;
  }

  .wind-line {
    animation: wind-dash linear infinite;
  }

  .wind-1 {
    animation-duration: 1.2s;
    animation-delay: 0s;
  }

  .wind-2 {
    animation-duration: 1.5s;
    animation-delay: 0.4s;
  }

  .wind-3 {
    animation-duration: 0.9s;
    animation-delay: 0.7s;
  }

  /* --- ROBOTIC ANIMATIONS --- */
  .robot-chassis {
    animation: robotEngineHum 0.08s infinite linear;
  }

  @keyframes robotEngineHum {

    0%,
    100% {
      transform: translateY(0);
    }

    50% {
      transform: translateY(-0.8px);
    }
  }

  .wheel {
    animation: spinSmooth 0.5s infinite linear;
  }

  .wheel-left {
    transform-origin: 55px 135px;
  }

  .wheel-right {
    transform-origin: 155px 135px;
  }

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

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

  .lidar-spinner {
    animation: radarRotate 2s infinite linear;
    transform-origin: 140px 18px;
  }

  @keyframes radarRotate {
    0% {
      opacity: 0.6;
    }

    50% {
      opacity: 1;
    }

    100% {
      opacity: 0.6;
    }
  }

  .ground-line {
    stroke-dasharray: 16, 12;
    animation: forwardDrive 0.4s infinite linear;
  }

  @keyframes forwardDrive {
    0% {
      stroke-dashoffset: 0;
    }

    100% {
      stroke-dashoffset: 28;
    }
  }


  .custom-checkbox {
    appearance: none;
    background-color: #fff;
    margin: 0;
    font: inherit;
    color: currentColor;
    width: 1.15em;
    height: 1.15em;
    border: 1px solid #d1d5db;
    border-radius: 0.25em;
    display: grid;
    place-content: center;
    cursor: pointer;
  }

  .custom-checkbox::before {
    content: "";
    width: 0.65em;
    height: 0.65em;
    transform: scale(0);
    transition: 120ms transform ease-in-out;
    box-shadow: inset 1em 1em white;
    background-color: white;
    transform-origin: center;
    clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
  }

  .custom-checkbox:checked {
    background-color: #E11D48;
    border-color: #E11D48;
  }

  .custom-checkbox:checked::before {
    transform: scale(1);
  }

  .filter-options-list {
    scrollbar-width: thin;
  }

  /* 🎯 EMERGENCY CURSOR & TOUR OVERLAY PROTECTION */
  #tour-spotlight-overlay,
  #tour-dialogue-box,
  .tour-highlight-active {
    cursor: default !important;
  }

  .tour-highlight-active {
    transition: all 0.2s ease-in-out !important;
  }

  /* 🎯 BREAK CSS STACKING CONTEXT PARA LUMITAW ANG TAB BUTTON ABOVE OVERLAY */
  #tl-matrix-section:has(#tl-tab-aicoaching.tour-highlight-active),
  #tl-explorer-tabs:has(#tl-tab-aicoaching.tour-highlight-active) {
    position: relative !important;
    z-index: 1005 !important;
    overflow: visible !important;
    /* Binuksan ang overflow para hindi ma-trap */
  }

  #tl-tab-aicoaching.tour-highlight-active {
    position: relative !important;
    z-index: 1010 !important;
    background-color: #9333EA !important;
    color: #FFFFFF;
    opacity: 1 !important;
    box-shadow: 0 0 0 4px #A855F7, 0 0 35px rgba(168, 85, 247, 1) !important;
    border-radius: 12px !important;
  }

  #tl-tab-aicoaching.tour-highlight-active * {
    color: #FFFFFF;
    opacity: 1 !important;
  }

  .loader-container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100vh;
    background-color: #FAFAFA;
    font-family: system-ui, -apple-system, sans-serif;
  }

  .loader-wrapper {
    text-align: center;
    width: 240px;
    /* Nilakihan ng kaunti para sa bagong shape */
  }

  .loader-bot {
    width: 100%;
    height: auto;
    overflow: visible;
  }

  /* --- ROBOTIC SMOOTH ANIMATIONS --- */

  /* Smooth Mechanical Engine Hum */
  .robot-chassis {
    animation: robotEngineHum 0.08s infinite linear;
  }

  @keyframes robotEngineHum {

    0%,
    100% {
      transform: translateY(0);
    }

    50% {
      transform: translateY(-0.8px);
    }
  }

  /* Smooth Wheel Rotation */
  .wheel {
    animation: spinSmooth 0.5s infinite linear;
  }

  /* smooth wheel transition and positions */
  .wheel-left {
    transform-origin: 55px 135px;
  }

  .wheel-right {
    transform-origin: 155px 135px;
  }

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

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

    /* Binago sa positive degrees dahil nakaharap na sa kanan */
  }

  /* Radar/Lidar sensor spinning loop sa tuktok */
  .lidar-spinner {
    animation: radarRotate 2s infinite linear;
    transform-origin: 140px 18px;
  }

  @keyframes radarRotate {
    0% {
      opacity: 0.6;
    }

    50% {
      opacity: 1;
    }

    100% {
      opacity: 0.6;
    }
  }

  /* Mabilis na pag-andar ng kalsada */
  .ground-line {
    stroke-dasharray: 16, 12;
    animation: forwardDrive 0.4s infinite linear;
  }

  @keyframes forwardDrive {
    0% {
      stroke-dashoffset: 0;
    }

    100% {
      stroke-dashoffset: 28;
    }

    /* Binaligtad ang takbo para umakma sa pagharap sa kanan */
  }

  /* Typography Styling */
  .loading-text {
    margin-top: 1.2rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: #2D3748;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    display: flex;
    justify-content: center;
  }

  .dots {
    animation: ellipsis 1.5s infinite steps(4);
    width: 12px;
    text-align: left;
    display: inline-block;
  }

  @keyframes ellipsis {
    0% {
      width: 0px;
    }

    33% {
      width: 4px;
    }

    66% {
      width: 8px;
    }

    100% {
      width: 12px;
    }
  }

  /* =========================================
   10 ELEMENT-RICH BACKGROUND ANIMATIONS
========================================= */
  @keyframes spin {
    100% {
      transform: rotate(360deg);
    }
  }

  @keyframes floatUp {
    0% {
      transform: translateY(10vh) scale(0.8);
      opacity: 0;
    }

    20% {
      opacity: 1;
    }

    100% {
      transform: translateY(-110vh) scale(1.2) rotate(180deg);
      opacity: 0;
    }
  }

  @keyframes floatDown {
    0% {
      transform: translateY(-10vh) rotate(0deg);
      opacity: 1;
    }

    100% {
      transform: translateY(110vh) rotate(360deg);
      opacity: 0;
    }
  }
 
 /* =========================================
      1. SPLASH
      Soft Paint Splatters 
  ========================================= */
  .paint-splatter {
    position: absolute;
    border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%;
    opacity: 0;
    /* Soft edges to retain the paint shape without harsh intersections */
    filter: blur(12px); 
    will-change: transform, opacity;
    /* Smooth, 8-second breathing animation */
    animation: paint-pop-soft 8s ease-in-out infinite alternate;
  }

  /* Balanced opacity: visible colors, but not blindingly bright */
  .paint-pink   { background: rgba(255, 20, 147, 0.45); animation-delay: 0.0s; }
  .paint-blue   { background: rgba(0, 191, 255, 0.45); animation-delay: -1.5s; }
  .paint-yellow { background: rgba(255, 215, 0, 0.45); animation-delay: -3.0s; }
  .paint-green  { background: rgba(16, 185, 129, 0.40); animation-delay: -4.5s; }
  .paint-purple { background: rgba(139, 92, 246, 0.45); animation-delay: -6.0s; }
  .paint-orange { background: rgba(255, 69, 0, 0.40); animation-delay: -7.5s; }
  .paint-cyan   { background: rgba(6, 182, 212, 0.45); animation-delay: -9.0s; }

  @keyframes paint-pop-soft {
    0%   { transform: scale(0.9) rotate(0deg); opacity: 0.2; }
    100% { transform: scale(1.15) rotate(10deg); opacity: 0.7; }
  }

  /* =========================================
     2. BUBBLES - Atlantis (Atlantis Hub)
     Oceanic Cyan-Blue Abyss & Sunlight Rays
  ========================================= */
  .atlantis-bubble {
    position: absolute;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.8), rgba(34, 211, 238, 0.25) 60%, rgba(3, 105, 161, 0.5) 100%);
    box-shadow: inset 0 0 15px rgba(34, 211, 238, 0.5), 0 0 12px rgba(34, 211, 238, 0.3);
    will-change: transform, opacity;
    animation: bubbleRise 8s linear infinite;
  }
  .atlantis-ray {
    position: absolute;
    top: -10%;
    width: 20vw;
    height: 120vh;
    background: linear-gradient(180deg, rgba(34, 211, 238, 0.35) 0%, rgba(6, 182, 212, 0.1) 70%, transparent 100%);
    transform: rotate(-15deg);
    transform-origin: top left;
    will-change: opacity;
    animation: rayShimmer 4s ease-in-out infinite alternate;
  }

  @keyframes bubbleRise {
    0%   { transform: translateY(110vh) scale(0.5); opacity: 0; }
    20%  { opacity: 0.9; }
    80%  { opacity: 0.9; }
    100% { transform: translateY(-10vh) scale(1.2); opacity: 0; }
  }
  @keyframes rayShimmer {
    0%   { opacity: 0.3; }
    100% { opacity: 0.8; }
  }

  /* =========================================
     3. DESERT - Cairo (G-Town)
     Warm Amber Dunes & Glowing Sand Particles
  ========================================= */
  .sand-grain {
    position: absolute;
    border-radius: 50%;
    background: #fef08a;
    box-shadow: 0 0 8px rgba(254, 240, 138, 0.9);
    will-change: transform, opacity;
    animation: blowSand 4s linear infinite;
  }

  @keyframes blowSand {
    0%   { transform: translate(-10vw, 0) scale(0.6); opacity: 0; }
    20%  { opacity: 0.9; }
    80%  { opacity: 0.9; }
    100% { transform: translate(100vw, -15vh) scale(1.2); opacity: 0; }
  }

  /* =========================================
     4. GRID - Fort Excellence
     Cyan Cyber-Blueprint Grid
  ========================================= */
  .grid-scan-laser {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, transparent 0%, #38bdf8 50%, transparent 100%);
    box-shadow: 0 0 15px 4px rgba(56, 189, 248, 0.6);
    will-change: transform, opacity;
    animation: scanLaser 4s linear infinite;
  }
  .grid-hex-node {
    position: absolute;
    background: rgba(14, 165, 233, 0.12);
    border: 1.5px solid rgba(56, 189, 248, 0.5);
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    box-shadow: 0 0 20px rgba(14, 165, 233, 0.3);
    will-change: transform, opacity;
    animation: hex-pulse 3s ease-in-out infinite alternate;
  }
  .grid-crosshair {
    position: absolute;
    color: rgba(56, 189, 248, 0.7);
    font-family: monospace;
    font-size: 20px;
    will-change: opacity;
    animation: crosshairBlink 2.5s ease-in-out infinite alternate;
  }

  @keyframes scanLaser {
    0%   { transform: translateY(-10vh); opacity: 0; }
    15%  { opacity: 1; }
    85%  { opacity: 1; }
    100% { transform: translateY(110vh); opacity: 0; }
  }
  @keyframes hex-pulse {
    0%   { transform: scale(0.95); opacity: 0.3; }
    100% { transform: scale(1.08); opacity: 0.8; }
  }
  @keyframes crosshairBlink {
    0%   { opacity: 0.2; }
    100% { opacity: 0.9; }
  }

  /* =========================================
     5. FIREFLIES
     Vibrant Emerald Jungle Canopy & Orbs
  ========================================= */
  .canopy-spore {
    position: absolute;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(167, 243, 208, 0.6) 0%, rgba(16, 185, 129, 0.1) 70%, transparent 100%);
    box-shadow: 0 0 20px rgba(52, 211, 153, 0.4);
    will-change: transform, opacity;
    animation: floatSpore 6s ease-in-out infinite alternate;
  }
  .firefly-orb {
    position: absolute;
    border-radius: 50%;
    background: #a7f3d0;
    box-shadow: 0 0 15px 5px rgba(52, 211, 153, 0.8), 0 0 30px 10px rgba(16, 185, 129, 0.4);
    will-change: transform, opacity;
    animation: darting 6s ease-in-out infinite alternate;
  }

  @keyframes floatSpore {
    0%   { transform: translateY(0) scale(0.8); opacity: 0.3; }
    100% { transform: translateY(-40px) scale(1.2); opacity: 0.9; }
  }
  @keyframes darting {
    0%   { transform: translate(0, 0) scale(0.8); opacity: 0.5; }
    50%  { opacity: 1; }
    100% { transform: translate(50px, -80px) scale(1.2); opacity: 0.2; }
  }

  /* =========================================
     6. STADIUM - House Teamwork
     Illuminated Turf & Strobe Floodlights
  ========================================= */
  .stadium-light-beam {
    position: absolute;
    top: -20%;
    width: 35vw;
    height: 130vh;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.5) 0%, rgba(34, 197, 94, 0.15) 60%, transparent 100%);
    will-change: opacity, transform;
    animation: beamGlow 4s ease-in-out infinite alternate;
  }
  .beam-left {
    left: -5%;
    transform: rotate(-25deg);
    transform-origin: top left;
  }
  .beam-right {
    right: -5%;
    transform: rotate(25deg);
    transform-origin: top right;
    animation-delay: -2s;
  }

  @keyframes beamGlow {
    0%   { opacity: 0.3; }
    100% { opacity: 0.9; }
  }

  /* =========================================
     7. BEAM - Lighthouse
     Site Palette Background & Sweeping Light
  ========================================= */
 /* 7. BEAM - Lighthouse Coastal Horizon (Cloudy Daytime Theme) */
  .lighthouse-dist-sweeper {
    position: absolute;
    top: 28%;
    right: 12%;
    width: 250vw;
    height: 250vw;
    transform-origin: 0 0;
    background: conic-gradient(from 180deg at 0 0, transparent 0deg, rgba(254, 240, 138, 0.7) 25deg, transparent 55deg);
    will-change: transform;
    animation: sweepDistantBeam 9s linear infinite;
  }

  .lighthouse-lantern-point {
    position: absolute;
    top: 28%;
    right: 12%;
    transform: translate(50%, -50%);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 255, 255, 1) 0%, rgba(250, 204, 21, 0.8) 50%, transparent 100%);
    box-shadow: 0 0 30px #fde047, 0 0 60px #facc15;
    will-change: opacity, transform;
    animation: lanternGlow 2.5s ease-in-out infinite alternate;
  }

  .cloud-puff {
    position: absolute;
    background: rgba(255, 255, 255, 0.55);
    backdrop-filter: blur(4px);
    border-radius: 50px;
    will-change: transform;
    animation: floatCloud 25s linear infinite;
  }

  .coastal-wave {
    position: absolute;
    bottom: 10vh;
    width: 200%;
    height: 6vh;
    background: repeat-x url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cpath d='M0,0 C150,90 350,-40 500,40 C650,120 900,20 1200,60 L1200,120 L0,120 Z' fill='%230284c7' opacity='0.4'/%3E%3C/svg%3E");
    will-change: transform;
    animation: waveDrift 12s linear infinite;
  }

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

  @keyframes lanternGlow {
    0%   { opacity: 0.7; transform: translate(50%, -50%) scale(0.85); }
    100% { opacity: 1; transform: translate(50%, -50%) scale(1.15); }
  }

  @keyframes floatCloud {
    0%   { transform: translateX(-20vw); }
    100% { transform: translateX(110vw); }
  }

  @keyframes waveDrift {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
  }

  /* =========================================
     8. ARENA - Mohali (Oorja Hub)
     Esports/Sports Neon Blue-Pink Energy Rings
  ========================================= */
  .oorja-ring {
    position: absolute;
    border-radius: 50%;
    border: 2px solid rgba(21, 128, 61, 0.7);
    box-shadow: 0 0 25px rgba(21, 128, 61, 0.5), inset 0 0 25px rgba(21, 128, 61, 0.5);
    will-change: transform, opacity;
    animation: pulseEnergy 3s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  }
  .oorja-pink {
    border-color: rgba(236, 72, 153, 0.8);
    box-shadow: 0 0 30px rgba(236, 72, 153, 0.6), inset 0 0 30px rgba(236, 72, 153, 0.6);
    animation-delay: -1.5s;
  }
  .oorja-spark {
    position: absolute;
    width: 6px;
    height: 6px;
    background: #4ADE80;
    border-radius: 50%;
    box-shadow: 0 0 10px #4ADE80, 0 0 20px #ec4899;
    will-change: transform, opacity;
    animation: floatUp 4s linear infinite;
  }

  @keyframes pulseEnergy {
    0%   { transform: scale(0.3) rotate(0deg); opacity: 0; }
    50%  { opacity: 0.9; }
    100% { transform: scale(1.5) rotate(180deg); opacity: 0; }
  }

  /* =========================================
     9. HERITAGE
     Regal Purple Canvas & Spinning Gold Mandala
  ========================================= */
  .heritage-mandala-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    will-change: transform;
    animation: rotateMandala 40s linear infinite;
  }
  .heritage-gold-dust {
    position: absolute;
    width: 6px;
    height: 6px;
    background: #fbbf24;
    border-radius: 50%;
    box-shadow: 0 0 12px #fbbf24, 0 0 24px #f59e0b;
    will-change: transform, opacity;
    animation: floatGold 5s ease-in-out infinite alternate;
  }

  @keyframes rotateMandala {
    0%   { transform: translate(-50%, -50%) rotate(0deg); }
    100% { transform: translate(-50%, -50%) rotate(360deg); }
  }
  @keyframes floatGold {
    0%   { transform: translateY(0) scale(0.8); opacity: 0.2; }
    100% { transform: translateY(-60px) scale(1.3); opacity: 0.9; }
  }

  /* =========================================
     10. RADAR - Phoenix
     Tactical Center Radar Scope
  ========================================= */
  .radar-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  .radar-sweep-centered {
    position: absolute;
    top: 50%;
    left: 50%;
    transform-origin: center center;
    border-radius: 50%;
    background: conic-gradient(from 0deg, transparent 70%, rgba(239, 68, 68, 0.6) 100%);
    will-change: transform;
    animation: spinCenter 3s linear infinite;
  }
  .radar-blip {
    position: absolute;
    width: 8px;
    height: 8px;
    background: #ef4444;
    border-radius: 50%;
    box-shadow: 0 0 12px #ef4444;
    will-change: opacity, transform;
    animation: blipPulse 3s ease-in-out infinite;
  }

  @keyframes spinCenter {
    0%   { transform: translate(-50%, -50%) rotate(0deg); }
    100% { transform: translate(-50%, -50%) rotate(360deg); }
  }
  @keyframes blipPulse {
    0%, 100% { opacity: 0.1; transform: scale(0.8); }
    50%      { opacity: 1; transform: scale(1.4); }
  }

  /* =========================================
     Shared Performance Keyframes
  ========================================= */
  @keyframes floatUp {
    0%   { transform: translateY(0); opacity: 0.2; }
    50%  { opacity: 0.9; }
    100% { transform: translateY(-100vh); opacity: 0; }
  }