/* ==========================================================================
   MTD Performance - tilt-cards.css
   The product cards of the Nitro, Dudukan Plat and Stoplamp blocks on the
   home page, after the group's shop cards: the card tilts toward the cursor,
   the title steps back, the picture lifts and glows, and the price with
   "Tambah ke Keranjang" and "Lihat produk" rises from the bottom. Pointer
   devices only for the tilt and the pop-up; phones show the buttons in
   place. Transform and opacity only; reduced motion pins everything.
   ========================================================================== */

.tgrid{
  display:grid;gap:clamp(14px,1.6vw,22px);
  grid-template-columns:repeat(3,minmax(0,1fr));
  margin-top:clamp(28px,3.4vw,44px);
  perspective:1200px;
}
.tgrid--4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:1000px){.tgrid--4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:820px){.tgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:540px){.tgrid,.tgrid--4{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}}

.tcard{
  --rx:0deg;--ry:0deg;--gx:50%;--gy:40%;
  position:relative;
  display:flex;flex-direction:column;align-items:center;
  height:100%;
  padding:22px 16px 126px;
  border-radius:16px;
  background:linear-gradient(180deg,#151515 0%,#0B0B0B 100%);
  border:1px solid var(--line);
  overflow:hidden;
  transform:perspective(1100px) rotateX(var(--rx)) rotateY(var(--ry));
  transform-style:preserve-3d;
  transition:transform .32s var(--ease-out),border-color .3s var(--ease-out),box-shadow .4s var(--ease-out);
  will-change:transform;
}
/* entrance: the grid is a .stagger, whose rules outrank a bare .tcard. Restate
   the slide-in start and the live tilt above them, and keep the entrance
   fade as longhands so the stagger delays in site.css still apply. */
.stagger > .tcard{transform:translateY(20px)}
.stagger:not(.done) > .tcard{transition-property:opacity,transform;transition-duration:.78s;transition-timing-function:var(--ease-out)}
.stagger.in > .tcard{transform:perspective(1100px) rotateX(var(--rx)) rotateY(var(--ry))}
/* the red glow that follows the cursor across the card */
.tcard::before{
  content:"";position:absolute;inset:-20%;pointer-events:none;
  background:radial-gradient(38% 36% at var(--gx) var(--gy),rgba(233,32,42,.42) 0%,rgba(233,32,42,.12) 45%,rgba(233,32,42,0) 72%);
  opacity:0;transition:opacity .45s var(--ease-out);
}
.tcard-frame{
  position:absolute;inset:8px;border-radius:11px;pointer-events:none;
  border:1px dashed rgba(255,255,255,.22);
  transition:border-color .3s var(--ease-out);
}
.tcard-link{position:absolute;inset:0;z-index:1;border-radius:16px}
.tcard-link:focus-visible{outline:2px solid var(--accent);outline-offset:-4px}

.tcard-head{
  position:relative;z-index:2;pointer-events:none;
  text-align:center;
  transform-origin:50% 0;
  transition:transform .5s var(--ease-out),opacity .4s var(--ease-out);
}
.tcard-name{
  margin:0;
  font-family:var(--display);font-weight:800;font-style:italic;text-transform:uppercase;
  font-size:clamp(19px,1.6vw,25px);line-height:1;letter-spacing:.005em;
  color:var(--text-primary);
}
.tcard-tag{
  margin:8px 0 0;
  font-family:var(--mono);font-size:11px;letter-spacing:.06em;line-height:1.4;
  color:var(--accent-label);
  transition:opacity .3s var(--ease-out),transform .4s var(--ease-out);
}

.tcard-media{
  position:relative;z-index:2;pointer-events:none;
  width:min(100%,250px);aspect-ratio:1;
  margin-top:18px;
  border-radius:12px;overflow:hidden;
  background:#000;
  transform:translateY(0) scale(1);
  transition:transform .55s var(--ease-out),box-shadow .55s var(--ease-out);
  box-shadow:0 18px 34px -22px rgba(0,0,0,.9);
}
.tcard-media img{
  width:100%;height:100%;object-fit:cover;display:block;
  animation:tcard-float 6.5s ease-in-out infinite;
}
/* the sheen: a soft light on the picture where the cursor is */
.tcard-media::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(42% 42% at var(--gx) var(--gy),rgba(255,255,255,.30) 0%,rgba(255,255,255,.08) 40%,rgba(255,255,255,0) 70%);
  mix-blend-mode:screen;
  opacity:0;transition:opacity .4s var(--ease-out);
}
.tcard-ground{
  position:relative;z-index:1;pointer-events:none;
  width:60%;height:18px;margin-top:6px;
  border-radius:50%;
  background:radial-gradient(50% 50% at 50% 50%,rgba(0,0,0,.85) 0%,rgba(0,0,0,0) 70%);
  filter:blur(5px);
  transition:transform .55s var(--ease-out),opacity .4s var(--ease-out);
}
@keyframes tcard-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}

.tcard-actions{
  position:absolute;left:14px;right:14px;bottom:14px;z-index:3;
  display:grid;gap:8px;
  transform:translateY(22px);opacity:0;pointer-events:none;
  transition:transform .45s var(--ease-out) .05s,opacity .35s var(--ease-out) .05s;
}
.tcard-add,.tcard-detail{width:100%;min-height:44px;font-size:14px;padding:10px 14px}
.tcard-add{display:flex;align-items:center;justify-content:center;gap:10px;text-align:center}
.tcard-detail{display:flex;align-items:center;justify-content:center;gap:8px}
.tcard-detail svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* --- the live state: pointer over, keyboard focus within, or the attract
   preview the script runs once when the block scrolls into view --------- */
.tcard.is-live,
.tcard:focus-within{
  border-color:rgba(233,32,42,.55);
  box-shadow:0 40px 80px -36px rgba(233,32,42,.5),0 30px 60px -30px rgba(0,0,0,.9);
}
.tcard.is-live::before,.tcard:focus-within::before{opacity:1}
.tcard.is-live .tcard-frame,.tcard:focus-within .tcard-frame{border-color:rgba(233,32,42,.5)}
.tcard.is-live .tcard-head,.tcard:focus-within .tcard-head{transform:translateY(-6px) scale(.74);opacity:.82}
.tcard.is-live .tcard-tag,.tcard:focus-within .tcard-tag{opacity:0;transform:translateY(-6px)}
.tcard.is-live .tcard-media,.tcard:focus-within .tcard-media{
  transform:translateY(-22px) scale(1.1);
  box-shadow:0 34px 70px -26px rgba(233,32,42,.6),0 0 0 1px rgba(255,255,255,.1);
}
.tcard.is-live .tcard-media::after,.tcard:focus-within .tcard-media::after{opacity:1}
.tcard.is-live .tcard-ground,.tcard:focus-within .tcard-ground{transform:translateY(-16px) scaleX(1.15);opacity:.9}
.tcard.is-live .tcard-actions,.tcard:focus-within .tcard-actions{transform:none;opacity:1;pointer-events:auto}
/* the price line is the store's: the selling price in red with the crossed
   old price after it (.price-was from site.css). At rest it sits in the
   middle of the reserved band; when the buttons rise into the band it moves
   up and stays above them, so the button itself carries no price. */
.tcard-rest{
  position:absolute;left:16px;right:16px;bottom:52px;z-index:2;margin:0;
  text-align:center;font-size:15px;letter-spacing:.02em;
  color:var(--price);pointer-events:none;
  transition:transform .4s var(--ease-out);
}
.tcard-rest .price-was{font-size:.84em}
.tcard-now,.tcard-rest .price-was{white-space:nowrap}
/* narrow 4-up cards: the old price takes its own line rather than wrapping
   mid-number, and the picture lifts a little further on hover to stay
   clear of the two-line price */
@media (max-width:1180px){
  .tgrid--4 .tcard-rest{font-size:14px;line-height:1.3}
  .tgrid--4 .tcard-rest .price-was{display:block;margin-left:0}
  .tgrid--4 .tcard.is-live .tcard-media,.tgrid--4 .tcard:focus-within .tcard-media{transform:translateY(-30px) scale(1.06)}
}
.tcard.is-live .tcard-rest,.tcard:focus-within .tcard-rest{transform:translateY(-68px)}
/* the store's discount chip on the picture's corner */
.tcard-media .discount-chip{top:10px;left:10px;font-size:10.5px;padding:4px 7px}

/* --- phones and any touch screen: no tilt, the buttons sit in the card --- */
@media (max-width:720px),(pointer:coarse){
  .tcard{padding:14px 10px 12px}
  .stagger.in > .tcard,.tcard.is-live,.tcard:focus-within{transform:none}
  .tcard-name{font-size:clamp(15px,4.2vw,19px)}
  .tcard-tag{font-size:10.5px;margin-top:6px}
  .tcard-media{width:100%;margin-top:12px}
  .tcard-ground{display:none}
  .tcard-rest{position:static;margin-top:12px;font-size:14px;line-height:1.3;transform:none!important}
  .tcard-rest .price-was{display:block;margin-left:0}
  .tcard-actions{position:static;width:100%;margin-top:12px;transform:none;opacity:1;pointer-events:auto}
  .tcard-add,.tcard-detail{min-height:40px;font-size:12.5px;padding:8px 10px}
  .tcard.is-live .tcard-head,.tcard:focus-within .tcard-head{transform:none;opacity:1}
  .tcard.is-live .tcard-tag,.tcard:focus-within .tcard-tag{opacity:1;transform:none}
  .tcard.is-live .tcard-media,.tcard:focus-within .tcard-media{transform:none}
}
@media (prefers-reduced-motion:reduce){
  .tcard,.tcard-head,.tcard-media,.tcard-ground,.tcard-actions,.tcard-tag{transition:none!important;transform:none!important}
  .tcard-media img{animation:none}
  .tcard-rest{position:static;margin-top:12px}
  .tcard-actions{opacity:1;pointer-events:auto;position:static;margin-top:12px}
  .tcard{padding-bottom:16px}
}
body.pinned .tcard-media img{animation:none}