/* ============================================================
   JP Tokyo Travels — Design Tokens & Theme

   To change the site's color scheme, edit ONLY the :root block.
   Colors are in RGB channel format for Tailwind alpha support.
   ============================================================ */

:root {
  /* PRIMARY */
  --color-indigo: 30 42 74;         /* #1E2A4A — authority, depth */
  --color-midnight: 15 22 40;       /* #0F1628 — dark sections, footer */

  /* ACCENT */
  --color-cinnabar: 196 66 48;      /* #C44230 — energy, action */
  --color-gold: 184 150 62;         /* #B8963E — premium, trust */

  /* NEUTRAL */
  --color-warm-white: 246 243 237;  /* #F6F3ED — primary bg */
  --color-stone: 228 222 211;       /* #E4DED3 — secondary bg */
  --color-warm-gray: 95 91 86;       /* #5F5B56 — secondary text (darkened for contrast) */
  --color-charcoal: 28 28 30;       /* #1C1C1E — primary text */

  /* FUNCTIONAL */
  --color-success: 45 106 79;       /* #2D6A4F */
  --color-line: 212 207 198;        /* #D4CFC6 — borders, dividers */
}

/* ============================================================
   Paper texture overlay — subtle washi paper grain
   ============================================================ */
.paper-texture::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.03'/%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 0;
}

.paper-texture {
  position: relative;
}

.paper-texture > * {
  position: relative;
  z-index: 1;
}

/* ============================================================
   Underline-style form inputs (Japanese stationery influence)
   ============================================================ */
.input-underline {
  background: transparent;
  border: none;
  border-bottom: 1px solid rgb(var(--color-line));
  border-radius: 0;
  padding: 0.75rem 0;
  width: 100%;
  font-family: 'Sora', sans-serif;
  font-size: 1rem;
  color: rgb(var(--color-charcoal));
  transition: border-color 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
  outline: none;
}

.input-underline:focus {
  border-bottom-color: rgb(var(--color-indigo));
  border-bottom-width: 2px;
}

.input-underline::placeholder {
  color: rgb(var(--color-warm-gray));
}

textarea.input-underline {
  resize: vertical;
  min-height: 120px;
}

/* ============================================================
   Nav transition (transparent → solid)
   ============================================================ */
.nav-transparent {
  background: transparent;
  box-shadow: none;
}

.nav-solid {
  background: rgb(var(--color-warm-white));
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

/* Nav text colors — default (light bg) */
.nav-brand { color: rgb(var(--color-indigo)); }
.nav-item { color: rgb(var(--color-charcoal)); }
.nav-item:hover { color: rgb(var(--color-cinnabar)); }
.nav-lang { color: rgb(var(--color-warm-gray)); }
.nav-lang:hover { color: rgb(var(--color-charcoal)); }
.nav-burger span { background: rgb(var(--color-charcoal)); }

/* Nav text colors — dark bg variant (add .nav-dark to <nav>) */
.nav-dark.nav-transparent .nav-brand { color: white; }
.nav-dark.nav-transparent .nav-item { color: rgba(255,255,255,0.8); }
.nav-dark.nav-transparent .nav-item:hover { color: white; }
.nav-dark.nav-transparent .nav-lang { color: rgba(255,255,255,0.5); }
.nav-dark.nav-transparent .nav-lang:hover { color: rgba(255,255,255,0.8); }
.nav-dark.nav-transparent .nav-burger span { background: white; }

/* ============================================================
   Scroll reveal base state
   ============================================================ */
[data-reveal] {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.7s cubic-bezier(0.25, 0.1, 0.25, 1),
              transform 0.7s cubic-bezier(0.25, 0.1, 0.25, 1);
}

[data-reveal].revealed {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger delays for children */
[data-reveal-delay="1"] { transition-delay: 0.15s; }
[data-reveal-delay="2"] { transition-delay: 0.3s; }
[data-reveal-delay="3"] { transition-delay: 0.45s; }
[data-reveal-delay="4"] { transition-delay: 0.6s; }

/* ============================================================
   Nav underline slide-in
   ============================================================ */
.nav-link-underline {
  position: relative;
}

.nav-link-underline::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 0;
  height: 2px;
  background: rgb(var(--color-cinnabar));
  transition: width 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.nav-link-underline:hover::after,
.nav-link-underline.active::after {
  width: 100%;
}

.nav-link-underline:focus-visible {
  outline: 2px solid rgb(var(--color-cinnabar));
  outline-offset: 4px;
  border-radius: 2px;
}

/* Global focus-visible for interactive elements */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 2px solid rgb(var(--color-indigo));
  outline-offset: 2px;
  border-radius: 2px;
}

/* ============================================================
   Gold top-border service cards
   ============================================================ */
.service-card {
  border-top: 4px solid rgb(var(--color-gold));
  transition: transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1),
              box-shadow 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.service-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08);
}

/* ============================================================
   Button hover states
   ============================================================ */
.btn-cinnabar {
  background: rgb(var(--color-cinnabar));
  color: white;
  transition: background 0.3s cubic-bezier(0.25, 0.1, 0.25, 1),
              transform 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.btn-cinnabar:hover {
  background: rgb(176 56 38);
  transform: scale(1.02);
}

/* ============================================================
   Decorative gold quotation mark
   ============================================================ */
.quote-mark {
  font-family: 'Cormorant Garamond', serif;
  font-size: 8rem;
  line-height: 1;
  color: rgb(var(--color-gold) / 0.15);
  position: absolute;
  top: -1.5rem;
  left: -0.5rem;
  pointer-events: none;
  user-select: none;
}

/* ============================================================
   Timeline vertical gold line
   ============================================================ */
.timeline-line {
  position: absolute;
  left: 1.25rem;
  top: 0;
  bottom: 0;
  width: 2px;
  background: rgb(var(--color-gold));
}

@media (min-width: 768px) {
  .timeline-line {
    left: 50%;
    transform: translateX(-50%);
  }
}

/* ============================================================
   Thin horizontal rule (Japanese stationery influence)
   ============================================================ */
.rule-gold {
  border: none;
  height: 1px;
  background: rgb(var(--color-gold) / 0.3);
}

/* ============================================================
   Mobile menu overlay
   ============================================================ */
.mobile-menu {
  position: fixed;
  inset: 0;
  background: rgb(var(--color-warm-white));
  z-index: 100;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.mobile-menu.open {
  opacity: 1;
  pointer-events: auto;
}

/* ============================================================
   Hero scroll indicator
   ============================================================ */
@keyframes scroll-hint {
  0%, 100% { transform: translateY(0); opacity: 0.6; }
  50% { transform: translateY(8px); opacity: 1; }
}

.scroll-indicator {
  animation: scroll-hint 2s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
}

/* ============================================================
   CJK font adjustments — when Japanese is active
   ============================================================ */
html[lang="ja"] body {
  font-family: 'Sora', 'Noto Sans JP', sans-serif;
}

html[lang="ja"] h1,
html[lang="ja"] h2,
html[lang="ja"] h3,
html[lang="ja"] .font-display {
  font-family: 'Cormorant Garamond', 'Noto Serif JP', serif;
}