/* ───────────────────────────────────────────────────────────
   唯美 Site Immersive v5 — 國際大獎級全站體驗
   ─────────────────────────────────────────────────────────── */

html { scroll-behavior: auto; -webkit-text-size-adjust: 100%; }
* { -webkit-tap-highlight-color: rgba(230, 150, 162, 0.2); }

/* Smooth scroll wrapper (Lenis-style) */
html.has-smooth-scroll { overflow: hidden; height: 100%; }
html.has-smooth-scroll body { height: 100%; overflow: hidden; }
.lenis-content {
  position: relative;
  will-change: transform;
}

/* ════════ Page Transition 幕布 ════════ */
.page-transition-curtain {
  position: fixed; top: 0; left: 0; right: 0; bottom: 0;
  background: linear-gradient(135deg, #ffd9dd 0%, #e696a2 50%, #c97884 100%);
  z-index: 99998;
  pointer-events: none;
  transform: translateY(100%);
  transition: transform 0.7s cubic-bezier(0.85, 0, 0.15, 1);
}
.page-transition-curtain.show { transform: translateY(0); }

/* ════════ 啟動劇場 ════════ */
.curtain-overlay {
  position: fixed; inset: 0; z-index: 99999;
  background: linear-gradient(135deg, #ffd9dd 0%, #e696a2 50%, #c97884 100%);
  display: flex; align-items: center; justify-content: center;
  pointer-events: none;
  transition: opacity 1s ease 0.6s, transform 1.4s cubic-bezier(0.85, 0, 0.15, 1);
}
.curtain-overlay.lifted { transform: translateY(-100%); opacity: 0; }
.curtain-overlay .logo-mark {
  font-family: 'Noto Serif TC', serif;
  font-style: italic;
  font-weight: 700;
  font-size: clamp(3rem, 10vw, 6rem);
  letter-spacing: 0.18em;
  color: #fff;
  text-shadow: 0 4px 30px rgba(140, 75, 85, 0.4);
  animation: logoBeat 1.4s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
@keyframes logoBeat {
  0%   { opacity: 0; transform: scale(0.7); filter: blur(20px); }
  60%  { opacity: 1; transform: scale(1.05); filter: blur(0); }
  100% { opacity: 1; transform: scale(1); }
}

/* ════════ 全頁背景 ════════ */
.home-mesh-bg {
  position: fixed !important;
  inset: 0 !important;
  z-index: -3 !important;
  pointer-events: none;
  background:
    radial-gradient(at 18% 20%, rgba(255, 178, 188, 0.55) 0px, transparent 55%),
    radial-gradient(at 82% 28%, rgba(235, 225, 214, 0.45) 0px, transparent 55%),
    radial-gradient(at 28% 82%, rgba(230, 150, 162, 0.45) 0px, transparent 55%),
    radial-gradient(at 78% 78%, rgba(255, 217, 221, 0.45) 0px, transparent 55%),
    linear-gradient(180deg, #fbf9f8 0%, #fff5f5 50%, #fbf9f8 100%);
  animation: meshBreathe 22s ease-in-out infinite alternate;
  filter: saturate(1.2);
  transition: background 1.5s ease;
}
@keyframes meshBreathe {
  0%   { transform: scale(1) rotate(0deg); }
  50%  { transform: scale(1.06) rotate(0.5deg); }
  100% { transform: scale(1) rotate(0deg); }
}

/* Section 主題色：每個 section 有對應 hue */
.theme-rose .home-mesh-bg {
  background:
    radial-gradient(at 30% 20%, rgba(255, 178, 188, 0.7) 0px, transparent 55%),
    radial-gradient(at 70% 70%, rgba(230, 150, 162, 0.55) 0px, transparent 55%),
    linear-gradient(180deg, #fff5f7 0%, #ffe9eb 100%);
}
.theme-cream .home-mesh-bg {
  background:
    radial-gradient(at 30% 20%, rgba(235, 225, 214, 0.7) 0px, transparent 55%),
    radial-gradient(at 70% 70%, rgba(255, 217, 221, 0.5) 0px, transparent 55%),
    linear-gradient(180deg, #fbf9f8 0%, #f6efeb 100%);
}
.theme-peach .home-mesh-bg {
  background:
    radial-gradient(at 30% 20%, rgba(255, 200, 170, 0.5) 0px, transparent 55%),
    radial-gradient(at 70% 70%, rgba(255, 178, 188, 0.55) 0px, transparent 55%),
    linear-gradient(180deg, #fff7f0 0%, #ffe9d9 100%);
}

.liquid-blob {
  position: fixed !important; pointer-events: none;
  z-index: -2 !important;
  width: 60vw; height: 60vw;
  max-width: 800px; max-height: 800px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, rgba(255, 217, 221, 0.4), rgba(230, 150, 162, 0.25) 50%, transparent 70%);
  filter: blur(60px);
  will-change: transform;
  animation: blobFloat 25s ease-in-out infinite alternate;
}
.liquid-blob.b1 { top: -20vh; left: -10vw; animation-duration: 25s; }
.liquid-blob.b2 { bottom: -30vh; right: -15vw; animation-duration: 30s; animation-delay: -8s; }
@keyframes blobFloat {
  0%   { transform: translate(0, 0) scale(1); }
  33%  { transform: translate(40vw, 20vh) scale(1.15); }
  66%  { transform: translate(-20vw, 40vh) scale(0.9); }
  100% { transform: translate(20vw, -20vh) scale(1.05); }
}

/* ════════ Brand 大字浮水印（在 viewport 中央慢慢飄） ════════ */
.brand-watermark {
  position: fixed;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%) rotate(-12deg);
  font-family: 'Noto Serif TC', serif;
  font-weight: 800;
  font-style: italic;
  font-size: clamp(8rem, 25vw, 22rem);
  color: rgba(140, 75, 85, 0.04);
  letter-spacing: 0.05em;
  white-space: nowrap;
  z-index: -1;
  pointer-events: none;
  user-select: none;
  animation: watermarkDrift 60s ease-in-out infinite alternate;
}
@keyframes watermarkDrift {
  0%   { transform: translate(-50%, -50%) rotate(-12deg) scale(1); opacity: 0.5; }
  100% { transform: translate(-45%, -55%) rotate(-8deg) scale(1.08); opacity: 0.7; }
}

/* ════════ Noise grain ════════ */
.noise-grain {
  position: fixed !important; inset: 0;
  z-index: -1 !important;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.4'/%3E%3C/svg%3E");
  opacity: 0.05;
  mix-blend-mode: overlay;
}

/* ════════ 飄浮花瓣 ════════ */
.petal {
  position: fixed !important;
  pointer-events: none;
  border-radius: 50% 0 50% 0;
  background: radial-gradient(circle at 30% 30%, #ffd9dd, #e696a2 60%, #c97884);
  box-shadow: 0 0 10px rgba(230, 150, 162, 0.4);
  z-index: 1;
  opacity: 0;
  filter: blur(0.3px);
  will-change: transform, opacity;
  animation: petalFall var(--dur, 14s) linear var(--delay, 0s) infinite;
}
@keyframes petalFall {
  0%   { opacity: 0; transform: translate(0, -10vh) rotate(0deg) scale(0.7); }
  10%  { opacity: 0.85; transform: translate(calc(var(--drift, 80px) * 0.1), 0) rotate(40deg) scale(1); }
  100% { opacity: 0; transform: translate(var(--drift, 80px), 110vh) rotate(540deg) scale(0.95); }
}

/* ════════ 自訂游標 ════════ */
.cursor-ring {
  position: fixed; top: 0; left: 0;
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 1.5px solid rgba(140, 75, 85, 0.5);
  pointer-events: none;
  z-index: 9999;
  display: none;
  will-change: transform;
}
.cursor-dot {
  position: fixed; top: 0; left: 0;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #c97884;
  pointer-events: none;
  z-index: 10000;
  display: none;
  will-change: transform;
}
.cursor-ring.hover-strong {
  width: 64px; height: 64px;
  background: rgba(230, 150, 162, 0.18);
  border-color: rgba(230, 150, 162, 0.85);
  transition: width 0.25s, height 0.25s, background 0.25s;
}
.cursor-ring.text-mode {
  width: 4px; height: 24px;
  border: none;
  background: #8c4b55;
  border-radius: 2px;
}
.trail-dot {
  position: fixed; pointer-events: none;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: radial-gradient(circle, #c97884, transparent);
  z-index: 9998;
  opacity: 0;
  will-change: transform, opacity;
}
@media (hover: hover) and (pointer: fine) {
  .cursor-ring, .cursor-dot { display: block; }
}

/* ════════ Spotlight ════════ */
.spotlight {
  position: fixed; pointer-events: none;
  width: 600px; height: 600px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 217, 221, 0.22) 0%, transparent 60%);
  z-index: 0;
  display: none;
  will-change: transform;
  mix-blend-mode: overlay;
}
@media (hover: hover) and (pointer: fine) {
  .spotlight { display: block; }
}

/* ════════ Click 漣漪 ════════ */
.click-ripple {
  position: fixed; pointer-events: none;
  border: 2px solid rgba(230, 150, 162, 0.8);
  border-radius: 50%;
  z-index: 9997;
  transform: translate(-50%, -50%) scale(0);
  animation: rippleExpand 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}
@keyframes rippleExpand {
  0%   { width: 8px; height: 8px; opacity: 1; transform: translate(-50%, -50%) scale(1); }
  100% { width: 200px; height: 200px; opacity: 0; transform: translate(-50%, -50%) scale(1); }
}

/* ════════ Reveal 動畫 ════════ */
.reveal {
  opacity: 0 !important;
  transform: translate3d(0, 60px, 0) !important;
  transition: opacity 0.9s cubic-bezier(0.2, 0.8, 0.2, 1), transform 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
  will-change: transform, opacity;
}
.reveal.in-view { opacity: 1 !important; transform: translate3d(0, 0, 0) !important; }

.reveal-blur {
  opacity: 0 !important;
  filter: blur(24px) !important;
  transform: scale(1.03) !important;
  transition: opacity 1.2s ease, filter 1.2s ease, transform 1.2s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
}
.reveal-blur.in-view { opacity: 1 !important; filter: blur(0) !important; transform: scale(1) !important; }

.reveal-clip { clip-path: inset(0 100% 0 0); transition: clip-path 1.4s cubic-bezier(0.2, 0.8, 0.2, 1); }
.reveal-clip.in-view { clip-path: inset(0 0 0 0); }

.reveal-from-left {
  opacity: 0 !important;
  transform: translateX(-80px) !important;
  transition: opacity 1s, transform 1s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
}
.reveal-from-left.in-view { opacity: 1 !important; transform: translateX(0) !important; }

.reveal-from-right {
  opacity: 0 !important;
  transform: translateX(80px) !important;
  transition: opacity 1s, transform 1s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
}
.reveal-from-right.in-view { opacity: 1 !important; transform: translateX(0) !important; }

.stagger > * {
  opacity: 0 !important;
  transform: translateY(40px) !important;
  transition: opacity 0.8s, transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
}
.stagger.in-view > * { opacity: 1 !important; transform: translateY(0) !important; }
.stagger.in-view > *:nth-child(1)  { transition-delay: 0.05s; }
.stagger.in-view > *:nth-child(2)  { transition-delay: 0.15s; }
.stagger.in-view > *:nth-child(3)  { transition-delay: 0.25s; }
.stagger.in-view > *:nth-child(4)  { transition-delay: 0.35s; }
.stagger.in-view > *:nth-child(5)  { transition-delay: 0.45s; }
.stagger.in-view > *:nth-child(6)  { transition-delay: 0.55s; }
.stagger.in-view > *:nth-child(7)  { transition-delay: 0.65s; }
.stagger.in-view > *:nth-child(8)  { transition-delay: 0.75s; }
.stagger.in-view > *:nth-child(n+9){ transition-delay: 0.85s; }

/* ════════ Kinetic Typography ════════ */
.kinetic-text { display: inline-block; perspective: 800px; }
.kinetic-text .kinetic-char {
  display: inline-block;
  opacity: 0;
  transform: translateY(80px) rotateX(-90deg);
  transform-origin: 50% 100%;
  transition: opacity 0.7s, transform 0.9s cubic-bezier(0.2, 0.8, 0.2, 1);
  will-change: transform, opacity;
}
.kinetic-text.in-view .kinetic-char { opacity: 1; transform: translateY(0) rotateX(0); }

/* ════════ Hero ════════ */
header > div, header > *:not(img):not(.absolute) {
  animation: heroEnter 1.2s cubic-bezier(0.2, 0.8, 0.2, 1) 1.4s both;
}
@keyframes heroEnter {
  from { opacity: 0; transform: translateY(60px); filter: blur(8px); }
  to   { opacity: 1; transform: translateY(0); filter: blur(0); }
}
header > .absolute > img,
header img.w-full {
  animation: heroZoom 30s ease-out both;
  will-change: transform;
}
@keyframes heroZoom {
  from { transform: scale(1.2); filter: blur(4px); }
  10%  { filter: blur(0); }
  to   { transform: scale(1); }
}

/* ════════ CTA pulse ════════ */
.signature-gradient,
a[href*="line.me"] {
  animation: ctaPulse 2.4s ease-in-out infinite;
  will-change: box-shadow, transform;
  position: relative;
}
@keyframes ctaPulse {
  0%, 100% { box-shadow: 0 8px 22px rgba(140, 75, 85, 0.35), 0 0 0 0 rgba(230, 150, 162, 0.5); }
  50%      { box-shadow: 0 14px 36px rgba(140, 75, 85, 0.55), 0 0 0 14px rgba(230, 150, 162, 0); }
}

/* CTA shine sweep */
.signature-gradient::before,
a[href*="line.me"]::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, 0.4) 50%, transparent 70%);
  background-size: 200% 100%;
  background-position: -100% 0;
  border-radius: inherit;
  pointer-events: none;
  transition: background-position 0.8s ease;
}
.signature-gradient:hover::before,
a[href*="line.me"]:hover::before {
  background-position: 200% 0;
}

/* ════════ 3D Tilt ════════ */
.tilt-card { transform-style: preserve-3d; will-change: transform; transition: transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1); }

/* ════════ 圖片 mask + chromatic aberration on hover ════════ */
.img-mask { position: relative; overflow: hidden; display: inline-block; }
.img-mask::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(120deg, #ffd9dd 0%, #e696a2 100%);
  transform: scaleX(1); transform-origin: right;
  transition: transform 1.2s cubic-bezier(0.2, 0.8, 0.2, 1);
  z-index: 2;
}
.img-mask.in-view::after { transform: scaleX(0); }

/* Image hover glow */
img.zoom-on-hover, .zoom-on-hover img {
  transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1), filter 0.6s;
}
img.zoom-on-hover:hover, .zoom-on-hover:hover img {
  transform: scale(1.04);
  filter: brightness(1.05) contrast(1.05) saturate(1.05);
}

/* ════════ Marquee ════════ */
.marquee {
  overflow: hidden; white-space: nowrap; position: relative;
  padding: 1.25rem 0;
  background: linear-gradient(90deg, transparent, rgba(255, 217, 221, 0.5), transparent);
  border-top: 1px solid rgba(140, 75, 85, 0.12);
  border-bottom: 1px solid rgba(140, 75, 85, 0.12);
  margin: 2rem 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.marquee-track {
  display: inline-block;
  animation: marqueeScroll 28s linear infinite;
  font-family: 'Noto Serif TC', serif;
  font-size: 1.4rem;
  color: #8c4b55;
  letter-spacing: 0.3em;
  font-weight: 600;
}
.marquee-track span { padding: 0 1.5rem; }
.marquee-track span::after { content: '✿'; padding-left: 1.5rem; color: #e696a2; }
@keyframes marqueeScroll { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }

/* ════════ Scroll Progress ════════ */
.scroll-progress {
  position: fixed !important; top: 0 !important; left: 0 !important;
  height: 3px !important; width: 0%;
  background: linear-gradient(90deg, #8c4b55, #e696a2, #c97884) !important;
  z-index: 10001 !important;
  box-shadow: 0 0 12px rgba(230, 150, 162, 0.7);
  transition: width 0.05s linear;
}

/* ════════ Counter ════════ */
.counter-pop {
  font-variant-numeric: tabular-nums;
  background: linear-gradient(135deg, #8c4b55 0%, #c97884 50%, #e696a2 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 800;
}

/* ════════ FAQ details ════════ */
details {
  transition: background 0.3s ease;
  border-radius: 0.75rem;
}
details[open] {
  background: linear-gradient(135deg, rgba(255, 217, 221, 0.3), rgba(255, 245, 247, 0.5));
}
details summary { cursor: pointer; list-style: none; }
details summary::after {
  content: '＋';
  float: right;
  color: #c97884;
  transition: transform 0.3s;
}
details[open] summary::after { transform: rotate(45deg); }
details[open] summary ~ * { animation: faqSlide 0.5s cubic-bezier(0.2, 0.8, 0.2, 1); }
@keyframes faqSlide {
  from { opacity: 0; transform: translateY(-10px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ════════ Cards hover ════════ */
.grid > div, [class*="grid-cols"] > div {
  transition: transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.45s !important;
}
.grid > div:hover, [class*="grid-cols"] > div:hover {
  box-shadow: 0 30px 70px -10px rgba(140, 75, 85, 0.35) !important;
}

/* ════════ Nav 連結底線 ════════ */
nav a:not(.signature-gradient):not([class*="bg-"]),
footer a {
  position: relative;
}
nav a:not(.signature-gradient):not([class*="bg-"])::after,
footer a::after {
  content: '';
  position: absolute;
  left: 0; bottom: -2px;
  width: 100%; height: 2px;
  background: linear-gradient(90deg, #8c4b55, #e696a2);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}
nav a:not(.signature-gradient):not([class*="bg-"]):hover::after,
footer a:hover::after { transform: scaleX(1); }

/* ════════ 焦點環（無障礙 + 美觀） ════════ */
*:focus-visible {
  outline: 3px solid rgba(230, 150, 162, 0.7) !important;
  outline-offset: 4px !important;
  border-radius: 6px;
  transition: outline 0.2s ease;
}

/* ════════ Sticky Nav 收縮 ════════ */
.wm-nav-fixed.scrolled {
  padding-top: 0.5rem !important;
  padding-bottom: 0.5rem !important;
  box-shadow: 0 8px 24px rgba(140, 75, 85, 0.12) !important;
}
.wm-nav-fixed { transition: padding 0.4s, box-shadow 0.4s; }

/* ════════ SVG decorative ribbon ════════ */
.deco-ribbon {
  position: absolute;
  pointer-events: none;
  z-index: 0;
  opacity: 0.5;
}
.deco-ribbon path {
  stroke: url(#ribbonGrad);
  stroke-width: 1.5;
  fill: none;
  stroke-dasharray: 2000;
  stroke-dashoffset: 2000;
  transition: stroke-dashoffset 2s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.deco-ribbon.in-view path { stroke-dashoffset: 0; }

/* ════════ 數字心跳 ════════ */
.beat-on-view {
  animation: beat 1.5s cubic-bezier(0.2, 0.8, 0.2, 1) 0.5s both;
}
@keyframes beat {
  0%   { transform: scale(0.5); opacity: 0; }
  50%  { transform: scale(1.15); opacity: 1; }
  75%  { transform: scale(0.95); }
  100% { transform: scale(1); }
}

/* ════════ Hover preview tooltip on nav ════════ */
[data-preview] { position: relative; }
[data-preview]::before {
  content: attr(data-preview);
  position: absolute;
  top: 110%; left: 50%;
  transform: translateX(-50%) translateY(-4px);
  white-space: nowrap;
  padding: 6px 14px;
  background: rgba(140, 75, 85, 0.95);
  color: #fff;
  font-size: 0.8rem;
  border-radius: 999px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s, transform 0.3s;
  z-index: 100;
}
[data-preview]:hover::before {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ════════ RWD ════════ */
@media (max-width: 768px) {
  .marquee-track { font-size: 1rem; animation-duration: 22s; }
  .reveal { transform: translate3d(0, 40px, 0) !important; }
  .stagger > * { transform: translateY(30px) !important; }
  .scroll-progress { height: 2px !important; }
  .liquid-blob { display: none; }
  .curtain-overlay .logo-mark { font-size: 2.5rem; }
  .spotlight { display: none !important; }
  .brand-watermark { font-size: 8rem; opacity: 0.03; }
}

@media (prefers-reduced-motion: reduce) {
  .home-mesh-bg, .marquee-track, .petal,
  header > div, header > *, header img,
  .signature-gradient, .liquid-blob, .curtain-overlay,
  .brand-watermark { animation: none !important; }
  .reveal, .reveal-blur, .reveal-clip, .reveal-from-left, .reveal-from-right, .stagger > * {
    opacity: 1 !important; transform: none !important; filter: none !important; clip-path: none !important;
  }
  .curtain-overlay, .page-transition-curtain { display: none !important; }
}

/* ════════ Performance: content-visibility for offscreen ════════ */
section { content-visibility: auto; contain-intrinsic-size: 1px 800px; }