/* ═══════════════════════════════════════════════════════════
   SAKURA LIMOUSINE TOKYO — Custom CSS Layer
   Stack: Tailwind CSS 3 CDN + custom utilities
   ═══════════════════════════════════════════════════════════ */

:root {
  --sakura-pink:   #ffb7c5;
  --deep-indigo:   #1a1a40;
  --gold:          #d4af37;
  --soft-white:    #fafafa;
  --jp-black:      #0d0d0d;
  --overlay-dark:  rgba(10,10,30,0.72);
  --sakura-light:  #fff0f3;
  --indigo-mid:    #2d2d6e;
}

/* ── Tailwind extension layer ────────────────────────────── */
@layer utilities {
  .font-serif-jp  { font-family: 'Noto Serif JP', 'Cormorant Garamond', serif; }
  .font-sans-jp   { font-family: 'Noto Sans JP', 'Open Sans', sans-serif; }
  .text-gold      { color: var(--gold); }
  .bg-sakura      { background-color: var(--sakura-pink); }
  .bg-indigo-deep { background-color: var(--deep-indigo); }
  .border-gold    { border-color: var(--gold); }
  .sakura-divider { width: 60px; height: 2px; background: var(--gold); margin: 1rem auto; }

  .petal-bg {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'%3E%3Cellipse cx='30' cy='20' rx='10' ry='18' fill='%23ffb7c5' opacity='0.15' transform='rotate(-20 30 30)'/%3E%3C/svg%3E");
    background-size: 120px;
    opacity: 0.04;
  }
}

/* ── Glass card effect ───────────────────────────────────── */
.glass-card {
  background: rgba(255,255,255,0.06);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(212,175,55,0.2);
  border-radius: 2px;
}

/* ── Sakura petal fall animation ─────────────────────────── */
@keyframes petalFall {
  0%   { transform: translateY(-20px) rotate(0deg) translateX(0); opacity: 1; }
  25%  { transform: translateY(25vh)  rotate(180deg) translateX(20px); opacity: 0.8; }
  75%  { transform: translateY(75vh)  rotate(540deg) translateX(-15px); opacity: 0.4; }
  100% { transform: translateY(100vh) rotate(720deg) translateX(10px); opacity: 0; }
}

.petal { animation: petalFall linear infinite; }

/* ── Fade-in animation for hero ──────────────────────────── */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

.animate-fade-in {
  opacity: 0;
  animation: fadeIn 0.8s ease forwards;
}

/* ── Scroll-triggered fade ───────────────────────────────── */
[data-fade] {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

[data-fade].is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ── Header scrolled state ───────────────────────────────── */
#site-header.scrolled > div:nth-child(2) {
  background: rgba(13,13,13,0.98);
  border-bottom-color: rgba(212,175,55,0.2);
}

/* ── Gold shimmer on CTAs ────────────────────────────────── */
@keyframes shimmer {
  0%   { background-position: -200% center; }
  100% { background-position:  200% center; }
}

.btn-gold-shimmer {
  background: linear-gradient(90deg, #d4af37 0%, #f0d060 40%, #d4af37 60%, #b8942a 100%);
  background-size: 200% auto;
  animation: shimmer 3s linear infinite;
}

/* ── Breadcrumb ──────────────────────────────────────────── */
.breadcrumb-item + .breadcrumb-item::before {
  content: '›';
  margin: 0 0.5rem;
  color: rgba(212,175,55,0.4);
}

/* ── Form field focus ring ───────────────────────────────── */
input:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 2px rgba(212,175,55,0.15);
}

/* ── Scrollbar styling ───────────────────────────────────── */
::-webkit-scrollbar        { width: 6px; }
::-webkit-scrollbar-track  { background: #0d0d0d; }
::-webkit-scrollbar-thumb  { background: rgba(212,175,55,0.3); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: rgba(212,175,55,0.6); }

/* ── Selection color ─────────────────────────────────────── */
::selection {
  background: rgba(212,175,55,0.25);
  color: #fafafa;
}

/* ── Typography base ─────────────────────────────────────── */
body {
  font-family: 'Noto Sans JP', 'Open Sans', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3 {
  font-family: 'Noto Serif JP', 'Cormorant Garamond', serif;
}

/* ── Image lazy load fade ────────────────────────────────── */
img[loading="lazy"] {
  transition: opacity 0.4s ease;
}

/* ── Gold divider line ───────────────────────────────────── */
.gold-line {
  width: 48px;
  height: 1px;
  background: var(--gold);
  display: block;
}