/* ════════════════════════════════════════════════════════════
 * logo-luxe.css — ลูกเล่นหรูหราให้โลโก้เหรียญทอง KDP (header brand)
 * โหลด "หลัง" ket-theme.css → ทับ cascade ได้. เพิ่มเติมอย่างเดียว ไม่รื้อของเดิม
 * (shine ::after / halo ::before / box-shadow glow ของ app.css คงไว้ครบ).
 * กฎ: animate เฉพาะ transform/opacity (GPU เบา) + เคารพ prefers-reduced-motion.
 * ════════════════════════════════════════════════════════════ */

:root {
  --luxe-gold-deep: #a07d3a;   /* เงาทองเข้ม (ขอบ/มิติ) */
  --luxe-gold:      #d8b86a;   /* ทองหลัก */
  --luxe-gold-lite: #f3e0ad;   /* ทองอ่อน */
  --luxe-gold-spec: #fff7e2;   /* ประกายไฮไลต์ (specular) */
}

/* ── เหรียญ: ยกลอย + glow ทองเข้มขึ้นตอน hover (filter ไม่โดน overflow:hidden ตัด) ── */
.kdt-brand .kdp-logo-wrap {
  transition:
    filter .45s var(--ease-smooth, ease),
    transform .45s var(--ease-spring, cubic-bezier(.34, 1.4, .64, 1));
  will-change: transform;
}
.kdt-brand:hover .kdp-logo-wrap {
  filter: drop-shadow(0 0 10px rgba(216, 184, 106, .75));
  transform: translateY(-1px) scale(1.05);
}

/* ── วงแหวนทองหมุนรอบเหรียญ — "gleam" วิ่งรอบขอบเหมือนโลหะขัดเงา ──
 * ใช้ ::after ของ .kdt-brand (ว่าง) + geometry เดียวกับ halo ::before (center ตรงเหรียญอยู่แล้ว)
 * วางหลังเหรียญ (z-index < .kdp-logo-wrap z6) → โผล่เฉพาะขอบบาง ๆ */
.kdt-brand::after {
  content: '';
  position: absolute;
  left: -16px; top: 50%;
  width: 92px; height: 92px;
  border-radius: 50%;
  background: conic-gradient(from 0deg,
    transparent 0%,
    var(--luxe-gold-spec) 7%,
    transparent 20%,
    transparent 50%,
    var(--luxe-gold) 57%,
    transparent 70%,
    transparent 100%);
  /* mask ให้เหลือเฉพาะ "วงแหวน" บาง (รองรับ Chrome/Safari; เบราว์เซอร์ไม่รองรับ → เป็น glow นุ่มแทน) */
  -webkit-mask: radial-gradient(circle, transparent 58%, #000 61%, #000 70%, transparent 73%);
          mask: radial-gradient(circle, transparent 58%, #000 61%, #000 70%, transparent 73%);
  z-index: 5;
  opacity: .75;
  pointer-events: none;
  transform: translateY(-50%) rotate(0deg);
  animation: luxeRingSpin 6.5s linear infinite;
  will-change: transform;
}
.kdt-brand:hover::after { opacity: 1; animation-duration: 2.6s; }
@keyframes luxeRingSpin {
  to { transform: translateY(-50%) rotate(360deg); }
}

/* ── ชื่อแบรนด์: ตัวอักษรทองฟอยล์ + แสงกวาดช้า ๆ (foil sweep) ── */
.kdt-brand .kdp-brand-th {
  background: linear-gradient(100deg,
    var(--luxe-gold-deep) 0%,
    var(--luxe-gold) 28%,
    var(--luxe-gold-spec) 47%,
    var(--luxe-gold-lite) 53%,
    var(--luxe-gold) 72%,
    var(--luxe-gold-deep) 100%);
  background-size: 230% 100%;
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  text-shadow: none;                                  /* ตัดเงาดำเดิมออก ไม่ให้มัวทอง */
  filter: drop-shadow(0 1px 5px rgba(120, 86, 20, .4));  /* มิติฟอยล์ (ตามรูปตัวอักษรจริง) */
  animation: luxeFoilSweep 7.5s ease-in-out infinite;
}
@keyframes luxeFoilSweep {
  0%, 100% { background-position: 0 0; }
  50%      { background-position: 100% 0; }
}

/* ── tagline EN: เปล่งทองนิดตอน hover แบรนด์ ── */
.kdt-brand .kdp-brand-en {
  transition: color .35s var(--ease-smooth, ease), text-shadow .35s var(--ease-smooth, ease);
}
.kdt-brand:hover .kdp-brand-en {
  color: var(--luxe-gold-lite);
  text-shadow: 0 0 10px rgba(216, 184, 106, .5);
}

/* ── reduced-motion: ปิดทุก animation, คงความหรูแบบ static ── */
@media (prefers-reduced-motion: reduce) {
  .kdt-brand::after { animation: none; opacity: .6; }
  .kdt-brand .kdp-brand-th { animation: none; background-position: 47% 0; }
  .kdt-brand:hover .kdp-logo-wrap { transform: none; }
}