@charset "utf-8";
/* CSS Document */
/* 基礎設定 */
.hsu-brand-link {
    display: inline-block;
    text-decoration: none;
    padding: 10px 0;
    position: relative;
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    cursor: pointer;
}

.hsu-brand-title {
    display: block;
    font-weight: 800;
    letter-spacing: 1.5px;
    color: #e0e0e0; 
    transition: all 0.4s ease;
    text-shadow: 0 0 5px rgba(255, 255, 255, 0.3);
}

/* 懸停效果：優化後的細緻光感 */
.hsu-brand-link:hover {
    transform: scale(1.1) translateY(-5px);
    /* 縮小光暈範圍與強度 */
    filter: drop-shadow(0 0 8px rgba(255, 215, 0, 0.5)); 
}

.hsu-brand-title:hover {
    color: #fff700; 
    /* 簡化 text-shadow 層級，減少視覺干擾 */
    text-shadow: 0 0 8px rgba(255, 223, 0, 0.6);
}

/* 底線兩側延伸效果 */
.hsu-brand-link::after {
    content: "";
    position: absolute;
    bottom: -2px;
    left: 50%;
    width: 0;
    height: 3px; 
    background: #fff700;
    transition: all 0.5s ease;
    /* 縮小底線光暈 */
    box-shadow: 0 0 5px #fff700; 
}

.hsu-brand-link:hover::after {
    width: 100%;
    left: 0;
}
/* 導航列容器 */
    .hsu-desktop-nav ul {
        list-style: none;
        padding: 0;
        margin: 0;
        display: flex;
        gap: 30px; /* 選項間距 */
    }

    /* 選項基礎樣式 */
    .hsu-desktop-nav li a {
        display: inline-block;
        text-decoration: none;
        padding: 10px 5px;
        position: relative;
        font-weight: 700;
        letter-spacing: 1px;
        color: #e0e0e0; /* 亮銀白基礎色 */
        transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    }

    /* 懸停交互效果 */
    .hsu-desktop-nav li a:hover {
        color: #fff700; /* 耀眼金 */
        transform: translateY(-3px);
        text-shadow: 0 0 10px #ffdf00, 0 0 15px #ffaf00;
    }

    /* 底線延伸光條 */
    .hsu-desktop-nav li a::after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 50%;
        width: 0;
        height: 2px;
        background: #fff700;
        transition: all 0.4s ease;
        box-shadow: 0 0 8px #fff700;
    }

    .hsu-desktop-nav li a:hover::after {
        width: 100%;
        left: 0;
    }

 /* 1. 導航列與基礎佈局 */
    body { overflow-x: hidden; }
    .hsu-navbar { display: flex; justify-content: space-between; align-items: center; height: 60px; padding: 0 5%; background: rgba(0,0,0,0.8); backdrop-filter: blur(10px); position: fixed; top: 0; width: 100%; z-index: 9999; box-sizing: border-box; }
    .hsu-logo-area { display: flex; align-items: center; gap: 15px; }

    /* 2. Logo 特效 (與您的圖片路徑綁定) */
    .hsu-logo-box { width: 40px !important; height: 40px !important; position: relative !important; cursor: pointer !important; transition: 0.3s; }
    .hsu-rotate-ring { width: 100% !important; height: 100% !important; background: url('outer-frame.png') center/contain no-repeat !important; animation: hsu-spin 4s linear infinite; }
    .hsu-static-core { width: 100% !important; height: 100% !important; position: absolute !important; top: 0; background: url('inner-logo.png') center/contain no-repeat !important; }
    
    .hsu-logo-box:hover { transform: scale(1.2); }
    .hsu-logo-box:hover .hsu-rotate-ring { animation: hsu-spin 0.2s linear infinite !important; box-shadow: 0 0 15px 5px rgba(212, 175, 55, 0.8) !important; border-radius: 50% !important; }

    /* 3. 桌機選單 */
    .hsu-brand-title { color: #d4af37; font-size: 18px; font-weight: bold; }
    .hsu-desktop-nav ul { display: flex; list-style: none; margin: 0; padding: 0; }
    .hsu-desktop-nav a { color: #fff; text-decoration: none; padding: 0 15px; font-size: 15px; }

    /* 4. 手機選單與底線修復 */
    .hsu-mobile-trigger { display: none; background: none; border: none; color: #fff; font-size: 24px; cursor: pointer; }
    .hsu-mobile-menu { position: fixed; top: 60px; right: -100%; width: 250px; height: 100vh; background: rgba(0,0,0,0.98); transition: 0.3s; padding: 20px; z-index: 9999; }
    .hsu-menu-list { list-style: none; padding: 0; margin: 0; }
    .hsu-menu-list li { padding: 20px 0; border-bottom: 1px solid rgba(255,255,255,0.3) !important; } /* 強制底線 */
    .hsu-menu-list a { color: #fff; text-decoration: none; font-size: 18px; display: block; }

    @media (max-width: 768px) { .hsu-desktop-nav { display: none; } .hsu-mobile-trigger { display: block; } }
    @keyframes hsu-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

 /* 旗艦版共用樣式 */
    .hsu-master-container { font-family: 'Noto Serif TC', serif; color: #333; line-height: 1.8; }
    
    /* 懸浮預約按鈕 (手機版專用) */
    .sticky-booking {
        position: fixed; bottom: 20px; left: 0; right: 0; z-index: 999;
        text-align: center; padding: 15px;
    }
    .sticky-booking a {
        background: #d4af37; color: #fff; padding: 15px 40px; 
        border-radius: 50px; text-decoration: none; font-weight: bold;
        box-shadow: 0 4px 15px rgba(0,0,0,0.3);
    }

    /* 手機版標題優化 */
    @media (max-width: 768px) {
        .hsu-title { font-size: 1.5rem !important; letter-spacing: 2px !important; }
        .hsu-desc { font-size: 1rem !important; padding: 0 15px; }
    }


/* 背景區塊：紅黑漸層 + 緩慢流動 */
    .hero-section {
      text-align: center;
      padding: 40px 20px; /* 原本 80px，改成 40px，減半高度 */
      background: linear-gradient(135deg, #b22222, #000000, #b22222);
      background-size: 400% 400%;
      animation: bgFlow 20s ease infinite;
      position: relative;
      color: #fff;
      overflow: hidden;
    }

    /* 半透明蕾絲紋理覆蓋 */
    .hero-section::before {
      content: "";
      position: absolute;
      top: 0; left: 0; right: 0; bottom: 0;
      background: url('lace-pattern.png') repeat;
      background-size: 600px;
      opacity: 0.15;
      pointer-events: none;
      z-index: 0;
    }

    /* 單行標題 */
    .page-title {
      font-size: 2rem;       /* 桌機字體大小 */
      font-weight: 600;
      margin: 0;
      opacity: 0;
      animation: fadeInDown 1s ease forwards;
      position: relative;
      z-index: 1;
    }

    /* 動畫效果 */
    @keyframes fadeInDown {
      from { opacity: 0; transform: translateY(-30px); }
      to   { opacity: 1; transform: translateY(0); }
    }
    @keyframes bgFlow {
      0% { background-position: 0% 50%; }
      50% { background-position: 100% 50%; }
      100% { background-position: 0% 50%; }
    }

    /* RWD：手機再縮小一半高度與字體 */
    @media (max-width: 768px) {
      .hero-section {
        padding: 20px 10px; /* 再縮小一半 */
      }
.brand-glow {
  font-size: 24px; /* 標題可再調大 */
  font-weight: 600;
  text-align: center;
  background: linear-gradient(90deg, #ff6b6b, #8B3A62, #ff6b6b);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 0 12px rgba(255, 120, 150, 0.6);
  background-size: 200% 200%;
  animation: glowMove 6s linear infinite;
  display: inline-block;
  position: relative;
}

@keyframes glowMove {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
		
 .page-title {
        text-align: center;
        padding: 40px 20px;
    }
    .main-title {
        display: block;
        font-size: 32px;
        color: #8b7355; /* 典藏金，維持視覺一致 */
        font-weight: bold;
        margin-bottom: 10px;
    }
    .sub-title {
        display: block;
        font-size: 18px;
        color: #666;
        letter-spacing: 2px;
    }	
		
	 /* 旗艦版共用樣式 */
    .hsu-master-container { font-family: 'Noto Serif TC', serif; color: #333; line-height: 1.8; }
    
    /* 懸浮預約按鈕 (手機版專用) */
    .sticky-booking {
        position: fixed; bottom: 20px; left: 0; right: 0; z-index: 999;
        text-align: center; padding: 15px;
    }
    .sticky-booking a {
        background: #d4af37; color: #fff; padding: 15px 40px; 
        border-radius: 50px; text-decoration: none; font-weight: bold;
        box-shadow: 0 4px 15px rgba(0,0,0,0.3);
    }

    /* 手機版標題優化 */
    @media (max-width: 768px) {
        .hsu-title { font-size: 1.5rem !important; letter-spacing: 2px !important; }
        .hsu-desc { font-size: 1rem !important; padding: 0 15px; }
    }	
 
		
		/* 背景區塊：紅黑漸層 + 緩慢流動 */
    .hero-section {
      text-align: center;
      padding: 40px 20px; /* 原本 80px，改成 40px，減半高度 */
      background: linear-gradient(135deg, #b22222, #000000, #b22222);
      background-size: 400% 400%;
      animation: bgFlow 20s ease infinite;
      position: relative;
      color: #fff;
      overflow: hidden;
    }

    /* 半透明蕾絲紋理覆蓋 */
    .hero-section::before {
      content: "";
      position: absolute;
      top: 0; left: 0; right: 0; bottom: 0;
      background: url('lace-pattern.png') repeat;
      background-size: 600px;
      opacity: 0.15;
      pointer-events: none;
      z-index: 0;
    }

    /* 單行標題 */
    .page-title {
      font-size: 2rem;       /* 桌機字體大小 */
      font-weight: 600;
      margin: 0;
      opacity: 0;
      animation: fadeInDown 1s ease forwards;
      position: relative;
      z-index: 1;
    }

    /* 動畫效果 */
    @keyframes fadeInDown {
      from { opacity: 0; transform: translateY(-30px); }
      to   { opacity: 1; transform: translateY(0); }
    }
    @keyframes bgFlow {
      0% { background-position: 0% 50%; }
      50% { background-position: 100% 50%; }
      100% { background-position: 0% 50%; }
    }

    /* RWD：手機再縮小一半高度與字體 */
    @media (max-width: 768px) {
      .hero-section {
        padding: 20px 10px; /* 再縮小一半 */
      }
.brand-glow {
  font-size: 24px; /* 標題可再調大 */
  font-weight: 600;
  text-align: center;
  background: linear-gradient(90deg, #ff6b6b, #8B3A62, #ff6b6b);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 0 12px rgba(255, 120, 150, 0.6);
  background-size: 200% 200%;
  animation: glowMove 6s linear infinite;
  display: inline-block;
  position: relative;
}

@keyframes glowMove {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}