/* ===== Theme variables (chuy?n t? index.css g?c) ===== */
:root {
  --radius: 0.25rem;
  --background: oklch(0.975 0.012 145);
  --foreground: oklch(0.18 0.04 145);
  --card: oklch(0.99 0.006 145);
  --card-foreground: oklch(0.18 0.04 145);
  --popover: oklch(0.99 0.006 145);
  --popover-foreground: oklch(0.18 0.04 145);
  --primary: oklch(0.40 0.13 145);
  --primary-foreground: oklch(0.97 0.01 145);
  --secondary: oklch(0.92 0.025 145);
  --secondary-foreground: oklch(0.18 0.04 145);
  --muted: oklch(0.92 0.02 145);
  --muted-foreground: oklch(0.5 0.04 145);
  --accent: oklch(0.87 0.045 145);
  --accent-foreground: oklch(0.18 0.04 145);
  --destructive: oklch(0.577 0.245 27.325);
  --border: oklch(0.86 0.03 145);
  --input: oklch(0.86 0.03 145);
  --ring: oklch(0.40 0.13 145);
}

.dark {
  --background: oklch(0.145 0 0);
  --foreground: oklch(0.985 0 0);
  --card: oklch(0.205 0 0);
  --card-foreground: oklch(0.985 0 0);
  --popover: oklch(0.205 0 0);
  --popover-foreground: oklch(0.985 0 0);
  --primary: oklch(0.922 0 0);
  --primary-foreground: oklch(0.205 0 0);
  --secondary: oklch(0.269 0 0);
  --secondary-foreground: oklch(0.985 0 0);
  --muted: oklch(0.269 0 0);
  --muted-foreground: oklch(0.708 0 0);
  --accent: oklch(0.269 0 0);
  --accent-foreground: oklch(0.985 0 0);
  --destructive: oklch(0.704 0.191 22.216);
  --border: oklch(1 0 0 / 10%);
  --input: oklch(1 0 0 / 15%);
  --ring: oklch(0.556 0 0);
}

* {
  border-color: var(--border);
}

html, body {
  background-color: var(--background);
  color: var(--foreground);
}

body {
  font-family: "Noto Sans JP", ui-sans-serif, system-ui, sans-serif;
}

.font-serif-jp {
  font-family: "Noto Serif JP", serif;
}

/* ===== Animation thay cho framer-motion (motion/react) ===== */

/* Ph?n t? s? ?n + d?ch xu?ng, khi có class .is-visible (do JS thêm khi vào viewport) s? hi?n ra */
.fade-up {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.7s ease-out, transform 0.7s ease-out;
}
.fade-up.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.fade-left {
  opacity: 0;
  transform: translateX(-20px);
  transition: opacity 0.4s ease-out, transform 0.4s ease-out;
}
.fade-left.is-visible {
  opacity: 1;
  transform: translateX(0);
}

/* Hero animation - t? ch?y khi load trang */
.hero-fade {
  opacity: 0;
  transform: translateY(40px);
  animation: heroFadeUp 1s ease-out forwards;
}
.hero-logo {
  opacity: 0;
  transform: scale(0.9);
  animation: heroScaleIn 0.9s ease-out 0.2s forwards;
}
.hero-line {
  width: 0;
  animation: heroLineGrow 0.8s ease-out 0.7s forwards;
}
.hero-text-1 {
  opacity: 0;
  animation: heroFadeIn 0.8s ease-out 0.5s forwards;
}
.hero-text-2 {
  opacity: 0;
  animation: heroFadeIn 0.8s ease-out 0.8s forwards;
}
.hero-buttons {
  opacity: 0;
  transform: translateY(20px);
  animation: heroFadeUp 0.6s ease-out 1s forwards;
}

@keyframes heroFadeUp {
  to { opacity: 1; transform: translateY(0); }
}
@keyframes heroFadeIn {
  to { opacity: 1; }
}
@keyframes heroScaleIn {
  to { opacity: 1; transform: scale(1); }
}
@keyframes heroLineGrow {
  to { width: 96px; }
}

/* Scroll indicator bounce */
.scroll-indicator {
  animation: scrollBounce 2s ease-in-out infinite;
}
@keyframes scrollBounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(8px); }
}