/* ════════════════════════════════════════════════════════
 *  仟昀寵物生活館 — 雲朵白 × 玫瑰金 設計系統 v5
 *  風格:比熊雲朵感 × 玫瑰金高級感 × 柔柔可愛
 * ════════════════════════════════════════════════════════ */

:root {
  /* ─── 雲朵白系背景 ─────────────────────── */
  --cloud:        #FDFCF8;  /* 主背景:雲朵白 */
  --cloud-warm:   #FAF6EF;  /* 暖米白 */
  --cream:        #F5EDE3;  /* 米杏 */
  --pearl:        #FFFFFF;  /* 純白卡片 */
  --pearl-warm:   #FEFBF6;  /* 暖純白 */

  /* ─── 玫瑰金主強調 ─────────────────────── */
  --rose:         #D4A5A0;  /* 主玫瑰金:柔粉感 */
  --rose-deep:    #B8857F;  /* 深玫瑰金 */
  --rose-soft:    #ECCFC9;  /* 淺玫瑰 */
  --rose-mist:    #F8E8E4;  /* 玫瑰霧 */
  --rose-bg:      #FCF4F1;  /* 玫瑰背景 */

  /* ─── 副色:暖灰棕(柔和) ─────────────── */
  --warm:         #C9A685;  /* 暖灰棕 */
  --warm-deep:    #9C7E5F;  /* 深暖棕 */
  --warm-soft:    #E5D4BE;  /* 淺暖棕 */
  --warm-mist:    #F0E6D5;  /* 暖棕霧 */

  /* ─── 點綴 ──────────────────────────────── */
  --blush:        #F5C9C0;  /* 嬰兒粉(比熊耳朵) */
  --sky:          #C5DBE5;  /* 淡天空藍 */
  --gold-spark:   #E8D4A0;  /* 金光點綴 */

  /* ─── 文字 ──────────────────────────────── */
  --ink:          #3A2E25;  /* 主文字:暖墨棕 */
  --ink-warm:     #5C4B3D;  /* 副標 */
  --ink-soft:     #7A6857;  /* 內文 */
  --ink-mute:     #A89B8C;  /* 提示 */

  --bordeaux:     #A85D52;

  /* ─── 字體 ─────────────────────────────── */
  --font-display: 'Cormorant', 'Noto Serif TC', serif;
  --font-script:  'Caveat', cursive;
  --font-body:    'Noto Serif TC', 'Songti TC', Georgia, serif;
  --font-sans:    'Noto Sans TC', system-ui, sans-serif;

  /* ─── 字級 ─────────────────────────────── */
  --t-xs: 10px; --t-sm: 12px; --t-base: 14px; --t-md: 16px;
  --t-lg: 20px; --t-xl: 28px; --t-2xl: 40px; --t-3xl: 56px; --t-4xl: 80px;
  --t-hero: clamp(48px, 7vw, 96px);

  /* ─── 行高/字距/間距 ─────────────────── */
  --lh-tight: 1.15; --lh-snug: 1.4; --lh-normal: 1.7; --lh-loose: 2;
  --tr-tight: -0.01em; --tr-base: 0; --tr-wide: 0.06em; --tr-wider: 0.14em; --tr-mark: 0.24em;
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px;
  --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 128px; --s-11: 160px;

  /* ─── 線條/圓角 ────────────────────────── */
  --line-hair: 1px solid rgba(212, 165, 160, 0.20);
  --line-soft: 1px solid rgba(201, 166, 133, 0.22);
  --r-sm: 8px; --r-md: 16px; --r-lg: 24px; --r-xl: 32px; --r-2xl: 40px; --r-pill: 999px;

  /* ─── 陰影:立體柔光 ───────────────────── */
  --shadow-sm:
    0 1px 2px rgba(184, 133, 127, 0.06),
    0 4px 12px rgba(184, 133, 127, 0.08);
  --shadow-md:
    0 2px 4px rgba(184, 133, 127, 0.06),
    0 12px 28px rgba(184, 133, 127, 0.10),
    0 28px 60px -20px rgba(184, 133, 127, 0.16);
  --shadow-lg:
    0 4px 8px rgba(184, 133, 127, 0.08),
    0 20px 40px rgba(184, 133, 127, 0.14),
    0 50px 100px -25px rgba(184, 133, 127, 0.25);
  --shadow-xl:
    0 8px 16px rgba(184, 133, 127, 0.10),
    0 40px 80px rgba(184, 133, 127, 0.18),
    0 80px 160px -40px rgba(184, 133, 127, 0.30);
  /* 卡片立體:多層柔影 + 邊緣高光 */
  --shadow-card:
    0 1px 2px rgba(58, 46, 37, 0.05),
    0 8px 24px rgba(184, 133, 127, 0.10),
    0 32px 64px -20px rgba(184, 133, 127, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    inset 0 0 0 1px rgba(212, 165, 160, 0.10);
  --shadow-card-hover:
    0 4px 8px rgba(58, 46, 37, 0.08),
    0 20px 48px rgba(184, 133, 127, 0.18),
    0 60px 120px -25px rgba(184, 133, 127, 0.30),
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    inset 0 0 0 1px rgba(212, 165, 160, 0.20);
  /* 實體按鈕陰影:頂高光、外陰影、底暗影、按下凹陷 */
  --shadow-btn:
    0 1px 0 rgba(255,255,255,.8) inset,
    0 -3px 6px rgba(184,133,127,.18) inset,
    0 2px 0 rgba(184,133,127,.20),
    0 4px 8px rgba(184,133,127,.18),
    0 12px 24px rgba(184,133,127,.20),
    0 24px 48px -12px rgba(184,133,127,.30);
  --shadow-btn-hover:
    0 1px 0 rgba(255,255,255,.9) inset,
    0 -3px 6px rgba(184,133,127,.20) inset,
    0 3px 0 rgba(184,133,127,.25),
    0 6px 12px rgba(184,133,127,.22),
    0 18px 36px rgba(184,133,127,.28),
    0 36px 60px -16px rgba(184,133,127,.40);
  --shadow-btn-active:
    0 1px 0 rgba(255,255,255,.5) inset,
    0 2px 6px rgba(184,133,127,.30) inset,
    0 1px 2px rgba(184,133,127,.20);

  /* ─── 動畫 ─────────────────────────────── */
  --ease: cubic-bezier(.4,0,.2,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
  --ease-bounce: cubic-bezier(.34,1.56,.64,1);
  --dur-fast: .2s; --dur-base: .4s; --dur-slow: .7s;
}

/* ════════════════════════════════════════════════════════
 *  Reset + body
 * ════════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-body);
  background: var(--cloud);
  color: var(--ink);
  font-size: var(--t-base);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  zoom: 1.15;
}
::selection { background: var(--rose-mist); color: var(--ink); }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--cloud-warm); }
::-webkit-scrollbar-thumb {
  background: var(--rose-soft);
  border-radius: var(--r-pill);
  border: 2px solid var(--cloud-warm);
}
::-webkit-scrollbar-thumb:hover { background: var(--rose); }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; height: auto; display: block; }
button { font: inherit; cursor: pointer; background: none; border: none; color: inherit; }
input, textarea, select { font: inherit; color: inherit; }

/* ════════════════════════════════════════════════════════
 *  導覽列
 * ════════════════════════════════════════════════════════ */
.cy-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 500;
  background: rgba(253, 252, 248, 0.92);
  backdrop-filter: blur(20px) saturate(1.2);
  -webkit-backdrop-filter: blur(20px) saturate(1.2);
  border-bottom: var(--line-hair);
  height: 84px;
  display: flex; align-items: center;
  padding: 0 var(--s-7);
  box-shadow: 0 1px 0 rgba(212, 165, 160, 0.08), 0 8px 24px -8px rgba(184, 133, 127, 0.08);
}
.cy-nav-brand { display: flex; align-items: center; gap: var(--s-3); color: var(--ink); }
.cy-nav-logo {
  width: 56px; height: 56px;
  filter: drop-shadow(0 4px 12px rgba(184, 133, 127, 0.15));
}
.cy-nav-name {
  font-family: var(--font-body);
  font-size: 17px; font-weight: 600;
  letter-spacing: var(--tr-wide);
  color: var(--ink);
}
.cy-nav-name-en {
  font-family: var(--font-script);
  font-size: 16px;
  color: var(--rose-deep);
  display: block; margin-top: -4px;
  font-weight: 500;
}
.cy-nav-menu { margin-left: auto; display: flex; gap: var(--s-6); align-items: center; }
.cy-nav-link {
  font-family: var(--font-body);
  font-size: 14px; font-weight: 500;
  color: var(--ink-warm);
  letter-spacing: var(--tr-wide);
  position: relative;
  transition: color var(--dur-fast) var(--ease);
}
.cy-nav-link::after {
  content: ''; position: absolute; bottom: -8px; left: 50%;
  width: 0; height: 2px;
  background: linear-gradient(90deg, var(--rose) 0%, var(--rose-deep) 100%);
  border-radius: var(--r-pill);
  transition: all var(--dur-base) var(--ease-out);
  transform: translateX(-50%);
}
.cy-nav-link:hover { color: var(--rose-deep); }
.cy-nav-link:hover::after { width: 32px; }
.cy-nav-cta {
  font-family: var(--font-body);
  font-size: 13px; font-weight: 700;
  letter-spacing: var(--tr-wide);
  padding: 13px 30px;
  margin-left: var(--s-6);
  background: linear-gradient(180deg, #E0B5B0 0%, var(--rose) 50%, var(--rose-deep) 100%);
  color: #FFFFFF;
  border-radius: var(--r-pill);
  transition: all .25s var(--ease);
  text-shadow: 0 1px 2px rgba(120, 70, 60, .35);
  box-shadow:
    0 1px 0 rgba(255,255,255,.5) inset,
    0 -2px 6px rgba(120,70,60,.25) inset,
    0 2px 0 rgba(120,70,60,.30),
    0 4px 8px rgba(184,133,127,.25),
    0 8px 16px rgba(184,133,127,.20);
}
.cy-nav-cta:hover {
  transform: translateY(-2px);
  box-shadow:
    0 1px 0 rgba(255,255,255,.6) inset,
    0 -2px 6px rgba(120,70,60,.28) inset,
    0 3px 0 rgba(120,70,60,.35),
    0 6px 12px rgba(184,133,127,.30),
    0 14px 24px rgba(184,133,127,.28);
}
.cy-nav-cta:active {
  transform: translateY(1px);
  box-shadow:
    0 1px 0 rgba(255,255,255,.4) inset,
    0 2px 6px rgba(120,70,60,.40) inset,
    0 1px 2px rgba(184,133,127,.30);
}
.cy-nav-spacer { height: 84px; }

/* ════════════════════════════════════════════════════════
 *  共用元件:標籤/標題
 * ════════════════════════════════════════════════════════ */
.cy-mark {
  font-family: var(--font-script);
  font-size: 26px;
  color: var(--rose-deep);
  display: inline-flex; align-items: center; gap: var(--s-3);
  font-weight: 500;
}
.cy-mark::before {
  content: ''; width: 36px; height: 1.5px;
  background: linear-gradient(90deg, transparent, var(--rose));
  border-radius: var(--r-pill);
}

.cy-h-display {
  font-family: var(--font-body);
  font-size: var(--t-3xl);
  font-weight: 500;
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-tight);
  color: var(--ink);
}
.cy-h-display em { font-style: normal; color: var(--rose-deep); }

.cy-h-section {
  font-family: var(--font-body);
  font-size: var(--t-2xl);
  font-weight: 500;
  line-height: var(--lh-snug);
  letter-spacing: var(--tr-tight);
  color: var(--ink);
}
.cy-h-section em { font-style: normal; color: var(--rose-deep); }

.cy-script {
  font-family: var(--font-script);
  font-size: clamp(48px, 6vw, 84px);
  color: var(--rose);
  line-height: 1;
}

/* ════════════════════════════════════════════════════════
 *  按鈕
 * ════════════════════════════════════════════════════════ */
.cy-btn {
  display: inline-flex; align-items: center; gap: var(--s-3);
  font-family: var(--font-body);
  font-size: 14px; font-weight: 700;
  letter-spacing: var(--tr-wide);
  padding: 18px 38px;
  border: none;
  background: linear-gradient(180deg, #FFFFFF 0%, #FAF1ED 100%);
  color: var(--rose-deep);
  border-radius: var(--r-pill);
  transition: all .25s var(--ease);
  text-decoration: none;
  box-shadow: var(--shadow-btn);
  position: relative;
  text-shadow: 0 1px 0 rgba(255,255,255,.7);
}
.cy-btn::after {
  content: '→';
  font-weight: 700;
  transition: transform .3s var(--ease);
}
.cy-btn:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-btn-hover);
}
.cy-btn:hover::after { transform: translateX(5px); }
.cy-btn:active {
  transform: translateY(1px);
  box-shadow: var(--shadow-btn-active);
  transition: all .08s var(--ease);
}

.cy-btn-rose {
  background: linear-gradient(180deg, #E0B5B0 0%, var(--rose) 50%, var(--rose-deep) 100%);
  color: #FFFFFF;
  text-shadow: 0 1px 2px rgba(120, 70, 60, .35);
  box-shadow:
    0 1px 0 rgba(255,255,255,.5) inset,
    0 -3px 8px rgba(120,70,60,.25) inset,
    0 2px 0 rgba(120,70,60,.30),
    0 4px 8px rgba(184,133,127,.30),
    0 12px 24px rgba(184,133,127,.25),
    0 24px 48px -12px rgba(184,133,127,.40);
}
.cy-btn-rose:hover {
  background: linear-gradient(180deg, #E8C0BB 0%, var(--rose) 50%, var(--rose-deep) 100%);
  box-shadow:
    0 1px 0 rgba(255,255,255,.6) inset,
    0 -3px 8px rgba(120,70,60,.28) inset,
    0 3px 0 rgba(120,70,60,.35),
    0 6px 12px rgba(184,133,127,.35),
    0 18px 36px rgba(184,133,127,.32),
    0 36px 60px -16px rgba(184,133,127,.50);
}
.cy-btn-rose:active {
  transform: translateY(1px);
  box-shadow:
    0 1px 0 rgba(255,255,255,.4) inset,
    0 2px 8px rgba(120,70,60,.40) inset,
    0 1px 2px rgba(184,133,127,.30);
}

.cy-btn-warm {
  background: linear-gradient(180deg, #DDBA94 0%, var(--warm) 50%, var(--warm-deep) 100%);
  color: #FFFFFF;
  text-shadow: 0 1px 2px rgba(80, 55, 30, .35);
  box-shadow:
    0 1px 0 rgba(255,255,255,.5) inset,
    0 -3px 8px rgba(80,55,30,.25) inset,
    0 2px 0 rgba(80,55,30,.30),
    0 4px 8px rgba(156,126,95,.30),
    0 12px 24px rgba(156,126,95,.25),
    0 24px 48px -12px rgba(156,126,95,.40);
}

.cy-btn-outline {
  background: rgba(255, 255, 255, 0.5);
  border: 2px solid var(--rose);
  color: var(--rose-deep);
  text-shadow: none;
  box-shadow:
    0 1px 0 rgba(255,255,255,.7) inset,
    0 2px 4px rgba(184,133,127,.10),
    0 8px 16px rgba(184,133,127,.12),
    0 16px 32px -8px rgba(184,133,127,.18);
}
.cy-btn-outline:hover {
  background: linear-gradient(180deg, #E0B5B0 0%, var(--rose) 50%, var(--rose-deep) 100%);
  color: #FFFFFF;
  border-color: var(--rose-deep);
  text-shadow: 0 1px 2px rgba(120, 70, 60, .35);
  box-shadow:
    0 1px 0 rgba(255,255,255,.5) inset,
    0 -3px 8px rgba(120,70,60,.25) inset,
    0 2px 0 rgba(120,70,60,.30),
    0 4px 8px rgba(184,133,127,.30),
    0 12px 24px rgba(184,133,127,.25),
    0 24px 48px -12px rgba(184,133,127,.40);
}

/* ════════════════════════════════════════════════════════
 *  章節容器
 * ════════════════════════════════════════════════════════ */
.cy-section {
  max-width: 1280px;
  margin: 0 auto;
  padding: var(--s-10) var(--s-7);
}
@media (max-width: 900px) {
  .cy-section { padding: var(--s-8) var(--s-5); }
}

/* ════════════════════════════════════════════════════════
 *  Footer
 * ════════════════════════════════════════════════════════ */
.cy-footer {
  background:
    radial-gradient(ellipse at top, var(--rose-mist) 0%, transparent 60%),
    var(--cloud-warm);
  color: var(--ink);
  padding: var(--s-9) var(--s-7) var(--s-6);
  position: relative; overflow: hidden;
  border-top: var(--line-hair);
}
.cy-footer::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: linear-gradient(90deg, var(--rose) 0%, var(--gold-spark) 50%, var(--rose) 100%);
}
.cy-footer-inner {
  max-width: 1280px; margin: 0 auto;
  display: grid; grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: var(--s-7); margin-bottom: var(--s-8);
  position: relative;
}
@media (max-width: 900px) {
  .cy-footer-inner { grid-template-columns: 1fr; gap: var(--s-6); }
}
.cy-footer-brand { display: flex; flex-direction: column; gap: var(--s-4); }
.cy-footer-brand-logo {
  width: 96px; height: 96px;
  filter: drop-shadow(0 8px 24px rgba(184, 133, 127, 0.20));
}
.cy-footer-brand-name {
  font-family: var(--font-body);
  font-size: 18px; font-weight: 600;
  color: var(--ink);
}
.cy-footer-brand-en {
  font-family: var(--font-script);
  font-size: 26px;
  color: var(--rose-deep);
  margin-top: -2px;
  font-weight: 500;
}
.cy-footer-tag {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--ink-soft);
  line-height: var(--lh-loose);
  margin-top: var(--s-2);
}
.cy-footer-col h4 {
  font-family: var(--font-body);
  font-size: 11px; font-weight: 700;
  letter-spacing: var(--tr-wider);
  text-transform: uppercase;
  color: var(--rose-deep);
  margin-bottom: var(--s-4);
  padding-bottom: var(--s-2);
  border-bottom: 1px solid var(--rose-mist);
}
.cy-footer-col a, .cy-footer-col p {
  display: block; font-size: 13px;
  color: var(--ink-soft);
  line-height: var(--lh-loose);
  font-family: var(--font-body);
  transition: color var(--dur-fast) var(--ease);
}
.cy-footer-col a:hover { color: var(--rose-deep); }
.cy-footer-bottom {
  max-width: 1280px; margin: 0 auto;
  padding-top: var(--s-5);
  border-top: var(--line-hair);
  display: flex; justify-content: space-between; align-items: center;
  font-family: var(--font-body);
  font-size: 12px; color: var(--ink-mute);
}
@media (max-width: 600px) {
  .cy-footer-bottom { flex-direction: column; gap: var(--s-3); text-align: center; }
}

/* ════════════════════════════════════════════════════════
 *  圖示
 * ════════════════════════════════════════════════════════ */
.cy-icon {
  width: 18px; height: 18px;
  stroke: currentColor; stroke-width: 1.5; fill: none;
  stroke-linecap: round; stroke-linejoin: round;
  display: inline-block; vertical-align: middle;
}
.cy-icon-lg { width: 24px; height: 24px; }

/* ════════════════════════════════════════════════════════
 *  reveal 動畫
 * ════════════════════════════════════════════════════════ */
[data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity var(--dur-slow) var(--ease-out),
              transform var(--dur-slow) var(--ease-out);
}
[data-reveal].in { opacity: 1; transform: translateY(0); }
[data-reveal-delay="1"] { transition-delay: .1s; }
[data-reveal-delay="2"] { transition-delay: .25s; }
[data-reveal-delay="3"] { transition-delay: .4s; }
[data-reveal-delay="4"] { transition-delay: .55s; }

@keyframes float-gentle {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-12px) rotate(-1.5deg); }
}
.cy-float { animation: float-gentle 7s var(--ease) infinite; }

@keyframes sparkle {
  0%, 100% { opacity: 0.4; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.1); }
}

/* ════════════════════════════════════════════════════════
 *  RWD
 * ════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  .cy-nav { padding: 0 var(--s-5); height: 72px; }
  .cy-nav-spacer { height: 72px; }
  .cy-nav-menu { display: none; }
  .cy-nav-name { font-size: 15px; }
  .cy-nav-logo { width: 48px; height: 48px; }
}