/* ============ Base ============ */
:root{
  --rose:#f4718a;
  --orange:#f7a35c;
  --sky:#7dc4e0;
  --cream:#fff8f0;
}

*{ box-sizing:border-box; }

html{ scroll-behavior:smooth; }

body{
  font-family:'Noto Sans TC','Baloo 2',sans-serif;
  color:#334155;
  background:var(--cream);
  overflow-x:hidden;
}

.container{ max-width:1200px; }

/* ============ Header ============ */
#site-header{
  background:transparent;
}
#site-header.scrolled{
  background:rgba(255,255,255,0.95);
  backdrop-filter:blur(8px);
  box-shadow:0 2px 20px rgba(0,0,0,0.08);
}

.nav-logo{ filter:none; transition:filter .3s; }

.nav-logo-divider{
  width:1px;
  height:24px;
  background:currentColor;
  opacity:0.3;
  display:inline-block;
}

.hero-tca-logo{
  background:#fff;
  padding:8px 16px;
  border-radius:12px;
  box-shadow:0 4px 16px rgba(0,0,0,0.15);
}

.footer-tca-logo{
  background:#fff;
  padding:4px 8px;
  border-radius:8px;
}

#site-header:not(.scrolled) .nav-link,
#site-header:not(.scrolled) #menu-btn{
  color:#fff;
  text-shadow:0 1px 4px rgba(0,0,0,0.35);
}
#site-header.scrolled .nav-link,
#site-header.scrolled #menu-btn{
  color:#334155;
}

.nav-link{
  position:relative;
  transition:color .25s;
}
.nav-link::after{
  content:"";
  position:absolute;
  left:0; bottom:-6px;
  width:0; height:2px;
  background:linear-gradient(90deg,var(--rose),var(--orange));
  transition:width .25s;
}
.nav-link:hover::after{ width:100%; }
.nav-link:hover{ color:var(--rose) !important; }

#mobile-menu.hidden{ display:none; }

.mobile-link{ color:#334155; }
.mobile-link:hover{ color:var(--rose); }

/* ============ Hero ============ */
.hero-section{
  min-height:100vh;
  position:relative;
  display:flex;
  align-items:center;
}
.hero-bg{
  background-image:url('../images/hero-illustration.jpg');
  background-size:cover;
  background-position:center 25%;
  filter:blur(1px) brightness(0.95);
  transform:scale(1.05);
}
.hero-overlay{
  background:linear-gradient(180deg, rgba(80,120,150,0.55) 0%, rgba(150,110,130,0.55) 55%, rgba(247,163,92,0.55) 100%);
}

.title-shadow{ text-shadow:0 2px 10px rgba(0,0,0,0.3); }

.wave-divider{
  position:absolute;
  bottom:-2px; left:0; width:100%;
  line-height:0;
  z-index:5;
}
.wave-divider svg{ width:100%; height:80px; display:block; }

/* rain drops decoration */
.rain-drop{
  position:absolute;
  top:-20px;
  width:2px;
  height:40px;
  background:linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,0.65));
  animation:rainfall 3s linear infinite;
  z-index:2;
}
@keyframes rainfall{
  0%{ transform:translateY(0); opacity:0; }
  10%{ opacity:1; }
  90%{ opacity:0.6; }
  100%{ transform:translateY(110vh); opacity:0; }
}

/* ============ Fade Animations ============ */
.fade-up{
  opacity:0;
  transform:translateY(24px);
  animation:fadeUp .8s ease forwards;
}
.fade-up.delay-1{ animation-delay:.15s; }
.fade-up.delay-2{ animation-delay:.3s; }
.fade-up.delay-3{ animation-delay:.45s; }

@keyframes fadeUp{
  to{ opacity:1; transform:translateY(0); }
}

.reveal{
  opacity:0;
  transform:translateY(30px);
  transition:opacity .7s ease, transform .7s ease;
}
.reveal.show{ opacity:1; transform:translateY(0); }
.reveal.delay-1.show{ transition-delay:.1s; }
.reveal.delay-2.show{ transition-delay:.2s; }

/* ============ Section Common ============ */
.section-pad{ padding:64px 0; }
@media(min-width:768px){ .section-pad{ padding:96px 0; } }

.tag-chip{
  display:inline-block;
  padding:6px 18px;
  border-radius:999px;
  background:linear-gradient(90deg, rgba(244,113,138,0.12), rgba(247,163,92,0.12));
  color:var(--rose);
  font-weight:700;
  font-size:0.85rem;
  letter-spacing:.5px;
}

.section-title{
  font-size:1.9rem;
  font-weight:900;
  color:#2d3748;
  line-height:1.3;
}
@media(min-width:768px){ .section-title{ font-size:2.5rem; } }

/* ============ About Illustration ============ */
.hero-illustration-wrap{
  position:relative;
}
.hero-illustration-wrap::before{
  content:"";
  position:absolute;
  inset:-14px;
  background:linear-gradient(135deg, rgba(244,113,138,0.25), rgba(247,163,92,0.25));
  border-radius:28px;
  z-index:-1;
}

/* ============ Info Cards ============ */
.info-card{
  background:#fff;
  border-radius:20px;
  padding:32px 24px;
  text-align:center;
  box-shadow:0 6px 24px rgba(0,0,0,0.06);
  transition:transform .3s, box-shadow .3s;
}
.info-card:hover{
  transform:translateY(-6px);
  box-shadow:0 16px 32px rgba(0,0,0,0.1);
}
.info-icon{
  width:60px; height:60px;
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:1.5rem;
  margin:0 auto 16px;
}

/* ============ Pricing Cards ============ */
.price-card{
  background:#fff;
  border-radius:24px;
  padding:36px 28px;
  text-align:center;
  box-shadow:0 8px 28px rgba(0,0,0,0.07);
  position:relative;
  display:flex;
  flex-direction:column;
  transition:transform .3s, box-shadow .3s;
}
.price-card:hover{
  transform:translateY(-8px);
  box-shadow:0 20px 40px rgba(0,0,0,0.12);
}
.price-card-highlight{
  background:linear-gradient(160deg,#fff, #fff6ee);
  border:2px solid var(--orange);
  transform:scale(1.03);
}
.price-badge{
  position:absolute;
  top:-14px; left:50%; transform:translateX(-50%);
  background:linear-gradient(90deg,var(--rose),var(--orange));
  color:#fff;
  font-size:.8rem;
  font-weight:700;
  padding:4px 16px;
  border-radius:999px;
  box-shadow:0 4px 10px rgba(0,0,0,0.15);
}
.price-icon{
  width:64px; height:64px;
  border-radius:50%;
  background:#fef1ec;
  color:var(--rose);
  font-size:1.6rem;
  display:flex; align-items:center; justify-content:center;
  margin:0 auto 18px;
}
.price-icon-highlight{
  background:linear-gradient(135deg,var(--rose),var(--orange));
  color:#fff;
}
.price-title{ font-size:1.4rem; font-weight:800; color:#2d3748; }
.price-sub{ color:#94a3b8; font-size:.9rem; margin-top:2px; margin-bottom:14px; }
.price-amount{ font-size:2.1rem; font-weight:900; color:var(--rose); margin-bottom:20px; }
.price-amount-custom{ font-size:1.5rem; }
.price-list{
  text-align:left;
  list-style:none;
  padding:0; margin:0 0 24px;
  color:#64748b;
  flex-grow:1;
  font-size:.95rem;
}
.price-list li{ display:flex; align-items:flex-start; gap:8px; margin-bottom:10px; }
.price-list li i{ color:#22c55e; margin-top:3px; }
.price-btn{
  display:inline-block;
  padding:12px 0;
  border-radius:999px;
  border:2px solid var(--rose);
  color:var(--rose);
  font-weight:700;
  transition:all .25s;
}
.price-btn:hover{ background:var(--rose); color:#fff; }
.price-btn-highlight{
  border:none;
  background:linear-gradient(90deg,var(--rose),var(--orange));
  color:#fff;
}
.price-btn-highlight:hover{ opacity:.9; transform:translateY(-2px); }

/* ============ Deadline banner ============ */
.deadline-banner{
  margin-top:48px;
  max-width:720px;
  margin-left:auto; margin-right:auto;
  background:#fff;
  border:2px dashed var(--orange);
  border-radius:18px;
  padding:20px 28px;
  display:flex;
  align-items:center;
  gap:16px;
  color:#b45309;
  justify-content:center;
  text-align:center;
  flex-wrap:wrap;
}

/* ============ Contact Cards ============ */
.contact-card{
  background:var(--cream);
  border-radius:20px;
  padding:32px 24px;
  text-align:center;
  border:1px solid rgba(0,0,0,0.04);
  transition:transform .3s;
}
.contact-card:hover{ transform:translateY(-6px); }
.contact-icon{
  width:56px; height:56px;
  border-radius:50%;
  background:linear-gradient(135deg,var(--sky),#a5d8ea);
  color:#fff;
  font-size:1.4rem;
  display:flex; align-items:center; justify-content:center;
  margin:0 auto 16px;
}

.contact-email{
  color:#64748b;
  font-size:0.95rem;
}
.contact-email a{
  color:#64748b;
  text-decoration:underline;
  text-decoration-color:rgba(100,116,139,0.4);
  transition:color .2s;
}
.contact-email a:hover{ color:var(--rose); }

/* ============ Notice ============ */
.notice-box{
  background:#fff;
  border-radius:20px;
  padding:32px;
  box-shadow:0 6px 24px rgba(0,0,0,0.05);
}

.permit-note{
  color:#94a3b8;
  font-size:0.85rem;
  letter-spacing:.3px;
}

/* ============ Concert Preview Box ============ */
.concert-preview-box{
  background:#fff;
  border-radius:20px;
  padding:28px 24px;
  box-shadow:0 6px 24px rgba(0,0,0,0.05);
  border:2px dashed rgba(125,196,224,0.5);
}
.concert-icon{
  width:52px; height:52px;
  border-radius:50%;
  background:linear-gradient(135deg,#7dc4e0,#a5d8ea);
  color:#fff;
  font-size:1.3rem;
  display:flex; align-items:center; justify-content:center;
  margin:0 auto 12px;
}
.concert-title{
  font-size:0.85rem;
  font-weight:700;
  color:#7dc4e0;
  letter-spacing:1px;
  margin-bottom:6px;
}
.concert-name{
  font-size:1.25rem;
  font-weight:900;
  color:#2d3748;
  margin-bottom:10px;
}
.concert-meta{
  color:#64748b;
  font-size:0.95rem;
  margin-bottom:6px;
}
.concert-meta-sep{ margin:0 8px; color:#cbd5e1; }
.concert-free{
  display:inline-block;
  background:linear-gradient(90deg,#7dc4e0,#a5d8ea);
  color:#fff;
  font-weight:700;
  font-size:0.85rem;
  padding:4px 16px;
  border-radius:999px;
  margin-bottom:18px;
}
.concert-programs{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:8px;
}
.concert-tag{
  background:#f0f9ff;
  color:#3f7ea6;
  font-size:0.85rem;
  font-weight:600;
  padding:6px 14px;
  border-radius:999px;
  border:1px solid rgba(125,196,224,0.35);
}

.qrcode-wrap{
  margin-top:20px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
}
.qrcode-img{
  width:140px;
  height:140px;
  background:#fff;
  padding:10px;
  border-radius:16px;
  box-shadow:0 6px 20px rgba(0,0,0,0.08);
}
.qrcode-caption{
  font-size:0.85rem;
  color:#94a3b8;
  font-weight:600;
}

/* ============ Final CTA ============ */
.cta-final{
  background-image:url('../images/hero-illustration.jpg');
  background-size:cover;
  background-position:center;
}
.cta-final .hero-overlay{
  background:linear-gradient(135deg, rgba(244,113,138,0.85), rgba(247,163,92,0.85));
}

/* ============ Footer ============ */
.footer-logo{ filter:brightness(0) invert(1) opacity(0.9); }

/* ============ Back to top ============ */
#back-to-top.show{ display:flex; }

/* ============ Responsive tweaks ============ */
@media(max-width:640px){
  .section-title{ font-size:1.6rem; }
  .price-card-highlight{ transform:scale(1); }
}