/* Pentamarket category UX V3: composited transitions, true grid entrance, no blank veil. */
html.penta-v3-category { background:#101012; }
html.penta-v3-no-scroll-smooth, html.penta-v3-no-scroll-smooth body {scroll-behavior:auto!important;}
html.penta-v3-category body { background:#101012; }
html.penta-v3-category #product-grid { position:relative; }
html.penta-v3-category main > div:not(#product-grid):not(.penta-v3-skeleton-grid) {animation:pentaV3Intro .65s cubic-bezier(.22,1,.36,1) both;}

/* The original V2 rules targeted main.penta-public-page (not used on /category).
   V3 targets the actual category header and product grid. */
html.penta-v3-category header > button {
  animation:pentaV3Intro .64s cubic-bezier(.22,1,.36,1) .02s both;
}
html.penta-v3-category header > .penta-list-anim {
  animation:pentaV3Intro .85s cubic-bezier(.22,1,.36,1) .10s both;
}
html.penta-v3-category #product-grid > .penta-list-anim {
  animation-name:pentaV3CardIn;
  animation-duration:.88s;
  animation-timing-function:cubic-bezier(.2,1,.32,1);
  animation-fill-mode:both;
  backface-visibility:hidden;
}
/* Keep GPU animation load capped. Cards beyond the first 15 sit below most screens. */
html.penta-v3-category #product-grid > .penta-list-anim:nth-child(n+16){
  animation:none;
  opacity:1;
  transform:none;
}
@keyframes pentaV3Intro {
  from {opacity:0;transform:translate3d(0,12px,0)}
  to   {opacity:1;transform:translate3d(0,0,0)}
}
@keyframes pentaV3CardIn {
  from {opacity:0;transform:translate3d(0,18px,0)}
  to   {opacity:1;transform:translate3d(0,0,0)}
}
/* Responsive placeholders: same aspect ratio and columns as the real cards. */
.penta-v3-skeleton-grid { width:100%; align-items:stretch; }
.penta-v3-skeleton-card {
  min-width:0;
  overflow:hidden;
  border-radius:15px;
  border:1px solid #272529;
  background:#1b1a1e;
  padding:8px;
  animation:pentaV3SkeletonIn .5s ease both;
}
.penta-v3-skeleton-media {aspect-ratio:1/1;border-radius:9px;background:#29262b;}
.penta-v3-skeleton-line {height:9px;background:#29262b;border-radius:5px;margin:12px auto 0;width:76%;}
.penta-v3-skeleton-line.is-short {width:52%;height:7px;margin-top:8px;}
.penta-v3-skeleton-button {margin-top:16px;border-radius:6px;height:26px;background:#29262b;}
.penta-v3-skeleton-media,.penta-v3-skeleton-line,.penta-v3-skeleton-button {
  animation:pentaV3SkeletonPulse 2.6s ease-in-out infinite;
}
@keyframes pentaV3SkeletonPulse { 0%,100%{opacity:.64} 50%{opacity:1} }
@keyframes pentaV3SkeletonIn { from{opacity:0} to{opacity:1} }
@media(min-width:640px){ .penta-v3-skeleton-card{padding:11px;border-radius:16px} .penta-v3-skeleton-button{height:30px} }
/* Fade real thumbnails in after image loading; no full-card pop-in. */
html.penta-v3-category #product-grid img.penta-v3-image {
  opacity:0;
  transition:opacity .52s ease;
}
html.penta-v3-category #product-grid img.penta-v3-image.penta-v3-image-ready {opacity:1;}

/* Crossfade uses browser page snapshots. Old content remains visible until new is ready. */
::view-transition-old(root) { animation:pentaV3Old .30s cubic-bezier(.4,0,.6,1) both; }
::view-transition-new(root) { animation:pentaV3New .48s cubic-bezier(.22,1,.36,1) both; }
@keyframes pentaV3Old {to{opacity:.13;transform:scale(.992)}}
@keyframes pentaV3New {from{opacity:.08;transform:translate3d(0,7px,0)}to{opacity:1;transform:translate3d(0,0,0)}}
@media(prefers-reduced-motion:reduce){
  html.penta-v3-category header > button,
  html.penta-v3-category header > .penta-list-anim,
  html.penta-v3-category #product-grid > .penta-list-anim,
  .penta-v3-skeleton-card,
  .penta-v3-skeleton-media,.penta-v3-skeleton-line,.penta-v3-skeleton-button {
    animation:none!important;opacity:1!important;transform:none!important;
  }
  html.penta-v3-category #product-grid img.penta-v3-image {transition:none!important;}
  ::view-transition-old(root),::view-transition-new(root){animation-duration:.01ms!important;}
}