<!DOCTYPE html>
<html lang="zh-Hant">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>SSA 專業高階流行音樂學院 | High-End Pop Music Academy</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700&family=Playfair+Display:ital,wght@0,600;0,700;1,600&display=swap" rel="stylesheet">
    <script src="https://cdn.tailwindcss.com"></script>
    <script>
      tailwind.config = {
        theme: {
          extend: {
            colors: {
              'bg-body': '#FBFBFD',
              'bg-surface': '#FFFFFF',
              'concrete': '#8C8E91',
              'leather-black': '#1D1D1F',
              'denim-blue': '#0071E3',
              'denim-dark': '#0066CC',
              'warm-oak': '#D4C4A8',
              'text-main': '#1D1D1F',
              'text-muted': '#86868B',
            },
            fontFamily: {
              sans: ['-apple-system', 'BlinkMacSystemFont', 'SF Pro Display', 'SF Pro Text', 'Helvetica Neue', 'Arial', 'sans-serif'],
              serif: ['-apple-system', 'BlinkMacSystemFont', 'SF Pro Display', 'Helvetica Neue', 'Arial', 'sans-serif'],
            },
            boxShadow: {
              'soft': '0 10px 30px -10px rgba(0,0,0,0.08)',
              'apple': '0 4px 20px rgba(0,0,0,0.1)',
              'apple-lg': '0 8px 30px rgba(0,0,0,0.12)',
            },
            animation: {
              'fade-in': 'fadeIn 0.8s ease-out',
              'fade-in-up': 'fadeInUp 0.8s ease-out',
              'fade-in-down': 'fadeInDown 0.8s ease-out',
              'scale-in': 'scaleIn 0.6s ease-out',
              'slide-in-left': 'slideInLeft 0.8s ease-out',
              'slide-in-right': 'slideInRight 0.8s ease-out',
            },
            keyframes: {
              fadeIn: {
                '0%': { opacity: '0' },
                '100%': { opacity: '1' },
              },
              fadeInUp: {
                '0%': { opacity: '0', transform: 'translateY(30px)' },
                '100%': { opacity: '1', transform: 'translateY(0)' },
              },
              fadeInDown: {
                '0%': { opacity: '0', transform: 'translateY(-30px)' },
                '100%': { opacity: '1', transform: 'translateY(0)' },
              },
              scaleIn: {
                '0%': { opacity: '0', transform: 'scale(0.95)' },
                '100%': { opacity: '1', transform: 'scale(1)' },
              },
              slideInLeft: {
                '0%': { opacity: '0', transform: 'translateX(-50px)' },
                '100%': { opacity: '1', transform: 'translateX(0)' },
              },
              slideInRight: {
                '0%': { opacity: '0', transform: 'translateX(50px)' },
                '100%': { opacity: '1', transform: 'translateX(0)' },
              },
            }
          }
        }
      }
    </script>
    <style>
      :root {
        /* Default theme colors - will be overridden by JavaScript */
        --color-primary: #0071E3;
        --color-secondary: #0066CC;
        --color-accent: #0071E3;
        --color-background: #FBFBFD;
        --color-surface: #FFFFFF;
        --color-text: #1D1D1F;
        --color-text-muted: #86868B;
        --font-primary: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
        --font-secondary: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", Arial, sans-serif;
      }

      * {
        scroll-behavior: smooth;
      }
      
      html {
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        font-family: var(--font-primary);
        /* Improve mobile scrolling performance */
        -webkit-overflow-scrolling: touch;
      }
      
      body {
        overflow-x: hidden;
        overflow-y: auto;
        background-color: var(--color-background);
        color: var(--color-text);
        font-family: var(--font-primary);
        /* Improve mobile scrolling performance */
        -webkit-overflow-scrolling: touch;
        touch-action: pan-y pan-x;
        /* Prevent scroll blocking on mobile */
        overscroll-behavior-y: contain;
        -webkit-overflow-scrolling: touch;
      }
      
      /* Ensure main containers don't create scrollable areas */
      #root {
        overflow-y: visible;
        touch-action: pan-y pan-x;
      }
      
      main {
        overflow-y: visible;
        touch-action: pan-y pan-x;
      }
      
      /* Disable smooth scroll completely on mobile */
      @media (max-width: 768px) {
        html {
          scroll-behavior: auto !important;
        }
        * {
          scroll-behavior: auto !important;
        }
        /* Optimize backdrop-filter on mobile - reduce blur for better performance */
        .liquid-glass-header-container,
        .liquid-glass-mobile-menu {
          backdrop-filter: blur(20px) saturate(150%);
          -webkit-backdrop-filter: blur(20px) saturate(150%);
        }
      }
      
      /* Apple-style smooth scrolling - desktop only */
      @media (prefers-reduced-motion: no-preference) {
        @media (min-width: 769px) {
          html {
            scroll-behavior: smooth;
          }
        }
      }
      
      /* Fade in on scroll */
      .fade-in-on-scroll {
        opacity: 0;
        transform: translateY(30px);
        transition: opacity 0.8s ease-out, transform 0.8s ease-out;
      }
      
      .fade-in-on-scroll.visible {
        opacity: 1;
        transform: translateY(0);
      }
      
      /* Parallax effect */
      .parallax {
        will-change: transform;
      }
      
      /* Apple-style button hover - base styles moved to index.css for gradient border effect */
      
      /* Glass morphism effect */
      .glass {
        background: rgba(255, 255, 255, 0.7);
        backdrop-filter: blur(20px) saturate(180%);
        -webkit-backdrop-filter: blur(20px) saturate(180%);
      }
      
      .glass-dark {
        background: rgba(29, 29, 31, 0.7);
        backdrop-filter: blur(20px) saturate(180%);
        -webkit-backdrop-filter: blur(20px) saturate(180%);
      }
    </style>

  <script type="importmap">
{
  "imports": {
    "lucide-react": "https://aistudiocdn.com/lucide-react@^0.555.0",
    "react/": "https://aistudiocdn.com/react@^19.2.0/",
    "react": "https://aistudiocdn.com/react@^19.2.0",
    "react-dom/": "https://aistudiocdn.com/react-dom@^19.2.0/",
    "@google/genai": "https://aistudiocdn.com/@google/genai@^1.30.0"
  }
}
  </script>
  <script type="module" crossorigin src="/assets/index-CurnnyxZ.js"></script>
  <link rel="stylesheet" crossorigin href="/assets/index-Dnf2aNSL.css">
</head>
  <body>
    <div id="root"></div>
  <script>
    // Disable browser's automatic scroll restoration
    if ('scrollRestoration' in history) {
      history.scrollRestoration = 'manual';
    }
    
    // Prevent browser from scrolling to top on page load
    // This runs immediately to prevent any automatic scrolling
    (function() {
      // Save scroll position before unload (this is handled by the hook, but we add a safety net here)
      window.addEventListener('beforeunload', function() {
        try {
          const scrollPos = window.scrollY || document.documentElement.scrollTop;
          if (scrollPos > 0 && typeof Storage !== 'undefined' && window.sessionStorage) {
            sessionStorage.setItem('scroll_position', scrollPos.toString());
          }
        } catch (e) {
          // Storage access may not be allowed in this context (e.g., iframe, service worker)
          // Silently fail - this is just a fallback mechanism
        }
      });
    })();
  </script>
</body>
</html>