/* ============================================================
   makeBIMI — Premium Animated Comparison Matrix
   feature/premium-matrix-ui branch
   Aesthetic: Magic UI / Aceternity / Linear.app
   Pure vanilla CSS — glassmorphism, border beam, keyframe animations
   ============================================================ */

/* ── SECTION WRAPPER ── */
.pm-section {
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
}

/* ── HEADLINE ── */
.pm-headline {
  text-align: center;
  margin-bottom: 40px;
}
.pm-headline h2 {
  font-size: clamp(1.375rem, 3vw, 1.625rem);
  font-weight: 600;
  letter-spacing: -0.022em;
  color: var(--text-primary);
  margin: 0 0 8px;
  line-height: 1.2;
}
.pm-headline p {
  font-size: 0.875rem;
  color: var(--text-muted);
  letter-spacing: -0.011em;
  margin: 0;
}

/* ── COLUMN HEADERS ── */
.pm-col-headers {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 10px;
  padding: 0 2px;
}
.pm-col-header {
  font-size: 0.6875rem;
  font-weight: 510;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: center;
}
.pm-col-header--before { color: rgba(247,248,248,0.25); }
.pm-col-header--after  { color: var(--accent); }

/* ── CARD GRID ── */
.pm-grid {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* ── COMPARISON CARD ── */
.pm-card {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border-radius: 12px;
  overflow: hidden;
  position: relative;
  /* Glassmorphism */
  background: rgba(14,14,18,0.6);
  backdrop-filter: blur(24px) saturate(160%);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  border: 1px solid rgba(255,255,255,0.07);
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.03),
    0 8px 32px rgba(0,0,0,0.4),
    0 2px 8px rgba(0,0,0,0.25);
  /* Entrance animation */
  animation: pmCardIn 400ms cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}
.pm-card:nth-child(1) { animation-delay: 80ms; }
.pm-card:nth-child(2) { animation-delay: 160ms; }
.pm-card:nth-child(3) { animation-delay: 240ms; }

@keyframes pmCardIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── BORDER BEAM ── */
/* A rotating gradient conic sweep along the card border */
.pm-card::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: 13px;
  background: conic-gradient(
    from var(--beam-angle, 0deg),
    transparent 0deg,
    rgba(113,112,255,0.6) 40deg,
    rgba(66,133,244,0.4) 80deg,
    transparent 120deg
  );
  z-index: 0;
  animation: beamRotate 4s linear infinite;
  opacity: 0;
  transition: opacity 400ms;
}
.pm-card:hover::before { opacity: 1; }

@keyframes beamRotate {
  from { --beam-angle: 0deg; }
  to   { --beam-angle: 360deg; }
}

/* Register the custom property for Houdini */
@property --beam-angle {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}

/* Inner mask to show only the border */
.pm-card::after {
  content: '';
  position: absolute;
  inset: 1px;
  border-radius: 11px;
  background: rgba(14,14,18,0.95);
  z-index: 1;
  pointer-events: none;
}

/* ── CARD CONTENT (above the pseudo-elements) ── */
.pm-card-inner {
  position: relative;
  z-index: 2;
  display: contents;
}

/* ── CLIENT LABEL STRIP ── */
.pm-client-strip {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 18px 6px;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(247,248,248,0.22);
  position: relative;
  z-index: 2;
}

/* ── EMAIL ROW ── */
.pm-row {
  display: flex;
  align-items: center;
  padding: 16px 18px;
  gap: 0;
  position: relative;
  z-index: 2;
  transition: background 120ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.pm-row:hover { background: rgba(255,255,255,0.02); }

/* Vertical divider */
.pm-row--before {
  border-right: 1px solid rgba(255,255,255,0.05);
}

/* ── BEFORE: desaturated, legible ── */
.pm-row--before {
  filter: saturate(0);
  opacity: 0.65;
}

/* ── AFTER: full vibrant color ── */
.pm-row--after { opacity: 1; }

/* ── AVATAR: fixed 40×40 ── */
.pm-avatar {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  font-size: 0.875rem;
  font-weight: 600;
  color: rgba(247,248,248,0.4);
}
.pm-avatar--circle  { border-radius: 50%; }
.pm-avatar--rounded { border-radius: 10px; }
.pm-avatar--gray    { background: #2a2a30; border: 1px solid rgba(255,255,255,0.06); }
.pm-avatar--logo    { background: transparent; border: none; }

/* ── BODY: flex-grow text column ── */
.pm-body {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  margin-left: 12px;
  min-width: 0;
  overflow: hidden;
}
.pm-body--apple {
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', sans-serif;
}

/* Sender */
.pm-sender {
  font-size: 0.8125rem;
  font-weight: 400;
  color: rgba(247,248,248,0.55);
  letter-spacing: -0.011em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 2px;
}
.pm-sender--verified { font-weight: 600; color: var(--text-primary); }

/* Subject */
.pm-subject {
  font-size: 0.75rem;
  color: rgba(247,248,248,0.32);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: -0.008em;
}
.pm-subject--verified { font-weight: 510; color: rgba(247,248,248,0.62); }

/* Time */
.pm-time {
  font-size: 11px;
  color: rgba(247,248,248,0.28);
  flex-shrink: 0;
  margin-left: 8px;
  white-space: nowrap;
}
.pm-time--yahoo { color: #6001D2; font-weight: 500; }

/* ── GMAIL CHECKMARK ── */
.pm-checkmark {
  flex-shrink: 0;
  animation:
    pmBadgeIn 400ms cubic-bezier(0.34, 1.56, 0.64, 1) 800ms both,
    pmBadgePulse 3s ease-in-out 1400ms infinite;
  filter: drop-shadow(0 0 5px rgba(66,133,244,0.6));
}

@keyframes pmBadgeIn {
  from { opacity: 0; transform: scale(0.4) rotate(-20deg); }
  to   { opacity: 1; transform: scale(1) rotate(0deg); }
}

@keyframes pmBadgePulse {
  0%, 100% { filter: drop-shadow(0 0 3px rgba(66,133,244,0.4)); transform: scale(1); }
  50%       { filter: drop-shadow(0 0 9px rgba(66,133,244,0.8)); transform: scale(1.1); }
}

/* ── iOS UNREAD DOT ── */
.pm-ios-dot {
  position: absolute;
  left: 5px;
  top: 50%;
  transform: translateY(-50%);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #007AFF;
  box-shadow: 0 0 8px rgba(0,122,255,0.6);
  flex-shrink: 0;
}

/* ── SUBTLE GRADIENT FADE at bottom of card ── */
.pm-card-fade {
  grid-column: 1 / -1;
  height: 1px;
  background: linear-gradient(90deg,
    transparent,
    rgba(113,112,255,0.15) 30%,
    rgba(66,133,244,0.1) 50%,
    rgba(113,112,255,0.15) 70%,
    transparent
  );
  position: relative;
  z-index: 2;
}

/* ── RESPONSIVE ── */
@media (max-width: 540px) {
  .pm-row { padding: 12px 12px; }
  .pm-avatar { width: 32px; height: 32px; }
  .pm-body { margin-left: 8px; }
  .pm-subject { display: none; }
  .pm-client-strip { padding: 6px 12px 4px; }
}

/* ── ENVIRONMENTAL DEPTH & CANVAS ANCHORING ─────────────────────────────────
   Radial spotlight glow + dot grid texture behind the matrix cards.
   ─────────────────────────────────────────────────────────────────────────── */

/* 1. Canvas wrapper — position:relative to host the pseudo-element */
.pm-section {
  position: relative;
}

/* 2. Radial spotlight glow — acts as environmental lighting behind the cards */
.pm-section::before {
  content: '';
  position: absolute;
  inset: -80px -120px;
  background: radial-gradient(
    circle at 50% 50%,
    rgba(255,255,255,0.045) 0%,
    rgba(113,112,255,0.025) 25%,
    transparent 60%
  );
  pointer-events: none;
  z-index: 0;
  border-radius: 50%;
}

/* 3. Dot grid texture — 1px dots at low opacity for depth */
.pm-section::after {
  content: '';
  position: absolute;
  inset: -40px -80px;
  background-image: radial-gradient(
    circle,
    rgba(255,255,255,0.03) 1px,
    transparent 1px
  );
  background-size: 28px 28px;
  pointer-events: none;
  z-index: 0;
}

/* 4. Ensure grid and cards sit above the pseudo-elements */
.pm-grid {
  position: relative;
  z-index: 1;
}
.pm-headline {
  position: relative;
  z-index: 1;
}
.pm-col-headers {
  position: relative;
  z-index: 1;
}

/* 5. Card opacity floor — cards block the glow, enhancing silhouette */
.pm-card {
  background: rgba(20, 20, 22, 0.72);
}

/* 6. Subtle inner glow on the card top edge (accent rim light) */
.pm-card {
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.05),
    0 1px 0 0 rgba(255,255,255,0.06) inset,
    0 8px 32px rgba(0,0,0,0.45),
    0 2px 8px rgba(0,0,0,0.3);
}