/* ── Page Transitions ── */
@keyframes pageEnter {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes pageExit {
  from { opacity: 1; transform: translateY(0); }
  to   { opacity: 0; transform: translateY(-8px); }
}
body { animation: pageEnter 0.22s cubic-bezier(0.16, 1, 0.3, 1) both; }
body.page-exit { animation: pageExit 0.15s ease-in forwards !important; }

/* ── Progress Bar ── */
#page-progress {
  position: fixed; top: 0; left: 0; height: 2px; width: 0;
  background: linear-gradient(90deg, transparent, #666 20%, #fff 50%, #666 80%, transparent);
  z-index: 10000; pointer-events: none; opacity: 0;
  transition: width 0.32s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s;
}

/* ══════════════════════════════════════════
   MOBILE — SHARED PORTFOLIO PAGE STYLES
   Applies to: knovelo, rankwatch, rdash,
   elite60, logofolio, hands_on_3d, about
   ══════════════════════════════════════════ */

/* ── 768px tablet ── */
@media (max-width: 768px) {
  .div-block-378 { padding-top: 64px !important; padding-bottom: 80px !important; }

  #back-link { top: 20px !important; left: 20px !important; }
  #back-link svg { width: 40px !important; height: 40px !important; }

  .section-wrap { padding: 64px 0 !important; }
  .section-ghost-num { font-size: 100px !important; letter-spacing: -5px !important; margin-bottom: -20px !important; }
  .section-heading { font-size: 36px !important; letter-spacing: -1px !important; }
  .section-body { font-size: 15px !important; margin-bottom: 40px !important; }

  .stat-row { grid-template-columns: repeat(3, 1fr) !important; }
  .stat-num { font-size: 40px !important; letter-spacing: -2px !important; }

  .next-section { padding: 64px 0 0 !important; }
  .next-title { font-size: 64px !important; letter-spacing: -4px !important; }
  .portfolio-con { padding-left: 20px !important; padding-right: 20px !important; }
}

/* ── 480px phone ── */
@media (max-width: 480px) {
  .div-block-378 { padding-top: 48px !important; padding-bottom: 56px !important; }
  .portfolio-con { padding-left: 20px !important; padding-right: 20px !important; }

  #back-link { top: 16px !important; left: 16px !important; }
  #back-link svg { width: 34px !important; height: 34px !important; }

  /* section */
  .section-wrap { padding: 48px 0 !important; }
  .section-ghost-num { font-size: 72px !important; letter-spacing: -4px !important; margin-bottom: -12px !important; }
  .section-heading { font-size: 28px !important; letter-spacing: -0.5px !important; line-height: 1.1 !important; }
  .section-body { font-size: 14px !important; margin-bottom: 32px !important; }
  .section-num { font-size: 10px !important; }

  /* stats */
  .stat-row { grid-template-columns: 1fr 1fr !important; }
  .stat-block { padding: 20px 16px !important; }
  .stat-num { font-size: 32px !important; letter-spacing: -1px !important; }
  .stat-lbl { font-size: 9px !important; }

  /* universal grids → single column */
  .problem-grid,
  .insight-grid,
  .screens-grid,
  .outcome-row { grid-template-columns: 1fr !important; }

  /* cards */
  .problem-tile,
  .insight-card,
  .screen-card,
  .outcome-card { padding: 24px 20px !important; }

  /* decision cards */
  .decision-grid { grid-template-columns: 1fr !important; }
  .decision-card { padding: 32px 24px !important; min-height: auto !important; }
  .dc-title { font-size: 22px !important; }
  .dc-ghost { font-size: 120px !important; }
  .dc-metric { display: none !important; }

  /* ticker */
  .kn-roller-item,
  .rw-roller-item,
  .rdash-roller-item,
  .e60-roller-item,
  .lf-roller-item { font-size: 56px !important; letter-spacing: -3px !important; padding: 0 16px !important; }

  /* next section */
  .next-section { padding: 48px 0 0 !important; }
  .next-title { font-size: clamp(40px, 14vw, 64px) !important; letter-spacing: -3px !important; }
  .next-label { font-size: 9px !important; }

  /* feature / approach entries */
  .feature-entry,
  .approach-card { grid-template-columns: 1fr !important; gap: 8px !important; }

  /* screen visual images */
  .screen-visual { height: 160px !important; }
}

/* ── 375px small phone ── */
@media (max-width: 375px) {
  .section-heading { font-size: 24px !important; }
  .stat-num { font-size: 28px !important; }
  .next-title { font-size: 36px !important; }
}