/*
 * Pro Portfolio Frame v2.0.0 - Frontend Styles
 * Dark glassmorphism, CSS-only hover scroll animation
 */

/* ── TOKENS ─────────────────────────────── */
:root {
  --ppf-bg:      #070B14;
  --ppf-surface: rgba(255,255,255,0.04);
  --ppf-border:  rgba(255,255,255,0.08);
  --ppf-accent:  #7c3aed;
  --ppf-overlay: rgba(7,11,20,0.80);
  --ppf-text:    #ffffff;
  --ppf-muted:   rgba(255,255,255,0.58);
  --ppf-btn:     #7c3aed;
  --ppf-speed:   4s;
  --ppf-delay:   0s;
  --ppf-height:  380px;
  --ppf-font:    'Poppins','Segoe UI',system-ui,sans-serif;
}

/* ── WRAPPER ─────────────────────────────── */
.ppf-wrapper {
  font-family: var(--ppf-font);
  background:  var(--ppf-bg);
  width: 100%;
  padding: 40px 0;
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
}

/* ── FILTER TABS ─────────────────────────── */
.ppf-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 32px;
  justify-content: center;
}
.ppf-ftab {
  font-family: var(--ppf-font);
  font-size: 13px;
  font-weight: 500;
  color: var(--ppf-muted);
  background: var(--ppf-surface);
  border: 1px solid var(--ppf-border);
  border-radius: 50px;
  padding: 8px 20px;
  cursor: pointer;
  transition: color .3s,background .3s,border-color .3s,box-shadow .3s;
  -webkit-appearance: none;
}
.ppf-ftab:hover,
.ppf-ftab.active {
  color: var(--ppf-text);
  background: rgba(124,58,237,0.18);
  border-color: rgba(124,58,237,0.55);
  box-shadow: 0 0 18px rgba(124,58,237,0.14);
}

/* ── GRID ────────────────────────────────── */
.ppf-grid {
  display: grid;
  width: 100%;
}

/* ── CARD ────────────────────────────────── */
.ppf-card {
  position: relative;
  overflow: hidden;
  background: var(--ppf-surface);
  border: 1px solid var(--ppf-border);
  box-shadow: 0 20px 60px rgba(0,0,0,.45);
  cursor: pointer;
  transition: transform .35s cubic-bezier(.4,0,.2,1),
              border-color .35s,
              box-shadow .35s;
}
.ppf-card:hover {
  transform: translateY(-4px);
  border-color: rgba(124,58,237,0.55);
  box-shadow: 0 28px 72px rgba(124,58,237,0.18),
              0 0 0 1px rgba(124,58,237,0.2);
}
.ppf-inner {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

/* ── BROWSER CHROME ──────────────────────── */
.ppf-chrome {
  position: absolute;
  top:0;left:0;right:0;
  height: 36px;
  background: rgba(18,22,36,0.97);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  display: flex;
  align-items: center;
  padding: 0 12px;
  gap: 10px;
  z-index: 4;
}
.ppf-dots { display:flex;gap:5px;flex-shrink:0; }
.ppf-dots span { width:10px;height:10px;border-radius:50%;display:block; }
.ppf-dots span:nth-child(1){background:#ff5f57;}
.ppf-dots span:nth-child(2){background:#febc2e;}
.ppf-dots span:nth-child(3){background:#28c840;}
.ppf-urlbar {
  flex:1;
  background:rgba(255,255,255,0.06);
  border-radius:4px;
  padding:3px 10px;
  font-size:11px;
  color:rgba(255,255,255,0.4);
  font-family:var(--ppf-font);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* ── SCREENSHOT FRAME ────────────────────── */
.ppf-frame {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.ppf-frame.has-chrome { top: 36px; }

/* ── THE ANIMATION ───────────────────────── */
.ppf-img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  object-position: top center;
  transform: translateY(0);
  transform-origin: top center;
  will-change: transform;
  transition: transform var(--ppf-speed) ease-in-out var(--ppf-delay);
}
/* Hover: JS sets --ppf-t per card with exact pixel offset */
.ppf-card:hover .ppf-img {
  transform: translateY(var(--ppf-t, -65%));
}
/* Reverse mode */
.ppf-card.ppf-reverse .ppf-img {
  transform: translateY(var(--ppf-t, -65%));
}
.ppf-card.ppf-reverse:hover .ppf-img {
  transform: translateY(0);
}
/* Auto-scroll */
@keyframes ppf-auto {
  0%  { transform: translateY(0); }
  45% { transform: translateY(var(--ppf-t,-65%)); }
  55% { transform: translateY(var(--ppf-t,-65%)); }
  100%{ transform: translateY(0); }
}
.ppf-card.ppf-auto .ppf-img {
  animation: ppf-auto calc(var(--ppf-speed) * 2.5) ease-in-out infinite;
  transition: none;
}
/* Zoom */
.ppf-zoom .ppf-card:hover .ppf-img {
  transform: scale(1.03) translateY(var(--ppf-t,-65%));
}

/* No screenshot */
.ppf-noshot {
  width:100%;height:100%;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,rgba(124,58,237,0.08),rgba(59,130,246,0.04));
  color:var(--ppf-muted);font-size:14px;font-family:var(--ppf-font);
}

/* ── OVERLAY ─────────────────────────────── */
.ppf-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  padding: 22px;
  opacity: 0;
  transition: opacity .35s cubic-bezier(.4,0,.2,1);
  z-index: 2;
  background: linear-gradient(to top,
    var(--ppf-overlay) 0%,
    rgba(7,11,20,0.3) 55%,
    transparent 100%);
}
.ppf-card:hover .ppf-overlay { opacity: 1; }

/* ── CARD META ───────────────────────────── */
.ppf-meta {
  width: 100%;
  transform: translateY(8px);
  transition: transform .35s cubic-bezier(.4,0,.2,1);
}
.ppf-card:hover .ppf-meta { transform: translateY(0); }

.ppf-title {
  font-family: var(--ppf-font);
  font-size: 16px;
  font-weight: 600;
  color: var(--ppf-text);
  margin: 0 0 6px;
  line-height: 1.3;
}
.ppf-desc {
  font-family: var(--ppf-font);
  font-size: 13px;
  line-height: 1.5;
  color: var(--ppf-muted);
  margin: 0 0 12px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ── BUTTON ──────────────────────────────── */
.ppf-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--ppf-font);
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  background: var(--ppf-btn);
  border-radius: 8px;
  padding: 8px 16px;
  text-decoration: none;
  transition: background .25s,transform .2s,box-shadow .25s;
  box-shadow: 0 4px 18px rgba(124,58,237,0.32);
}
.ppf-btn:hover {
  background: #6d28d9;
  transform: translateY(-1px);
  box-shadow: 0 8px 28px rgba(124,58,237,0.48);
  color: #fff;
  text-decoration: none;
}

/* ── FILTER HIDDEN ───────────────────────── */
.ppf-card.ppf-hidden { display: none; }

/* ── EMPTY ───────────────────────────────── */
.ppf-empty {
  text-align:center;color:var(--ppf-muted);
  font-family:var(--ppf-font);padding:48px 24px;
}

/* ── RESPONSIVE ──────────────────────────── */
@media (max-width:900px){
  .ppf-grid{ grid-template-columns:repeat(2,1fr) !important; }
}
@media (max-width:580px){
  .ppf-grid{ grid-template-columns:1fr !important; }
  .ppf-wrapper{ padding:24px 0; }
  .ppf-overlay{ opacity:1; }
  .ppf-meta{ transform:translateY(0); }
  .ppf-card:hover .ppf-img{ transform:translateY(0) !important; }
  .ppf-card.ppf-tapped .ppf-img{
    transform:translateY(var(--ppf-t,-65%)) !important;
    transition:transform var(--ppf-speed) ease-in-out !important;
  }
  .ppf-filters{ flex-wrap:nowrap;overflow-x:auto;justify-content:flex-start;padding-bottom:6px; }
  .ppf-ftab{ flex-shrink:0; }
}
@media (prefers-reduced-motion:reduce){
  .ppf-img,.ppf-card,.ppf-overlay,.ppf-meta,.ppf-btn{
    transition:none !important;animation:none !important;
  }
}

/* ── ELEMENTOR EDITOR ────────────────────── */
.elementor-editor-active .ppf-overlay{ opacity:.5; }
.elementor-editor-active .ppf-meta{ transform:translateY(0); }