/* Vortex: Plugin detail pages (pd-*).
   A full-bleed key-art hero under the transparent nav, then what the plugin does beside a sticky
   buy panel, then the other plugins. Plugins without art get a shorter hero with a large icon. */
/* Live-only states: the live site renders these, no page in the static copy does.
   Keep them, and check them on _states.html (dev only) after any shared restyle:
   .pd-desc (planned: the plugin description) */

.pd-wrap { padding: 0; }

/* ===== HERO ===== */
.pd-hero {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: flex-end;
  min-height: clamp(480px, 74vh, 700px);
  padding: calc(var(--nav-h) + 48px) 0 56px;
}
.pd-hero-art {
  position: absolute;
  inset: 0;
  z-index: -1;
  aspect-ratio: auto;
  background: var(--bg-raised);
  border: 0;
  border-radius: 0;
  /* Fade the whole layer out at the bottom, so the page's own background (and its grain)
     continues underneath with no seam. */
  -webkit-mask-image: linear-gradient(to bottom, #000 78%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 78%, transparent 100%);
}
/* Plugin art is a 21:9 banner (2560x1080, see PORTING.md). On desktop the header takes that same
   shape, so the whole picture shows, never zoomed or cropped; phones show its middle. An even scrim
   keeps the centered title readable. --art-focus moves the crop on phones if a picture needs it. */
.pd-hero-art img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--art-crop, 100%);
  object-fit: cover;
  object-position: var(--art-focus, 50% 50%);
  filter: saturate(0.9) brightness(0.85);
}
@media (min-width: 901px) {
  /* Never shorter than its content needs (nav, back link, name, price, button): on narrower
     desktops the art covers a little more instead of the title sliding under the nav. */
  .pd-hero:not(:has(.no-art)) { width: 100%; min-height: 580px; aspect-ratio: 2560 / 1080; padding-bottom: 40px; }
}
.pd-hero-art::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 42% 48% at 50% 62%, rgba(11, 13, 18, 0.6), transparent 72%),
    linear-gradient(to top, rgba(11, 13, 18, 0.9) 0%, rgba(11, 13, 18, 0.55) 38%, rgba(11, 13, 18, 0.25) 70%, rgba(11, 13, 18, 0.5) 100%);
}
/* A moment after the page opens (owner's pick): the camera pushes slowly into the scene, and one
   lightning flash lights the sky while it does. It happens once, only on plugins with art, and not
   at all for visitors who prefer reduced motion. CSS only: the delays count from page load. */
@media all {
  .pd-hero-art:not(.no-art) img {
    transform-origin: 50% 42%;
    animation: pd-push 16s var(--ease-out) 1s both;
  }
  /* The flash: a cool light in the sky... */
  .pd-hero-art:not(.no-art)::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    opacity: 0;
    mix-blend-mode: screen;
    background: radial-gradient(ellipse 40% 55% at 58% 18%, rgba(205, 232, 255, 0.55), transparent 70%), rgba(150, 205, 255, 0.06);
    animation: pd-flash 560ms linear 3.2s;
  }
  /* ...while the scrim lifts, so the whole scene lights up for a moment. */
  .pd-hero-art:not(.no-art)::after { animation: pd-scrim-flash 700ms linear 3.2s; }
}
@keyframes pd-push { from { transform: none; } to { transform: scale(1.06); } }
@keyframes pd-flash { 0% { opacity: 0; } 8% { opacity: 1; } 18% { opacity: 0.15; } 32% { opacity: 0.8; } 60% { opacity: 0.08; } 100% { opacity: 0; } }
@keyframes pd-scrim-flash { 0%, 100% { opacity: 1; } 8% { opacity: 0.35; } 18% { opacity: 0.85; } 32% { opacity: 0.5; } 60% { opacity: 0.92; } }

/* No art: a shorter header, the dark environment and a large icon on the right, clear of the title. */
.pd-hero:has(.no-art) { min-height: 400px; }
.pd-hero-art .pc-placeholder {
  align-items: flex-end;
  padding-right: max(24px, 12%);
  background: radial-gradient(ellipse 45% 70% at 78% 45%, rgba(100, 200, 255, 0.14), transparent 70%), var(--bg-raised);
}
.pd-hero-art .pc-placeholder i { font-size: clamp(6rem, 14vw, 11rem); color: rgba(100, 200, 255, 0.32); }
.pd-hero-art .pc-placeholder span { display: none; }

/* The title block is centered over the art (owner's pick). */
.pd-hero-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 24px;
  text-align: center;
}
.pd-hero-copy { max-width: 780px; }
.pd-hero .pd-back { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 20px; font-size: 0.875rem; color: var(--text-2); }
.pd-back .bi-arrow-left { display: inline-block; transition: transform var(--dur-hover) var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .pd-back:hover .bi-arrow-left { transform: translateX(-3px); }
}
.pd-hero .pc-tags { justify-content: center; gap: 10px; margin-bottom: 10px; }
.pd-hero .pc-tag { padding: 0; background: none; border: 0; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.08em; color: var(--text-2); }
.pd-hero .pc-tag.is-badge { color: var(--gold); }
.pd-name {
  margin: 0;
  font-size: calc(clamp(3rem, 7vw, 5.5rem) * var(--display-scale));
  font-weight: 700;
  line-height: 0.95;
  letter-spacing: var(--display-tracking);
  color: var(--text);
  text-wrap: balance;
}
.pd-tagline { margin: 14px 0 0; font-size: 1.125rem; font-weight: 500; color: #C5CAD3; }
.pd-hero-meta { margin: 20px 0 0; font-size: 0.9375rem; color: var(--text-2); }
.pd-hero-meta strong {
  font-family: var(--font-display);
  font-size: calc(1.5rem * var(--display-scale));
  font-weight: 600;
  letter-spacing: var(--display-tracking);
  color: var(--gold);
}
/* The hero button is the outline one (owner's pick), readable over the art. */
.pd-hero-cta { min-width: 160px; background: rgba(11, 13, 18, 0.35); border-color: rgba(255, 255, 255, 0.4); }

/* ===== BODY ===== */
.pd-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(300px, 1fr);
  gap: 64px;
  align-items: start;
  max-width: 1180px;
  margin: 0 auto;
  padding: 24px 24px 0;
}
.pd-aside { position: sticky; top: calc(var(--nav-h) + 24px); display: flex; flex-direction: column; gap: 16px; }
@media (max-width: 900px) {
  .pd-grid { grid-template-columns: minmax(0, 1fr); gap: 48px; }
  .pd-aside { position: static; order: -1; }
}

.pd-section + .pd-section { margin-top: 56px; }
.pd-section h2, .pd-more h2 {
  margin: 0 0 8px;
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text);
}
.pd-desc { max-width: 68ch; margin: 0; font-size: 1rem; line-height: 1.75; color: #B9BFCA; }

.pd-features { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; margin: 0; padding: 0; list-style: none; }
.pd-features li { padding: 14px 0; border-top: 1px solid var(--line); line-height: 1.5; color: var(--text); }
@media (max-width: 640px) { .pd-features { grid-template-columns: minmax(0, 1fr); } }

/* Supported bosses, skills and activities: slim tags (owner's pick). Gold for bosses, dashed for
   what's coming soon. */
.pd-taggroup { margin-top: 20px; }
.pd-taglabel { margin: 0 0 10px; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-2); }
.pd-taglabel.gold { color: var(--gold); }
.pd-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.pd-chip {
  padding: 6px 11px;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-label);
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.3;
  color: var(--text);
}
.pd-chip.gold { background: rgba(242, 196, 107, 0.06); border-color: var(--gold-line); color: var(--gold); }
.pd-chip.soon { background: none; border-style: dashed; color: var(--text-2); }

.pd-facts { margin: 0; padding: 0 4px; font-size: 0.8125rem; line-height: 1.55; color: var(--text-2); }

/* ===== OTHER PLUGINS ===== */
.pd-more { max-width: 1180px; margin: 112px auto 0; padding: 0 24px; }
.pd-more-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.pd-more-head h2 { margin: 0; }
.pd-more-all { display: inline-flex; align-items: center; gap: 6px; font-size: 0.875rem; font-weight: 600; color: var(--text-2); }
/* Names only (owner's pick), set in the display face. They share the site's link hover. */
.pd-more-list { display: flex; flex-wrap: wrap; gap: 0 32px; padding-top: 12px; }
.pd-more-item {
  display: inline-block;
  padding: 10px 0;
  font-family: var(--font-display);
  font-size: calc(1.625rem * var(--display-scale));
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: var(--display-tracking);
  color: var(--text);
}

.pd-wrap > .pc-fine { margin-top: 64px; margin-bottom: 112px; }
.pd-wrap > .pd-more:last-child { margin-bottom: 112px; }

@media (max-width: 720px) {
  .pd-hero { min-height: clamp(440px, 78vh, 600px); padding-bottom: 40px; }
  .pd-hero:has(.no-art) { min-height: 360px; }
  .pd-hero-cta { width: 100%; }
  .pd-more { margin-top: 80px; }
}

/* Owner's pick: the push-in and the flash play even when the system asks for reduced motion, so they must
   beat vortex.css's global reduced-motion rule (which shortens every animation to 0.01ms). */
@media (prefers-reduced-motion: reduce) {
  .pd-hero-art:not(.no-art) img { animation-duration: 16s !important; }
  .pd-hero-art:not(.no-art)::before { animation-duration: 560ms !important; }
  .pd-hero-art:not(.no-art)::after { animation-duration: 700ms !important; }
}