/* About page: "Pick your deck" flip cards (work card + life card). */

.about-intro { text-align: center; padding: var(--space-8) 0 0; }
.about-intro h1 { font-size: clamp(3.25rem, 9vw, 7rem); letter-spacing: -0.045em; line-height: 0.92; }
.about-intro p { margin: var(--space-3) auto 0; color: var(--color-ink-2); font-size: var(--text-lg); }
.about-intro .eyebrow { font-size: var(--text-sm); margin-bottom: var(--space-3); }
.deck { display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(2rem, 6vw, 5rem); padding: var(--space-7) 0 var(--space-9); }

/* Flip mechanics + 3D tilt (assets/js/about-cards.js sets --rx/--ry and --mx/--my) */
.pcard { width: min(420px, 88vw); perspective: 1600px; }
.flip__card { display: block; width: 100%; cursor: pointer; border-radius: 26px; transform-style: preserve-3d; transform: rotateX(var(--ry, 0deg)) rotateY(var(--rx, 0deg)); transition: transform 250ms var(--ease); }
.flip__inner { position: relative; aspect-ratio: 63 / 88; transform-style: preserve-3d; transition: transform var(--dur-flip) var(--ease); }
.flip.is-flipped .flip__inner { transform: rotateY(180deg); }
.flip__face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.flip__face--back { transform: rotateY(180deg); }

/* Card faces: black work card (.pcard--work), white life card (.pcard--life) */
.pcard__face {
  display: flex; flex-direction: column; gap: 12px;
  padding: 14px; border-radius: 26px; overflow: hidden;
  background: #0B0B0C; color: #fff;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14), 0 40px 80px -50px rgba(0, 0, 0, 0.6);
}
.pcard__top { display: flex; justify-content: space-between; align-items: center; padding: 6px 8px 0; }
.pcard__name { font-family: var(--font-display); font-weight: 600; font-size: 1.375rem; letter-spacing: -0.03em; }
.pcard__lv { font-family: var(--font-display); font-size: 1.375rem; }
.pcard__lv small { font-family: var(--font-body); font-size: var(--text-card); color: var(--color-ink-3); margin-right: 3px; }
.pcard__art { position: relative; flex: 1 1 auto; min-height: 0; border-radius: 18px; overflow: hidden; background: #F5F5F7; }
.pcard__art img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.pcard__deck { position: absolute; left: 10px; top: 10px; padding: 0.35em 0.8em; border-radius: var(--radius-pill); background: #fff; color: var(--color-ink); font-size: var(--text-card); backdrop-filter: blur(6px); }
.pcard__panel { padding: 14px 16px; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 18px; background: rgba(255, 255, 255, 0.05); }
.pcard__panel h2 { font-size: 1.125rem; letter-spacing: -0.03em; margin-bottom: 4px; color: #fff; }
.pcard__panel p { font-size: var(--text-card); line-height: 1.45; color: rgba(255, 255, 255, 0.75); margin: 0 0 10px; max-width: none; }
.pcard__panel .pcard__special { display: flex; flex-direction: column; gap: 2px; margin: 0; color: #fff; font-weight: 600; }
.pcard__special span { font-size: var(--text-xs); font-weight: 500; color: var(--color-ink-3); }
.pcard__holo {
  position: absolute; inset: 0; z-index: 3; border-radius: inherit; pointer-events: none;
  opacity: 0; transition: opacity 300ms;
  background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, 0.22) 48%, transparent 66%);
  background-size: 250% 250%; background-position: var(--mx, 50%) var(--my, 50%); mix-blend-mode: screen;
}
.flip__card:hover .pcard__holo { opacity: 1; }

/* Card back: fine technical grid */
.pcard__back {
  background:
    linear-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px) 0 0 / 24px 24px,
    linear-gradient(90deg, rgba(255, 255, 255, 0.06) 1px, transparent 1px) 0 0 / 24px 24px,
    #0B0B0C;
}
.pcard__mark { font-family: var(--font-display); font-weight: 300; font-size: 1.5rem; letter-spacing: 0.3em; text-align: center; padding: 28px 0 12px; color: rgba(255, 255, 255, 0.92); }
.pcard__panel--back { flex: 1; min-height: 0; overflow: auto; background: var(--color-graphite-2); border-color: transparent; }
.pcard__stats { margin: 0; }
.pcard__stats div { padding: 8px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
.pcard__stats div:last-child { border-bottom: 0; }
.pcard__stats dt { font-size: var(--text-xs); font-weight: 500; color: var(--color-ink-3); }
.pcard__stats dd { margin: 2px 0 0; font-weight: 600; font-size: 0.9375rem; }
.pcard__stats a { color: #fff; }
.pcard__icons { display: flex; gap: 10px; margin: 8px 0 6px; }
.pcard__icons img { width: 36px; height: 36px; object-fit: contain; background: #fff; border-radius: 50%; padding: 5px; }
.pcard__hint { display: block; margin: var(--space-5) auto 0; padding: 0.25em 0.5em; background: none; border: 0; font: inherit; font-size: var(--text-xs); color: var(--color-ink-2); cursor: pointer; }
.pcard__hint:hover { color: var(--color-ink); }

/* Life card: white on both sides */
.pcard--life .pcard__face { background: #fff; color: var(--color-ink); box-shadow: inset 0 0 0 1px var(--color-line), 0 40px 80px -50px rgba(0, 0, 0, 0.35); }
.pcard--life .pcard__back {
  background:
    linear-gradient(rgba(0, 0, 0, 0.05) 1px, transparent 1px) 0 0 / 24px 24px,
    linear-gradient(90deg, rgba(0, 0, 0, 0.05) 1px, transparent 1px) 0 0 / 24px 24px,
    #fff;
}
.pcard--life .pcard__lv, .pcard--life .pcard__back .pcard__mark { color: var(--color-ink); }
.pcard--life .pcard__deck { background: var(--color-ink); color: #fff; }
.pcard--life .pcard__panel { background: #F2F2F4; border-color: transparent; }
.pcard--life .pcard__panel h2, .pcard--life .pcard__panel .pcard__special { color: var(--color-ink); }
.pcard--life .pcard__panel p { color: var(--color-ink-2); }
.pcard--life .pcard__stats div { border-bottom-color: var(--color-line); }
.pcard--life .pcard__stats dt, .pcard--life .pcard__lv small, .pcard--life .pcard__special span { color: var(--color-ink-2); }
.pcard--life .pcard__stats dd, .pcard--life .pcard__stats a { color: var(--color-ink); }
.pcard--life .pcard__icons img { box-shadow: 0 0 0 1px var(--color-line); }
.pcard--life .pcard__holo { mix-blend-mode: multiply; background-image: linear-gradient(115deg, transparent 30%, rgba(0, 0, 0, 0.06) 48%, transparent 66%); }

@media (prefers-reduced-motion: reduce) { .flip__inner, .flip__card { transition: none; } }
.about-intro .notfound__links { margin: var(--space-6) auto var(--space-9); }   /* 404 page */