/* Custom Retro Fonts for 3D PSP Console (Disabled for now)
    @font-face {
      font-family: 'HomeVideoBold';
      src: url('../HomeVideoBold-XGpe9.ttf') format('truetype');
      font-weight: 700;
      font-style: normal;
      font-display: swap;
    }
    @font-face {
      font-family: 'HomeVideo';
      src: url('../HomeVideo-gwK51.ttf') format('truetype');
      font-weight: 400;
      font-style: normal;
      font-display: swap;
    }
    @font-face {
      font-family: 'PixelatedElegance';
      src: url('../PixelatedEleganceRegular-ovawB.ttf') format('truetype');
      font-weight: 400;
      font-style: normal;
      font-display: swap;
    }
    */

    /* Custom Scrollbar */
    ::-webkit-scrollbar {
      width: 8px;
    }
    ::-webkit-scrollbar-track {
      background: #070709;
    }
    ::-webkit-scrollbar-thumb {
      background: #27272a;
      border-radius: 4px;
    }
    ::-webkit-scrollbar-thumb:hover {
      background: #3f3f46;
    }

    /* Card Hover Styling */
    .perspective-card {
      transition: box-shadow 0.3s ease, border-color 0.3s ease;
    }

    /* Moving Neon Border Animation */
    @keyframes stroke-rotate {
      from {
        stroke-dashoffset: 100;
      }
      to {
        stroke-dashoffset: 0;
      }
    }
    .glow-rect {
      stroke-dasharray: 30 70;
      stroke-dashoffset: 100;
      opacity: 0;
      transition: opacity 0.3s ease;
      /* Glowing drop shadow using custom variable */
      filter: drop-shadow(0 0 4px var(--glow-color)) drop-shadow(0 0 1px var(--glow-color));
    }
    .group:hover .glow-rect {
      opacity: 1;
      animation: stroke-rotate 1.5s linear infinite;
    }

    /* Interactive Hero Fluted Glass & Multi-Stop Follower styles */
    #heroPrimaryGlow {
      position: absolute;
      width: 650px;
      height: 650px;
      border-radius: 50%;
      background: radial-gradient(
        circle,
        #0b0d3a 0%,
        #0b0d3a 15%,
        #1a4ee8 32%,
        #8a3ffc 48%,
        #c084fc 65%,
        rgba(245, 240, 255, 0.85) 78%,
        rgba(109, 40, 217, 0.35) 90%,
        transparent 100%
      );
      filter: blur(35px);
      pointer-events: none;
      mix-blend-mode: screen;
      transform: translate3d(0, 0, 0);
      will-change: transform;
    }
    #heroSecondaryGlow {
      position: absolute;
      width: 480px;
      height: 480px;
      border-radius: 50%;
      background: radial-gradient(
        circle,
        rgba(124, 58, 237, 0.6) 0%,
        rgba(168, 85, 247, 0.3) 45%,
        rgba(139, 92, 246, 0.1) 70%,
        transparent 100%
      );
      filter: blur(45px);
      pointer-events: none;
      mix-blend-mode: screen;
      transform: translate3d(0, 0, 0);
      will-change: transform;
    }
    .fluted-panel {
      border-right: 1px solid rgba(255, 255, 255, 0.08);
      background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0.06) 0%,
        rgba(0, 0, 0, 0.15) 15%,
        rgba(255, 255, 255, 0.01) 50%,
        rgba(0, 0, 0, 0.18) 85%,
        rgba(255, 255, 255, 0.07) 100%
      );
    }
    .noise-overlay {
      background-image: radial-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 0);
      background-size: 16px 16px;
      opacity: 0.25;
      pointer-events: none;
    }
    .parallax-layer {
      transition: transform 0.2s cubic-bezier(0.2, 0, 0.2, 1);
      will-change: transform;
    }
    .outline-text {
      color: transparent;
      -webkit-text-stroke: 1.5px rgba(255, 255, 255, 0.12);
    }
    .glow-text {
      text-shadow: 0 0 20px rgba(255, 255, 255, 0.3);
    }
    #revealLayer {
      will-change: mask-image, -webkit-mask-image, opacity, filter;
    }
    /* Comic-book star burst elements */
    .comic-star {
      position: absolute;
      pointer-events: none;
      transform-origin: center center;
      transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease;
      filter: drop-shadow(0 0 8px currentColor) drop-shadow(0 2px 5px rgba(0,0,0,0.9));
    }
    @keyframes comic-twinkle {
      0%, 100% { transform: scale(1) rotate(0deg); }
      50% { transform: scale(1.3) rotate(18deg); }
    }
    @keyframes comic-float {
      0%, 100% { transform: translateY(0px) rotate(-6deg); }
      50% { transform: translateY(-9px) rotate(9deg); }
    }
    .comic-twinkle {
      animation: comic-twinkle 1.6s ease-in-out infinite;
    }
    .comic-float {
      animation: comic-float 2.2s ease-in-out infinite;
    }

    /* Music Player Widget Styles */
    @keyframes spin-slow {
      from { transform: rotate(0deg); }
      to { transform: rotate(360deg); }
    }
    .animate-spin-slow {
      animation: spin-slow 8s linear infinite;
    }
    @keyframes eq-bounce {
      0%, 100% { height: 4px; }
      50% { height: 15px; }
    }
    .eq-playing .eq-bar:nth-child(1) { animation: eq-bounce 0.8s ease-in-out infinite; }
    .eq-playing .eq-bar:nth-child(2) { animation: eq-bounce 0.6s ease-in-out infinite 0.2s; }
    .eq-playing .eq-bar:nth-child(3) { animation: eq-bounce 0.9s ease-in-out infinite 0.1s; }
    .eq-playing .eq-bar:nth-child(4) { animation: eq-bounce 0.7s ease-in-out infinite 0.3s; }
    .custom-scrollbar::-webkit-scrollbar {
      width: 4px;
    }
    .custom-scrollbar::-webkit-scrollbar-track {
      background: rgba(255, 255, 255, 0.05);
      border-radius: 4px;
    }
    .custom-scrollbar::-webkit-scrollbar-thumb {
      background: rgba(255, 255, 255, 0.2);
      border-radius: 4px;
    }

    /* 2 Distinct Play <-> Pause Micro-Animations */
    @keyframes play-to-pause {
      0% {
        transform: scale(0.2) rotate(-90deg);
        opacity: 0;
      }
      60% {
        transform: scale(1.3) rotate(10deg);
        opacity: 1;
      }
      100% {
        transform: scale(1) rotate(0deg);
        opacity: 1;
      }
    }
    @keyframes pause-to-play {
      0% {
        transform: scale(0.2) rotate(90deg);
        opacity: 0;
      }
      60% {
        transform: scale(1.3) rotate(-10deg);
        opacity: 1;
      }
      100% {
        transform: scale(1) rotate(0deg);
        opacity: 1;
      }
    }
    .anim-pause-in {
      animation: play-to-pause 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    }
    .anim-play-in {
      animation: pause-to-play 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    }

    /* Embedded & Local TAN-ASTORIA Font Configuration */
    @font-face {
      font-family: 'TAN-ASTORIA';
      src: url('../TAN-ASTORIA-Display.ttf') format('truetype'),
           local('TAN - ASTORIA'),
           local('TAN-ASTORIA-Display'),
           local('TAN ASTORIA'),
           local('TAN Astoria');
      font-weight: normal;
      font-style: normal;
      font-display: block;
    }

    .font-tan-astoria {
      font-family: 'TAN-ASTORIA', 'Bodoni Moda', 'Playfair Display', serif !important;
    }

    /* Kinetic Warp Letters & Star Twinkle */
    .warp-letter {
      display: inline-block;
      transform-origin: center bottom;
      will-change: transform;
      transition: transform 0.22s cubic-bezier(0.2, 0.9, 0.3, 1.2);
    }
    
    @keyframes star-twinkle-pulse {
      0%, 100% {
        transform: scale(1) rotate(0deg);
        filter: drop-shadow(0 0 2px rgba(255,255,255,0.6));
      }
      50% {
        transform: scale(1.22) rotate(45deg);
        filter: drop-shadow(0 0 10px rgba(255,255,255,1)) drop-shadow(0 0 18px rgba(6,182,212,0.8));
      }
    }

    .star-twinkle-idle {
      animation: star-twinkle-pulse 3.5s ease-in-out infinite;
    }

    /* Cosmic Space Modal Animations */
    @keyframes space-float-slow {
      0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); }
      50% { transform: translate3d(18px, -24px, 0) rotate(10deg); }
    }
    @keyframes space-float-reverse {
      0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); }
      50% { transform: translate3d(-22px, 20px, 0) rotate(-12deg); }
    }
    @keyframes space-ring-spin {
      0% { transform: rotate(0deg) scale(1); }
      50% { transform: rotate(180deg) scale(1.05); }
      100% { transform: rotate(360deg) scale(1); }
    }
    @keyframes cosmic-star-flare {
      0%, 100% { transform: scale(0.85); opacity: 0.4; filter: drop-shadow(0 0 4px rgba(217,70,239,0.5)); }
      50% { transform: scale(1.35) rotate(45deg); opacity: 1; filter: drop-shadow(0 0 16px rgba(6,182,212,1)) drop-shadow(0 0 30px rgba(217,70,239,0.8)); }
    }
    @keyframes comet-trajectory {
      0% { transform: translate3d(-80px, -80px, 0) rotate(45deg); opacity: 0; }
      10% { opacity: 0.9; }
      35% { transform: translate3d(120vw, 120vh, 0) rotate(45deg); opacity: 0; }
      100% { transform: translate3d(120vw, 120vh, 0) rotate(45deg); opacity: 0; }
    }
    @keyframes satellite-orbit-float {
      0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); }
      25% { transform: translate3d(30px, -18px, 0) rotate(6deg); }
      75% { transform: translate3d(-20px, 15px, 0) rotate(-6deg); }
    }
    .anim-space-planet { animation: space-float-slow 14s ease-in-out infinite; }
    .anim-space-moon { animation: space-float-reverse 18s ease-in-out infinite; }
    .anim-space-satellite { animation: satellite-orbit-float 22s ease-in-out infinite; }
    .anim-comet { animation: comet-trajectory 9s cubic-bezier(0.25, 0.1, 0.25, 1) infinite; }
    .anim-cosmic-star { animation: cosmic-star-flare 4s ease-in-out infinite; }