/* ============================================================
   MANDARA BIOFUELS — Product "Trading Cards"
   Collectible-card treatment: framed art with an animated SVG
   motif, holographic sheen + pointer-driven 3D tilt on hover,
   type badge, tier pips, indicative specs and sustainability tags.
   Strict brand palette (navy / cream / mid-blue / white).
   ============================================================ */

.pcards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(232px, 1fr));
  gap: 20px;
  perspective: 1400px;
}

.pcard {
  --rx: 0deg; --ry: 0deg; --mx: 50%; --my: 18%; --o: 0;
  position: relative;
  border-radius: 12px;
  transform-style: preserve-3d;
  transform: rotateX(var(--rx)) rotateY(var(--ry));
  transition: transform .5s var(--ease);
  will-change: transform;
}
.pcard:hover { transition: transform .08s linear; }

.pcard__inner {
  position: relative;
  border-radius: 12px;
  background:
    linear-gradient(180deg, #fff 0%, #FBF8F4 100%);
  border: 1px solid var(--line);
  padding: 14px 14px 16px;
  overflow: hidden;
  box-shadow: 0 1px 0 rgba(255,255,255,.6) inset, 0 14px 30px -22px rgba(20,37,69,.5);
  transition: box-shadow .4s var(--ease), border-color .4s var(--ease);
  height: 100%;
  display: flex;
  flex-direction: column;
}
.pcard:hover .pcard__inner {
  border-color: rgba(87,133,196,.55);
  box-shadow: 0 26px 50px -26px rgba(20,37,69,.55), 0 0 0 1px rgba(87,133,196,.18);
}

/* metallic edge frame */
.pcard__inner::before {
  content: "";
  position: absolute; inset: 5px;
  border: 1px solid rgba(87,133,196,.22);
  border-radius: 8px;
  pointer-events: none;
  z-index: 4;
}

/* glare — follows pointer */
.pcard__glare {
  position: absolute; inset: 0; z-index: 5; pointer-events: none;
  border-radius: 12px;
  background: radial-gradient(circle at var(--mx) var(--my),
    rgba(255,255,255,.55), rgba(255,255,255,.12) 26%, transparent 52%);
  opacity: var(--o);
  transition: opacity .4s var(--ease);
  mix-blend-mode: soft-light;
}

/* holographic sheen — refined brand iridescence, not rainbow */
.pcard__holo {
  position: absolute; inset: 0; z-index: 3; pointer-events: none;
  border-radius: 12px;
  background:
    linear-gradient(115deg,
      transparent 28%,
      rgba(237,228,220,.55) 42%,
      rgba(127,168,224,.45) 48%,
      rgba(255,255,255,.55) 52%,
      rgba(87,133,196,.30) 58%,
      transparent 72%);
  background-size: 250% 250%;
  background-position: calc(var(--mx)) calc(var(--my));
  opacity: 0;
  transition: opacity .45s var(--ease);
  mix-blend-mode: color-dodge;
}
.pcard:hover .pcard__holo { opacity: .55; }

/* top bar */
.pcard__top { display: flex; align-items: center; gap: 8px; position: relative; z-index: 2; }
.pcard__abbr {
  font-family: var(--sans); font-weight: 800; font-size: 21px; letter-spacing: -.02em;
  color: var(--navy); line-height: 1; margin-right: auto;
}
.pcard__abbr sub { font-size: .62em; font-weight: 700; }
.pcard__type {
  font-family: var(--mono); font-size: 8.5px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--mid-blue); border: 1px solid rgba(87,133,196,.4); border-radius: 100px;
  padding: 4px 8px; white-space: nowrap;
}

/* tier pips */
.pcard__tier { display: flex; gap: 2px; position: relative; z-index: 2; margin-top: 9px; }
.pcard__tier i {
  width: 7px; height: 7px; transform: rotate(45deg);
  background: var(--line); border: 1px solid rgba(29,52,97,.18);
}
.pcard__tier i.on { background: var(--mid-blue); border-color: var(--mid-blue); }
.pcard:hover .pcard__tier i.on { box-shadow: 0 0 7px rgba(87,133,196,.7); }

/* art window */
.pcard__art {
  position: relative; z-index: 2; margin-top: 12px;
  aspect-ratio: 16 / 10;
  border-radius: 7px; overflow: hidden;
  background:
    radial-gradient(120% 120% at 30% 0%, rgba(87,133,196,.12), transparent 60%),
    linear-gradient(180deg, #F2EEE7 0%, #E9E2D8 100%);
  border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center;
}
.pcard__art::after { /* art-window inner sheen */
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(140deg, rgba(255,255,255,.5), transparent 42%);
  pointer-events: none;
}
.pcard__art svg { width: 70%; height: 70%; overflow: visible; display: block; }

/* grain dots in art window */
.pcard__art::before {
  content: ""; position: absolute; inset: 0; opacity: .5; pointer-events: none;
  background-image: radial-gradient(rgba(29,52,97,.07) 1px, transparent 1.4px);
  background-size: 9px 9px;
}

.pcard__full {
  font-family: var(--sans); font-weight: 700; font-size: 15px; color: var(--navy);
  letter-spacing: -.01em; margin: 13px 0 4px; position: relative; z-index: 2; line-height: 1.2;
}
.pcard__desc {
  font-size: 12px; line-height: 1.45; color: var(--ink-60); margin: 0 0 12px;
  position: relative; z-index: 2;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}

/* specs */
.pcard__specs { margin: 0 0 12px; padding: 0; position: relative; z-index: 2; border-top: 1px solid var(--line); }
.pcard__specs div { display: flex; justify-content: space-between; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--line); }
.pcard__specs dt { font-family: var(--mono); font-size: 9.5px; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-45); margin: 0; flex-shrink: 0; white-space: nowrap; }
.pcard__specs dd { font-family: var(--mono); font-size: 10.5px; color: var(--navy); margin: 0; font-weight: 500; text-align: right; white-space: nowrap; }

/* tags */
.pcard__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; position: relative; z-index: 2; }
.pcard__tags span {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .04em;
  color: var(--navy); background: rgba(87,133,196,.10);
  border: 1px solid rgba(87,133,196,.22); border-radius: 3px; padding: 4px 7px;
}

/* disclaimer */
.prod-disclaimer { font-family: var(--mono); font-size: 11px; color: var(--ink-45); letter-spacing: .02em; margin-top: clamp(36px,4vw,52px); }

/* ---------- Motif animations (play on hover) ---------- */
@media (prefers-reduced-motion: no-preference) {
  .pcard:hover .mo-bob   { animation: mo-bob 1.8s var(--ease) infinite; }
  .pcard:hover .mo-bob2  { animation: mo-bob 1.8s var(--ease) infinite .25s; }
  .pcard:hover .mo-bob3  { animation: mo-bob 1.8s var(--ease) infinite .5s; }
  .pcard:hover .mo-drip  { animation: mo-drip 1.8s ease-in infinite; }
  .pcard:hover .mo-spin  { animation: mo-spin 7s linear infinite; transform-box: fill-box; transform-origin: center; }
  .pcard:hover .mo-spin-r{ animation: mo-spin 9s linear infinite reverse; transform-box: fill-box; transform-origin: center; }
  .pcard:hover .mo-flick { animation: mo-flick 1.1s ease-in-out infinite; transform-box: fill-box; transform-origin: 50% 100%; }
  .pcard:hover .mo-ember { animation: mo-ember 1.6s ease-in infinite; }
  .pcard:hover .mo-fly   { animation: mo-fly 2.6s var(--ease) infinite; }
  .pcard:hover .mo-sway  { animation: mo-sway 2.4s ease-in-out infinite; transform-box: fill-box; transform-origin: 50% 100%; }
  .pcard:hover .mo-pulse { animation: mo-pulse 2s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
  .pcard:hover .mo-orbit { animation: mo-spin 4s linear infinite; transform-box: fill-box; transform-origin: center; }
  .pcard:hover .mo-orbit2{ animation: mo-spin 4s linear infinite reverse; transform-box: fill-box; transform-origin: center; }
  .pcard:hover .mo-dash  { stroke-dasharray: 4 5; animation: mo-dash 1s linear infinite; }
}
@keyframes mo-bob { 0%,100% { transform: translateY(0);} 50% { transform: translateY(-5px);} }
@keyframes mo-drip { 0%,55% { transform: translateY(0); opacity: 0;} 70% { opacity: 1;} 100% { transform: translateY(16px); opacity: 0;} }
@keyframes mo-spin { to { transform: rotate(360deg);} }
@keyframes mo-flick { 0%,100% { transform: scaleY(1) scaleX(1);} 50% { transform: scaleY(1.12) scaleX(.94);} }
@keyframes mo-ember { 0% { transform: translateY(0); opacity: 0;} 30% { opacity: 1;} 100% { transform: translateY(-16px); opacity: 0;} }
@keyframes mo-fly { 0% { transform: translate(-10px,4px);} 100% { transform: translate(12px,-4px);} }
@keyframes mo-sway { 0%,100% { transform: rotate(-7deg);} 50% { transform: rotate(7deg);} }
@keyframes mo-pulse { 0%,100% { transform: scale(1);} 50% { transform: scale(1.07);} }
@keyframes mo-dash { to { stroke-dashoffset: -18; } }

@media (max-width: 1080px) { .pcards { grid-template-columns: repeat(auto-fill, minmax(200px,1fr)); } }
@media (max-width: 520px) { .pcards { grid-template-columns: repeat(auto-fill, minmax(150px,1fr)); gap: 14px; } .pcard__inner { padding: 11px 11px 13px; } }