/* SHUTTER 光圈影像 — Stylesheet */
:root{--bg:#0a0a0a;--bg-alt:#141414;--text:#f5f5f0;--text-muted:#888;--accent:#c9a961;--accent-hover:#d4b572;--serif:'Cormorant Garamond',Georgia,serif;--sans:'Noto Sans TC','Helvetica Neue',Arial,sans-serif;--ease:cubic-bezier(.4,0,.2,1)}
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--sans);color:var(--text);background:var(--bg);line-height:1.6;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
.container{max-width:1200px;margin:0 auto;padding:0 40px}

/* Reveal */
.reveal{opacity:0;transform:translateY(30px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.reveal.visible{opacity:1;transform:none}

/* Buttons */
.btn{display:inline-flex;align-items:center;gap:8px;padding:14px 32px;font-size:.95rem;font-weight:500;letter-spacing:.04em;border-radius:4px;transition:all .35s var(--ease);text-align:center;border:none;cursor:pointer}
.btn-primary{background:var(--accent);color:var(--bg)}
.btn-primary:hover{background:var(--accent-hover);transform:translateY(-2px);box-shadow:0 6px 20px rgba(201,169,97,.3)}
.btn-outline{border:1.5px solid var(--accent);color:var(--accent);background:transparent}
.btn-outline:hover{background:var(--accent);color:var(--bg);transform:translateY(-2px)}
.btn-submit{width:100%;justify-content:center;padding:16px;font-size:1rem}

/* Section shared */
.section-tag{display:inline-block;font-size:.7rem;font-weight:500;letter-spacing:.25em;text-transform:uppercase;color:var(--accent);margin-bottom:12px}
.section-title{font-family:var(--serif);font-size:clamp(2rem,4vw,3rem);font-weight:600;line-height:1.2;margin-bottom:16px;color:var(--text)}
.section-header{text-align:center;margin-bottom:48px}

/* ============ NAV ============ */
.nav{position:fixed;top:0;left:0;right:0;z-index:1000;transition:all .4s var(--ease);background:transparent}
.nav.scrolled{background:rgba(10,10,10,.95);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:0 1px 20px rgba(0,0,0,.4)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;height:72px}
.nav-logo{display:flex;align-items:center;gap:10px}
.logo-icon{width:28px;height:28px;color:var(--accent)}
.logo-text{font-family:var(--serif);font-size:1.25rem;font-weight:600;letter-spacing:.08em;color:var(--text)}
.logo-cn{font-family:var(--sans);font-size:.85rem;font-weight:400;color:var(--text-muted)}
.nav-links{display:flex;gap:32px}
.nav-links a{font-size:.88rem;color:var(--text-muted);transition:color .35s}
.nav-links a:hover{color:var(--text)}
.nav-cta{display:inline-block;padding:8px 24px;font-size:.85rem;font-weight:500;border:1.5px solid var(--accent);color:var(--accent);border-radius:4px;transition:all .35s}
.nav-cta:hover{background:var(--accent);color:var(--bg)}
/* ============ HAMBURGER TOGGLE ============ */
.nav-toggle {
  display: none;
  width: 44px;
  height: 44px;
  position: relative;
  background: transparent;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 50%;
  z-index: 1001;
}
.nav-toggle span {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 18px;
  height: 2px;
  background: var(--text);
  border-radius: 2px;
  transform: translate(-50%, -50%);
  transition: all .4s var(--ease);
}
.nav-toggle span:nth-child(1) { transform: translate(-50%, calc(-50% - 5px)); }
.nav-toggle span:nth-child(3) { transform: translate(-50%, calc(-50% + 5px)); }
body.menu-open .nav-toggle span:nth-child(1) { transform: translate(-50%, -50%) rotate(45deg); }
body.menu-open .nav-toggle span:nth-child(2) { opacity: 0; }
body.menu-open .nav-toggle span:nth-child(3) { transform: translate(-50%, -50%) rotate(-45deg); }

/* ============ MOBILE MENU ============ */
.mobile-menu {
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0;
  background: var(--bg-alt);
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-20px);
  transition: opacity .5s var(--ease), transform .5s var(--ease);
  overflow-y: auto;
}
body.menu-open { overflow: hidden; }
body.menu-open .mobile-menu {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
.mobile-menu ul {
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.mobile-menu a {
  display: block;
  padding: 16px 40px;
  font-family: var(--serif);
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--text-muted);
  letter-spacing: .05em;
  transition: color .3s var(--ease), padding .3s var(--ease);
}
.mobile-menu a:hover { color: var(--accent); padding-left: 48px; }
.mobile-cta {
  display: inline-block;
  margin-top: 24px;
  padding: 14px 36px;
  border: 1.5px solid var(--accent);
  color: var(--accent) !important;
  border-radius: 4px;
  text-align: center;
  font-size: .9rem;
  font-weight: 500;
  letter-spacing: .1em;
  transition: all .3s var(--ease);
}
.mobile-cta:hover { background: var(--accent); color: var(--bg) !important; }

/* ============ HERO ============ */
.hero{min-height:100vh;display:flex;align-items:center;background:var(--bg);padding-top:72px;overflow:hidden}
.hero-inner{display:flex;align-items:center;gap:60px;padding:60px 0}
.filmstrip{flex:0 0 38%;max-width:38%}
.filmstrip-track{background:#1a1a1a;border-radius:2px;padding:8px 28px;position:relative;display:flex;flex-direction:column;gap:12px}
.filmstrip-track::before,.filmstrip-track::after{content:'';position:absolute;top:0;bottom:0;width:12px;background:repeating-linear-gradient(to bottom,transparent 0px,transparent 8px,#333 8px,#333 10px,transparent 10px,transparent 22px)}
.filmstrip-track::before{left:6px}
.filmstrip-track::after{right:6px}
.film-frame{position:relative;border:2px solid #333;border-radius:2px;overflow:hidden;aspect-ratio:3/2}
.film-frame img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.film-frame:hover img{transform:scale(1.05)}
.hero-text{flex:1}
.hero-tag{display:inline-block;font-size:.8rem;letter-spacing:.15em;color:var(--accent);margin-bottom:20px}
.hero-title{font-family:var(--serif);font-size:clamp(2.8rem,6vw,5rem);font-weight:700;line-height:1.15;color:var(--text);margin-bottom:24px}
.hero-desc{font-size:1.05rem;line-height:1.85;color:var(--text-muted);max-width:520px;margin-bottom:36px}
.hero-btns{display:flex;gap:16px;flex-wrap:wrap}

/* ============ PORTFOLIO ============ */
.portfolio{padding:100px 0;background:var(--bg-alt)}
.filter-bar{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;margin-bottom:40px}
.filter-btn{padding:8px 22px;font-size:.88rem;color:var(--text-muted);border:1px solid transparent;border-radius:4px;background:transparent;transition:all .35s}
.filter-btn:hover{color:var(--text)}
.filter-btn.active{color:var(--accent);border-color:var(--accent)}
.masonry{columns:3;column-gap:20px}
.portfolio-item{position:relative;break-inside:avoid;margin-bottom:20px;border-radius:4px;overflow:hidden;cursor:pointer}
.portfolio-item img{width:100%;display:block;transition:transform .6s ease}
.portfolio-item:hover img{transform:scale(1.05)}
.portfolio-overlay{position:absolute;bottom:0;left:0;right:0;padding:20px;background:linear-gradient(transparent,rgba(0,0,0,.8));opacity:0;transition:opacity .4s}
.portfolio-item:hover .portfolio-overlay{opacity:1}
.portfolio-cat{display:inline-block;font-size:.7rem;letter-spacing:.15em;text-transform:uppercase;color:var(--accent);margin-bottom:4px}
.portfolio-name{font-family:var(--serif);font-size:1.1rem;color:#fff}

/* ============ SERVICES ============ */
.services{padding:100px 0;background:var(--bg)}
.services-row{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.service-card{background:var(--bg-alt);border:1px solid rgba(255,255,255,.06);border-radius:8px;padding:36px 28px;text-align:center;transition:transform .4s var(--ease),box-shadow .4s var(--ease)}
.service-card:hover{transform:translateY(-6px);box-shadow:0 12px 40px rgba(0,0,0,.3)}
.service-icon{width:56px;height:56px;margin:0 auto 20px;color:var(--accent)}
.service-icon svg{width:100%;height:100%}
.service-name{font-family:var(--serif);font-size:1.2rem;font-weight:600;margin-bottom:12px;color:var(--text)}
.service-desc{font-size:.88rem;line-height:1.7;color:var(--text-muted);margin-bottom:16px}
.service-price{font-size:.85rem;font-weight:500;color:var(--accent);letter-spacing:.05em}

/* ============ ABOUT ============ */
.about{padding:100px 0;background:var(--bg-alt)}
.about-inner{display:flex;align-items:flex-start;gap:60px}
.about-photo{flex:0 0 45%;max-width:45%;border-radius:4px;overflow:hidden}
.about-photo img{width:100%;height:auto;object-fit:cover}
.about-text{flex:1}
.about-bio{font-size:.95rem;line-height:1.85;color:var(--text-muted);margin-bottom:16px}
.about-specs{margin-top:28px;padding:20px;border:1px solid var(--accent);border-radius:4px}
.specs-label{display:block;font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--accent);margin-bottom:8px}
.specs-list{font-size:.9rem;color:var(--text-muted);letter-spacing:.05em}
.about-stats{display:flex;gap:40px;margin-top:32px}
.about-stat{text-align:center}
.stat-number{display:block;font-family:var(--serif);font-size:2.2rem;font-weight:700;color:var(--accent);line-height:1}
.stat-label{font-size:.8rem;color:var(--text-muted);margin-top:4px}

/* ============ TESTIMONIALS ============ */
.testimonials{padding:100px 0;background:var(--bg)}
.testimonials-row{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.testimonial-card{background:var(--bg-alt);border:1px solid rgba(255,255,255,.06);border-radius:8px;padding:36px 28px}
.stars{display:flex;gap:4px;margin-bottom:16px;color:var(--accent)}
.stars svg{width:16px;height:16px}
.testimonial-quote{font-family:var(--serif);font-size:1rem;font-style:italic;line-height:1.8;color:var(--text);margin-bottom:20px}
.testimonial-author{padding-top:16px;border-top:1px solid rgba(255,255,255,.08)}
.author-name{display:block;font-size:.9rem;font-weight:500;color:var(--text);margin-bottom:2px}
.author-event{font-size:.8rem;color:var(--accent)}

/* ============ CONTACT ============ */
.contact{position:relative;padding:100px 0;min-height:80vh;display:flex;align-items:center}
.contact-bg{position:absolute;top:0;left:0;right:0;bottom:0;background-size:cover;background-position:center;background-repeat:no-repeat}
.contact-overlay{position:absolute;top:0;left:0;right:0;bottom:0;background:rgba(10,10,10,.88)}
.contact-content{position:relative;z-index:2;max-width:700px;margin:0 auto}
.contact-subtitle{font-size:.95rem;color:var(--text-muted);margin-top:8px}
.contact-form{display:flex;flex-direction:column;gap:20px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.form-group{display:flex;flex-direction:column}
.form-group label{font-size:.8rem;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);margin-bottom:8px}
.form-group input,.form-group select,.form-group textarea{width:100%;padding:12px 16px;font-size:.9rem;font-family:var(--sans);color:var(--text);background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);border-radius:4px;transition:border-color .3s,background .3s;outline:none}
.form-group input:focus,.form-group select:focus,.form-group textarea:focus{border-color:var(--accent);background:rgba(255,255,255,.08)}
.form-group input::placeholder,.form-group textarea::placeholder{color:rgba(255,255,255,.3)}
.form-group select{cursor:pointer;-webkit-appearance:none;appearance:none}
.form-group textarea{resize:vertical;min-height:80px}

/* ============ FOOTER ============ */
.footer{background:var(--bg-alt);padding:48px 0;border-top:1px solid rgba(255,255,255,.06)}
.footer-inner{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:24px}
.footer-brand{display:flex;align-items:center;gap:10px}
.footer-social{display:flex;gap:16px}
.footer-social a{width:40px;height:40px;display:flex;align-items:center;justify-content:center;border:1px solid rgba(255,255,255,.12);border-radius:50%;color:var(--text-muted);transition:all .3s}
.footer-social a:hover{background:var(--accent);border-color:var(--accent);color:var(--bg)}
.footer-social svg{width:18px;height:18px}
.footer-copy{font-size:.8rem;color:var(--text-muted)}

/* ============ RESPONSIVE 1024px ============ */
@media (max-width: 1024px) {
  .container { padding: 0 28px; }
  .hero-inner { gap: 40px; }
  .services-row { grid-template-columns: repeat(2, 1fr); }
  .masonry { columns: 2; }
  .testimonials-row { grid-template-columns: 1fr; gap: 20px; }
  .about-inner { gap: 40px; }
}

/* ============ RESPONSIVE 768px ============ */
@media (max-width: 768px) {
  .nav-links, .nav-cta { display: none; }
  .nav-toggle { display: block; }
  .container { padding: 0 20px; }

  /* Hero */
  .hero { min-height: auto; padding-top: 80px; padding-bottom: 40px; }
  .hero-inner { flex-direction: column; gap: 32px; padding: 40px 0; }
  .filmstrip { flex: none; max-width: 100%; width: 100%; }
  .filmstrip-track {
    flex-direction: row;
    overflow-x: auto;
    gap: 12px;
    padding: 8px 20px;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
  }
  .filmstrip-track::before,
  .filmstrip-track::after { display: none; }
  .film-frame {
    min-width: 240px;
    flex-shrink: 0;
    aspect-ratio: 3/2;
    scroll-snap-align: start;
  }
  .hero-text { text-align: center; }
  .hero-title { font-size: clamp(2rem, 8vw, 3rem); }
  .hero-desc { font-size: .95rem; margin: 0 auto 28px; }
  .hero-btns { justify-content: center; }

  /* Portfolio */
  .portfolio { padding: 72px 0; }
  .masonry { columns: 1; }
  .filter-bar { gap: 8px; }
  .filter-btn { padding: 6px 16px; font-size: .82rem; }

  /* Services */
  .services { padding: 72px 0; }
  .services-row { grid-template-columns: 1fr; gap: 16px; }
  .service-card { padding: 28px 24px; }
  .service-name { font-size: 1.1rem; }

  /* About */
  .about { padding: 72px 0; }
  .about-inner { flex-direction: column; gap: 32px; }
  .about-photo { flex: none; max-width: 100%; }
  .about-stats { justify-content: center; gap: 28px; }
  .stat-number { font-size: 1.8rem; }

  /* Testimonials */
  .testimonials { padding: 72px 0; }
  .testimonials-row { grid-template-columns: 1fr; gap: 16px; }
  .testimonial-card { padding: 28px 22px; }
  .testimonial-quote { font-size: .92rem; line-height: 1.7; }

  /* Contact */
  .contact { padding: 72px 0; min-height: auto; }
  .form-row { grid-template-columns: 1fr; }
  .section-title { font-size: clamp(1.6rem, 6vw, 2.4rem); }
  .section-tag { font-size: .65rem; }

  /* Footer */
  .footer-inner { flex-direction: column; text-align: center; gap: 20px; }
}

/* ============ RESPONSIVE 480px ============ */
@media (max-width: 480px) {
  .container { padding: 0 16px; }
  .hero-title { font-size: clamp(1.6rem, 9vw, 2.2rem); }
  .hero-tag { font-size: .7rem; letter-spacing: .1em; }
  .hero-btns {
    flex-direction: column;
    align-items: center;
    gap: 10px;
  }
  .hero-btns .btn {
    width: 100%;
    max-width: 280px;
    justify-content: center;
  }
  .film-frame { min-width: 200px; }
  .section-title { font-size: clamp(1.4rem, 7vw, 1.8rem); }
  .about-stats { flex-wrap: wrap; justify-content: center; }
  .service-card { padding: 24px 20px; }
  .testimonial-card { padding: 24px 18px; }
  .mobile-menu a { font-size: 1.2rem; padding: 14px 32px; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  .reveal { opacity: 1; transform: none; }
}