Signature Award
/* ============== AWARDS SECTION โ ะพะฑัะธะน ะบะพะฝัะตะนะฝะตั ============== */
.wg-awards-section{
width:100%;
max-width:1200px;
margin:0 auto;
padding:30px 0;
display:flex;
flex-direction:column;
align-items:center;
gap:32px;
}/* ============== ะฆะะะขะ ะะะฌะะซะ FEATURED AWARD ============== */
.wg-featured-wrap{
display:flex;
justify-content:center;
align-items:center;
width:100%;
padding-top:14px; /* ะผะตััะพ ะดะปั ะฑะตะนะดะถะฐ */
position:relative;
}/* ============== ะะะะฃะฉะะฏ ะะะ ะฃะกะะะฌ ============== */
.wg-awards-wrap{
position:relative;
width:100%;
padding:30px 60px;
overflow:hidden;
-webkit-mask-image:linear-gradient(90deg, transparent 0, #000 10%, #000 90%, transparent 100%);
mask-image:linear-gradient(90deg, transparent 0, #000 10%, #000 90%, transparent 100%);
}.wg-awards-track{
display:flex;
align-items:center;
gap:32px;
width:max-content;
animation: wg-awards-scroll 30s linear infinite;
will-change: transform;
}.wg-awards-wrap:hover .wg-awards-track,
.wg-awards-track.is-paused{
animation-play-state: paused;
}.wg-award-slide{
flex: 0 0 auto;
display:flex;
align-items:center;
justify-content:center;
}/* ============== ะะะซะงะะะฏ ะะะ ะขะะงะะ ============== */
.wg-award-card{
position:relative;
width:160px;
height:160px;
display:flex;
align-items:center;
justify-content:center;
padding:16px;
background: #ffffff;
border-radius: 16px;
border: 1px solid rgba(0,0,0,0.06);
box-shadow:
0 4px 14px rgba(0,0,0,0.06),
0 1px 3px rgba(0,0,0,0.04);
transition:
transform .45s cubic-bezier(.2,.8,.2,1),
box-shadow .45s cubic-bezier(.2,.8,.2,1),
border-color .3s ease;
}.wg-award-card::before{
content:"";
position:absolute;
inset:0;
border-radius:inherit;
padding:1px;
background: linear-gradient(135deg, rgba(212,175,55,.0), rgba(212,175,55,.45), rgba(212,175,55,0));
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
opacity:0;
transition: opacity .45s ease;
pointer-events:none;
}.wg-award-card:hover{
transform: translateY(-6px) scale(1.04);
box-shadow:
0 18px 40px rgba(0,0,0,0.12),
0 6px 14px rgba(0,0,0,0.08);
}.wg-award-card:hover::before{ opacity:1; }.wg-award-card img{
max-width:100%;
max-height:100%;
width:auto;
height:auto;
object-fit:contain;
filter: grayscale(20%) saturate(.9);
transition: filter .45s ease, transform .45s ease;
-webkit-user-drag:none;
user-select:none;
}.wg-award-card:hover img{
filter: grayscale(0%) saturate(1.05);
}/* ============== FEATURED CARD โ Crystal Award ============== */
.wg-award-card--featured{
width:280px;
height:280px;
padding:26px;
background: linear-gradient(160deg, #fffdf5 0%, #ffffff 50%, #fff8e1 100%);
border: 1.5px solid rgba(212,175,55,0.5);
border-radius: 22px;
box-shadow:
0 0 0 5px rgba(212,175,55,0.08),
0 14px 36px rgba(212,175,55,0.2),
0 6px 12px rgba(0,0,0,0.06);
animation: wg-featured-glow 3.5s ease-in-out infinite;
}.wg-award-card--featured::before{
background: linear-gradient(135deg,
rgba(212,175,55,.7) 0%,
rgba(255,215,120,.4) 35%,
rgba(212,175,55,.7) 70%,
rgba(255,215,120,.5) 100%);
opacity: 1;
padding: 1.5px;
}/* ะะตะณััะธะน ะฑะปะธะบ ะฟะพ ะฟะพะฒะตัั
ะฝะพััะธ */
.wg-award-card--featured::after{
content:"";
position:absolute;
top:-2px; left:-2px; right:-2px; bottom:-2px;
border-radius: inherit;
background: linear-gradient(120deg,
transparent 30%,
rgba(255,235,180,0.35) 45%,
rgba(255,255,255,0.5) 50%,
rgba(255,235,180,0.35) 55%,
transparent 70%);
background-size: 250% 250%;
animation: wg-featured-shimmer 4s ease-in-out infinite;
pointer-events:none;
z-index:0;
}.wg-award-card--featured img{
filter: grayscale(0%) saturate(1) drop-shadow(0 8px 18px rgba(212,175,55,0.4));
position:relative;
z-index:1;
}.wg-award-card--featured:hover{
transform: translateY(-8px) scale(1.04);
box-shadow:
0 0 0 6px rgba(212,175,55,0.15),
0 28px 56px rgba(212,175,55,0.3),
0 10px 20px rgba(0,0,0,0.1);
}.wg-award-card--featured:hover img{
filter: grayscale(0%) saturate(1.1) drop-shadow(0 12px 26px rgba(212,175,55,0.55));
}/* ะะตะนะดะถ ยซSignature Awardยป */
.wg-award-badge{
position:absolute;
top:-14px;
left:50%;
transform: translateX(-50%);
background: linear-gradient(135deg, #c9961f 0%, #f0c552 50%, #c9961f 100%);
color:#fff;
font-size:11px;
font-weight:700;
letter-spacing:1.4px;
text-transform:uppercase;
padding:6px 14px;
border-radius:20px;
white-space:nowrap;
box-shadow:
0 5px 12px rgba(212,175,55,0.45),
inset 0 1px 0 rgba(255,255,255,0.4);
z-index:3;
font-family: inherit;
}@keyframes wg-featured-glow{
0%, 100% {
box-shadow:
0 0 0 5px rgba(212,175,55,0.08),
0 14px 36px rgba(212,175,55,0.2),
0 6px 12px rgba(0,0,0,0.06);
}
50% {
box-shadow:
0 0 0 7px rgba(212,175,55,0.14),
0 18px 42px rgba(212,175,55,0.3),
0 6px 12px rgba(0,0,0,0.06);
}
}@keyframes wg-featured-shimmer{
0% { background-position: 200% 200%; }
100% { background-position: -50% -50%; }
}/* ============== ะะฝะพะฟะบะธ ะฝะฐะฒะธะณะฐัะธะธ (ะฒัะตะณะดะฐ ะฒะธะดะฝั) ============== */
.wg-awards-nav{
position:absolute;
top:50%;
transform: translateY(-50%);
z-index:10;
width:46px;
height:46px;
border-radius:50%;
border:1px solid rgba(0,0,0,0.08);
background: rgba(255,255,255,0.98);
color:#1a1a1a;
cursor:pointer;
display:flex;
align-items:center;
justify-content:center;
box-shadow:
0 6px 20px rgba(0,0,0,0.12),
0 2px 4px rgba(0,0,0,0.06);
opacity:1;
transition: background .25s ease, color .25s ease, transform .25s ease, box-shadow .25s ease;
padding:0;
}
.wg-awards-nav svg{ width:20px; height:20px; }
.wg-awards-nav:hover{
background: linear-gradient(135deg, #d4af37 0%, #f0c552 100%);
color:#fff;
box-shadow:
0 8px 24px rgba(212,175,55,0.35),
0 3px 6px rgba(0,0,0,0.08);
}
.wg-awards-nav:active{ transform: translateY(-50%) scale(.94); }
.wg-awards-prev{ left:10px; }
.wg-awards-next{ right:10px; }@keyframes wg-awards-scroll{
0% { transform: translateX(0); }
100% { transform: translateX(-50%); }
}/* ============== ะะะะะขะะ ============== */
@media (max-width: 1024px){
.wg-awards-section{ gap:28px; }
.wg-awards-wrap{ padding:24px 55px; }
.wg-awards-track{ gap:24px; animation-duration: 28s; }
.wg-award-card{ width:140px; height:140px; padding:14px; }
.wg-award-card--featured{ width:240px; height:240px; padding:22px; }
}@media (max-width: 767px){
.wg-awards-section{ gap:22px; padding:24px 0; }
.wg-awards-wrap{ padding:20px 48px; }
.wg-awards-track{ gap:18px; animation-duration: 26s; }
.wg-award-card{
width:115px;
height:115px;
padding:12px;
border-radius:14px;
}
.wg-award-card--featured{
width:200px;
height:200px;
padding:18px;
border-radius:20px;
}
.wg-award-badge{
font-size:10px;
padding:5px 12px;
letter-spacing:1.2px;
top:-12px;
}
.wg-awards-nav{
width:38px;
height:38px;
}
.wg-awards-nav svg{ width:16px; height:16px; }
.wg-awards-prev{ left:6px; }
.wg-awards-next{ right:6px; }
.wg-awards-wrap{
-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
}
}@media (max-width: 480px){
.wg-awards-wrap{ padding:18px 42px; }
.wg-award-card{ width:100px; height:100px; padding:10px; }
.wg-award-card--featured{ width:170px; height:170px; padding:16px; }
.wg-awards-track{ gap:14px; animation-duration: 24s; }
.wg-awards-nav{ width:34px; height:34px; }
.wg-awards-nav svg{ width:14px; height:14px; }
.wg-award-badge{ font-size:9px; padding:4px 10px; }
}@media (prefers-reduced-motion: reduce){
.wg-awards-track{ animation: none; }
.wg-award-card--featured{ animation: none; }
.wg-award-card--featured::after{ animation: none; opacity:0; }
}(function(){
var track = document.getElementById('wgAwardsTrack');
if(!track) return;var wrap = track.closest('.wg-awards-wrap');
var prevBtn = wrap.querySelector('.wg-awards-prev');
var nextBtn = wrap.querySelector('.wg-awards-next');var pauseTimer;function getSlideWidth(){
var slide = track.querySelector('.wg-award-slide');
if(!slide) return 200;
var style = window.getComputedStyle(track);
var gap = parseInt(style.gap, 10) || 24;
return slide.offsetWidth + gap;
}function shift(direction){
track.classList.add('is-paused');
var slideWidth = getSlideWidth();var computed = window.getComputedStyle(track).transform;
var currentX = 0;
if(computed && computed !== 'none'){
var matrix = computed.match(/matrix.*\((.+)\)/);
if(matrix){
var values = matrix[1].split(', ');
currentX = parseFloat(values[4]) || 0;
}
}var manualOffset = currentX + (direction * -slideWidth);track.style.animation = 'none';
track.style.transition = 'transform .6s cubic-bezier(.2,.8,.2,1)';
track.style.transform = 'translateX(' + manualOffset + 'px)';clearTimeout(pauseTimer);
pauseTimer = setTimeout(function(){
track.style.transition = 'none';
track.style.transform = '';
void track.offsetWidth;
track.style.animation = '';
track.classList.remove('is-paused');
}, 4000);
}if(prevBtn) prevBtn.addEventListener('click', function(){ shift(-1); });
if(nextBtn) nextBtn.addEventListener('click', function(){ shift(1); });track.addEventListener('touchstart', function(){
track.classList.add('is-paused');
clearTimeout(pauseTimer);
pauseTimer = setTimeout(function(){
track.classList.remove('is-paused');
}, 2500);
}, {passive:true});var touchStartX = 0;
track.addEventListener('touchstart', function(e){
touchStartX = e.changedTouches[0].screenX;
}, {passive:true});
track.addEventListener('touchend', function(e){
var diff = touchStartX - e.changedTouches[0].screenX;
if(Math.abs(diff) > 50){
shift(diff > 0 ? 1 : -1);
}
}, {passive:true});
})();
