/* 汐日攝影 — Core Styles */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}

/* ── Custom Cursor ── */
@media (hover: hover) and (pointer: fine) {
  body, a, button, [role="button"], input, select, textarea { cursor: none !important; }
}

.cursor-ring {
  position: fixed;
  top: 0; left: 0;
  width: 36px; height: 36px;
  border: 1px solid rgba(255,255,255,0.5);
  border-radius: 50%;
  pointer-events: none;
  z-index: 999999;
  transform: translate(-50%, -50%);
  transition: width 0.25s ease, height 0.25s ease,
              border-color 0.25s ease, background 0.25s ease,
              opacity 0.3s ease;
}

.cursor-dot {
  position: fixed;
  top: 0; left: 0;
  width: 4px; height: 4px;
  background: rgba(255,255,255,0.9);
  border-radius: 50%;
  pointer-events: none;
  z-index: 999999;
  transform: translate(-50%, -50%);
  transition: opacity 0.3s ease;
}

.cursor-ring.cursor-hover {
  width: 52px; height: 52px;
  border-color: rgba(255,255,255,0.7);
  background: rgba(255,255,255,0.05);
}

.cursor-ring.cursor-click {
  width: 22px; height: 22px;
  border-color: rgba(255,255,255,0.9);
}

.cursor-dot.cursor-hover { opacity: 0.3; }

/* Hide on touch devices */
@media (hover: none), (pointer: coarse) {
  .cursor-ring, .cursor-dot { display: none; }
}

:root{
  --black:#000;--black-soft:#0a0a0a;--dark-1:#111;--dark-2:#1a1a1a;--dark-3:#222;
  --gray-dark:#333;--gray-mid:#555;--gray:#888;--gray-light:#aaa;
  --white-soft:#f0f0f0;--white:#fff;
  --font-serif:'Playfair Display',Georgia,serif;
  --font-sans:'Montserrat',Arial,sans-serif;
  --font-light:'Cormorant Garamond',Georgia,serif;
  --tr:0.4s cubic-bezier(0.25,0.46,0.45,0.94);
  --tr-slow:0.7s cubic-bezier(0.25,0.46,0.45,0.94);
}
html{scroll-behavior:auto}
body{background:var(--black-soft);color:var(--white);font-family:var(--font-sans);font-weight:300;line-height:1.7;overflow-x:hidden}
img{max-width:100%;display:block}
a{text-decoration:none;color:inherit}
ul{list-style:none}
em{font-style:italic}
::selection{background:var(--white);color:var(--black)}
::-webkit-scrollbar{width:4px}
::-webkit-scrollbar-track{background:var(--black)}
::-webkit-scrollbar-thumb{background:var(--gray-mid);border-radius:2px}
.container{max-width:1200px;margin:0 auto;padding:0 40px}

/* Section Commons */
.section-label{font-family:var(--font-sans);font-size:.7rem;font-weight:500;letter-spacing:.4em;color:var(--gray);text-transform:uppercase;margin-bottom:16px}
.section-title{font-family:var(--font-serif);font-size:clamp(2rem,4vw,3.2rem);font-weight:400;line-height:1.2;color:var(--white)}
.section-title em{color:var(--gray-light);font-style:italic}
.section-divider{width:48px;height:1px;background:var(--gray-mid);margin:24px 0}
.section-divider.center{margin:24px auto}
.section-desc{font-family:var(--font-light);font-size:1.05rem;color:var(--gray);letter-spacing:.05em}
.section-header{text-align:center;margin-bottom:60px}

/* Buttons */
.btn-primary{display:inline-flex;align-items:center;gap:10px;padding:14px 36px;background:transparent;color:var(--white);border:1px solid var(--white);font-family:var(--font-sans);font-size:.75rem;font-weight:500;letter-spacing:.25em;text-transform:uppercase;cursor:pointer;transition:var(--tr);position:relative;overflow:hidden}
.btn-primary::before{content:'';position:absolute;inset:0;background:var(--white);transform:translateX(-100%);transition:var(--tr);z-index:0}
.btn-primary:hover::before{transform:translateX(0)}
.btn-primary:hover{color:var(--black)}
.btn-primary i{position:relative;z-index:1}
.btn-primary.full-width{width:100%;justify-content:center}
.btn-secondary{display:inline-flex;align-items:center;gap:12px;padding:14px 36px;background:transparent;color:var(--gray-light);border:1px solid var(--gray-dark);font-family:var(--font-sans);font-size:.75rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;cursor:pointer;transition:var(--tr)}
.btn-secondary:hover{color:var(--white);border-color:var(--white)}

/* Navbar */
.navbar{position:fixed;top:0;left:0;width:100%;z-index:1000;padding:24px 0;transition:background var(--tr),padding var(--tr)}
.navbar.scrolled{background:rgba(0,0,0,.96);padding:14px 0;border-bottom:1px solid rgba(255,255,255,.05)}
.nav-container{max-width:1200px;margin:0 auto;padding:0 40px;display:flex;align-items:center;justify-content:space-between}
.nav-logo{display:flex;align-items:center}
.logo-img{height:44px;width:auto;filter:brightness(0) invert(1);transition:var(--tr)}
.logo-img:hover{opacity:.75}
.nav-links{display:flex;align-items:center;gap:40px}
.nav-link{font-family:var(--font-sans);font-size:.7rem;font-weight:400;letter-spacing:.2em;text-transform:uppercase;color:var(--gray-light);transition:color var(--tr);position:relative}
.nav-link::after{content:'';position:absolute;bottom:-4px;left:0;width:0;height:1px;background:var(--white);transition:width var(--tr)}
.nav-link:hover,.nav-link.active{color:var(--white)}
.nav-link:hover::after,.nav-link.active::after{width:100%}
.nav-toggle{display:none;flex-direction:column;gap:6px;background:none;border:none;cursor:pointer;padding:4px}
.nav-toggle span{display:block;width:24px;height:1px;background:var(--white);transition:var(--tr)}
.nav-toggle.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle.open span:nth-child(2){opacity:0}
.nav-toggle.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* Hero */
.hero{position:relative;height:100vh;min-height:700px;display:flex;align-items:center;justify-content:center;overflow:hidden;background:var(--black)}

/* Hero background slideshow — JS controlled */
.hero-bg{position:absolute;inset:0;z-index:0}
.hero-bg-slide{
  position:absolute;inset:0;
  background-size:cover;
  background-position:center;
  opacity:0;
  transition:opacity 1.2s ease;
}
.hero-bg-slide.active{opacity:1;}

.hero-overlay{position:absolute;inset:0;background:linear-gradient(to bottom,rgba(0,0,0,.55) 0%,rgba(0,0,0,.35) 40%,rgba(0,0,0,.7) 100%);z-index:1}
.hero-content{position:absolute;z-index:3;bottom:120px;left:clamp(32px,5vw,80px);text-align:left;max-width:860px;padding:0}
.hero-subtitle{font-family:var(--font-sans);font-size:.65rem;font-weight:300;letter-spacing:.55em;color:rgba(255,255,255,.5);text-transform:uppercase;margin-bottom:20px}
.hero-title{font-family:var(--font-serif);font-size:clamp(2.2rem,5.5vw,4.8rem);font-weight:400;line-height:1.15;color:var(--white);white-space:nowrap}
.hero-title span{display:inline}
.hero-title em{font-style:italic;color:var(--gray-light);margin-left:.12em}
.hero-divider{width:48px;height:1px;background:linear-gradient(to right,var(--gray-mid),transparent);margin:24px 0}
.hero-desc{font-family:var(--font-light);font-size:.95rem;color:rgba(255,255,255,.55);letter-spacing:.12em;margin-bottom:36px}
.hero-scroll{position:absolute;bottom:40px;left:50%;transform:translateX(-50%);z-index:3;display:flex;flex-direction:column;align-items:center;gap:10px;opacity:.5}
.hero-scroll span{font-family:var(--font-sans);font-size:.55rem;letter-spacing:.35em;color:var(--gray);text-transform:uppercase}
.scroll-line{width:1px;height:48px;background:linear-gradient(to bottom,var(--gray-mid),transparent);animation:scrollPulse 1.8s ease-in-out infinite}
@keyframes scrollPulse{0%,100%{opacity:.3;transform:scaleY(1)}50%{opacity:1;transform:scaleY(1.15)}}

/* About */
.about{padding:120px 0;background:var(--dark-1)}
.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center}
.about-image-wrap{position:relative}
.about-img-placeholder{aspect-ratio:3/4;background:var(--dark-3);border:1px solid var(--gray-dark);display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}
.about-img-placeholder::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,var(--dark-2) 0%,var(--dark-3) 50%,var(--dark-2) 100%)}
.about-logo-display{width:70%;max-width:260px;filter:brightness(0) invert(1);opacity:.15;position:relative;z-index:1}
.about-img-accent{position:absolute;bottom:-20px;right:-20px;width:100%;height:100%;border:1px solid var(--gray-dark);z-index:-1}
.about-content{padding:20px 0}
.about-text{font-family:var(--font-light);font-size:1rem;color:var(--gray-light);line-height:1.9;margin-bottom:20px}
.about-stats{display:flex;align-items:center;margin-top:48px;padding-top:40px;border-top:1px solid var(--gray-dark)}
.stat-item{display:flex;flex-direction:column;gap:6px;flex:1;text-align:center}
.stat-num{font-family:var(--font-serif);font-size:2.2rem;font-weight:400;color:var(--white);line-height:1}
.stat-num em{font-size:1.1rem;color:var(--gray)}
.stat-label{font-family:var(--font-sans);font-size:.65rem;letter-spacing:.2em;color:var(--gray);text-transform:uppercase}
.stat-divider{width:1px;height:40px;background:var(--gray-dark)}

/* Portfolio */
.portfolio{padding:120px 0;background:var(--black-soft)}
.portfolio > .container { max-width: 100%; padding: 0 16px; }
.portfolio-filter{display:flex;justify-content:center;gap:8px;margin-bottom:50px;flex-wrap:wrap}
.filter-btn{background:none;border:1px solid transparent;color:var(--gray);font-family:var(--font-sans);font-size:.65rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;padding:8px 20px;cursor:pointer;transition:var(--tr)}
.filter-btn:hover{color:var(--white);border-color:var(--gray-dark)}
.filter-btn.active{color:var(--white);border-color:var(--white)}
/* 3-column grid, all items 16:9, main works span 2 cols */
.portfolio-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:5px}
.portfolio-item{position:relative;overflow:hidden;cursor:pointer;aspect-ratio:16/9}
.portfolio-item.main{grid-column:span 2;aspect-ratio:16/9}
.portfolio-item.wide{grid-column:span 2;aspect-ratio:16/9}
.portfolio-item.large{grid-column:span 2;grid-row:span 2;aspect-ratio:auto}
.portfolio-item.tall{grid-row:span 2;aspect-ratio:auto}
.portfolio-item.w3{grid-column:span 3;aspect-ratio:16/9}
/* Images fill entire cell */
.portfolio-img{position:absolute;inset:0;width:100%;height:100%;transition:transform var(--tr-slow);display:flex;align-items:flex-start;padding:16px}
.p-bg-1{background:linear-gradient(135deg,#111 0%,#2a2a2a 60%,#161616 100%)}
.p-bg-2{background:linear-gradient(135deg,#1a1a1a 0%,#3a3a3a 60%,#111 100%)}
.p-bg-3{background:linear-gradient(135deg,#0d0d0d 0%,#2d2d2d 60%,#1a1a1a 100%)}
.p-bg-4{background:linear-gradient(135deg,#222 0%,#111 60%,#333 100%)}
.p-bg-5{background:linear-gradient(135deg,#181818 0%,#383838 60%,#101010 100%)}
.p-bg-6{background:linear-gradient(135deg,#141414 0%,#303030 60%,#1c1c1c 100%)}
/* Portfolio image slideshow overlay */
.portfolio-img-next {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  filter: grayscale(100%) brightness(0.65);
  opacity: 0;
  transition: opacity 0.9s cubic-bezier(0.4,0,0.2,1);
  z-index: 1;
}
.portfolio-img-next.visible { opacity: 1; }

.portfolio-number{font-family:var(--font-serif);font-size:4rem;color:rgba(255,255,255,.06);font-weight:400;line-height:1;user-select:none;position:relative;z-index:2;}
.portfolio-overlay{position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.9) 0%,rgba(0,0,0,.2) 50%,transparent 100%);display:flex;flex-direction:column;justify-content:flex-end;padding:28px;transform:translateY(8px);opacity:0;transition:var(--tr)}
.portfolio-item:hover .portfolio-overlay{opacity:1;transform:translateY(0)}
.portfolio-item:hover .portfolio-img{transform:scale(1.04)}
.portfolio-cat{font-family:var(--font-sans);font-size:.6rem;letter-spacing:.3em;color:var(--gray);text-transform:uppercase;margin-bottom:6px}
.portfolio-name{font-family:var(--font-serif);font-size:1.3rem;font-weight:400;color:var(--white);margin-bottom:12px}
.portfolio-icon{width:32px;height:32px;border:1px solid rgba(255,255,255,.3);display:flex;align-items:center;justify-content:center;font-size:.7rem;color:var(--white);transition:var(--tr)}
.portfolio-item:hover .portfolio-icon{background:var(--white);color:var(--black);border-color:var(--white)}
.portfolio-item.hidden{display:none}
.portfolio-cta{text-align:center;margin-top:60px}
.portfolio-link{display:block;width:100%;height:100%;position:absolute;inset:0}

/* Quote */
.quote-banner{padding:100px 40px;background:var(--dark-1);border-top:1px solid var(--dark-3);border-bottom:1px solid var(--dark-3);text-align:center}
.quote-inner{max-width:700px;margin:0 auto}
.quote-icon{font-size:1.5rem;color:var(--gray-dark);margin-bottom:24px;display:block}
.quote-text{font-family:var(--font-serif);font-size:clamp(1.2rem,2.5vw,1.7rem);font-weight:400;color:var(--white-soft);line-height:1.6;margin-bottom:20px;font-style:italic}
.quote-author{font-family:var(--font-sans);font-size:.65rem;letter-spacing:.3em;color:var(--gray);text-transform:uppercase}

/* Services */
.services{padding:120px 0;background:var(--black-soft)}
.services-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:2px}
.service-card{padding:50px 40px;border:1px solid var(--dark-3);background:var(--dark-1);transition:var(--tr);position:relative;overflow:hidden}
.service-card::before{content:'';position:absolute;bottom:0;left:0;width:0;height:1px;background:var(--white);transition:width var(--tr-slow)}
.service-card:hover::before{width:100%}
.service-card:hover{border-color:var(--gray-dark);background:var(--dark-2)}
.service-icon{font-size:1.4rem;color:var(--gray-mid);margin-bottom:24px}
.service-title{font-family:var(--font-serif);font-size:1.4rem;font-weight:400;color:var(--white);margin-bottom:16px}
.service-line{width:32px;height:1px;background:var(--gray-dark);margin-bottom:20px}
.service-desc{font-family:var(--font-light);font-size:.95rem;color:var(--gray);line-height:1.8;margin-bottom:24px}
.service-features{display:flex;flex-direction:column;gap:10px}
.service-features li{font-family:var(--font-sans);font-size:.7rem;color:var(--gray-light);letter-spacing:.05em;display:flex;align-items:center;gap:10px}
.service-features li i{color:var(--gray-mid);font-size:.6rem}

/* Contact */
.contact{padding:120px 0;background:var(--dark-1)}
.contact-grid{display:grid;grid-template-columns:1fr;gap:80px;align-items:start;max-width:560px;margin:0 auto}
.contact-info{display:flex;flex-direction:column;gap:36px}
.contact-info-item{display:flex;align-items:flex-start;gap:20px}
.contact-info-icon{width:40px;height:40px;border:1px solid var(--gray-dark);display:flex;align-items:center;justify-content:center;font-size:.85rem;color:var(--gray);flex-shrink:0}
.contact-info-text h4{font-family:var(--font-sans);font-size:.65rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gray);margin-bottom:6px}
.contact-info-text p{font-family:var(--font-light);font-size:1rem;color:var(--gray-light)}
.contact-social{display:flex;gap:12px;margin-top:8px}
.social-btn{width:40px;height:40px;border:1px solid var(--gray-dark);display:flex;align-items:center;justify-content:center;font-size:.85rem;color:var(--gray);transition:var(--tr)}
.social-btn:hover{border-color:var(--white);color:var(--white)}
.contact-form{display:flex;flex-direction:column;gap:20px}
.form-group{position:relative}
.form-input{width:100%;background:transparent;border:none;border-bottom:1px solid var(--gray-dark);padding:16px 0 12px;color:var(--white);font-family:var(--font-sans);font-size:.85rem;font-weight:300;outline:none;transition:border-color var(--tr)}
.form-input:focus{border-color:var(--white)}