/*
  Care Cloud Minimal UI — 極簡插圖微互動層
  ────────────────────────────────────────
  ▸ 不改動 HTML 架構
  ▸ 所有插圖透過 CSS pseudo-element + SVG data URI 注入
  ▸ 微互動：hover lift / ripple / underline-draw / count-up / scroll-reveal
*/

/* ════════════════════════════════════════
   0. Scroll-reveal base
   ════════════════════════════════════════ */
.reveal {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity .55s cubic-bezier(.22,1,.36,1), transform .55s cubic-bezier(.22,1,.36,1);
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}
.reveal-delay-1 { transition-delay: .08s; }
.reveal-delay-2 { transition-delay: .16s; }
.reveal-delay-3 { transition-delay: .24s; }
.reveal-delay-4 { transition-delay: .32s; }
.reveal-delay-5 { transition-delay: .40s; }
.reveal-delay-6 { transition-delay: .48s; }
.reveal-delay-7 { transition-delay: .56s; }

/* ════════════════════════════════════════
   1. Page-level minimalism
   ════════════════════════════════════════ */
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Remove heavy borders from sections, rely on shadow only */
.section {
  border-color: transparent;
  box-shadow: 0 2px 24px rgba(59,130,246,.05), 0 1px 4px rgba(59,130,246,.04);
  border-radius: 24px;
  background: #ffffff;
  transition: box-shadow .3s ease;
}
.section:hover {
  box-shadow: 0 8px 40px rgba(59,130,246,.10), 0 2px 8px rgba(59,130,246,.06);
}

/* ════════════════════════════════════════
   2. Hero — floating blob illustration
   ════════════════════════════════════════ */

/* Animated purple care illustration blobs behind hero */
.hero-video-shell::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 55% 45% at 15% 30%, rgba(167,139,250,.28) 0%, transparent 60%),
    radial-gradient(ellipse 40% 35% at 85% 20%, rgba(196,181,253,.20) 0%, transparent 55%),
    radial-gradient(ellipse 35% 40% at 70% 80%, rgba(91,33,182,.22)  0%, transparent 50%),
    radial-gradient(ellipse 30% 25% at 30% 85%, rgba(124,58,237,.15)  0%, transparent 50%);
  animation: heroAura 10s ease-in-out infinite alternate;
  pointer-events: none;
  z-index: 1;
}
@keyframes heroAura {
  0%   { opacity: .7; transform: scale(1); }
  50%  { opacity: 1;  transform: scale(1.04); }
  100% { opacity: .75; transform: scale(1.01); }
}

/* ════════════════════════════════════════
   3. Nav — animated underline links
   ════════════════════════════════════════ */
.hero-video-shell .hero-nav-links a {
  position: relative;
  overflow: hidden;
}
.hero-video-shell .hero-nav-links a::after {
  content: '';
  position: absolute;
  bottom: 6px; left: 14px; right: 14px;
  height: 1.5px;
  background: rgba(255,255,255,.8);
  border-radius: 99px;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .28s cubic-bezier(.4,0,.2,1);
}
.hero-video-shell .hero-nav-links a:hover::after {
  transform: scaleX(1);
}

/* ════════════════════════════════════════
   4. Decision cards — micro-interactions
   ════════════════════════════════════════ */
.hd-card {
  position: relative;
  overflow: hidden;
  will-change: transform;
}

/* Shine sweep on hover */
.hd-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    110deg,
    transparent 20%,
    rgba(255,255,255,.22) 50%,
    transparent 80%
  );
  transform: translateX(-120%);
  transition: transform .45s ease;
  pointer-events: none;
  border-radius: inherit;
}
.hd-card:hover::before {
  transform: translateX(120%);
}

/* Icon bounce */
.hd-card:hover .hd-icon {
  animation: iconBounce .4s cubic-bezier(.36,.07,.19,.97);
}
@keyframes iconBounce {
  0%   { transform: scale(1); }
  30%  { transform: scale(1.28) rotate(-6deg); }
  60%  { transform: scale(.92) rotate(4deg); }
  100% { transform: scale(1) rotate(0deg); }
}

/* ════════════════════════════════════════
   5. Finder cards — tilt + glow
   ════════════════════════════════════════ */
.finder-card {
  will-change: transform;
  transition:
    transform .28s cubic-bezier(.22,1,.36,1),
    box-shadow .28s ease,
    border-color .28s ease;
}
.finder-card:hover {
  transform: translateY(-6px) scale(1.015);
  box-shadow: 0 20px 48px rgba(124,58,237,.15), 0 4px 12px rgba(124,58,237,.08);
  border-color: rgba(124,58,237,.25);
}

/* Illustration area glow pulse on hover */
.finder-card:hover .finder-card-img {
  filter: brightness(1.08) saturate(1.15);
  transition: filter .3s ease;
}

/* Tag slide-in on hover */
.finder-card-tags li {
  transition: background .2s, color .2s, transform .2s;
}
.finder-card:hover .finder-card-tags li {
  transform: translateX(0);
}

/* ════════════════════════════════════════
   6. Stat counter cards — micro-interaction
   ════════════════════════════════════════ */
.hero-video-shell .stat-item {
  cursor: default;
  transition: transform .25s ease, box-shadow .25s ease, background .25s ease;
}
.hero-video-shell .stat-item:hover {
  transform: translateY(-4px);
  background: rgba(255,255,255,.22);
  box-shadow: 0 12px 32px rgba(0,0,0,.18);
}
.hero-video-shell .stat-item h2 {
  transition: letter-spacing .3s ease;
}
.hero-video-shell .stat-item:hover h2 {
  letter-spacing: .04em;
}

/* ════════════════════════════════════════
   7. Buttons — ripple + lift
   ════════════════════════════════════════ */
.btn-primary,
.button-primary,
.finder-cta-btn:not(.btn-market),
.hd-search-btn {
  position: relative;
  overflow: hidden;
}
.btn-primary::after,
.button-primary::after,
.finder-cta-btn:not(.btn-market)::after,
.hd-search-btn::after {
  content: '';
  position: absolute;
  width: 0; height: 0;
  border-radius: 50%;
  background: rgba(255,255,255,.28);
  top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  transition: width .5s ease, height .5s ease, opacity .5s ease;
  opacity: 0;
}
.btn-primary:active::after,
.button-primary:active::after,
.finder-cta-btn:not(.btn-market):active::after,
.hd-search-btn:active::after {
  width: 250px; height: 250px;
  opacity: 0;
  transition: width .4s ease, height .4s ease, opacity .4s ease;
}

/* ════════════════════════════════════════
   8. Section heading — eyebrow pulse
   ════════════════════════════════════════ */
.section-heading {
  position: relative;
}
.eyebrow {
  transition: background .2s, color .2s, box-shadow .2s;
}
.section:hover .eyebrow {
  box-shadow: 0 0 0 3px rgba(124,58,237,.12);
}

/* ════════════════════════════════════════
   9. Section-level illustrations (CSS SVG背景插圖)
   ════════════════════════════════════════ */

/* 輔具商城 — 右上角裝飾曲線（紫色系） */
.assistive-finder-section {
  position: relative;
  overflow: hidden;
}
.assistive-finder-section::after {
  content: '';
  position: absolute;
  top: -40px; right: -60px;
  width: 340px; height: 340px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 340 340'%3E%3Ccircle cx='200' cy='140' r='160' fill='none' stroke='%237C3AED' stroke-width='1' stroke-dasharray='6 10' opacity='.12'/%3E%3Ccircle cx='200' cy='140' r='110' fill='none' stroke='%23A78BFA' stroke-width='1' stroke-dasharray='4 8' opacity='.09'/%3E%3Ccircle cx='200' cy='140' r='60' fill='rgba(124,58,237,.04)'/%3E%3C/svg%3E") no-repeat center / contain;
  pointer-events: none;
  animation: slowSpin 40s linear infinite;
}
@keyframes slowSpin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* Care Cloud 流程區 — 左側波浪插圖 */
.how-it-works-section {
  position: relative;
  overflow: hidden;
}
.how-it-works-section::before {
  content: '';
  position: absolute;
  left: -80px; bottom: -40px;
  width: 320px; height: 320px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 320'%3E%3Cpath d='M0 200 Q80 160 160 200 Q240 240 320 200' fill='none' stroke='%2327AE60' stroke-width='2' opacity='.10'/%3E%3Cpath d='M0 230 Q80 190 160 230 Q240 270 320 230' fill='none' stroke='%2327AE60' stroke-width='1.5' opacity='.07'/%3E%3Cpath d='M0 260 Q80 220 160 260 Q240 300 320 260' fill='none' stroke='%2327AE60' stroke-width='1' opacity='.05'/%3E%3Ccircle cx='40' cy='180' r='6' fill='%2327AE60' opacity='.12'/%3E%3Ccircle cx='280' cy='220' r='4' fill='%233B82F6' opacity='.10'/%3E%3C/svg%3E") no-repeat center / contain;
  pointer-events: none;
}

/* 客戶評價區 — 引號插圖 */
.how-it-works-section::after {
  content: '';
  position: absolute;
  right: -30px; top: 20px;
  width: 200px; height: 200px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Ctext x='20' y='140' font-size='160' fill='%233B82F6' opacity='.04' font-family='Georgia,serif'%3E%E2%80%9C%3C/text%3E%3C/svg%3E") no-repeat center / contain;
  pointer-events: none;
}

/* ════════════════════════════════════════
   10. Hero entry links — animated arrow
   ════════════════════════════════════════ */
.hero-entry-link span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: gap .2s ease;
}
.hero-entry-link:hover span {
  gap: 10px;
}

/* ════════════════════════════════════════
   11. Finder group label — decorative line
   ════════════════════════════════════════ */
.finder-group-label {
  display: flex;
  align-items: center;
  gap: 12px;
}
.finder-group-label::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, rgba(59,130,246,.25), transparent);
  border-radius: 99px;
}

/* ════════════════════════════════════════
   12. CTA wrap — pulsing ring on primary btn
   ════════════════════════════════════════ */
.finder-cta-btn:not(.btn-market) {
  position: relative;
}
.finder-cta-btn:not(.btn-market)::before {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 999px;
  border: 2px solid rgba(59,130,246,.3);
  opacity: 0;
  transition: opacity .3s, transform .3s;
  transform: scale(.94);
}
.finder-cta-btn:not(.btn-market):hover::before {
  opacity: 1;
  transform: scale(1);
}

/* ════════════════════════════════════════
   13. Privacy / footer section — dot pattern
   ════════════════════════════════════════ */
.privacy-section {
  position: relative;
  overflow: hidden;
}
.privacy-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(59,130,246,.06) 1px, transparent 1px);
  background-size: 28px 28px;
  pointer-events: none;
  border-radius: inherit;
}

/* ════════════════════════════════════════
   14. Card image areas — floating emoji
   ════════════════════════════════════════ */
.finder-card-img {
  transition: transform .4s cubic-bezier(.22,1,.36,1);
}
.finder-card:hover .finder-card-img {
  transform: scale(1.06);
}

/* ════════════════════════════════════════
   15. Section headings — slide-up h2
   ════════════════════════════════════════ */
.section-heading h2 {
  position: relative;
}
.section-heading h2::after {
  content: '';
  position: absolute;
  left: 0; bottom: -6px;
  width: 40px; height: 3px;
  background: linear-gradient(90deg, var(--primary, #7C3AED), var(--accent, #C4B5FD));
  border-radius: 99px;
  transition: width .35s cubic-bezier(.22,1,.36,1);
}
.section:hover .section-heading h2::after {
  width: 80px;
}

/* ════════════════════════════════════════
   16. How-it-works grid cards — step glow
   ════════════════════════════════════════ */
.how-it-works-grid .feature-card,
.how-it-works-grid .how-card,
.how-it-works-grid > div,
.how-it-works-grid > article {
  transition: transform .28s ease, box-shadow .28s ease;
}
.how-it-works-grid .feature-card:hover,
.how-it-works-grid .how-card:hover,
.how-it-works-grid > div:hover,
.how-it-works-grid > article:hover {
  transform: translateY(-5px);
  box-shadow: 0 16px 40px rgba(124,58,237,.12);
}

/* ════════════════════════════════════════
   17. Official note banner — accent bar
   ════════════════════════════════════════ */
.official-note-banner {
  position: relative;
  overflow: hidden;
}
.official-note-banner::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  background: linear-gradient(180deg, var(--primary, #7C3AED), var(--accent, #C4B5FD));
  border-radius: 0 2px 2px 0;
}

/* ════════════════════════════════════════
   18. Footer — soft top wave
   ════════════════════════════════════════ */
.site-footer {
  position: relative;
  overflow: hidden;
}
.site-footer::before {
  content: '';
  position: absolute;
  top: -2px; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg,
    var(--primary, #7C3AED),
    var(--accent, #C4B5FD),
    var(--secondary, #27AE60),
    var(--primary, #7C3AED)
  );
  background-size: 300% 100%;
  animation: gradientFlow 5s linear infinite;
}
@keyframes gradientFlow {
  from { background-position: 0% 50%; }
  to   { background-position: 300% 50%; }
}

/* ════════════════════════════════════════
   19. Input focus animations
   ════════════════════════════════════════ */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
select,
textarea {
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="tel"]:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--primary, #7C3AED);
  box-shadow: 0 0 0 3.5px rgba(59,130,246,.15);
}

/* ════════════════════════════════════════
   20. Floating LINE button — subtle pulse
   ════════════════════════════════════════ */
.floating-line-button {
  transition: transform .25s ease, box-shadow .25s ease;
}
.floating-line-button::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: rgba(6,199,85,.15);
  animation: linePulse 2.5s ease-in-out infinite;
}
@keyframes linePulse {
  0%, 100% { transform: scale(1); opacity: 0; }
  50%       { transform: scale(1.15); opacity: 1; }
}
.floating-line-button:hover {
  transform: translateY(-3px) scale(1.03);
  box-shadow: 0 12px 32px rgba(6,199,85,.28);
}

/* ════════════════════════════════════════
   21. Page shell — subtle scroll line
   ════════════════════════════════════════ */
.page-shell::before {
  content: '';
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  width: var(--scroll-pct, 0%);
  background: linear-gradient(90deg, var(--primary, #7C3AED), var(--accent, #C4B5FD));
  z-index: 9999;
  transition: width .1s linear;
}


/* ══════════════════════════════════════════════════════
   Animated Page Mascot — BB-8 style robot rolls along bottom
   ══════════════════════════════════════════════════════ */
.page-ground-line {
  position: fixed;
  bottom: 7px;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg,
    transparent 3%,
    rgba(124,58,237,.18) 20%,
    rgba(6,182,212,.18) 50%,
    rgba(124,58,237,.18) 80%,
    transparent 97%);
  z-index: 998;
  pointer-events: none;
}

.page-mascot-wrap {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 102px;
  pointer-events: none;
  z-index: 999;
  overflow: hidden;
}

.page-mascot {
  position: absolute;
  bottom: 0;
  left: 0;
  animation: mascotWalkX 26s linear infinite;
  filter: drop-shadow(0 3px 10px rgba(0,0,0,.13));
}

@keyframes mascotWalkX {
  0%   { transform: translateX(-110px); }
  100% { transform: translateX(calc(100vw + 110px)); }
}

/* Body sphere rotates (rolling effect) */
.mascot-body {
  animation: mascotBodySpin 1.8s linear infinite;
}

/* Head gently wobbles while rolling */
.mascot-head {
  animation: mascotHeadWobble 1.8s ease-in-out infinite;
}

@keyframes mascotBodySpin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

@keyframes mascotHeadWobble {
  0%, 100% { transform: rotate(-5deg) translateY(0px); }
  25%       { transform: rotate(-1deg) translateY(-2px); }
  50%       { transform: rotate(5deg)  translateY(0px); }
  75%       { transform: rotate(1deg)  translateY(-1px); }
}