/* ============================================================
   Nova Sapphire — Shared Design System
   Premium Japanese Glass & Decorative Design Studio
   ============================================================ */

:root{
  --sapphire-deep:#071a33;
  --sapphire:#0d2c56;
  --sapphire-light:#1c4a86;
  --midnight:#040b18;
  --silver:#c7d2e0;
  --ivory:#f6f3ea;
  --cyan:#8fd9e8;
  --cyan-soft:#bdeef4;
  --gold-hair:rgba(199,210,224,.25);
  --ease:cubic-bezier(.16,.84,.44,1);
}

*{box-sizing:border-box;}

html{scroll-behavior:smooth;}

body{
  font-family:'Shippori Mincho', serif;
  background:var(--midnight);
  color:var(--ivory);
  overflow-x:hidden;
}

.font-display{
  font-family:'Italiana', serif;
  letter-spacing:.04em;
}

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

.tracking-widest-jp{letter-spacing:.35em;}

/* -------------------- Scrollbar -------------------- */
::-webkit-scrollbar{width:10px;}
::-webkit-scrollbar-track{background:var(--midnight);}
::-webkit-scrollbar-thumb{background:linear-gradient(var(--sapphire-light),var(--sapphire));border-radius:10px;}

/* -------------------- Background wash -------------------- */
.bg-wash{
  background:
    radial-gradient(ellipse 80% 60% at 15% -10%, rgba(28,74,134,.35), transparent 60%),
    radial-gradient(ellipse 70% 50% at 100% 0%, rgba(143,217,232,.12), transparent 55%),
    linear-gradient(180deg, var(--midnight) 0%, var(--sapphire-deep) 50%, var(--midnight) 100%);
}

/* -------------------- Glass panel / cards -------------------- */
.glass-panel{
  position:relative;
  background:linear-gradient(160deg, rgba(28,74,134,.22), rgba(4,11,24,.55));
  border:1px solid rgba(199,210,224,.16);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  box-shadow:0 8px 40px rgba(3,10,25,.45), inset 0 1px 0 rgba(255,255,255,.05);
}

.glass-panel::before{
  content:"";
  position:absolute;inset:0;
  background:linear-gradient(120deg, rgba(255,255,255,.10) 0%, transparent 30%, transparent 70%, rgba(143,217,232,.08) 100%);
  pointer-events:none;
  mix-blend-mode:screen;
}

.glass-card{
  position:relative;
  overflow:hidden;
  border-radius:2px;
  border:1px solid rgba(199,210,224,.14);
  background:rgba(10,22,42,.4);
  transition:transform .8s var(--ease), box-shadow .8s var(--ease), border-color .8s var(--ease);
}
.glass-card:hover{
  transform:translateY(-6px);
  border-color:rgba(143,217,232,.45);
  box-shadow:0 20px 60px rgba(3,10,25,.55), 0 0 40px rgba(143,217,232,.08);
}

.img-zoom{overflow:hidden;}
.img-zoom img{transition:transform 1.4s var(--ease), filter 1.4s var(--ease);}
.img-zoom:hover img{transform:scale(1.08);filter:saturate(1.1) brightness(1.03);}

/* Reflection sweep on hover */
.sheen{position:relative;overflow:hidden;}
.sheen::after{
  content:"";
  position:absolute;top:0;left:-150%;width:60%;height:100%;
  background:linear-gradient(115deg, transparent, rgba(255,255,255,.22), transparent);
  transform:skewX(-20deg);
  transition:left 1.1s var(--ease);
}
.sheen:hover::after{left:150%;}

/* -------------------- Buttons -------------------- */
.btn-glass{
  position:relative;
  display:inline-flex;align-items:center;gap:.6rem;
  padding:.9rem 2.1rem;
  font-family:'Italiana', serif;
  letter-spacing:.12em;
  font-size:.85rem;
  color:var(--ivory);
  border:1px solid rgba(199,210,224,.4);
  background:rgba(199,210,224,.04);
  backdrop-filter:blur(6px);
  transition:all .5s var(--ease);
  overflow:hidden;
}
.btn-glass:hover{
  background:rgba(143,217,232,.12);
  border-color:var(--cyan);
  box-shadow:0 0 30px rgba(143,217,232,.25);
  letter-spacing:.18em;
}

.btn-solid{
  display:inline-flex;align-items:center;gap:.6rem;
  padding:.9rem 2.1rem;
  font-family:'Italiana', serif;
  letter-spacing:.12em;
  font-size:.85rem;
  color:var(--midnight);
  background:linear-gradient(120deg, var(--cyan-soft), var(--silver));
  transition:all .5s var(--ease);
  box-shadow:0 8px 30px rgba(143,217,232,.15);
}
.btn-solid:hover{
  box-shadow:0 8px 40px rgba(143,217,232,.4);
  transform:translateY(-2px);
}

/* -------------------- Nav -------------------- */
#site-header{
  transition:background .5s var(--ease), padding .5s var(--ease), border-color .5s var(--ease);
  background:rgba(4,11,24,0);
  border-bottom:1px solid transparent;
}
#site-header.scrolled{
  background:rgba(4,11,24,.85);
  backdrop-filter:blur(16px);
  border-color:rgba(199,210,224,.12);
}

.nav-link{
  position:relative;
  font-family:'Italiana', serif;
  letter-spacing:.08em;
  font-size:.82rem;
  color:var(--silver);
  transition:color .4s var(--ease);
}
.nav-link::after{
  content:"";
  position:absolute;left:0;bottom:-6px;width:0;height:1px;
  background:var(--cyan);
  transition:width .4s var(--ease);
}
.nav-link:hover, .nav-link.active{color:var(--ivory);}
.nav-link:hover::after, .nav-link.active::after{width:100%;}

/* -------------------- Floating translucent shapes -------------------- */
.float-shape{
  position:absolute;
  border-radius:9999px;
  background:radial-gradient(circle at 30% 30%, rgba(143,217,232,.35), rgba(28,74,134,.05) 70%);
  filter:blur(2px);
  pointer-events:none;
  animation:floaty 12s ease-in-out infinite;
}
@keyframes floaty{
  0%,100%{transform:translate(0,0) rotate(0deg);}
  50%{transform:translate(-16px,-26px) rotate(8deg);}
}
.float-shape.delay2{animation-delay:2.5s;}
.float-shape.delay3{animation-delay:5s;}

/* -------------------- Fade in on scroll -------------------- */
.reveal{
  opacity:0;
  transform:translateY(36px);
  transition:opacity 1.1s var(--ease), transform 1.1s var(--ease);
}
.reveal.in-view{opacity:1;transform:translateY(0);}
.reveal-d1{transition-delay:.12s;}
.reveal-d2{transition-delay:.24s;}
.reveal-d3{transition-delay:.36s;}
.reveal-d4{transition-delay:.48s;}

/* -------------------- Hairline dividers -------------------- */
.hairline{
  height:1px;
  background:linear-gradient(90deg, transparent, rgba(199,210,224,.35), transparent);
}

/* -------------------- Masonry Gallery -------------------- */
.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 .mitem{
  break-inside:avoid;
  margin-bottom:1.25rem;
}

/* -------------------- Form fields -------------------- */
.field{
  width:100%;
  background:rgba(199,210,224,.05);
  border:1px solid rgba(199,210,224,.25);
  color:var(--ivory);
  padding:.9rem 1rem;
  font-family:'Shippori Mincho', serif;
  transition:border-color .4s var(--ease), background .4s var(--ease);
}
.field:focus{
  outline:none;
  border-color:var(--cyan);
  background:rgba(143,217,232,.06);
}
.field::placeholder{color:rgba(199,210,224,.45);}

/* -------------------- Toast (non-blocking popup) -------------------- */
#toast-wrap{
  position:fixed;
  top:1.5rem;right:1.5rem;
  z-index:9999;
  display:flex;flex-direction:column;gap:.75rem;
  pointer-events:none;
}
.toast{
  min-width:260px;
  max-width:340px;
  padding:1rem 1.25rem;
  background:rgba(7,26,51,.92);
  border:1px solid rgba(143,217,232,.4);
  backdrop-filter:blur(14px);
  color:var(--ivory);
  font-family:'Shippori Mincho', serif;
  font-size:.9rem;
  box-shadow:0 12px 40px rgba(3,10,25,.6), 0 0 24px rgba(143,217,232,.15);
  transform:translateX(120%);
  opacity:0;
  transition:transform .55s var(--ease), opacity .55s var(--ease);
}
.toast.show{transform:translateX(0);opacity:1;}
.toast .toast-title{
  font-family:'Italiana', serif;
  letter-spacing:.06em;
  color:var(--cyan-soft);
  font-size:.85rem;
  margin-bottom:.25rem;
}

/* -------------------- Logo mark -------------------- */
.logo-mark{
  filter:drop-shadow(0 0 12px rgba(143,217,232,.35));
}

/* -------------------- Misc -------------------- */
.text-outline{
  -webkit-text-stroke:1px rgba(199,210,224,.5);
  color:transparent;
}

.grain::after{
  content:"";
  position:absolute;inset:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");
  pointer-events:none;
}

.parallax-el{will-change:transform;}

.card-num{
  font-family:'Italiana', serif;
  font-size:.75rem;
  letter-spacing:.2em;
  color:var(--cyan-soft);
  opacity:.7;
}

.mobile-menu{
  transform:translateY(-8px);
  opacity:0;
  pointer-events:none;
  transition:opacity .4s var(--ease), transform .4s var(--ease);
}
.mobile-menu.open{
  transform:translateY(0);
  opacity:1;
  pointer-events:auto;
}

a{cursor:pointer;}