/* ============================================================
   ชุดไฟนีออนจัดเต็ม — ธนาสินเงินไว
   ไฟล์แยกจาก style.css ถอดออกได้โดยไม่กระทบโครงเว็บ
   ทุกเอฟเฟกต์ใช้ transform/opacity เท่านั้น ไม่ทำให้หน้าเว็บขยับตำแหน่ง
   ============================================================ */
:root{
  --glow-sm:0 0 10px rgba(235,25,54,.50);
  --glow-md:0 0 24px rgba(235,25,54,.58);
  --glow-lg:0 0 52px rgba(235,25,54,.45);
  --neon:#FF2A48;
}

/* ====== 1. โซนสีเข้ม: เส้นวงจร + ไฟเรือง + ลำแสงกวาด ====== */
.s-services,.s-branches,.site-foot,.hero,.s-promo{position:relative;isolation:isolate;overflow:hidden}
.s-services > *,.s-branches > *,.site-foot > *,.s-promo > *{position:relative;z-index:2}

/* เส้นตารางเรืองแสงเคลื่อนช้าๆ */
.s-services::before,.s-branches::before,.site-foot::before{
  content:"";position:absolute;inset:-12% 0;z-index:0;pointer-events:none;
  background:
    radial-gradient(40% 44% at 10% 16%, rgba(235,25,54,.26), transparent 70%),
    radial-gradient(34% 40% at 90% 74%, rgba(235,25,54,.20), transparent 70%),
    repeating-linear-gradient(90deg, rgba(235,25,54,.07) 0 1px, transparent 1px 72px),
    repeating-linear-gradient(0deg, rgba(235,25,54,.055) 0 1px, transparent 1px 72px);
  animation:tn-drift 20s ease-in-out infinite alternate;
}
@keyframes tn-drift{
  0%{transform:translate3d(0,0,0) scale(1)}
  50%{transform:translate3d(2%,-2%,0) scale(1.05)}
  100%{transform:translate3d(-2%,2%,0) scale(1.02)}
}
/* ลำแสงกวาดเฉียงในโซนเข้ม */
.s-services::after,.s-branches::after{
  content:"";position:absolute;inset:-40% -10%;z-index:1;pointer-events:none;
  background:linear-gradient(104deg,transparent 42%,rgba(255,255,255,.055) 49%,rgba(255,60,88,.10) 51%,transparent 58%);
  background-size:300% 100%;animation:tn-beam 9s ease-in-out infinite;
}
@keyframes tn-beam{0%{background-position:170% 0}65%,100%{background-position:-70% 0}}

/* ====== 2. ประกายไฟลอยขึ้น ====== */
.tn-embers{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden}
.tn-embers i{position:absolute;bottom:-14px;width:4px;height:4px;border-radius:50%;
  background:var(--neon);box-shadow:0 0 10px var(--neon),0 0 20px rgba(235,25,54,.6);
  opacity:0;animation:tn-rise linear infinite}
@keyframes tn-rise{
  0%{transform:translate3d(0,0,0) scale(.6);opacity:0}
  12%{opacity:.95}
  75%{opacity:.7}
  100%{transform:translate3d(var(--dx,14px),calc(-1 * var(--h,340px)),0) scale(1.15);opacity:0}
}

/* ====== 3. แบนเนอร์: ซูม + ไฟกวาด + เส้นสแกน + ลำแสงพุ่ง ====== */
.hero-slide.is-on img{animation:tn-kenburns 20s ease-out both}
@keyframes tn-kenburns{0%{transform:scale(1.06)}100%{transform:scale(1)}}
.hero::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(100deg,transparent 38%,rgba(255,255,255,.05) 48%,rgba(235,25,54,.11) 52%,transparent 62%);
  background-size:260% 100%;animation:tn-sweep 7s ease-in-out infinite;
}
@keyframes tn-sweep{0%{background-position:160% 0}60%,100%{background-position:-60% 0}}
/* ลำแสงพุ่งจากขอบบน */
.hero::before{
  content:"";position:absolute;top:-30%;left:8%;width:46%;height:160%;z-index:1;pointer-events:none;
  background:linear-gradient(177deg,rgba(255,60,88,.17),transparent 62%);
  transform:rotate(9deg);filter:blur(22px);animation:tn-ray 6.5s ease-in-out infinite alternate}
@keyframes tn-ray{0%{opacity:.35;transform:rotate(9deg) translateX(-4%)}100%{opacity:.85;transform:rotate(12deg) translateX(5%)}}
.hero .wrap::before{
  content:"";position:absolute;left:0;right:0;height:1px;z-index:1;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(255,60,88,.8),transparent);
  box-shadow:0 0 12px rgba(235,25,54,.8);animation:tn-scan 5.5s linear infinite}
@keyframes tn-scan{0%{top:-5%;opacity:0}12%{opacity:1}88%{opacity:1}100%{top:105%;opacity:0}}

/* ป้ายเล็กบนแบนเนอร์ */
.eyebrow-pill{box-shadow:var(--glow-sm);border-color:rgba(235,25,54,.55)!important;position:relative;overflow:hidden}
.eyebrow-pill::after{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;
  background:var(--neon);margin-left:10px;box-shadow:0 0 10px var(--neon);animation:tn-blink 1.6s ease-in-out infinite}
@keyframes tn-blink{0%,100%{opacity:1}45%{opacity:.18}}

/* หัวเรื่องแบนเนอร์: เรืองแดง + ประกายวิ่งผ่าน */
.hero h1,.hero-sub,.hero-note{text-shadow:0 2px 14px rgba(0,0,0,.6)}
.hero h1 .accent{position:relative;text-shadow:0 0 30px rgba(235,25,54,.7),0 2px 12px rgba(0,0,0,.85);
  animation:tn-flicker 7s steps(1,end) infinite}
@keyframes tn-flicker{
  0%,92%,100%{opacity:1}
  93%{opacity:.55}94%{opacity:1}95.5%{opacity:.4}96.5%{opacity:1}
}
.hero-dots button[aria-selected="true"]{box-shadow:0 0 14px rgba(255,60,88,1)}

/* ====== 4. ปุ่ม: เงาเรือง + แสงวิ่ง + ขอบไฟเดินรอบ ====== */
.btn-red,.searchbar .go,.btn-line-head,.dock .l{box-shadow:var(--glow-sm);position:relative;overflow:hidden}
.btn-red::after,.btn-line-head::after,.searchbar .go::after{
  content:"";position:absolute;top:0;bottom:0;width:38%;left:-50%;pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.45),transparent);
  transform:skewX(-18deg);animation:tn-shine 4.5s ease-in-out infinite}
@keyframes tn-shine{0%,62%{left:-50%}100%{left:130%}}
@media (hover:hover) and (pointer:fine){
  .btn-red:hover,.btn-line-head:hover{box-shadow:var(--glow-md);transform:translateY(-2px)}
}

/* ====== 5. แถบตัวเลข: รางไฟ + วงแหวนกระเพื่อม ====== */
.stats{position:relative;overflow:hidden}
.stats::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(90deg,rgba(235,25,54,.06) 0 1px,transparent 1px 64px)}
.stats::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;
  background:linear-gradient(90deg,transparent,var(--neon),transparent);
  background-size:45% 100%;background-repeat:no-repeat;animation:tn-rail 4.5s linear infinite;
  box-shadow:0 0 14px rgba(235,25,54,.8)}
@keyframes tn-rail{0%{background-position:-60% 0}100%{background-position:160% 0}}
.stat b{text-shadow:0 0 26px rgba(235,25,54,.65);color:#fff;position:relative}
.stat b::after{content:"";position:absolute;left:50%;top:50%;width:68px;height:68px;margin:-34px 0 0 -34px;
  border-radius:50%;border:1.5px solid rgba(235,25,54,.55);animation:tn-ring 3s ease-out infinite;pointer-events:none}
@keyframes tn-ring{0%{transform:scale(.55);opacity:.9}100%{transform:scale(1.5);opacity:0}}

/* ====== 6. แถบคำวิ่ง ====== */
.tn-marquee{background:var(--ink);border-block:1px solid #2A2E36;overflow:hidden;padding:13px 0;position:relative}
.tn-marquee::before,.tn-marquee::after{content:"";position:absolute;top:0;bottom:0;width:90px;z-index:2;pointer-events:none}
.tn-marquee::before{left:0;background:linear-gradient(90deg,var(--ink),transparent)}
.tn-marquee::after{right:0;background:linear-gradient(270deg,var(--ink),transparent)}
.tn-track{display:flex;width:max-content;animation:tn-roll 24s linear infinite}
.tn-track span{display:inline-flex;align-items:center;gap:16px;padding:0 20px;white-space:nowrap;
  color:#EDEEF0;font-weight:600;font-size:16.5px;letter-spacing:.02em}
.tn-track span i{width:7px;height:7px;border-radius:50%;background:var(--neon);
  box-shadow:0 0 12px var(--neon);flex:none;animation:tn-blink 2s ease-in-out infinite}
@keyframes tn-roll{to{transform:translateX(-50%)}}

/* ====== 7. การ์ด: ขอบไฟเดินรอบ + ไฟตามเมาส์ ====== */
.svc-card,.branch,.bike-card,.post,.cust-card{position:relative;transition:transform .3s,box-shadow .3s,border-color .3s}
.svc-card::before,.branch::before{
  content:"";position:absolute;inset:-1px;border-radius:inherit;z-index:0;pointer-events:none;opacity:0;
  background:conic-gradient(from var(--a,0deg),transparent 0 72%,rgba(255,60,88,.95) 84%,transparent 92% 100%);
  transition:opacity .3s;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;padding:1.5px}
.svc-card > *,.branch > *{position:relative;z-index:1}
@property --a{syntax:'<angle>';initial-value:0deg;inherits:false}
@media (hover:hover) and (pointer:fine){
  .svc-card:hover::before,.branch:hover::before{opacity:1;animation:tn-spin 2.4s linear infinite}
  .svc-card:hover,.branch:hover{transform:translateY(-4px);box-shadow:var(--glow-md),0 18px 36px rgba(0,0,0,.45)}
  .bike-card:hover,.post:hover,.cust-card:hover{transform:translateY(-4px);
    box-shadow:0 14px 32px rgba(23,26,32,.18),0 0 0 1.5px rgba(235,25,54,.55),0 0 22px rgba(235,25,54,.3)}
  .bike-card:hover .bike-price b{text-shadow:0 0 20px rgba(235,25,54,.75)}
  /* ไฟตามเมาส์ */
  .bike-card::after,.post::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
    opacity:0;transition:opacity .25s;z-index:3;
    background:radial-gradient(180px circle at var(--mx,50%) var(--my,50%),rgba(235,25,54,.16),transparent 65%)}
  .bike-card:hover::after,.post:hover::after{opacity:1}
}
@keyframes tn-spin{to{--a:360deg}}

/* ====== 8. หัวข้อ: ประกายวิ่งผ่านตัวอักษร ====== */
.sec-title,.hero h1{background-image:linear-gradient(100deg,transparent 40%,rgba(255,255,255,.75) 50%,transparent 60%);
  background-size:280% 100%;background-repeat:no-repeat;background-position:180% 0;
  -webkit-background-clip:text;background-clip:text;animation:tn-textshine 6.5s ease-in-out infinite}
@keyframes tn-textshine{0%,55%{background-position:180% 0}100%{background-position:-80% 0}}
.sec-eyebrow,.svc-no{text-shadow:0 0 16px rgba(235,25,54,.65)}
.on-dark .sec-title::after{content:"";display:block;width:68px;height:3px;margin-top:16px;border-radius:2px;
  background:linear-gradient(90deg,var(--neon),rgba(235,25,54,0));box-shadow:0 0 16px rgba(235,25,54,.9);
  animation:tn-barwide 3.4s ease-in-out infinite alternate}
@keyframes tn-barwide{0%{width:44px;opacity:.75}100%{width:104px;opacity:1}}

/* ====== 9. ราคา + ป้าย ====== */
.bike-price b,.spec .price{text-shadow:0 0 16px rgba(235,25,54,.38)}
.badge{position:relative;overflow:hidden;box-shadow:0 0 12px rgba(235,25,54,.3)}
.badge::after{content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,transparent 42%,rgba(255,255,255,.85) 50%,transparent 58%);
  background-size:280% 100%;animation:tn-badge 4s ease-in-out infinite}
@keyframes tn-badge{0%,66%{background-position:170% 0}100%{background-position:-70% 0}}

/* ====== 10. คลิป / ปุ่มลอย / เมนู ====== */
.vcard{box-shadow:0 0 0 1px rgba(235,25,54,.3),0 0 28px rgba(235,25,54,.22)}
.vcard .play i{position:relative;box-shadow:0 0 22px rgba(255,255,255,.55)}
.vcard .play i::before{content:"";position:absolute;inset:-7px;border-radius:50%;
  border:2px solid rgba(255,60,88,.85);animation:tn-ring 2.2s ease-out infinite}
.dock .l{animation:tn-breathe 2.6s ease-in-out infinite}
@keyframes tn-breathe{0%,100%{box-shadow:0 0 0 rgba(6,199,85,0)}50%{box-shadow:0 0 26px rgba(6,199,85,.7)}}
.dock .t{animation:tn-breathe-r 2.6s ease-in-out infinite .6s}
@keyframes tn-breathe-r{0%,100%{box-shadow:0 0 0 rgba(235,25,54,0)}50%{box-shadow:0 0 26px rgba(235,25,54,.6)}}
.nav a::after{box-shadow:0 0 12px rgba(255,60,88,.95)}
.site-head{box-shadow:0 1px 0 rgba(235,25,54,.35),0 6px 26px rgba(0,0,0,.5)}
.brand{box-shadow:0 0 18px rgba(235,25,54,.35)}

/* ====== 11. โปรโมชัน: ไฟเรืองหลังข้อความ ====== */
.s-promo::before{content:"";position:absolute;left:-6%;top:-20%;width:62%;height:140%;z-index:1;pointer-events:none;
  background:radial-gradient(50% 50% at 40% 50%,rgba(235,25,54,.26),transparent 72%);
  animation:tn-pulseglow 5.5s ease-in-out infinite alternate}
@keyframes tn-pulseglow{0%{opacity:.5;transform:scale(.95)}100%{opacity:1;transform:scale(1.08)}}

/* ====== ปิดทุกเอฟเฟกต์เมื่อผู้ใช้ตั้งค่าลดการเคลื่อนไหว ====== */
@media (prefers-reduced-motion:reduce){
  .s-services::before,.s-services::after,.s-branches::before,.s-branches::after,.site-foot::before,
  .hero::after,.hero::before,.hero .wrap::before,.stats::after,.tn-track,.badge::after,
  .vcard .play i::before,.dock .l,.dock .t,.eyebrow-pill::after,.stat b::after,.hero-slide.is-on img,
  .hero h1 .accent,.sec-title,.hero h1,.on-dark .sec-title::after,.s-promo::before,
  .tn-embers i,.btn-red::after,.btn-line-head::after,.searchbar .go::after{animation:none!important}
  .hero::after,.hero::before,.hero .wrap::before,.badge::after,.tn-embers,
  .btn-red::after,.btn-line-head::after,.searchbar .go::after{display:none!important}
  .sec-title,.hero h1{background-image:none}
}