/* =============================================================
   月光．海 landing page — custom styles (Tailwind extras)
   ============================================================= */
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+TC:wght@500;600;700;900&family=Noto+Sans+TC:wght@300;400;500;700&family=Cormorant+Garamond:ital,wght@0,400;1,400;1,500&family=DM+Sans:wght@400;500;700&display=swap');

:root {
  --jh-orange: #ea5a26;
  --jh-purple: #5e529c;
  --ms-night:  #0B192C;
  --ms-indigo: #1E3E62;
  --ms-moon:   #F5C16C;
  --ms-foam:   #B8D4E3;
  --paper:     #F6F1E7;
  --ink:       #1A1410;
  --fg-1:      #F1E9D5;
  --fg-2:      #C9D3E0;
  --fg-3:      #8896A8;
}

html { scroll-behavior: smooth; }
body {
  font-family: 'Noto Sans TC', 'PingFang TC', sans-serif;
  background: var(--ms-night);
  color: var(--fg-1);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
.font-serif-zh { font-family: 'Noto Serif TC', serif; }
.font-cormorant { font-family: 'Cormorant Garamond', serif; }
.font-dm { font-family: 'DM Sans', sans-serif; }

/* ----- Hero banner (user-supplied artwork) ----- */
.hero-banner { background: #050D18; }
.hero-img {
  object-position: center 28%;
  animation: heroFloat 22s ease-in-out infinite;
}
@keyframes heroFloat {
  0%, 100% { transform: scale(1.04) translateY(0); }
  50%      { transform: scale(1.06) translateY(-10px); }
}
.hero-scrim {
  background:
    linear-gradient(180deg, rgba(11,25,44,0.35) 0%, rgba(11,25,44,0) 25%, rgba(11,25,44,0) 50%, rgba(11,25,44,0.55) 80%, rgba(11,25,44,0.92) 100%),
    radial-gradient(ellipse 60% 70% at 12% 95%, rgba(11,25,44,0.85), transparent 70%);
}

/* ----- Aurora background ----- */
.bg-aurora {
  background:
    radial-gradient(ellipse 60% 50% at 18% 12%, rgba(94, 82, 156, 0.55), transparent 60%),
    radial-gradient(ellipse 60% 50% at 82% 88%, rgba(234, 90, 38, 0.35), transparent 65%),
    linear-gradient(180deg, #0B192C 0%, #1E3E62 100%);
}
.bg-night { background: var(--ms-night); }
.bg-night-elev { background: #0F2138; }

/* ----- Text gradient (headline accent) ----- */
.text-grad {
  background: linear-gradient(135deg, #F5C16C 0%, #ea5a26 60%, #5e529c 100%);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}

/* ----- Grain overlay ----- */
.grain::after {
  content: '';
  position: absolute; inset: 0;
  pointer-events: none;
  opacity: 0.04;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/></filter><rect width='200' height='200' filter='url(%23n)' opacity='0.7'/></svg>");
}

/* ----- Moon ----- */
.moon {
  width: 320px; height: 320px;
  border-radius: 999px;
  background: radial-gradient(circle at 40% 40%, #FFF1C8 0%, #F5C16C 35%, rgba(245,193,108,0) 75%);
  filter: blur(0.3px);
  animation: moonFloat 14s ease-in-out infinite;
}
@keyframes moonFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-18px); }
}

/* ----- Wave divider ----- */
.wave-divider {
  height: 80px;
  position: relative;
  overflow: hidden;
}
.wave-divider svg { width: 100%; height: 100%; display: block; }

/* ----- Buttons ----- */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: 'Noto Sans TC', sans-serif;
  font-weight: 700;
  border-radius: 999px;
  padding: 16px 32px;
  font-size: 15px;
  letter-spacing: 0.08em;
  border: 0;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: transform .35s cubic-bezier(0.22,1,0.36,1), box-shadow .35s;
  isolation: isolate;
}
.btn-primary {
  background: linear-gradient(135deg, #ea5a26 0%, #f6824a 100%);
  color: white;
  box-shadow: 0 8px 28px rgba(234,90,38,0.42);
}
.btn-primary:hover { transform: translateY(-4px); box-shadow: 0 14px 38px rgba(234,90,38,0.55); }
.btn-primary:active { transform: translateY(-1px) scale(0.99); }
.btn-secondary {
  background: transparent;
  color: #F5C16C;
  border: 1.5px solid rgba(245,193,108,0.55);
}
.btn-secondary:hover {
  background: rgba(245,193,108,0.08);
  border-color: #F5C16C;
  transform: translateY(-3px);
}

/* ripple */
.btn .ripple {
  position: absolute;
  border-radius: 999px;
  background: rgba(255,255,255,0.45);
  transform: scale(0);
  animation: ripple 720ms cubic-bezier(0.22,1,0.36,1);
  pointer-events: none;
  z-index: -1;
}
@keyframes ripple {
  to { transform: scale(4); opacity: 0; }
}

/* ----- Card ----- */
.card {
  background: #0F2138;
  border: 1px solid rgba(245,193,108,0.16);
  border-radius: 18px;
  padding: 28px;
  position: relative;
  overflow: hidden;
  transition: transform .5s cubic-bezier(0.22,1,0.36,1), box-shadow .5s;
}
.card::before {
  content: '';
  position: absolute; left: 0; top: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(245,193,108,0.5), transparent);
  opacity: 0;
  transition: opacity .5s;
}
.card:hover {
  transform: translateY(-8px);
  box-shadow: 0 24px 60px rgba(0,0,0,0.55), 0 0 0 1px rgba(245,193,108,0.3);
}
.card:hover::before { opacity: 1; }

/* eyebrow */
.eyebrow {
  font-family: 'DM Sans', sans-serif;
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ms-moon);
  font-weight: 500;
}

/* sound toggle chip */
.sound-toggle {
  position: fixed;
  right: 24px; bottom: 24px;
  width: 56px; height: 56px;
  border-radius: 999px;
  background: rgba(11,25,44,0.78);
  border: 1px solid rgba(245,193,108,0.4);
  color: #F5C16C;
  font-size: 18px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  z-index: 50;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  transition: transform .3s;
  animation: pulse 2.6s ease-in-out infinite;
}
.sound-toggle.on { animation: none; background: rgba(234,90,38,0.85); color: white; border-color: rgba(234,90,38,0.8); }
.sound-toggle:hover { transform: scale(1.06); }
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(245,193,108,0.5); }
  70% { box-shadow: 0 0 0 22px rgba(245,193,108,0); }
  100% { box-shadow: 0 0 0 0 rgba(245,193,108,0); }
}

/* sticky header */
.site-header {
  position: fixed; top: 0; left: 0; right: 0;
  padding: 16px 32px;
  display: flex; align-items: center; justify-content: space-between;
  z-index: 40;
  transition: backdrop-filter .3s, background .3s, padding .3s;
}
.site-header.scrolled {
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  background: rgba(11,25,44,0.55);
  padding: 10px 32px;
  border-bottom: 1px solid rgba(245,193,108,0.1);
}
.site-header .logo { height: 44px; transition: height .3s; }
.site-header.scrolled .logo { height: 32px; }

/* nav */
.nav-link {
  font-family: 'Noto Sans TC', sans-serif;
  font-size: 13px;
  letter-spacing: 0.16em;
  color: var(--fg-2);
  text-decoration: none;
  position: relative;
  padding: 6px 0;
  transition: color .3s;
}
.nav-link::after {
  content: '';
  position: absolute; left: 0; bottom: 0;
  height: 1px; width: 0;
  background: linear-gradient(90deg, #F5C16C, #ea5a26);
  transition: width .35s;
}
.nav-link:hover { color: var(--ms-moon); }
.nav-link:hover::after { width: 100%; }

/* timeline */
.timeline { position: relative; padding-left: 32px; }
.timeline::before {
  content: '';
  position: absolute; left: 8px; top: 8px; bottom: 8px; width: 2px;
  background: linear-gradient(180deg, #F5C16C 0%, #ea5a26 50%, #5e529c 100%);
  border-radius: 2px;
}
.tl-item { position: relative; padding: 4px 0 28px; }
.tl-item::before {
  content: '';
  position: absolute; left: -32px; top: 12px;
  width: 18px; height: 18px;
  background: var(--ms-moon);
  border-radius: 999px;
  box-shadow: 0 0 0 4px rgba(245,193,108,0.18);
}

/* sense tile */
.sense-tile {
  background: linear-gradient(180deg, rgba(15,33,56,0.55), rgba(11,25,44,0.85));
  border: 1px solid rgba(245,193,108,0.16);
  border-radius: 18px;
  padding: 28px;
  position: relative;
  overflow: hidden;
  transition: transform .5s cubic-bezier(0.22,1,0.36,1), border-color .5s;
}
.sense-tile:hover { transform: translateY(-6px); border-color: rgba(245,193,108,0.45); }
.sense-tile .ic {
  width: 56px; height: 56px;
  border-radius: 16px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(245,193,108,0.1);
  color: var(--ms-moon);
  font-size: 22px;
  margin-bottom: 18px;
}

/* footer */
.site-footer {
  background: #050D18;
  color: var(--fg-3);
  padding: 64px 32px 28px;
  border-top: 1px solid rgba(245,193,108,0.08);
}

/* form */
.field {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(245,193,108,0.18);
  border-radius: 12px;
  padding: 12px 14px;
  color: var(--fg-1);
  font-family: 'Noto Sans TC', sans-serif;
  font-size: 14px;
  width: 100%;
  transition: border-color .3s, box-shadow .3s;
}
.field:focus {
  outline: none;
  border-color: var(--ms-moon);
  box-shadow: 0 0 0 3px rgba(245,193,108,0.18);
}
.field::placeholder { color: rgba(241,233,213,0.4); }

/* ----- Image card (photo with overlay caption) ----- */
.img-card {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  box-shadow: 0 24px 60px rgba(0,0,0,0.55);
  border: 1px solid rgba(245,193,108,0.2);
}
.img-card-photo {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.img-card-scrim {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(11,25,44,0) 0%, rgba(11,25,44,0) 45%, rgba(11,25,44,0.85) 100%);
}
.img-card-meta {
  position: absolute; left: 24px; right: 24px; bottom: 22px;
  color: #F1E9D5;
}

/* ----- Product / departure cards ----- */
.prod-card {
  position: relative;
  background: linear-gradient(180deg, rgba(15,33,56,0.92) 0%, rgba(11,25,44,0.96) 100%);
  border: 1px solid rgba(245,193,108,0.2);
  border-radius: 22px;
  padding: 32px 28px 28px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform .55s cubic-bezier(0.22,1,0.36,1), border-color .5s, box-shadow .5s;
  isolation: isolate;
}
.prod-card::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: 22px;
  padding: 1px;
  background: linear-gradient(135deg, rgba(245,193,108,0.55), transparent 40%, transparent 60%, rgba(94,82,156,0.45));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  opacity: 0;
  transition: opacity .5s;
  pointer-events: none;
  z-index: 1;
}
.prod-card::after {
  content: '';
  position: absolute;
  right: -80px; top: -80px;
  width: 240px; height: 240px;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(245,193,108,0.18), transparent 65%);
  pointer-events: none;
  z-index: 0;
  transition: transform .8s;
}
.prod-card:hover {
  transform: translateY(-8px);
  border-color: rgba(245,193,108,0.5);
  box-shadow: 0 28px 70px rgba(0,0,0,0.6);
}
.prod-card:hover::before { opacity: 1; }
.prod-card:hover::after { transform: translate(-20px, 20px); }

.prod-card--featured {
  background: linear-gradient(180deg, rgba(94,82,156,0.32) 0%, rgba(15,33,56,0.92) 50%, rgba(11,25,44,0.96) 100%);
  border-color: rgba(245,193,108,0.4);
}
.prod-card--featured .prod-pill {
  background: linear-gradient(135deg, #ea5a26, #f6824a);
  color: white;
  border-color: transparent;
}

.prod-eyebrow {
  font-family: 'DM Sans', sans-serif;
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: #F5C16C;
  margin-bottom: 18px;
  position: relative;
  z-index: 2;
}
.prod-date {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin-bottom: 18px;
  position: relative;
  z-index: 2;
}
.prod-date .num {
  font-family: 'Cormorant Garamond', serif;
  font-size: 76px;
  line-height: 0.9;
  font-weight: 500;
  letter-spacing: -0.01em;
  background: linear-gradient(135deg, #F5C16C 0%, #ea5a26 100%);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}
.prod-date .dow {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-bottom: 6px;
}
.prod-date .dow .en {
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  letter-spacing: 0.22em;
  color: #F5C16C;
}
.prod-date .dow .zh {
  font-family: 'Noto Serif TC', serif;
  font-size: 14px;
  color: #C9D3E0;
}
.prod-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(245,193,108,0.1);
  border: 1px solid rgba(245,193,108,0.32);
  color: #F5C16C;
  margin-bottom: 18px;
  position: relative;
  z-index: 2;
  font-family: 'Noto Sans TC', sans-serif;
}
.prod-pill i { font-size: 10px; }
.prod-title {
  font-family: 'Noto Serif TC', serif;
  font-weight: 700;
  font-size: 20px;
  line-height: 1.4;
  color: #F1E9D5;
  margin-bottom: 8px;
  position: relative;
  z-index: 2;
}
.prod-sub {
  font-size: 13.5px;
  color: #9CA8B7;
  line-height: 1.7;
  margin-bottom: 22px;
  position: relative;
  z-index: 2;
}
.prod-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(245,193,108,0.32), transparent);
  margin: 6px 0 18px;
  position: relative;
  z-index: 2;
}
.prod-price {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-bottom: 20px;
  position: relative;
  z-index: 2;
}
.prod-price .currency {
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  color: #C9D3E0;
  letter-spacing: 0.06em;
}
.prod-price .amount {
  font-family: 'DM Sans', sans-serif;
  font-weight: 700;
  font-size: 38px;
  line-height: 1;
  color: #F1E9D5;
  letter-spacing: -0.01em;
}
.prod-price .unit {
  font-size: 13px;
  color: #9CA8B7;
}
.prod-cta {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  padding: 14px 20px;
  border-radius: 999px;
  background: linear-gradient(135deg, #ea5a26 0%, #f6824a 100%);
  color: white;
  font-family: 'Noto Sans TC', sans-serif;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.1em;
  box-shadow: 0 8px 22px rgba(234,90,38,0.35);
  text-decoration: none;
  transition: transform .35s, box-shadow .35s;
  position: relative;
  z-index: 2;
}
.prod-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 32px rgba(234,90,38,0.5);
}
.prod-cta i { transition: transform .35s; }
.prod-cta:hover i { transform: translateX(4px); }

/* compact horizontal itinerary strip */
.it-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-top: 18px;
}
.it-strip-item {
  position: relative;
  padding: 22px 22px 24px;
  background: rgba(15,33,56,0.55);
  border: 1px solid rgba(245,193,108,0.16);
  border-radius: 16px;
  transition: border-color .4s, transform .4s;
}
.it-strip-item:hover { border-color: rgba(245,193,108,0.4); transform: translateY(-3px); }
.it-strip-item .dot {
  position: absolute; top: -8px; left: 22px;
  width: 16px; height: 16px; border-radius: 999px;
  background: var(--ms-moon);
  box-shadow: 0 0 0 4px rgba(245,193,108,0.18), 0 0 0 1px rgba(11,25,44,1);
}
.it-strip-item .day-label {
  font-family: 'DM Sans', sans-serif;
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: #F5C16C;
  margin-bottom: 8px;
}
.it-strip-item .day-title {
  font-family: 'Noto Serif TC', serif;
  font-weight: 700;
  font-size: 17px;
  color: #F1E9D5;
  margin-bottom: 6px;
  line-height: 1.4;
}
.it-strip-item .day-desc {
  font-size: 13px;
  color: #9CA8B7;
  line-height: 1.7;
}
@media (max-width: 768px) {
  .it-strip { grid-template-columns: 1fr; }
}

/* ----- Highlight tiles (旅遊亮點) ----- */
.hl-tile {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  background: #0F2138;
  border: 1px solid rgba(245,193,108,0.18);
  box-shadow: 0 18px 50px rgba(0,0,0,0.45);
  transition: transform .5s cubic-bezier(0.22,1,0.36,1), border-color .5s, box-shadow .5s;
  display: flex;
  flex-direction: column;
}
.hl-tile:hover {
  transform: translateY(-8px);
  border-color: rgba(245,193,108,0.45);
  box-shadow: 0 28px 70px rgba(0,0,0,0.6);
}
.hl-tile .hl-photo {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
}
.hl-tile .hl-photo img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1.1s cubic-bezier(0.22,1,0.36,1);
}
.hl-tile:hover .hl-photo img { transform: scale(1.06); }
.hl-tile .hl-photo::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(11,25,44,0) 35%, rgba(11,25,44,0.65) 100%);
}
.hl-num {
  position: absolute;
  top: 16px; left: 16px;
  width: 44px; height: 44px;
  border-radius: 999px;
  background: rgba(11,25,44,0.72);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(245,193,108,0.45);
  color: #F5C16C;
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 20px;
  display: flex; align-items: center; justify-content: center;
  z-index: 2;
}
.hl-body { padding: 26px 26px 28px; }
.hl-eyebrow {
  font-family: 'DM Sans', sans-serif;
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: #F5C16C;
  margin-bottom: 10px;
}
.hl-title {
  font-family: 'Noto Serif TC', serif;
  font-weight: 700;
  font-size: 22px;
  line-height: 1.3;
  color: #F1E9D5;
  margin-bottom: 12px;
}
.hl-desc {
  font-size: 14.5px;
  line-height: 1.95;
  color: #9CA8B7;
}

/* ----- Lineup cards ----- */
.lineup-card {
  background: rgba(15, 33, 56, 0.78);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(245,193,108,0.18);
  border-radius: 18px;
  padding: 32px 28px;
  position: relative;
  overflow: hidden;
  transition: transform .5s cubic-bezier(0.22,1,0.36,1), border-color .5s, box-shadow .5s;
}
.lineup-card::before {
  content: '';
  position: absolute; left: 0; top: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(245,193,108,0.5), transparent);
  opacity: 0;
  transition: opacity .5s;
}
.lineup-card:hover {
  transform: translateY(-8px);
  border-color: rgba(245,193,108,0.45);
  box-shadow: 0 24px 60px rgba(0,0,0,0.55);
}
.lineup-card:hover::before { opacity: 1; }
.lineup-card--featured {
  background: linear-gradient(180deg, rgba(94,82,156,0.22) 0%, rgba(15,33,56,0.78) 60%);
  border-color: rgba(245,193,108,0.32);
}
.lineup-card--featured::after {
  content: '主打場';
  position: absolute; top: 14px; right: 14px;
  font-family: 'Noto Sans TC', sans-serif;
  font-size: 10px;
  letter-spacing: 0.16em;
  padding: 4px 10px;
  border-radius: 999px;
  background: linear-gradient(135deg, #ea5a26, #f6824a);
  color: white;
}
.lineup-date {
  display: flex; align-items: baseline; gap: 10px;
  font-family: 'DM Sans', sans-serif;
  font-size: 26px;
  color: #F5C16C;
}
.lineup-date .dm { font-family: 'DM Sans', sans-serif; }
.lineup-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.lineup-list li {
  font-family: 'Noto Sans TC', sans-serif;
  font-size: 15px;
  color: #F1E9D5;
  line-height: 1.5;
  padding-left: 18px;
  position: relative;
}
.lineup-list li::before {
  content: '';
  position: absolute;
  left: 0; top: 10px;
  width: 8px; height: 1px;
  background: #F5C16C;
}