/* ════════════════════════════════════════════

   VK COLLECTION EXPLORE — ULTRA PREMIUM

   ════════════════════════════════════════════ */



.vk-exp{

  --lime:#AAFF00;--lime06:rgba(170,255,0,0.06);--lime08:rgba(170,255,0,0.08);

  --lime12:rgba(170,255,0,0.12);--lime15:rgba(170,255,0,0.15);--lime25:rgba(170,255,0,0.25);

  --bg:#000;--b1:#161616;--b2:#1a1a1a;

  --w02:rgba(255,255,255,0.02);--w03:rgba(255,255,255,0.03);--w04:rgba(255,255,255,0.04);

  --g1:#999;--g2:#777;--g3:#555;--g4:#444;--g5:#333;

  --r:12px;--ease:cubic-bezier(0.22,1,0.36,1);--easeBounce:cubic-bezier(0.25,0.46,0.45,0.94);

}



.vk-exp{

  position:relative;background:var(--bg);

  padding:64px 0 72px;overflow:hidden;

  font-family:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;

  -webkit-font-smoothing:antialiased;color:#fff;

}

.vk-exp *,.vk-exp *::before,.vk-exp *::after{box-sizing:border-box;}



/* ── Top separator ── */

.vk-exp__line{

  position:absolute;top:0;left:50%;transform:translateX(-50%);

  width:100%;max-width:1200px;height:1px;z-index:5;

  background:linear-gradient(90deg,transparent,var(--lime) 50%,transparent);

  opacity:0.3;

}



/* ── Ambient ── */

.vk-exp__bg{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none;}

.vk-exp__orb{

  position:absolute;border-radius:50%;filter:blur(110px);opacity:0;

}

.vk-exp__orb--1{

  width:500px;height:500px;bottom:-200px;right:-100px;

  background:radial-gradient(circle,rgba(170,255,0,0.07) 0%,transparent 70%);

  animation:vkEXorb 12s ease-in-out infinite;

}

.vk-exp__orb--2{

  width:350px;height:350px;top:-150px;left:20%;

  background:radial-gradient(circle,rgba(0,229,255,0.04) 0%,transparent 70%);

  animation:vkEXorb 14s ease-in-out infinite 4s;

}

@keyframes vkEXorb{0%,100%{opacity:0;transform:scale(.8)}50%{opacity:1;transform:scale(1.1)}}



.vk-exp__noise{

  position:absolute;inset:0;z-index:1;opacity:0.025;pointer-events:none;

  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");

  background-repeat:repeat;background-size:200px 200px;

}

.vk-exp__scan{

  position:absolute;top:0;left:-50%;width:45%;height:100%;z-index:2;pointer-events:none;

  background:linear-gradient(90deg,transparent,rgba(170,255,0,0.012),rgba(170,255,0,0.03),rgba(170,255,0,0.012),transparent);

  animation:vkEXscan 14s ease-in-out infinite;

}

@keyframes vkEXscan{0%{left:-50%;opacity:0}15%{opacity:1}85%{opacity:1}100%{left:110%;opacity:0}}



/* ── Inner ── */

.vk-exp__inner{

  max-width:1200px;margin:0 auto;padding:0 24px;

  position:relative;z-index:3;

}



/* ═══════════════════════════════════

   HEADER

   ═══════════════════════════════════ */

.vk-exp__label{

  display:inline-flex;align-items:center;gap:8px;

  font-size:10px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;

  color:var(--lime);margin-bottom:14px;

  padding:5px 14px 5px 11px;

  background:linear-gradient(145deg,var(--lime12),var(--lime08));

  border:1px solid var(--lime15);border-radius:100px;

  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);

  position:relative;overflow:hidden;

}

.vk-exp__label::after{

  content:'';position:absolute;top:0;left:-60%;width:60%;height:100%;

  background:linear-gradient(90deg,transparent,rgba(170,255,0,.1),transparent);

  animation:vkEXlshim 6s ease-in-out infinite;pointer-events:none;

}

@keyframes vkEXlshim{0%,100%{left:-60%}50%{left:100%}}



.vk-exp__label-dot{

  width:5px;height:5px;background:var(--lime);border-radius:50%;flex-shrink:0;

  box-shadow:0 0 6px rgba(170,255,0,.5);

  animation:vkEXdot 2s ease-in-out infinite;

}

@keyframes vkEXdot{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(.6)}}



.vk-exp__heading{

  font-family:'Bebas Neue','Impact',sans-serif;

  font-size:clamp(28px,4vw,42px);font-weight:400;

  letter-spacing:.02em;line-height:1.1;margin:0 0 36px;

  background:linear-gradient(135deg,#fff 0%,#e0e0e0 50%,var(--lime) 100%);

  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;

  position:relative;display:inline-block;

}

.vk-exp__heading::after{

  content:attr(data-text);position:absolute;inset:0;

  background:linear-gradient(105deg,transparent 30%,rgba(170,255,0,.15) 48%,rgba(255,255,255,.08) 52%,transparent 70%);

  background-size:300% 100%;

  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;

  animation:vkEXtshim 6s ease-in-out infinite;pointer-events:none;

}

@keyframes vkEXtshim{0%,100%{background-position:300% center}50%{background-position:-100% center}}



/* ═══════════════════════════════════

   GRID

   ═══════════════════════════════════ */

.vk-exp__grid{

  display:grid;grid-template-columns:repeat(4,1fr);gap:16px;

}



/* ═══════════════════════════════════

   CARD

   ═══════════════════════════════════ */

.vk-exp__card{

  background:linear-gradient(145deg,rgba(170,255,0,.02),var(--w02) 50%,rgba(170,255,0,.01));

  border:1px solid rgba(170,255,0,.07);

  border-radius:var(--r);overflow:hidden;

  text-decoration:none;color:#fff;

  display:flex;flex-direction:column;

  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);

  transition:all .4s var(--easeBounce);

  position:relative;

}



/* Top accent line */

.vk-exp__card::before{

  content:'';position:absolute;top:0;left:0;right:0;height:1px;z-index:3;

  background:linear-gradient(90deg,transparent,var(--lime25) 50%,transparent);

  opacity:0;transition:opacity .35s ease;

}



/* Shimmer sweep */

.vk-exp__card::after{

  content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;z-index:2;

  background:linear-gradient(90deg,transparent,rgba(170,255,0,.04),transparent);

  transition:left .7s ease;pointer-events:none;

}



.vk-exp__card:hover{

  transform:translateY(-4px);

  border-color:var(--lime25);

  box-shadow:0 0 24px rgba(170,255,0,.1),0 8px 32px rgba(0,0,0,.4),inset 0 1px 0 var(--w04);

}

.vk-exp__card:hover::before{opacity:1;}

.vk-exp__card:hover::after{left:100%;}



/* ── Card Image ── */

.vk-exp__img{

  position:relative;width:100%;padding-top:65%;overflow:hidden;

  background:var(--b1);

}

.vk-exp__img img{

  position:absolute;top:0;left:0;width:100%;height:100%;

  object-fit:cover;

  transition:transform .5s var(--ease),filter .5s ease;

  filter:brightness(0.9);

}

.vk-exp__card:hover .vk-exp__img img{

  transform:scale(1.08);filter:brightness(1);

}



/* Product count overlay badge */

.vk-exp__img-count{

  position:absolute;top:10px;right:10px;z-index:2;

  padding:4px 10px;border-radius:100px;

  background:rgba(0,0,0,.6);border:1px solid rgba(170,255,0,.15);

  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);

  font-size:9px;font-weight:700;color:var(--lime);

  letter-spacing:.06em;text-transform:uppercase;

}



/* Placeholder */

.vk-exp__img-ph{

  position:absolute;top:0;left:0;width:100%;height:100%;

  display:flex;align-items:center;justify-content:center;

  background:linear-gradient(135deg,#0a0a0a,var(--b1));

}

.vk-exp__img-ph svg{width:32px;height:32px;opacity:.15;stroke:var(--g3);}



/* ── Card Body ── */

.vk-exp__body{

  padding:16px 18px 18px;display:flex;flex-direction:column;gap:8px;flex:1;

}



.vk-exp__card-title{

  font-size:14px;font-weight:700;letter-spacing:.01em;

  line-height:1.3;color:#fff;margin:0;

  transition:color .25s ease;

  /* Truncate long names */

  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;

  overflow:hidden;text-overflow:ellipsis;

}

.vk-exp__card:hover .vk-exp__card-title{color:var(--lime);}



.vk-exp__meta{

  display:flex;align-items:center;justify-content:space-between;

  margin-top:auto;padding-top:8px;

}



.vk-exp__count{

  font-size:10px;font-weight:600;color:var(--g3);

  letter-spacing:.03em;

}



/* Arrow circle */

.vk-exp__arrow{

  width:30px;height:30px;border-radius:50%;flex-shrink:0;

  display:flex;align-items:center;justify-content:center;

  background:var(--w03);border:1px solid var(--b1);

  transition:all .35s var(--ease);

}

.vk-exp__card:hover .vk-exp__arrow{

  background:var(--lime);border-color:var(--lime);

  transform:translateX(3px);

  box-shadow:0 0 12px rgba(170,255,0,.2);

}

.vk-exp__arrow svg{

  width:12px;height:12px;stroke:var(--g3);fill:none;

  transition:stroke .25s ease;

}

.vk-exp__card:hover .vk-exp__arrow svg{stroke:#000;}



/* ═══════════════════════════════════

   REVEAL

   ═══════════════════════════════════ */

.vk-exp__rv{

  opacity:0;transform:translateY(16px);

  transition:opacity .7s var(--ease),transform .7s var(--ease);

}

.vk-exp__rv.is-vis{opacity:1;transform:translateY(0);}

.vk-exp__rv[data-d="1"]{transition-delay:.1s}

.vk-exp__rv[data-d="2"]{transition-delay:.2s}



/* Staggered card reveal */

.vk-exp__card{

  opacity:0;transform:translateY(20px);

  transition:opacity .6s var(--ease),transform .6s var(--ease),

    border-color .4s var(--easeBounce),box-shadow .4s var(--easeBounce);

}

.vk-exp__grid.is-vis .vk-exp__card{opacity:1;transform:translateY(0);}

.vk-exp__grid.is-vis .vk-exp__card:nth-child(1){transition-delay:.1s}

.vk-exp__grid.is-vis .vk-exp__card:nth-child(2){transition-delay:.18s}

.vk-exp__grid.is-vis .vk-exp__card:nth-child(3){transition-delay:.26s}

.vk-exp__grid.is-vis .vk-exp__card:nth-child(4){transition-delay:.34s}

.vk-exp__grid.is-vis .vk-exp__card:nth-child(5){transition-delay:.42s}

.vk-exp__grid.is-vis .vk-exp__card:nth-child(6){transition-delay:.50s}

.vk-exp__grid.is-vis .vk-exp__card:nth-child(7){transition-delay:.58s}

.vk-exp__grid.is-vis .vk-exp__card:nth-child(8){transition-delay:.66s}

/* Hover override — once visible, allow instant hover transforms */

.vk-exp__grid.is-vis .vk-exp__card:hover{

  transition:transform .4s var(--easeBounce),border-color .4s var(--easeBounce),box-shadow .4s var(--easeBounce);

}



/* ═══════════ TABLET — 1024 ═══════════ */

@media(max-width:1024px){

  .vk-exp__grid{grid-template-columns:repeat(3,1fr);}

}



/* ═══════════ MOBILE — 749 ═══════════ */

@media(max-width:749px){

  .vk-exp{padding:48px 0 56px;}

  .vk-exp__inner{padding:0 16px;}

  .vk-exp__heading{margin-bottom:24px;}



  .vk-exp__grid{

    display:flex;overflow-x:auto;

    scroll-snap-type:x mandatory;

    -webkit-overflow-scrolling:touch;

    gap:12px;padding-bottom:8px;padding-right:16px;

    scrollbar-width:none;-ms-overflow-style:none;

    /* Edge fade */

    mask-image:linear-gradient(to right,#000 0,#000 calc(100% - 32px),transparent 100%);

    -webkit-mask-image:linear-gradient(to right,#000 0,#000 calc(100% - 32px),transparent 100%);

  }

  .vk-exp__grid::-webkit-scrollbar{display:none;}



  .vk-exp__card{

    min-width:calc(52vw - 20px);max-width:220px;

    scroll-snap-align:start;flex-shrink:0;

  }

  /* No hover lift on touch */

  .vk-exp__card:hover{transform:none;box-shadow:none;}



  .vk-exp__body{padding:12px 14px 14px;gap:6px;}

  .vk-exp__card-title{font-size:13px;}

  .vk-exp__count{font-size:9px;}

  .vk-exp__arrow{width:26px;height:26px;}

  .vk-exp__arrow svg{width:10px;height:10px;}

  .vk-exp__img-count{font-size:8px;padding:3px 8px;top:8px;right:8px;}



  .vk-exp__orb--1{width:320px;height:320px;}

  .vk-exp__orb--2{width:240px;height:240px;}

}



/* ═══════════ SMALL — 480 ═══════════ */

@media(max-width:480px){

  .vk-exp{padding:40px 0 48px;}

  .vk-exp__inner{padding:0 14px;}

  .vk-exp__label{font-size:8px;padding:4px 10px 4px 8px;letter-spacing:.15em;}

  .vk-exp__heading{font-size:clamp(24px,5vw,32px);margin-bottom:20px;}

  .vk-exp__card{min-width:calc(55vw - 16px);max-width:200px;}

  .vk-exp__body{padding:10px 12px 12px;}

  .vk-exp__card-title{font-size:12px;}

  .vk-exp__count{font-size:8px;}

  .vk-exp__arrow{width:24px;height:24px;}

  .vk-exp__arrow svg{width:9px;height:9px;}

  .vk-exp__img-count{font-size:7.5px;padding:3px 7px;}

}



/* ═══════════ TINY — 360 ═══════════ */

@media(max-width:360px){

  .vk-exp__inner{padding:0 12px;}

  .vk-exp__heading{font-size:clamp(22px,6vw,28px);}

  .vk-exp__card{min-width:calc(58vw - 14px);max-width:180px;}

  .vk-exp__body{padding:8px 10px 10px;}

  .vk-exp__card-title{font-size:11px;}

}



/* ═══════════ REDUCED MOTION ═══════════ */

@media(prefers-reduced-motion:reduce){

  .vk-exp__orb,.vk-exp__scan,.vk-exp__label::after,

  .vk-exp__label-dot,.vk-exp__heading::after{animation:none!important;}

  .vk-exp__rv,.vk-exp__card{transition-duration:.01s!important;transition-delay:0s!important;}

}