/* ═══════════════════════════════════════════════════════════
   Cupy · My Assistant — theme.css  "หวานแหววอิริเดสเซนต์"
   โทนจากภาพคลื่นพาสเทล: ครีม · ลาเวนเดอร์ · ฟ้าไซแอน · ชมพูมุก
   โหลดหลัง index.html inline styles → ค่านี้ชนะทับทั้งหมด
   ═══════════════════════════════════════════════════════════ */

:root{
  /* พาเลตหวานแหวว (ดูดจากภาพพื้นหลัง) */
  --cream:    #fdf6ec;   /* ครีมอุ่น — มุมบนขวาของภาพ (จุดแสง) */
  --peach:    #ffe3d6;   /* พีชพาสเทล */
  --lavender: #e6dcf7;   /* ลาเวนเดอร์ — ซ้ายบน */
  --sky:      #dbeafe;   /* ฟ้าอ่อน */
  --cyan:     #cdeefb;   /* ไซแอนพาสเทล — คลื่นกลาง */
  --rose:     #ffd6e8;   /* ชมพูมุก — สันคลื่น */
  --pearl:    #fff7f9;   /* มุกขาวหวาน */

  /* หมึก (บนพื้นหวานอ่านชัด) */
  --ink:      #3a2e55;   /* ม่วงเข้มหวาน — หมึกหลัก */
  --ink-soft: #6d5a8e;   /* ม่วงเทาอ่อน — หมึกรอง */

  /* สีเน้น: ไล่มุก — ชมพูมุก → ลาเวนเดอร์ → ฟ้า (แบบ iridescent) */
  --grad-iridescent: linear-gradient(120deg, #f6a6c9 0%, #c9a6f0 30%, #8fc7f5 55%, #9be8f2 75%, #ffd6e8 100%);
  --grad-soft:       linear-gradient(135deg, #fdeef5 0%, #ece4fb 50%, #dff2fd 100%);
  --grad-cta:        linear-gradient(120deg, #ef9fc4, #b39df1 55%, #8ec9f6);

  /* กระจก — หวานแหวว โปร่งมุก */
  --glass:        rgba(255,255,255,.28);
  --glass-strong: rgba(255,255,255,.46);
  --glass-border: rgba(255,255,255,.85);
  --glass-shadow: rgba(150,120,200,.16);
  --focus:        #b39df1;
  --tag-word:     #7c6bb8;   /* ป้าย Word — ม่วงหวาน */
  --tag-pdf:      #d76aa8;   /* ป้าย PDF — ชมพูเข้ม */
  --locked:       #9d7bd8;   /* ม่วงหวาน — ล็อก */

  --grad-cta-text: #b0538f;  /* ตัวอักษรเน้น */
}

/* ─── พื้นหลัง: ไล่โทนหวานแหวว 5 โทน ─── */
body{
  background:
    radial-gradient(1100px 620px at 88% -8%,  var(--cream) 0%,    transparent 55%),
    radial-gradient(900px  560px at -12% 22%, var(--lavender) 0%, transparent 58%),
    radial-gradient(1000px 640px at 50% 112%, var(--cyan) 0%,     transparent 62%),
    linear-gradient(160deg, var(--pearl) 0%, var(--peach) 28%, var(--lavender) 55%, var(--sky) 80%, var(--cyan) 100%);
  background-attachment: fixed;
}

/* ─── แสงวูบเป็นคลื่นช้า ๆ — ชั้นแสงลอย 2 ชั้น ─── */
/* ชั้น 1: ม่านแสงชมพู-ลาเวนเดอร์ ลอยวนช้า */
body::before{
  content:''; position:fixed; inset:-40%; z-index:-1; pointer-events:none;
  background:
    radial-gradient(560px 380px at 30% 40%, rgba(246,166,201,.30), transparent 70%),
    radial-gradient(620px 420px at 70% 55%, rgba(201,166,240,.26), transparent 70%),
    radial-gradient(520px 360px at 50% 30%, rgba(155,232,242,.22), transparent 70%);
  filter:blur(46px);
  animation: aurora-drift 26s ease-in-out infinite alternate;
  will-change: transform;
}
/* ชั้น 2: แสงวาบ (shine sweep) เฉียงเรืองรอง เหมือนแสงตกกระทบมุก */
body::after{
  content:''; position:fixed; inset:-60% -20%; z-index:-1; pointer-events:none;
  background: linear-gradient(115deg, transparent 42%, rgba(255,255,255,.5) 50%, transparent 58%);
  animation: pearl-shine 17s ease-in-out infinite;
  will-change: transform;
}
@keyframes aurora-drift{
  0%  { transform: translate3d(-4%, -2%, 0) scale(1);    opacity:.85; }
  35% { transform: translate3d( 3%,  2%, 0) scale(1.05); opacity:1;   }
  70% { transform: translate3d(-2%,  4%, 0) scale(1.02); opacity:.9;  }
  100%{ transform: translate3d( 4%, -3%, 0) scale(1.06); opacity:.95; }
}
@keyframes pearl-shine{
  0%, 100% { transform: translate3d(-55%, -18%, 0) rotate(8deg);  opacity:.0;  }
  18%      { opacity:.55; }
  52%      { opacity:.35; }
  85%      { opacity:.5; }
  100%     { transform: translate3d( 55%,  18%, 0) rotate(-6deg); opacity:.0; }
}

/* ─── การ์ดกระจก: หวานแหวว — ขอบมุก + เงาชมพูม่วงนุ่ม ─── */
.glass{
  background: var(--glass);
  backdrop-filter: blur(28px) saturate(1.7);
  -webkit-backdrop-filter: blur(28px) saturate(1.7);
  border: 1px solid var(--glass-border);
  border-radius: 22px;
  box-shadow:
    0 14px 48px var(--glass-shadow),
    inset 0 1px 0 rgba(255,255,255,.95),
    inset 0 -1px 0 rgba(255,222,238,.5);
}
.doc:hover{
  transform: translateY(-3px);
  box-shadow:
    0 20px 56px rgba(190,140,220,.22),
    inset 0 1px 0 rgba(255,255,255,.95);
}

/* แสงวาบไหลผ่านการ์ดตอนชี้ (เหมือนแสงกระดาษมุก) */
.doc{position:relative; overflow:hidden}
.doc::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background: linear-gradient(115deg, transparent 40%, rgba(255,255,255,.55) 50%, transparent 60%);
  transform: translateX(-120%);
  transition: transform .9s ease;
}
.doc:hover::after{ transform: translateX(120%); }

/* ─── ปุ่ม: CTA ไล่มุกชมพู-ม่วง-ฟ้า + glow หวาน ─── */
.btn-primary{
  background: var(--grad-cta);
  border: 1px solid rgba(255,255,255,.65);
  box-shadow: 0 8px 22px rgba(201,150,230,.45), inset 0 1px 0 rgba(255,255,255,.6);
}
.btn-primary:hover{
  box-shadow: 0 12px 30px rgba(201,150,230,.55), inset 0 1px 0 rgba(255,255,255,.6);
}

/* ─── จุด pulse: หัวใจชมพู ─── */
.pulse{
  background: #ef9fc4;
  box-shadow: 0 0 0 0 rgba(239,159,196,.55);
  animation: pulse-sweet 2.4s infinite;
}
@keyframes pulse-sweet{
  0%  { box-shadow: 0 0 0 0 rgba(239,159,196,.5); }
  70% { box-shadow: 0 0 0 9px transparent; }
  100%{ box-shadow: 0 0 0 0 transparent; }
}

/* ─── brand-mark: ลูกแก้วมุก (ไล่สีหวาน + เงาชมพู) ─── */
.brand-mark{
  background: var(--grad-cta);
  box-shadow: 0 5px 16px rgba(201,150,230,.45), inset 0 1px 0 rgba(255,255,255,.7);
}

/* ─── ตัวเลขสถิติ: ไล่มุกอิริเดสเซนต์เลื่อนช้า ─── */
.stat b{
  background: var(--grad-iridescent);
  background-size: 300% 300%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  text-shadow: none;
  filter: drop-shadow(0 2px 10px rgba(190,150,230,.25));
  animation: hue-slide 9s ease-in-out infinite alternate;
}
@keyframes hue-slide{ from{background-position:0% 40%} to{background-position:100% 60%} }

/* ─── hero หัวเรื่องเน้น: ไล่มุกเลื่อน ─── */
.hero h1 em{
  background: var(--grad-iridescent);
  background-size: 300% 300%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: hue-slide 9s ease-in-out infinite alternate;
  filter: drop-shadow(0 1px 8px rgba(255,255,255,.65));
}

/* ─── chip: หวานแหวว ─── */
.chip.on{
  background: var(--grad-cta);
  border-color: rgba(255,255,255,.7);
  box-shadow: 0 5px 16px rgba(201,150,230,.4), inset 0 1px 0 rgba(255,255,255,.55);
}
.chip:hover{ background: rgba(255,255,255,.62); color: var(--ink); }

/* ─── ป้าย/ไอคอนปรับโทนหวาน ─── */
.tag.word{ color: var(--tag-word); }
.tag.pdf{  color: var(--tag-pdf); }
.thumb.word{ color: var(--tag-word); }
.thumb.pdf{  color: var(--tag-pdf); }
.thumb.lock{ color: var(--locked); }
.section-label .spark{ color: #d886bb; }

/* ─── footer กลอบมุกชมพู ─── */
footer .gl{
  background: radial-gradient(circle at 32% 30%, rgba(255,255,255,.95), rgba(246,166,201,.4) 45%, rgba(179,157,241,.32));
  box-shadow: 0 5px 16px rgba(201,150,230,.4);
}
footer b{ color: var(--grad-cta-text); }

/* ─── ว่าง/empty: ขอบมุกหวาน ─── */
.empty{ border-color: rgba(255,255,255,.9); background: rgba(255,255,255,.3); }
.empty .spark{ color: #e08ec2; }

/* ─── unlock panel ─── */
.lock-badge{
  background: rgba(157,123,216,.14);
  border-color: rgba(157,123,216,.4);
  color: var(--locked);
}

/* ─── เกณฑ์ craft: เคารพผู้ใช้ที่ตั้งลดแอนิเมชัน ─── */
@media (prefers-reduced-motion: reduce){
  body::before, body::after, .stat b, .hero h1 em{ animation: none; }
  .doc, .doc::after, .btn, .chip{ transition: none; }
}

/* ─── มือถือ: ลดแสงวาบ กันจ้าเกิน ─── */
@media(max-width:720px){
  body::after{ opacity:.6; }
  .doc::after{ display:none; }
}