/* Hide horizontal scrollbar for top carousel */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
/* Optional: subtle scrollbar styling for other horizontal lists if needed */
.thin-scrollbar::-webkit-scrollbar { height: 8px; }
.thin-scrollbar::-webkit-scrollbar-track { background: transparent; }
.thin-scrollbar::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.25); border-radius: 9999px; }
@keyframes scroll-bounce {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-15px); }
  50% { transform: translateX(15px); }
  75% { transform: translateX(-8px); }
}
.bounce-hint {
  animation: scroll-bounce 1s ease-in-out 2;
}

#scrollDebug {
      position: fixed;
      bottom: 20px;
      right: 20px;
      background: rgba(0,0,0,0.7);
      color: #fff;
      font: 14px/1.4 monospace;
      padding: 8px 12px;
      border-radius: 8px;
      z-index: 9999;
    }

/* Timeline view */

.calendar-icon { display:inline-block; width:60px; text-align:center; border-radius:0.5rem; overflow:hidden; box-shadow:0 2px 4px rgba(0,0,0,0.2);}
.calendar-icon .month { background:#dc2626; color:white; font-size:0.7rem; font-weight:bold; text-transform:uppercase; padding:2px 0; }
.calendar-icon .day { background:white; color:black; font-size:1.2rem; font-weight:bold; padding:4px 0; }


/* Beveled circular play button */
.bevel {
  box-shadow: inset 0 4px 8px rgba(255,255,255,0.35), inset 0 -6px 10px rgba(0,0,0,0.35), 0 6px 14px rgba(0,0,0,0.4);
}
  
  @keyframes spin {
        to { transform: rotate(360deg); }
      }
      .spin {
        animation-name: spin;
        animation-timing-function: linear;
        animation-iteration-count: infinite;
        /* default duration; changed via jQuery */
        animation-duration: 0.5s;
      }
  
  .tab-paint {
      content-visibility: auto;             /* browser skips paint/layout until needed */
      contain-intrinsic-size: 800px 600px;  /* reserve space to avoid jumps */
      contain: layout paint style;          /* isolate layout cost */
  }
  
  /* Card flipping handler */
  
  .chip-stage {
    position: relative;
    display: inline-block;
    overflow: visible;           /* <— important */
  }
  
  .chip-3d {
    perspective: 1200px;
    display: inline-block;
  }
  .chip-inner {
     position: relative;
     width: 7rem;                 /* ~ w-28 */
     height: 8rem;
     transform-style: preserve-3d;
     transition: transform 500ms ease;
     transform-origin: center center;
     overflow: visible;           /* <— important */
   }
  .chip-inner.is-flipped {
     transform: rotateX(180deg) scale(2);
   }
  .chip-face {
    position: absolute;
    inset: 0;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    /* do NOT set overflow hidden here; that causes clipping at 2x */
    border-radius: 0.75rem; /* rounded-xl */
    box-shadow: 0 10px 20px rgb(0 0 0 / 0.35);
  }
  .chip-back {
    transform: rotateX(180deg);
  }
  
  .chip-stage.active {
    z-index: 50;
  }
  
  @media (prefers-reduced-motion: reduce) {
    .chip-inner { transition: none; }
  }
  
/* flip card */

/* 3D + flipping helpers Tailwind doesn't include by default */
.flip-scene { perspective: 1000px; }
.flip-inner { transform-style: preserve-3d; }
.flip-face { backface-visibility: hidden; -webkit-backface-visibility: hidden; }

/* When parent has .is-flipped, rotate the inner wrapper */
.is-flipped .flip-inner { transform: rotateX(180deg); }

/* Optional: reduce motion respect */
@media (prefers-reduced-motion: reduce) {
  .flip-inner { transition: none !important; }
}

.fade-in {
  opacity: 0;
  transition: opacity 0.8s ease-in;
}
.fade-in.loaded {
  opacity: 1;
}

/* satellite dish animation */

@tailwind base;
 @tailwind components;
 @tailwind utilities;

 @layer utilities {
   @keyframes swing-both-ways {
     0%   { transform: rotate(-90deg); }  /* start left */
     20%  { transform: rotate(-90deg); }  /* pause left */
     40%  { transform: rotate(15deg); }   /* swing right */
     60%  { transform: rotate(15deg); }   /* pause right */
     80%  { transform: rotate(-90deg); }  /* swing left */
     100% { transform: rotate(-90deg); }  /* pause left again */
   }

   .animate-swing-both-ways {
     @apply inline-block;
     animation: swing-both-ways 3s ease-in-out infinite;
     transform-origin: center;
   }

   @media (prefers-reduced-motion: reduce) {
     .animate-swing-both-ways { animation: none; }
   }
 }



  /*
  canvas { image-rendering: pixelated; display:block; max-width: 100%; height: auto; }

  .bird-card {
    width: 180px;
    height: 190px;
    perspective: 1000px;
    position: relative;
  }
  .bird-card-inner {
    width: 100%;
    height: 100%;
    transition: transform 0.6s;
    transform-style: preserve-3d;
    position: relative;
  }
  .bird-card.flipped .bird-card-inner {
    transform: rotateY(180deg);
  }
  .bird-card-front,
  .bird-card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  }
  .bird-card-front {
    background-color: #fff;
  }
  .bird-card-back {
    background-color: #fafafa;
    transform: rotateY(180deg);
  } */

/* Astro stuff */

@keyframes glow {
            0%, 100% { box-shadow: 0 0 20px rgba(251, 191, 36, 0.5); }
            50% { box-shadow: 0 0 40px rgba(251, 191, 36, 0.8); }
        }
        
        @keyframes twinkle {
            0%, 100% { opacity: 0.3; }
            50% { opacity: 0.8; }
        }
        
        .sun-glow {
            animation: glow 3s ease-in-out infinite;
        }
        
        .star {
            position: absolute;
            width: 2px;
            height: 2px;
            background: white;
            border-radius: 50%;
            animation: twinkle 3s ease-in-out infinite;
        }
        
        .moon-glow {
            box-shadow: 0 0 30px rgba(255, 255, 255, 0.5);
        }
        
        .gradient-sun {
            background: linear-gradient(135deg, #FCD34D 0%, #FED7AA 100%);
        }
        
        .gradient-night {
            background: linear-gradient(135deg, #1E3A8A 0%, #312E81 100%);
        }
        
        .gradient-moon {
            background: linear-gradient(135deg, #F3F4F6 0%, #D1D5DB 100%);
        }
        
        /* Responsive dial container */
        .dial-container {
            width: min(80vw, 320px);
            height: min(80vw, 320px);
            max-width: 320px;
            max-height: 320px;
        }
        
        @media (max-width: 640px) {
            .dial-container {
                width: 75vw;
                height: 75vw;
            }
        }

#setting_gain_slider::-webkit-slider-thumb {
        -webkit-appearance: none;
        appearance: none;
        width: 30px;
        height: 30px;
        background: white;
        border: 2px solid #3b82f6; /* Tailwind blue-600 */
        border-radius: 9999px;
        cursor: pointer;
        transition: 0.2s;
      }
      #setting_gain_slider::-webkit-slider-thumb:hover {
        transform: scale(1.1);
      }
      #setting_gain_slider::-webkit-slider-thumb:active {
        transform: scale(1.15);
        background: #3b82f6;
        border-color: white;
      }

      /* Firefox */
      #setting_gain_slider::-moz-range-thumb {
        width: 20px;
        height: 20px;
        background: white;
        border: 2px solid #3b82f6;
        border-radius: 9999px;
        cursor: pointer;
        transition: 0.2s;
      }
      #setting_gain_slider::-moz-range-thumb:active {
        background: #3b82f6;
        border-color: white;
      }

/* Handle TV views */

@layer base {
  :root { --font-scale: 1; }

  body {
    font-size: calc(1rem * var(--font-scale));
  }
}