/* ═══════════════════════════════════════════════════════════════════
   ZEEDTOPUP — ReactBits FX (vanilla port) · v6
   พอร์ตเอฟเฟกต์จาก reactbits.dev มาเป็น CSS/JS ล้วน (ไม่ใช้ React)
   ────────────────────────────────────────────────────────────────
   แนวทาง v6:
   • พื้นหลัง Hero = gradient เดิมของ app.css + เลเยอร์จุดจาง ๆ ทับบาง ๆ
   • เลเยอร์จุดไม่มี animation — นิ่งสนิท
   ────────────────────────────────────────────────────────────────
   กติกา:
   • ไฟล์นี้ "เพิ่ม" อย่างเดียว ห้ามแก้ app.css เดิม
   • ใช้ตัวแปรธีมเว็บ (--r/--rl/--rg/--bd/--cd) เท่านั้น
   • ใช้ property `translate` แทน `transform` เวลาที่จะทับของเดิม
     (translate เป็นคนละ property → compose กับ transform เดิมได้ ไม่ตีกัน)
   • เอฟเฟกต์ที่พึ่งเมาส์ (spotlight) เปิดเฉพาะ (hover:hover) and (pointer:fine)
   • เคารพ prefers-reduced-motion เสมอ
   ═══════════════════════════════════════════════════════════════════ */

:root{
  --rb-ease:cubic-bezier(.22,1,.36,1);
  --rb-spot-size:260px;
  --rb-spot-color:rgba(227,24,55,.16);
}

/* ═══ 1. Hero Backdrop — โทน ROII (มืดลึก · จุดไล่ความเข้ม · ริ้วแสง) ═══
   อ้างอิงฟีลจากหน้า ROII: พื้นเกือบดำ + แดงหม่นลึกตรงกลาง
   จุดเห็นชัดช่วงบน แล้วไล่จางหายลงล่าง + ริ้วแสงแนวตั้งบาง ๆ
   ซ้อน 4 ชั้นบน gradient เดิมของ .hero (ไม่ได้แทนที่) ที่ z-index 0
   ทุกชั้นนิ่งสนิท ไม่มี animation · pointer-events:none */
.rb-hero-fx{
  position:absolute; inset:0; z-index:0;
  pointer-events:none; overflow:hidden;
}

/* ── ชั้น 1 · Wash — แดงหม่นลึก ไม่สด ไม่จ้า (คุมโทนให้เหมือน ROII) ── */
.rb-hero-wash{
  position:absolute; inset:0;
  background:
    radial-gradient(ellipse 64% 92% at 36% 46%, rgba(138,18,34,.34), rgba(138,18,34,0) 70%),
    radial-gradient(ellipse 52% 72% at 86% 28%, rgba(92,12,24,.30), rgba(92,12,24,0) 74%);
}

/* ── ชั้น 2 · Streaks — ริ้วแสงแนวตั้งเอียงนิด ๆ จางมาก ── */
.rb-hero-streaks{
  position:absolute; inset:0;
  background:repeating-linear-gradient(96deg,
    rgba(255,255,255,0)    0px,
    rgba(255,255,255,.014) 2px,
    rgba(255,255,255,0)    6px,
    rgba(255,255,255,0)    68px);
  -webkit-mask-image:linear-gradient(to bottom,#000 0%,rgba(0,0,0,.45) 58%,transparent 100%);
  mask-image:linear-gradient(to bottom,#000 0%,rgba(0,0,0,.45) 58%,transparent 100%);
}

/* ── ชั้น 3 · Dots — จุดแดง เข้มช่วงบน-ซ้าย แล้วไล่จางลงล่าง ──
   mask เป็นวงรีที่วางไว้ "สูง" (at 40% 10%) → ได้ ramp ความเข้มจริง
   ไม่ใช่แค่จางที่ขอบ */
.rb-hero-dots{
  position:absolute; inset:0;
  background-image:radial-gradient(circle,rgba(255,88,110,.22) 1.2px,transparent 1.3px);
  background-size:26px 26px;
  -webkit-mask-image:radial-gradient(ellipse 105% 78% at 40% 10%,#000 0%,rgba(0,0,0,.55) 46%,transparent 88%);
  mask-image:radial-gradient(ellipse 105% 78% at 40% 10%,#000 0%,rgba(0,0,0,.55) 46%,transparent 88%);
}

/* ── ชั้น 4 · Vignette — กดขอบให้เกือบดำ แบบ ROII ── */
.rb-hero-vignette{
  position:absolute; inset:0;
  background:radial-gradient(ellipse 92% 104% at 44% 46%,
             transparent 28%, rgba(0,0,0,.34) 76%, rgba(0,0,0,.58) 100%);
}

/* โหมดสว่าง: ลดชั้นมืดลง เหลือจุดแดงให้พอเห็น */
body.light .rb-hero-dots{
  background-image:radial-gradient(circle,rgba(227,24,55,.30) 1.2px,transparent 1.3px);
}
body.light .rb-hero-wash,
body.light .rb-hero-streaks{opacity:.35}
body.light .rb-hero-vignette{
  background:radial-gradient(ellipse 92% 104% at 44% 46%,
             transparent 46%, rgba(15,23,42,.05) 80%, rgba(15,23,42,.10) 100%);
}

@media (max-width:768px){
  .rb-hero-dots{
    background-size:22px 22px;
    /* มือถือ hero เตี้ยกว่า → ดึงโซนจุดเข้มลงมาหน่อย ไม่งั้นตกขอบบน */
    -webkit-mask-image:radial-gradient(ellipse 120% 70% at 46% 16%,#000 0%,rgba(0,0,0,.5) 48%,transparent 88%);
    mask-image:radial-gradient(ellipse 120% 70% at 46% 16%,#000 0%,rgba(0,0,0,.5) 48%,transparent 88%);
  }
  .rb-hero-streaks{display:none}
}

/* ═══ 2. Dot Grid — ใช้ซ้ำกับ section "ทำไมต้องเรา" ═══ */
.rb-dots{position:relative; isolation:isolate}
.rb-dots > .rb-dots__layer{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:radial-gradient(circle,rgba(255,255,255,.055) 1px,transparent 1px);
  background-size:24px 24px;
  -webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 40%,#000 0%,transparent 75%);
  mask-image:radial-gradient(ellipse 70% 60% at 50% 40%,#000 0%,transparent 75%);
}
body.light .rb-dots > .rb-dots__layer{
  background-image:radial-gradient(circle,rgba(227,24,55,.10) 1px,transparent 1px);
}
.rb-dots > *:not(.rb-dots__layer){position:relative; z-index:1}

/* ═══ 3. Shiny Text (Text Animations/Shiny Text) — แสงกวาดผ่าน ═══ */
.rb-shine{position:relative; overflow:hidden}
.rb-shine::after{
  content:""; position:absolute; inset:0; z-index:2;
  pointer-events:none;
  background:linear-gradient(104deg,
    transparent 38%,
    rgba(255,255,255,.42) 50%,
    transparent 62%);
  translate:-130% 0;
  animation:rb-shine 5.2s ease-in-out infinite;
}
@keyframes rb-shine{
  0%,62%{translate:-130% 0}
  100%  {translate:130% 0}
}
/* badge/tag เล็ก ๆ กวาดถี่กว่า และคมกว่านิดหน่อย */
.home-strip__tag.rb-shine::after{
  background:linear-gradient(104deg,transparent 35%,rgba(255,255,255,.55) 50%,transparent 65%);
  animation-duration:4.2s;
}

/* ═══ 4. Gradient Text (Text Animations/Gradient Text) ═══ */
.rb-gradient-text,
.hero h1 .red,
.hero h1 .text-red{
  background:linear-gradient(90deg,#ff8fa4 0%,#E31837 22%,#ff627d 45%,#E31837 70%,#ff8fa4 100%);
  background-size:280% 100%;
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
  animation:rb-gradient 9s linear infinite;
}
@keyframes rb-gradient{
  0%  {background-position:0% 50%}
  100%{background-position:280% 50%}
}

/* ═══ 5. Animated Content / Blur Text — reveal ตอนเลื่อนถึง ═══════
   ยิงครั้งเดียวแล้วจบ ไม่วนลูป
   ใช้ `translate` (ไม่ใช่ transform) → ไม่ทับ hover transform เดิมของการ์ด */
.rb-reveal{
  opacity:0; translate:0 24px;
  transition:opacity .72s var(--rb-ease), translate .72s var(--rb-ease);
  transition-delay:var(--rb-delay,0ms);
  will-change:opacity,translate;
}
.rb-reveal.rb-in{opacity:1; translate:0 0; will-change:auto}

/* fade อย่างเดียว — ใช้กับ section wrapper และของที่อยู่ในกล่อง overflow scroll
   (ถ้าเลื่อนตำแหน่งใน .home-strip__scroll / .cat-bar จะไปดัน scrollbar แนวตั้งโผล่) */
.rb-fade{
  opacity:0;
  transition:opacity .62s ease;
  transition-delay:var(--rb-delay,0ms);
}
.rb-fade.rb-in{opacity:1}

/* Hero ใช้แบบ blur-in — จางเข้าพร้อมคลายเบลอ ไม่ขยับตำแหน่ง */
.rb-blur-in{
  opacity:0; filter:blur(12px);
  transition:opacity .85s ease, filter .85s ease;
  transition-delay:var(--rb-delay,0ms);
}
.rb-blur-in.rb-in{opacity:1; filter:blur(0)}

/* ═══ 6. Spotlight Card (Components/Spotlight Card) — เฉพาะตอนชี้ ═══ */
.rb-spot{position:relative}
.rb-spot::before{
  content:""; position:absolute; inset:0; z-index:3;
  border-radius:inherit; pointer-events:none;
  background:radial-gradient(var(--rb-spot-size) circle at var(--rb-x,50%) var(--rb-y,0%),
             var(--rb-spot-color), transparent 68%);
  opacity:0; transition:opacity .38s ease;
}
.rb-spot.is-lit::before{opacity:1}
body.light .rb-spot{--rb-spot-color:rgba(227,24,55,.10)}

/* ขอบเรืองตามเมาส์ (Components/Border Glow) — บางมาก
   แยกเป็นคลาสของตัวเอง เพราะบางการ์ด (เช่น .home-kpi-card) ใช้ ::after ไปแล้ว */
.rb-edge::after{
  content:""; position:absolute; inset:0; z-index:4;
  border-radius:inherit; pointer-events:none;
  padding:1px;
  background:radial-gradient(180px circle at var(--rb-x,50%) var(--rb-y,0%),
             rgba(255,120,140,.55), transparent 60%);
  -webkit-mask:linear-gradient(#000,#000) content-box, linear-gradient(#000,#000);
  -webkit-mask-composite:xor;
  mask:linear-gradient(#000,#000) content-box, linear-gradient(#000,#000);
  mask-composite:exclude;
  opacity:0; transition:opacity .38s ease;
}
.rb-edge.is-lit::after{opacity:1}

/* ═══ 7. Star Border (Animations/Star Border) — ขอบวิ่งรอบปุ่ม ═══ */
.rb-star{position:relative; isolation:isolate; overflow:hidden; z-index:0}
.rb-star::before{
  content:""; position:absolute; left:50%; top:50%;
  width:210%; aspect-ratio:1; translate:-50% -50%;
  z-index:-2; pointer-events:none; opacity:.42;
  background:conic-gradient(from 0deg,
    transparent 0 70%,
    rgba(255,255,255,.35) 80%,
    #fff 88%,
    rgba(255,255,255,.35) 95%,
    transparent 100%);
  animation:rb-spin 4.6s linear infinite;
}
.rb-star::after{
  content:""; position:absolute; inset:1.5px;
  z-index:-1; pointer-events:none;
  border-radius:inherit;
  background-color:inherit;
}
@keyframes rb-spin{to{transform:rotate(360deg)}}

/* ═══ 8. Count Up (Text Animations/Count Up) — นับครั้งเดียว ═══ */
.rb-count{font-variant-numeric:tabular-nums; font-feature-settings:"tnum" 1}

/* ═══ 9. Glass Nav (Components/Glass Surface) — navbar ตอนสกรอลล์ ═══ */
.navbar{transition:background .3s ease, border-color .3s ease, box-shadow .3s ease}
.navbar.rb-scrolled{
  background:rgba(10,10,10,.68);
  -webkit-backdrop-filter:blur(22px) saturate(165%);
  backdrop-filter:blur(22px) saturate(165%);
  border-bottom-color:rgba(227,24,55,.16);
  box-shadow:0 10px 34px rgba(0,0,0,.42);
}
body.light .navbar.rb-scrolled{
  background:rgba(255,255,255,.72);
  box-shadow:0 10px 30px rgba(15,23,42,.10);
}

/* ═══ 10. Scroll Progress — แถบบางบนสุด (ขยับตามนิ้วเท่านั้น) ═══ */
.rb-progress{
  position:fixed; left:0; top:0; height:2px; z-index:9997;
  width:100%; transform-origin:0 50%; transform:scaleX(var(--rb-p,0));
  background:linear-gradient(90deg,#7a0b1e,var(--r,#E31837),var(--rl,#FF3D5A));
  box-shadow:0 0 12px rgba(227,24,55,.55);
  pointer-events:none;
}

/* ═══════════════ Guards ═══════════════ */

/* ปิดเอฟเฟกต์เมาส์บนอุปกรณ์สัมผัส (มือถือ/แท็บเล็ต) */
@media (hover:none),(pointer:coarse){
  .rb-spot::before,.rb-edge::after{display:none}
}

/* ปิดตอน admin เปิด Edit Mode (กันเผลอคลิกโดน overlay / เนื้อหาโดนซ่อน) */
body.pe-editing .rb-hero-fx,
body.pe-editing .rb-spot::before,
body.pe-editing .rb-edge::after,
body.pe-editing .rb-star::before{display:none}
body.pe-editing .rb-reveal,
body.pe-editing .rb-fade,
body.pe-editing .rb-blur-in{opacity:1 !important; translate:0 0 !important; filter:none !important}

/* เคารพ prefers-reduced-motion — ตัด motion ทั้งหมด */
@media (prefers-reduced-motion:reduce){
  .rb-shine::after,
  .rb-gradient-text,
  .hero h1 .red,
  .hero h1 .text-red,
  .rb-star::before{animation:none !important}
  .rb-shine::after{display:none}
  .rb-reveal,.rb-fade,.rb-blur-in{opacity:1 !important; translate:0 0 !important; filter:none !important; transition:none !important}
  .rb-progress{display:none}
}