/* ================================================================
   Shelly Beach Villa 3.0 — Global Styles + Full Animation System
   ================================================================ */

/* ─── Active Nav Link ────────────────────────────────────────────
   Use a dedicated class with explicit color so Tailwind utility
   cascade order cannot override it.                              */
#mainHeader a.nav-active {
  color: #144bb8 !important;
  font-weight: 700 !important;
}

/* ─── Back to Top Button ─────────────────────────────────────────
   Fixed, bottom-right. Fades in after scrolling 300px.          */
#backToTop {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  z-index: 500;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #144bb8;
  color: #fff;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 20px rgba(20,75,184,0.35);
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
  transition: opacity 0.35s ease, transform 0.35s ease, background 0.2s ease;
}
#backToTop.is-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: all;
}
#backToTop:hover {
  background: #1a5cd6;
  transform: translateY(-3px);
  box-shadow: 0 8px 28px rgba(20,75,184,0.45);
}

/* ─── Custom scrollbar ─────────────────────────────────────────── */
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: #fbfbfd; }
::-webkit-scrollbar-thumb { background: #144bb8; border-radius: 3px; }
body { scroll-behavior: smooth; }
.font-mincho { font-family: 'Noto Serif JP', serif; }

/* ─── Cursor Blob ──────────────────────────────────────────────── */
.cursor-blob {
  position: fixed;
  width: 480px;
  height: 480px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(20,75,184,0.07) 0%, transparent 65%);
  pointer-events: none;
  z-index: 0;
  transform: translate(-50%, -50%);
  transition: left 0.12s ease, top 0.12s ease;
  will-change: left, top;
  left: -999px;
  top: -999px;
}

/* ─── Page Transition Overlay ──────────────────────────────────── */
.page-transition {
  position: fixed;
  inset: 0;
  background: #144bb8;
  z-index: 9999;
  pointer-events: none;
  transform: translateY(100%);
}
.page-transition.page-enter {
  animation: ptEnter 0.75s cubic-bezier(0.76, 0, 0.24, 1) both;
}
.page-transition.page-exit {
  animation: ptExit 0.45s cubic-bezier(0.76, 0, 0.24, 1) both;
}
@keyframes ptEnter { from { transform: translateY(0); } to { transform: translateY(-100%); } }
@keyframes ptExit  { from { transform: translateY(100%); } to { transform: translateY(0); } }

/* ─── Hero ─────────────────────────────────────────────────────── */
.hero-video-container {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  background: #000;
}
.hero-video-sticky {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
#heroVideo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ── Mobile: show the entire video, no zoom/crop ─────────────────
   On portrait phones the video is landscape (16:9) so "cover" always
   zooms in.  We switch to natural flow + object-fit:contain so every
   pixel of the video is visible.                                   */
@media (max-width: 768px) {
  .hero-video-container {
    height: auto;
    overflow: visible;
    /* margin-top is set dynamically by JS (applyHeroOffset) so the
       exact measured navbar height is used — avoids CSS collapse.  */
  }
  .hero-video-sticky {
    height: auto;
    overflow: visible;
  }
  #heroVideo {
    position: static;
    width: 100%;
    height: auto;
    object-fit: unset;
    inset: unset;
  }
}

/* ─── Scroll hint ──────────────────────────────────────────────── */
.hero-scroll-hint {
  position: absolute;
  bottom: 1.5rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  color: rgba(0,0,0,0.4);
  font-size: 0.65rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  pointer-events: none;
  animation: fadeInUp 1.5s ease 1s both;
}
@keyframes fadeInUp {
  from { opacity: 0; transform: translateX(-50%) translateY(10px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}
.scroll-line {
  width: 1px;
  height: 40px;
  background: linear-gradient(to bottom, transparent, rgba(0,0,0,0.4));
  animation: scrollLine 2s ease-in-out infinite;
}
@keyframes scrollLine {
  0%   { transform: scaleY(0); transform-origin: top; opacity: 1; }
  50%  { transform: scaleY(1); transform-origin: top; opacity: 1; }
  100% { transform: scaleY(1); transform-origin: bottom; opacity: 0; }
}

/* ─── Reveal Animations ────────────────────────────────────────── */
.fade-in,
.reveal-up {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.85s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.85s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal-left {
  opacity: 0;
  transform: translateX(-60px);
  transition: opacity 0.85s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.85s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal-right {
  opacity: 0;
  transform: translateX(60px);
  transition: opacity 0.85s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.85s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal-scale {
  opacity: 0;
  transform: scale(0.88);
  transition: opacity 0.85s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.85s cubic-bezier(0.16, 1, 0.3, 1);
}
.fade-in.is-visible,
.reveal-up.is-visible,
.reveal-left.is-visible,
.reveal-right.is-visible,
.reveal-scale.is-visible { opacity: 1; transform: none; }

/* Stagger delays */
.delay-100 { transition-delay: 0.10s; }
.delay-200 { transition-delay: 0.20s; }
.delay-300 { transition-delay: 0.30s; }
.delay-400 { transition-delay: 0.40s; }
.delay-500 { transition-delay: 0.50s; }
.delay-600 { transition-delay: 0.60s; }

/* ─── Split Text (char-by-char) ────────────────────────────────── */
.char {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.8em) rotate(2deg);
  transition: opacity 0.45s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}
.char.is-visible { opacity: 1; transform: none; }

/* ─── Image reveal (opacity + gentle zoom-in) ────────────────────
   clip-path was unreliable for above-fold elements; opacity+scale
   works consistently across all browsers and IntersectionObserver
   firing timing.                                                  */
.img-reveal {
  opacity: 0;
  transform: scale(0.96);
  transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}
.img-reveal.is-visible {
  opacity: 1;
  transform: scale(1);
}

/* ─── Parallax ───────────────────────────────────────────────────── */
.parallax-wrap { overflow: hidden; }
.parallax-img  { will-change: transform; }

/* ─── 3D Tilt Card ───────────────────────────────────────────────── */
.tilt-card {
  transform-style: preserve-3d;
  transition: transform 0.45s cubic-bezier(0.23, 1, 0.32, 1),
              box-shadow 0.45s ease;
}

/* ─── Image Zoom on hover ────────────────────────────────────────── */
.img-zoom img {
  transition: transform 0.9s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.img-zoom:hover img { transform: scale(1.07); }

/* ─── Card hover ─────────────────────────────────────────────────── */
.card-hover {
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}
.card-hover:hover {
  transform: translateY(-6px);
  box-shadow: 0 24px 48px rgba(20, 75, 184, 0.10);
}

/* ─── Magnetic Button ────────────────────────────────────────────── */
.magnetic-btn {
  transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1);
  will-change: transform;
}

/* ─── Wave / shimmer sweep on buttons ───────────────────────────── */
.btn-wave { position: relative; overflow: hidden; }
.btn-wave::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.18);
  transform: translateX(-120%) skewX(-20deg);
  transition: transform 0.55s cubic-bezier(0.23, 1, 0.32, 1);
}
.btn-wave:hover::after { transform: translateX(120%) skewX(-20deg); }

/* ─── Glow Pulse ─────────────────────────────────────────────────── */
@keyframes glowPulse {
  0%, 100% { box-shadow: 0 0 18px rgba(20,75,184,0.25), 0 8px 28px rgba(20,75,184,0.12); }
  50%       { box-shadow: 0 0 38px rgba(20,75,184,0.50), 0 12px 40px rgba(20,75,184,0.22); }
}
.glow-pulse { animation: glowPulse 2.5s ease-in-out infinite; }

/* ─── Gradient animated text ─────────────────────────────────────── */
.gradient-text {
  background: linear-gradient(120deg, #144bb8 0%, #5ba3f5 45%, #144bb8 100%);
  background-size: 200%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: gradientShift 5s ease infinite;
}
@keyframes gradientShift {
  0%, 100% { background-position: 0% 50%; }
  50%       { background-position: 100% 50%; }
}

/* ─── Float ──────────────────────────────────────────────────────── */
@keyframes floatAnim {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-12px); }
}
.float-anim { animation: floatAnim 5s ease-in-out infinite; }

/* ─── Underline draw on links/headings ───────────────────────────── */
.underline-draw { position: relative; display: inline-block; }
.underline-draw::after {
  content: '';
  position: absolute;
  bottom: -3px;
  left: 0;
  width: 0;
  height: 2px;
  background: #144bb8;
  transition: width 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.underline-draw.is-visible::after { width: 100%; }

/* ─── Decorative blob shape ──────────────────────────────────────── */
.deco-blob {
  position: absolute;
  border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
  background: linear-gradient(135deg, rgba(20,75,184,0.06) 0%, rgba(91,163,245,0.04) 100%);
  pointer-events: none;
  animation: blobMorph 10s ease-in-out infinite;
  z-index: 0;
}
@keyframes blobMorph {
  0%, 100% { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; }
  25%       { border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%; }
  50%       { border-radius: 50% 60% 30% 60% / 40% 60% 70% 50%; }
  75%       { border-radius: 40% 60% 70% 30% / 60% 50% 40% 60%; }
}

/* ─── Marquee ticker ─────────────────────────────────────────────── */
.marquee-outer { overflow: hidden; white-space: nowrap; }
.marquee-track {
  display: inline-flex;
  gap: 4rem;
  animation: marqueeScroll 22s linear infinite;
}
.marquee-track:hover { animation-play-state: paused; }
@keyframes marqueeScroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ─── Counter number ─────────────────────────────────────────────── */
.count-num { display: inline-block; font-variant-numeric: tabular-nums; }

/* ─── Stat bar ───────────────────────────────────────────────────── */
.stat-bar-fill {
  height: 100%;
  width: 0;
  border-radius: 99px;
  background: #144bb8;
  transition: width 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.stat-bar-fill.is-visible { width: var(--bar-w, 80%); }

/* ─── FAQ Accordion ──────────────────────────────────────────────── */
.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.45s ease, padding 0.3s ease;
}
.faq-item.open .faq-answer { max-height: 300px; padding-top: 0.75rem; padding-bottom: 1rem; }
.faq-item.open .faq-icon  { transform: rotate(45deg); }
.faq-icon { transition: transform 0.35s ease; }

/* ─── Video Tour overlay ─────────────────────────────────────────── */
.video-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(0,0,0,0.92);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease;
}
.video-overlay.active { opacity: 1; pointer-events: all; }
.video-overlay video  { max-width: 90vw; max-height: 85vh; border-radius: 10px; }

/* ─── Reduced motion overrides ───────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}