/* ==========================================================================
   Cobalt Cove Zone — shared stylesheet
   コバルト・コーヴ・ゾーン 共通スタイルシート
   ========================================================================== */

:root{
  --cobalt:#1a5296;
  --cobalt-light:#2f74c2;
  --cobalt-deep:#123a6b;
  --navy:#0b2138;
  --navy-soft:#122c47;
  --seafoam:#9fd8c4;
  --stone:#9a9a92;
  --sand:#e9ddc7;
  --sand-deep:#d8c8a4;
  --white-soft:#faf8f3;
}

*{ box-sizing:border-box; }

html{ scroll-behavior:smooth; }

body{
  background:var(--white-soft);
  color:var(--navy);
  font-family:'Noto Sans JP','Zen Kaku Gothic New',sans-serif;
  font-weight:300;
  letter-spacing:.01em;
  overflow-x:hidden;
}

::selection{ background:var(--cobalt); color:#fff; }

h1,h2,h3,h4,.font-display{
  font-family:'Shippori Mincho','Noto Serif JP',serif;
}

.eyebrow{
  font-family:'Noto Sans JP',sans-serif;
  letter-spacing:.32em;
  text-transform:uppercase;
  font-size:.68rem;
  font-weight:500;
}

::-webkit-scrollbar{ width:10px; }
::-webkit-scrollbar-track{ background:var(--white-soft); }
::-webkit-scrollbar-thumb{ background:var(--cobalt); border-radius:10px; }

/* ---------------- Navigation ---------------- */
#siteNav{
  position:fixed; top:0; left:0; right:0; z-index:120;
  transition:background .5s ease, box-shadow .5s ease, padding .4s ease, backdrop-filter .5s ease;
  padding:1.4rem 0;
}
#siteNav.nav-scrolled{
  background:rgba(11,33,56,.82);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  box-shadow:0 10px 30px rgba(6,18,30,.18);
  padding:.75rem 0;
}
#siteNav a, #siteNav button{ color:var(--white-soft); }
.nav-logo-mark{ transition:transform .6s ease; }
#siteNav:hover .nav-logo-mark{ transform:rotate(6deg); }

.menu-toggle-line{
  display:block; width:26px; height:1px; background:var(--white-soft);
  margin:6px 0; transition:transform .4s ease, opacity .4s ease;
}
body.menu-open .menu-toggle-line:nth-child(1){ transform:translateY(7px) rotate(45deg); }
body.menu-open .menu-toggle-line:nth-child(2){ opacity:0; }
body.menu-open .menu-toggle-line:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* ---------------- Fullscreen menu overlay ---------------- */
#menuOverlay{
  position:fixed; inset:0; z-index:110;
  background:linear-gradient(160deg,rgba(9,27,46,.98),rgba(20,66,116,.96));
  backdrop-filter:blur(22px);
  -webkit-backdrop-filter:blur(22px);
  transform:translateY(-102%);
  transition:transform .7s cubic-bezier(.65,0,.35,1);
  overflow-y:auto;
  color:var(--white-soft);
}
body.menu-open #menuOverlay{ transform:translateY(0); }
body.menu-open{ overflow:hidden; }
#menuOverlay .menu-col-title{
  color:var(--seafoam); letter-spacing:.28em; font-size:.68rem; text-transform:uppercase;
}
#menuOverlay a{
  display:inline-block; position:relative; color:var(--white-soft); text-decoration:none;
  transition:color .3s ease, padding-left .3s ease; padding-bottom:2px;
}
#menuOverlay a:hover{ color:var(--seafoam); padding-left:6px; }
#menuOverlay a.active{ color:var(--seafoam); }
#menuOverlay a::after{
  content:''; position:absolute; left:0; bottom:0; width:0; height:1px; background:var(--seafoam);
  transition:width .35s ease;
}
#menuOverlay a:hover::after{ width:100%; }

/* ---------------- Buttons ---------------- */
.btn-coastal{
  display:inline-flex; align-items:center; gap:.6rem;
  padding:.95rem 2.1rem; border-radius:9999px;
  font-size:.82rem; letter-spacing:.14em; text-transform:uppercase;
  border:1px solid rgba(255,255,255,.7);
  color:var(--white-soft);
  background:transparent;
  transition:background .4s ease, color .4s ease, border-color .4s ease, transform .4s ease;
  white-space:nowrap;
}
.btn-coastal:hover{ background:var(--white-soft); color:var(--navy); transform:translateY(-2px); }
.btn-coastal.solid{ background:var(--cobalt); border-color:var(--cobalt); }
.btn-coastal.solid:hover{ background:var(--white-soft); color:var(--cobalt-deep); border-color:var(--white-soft); }
.btn-coastal.dark{ border-color:var(--cobalt-deep); color:var(--cobalt-deep); }
.btn-coastal.dark:hover{ background:var(--cobalt-deep); color:var(--white-soft); }

/* ---------------- Glass panels ---------------- */
.glass{
  background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.28);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
}
.glass-light{
  background:rgba(255,255,255,.55);
  border:1px solid rgba(255,255,255,.6);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}

/* ---------------- Hero / mist / parallax ---------------- */
.hero-wrap{ position:relative; overflow:hidden; }
.mist{
  position:absolute; border-radius:50%;
  background:radial-gradient(ellipse at center, rgba(255,255,255,.45), rgba(255,255,255,0) 70%);
  filter:blur(30px); opacity:.55; pointer-events:none;
  animation:drift 22s ease-in-out infinite;
}
.mist.m2{ animation-duration:30s; animation-delay:-6s; opacity:.35; }
.mist.m3{ animation-duration:26s; animation-delay:-14s; opacity:.4; }
@keyframes drift{
  0%{ transform:translate(-6%,0) scale(1); }
  50%{ transform:translate(6%,-4%) scale(1.08); }
  100%{ transform:translate(-6%,0) scale(1); }
}
.parallax-layer{ will-change:transform; }

.wave-divider{ line-height:0; position:relative; z-index:2; }
.wave-divider svg{ width:100%; height:auto; display:block; }
.wave-anim path{ animation:waveMove 12s ease-in-out infinite; }
@keyframes waveMove{
  0%,100%{ transform:translateX(0); }
  50%{ transform:translateX(-1.5%); }
}

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

/* ---------------- Editorial image cards ---------------- */
.img-card{ position:relative; overflow:hidden; }
.img-card img{ transition:transform 1.1s cubic-bezier(.2,.6,.2,1), filter .8s ease; display:block; width:100%; height:100%; object-fit:cover; }
.img-card:hover img{ transform:scale(1.07); }
.img-card .img-caption{
  position:absolute; left:0; right:0; bottom:0; padding:1.1rem 1.3rem;
  background:linear-gradient(to top, rgba(6,18,30,.75), transparent);
  color:#fff; transform:translateY(10px); opacity:0; transition:all .5s ease;
}
.img-card:hover .img-caption{ transform:translateY(0); opacity:1; }

/* ---------------- Masonry gallery ---------------- */
.masonry{ column-gap:1.1rem; column-count:1; }
@media(min-width:640px){ .masonry{ column-count:2; } }
@media(min-width:1024px){ .masonry{ column-count:3; } }
.masonry .m-item{ break-inside:avoid; margin-bottom:1.1rem; }

/* ---------------- Lightbox ---------------- */
#lightbox{
  position:fixed; inset:0; z-index:200; display:none;
  align-items:center; justify-content:center;
  background:rgba(6,17,28,.94); padding:2rem;
}
#lightbox img{ max-height:82vh; max-width:92vw; border:1px solid rgba(255,255,255,.15); }
#lightbox-close{
  position:absolute; top:1.6rem; right:1.8rem; color:#fff; font-size:1rem;
  letter-spacing:.2em; cursor:pointer; text-transform:uppercase;
}

/* ---------------- FAQ accordion ---------------- */
.faq-item{ border-bottom:1px solid rgba(26,82,150,.18); }
.faq-question{ cursor:pointer; display:flex; align-items:center; justify-content:space-between; }
.faq-plus{ transition:transform .4s ease; }
.faq-item.open .faq-plus{ transform:rotate(135deg); }
.faq-answer{ max-height:0; overflow:hidden; transition:max-height .55s ease, padding .3s ease; }
.faq-item.open .faq-answer{ max-height:600px; }

/* ---------------- Toast (non-blocking popups) ---------------- */
#toastContainer{
  position:fixed; bottom:22px; right:22px; z-index:400;
  display:flex; flex-direction:column; align-items:flex-end; gap:.6rem;
}
.toast{
  background:rgba(11,33,56,.96); color:var(--white-soft);
  padding:.95rem 1.5rem; border-radius:9999px; max-width:86vw;
  box-shadow:0 12px 34px rgba(6,18,30,.3);
  font-size:.85rem; letter-spacing:.02em;
  opacity:0; transform:translateY(14px); transition:opacity .4s ease, transform .4s ease;
}
.toast.show{ opacity:1; transform:translateY(0); }

/* ---------------- Misc ---------------- */
.section-num{ font-family:'Shippori Mincho',serif; font-size:.8rem; color:var(--cobalt); letter-spacing:.2em; }
.divider-line{ height:1px; background:linear-gradient(to right, var(--cobalt), transparent); }
.text-balance{ text-wrap:balance; }

input, textarea{ font-family:'Noto Sans JP',sans-serif; }
input:focus, textarea:focus{ outline:none; box-shadow:0 0 0 2px var(--cobalt); }

.card-hover{ transition:transform .5s ease, box-shadow .5s ease; }
.card-hover:hover{ transform:translateY(-6px); box-shadow:0 24px 50px rgba(11,33,56,.12); }

@media(max-width:640px){
  .btn-coastal{ padding:.85rem 1.6rem; font-size:.74rem; }
}