/* =========================================================
   Granite Blend Gate — Shared Stylesheet
   Premium Japanese architectural aesthetic
   ========================================================= */

:root{
  --charcoal:#1c1b19;
  --stone-900:#211f1c;
  --stone-800:#2b2926;
  --stone-700:#3d3a35;
  --stone-600:#6f6b62;
  --stone-500:#8c877c;
  --stone-400:#a8a296;
  --stone-300:#c7c1b3;
  --stone-200:#e2ddd0;
  --beige:#ede7db;
  --beige-dark:#ddd3c0;
  --bronze:#a97142;
  --bronze-light:#c99b6a;
  --bronze-dark:#7c5230;
  --soft:#faf8f4;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  font-family:'Jost',sans-serif;
  background:var(--soft);
  color:var(--charcoal);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
.font-display{ font-family:'Marcellus', serif; }
.font-jp{ font-family:'Noto Serif JP', serif; }
.font-jpsans{ font-family:'Noto Sans JP', sans-serif; }

::selection{ background:var(--bronze); color:var(--soft); }

/* Scrollbar */
::-webkit-scrollbar{ width:9px; height:9px; }
::-webkit-scrollbar-track{ background:var(--beige); }
::-webkit-scrollbar-thumb{ background:var(--stone-400); border-radius:0; }
::-webkit-scrollbar-thumb:hover{ background:var(--bronze); }

/* =============== NAV =============== */
.glass-nav{
  background:rgba(250,248,244,0.55);
  backdrop-filter:blur(16px) saturate(140%);
  -webkit-backdrop-filter:blur(16px) saturate(140%);
  border-bottom:1px solid rgba(28,27,25,0.06);
  transition:background .5s ease, box-shadow .5s ease, padding .4s ease;
}
.glass-nav.nav-scrolled{
  background:rgba(250,248,244,0.9);
  box-shadow:0 8px 30px -12px rgba(28,27,25,0.15);
}
.nav-link{
  position:relative;
  letter-spacing:.04em;
  color:var(--stone-700);
  transition:color .35s ease;
}
.nav-link::after{
  content:'';
  position:absolute; left:0; bottom:-6px;
  width:0; height:1px;
  background:var(--bronze);
  transition:width .4s cubic-bezier(.4,0,.2,1);
}
.nav-link:hover{ color:var(--charcoal); }
.nav-link:hover::after{ width:100%; }
.nav-link.active{ color:var(--bronze-dark); }
.nav-link.active::after{ width:100%; background:var(--bronze-dark); }

#mobileMenu{
  max-height:0;
  overflow:hidden;
  transition:max-height .55s cubic-bezier(.4,0,.2,1);
}
#mobileMenu.open{ max-height:640px; }

.hamburger span{
  display:block; width:24px; height:1px; background:var(--charcoal);
  margin:6px 0; transition:transform .4s ease, opacity .3s ease;
}
.hamburger.active span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.hamburger.active span:nth-child(2){ opacity:0; }
.hamburger.active span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* =============== BUTTONS =============== */
.btn-arch{
  position:relative;
  display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
  padding:1rem 2.3rem;
  font-family:'Jost',sans-serif;
  font-size:.8rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  overflow:hidden;
  transition:color .5s ease, border-color .5s ease;
  z-index:0;
}
.btn-arch::before{
  content:'';
  position:absolute; inset:0;
  background:var(--charcoal);
  transform:translateX(-101%);
  transition:transform .55s cubic-bezier(.65,0,.35,1);
  z-index:-1;
}
.btn-primary{ background:var(--charcoal); color:var(--soft); border:1px solid var(--charcoal); }
.btn-primary::before{ background:var(--bronze-dark); }
.btn-primary:hover::before{ transform:translateX(0); }

.btn-outline{ background:transparent; color:var(--charcoal); border:1px solid var(--charcoal); }
.btn-outline::before{ background:var(--charcoal); }
.btn-outline:hover{ color:var(--soft); }
.btn-outline:hover::before{ transform:translateX(0); }

.btn-outline-light{ background:transparent; color:var(--soft); border:1px solid rgba(250,248,244,.6); }
.btn-outline-light::before{ background:var(--soft); }
.btn-outline-light:hover{ color:var(--charcoal); }
.btn-outline-light:hover::before{ transform:translateX(0); }

/* =============== HERO / LIGHT SWEEP =============== */
.stone-surface{ position:relative; overflow:hidden; }
.stone-surface::after{
  content:'';
  position:absolute; top:0; left:-60%;
  width:40%; height:100%;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.16) 45%, transparent 90%);
  transform:skewX(-18deg);
  animation:lightSweep 9s ease-in-out infinite;
  pointer-events:none;
}
@keyframes lightSweep{0%{transform:skewX(-18deg) translateX(0)}50%{transform:skewX(-18deg) translateX(450%)}100%{transform:skewX(-18deg) translateX(450%)}}

.hero-parallax{ will-change:transform; transition:transform .1s linear; }

/* =============== REVEAL ON SCROLL =============== */
.reveal{
  opacity:0; transform:translateY(36px);
  transition:opacity .9s cubic-bezier(.2,.6,.2,1), transform .9s cubic-bezier(.2,.6,.2,1);
}
.reveal.is-visible{ opacity:1; transform:translateY(0); }
.reveal-delay-1{ transition-delay:.12s; }
.reveal-delay-2{ transition-delay:.24s; }
.reveal-delay-3{ transition-delay:.36s; }

/* =============== GLASS PANEL =============== */
.glass-panel{
  background:rgba(250,248,244,0.55);
  backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  border:1px solid rgba(255,255,255,.35);
  box-shadow:0 20px 60px -25px rgba(28,27,25,.35);
}
.glass-panel-dark{
  background:rgba(28,27,25,0.45);
  backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  border:1px solid rgba(255,255,255,.12);
}

/* =============== CARDS =============== */
.arch-card{ position:relative; overflow:hidden; cursor:pointer; }
.arch-card img{ transition:transform 1.1s cubic-bezier(.2,.7,.2,1), filter .8s ease; }
.arch-card:hover img{ transform:scale(1.08); filter:brightness(.85); }
.arch-card .card-line{
  position:absolute; left:0; bottom:0; height:2px; width:0; background:var(--bronze);
  transition:width .6s cubic-bezier(.4,0,.2,1);
}
.arch-card:hover .card-line{ width:100%; }

.frame-hover{ position:relative; }
.frame-hover::before{
  content:''; position:absolute; inset:14px; border:1px solid rgba(250,248,244,.0);
  transition:inset .5s ease, border-color .5s ease; pointer-events:none;
}
.frame-hover:hover::before{ inset:8px; border-color:rgba(250,248,244,.6); }

/* =============== ACCORDION (FAQ) =============== */
.accordion-item{ border-bottom:1px solid var(--stone-300); }
.accordion-trigger{
  cursor:pointer; display:flex; align-items:center; justify-content:space-between;
  width:100%; text-align:left; padding:1.6rem 0; background:none; border:none;
}
.accordion-icon{ position:relative; width:16px; height:16px; flex:none; }
.accordion-icon::before, .accordion-icon::after{
  content:''; position:absolute; background:var(--charcoal); transition:transform .4s ease, opacity .4s ease;
}
.accordion-icon::before{ top:50%; left:0; width:100%; height:1px; transform:translateY(-50%); }
.accordion-icon::after{ left:50%; top:0; height:100%; width:1px; transform:translateX(-50%); }
.accordion-item.open .accordion-icon::after{ transform:translateX(-50%) rotate(90deg); opacity:0; }
.accordion-item.open .accordion-trigger{ color:var(--bronze-dark); }
.accordion-panel{ max-height:0; overflow:hidden; transition:max-height .5s cubic-bezier(.4,0,.2,1); }
.accordion-item.open .accordion-panel{ max-height:400px; }

/* =============== GALLERY / MASONRY =============== */
.masonry{ column-count:1; column-gap:1.25rem; }
@media(min-width:640px){ .masonry{ column-count:2; } }
@media(min-width:1024px){ .masonry{ column-count:3; } }
.masonry-item{ break-inside:avoid; margin-bottom:1.25rem; position:relative; overflow:hidden; cursor:zoom-in; }
.masonry-item img{ width:100%; display:block; transition:transform 1s ease, filter .6s ease; }
.masonry-item:hover img{ transform:scale(1.06); filter:brightness(.82); }
.masonry-item .zoom-tag{
  position:absolute; inset:auto 0 0 0; padding:1.1rem;
  background:linear-gradient(0deg, rgba(28,27,25,.75), transparent);
  color:var(--soft); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase;
  opacity:0; transform:translateY(10px); transition:opacity .45s ease, transform .45s ease;
}
.masonry-item:hover .zoom-tag{ opacity:1; transform:translateY(0); }

/* Lightbox */
#lightbox{
  position:fixed; inset:0; z-index:200; background:rgba(17,16,15,.94);
  display:flex; align-items:center; justify-content:center;
  opacity:0; visibility:hidden; transition:opacity .4s ease, visibility .4s ease;
}
#lightbox.open{ opacity:1; visibility:visible; }
#lightbox img{ max-width:88vw; max-height:82vh; object-fit:contain; box-shadow:0 30px 90px rgba(0,0,0,.5); }
.lightbox-close, .lightbox-nav{
  color:var(--soft); cursor:pointer; transition:opacity .3s ease, color .3s ease;
}
.lightbox-close:hover, .lightbox-nav:hover{ color:var(--bronze-light); }

/* =============== FORM =============== */
.form-field{
  width:100%; background:transparent; border:none; border-bottom:1px solid var(--stone-400);
  padding:.85rem .1rem; font-family:'Jost',sans-serif; font-size:.95rem; color:var(--charcoal);
  transition:border-color .4s ease;
}
.form-field:focus{ outline:none; border-color:var(--bronze); }
.form-field::placeholder{ color:var(--stone-500); }
label.form-label{ font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--stone-600); }

/* =============== TOAST (non-blocking popup) =============== */
#toast-stack{ position:fixed; bottom:1.5rem; right:1.5rem; z-index:300; display:flex; flex-direction:column; gap:.6rem; max-width:90vw; }
.toast{
  min-width:280px; max-width:360px;
  background:var(--charcoal); color:var(--soft);
  border-left:3px solid var(--bronze);
  padding:1rem 1.2rem; box-shadow:0 18px 40px -12px rgba(0,0,0,.4);
  font-size:.85rem; letter-spacing:.01em;
  opacity:0; transform:translateY(14px) scale(.98);
  transition:opacity .4s ease, transform .4s ease;
}
.toast.show{ opacity:1; transform:translateY(0) scale(1); }

/* =============== BACK TO TOP =============== */
#backToTop{
  position:fixed; right:1.4rem; bottom:1.4rem; z-index:150;
  width:46px; height:46px; display:flex; align-items:center; justify-content:center;
  background:var(--charcoal); color:var(--soft);
  opacity:0; visibility:hidden; transform:translateY(10px);
  transition:opacity .4s ease, transform .4s ease, visibility .4s ease, background .4s ease;
}
#backToTop.show{ opacity:1; visibility:visible; transform:translateY(0); }
#backToTop:hover{ background:var(--bronze-dark); }

/* =============== MISC =============== */
.divider-bronze{ width:64px; height:2px; background:var(--bronze); }
.section-eyebrow{ letter-spacing:.32em; font-size:.72rem; text-transform:uppercase; color:var(--bronze-dark); }
.texture-overlay{
  background-image:radial-gradient(rgba(255,255,255,.06) 1px, transparent 1px);
  background-size:3px 3px;
}
.clip-diag{ clip-path:polygon(0 0,100% 0,100% 92%,0 100%); }
.marquee-track{ display:flex; width:max-content; animation:marquee 34s linear infinite; }
@keyframes marquee{ from{ transform:translateX(0);} to{ transform:translateX(-50%);} }

.lazy-img{ opacity:0; transition:opacity .8s ease; }
.lazy-img.loaded{ opacity:1; }

@media(max-width:768px){
  .btn-arch{ padding:.9rem 1.8rem; font-size:.74rem; }
}