/* ===========================================================
   Happy Voyage Studio — shared editorial stylesheet
   Fonts: Fraunces (EN display) / Shippori Mincho (JP display)
          Jost (EN body) / Zen Maru Gothic (JP body)
   =========================================================== */

:root{
  --ocean:#1c6e8c;
  --ocean-deep:#0e3f52;
  --sky:#7ec8e3;
  --sky-soft:#dff2fa;
  --orange:#f2994a;
  --orange-deep:#e8792a;
  --cream:#fbf5e9;
  --white-soft:#fffdf8;
  --ink:#22303a;
  --ink-soft:#5b6b74;
  --line:#e7ddc9;
  --shadow:0 20px 45px -20px rgba(14,63,82,.35);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  font-family:'Jost',sans-serif;
  color:var(--ink);
  background:var(--white-soft);
  overflow-x:hidden;
}
.font-jp{font-family:'Zen Maru Gothic','Shippori Mincho',sans-serif;}
.font-display{font-family:'Fraunces',serif;}
.font-display-jp{font-family:'Shippori Mincho',serif;}

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

/* scrollbar */
::-webkit-scrollbar{width:10px;}
::-webkit-scrollbar-track{background:var(--cream);}
::-webkit-scrollbar-thumb{background:var(--ocean);border-radius:10px;}

/* ---------- utility text gradients ---------- */
.text-gradient{
  background:linear-gradient(100deg,var(--ocean) 10%,var(--orange) 90%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}

@keyframes spin-slow{to{transform:rotate(360deg);}}

/* ---------- sticky nav ---------- */
header.site-nav{
  position:sticky;top:0;z-index:1000;
  background:rgba(255,253,248,.72);
  backdrop-filter:blur(14px) saturate(160%);
  -webkit-backdrop-filter:blur(14px) saturate(160%);
  border-bottom:1px solid transparent;
  transition:box-shadow .4s ease, border-color .4s ease, background .4s ease;
}
header.site-nav.scrolled{
  box-shadow:0 10px 30px -18px rgba(14,63,82,.25);
  border-color:var(--line);
}
.nav-link{
  position:relative;font-family:'Jost',sans-serif;letter-spacing:.03em;
  color:var(--ink-soft);font-size:.92rem;padding:.35rem 0;
}
.nav-link::after{
  content:'';position:absolute;left:0;bottom:-2px;height:2px;width:0;
  background:linear-gradient(90deg,var(--orange),var(--ocean));
  transition:width .35s ease;
}
.nav-link:hover, .nav-link.active{color:var(--ocean-deep);}
.nav-link:hover::after, .nav-link.active::after{width:100%;}

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

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:.55rem;
  padding:.85rem 1.9rem;border-radius:999px;
  font-family:'Jost',sans-serif;font-size:.9rem;letter-spacing:.04em;
  transition:transform .35s ease, box-shadow .35s ease, background .35s ease, color .35s ease;
  white-space:nowrap;
}
.btn-primary{
  background:linear-gradient(100deg,var(--orange) 0%,var(--orange-deep) 100%);
  color:#fff;box-shadow:0 14px 30px -12px rgba(232,121,42,.65);
}
.btn-primary:hover{transform:translateY(-3px);box-shadow:0 20px 38px -12px rgba(232,121,42,.75);}
.btn-outline{
  background:transparent;border:1.5px solid var(--ocean);color:var(--ocean-deep);
}
.btn-outline:hover{background:var(--ocean);color:#fff;transform:translateY(-3px);}
.btn-ghost{color:var(--ink);border:1.5px solid var(--line);background:#fff;}
.btn-ghost:hover{border-color:var(--orange);color:var(--orange-deep);transform:translateY(-3px);}
.btn svg{transition:transform .35s ease;}
.btn:hover svg{transform:translateX(4px);}

/* ---------- hero ---------- */
.hero{
  position:relative;min-height:100svh;display:flex;align-items:flex-end;
  overflow:hidden;color:#fff;
}
.hero-bg{
  position:absolute;inset:0;background-size:cover;background-position:center;
  transform:scale(1.08);
  animation:hero-zoom 18s ease-in-out infinite alternate;
}
@keyframes hero-zoom{from{transform:scale(1.08);}to{transform:scale(1.16);}}
.hero-overlay{
  position:absolute;inset:0;
  background:
    linear-gradient(0deg, rgba(14,32,42,.86) 0%, rgba(14,32,42,.32) 46%, rgba(28,110,140,.18) 100%);
}
.hero-grain{position:absolute;inset:0;opacity:.05;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)'/%3E%3C/svg%3E");}

/* page banner (non-home hero) */
.page-banner{
  position:relative;min-height:56vh;display:flex;align-items:flex-end;color:#fff;overflow:hidden;
}
.page-banner .hero-bg{animation:none;transform:scale(1.02);}

/* ---------- route line svg ---------- */
.route-line path{
  stroke-dasharray:1500;stroke-dashoffset:1500;
  transition:stroke-dashoffset 2.4s cubic-bezier(.22,.61,.36,1);
}
.route-line.in-view path{stroke-dashoffset:0;}
.route-dot{opacity:0;transform:scale(.4);transform-origin:center;transition:opacity .6s ease, transform .6s ease;}
.route-line.in-view .route-dot{opacity:1;transform:scale(1);}

/* ---------- postcard floaters ---------- */
.postcard{
  background:#fff;padding:.6rem .6rem .9rem;border-radius:6px;
  box-shadow:var(--shadow);transform:rotate(var(--r,-6deg));
  border:1px solid #fff;
}
.postcard img{border-radius:2px;}
.float-slow{animation:float-y 7s ease-in-out infinite;}
.float-slow.delay-2{animation-delay:1.4s;}
.float-slow.delay-3{animation-delay:2.6s;}
@keyframes float-y{0%,100%{transform:translateY(0) rotate(var(--r,-6deg));}50%{transform:translateY(-16px) rotate(var(--r,-6deg));}}

.stamp{
  position:absolute;border:2px dashed rgba(28,110,140,.55);border-radius:50%;
  color:var(--ocean);font-family:'Shippori Mincho',serif;
  display:flex;align-items:center;justify-content:center;text-align:center;
  transform:rotate(-14deg);
}

/* ---------- fade in on scroll ---------- */
.reveal{opacity:0;transform:translateY(38px);transition:opacity .9s ease, transform .9s cubic-bezier(.22,.61,.36,1);}
.reveal.is-visible{opacity:1;transform:translateY(0);}
.reveal-scale{opacity:0;transform:scale(.92);transition:opacity .9s ease, transform .9s cubic-bezier(.22,.61,.36,1);}
.reveal-scale.is-visible{opacity:1;transform:scale(1);}
.stagger.is-visible > *{transition-delay:calc(var(--i,0) * 120ms);}

/* ---------- editorial cards ---------- */
.dest-card{
  position:relative;border-radius:22px;overflow:hidden;background:#0e3f52;
  box-shadow:var(--shadow);
}
.dest-card img{transition:transform 1s cubic-bezier(.22,.61,.36,1);}
.dest-card:hover img{transform:scale(1.09);}
.dest-card .card-tag{
  backdrop-filter:blur(6px);background:rgba(255,253,248,.18);
  border:1px solid rgba(255,255,255,.35);
}

.story-card{
  background:#fff;border:1px solid var(--line);border-radius:20px;overflow:hidden;
  transition:transform .5s ease, box-shadow .5s ease;
}
.story-card:hover{transform:translateY(-8px);box-shadow:var(--shadow);}

/* underline deco for section labels */
.eyebrow{
  display:inline-flex;align-items:center;gap:.6rem;color:var(--orange-deep);
  font-family:'Jost',sans-serif;letter-spacing:.24em;font-size:.72rem;text-transform:uppercase;
}
.eyebrow::before{content:'';width:28px;height:1px;background:var(--orange-deep);display:block;}

/* wave divider */
.wave-divider{display:block;width:100%;height:auto;}

/* ---------- 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;border-radius:18px;overflow:hidden;position:relative;cursor:zoom-in;box-shadow:var(--shadow);}
.masonry .m-item img{width:100%;display:block;transition:transform .7s ease, filter .7s ease;}
.masonry .m-item:hover img{transform:scale(1.06);}
.masonry .m-caption{
  position:absolute;inset:auto 0 0 0;padding:1.4rem 1rem .9rem;color:#fff;
  background:linear-gradient(0deg,rgba(14,32,42,.88),transparent);
  opacity:0;transform:translateY(10px);transition:opacity .4s ease, transform .4s ease;
}
.masonry .m-item:hover .m-caption{opacity:1;transform:translateY(0);}

/* lightbox */
#lightbox{position:fixed;inset:0;background:rgba(14,20,26,.94);z-index:2000;display:none;align-items:center;justify-content:center;padding:5vh 4vw;}
#lightbox.open{display:flex;}
#lightbox img{max-height:90vh;max-width:92vw;border-radius:10px;box-shadow:0 30px 70px rgba(0,0,0,.5);}
#lightbox .lb-close{position:absolute;top:22px;right:26px;color:#fff;font-size:1.9rem;cursor:pointer;}
#lightbox .lb-nav{position:absolute;top:50%;transform:translateY(-50%);color:#fff;font-size:2.2rem;cursor:pointer;padding:.4rem 1rem;opacity:.75;}
#lightbox .lb-nav:hover{opacity:1;}
#lightbox .lb-prev{left:10px;}#lightbox .lb-next{right:10px;}
#lightbox .lb-cap{position:absolute;bottom:26px;left:0;right:0;text-align:center;color:#f4ede0;font-family:'Shippori Mincho',serif;}

/* ---------- forms ---------- */
.field{
  width:100%;border:1px solid var(--line);background:#fff;border-radius:12px;
  padding:.9rem 1.1rem;font-family:'Jost',sans-serif;color:var(--ink);
  transition:border-color .3s ease, box-shadow .3s ease;
}
.field:focus{outline:none;border-color:var(--ocean);box-shadow:0 0 0 4px rgba(28,110,140,.15);}
label.field-label{font-size:.78rem;letter-spacing:.08em;color:var(--ink-soft);text-transform:uppercase;}

/* ---------- toast (non-blocking popup, replaces alert) ---------- */
#toastStack{position:fixed;top:1.2rem;right:1.2rem;z-index:3000;display:flex;flex-direction:column;gap:.7rem;width:min(360px,90vw);}
.toast{
  background:#fff;border-left:4px solid var(--ocean);border-radius:12px;
  box-shadow:var(--shadow);padding:.95rem 1.1rem;display:flex;gap:.7rem;align-items:flex-start;
  transform:translateX(120%);opacity:0;transition:transform .5s cubic-bezier(.22,.61,.36,1), opacity .5s ease;
}
.toast.show{transform:translateX(0);opacity:1;}
.toast.success{border-color:var(--ocean);}
.toast.error{border-color:var(--orange-deep);}
.toast .toast-title{font-weight:600;color:var(--ink);font-size:.92rem;}
.toast .toast-msg{color:var(--ink-soft);font-size:.82rem;}
.toast .toast-close{margin-left:auto;cursor:pointer;color:var(--ink-soft);}

/* ---------- footer ---------- */
footer.site-footer{
  background:radial-gradient(120% 140% at 10% 0%, #123a4d 0%, #0e2f3f 55%, #0a2531 100%);
  color:#e9f2f4;position:relative;overflow:hidden;
}
footer .footer-link{color:#c9dbe0;transition:color .3s ease, padding-left .3s ease;}
footer .footer-link:hover{color:var(--orange);padding-left:4px;}

/* misc */
.divider-dot{width:5px;height:5px;border-radius:50%;background:var(--orange);display:inline-block;}
.marquee{white-space:nowrap;overflow:hidden;}
.marquee-track{display:inline-block;animation:marquee 32s linear infinite;}
@keyframes marquee{from{transform:translateX(0);}to{transform:translateX(-50%);}}

.ratio-4-3{aspect-ratio:4/3;object-fit:cover;}
.ratio-3-4{aspect-ratio:3/4;object-fit:cover;}
.ratio-16-9{aspect-ratio:16/9;object-fit:cover;}
.ratio-1-1{aspect-ratio:1/1;object-fit:cover;}

/* skip link */
.skip-link{position:absolute;left:-999px;top:0;background:var(--ocean);color:#fff;padding:.6rem 1rem;z-index:5000;}
.skip-link:focus{left:1rem;top:1rem;}

/* back to top */
#backToTop{
  position:fixed;bottom:1.4rem;right:1.4rem;z-index:900;width:46px;height:46px;border-radius:50%;
  background:var(--ocean);color:#fff;display:flex;align-items:center;justify-content:center;
  box-shadow:var(--shadow);opacity:0;pointer-events:none;transform:translateY(10px);
  transition:opacity .4s ease, transform .4s ease;
}
#backToTop.show{opacity:1;pointer-events:auto;transform:translateY(0);}