/* =========================================
   Kuzushi Studio — site.css (clean edition)
   ========================================= */

/* ---------- 1) Design Tokens ---------- */
:root{
  --bg:#0b0b0f;
  --panel:#101318;
  --ink:#e5e7eb;
  --muted:#9aa3af;
  --gold:#d4af37;
  --gold-2:#b8922a;
  --ring:rgba(212,175,55,.35);
  --border:#23252a;
}

/* ---------- 2) Base ---------- */
html,
body{
  background:var(--bg);
  color:var(--ink);
}
html{ scroll-behavior:smooth; }
body{ overflow-x:hidden; }

:focus-visible{
  outline:2px solid var(--gold);
  outline-offset:2px;
}

/* Links */
a{
  color:var(--ink);
  text-decoration:none;
  transition:color .15s ease, opacity .15s ease;
}
a:hover{ color:var(--gold); }
.navlink{ color:var(--ink); opacity:.9; }
.navlink:hover{ opacity:1; }

/* ---------- 3) Header / Nav ---------- */
.header{
  position:sticky;
  top:0;
  z-index:50;
  background:rgba(0,0,0,.7);
  backdrop-filter:blur(8px);
  border-bottom:1px solid rgba(212,175,55,.18);
}
.brand{
  color:var(--gold);
  letter-spacing:.2px;
}
.ringed{
  box-shadow:inset 0 0 0 1px var(--border);
  transition:box-shadow .15s ease;
}
.ringed:hover{
  box-shadow:inset 0 0 0 1px var(--gold);
}

/* Golden “dragon” wave underline */
.header .nav-dragon{
  position:absolute;
  left:0;
  right:0;
  bottom:-12px;
  top:auto;
  height:56px;
  z-index:0;
  pointer-events:none;
}
@media (max-width:640px){
  .header .nav-dragon{
    bottom:-4px;
    height:36px;
  }
}

/* ---------- 4) UI Primitives ---------- */
.card{
  background:var(--panel);
  border:1px solid rgba(255,255,255,.06);
  border-radius:18px;
  box-shadow:0 10px 30px rgba(0,0,0,.35);
}
.panel{
  background:rgba(16,19,24,.72);
  border:1px solid var(--border);
  border-radius:14px;
  backdrop-filter:blur(4px);
}
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:.75rem 1.25rem;
  border-radius:14px;
  font-weight:700;
  border:1px solid transparent;
  transition:
    transform .06s ease,
    box-shadow .2s ease,
    background .2s ease,
    color .2s ease,
    border-color .2s ease;
  white-space:nowrap;
}
.btn:active{ transform:translateY(1px); }

.btn-gold,
#hero .btn.ghost{
  background:linear-gradient(180deg, var(--gold), #f6d76b 60%, var(--gold-2));
  color:#111;
  border:none;
  box-shadow:0 8px 20px rgba(212,175,55,.35);
}
.btn-gold:hover,
#hero .btn.ghost:hover{
  filter:brightness(1.1);
  transform:translateY(-1px);
  box-shadow:0 10px 24px rgba(212,175,55,.45);
}

.btn-outline{
  border-color:rgba(212,175,55,.35);
  color:var(--ink);
}
.btn-outline:hover{
  border-color:var(--gold);
  color:var(--gold);
}
.btn.ghost{
  background:transparent;
  color:var(--gold);
  border:1px solid var(--gold);
  box-shadow:none;
}

/* Forms */
.input,
select,
textarea{
  background:#0c0f14;
  border:1px solid rgba(255,255,255,.08);
  color:var(--ink);
  border-radius:12px;
  padding:.75rem .9rem;
}
.input:focus,
select:focus,
textarea:focus{
  outline:none;
  box-shadow:0 0 0 3px var(--ring);
  border-color:var(--gold);
}

/* Flash alerts */
.flash{
  padding:10px;
  border-radius:12px;
  margin-bottom:14px;
  border:1px solid rgba(255,255,255,.08);
}

/* Radio “pill” group */
.pill{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  padding:.55rem .85rem;
  border-radius:12px;
  cursor:pointer;
  border:1px solid var(--border);
  color:#e7e9ee;
  background:#0c0f14;
  transition:border-color .15s ease,
             box-shadow .15s ease,
             background .15s ease;
}
.pill:hover{ border-color:var(--gold); }
.pill--active{
  border-color:var(--gold);
  box-shadow:0 0 0 3px rgba(212,175,55,.28);
  background:#101318;
}

/* ---------- 5) Mobile Drawer (with /js/nav.js) ---------- */
#mnav-panel{
  transform:translateX(8px);
  opacity:0;
  transition:transform .18s ease, opacity .18s ease;
}
#mnav:not(.hidden) #mnav-panel:not(.hidden){
  transform:translateX(0);
  opacity:1;
}
@media (max-width:380px){
  #mnav-panel{ width:92%; }
}
@media (prefers-reduced-motion:reduce){
  #mnav-panel{
    transition:none;
    transform:none;
    opacity:1;
  }
}

/* ---------- 6) Parallax Stack (mountains) ---------- */
#bgMountains{
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
}
#bgMountains .bg-layer{
  position:absolute;
  left:0;
  right:0;
  top:-15vh;
  height:130vh;
  width:100%;
  object-fit:cover;
  object-position:center 55%;
  transform:translateZ(0) scale(1.04);
  image-rendering:auto;
  will-change:transform, opacity;
}
#midLayer{ opacity:0; } /* revealed later */

header,
main,
section,
footer{
  position:relative;
  z-index:1;
}
[data-layer]{
  pointer-events:none;
  will-change:transform;
  backface-visibility:hidden;
  contain:paint;
}
@media (max-width:767px),
(prefers-reduced-motion:reduce){
  [data-layer]{ transform:none !important; }
}

/* Optional subtle noise */
.bg-noise::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR4nGNgYAAAAAMAASsJTYQAAAAASUVORK5CYII=");
  opacity:.02;
  mix-blend-mode:overlay;
}

/* ---------- 7) Hero readability ---------- */
#hero{
  position:relative;
  overflow:hidden;
}
#hero::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:0;
  background:linear-gradient(
    to bottom,
    rgba(0,0,0,.45) 0%,
    rgba(0,0,0,.25) 40%,
    rgba(0,0,0,0) 100%
  );
}
#hero h1,
#hero p,
#hero .btn,
#hero .panel{
  position:relative;
  z-index:1;
}
#hero h1{
  color:#fff7e6;
  text-shadow:0 3px 12px rgba(0,0,0,.65);
}
#hero p{
  color:#f2e7c7;
  text-shadow:0 2px 8px rgba(0,0,0,.55);
}

/* ---------- 8) Section anchors ---------- */
#about{ scroll-margin-top:90px; }

/* ---------- 9) Headings ---------- */
section h2,
section h3,
section h4{
  color:#fff7e6;
  letter-spacing:.03em;
  text-transform:uppercase;
  font-weight:800;
  text-shadow:0 2px 8px rgba(0,0,0,.55);
}
.has-label h2,
.has-label h3,
.has-label h4{
  position:relative;
  display:inline-block;
  padding:.3rem .8rem;
  border-radius:12px;
  background:rgba(16,19,24,.55);
  backdrop-filter:blur(4px);
  color:#fff7e6;
  text-shadow:0 2px 8px rgba(0,0,0,.5);
}

/* ---------- 10) Footer ---------- */
footer{
  position:relative;
  overflow:hidden;
  background:rgba(16,19,24,0.85);
  backdrop-filter:blur(6px);
  color:var(--ink);
  border-top:1px solid rgba(212,175,55,0.15);
}
footer::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:0;
  background:linear-gradient(
    to bottom,
    rgba(0,0,0,0.10) 0%,
    rgba(0,0,0,0.35) 25%,
    rgba(0,0,0,0.55) 55%,
    rgba(0,0,0,0.75) 100%
  );
}
footer > *{
  position:relative;
  z-index:1;
}
footer a{
  color:#fff7e6;
  opacity:.95;
}
footer a:hover{
  color:var(--gold);
  opacity:1;
}
@media (max-width:768px){
  footer{
    background:rgba(16,19,24,0.95);
  }
}

/* ---------- 11) Kill legacy hero-logo CSS ---------- */
.hero-logo-container,
.hero-logo,
.hero-badge{
  all: unset !important;
}
@media (min-width:1024px){
  #hero img[src*="kuzushi-logo-gold"]{
    height:12rem !important;
  }
}

/* --- Kuzushi Studio nav logo alignment --- */
.navbar-brand {
  display: inline-flex;
  align-items: flex-end;
  gap: 6px;
}
.navbar-brand img {
  display: block;
  height: 32px;
}
.navbar-brand img + span {
  position: relative;
  top: -4px;
  letter-spacing: 0.16em;
}

/* ---------- 12) Utility: .hidden ---------- */
.hidden{
  display:none;
}

/* ===== 13) Selected Work (single-card carousel) ===== */

/* Heading styling inside Selected Work */
#work h2{
  color:#f9fafb;
  text-shadow:0 2px 8px rgba(0,0,0,.7);
}

/* Gold caption under "Selected work" */
#workCaption{
  color:#f0c84b;
  font-weight:500;
  letter-spacing:0.4px;
  line-height:1.6;
  text-shadow:0 0 8px rgba(0,0,0,0.85);
  background:rgba(11,11,15,0.65);
  padding:0.6rem 1rem;
  border-radius:12px;
  display:inline-block;
  backdrop-filter:blur(4px);
}
#workCaption strong{
  color:#ffeaa7;
  font-weight:600;
}

/* Main featured card */
#workCard{
  position:relative;
  overflow:hidden;
  border-radius:18px;
  border:1px solid var(--border);
  background:rgba(3,3,5,0.96);
  cursor:pointer;
}

/* Image fills aspect box */
#workCard img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* Text + dots above image */
#workLabel,
#workTitle,
#workIndex,
#workDots{
  position:relative;
  z-index:2;
}

#workLabel{
  font-size:.65rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--gold);
}
#workTitle{
  font-size:.95rem;
  font-weight:600;
  color:#f9fafb;
}
#workIndex{
  font-size:.7rem;
  color:var(--muted);
}

/* Dots */
#workDots span{
  display:inline-flex;
  width:7px;
  height:7px;
  border-radius:999px;
  background-color:var(--border);
  opacity:.6;
  transition:all .18s ease;
}
#workDots span.active{
  background-color:var(--gold);
  opacity:1;
  box-shadow:0 0 6px rgba(212,175,55,.8);
  transform:translateY(-1px);
}

/* Carousel arrows */
#workPrev,
#workNext{
  width:36px;
  height:36px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:rgba(0,0,0,.92);
  color:var(--gold);
  border:1px solid var(--gold);
  box-shadow:0 6px 16px rgba(0,0,0,.55);
  transition:all .18s ease;
  font-size:0.85rem;
}
#workPrev:hover,
#workNext:hover{
  transform:translateY(-1px);
  background:var(--gold);
  color:#050608;
  box-shadow:0 10px 24px rgba(0,0,0,.7);
}

/* ===== 14) Lightbox overlay for Selected Work ===== */

#lightbox{
  position:fixed;
  inset:0;
  z-index:60;
  display:none;                     /* hidden by default */
  align-items:center;
  justify-content:center;
}

/* When JS adds .is-open, show the overlay */
#lightbox.is-open{
  display:flex;
}

/* Backdrop */
#lbBackdrop{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,0.85);
  backdrop-filter:blur(6px);
}

/* Preview image */
#lbImage{
  max-width:96vw;
  max-height:90vh;
  object-fit:contain;
  border-radius:16px;
  background:rgba(0,0,0,0.4);
  box-shadow:0 14px 40px rgba(0,0,0,0.85);
  border:1px solid var(--border);
  position:relative;
  z-index:65;
}

/* Shared control styles */
#lbClose,
#lbPrev,
#lbNext{
  cursor:pointer;
  z-index:70;
}

/* Close button (the X) */
#lbClose{
  position:absolute;
  top:1rem;
  right:1rem;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0.4rem 0.9rem;
  border-radius:999px;
  font-size:0.75rem;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.12em;
  background:rgba(0,0,0,0.95);
  color:#f9fafb;
  border:1px solid rgba(249,250,251,0.35);
  box-shadow:0 8px 24px rgba(0,0,0,0.95);
}

/* Arrows inside lightbox */
#lbPrev,
#lbNext{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:40px;
  height:40px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  background:rgba(0,0,0,0.9);
  color:#e5e7eb;
  border:1px solid rgba(229,231,235,0.25);
  box-shadow:0 10px 26px rgba(0,0,0,0.95);
  font-size:0.9rem;
}
#lbPrev{ left:1rem; }
#lbNext{ right:1rem; }

/* Mobile tweaks: keep X visible */
@media (max-width:640px){
  #lbClose{
    top:.7rem;
    right:.7rem;
    padding:0.35rem 0.8rem;
    font-size:0.7rem;
  }
}