/* ══════════════════════════════════════════════════════════════
   site.css — 淨嶼 CleanIsle（vue-island 版）
   來源：src/app/globals.css —— oklch token 逐字搬運
   ══════════════════════════════════════════════════════════════ */

:root {
  --radius: 0.75rem;
  --background: oklch(0.985 0.005 95);
  --foreground: oklch(0.245 0.02 80);
  --card: oklch(1 0 0);
  --card-foreground: oklch(0.245 0.02 80);
  --popover: oklch(1 0 0);
  --popover-foreground: oklch(0.245 0.02 80);
  --primary: oklch(0.54 0.115 165);
  --primary-foreground: oklch(0.985 0.005 95);
  --secondary: oklch(0.955 0.015 95);
  --secondary-foreground: oklch(0.35 0.03 80);
  --muted: oklch(0.955 0.01 95);
  --muted-foreground: oklch(0.51 0.02 80);
  --accent: oklch(0.945 0.03 160);
  --accent-foreground: oklch(0.35 0.06 165);
  --destructive: oklch(0.577 0.245 27.325);
  --destructive-foreground: oklch(0.985 0.005 95);
  --border: oklch(0.915 0.01 95);
  --input: oklch(0.915 0.01 95);
  --ring: oklch(0.54 0.115 165);
  --chart-1: oklch(0.646 0.222 41.116);
  --chart-2: oklch(0.6 0.118 184.704);
  --chart-3: oklch(0.398 0.07 227.392);
  --chart-4: oklch(0.828 0.189 84.429);
  --chart-5: oklch(0.769 0.188 70.08);
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 5.5rem;
}
body {
  background: var(--background);
  color: var(--foreground);
  font-family: var(--font-geist-sans, "Geist"), "PingFang TC",
    "Hiragino Sans", "Microsoft JhengHei", "Noto Sans TC", sans-serif;
}
.font-mono {
  font-family: var(--font-geist-mono, "Geist Mono"), monospace;
}

/* ── utilities（globals.css @layer utilities 原樣）── */
.text-balance { text-wrap: balance; }
.custom-scrollbar {
  scrollbar-width: thin;
  scrollbar-color: oklch(0.8 0.05 160) transparent;
}
.custom-scrollbar::-webkit-scrollbar { width: 6px; height: 6px; }
.custom-scrollbar::-webkit-scrollbar-thumb {
  background: oklch(0.8 0.05 160);
  border-radius: 9999px;
}
.custom-scrollbar::-webkit-scrollbar-track { background: transparent; }

/* ── data-reveal（framer-motion Reveal 對應）──
   initial {opacity:0, y:24} → inView {opacity:1, y:0}
   transition: .6s cubic-bezier(.21,.47,.32,.98), delay 可變 */
[data-reveal], [data-motion] {
  opacity: 0;
  transform: translateY(var(--rv-y, 24px));
  transition:
    opacity 0.6s cubic-bezier(0.21, 0.47, 0.32, 0.98),
    transform 0.6s cubic-bezier(0.21, 0.47, 0.32, 0.98);
  transition-delay: var(--rv-delay, 0s);
  will-change: opacity, transform;
}
[data-reveal].revealed, [data-motion].revealed {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  [data-reveal], [data-motion] { opacity: 1; transform: none; transition: none; }
}

/* ── Sheet drawer（shadcn Sheet side=right 對應）──
   radix: fixed inset-y-0 right-0 w-72, slide-in-from-right 300ms,
   overlay fade 80% black → 本站配色 veil */
.veil-enter-active, .veil-leave-active { transition: opacity 0.3s ease; }
.veil-enter-from, .veil-leave-to { opacity: 0; }

.drawer-enter-active { transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1); }
.drawer-leave-active { transition: transform 0.25s ease-in; }
.drawer-enter-from, .drawer-leave-to { transform: translateX(100%); }

/* ── Accordion（radix + tw-animate-css accordion-down/up 對應）──
   radix 以 --radix-accordion-content-height 做高度動畫；
   這裡用 grid-rows 0fr→1fr 達成等效 200ms 高度過渡 */
.acc-item-content {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.2s ease-out;
}
.acc-item-content.acc-open { grid-template-rows: 1fr; }
.acc-item-content > div { overflow: hidden; }
.acc-chevron { transition: transform 0.2s ease-out; }
.acc-open .acc-chevron { transform: rotate(180deg); }

/* ── Toast（shadcn use-toast 對應）──
   radix Toast viewport: top-0 flex-col-reverse sm:bottom-0 sm:right-0 sm:top-auto
   item: slide-in-from-top-full / sm:slide-in-from-bottom-full */
.toast-enter-active { transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s; }
.toast-leave-active { transition: opacity 0.2s, transform 0.2s; }
.toast-enter-from {
  opacity: 0;
  transform: translateY(-100%);
}
.toast-leave-to {
  opacity: 0;
  transform: translateX(100%);
}
@media (min-width: 640px) {
  .toast-enter-from { transform: translateY(100%); }
}

/* ── Carousel：track 位移動畫（embla 等效）── */
.car-track { transition: transform 0.4s cubic-bezier(0.25, 1, 0.35, 1); }
.car-track.car-dragging { transition: none; }

/* ── 圖片淡入（v-skel 對應的靜態版：next/image 直接顯示，這裡只做柔和進場）── */
.img-fade { animation: img-fade-in 0.6s ease-out both; }
@keyframes img-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* ── select 原生下拉箭頭（shadcn SelectTrigger chevron 對應）── */
.sf-select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23777' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
}
.sf-select:invalid { color: var(--muted-foreground); }

/* aria-invalid 紅框（shadcn input aria-invalid:border-destructive 對應）*/
[aria-invalid="true"] { border-color: var(--destructive) !important; }

/* 關 JS 時島掛點的註記（fallback 提示列）*/
.no-js .island-fallback-note {
  display: block;
}
.island-fallback-note { display: none; }