/* ============================================================
   二峰圳生活節 — vanilla port of 二峰圳生活節.dc.html
   (Claude Design prototype → dependency-free HTML/CSS/JS)

   This stylesheet only carries what inline styles can't express:
   keyframes, the header scroll-state swap, scroll-spy nav active
   state, the day-toggle buttons, and reduced-motion fallbacks.
   Everything visual/layout stays inline in index.html so the markup
   remains a 1:1 of the design source.
   ============================================================ */

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:'Huninn','Noto Sans TC',sans-serif;color:#16242e;background:#ffffff;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}

/* ---- keyframes (verbatim from the prototype <style>) ---- */
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-18px)}}
@keyframes floatyX{0%,100%{transform:translate(0,0)}50%{transform:translate(10px,-14px)}}
@keyframes revealUp{from{opacity:0;transform:translateY(34px)}to{opacity:1;transform:none}}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(8px)}}
@keyframes heroIn{from{opacity:0;transform:scale(1.05)}to{opacity:1;transform:none}}
@keyframes drift{0%,100%{transform:translate(0,0)}50%{transform:translate(16px,-24px)}}
@keyframes sheen{0%{transform:translateX(-90%) skewX(-12deg)}100%{transform:translateX(340%) skewX(-12deg)}}
@keyframes ripple{from{transform:translate(-50%,-50%) scale(.35);opacity:.55}to{transform:translate(-50%,-50%) scale(11);opacity:0}}
@keyframes rippleRing{0%{transform:translate(-50%,-50%) scale(.12);opacity:0}12%{opacity:.6}100%{transform:translate(-50%,-50%) scale(1);opacity:0}}
@keyframes rippleDot{0%{transform:translate(-50%,-50%) scale(1);opacity:.7}100%{transform:translate(-50%,-50%) scale(0);opacity:0}}
@keyframes waveMove{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ============================================================
   HERO — copy rides directly on the full water key visual (open, airy
   layout). The KV is left untouched; clarity comes only from the type:
   a soft DEEP-SEA-BLUE glow (large blur, never hard black) lifts the
   white headline and eyebrow off the ripples so they "float" without a
   card, scrim, or any dimming of the art.
   ============================================================ */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* key visual: wide banner — ripples on the sides, clean centre for text.
   Desktop fills it edge-to-edge (cover). On phones, cover would crop the
   side ripples away, so instead lay the FULL banner across the top at
   100% width (both ripple clusters visible, text on the clean centre) and
   let solid cobalt continue below. */
#top{ background-image:url('assets/hero-banner.webp'); background-size:cover; background-position:center; background-repeat:no-repeat; }
@media (max-width:680px){
  #top{ background-size:100% auto; background-position:top center; }
}

.hero-title{
  margin:0; color:#fff; font-weight:400; line-height:1.06;
  font-size:clamp(38px,8.4vw,90px); letter-spacing:.07em; text-indent:.07em;
}

/* ---- header: transparent over hero → frosted white on scroll ---- */
/* Default (not scrolled): the design's `headerStyle` for state.scrolled = false */
.site-header{
  background:linear-gradient(to bottom,rgba(2,82,128,.58),rgba(2,82,128,.12) 70%,rgba(2,82,128,0));
  border-bottom:1px solid transparent;
}
.site-header.scrolled{
  background:rgba(255,255,255,.86);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(3,143,216,.12);
  box-shadow:0 4px 22px rgba(3,143,216,.07);
}
/* brand mark + wordmark colour swap */
.brand-badge{background:#ffffff;color:#038fd8}
.brand-name{color:#ffffff}
.site-header.scrolled .brand-badge{background:#038fd8;color:#ffffff}
.site-header.scrolled .brand-name{color:#038fd8}

/* nav links: white over hero, slate once frosted, brand-blue when active */
.nav-link{color:rgba(255,255,255,.96);background:transparent}
.site-header.scrolled .nav-link{color:#3a4c57}
.site-header.scrolled .nav-link.active{color:#038fd8;background:rgba(3,143,216,.10)}

/* ---- mobile nav: hamburger → dropdown menu ---- */
.nav-toggle{display:none}
@media (max-width:680px){
  .nav-toggle{
    display:flex;flex-direction:column;justify-content:center;gap:5px;flex-shrink:0;
    width:44px;height:44px;padding:0 9px;border:none;background:transparent;cursor:pointer;
  }
  .nav-toggle span{display:block;height:2.5px;border-radius:2px;background:#fff;transition:transform .3s,opacity .2s,background .3s}
  .site-header.scrolled .nav-toggle span,
  .site-header.menu-open .nav-toggle span{background:#038fd8}
  .nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
  .nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
  .nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}

  /* solid white header while the menu is open */
  .site-header.menu-open{background:#fff;box-shadow:0 4px 22px rgba(3,143,216,.10)}
  .site-header.menu-open .brand-name{color:#038fd8}
  .site-header.menu-open .brand-badge{background:#038fd8;color:#fff}

  /* the nav collapses into a dropdown panel */
  #primary-nav{
    position:absolute;top:100%;left:0;right:0;
    flex-direction:column;align-items:stretch !important;gap:0 !important;
    background:#fff;overflow:hidden;
    max-height:0;padding:0 14px;
    box-shadow:0 18px 30px rgba(2,52,86,.16);border-radius:0 0 20px 20px;
    transition:max-height .32s ease,padding .32s ease;pointer-events:none;
  }
  #primary-nav.open{max-height:80vh;padding:8px 14px 16px;pointer-events:auto;overflow-y:auto}
  #primary-nav .nav-link{
    color:#16242e !important;background:transparent !important;
    font-size:17px !important;padding:14px 14px !important;border-radius:12px !important;
    text-align:left;border-bottom:1px solid #eef3f6;
  }
  #primary-nav .nav-link.active{color:#038fd8 !important;background:#eaf6fd !important}
  /* the "我要報名" CTA → full-width button at the foot of the menu */
  #primary-nav > a:last-child{
    margin:12px 0 0 !important;padding:15px !important;font-size:17px !important;
    text-align:center;border-radius:30px !important;
  }
}

/* ---- day toggle buttons (Schedule) ---- */
.day-btn{cursor:pointer;font-family:inherit;font-size:16px;padding:14px 26px;border-radius:40px;transition:all .2s;border:2px solid #cfe6f5;background:#fff;color:#0a6fa6}
.day-btn.active{border-color:#038fd8;background:#038fd8;color:#fff;box-shadow:0 10px 22px rgba(3,143,216,.25)}

/* ---- back-to-top reveal ---- */
.to-top{opacity:0;pointer-events:none}
.to-top.show{opacity:1;pointer-events:auto}

/* ---- reduced motion: freeze decorative + scroll-driven motion ---- */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *{animation-duration:.001ms !important;animation-iteration-count:1 !important;animation-delay:0ms !important;transition-duration:.001ms !important}
  /* keep scroll-reveal content visible rather than stuck at opacity:0 */
  [style*="animation-timeline"]{opacity:1 !important;transform:none !important}
}