/* ==========================================================================
   Thorn Bridge Gate Co., Ltd. — Shared Stylesheet
   Premium Japanese architectural editorial aesthetic
   ========================================================================== */

:root{
  --forest:#2f4a3d;
  --forest-dark:#1f332a;
  --forest-light:#4a6b58;
  --stone:#8a8680;
  --stone-light:#c9c4ba;
  --beige:#ede6d8;
  --beige-dark:#ddd2ba;
  --cedar:#7a4a30;
  --cedar-dark:#5b3a24;
  --cedar-light:#a06a45;
  --cream:#faf6ee;
  --ink:#26241f;
}

*{ box-sizing:border-box; }

html{ scroll-behavior:smooth; }

body{
  background-color:var(--cream);
  color:var(--ink);
  font-family:'Cormorant Garamond', 'Shippori Mincho', serif;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

.font-display{ font-family:'Marcellus', 'Shippori Mincho', serif; }
.font-jp{ font-family:'Shippori Mincho', serif; }

/* thin elegant tracking for eyebrow labels */
.eyebrow{
  letter-spacing:.32em;
  text-transform:uppercase;
  font-size:.72rem;
  color:var(--cedar);
}

/* ==========================================================================
   Custom scrollbar
   ========================================================================== */
::-webkit-scrollbar{ width:10px; }
::-webkit-scrollbar-track{ background:var(--beige); }
::-webkit-scrollbar-thumb{ background:var(--stone); border-radius:10px; }
::-webkit-scrollbar-thumb:hover{ background:var(--forest); }

/* ==========================================================================
   Sticky glass navigation
   ========================================================================== */
#site-nav{
  backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  background:rgba(250,246,238,.55);
  border-bottom:1px solid rgba(122,74,48,.12);
  transition:background .5s ease, box-shadow .5s ease, padding .4s ease;
}
#site-nav.nav-scrolled{
  background:rgba(250,246,238,.92);
  box-shadow:0 8px 30px -12px rgba(38,36,31,.25);
}
.nav-link{
  position:relative;
  color:var(--forest-dark);
  letter-spacing:.06em;
}
.nav-link::after{
  content:"";
  position:absolute;
  left:0; bottom:-4px;
  width:0; height:1px;
  background:var(--cedar);
  transition:width .35s ease;
}
.nav-link:hover::after, .nav-link.active::after{ width:100%; }
.nav-link.active{ color:var(--cedar-dark); }

/* mobile menu panel */
#mobile-menu{
  max-height:0;
  overflow:hidden;
  transition:max-height .5s ease;
}
#mobile-menu.open{ max-height:520px; }

/* ==========================================================================
   Logo mark
   ========================================================================== */
.logo-mark{ width:40px; height:40px; flex-shrink:0; }
.logo-mark path{ transition:stroke .3s ease; }

/* ==========================================================================
   Buttons — nature inspired
   ========================================================================== */
.btn{
  display:inline-flex;
  align-items:center;
  gap:.6rem;
  padding:.9rem 2.1rem;
  font-family:'Marcellus', serif;
  letter-spacing:.05em;
  font-size:.95rem;
  border-radius:999px;
  transition:transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease, background .35s ease, color .35s ease, border-color .35s ease;
  white-space:nowrap;
}
.btn:hover{ transform:translateY(-3px); }
.btn-primary{
  background:linear-gradient(135deg, var(--forest) 0%, var(--forest-dark) 100%);
  color:var(--cream);
  box-shadow:0 10px 24px -10px rgba(31,51,42,.55);
}
.btn-primary:hover{ box-shadow:0 16px 32px -10px rgba(31,51,42,.65); }
.btn-outline{
  border:1px solid var(--cedar);
  color:var(--cedar-dark);
  background:rgba(255,255,255,.25);
}
.btn-outline:hover{ background:var(--cedar); color:var(--cream); }
.btn-light{
  background:rgba(250,246,238,.9);
  color:var(--forest-dark);
}
.btn-light:hover{ background:var(--cream); }

/* ==========================================================================
   Glassmorphism panels
   ========================================================================== */
.glass-panel{
  background:rgba(255,255,255,.32);
  backdrop-filter:blur(16px) saturate(150%);
  -webkit-backdrop-filter:blur(16px) saturate(150%);
  border:1px solid rgba(255,255,255,.45);
  box-shadow:0 20px 60px -30px rgba(38,36,31,.4);
}
.glass-dark{
  background:rgba(31,51,42,.45);
  backdrop-filter:blur(16px) saturate(150%);
  -webkit-backdrop-filter:blur(16px) saturate(150%);
  border:1px solid rgba(255,255,255,.15);
}

/* ==========================================================================
   Hero
   ========================================================================== */
.hero-section{
  position:relative;
  min-height:100svh;
  display:flex;
  align-items:flex-end;
  overflow:hidden;
}
.hero-bg{
  position:absolute;
  inset:0;
  background-size:cover;
  background-position:center;
  transform:scale(1.08);
  animation:heroZoom 18s ease-in-out infinite alternate;
}
@keyframes heroZoom{
  from{ transform:scale(1.08); }
  to{ transform:scale(1); }
}
.hero-gradient{
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(31,51,42,.25) 0%, rgba(31,51,42,.15) 35%, rgba(20,24,18,.75) 100%);
}
/* soft morning sunlight animation */
.sunlight{
  position:absolute;
  top:-10%; left:50%;
  width:140%; height:70%;
  transform:translateX(-50%);
  background:radial-gradient(ellipse at 50% 0%, rgba(255,244,214,.55) 0%, rgba(255,244,214,0) 60%);
  mix-blend-mode:screen;
  animation:sunPulse 8s ease-in-out infinite;
  pointer-events:none;
}
@keyframes sunPulse{
  0%,100%{ opacity:.55; }
  50%{ opacity:1; }
}
/* mist layer */
.mist{
  position:absolute; left:-10%; right:-10%; bottom:0; height:40%;
  background:linear-gradient(180deg, rgba(250,246,238,0) 0%, rgba(250,246,238,.5) 100%);
  filter:blur(6px);
  animation:mistDrift 14s ease-in-out infinite alternate;
  pointer-events:none;
}
@keyframes mistDrift{
  from{ transform:translateX(-2%); }
  to{ transform:translateX(2%); }
}

/* ==========================================================================
   Floating leaves
   ========================================================================== */
.leaf-layer{ position:fixed; inset:0; pointer-events:none; z-index:40; overflow:hidden; }
.leaf{
  position:absolute;
  top:-5%;
  font-size:1.1rem;
  color:var(--cedar-light);
  opacity:.75;
  animation-name:leafFall, leafSway;
  animation-timing-function:linear, ease-in-out;
  animation-iteration-count:infinite, infinite;
  will-change:transform;
}
@keyframes leafFall{
  from{ transform:translateY(-10vh) rotate(0deg); }
  to{ transform:translateY(110vh) rotate(340deg); }
}
@keyframes leafSway{
  0%,100%{ margin-left:0; }
  50%{ margin-left:60px; }
}

/* ==========================================================================
   Reveal on scroll
   ========================================================================== */
.reveal{
  opacity:0;
  transform:translateY(36px);
  transition:opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1);
}
.reveal.in-view{ opacity:1; transform:translateY(0); }
.reveal-delay-1{ transition-delay:.12s; }
.reveal-delay-2{ transition-delay:.24s; }
.reveal-delay-3{ transition-delay:.36s; }

/* ==========================================================================
   Texture helpers
   ========================================================================== */
.texture-paper{
  background-image:
    radial-gradient(rgba(122,74,48,.06) 1px, transparent 1px);
  background-size:14px 14px;
}
.wood-gradient{
  background:linear-gradient(120deg, var(--cedar) 0%, var(--cedar-dark) 55%, var(--cedar-light) 100%);
}
.stone-gradient{
  background:linear-gradient(120deg, #b9b4a9 0%, var(--stone) 55%, #6f6b64 100%);
}
.divider-line{
  width:64px; height:2px;
  background:linear-gradient(90deg, var(--cedar), transparent);
}

/* ==========================================================================
   Editorial project cards
   ========================================================================== */
.project-card{
  position:relative;
  overflow:hidden;
  border-radius:1.25rem;
  background:var(--cream);
  box-shadow:0 18px 40px -22px rgba(38,36,31,.4);
  transition:transform .5s cubic-bezier(.2,.8,.2,1), box-shadow .5s ease;
}
.project-card:hover{ transform:translateY(-10px); box-shadow:0 26px 55px -20px rgba(38,36,31,.5); }
.project-card .card-img-wrap{ overflow:hidden; position:relative; }
.project-card img{ transition:transform .9s cubic-bezier(.2,.8,.2,1), filter .6s ease; }
.project-card:hover img{ transform:scale(1.09); }
.project-card .card-tag{
  position:absolute; top:1rem; left:1rem;
  padding:.35rem .9rem;
  font-size:.68rem; letter-spacing:.18em; text-transform:uppercase;
  border-radius:999px;
  background:rgba(250,246,238,.85);
  color:var(--forest-dark);
}

/* ==========================================================================
   Masonry gallery + lightbox
   ========================================================================== */
.masonry{
  column-gap:1rem;
  column-count:1;
}
@media(min-width:640px){ .masonry{ column-count:2; } }
@media(min-width:1024px){ .masonry{ column-count:3; } }
.masonry-item{
  break-inside:avoid;
  margin-bottom:1rem;
  overflow:hidden;
  border-radius:1rem;
  cursor:zoom-in;
  position:relative;
}
.masonry-item img{ width:100%; display:block; transition:transform .7s ease, filter .5s ease; }
.masonry-item:hover img{ transform:scale(1.06); }
.masonry-item .zoom-hint{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  background:rgba(31,51,42,0);
  color:transparent;
  transition:all .4s ease;
  font-family:'Marcellus',serif; letter-spacing:.2em; font-size:.75rem; text-transform:uppercase;
}
.masonry-item:hover .zoom-hint{
  background:rgba(31,51,42,.35);
  color:#fff;
}

#lightbox{
  position:fixed; inset:0; z-index:100;
  background:rgba(20,22,18,.92);
  display:none;
  align-items:center; justify-content:center;
  padding:2rem;
}
#lightbox.open{ display:flex; }
#lightbox img{
  max-width:min(92vw,1100px); max-height:86vh; border-radius:.5rem;
  box-shadow:0 30px 80px rgba(0,0,0,.6);
  animation:lightboxIn .35s ease;
}
@keyframes lightboxIn{ from{ opacity:0; transform:scale(.94); } to{ opacity:1; transform:scale(1); } }
#lightbox .lb-close, #lightbox .lb-nav{
  position:absolute;
  color:#f5f0e6;
  cursor:pointer;
  font-family:'Marcellus',serif;
  transition:opacity .3s ease, transform .3s ease;
  opacity:.75;
}
#lightbox .lb-close:hover, #lightbox .lb-nav:hover{ opacity:1; }
#lightbox .lb-close{ top:1.5rem; right:2rem; font-size:2rem; }
#lightbox .lb-nav{ top:50%; transform:translateY(-50%); font-size:2.4rem; padding:.5rem 1rem; }
#lightbox .lb-prev{ left:.5rem; }
#lightbox .lb-next{ right:.5rem; }
#lightbox .lb-caption{
  position:absolute; bottom:2rem; left:0; right:0; text-align:center;
  color:#e9e3d6; font-family:'Shippori Mincho',serif; letter-spacing:.08em;
}

/* ==========================================================================
   FAQ accordion
   ========================================================================== */
.faq-item{
  border-bottom:1px solid rgba(122,74,48,.2);
}
.faq-question{
  cursor:pointer;
  display:flex; align-items:center; justify-content:space-between;
  padding:1.5rem 0;
  font-family:'Marcellus', serif;
}
.faq-icon{
  transition:transform .4s ease;
  color:var(--cedar);
  flex-shrink:0;
}
.faq-item.open .faq-icon{ transform:rotate(135deg); }
.faq-answer{
  max-height:0;
  overflow:hidden;
  transition:max-height .5s ease, padding .5s ease;
}
.faq-item.open .faq-answer{ max-height:400px; padding-bottom:1.5rem; }

/* ==========================================================================
   Contact form
   ========================================================================== */
.form-field{
  width:100%;
  background:rgba(255,255,255,.5);
  border:1px solid rgba(122,74,48,.25);
  border-radius:.75rem;
  padding:.9rem 1.1rem;
  font-family:'Cormorant Garamond', serif;
  font-size:1.05rem;
  color:var(--ink);
  transition:border-color .3s ease, box-shadow .3s ease, background .3s ease;
}
.form-field:focus{
  outline:none;
  border-color:var(--forest);
  background:rgba(255,255,255,.85);
  box-shadow:0 0 0 4px rgba(47,74,61,.12);
}
label.form-label{
  font-size:.75rem; letter-spacing:.16em; text-transform:uppercase; color:var(--forest-dark);
}

/* ==========================================================================
   Toast — non-blocking popup (replaces alert())
   ========================================================================== */
#toast-stack{
  position:fixed; bottom:1.5rem; right:1.5rem; z-index:200;
  display:flex; flex-direction:column; gap:.75rem;
  max-width:min(92vw,360px);
}
.toast{
  background:rgba(31,51,42,.95);
  color:#f5f0e6;
  padding:1rem 1.25rem;
  border-radius:.9rem;
  box-shadow:0 18px 40px -12px rgba(0,0,0,.5);
  display:flex; align-items:flex-start; gap:.7rem;
  font-family:'Cormorant Garamond', serif;
  font-size:1rem;
  transform:translateX(120%);
  opacity:0;
  transition:transform .5s cubic-bezier(.2,.8,.2,1), opacity .5s ease;
  border-left:3px solid var(--cedar-light);
}
.toast.show{ transform:translateX(0); opacity:1; }
.toast .toast-title{ font-family:'Marcellus',serif; display:block; margin-bottom:.15rem; letter-spacing:.03em; }
.toast .toast-close{ margin-left:auto; cursor:pointer; opacity:.6; }
.toast .toast-close:hover{ opacity:1; }

/* ==========================================================================
   Footer
   ========================================================================== */
footer{
  background:linear-gradient(180deg, var(--forest-dark) 0%, #16241d 100%);
  color:var(--beige);
}
footer a{ transition:color .3s ease, opacity .3s ease; }
footer a:hover{ color:var(--cedar-light); }
.footer-line{ border-color:rgba(237,230,216,.15); }

/* ==========================================================================
   Misc utility
   ========================================================================== */
.section-num{
  font-family:'Marcellus',serif;
  font-size:.75rem;
  letter-spacing:.2em;
  color:var(--stone);
}
.stat-frame{
  border:1px solid rgba(122,74,48,.25);
}
img.lazy{ filter:blur(14px); transition:filter .6s ease; background:var(--beige-dark); }
img.lazy.loaded{ filter:blur(0); }

.aspect-editorial{ aspect-ratio:4/5; object-fit:cover; }
.aspect-wide{ aspect-ratio:16/9; object-fit:cover; }
.aspect-square{ aspect-ratio:1/1; object-fit:cover; }

@media (max-width:640px){
  .hero-section{ min-height:100vh; }
}