/* ============================================================
   I DESIGN 4 U — portfolio.css
   Portfolio page-specific styles.
   Loaded AFTER style.css — does not break shared styles.
   ============================================================ */

/* ── 1. ANIMATED BACKGROUND CANVAS ─────────────────────────
   Fixed behind all content (z-index 0).
   Rotating radial gradient waves give a soft, living glow.   */
#bg-canvas {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.bg-wave {
  position: absolute;
  width: 200%; height: 200%;
  left: -50%; top: -50%;
  border-radius: 43%;
  animation: pf-waveSpin linear infinite;
}

/* ── CHANGED: opacity raised from .04/.025/.02 → .18/.13/.10
   Gradient spread widened so colour covers more screen area.
   Spin speed slightly faster for visible motion.              */
.bg-wave-1 {
  background: radial-gradient(ellipse 55% 55% at 50% 50%, #6c47ff 0%, rgba(108,71,255,.35) 35%, transparent 68%);
  animation-duration: 22s;
  opacity: .18;
}
.bg-wave-2 {
  background: radial-gradient(ellipse 50% 50% at 50% 50%, #ff4d8d 0%, rgba(255,77,141,.3) 35%, transparent 68%);
  animation-duration: 32s;
  animation-direction: reverse;
  opacity: .13;
}
.bg-wave-3 {
  background: radial-gradient(ellipse 60% 60% at 50% 50%, #00e5a0 0%, rgba(0,229,160,.25) 38%, transparent 72%);
  animation-duration: 44s;
  opacity: .10;
}
@keyframes pf-waveSpin {
  from { transform: rotate(0deg);   }
  to   { transform: rotate(360deg); }
}

/* ── CHANGED: grid lines raised from .05 → .11, added pulse   */
.bg-grid {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(108,71,255,.11) 1px, transparent 1px),
    linear-gradient(90deg, rgba(108,71,255,.11) 1px, transparent 1px);
  background-size: 64px 64px;
  animation: pf-gridDrift 22s linear infinite;
}
@keyframes pf-gridDrift {
  0%   { background-position: 0 0;       }
  100% { background-position: 64px 64px; }
}

/* ── 3. FLOATING ICONS CONTAINER ────────────────────────────
   Icons and particles are injected by portfolio.js           */
#float-icons {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
  will-change: transform;          /* for parallax */
}

/* ── CHANGED: base font-size raised, opacity driven by CSS var,
   text-shadow adds soft colour glow, easing changed to ease-in-out
   for a more natural drifting feel.                           */
.pf-float-icon {
  position: absolute;
  font-family: 'DM Sans', monospace;
  font-weight: 700;
  font-size: 1.1rem;                   /* was 1rem — slightly bigger */
  opacity: 0;                          /* real opacity set via --fi-o */
  animation: pf-floatBob ease-in-out infinite;
  user-select: none;
  pointer-events: none;
  will-change: transform, opacity;
  /* Soft glow — colour matches the text colour set inline by JS */
  text-shadow:
    0 0 12px currentColor,
    0 0 28px currentColor;
}

/* CHANGED: movement range increased (was 24px/32px → 30px/42px),
   rotation increased slightly, peak opacity multiplier bumped.
   Duration is now ease-in-out per icon (set via animation prop above). */
@keyframes pf-floatBob {
  0%   { transform: translateY(0)     rotate(0deg);   opacity: var(--fi-o, .22); }
  20%  { transform: translateY(-30px) rotate(6deg);   opacity: calc(var(--fi-o, .22) * 1.4); }
  50%  { transform: translateY(-14px) rotate(-5deg);  opacity: var(--fi-o, .22); }
  75%  { transform: translateY(-42px) rotate(5deg);   opacity: calc(var(--fi-o, .22) * .85); }
  100% { transform: translateY(0)     rotate(0deg);   opacity: var(--fi-o, .22); }
}

/* ── CHANGED: particles get box-shadow glow + opacity raised in animation */
.pf-particle {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  animation: pf-rise linear infinite;
  will-change: transform, opacity;
  /* Soft glow around each dot */
  box-shadow: 0 0 6px 2px currentColor;
}
@keyframes pf-rise {
  0%   { transform: translateY(100vh) translateX(0); opacity: 0;    }
  8%   { opacity: .85; }
  90%  { opacity: .7;  }
  100% { transform: translateY(-8vh) translateX(var(--drift, 20px)); opacity: 0; }
}

/* ── 4. PAGE HERO z-index ───────────────────────────────────
   Ensure hero text sits above bg layers                      */
.pf-hero { position: relative; z-index: 10; }

/* ── 5. PORTFOLIO SECTION WRAPPER ───────────────────────────*/
.pf-section {
  position: relative;
  z-index: 10;
  padding: 2rem 0 6rem;
}

/* ── 6. FILTER ROW ──────────────────────────────────────────*/
.pf-filter-row {
  display: flex;
  gap: .7rem;
  flex-wrap: wrap;
  justify-content: center;
  margin: 2.5rem 0 1rem;
}
.pf-filter {
  padding: .48rem 1.25rem;
  border-radius: 100px;
  background: transparent;
  border: 1.5px solid rgba(108,71,255,.25);
  color: var(--muted);
  font-size: .82rem;
  font-weight: 600;
  cursor: none;
  transition: all .25s;
  font-family: var(--font-body);
  backdrop-filter: blur(6px);
}
.pf-filter:hover,
.pf-filter.active {
  background: rgba(108,71,255,.13);
  border-color: var(--accent);
  color: var(--text);
  box-shadow: 0 0 16px rgba(108,71,255,.18);
}

.pf-count {
  font-size: .78rem;
  color: var(--muted);
  text-align: center;
  margin-bottom: 2rem;
  letter-spacing: .5px;
}

/* ── 7. PORTFOLIO GRID ──────────────────────────────────────
   Desktop 3-col → Tablet 2-col → Mobile 1-col              */
.pf-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}
@media (max-width: 1060px) { .pf-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px)  { .pf-grid { grid-template-columns: 1fr; gap: 2.5rem; } }

/* ── 8. PORTFOLIO CARD ──────────────────────────────────────
   Scroll-reveal start state: hidden + shifted down.
   JS adds .visible to trigger the entrance animation.        */
.pf-card {
  position: relative;
  border-radius: 20px;
  background: rgba(13,13,26,.78);
  border: 1px solid rgba(108,71,255,.18);
  overflow: hidden;
  cursor: none;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);

  /* Hidden by default — revealed on scroll */
  opacity: 0;
  transform: translateY(48px);
  transition:
    opacity     .65s ease,
    transform   .65s cubic-bezier(.2,.8,.3,1),
    box-shadow  .35s ease,
    border-color .35s ease;
  will-change: transform, opacity;
}

/* Reveal state (added by IntersectionObserver in portfolio.js) */
.pf-card.pf-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Hover glow + lift (JS handles 3-D tilt; these are fallback) */
.pf-card:hover {
  box-shadow:
    0 0 0 1.5px rgba(108,71,255,.5),
    0 22px 64px rgba(108,71,255,.22),
    0 0  100px rgba(108,71,255,.07);
  border-color: rgba(108,71,255,.48);
}

/* Cursor-follow radial spotlight (--mx / --my set by JS) */
.pf-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(
    circle at var(--mx, 50%) var(--my, 50%),
    rgba(108,71,255,.12),
    transparent 65%
  );
  opacity: 0;
  transition: opacity .3s;
  pointer-events: none;
  z-index: 2;
  border-radius: inherit;
}
.pf-card:hover::before { opacity: 1; }

/* Filtered-out state */
.pf-card.pf-out {
  opacity: .16 !important;
  transform: scale(.97) !important;
  pointer-events: none;
  transition: opacity .35s, transform .35s !important;
}

/* ── 9. MOCKUP STAGE ────────────────────────────────────────
   Top half of each card — contains laptop + phone mockups   */
.mk-stage {
  position: relative;
  width: 100%;
  height: 230px;
  overflow: hidden;
  border-radius: 18px 18px 0 0;
  background: #080812;
}

/* Gradient swatch behind mockups */
.mk-bg {
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

/* Dark gradient fade at bottom of stage */
.mk-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(7,7,15,.9) 0%, rgba(7,7,15,.15) 45%, transparent 80%);
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  transition: opacity .35s;
}
.pf-card:hover .mk-overlay { opacity: 1; }

/* ── 10. LAPTOP MOCKUP ──────────────────────────────────────*/
.mk-laptop {
  position: absolute;
  bottom: -4px;
  left: 50%;
  transform: translateX(-52%);
  width: 76%;
  max-width: 290px;
  z-index: 3;
  transition: transform .4s cubic-bezier(.2,.8,.3,1);
}
.pf-card:hover .mk-laptop { transform: translateX(-52%) translateY(-5px); }

.mkl-screen {
  position: relative;
  background: #181830;
  border-radius: 7px 7px 2px 2px;
  border: 2px solid #252545;
  padding: 5px 5px 3px;
  box-shadow: 0 4px 24px rgba(0,0,0,.65);
}
/* Camera */
.mkl-cam {
  width: 4px; height: 4px;
  border-radius: 50%;
  background: #252545;
  margin: 0 auto 3px;
}
/* Screen viewport */
.mkl-vp {
  width: 100%;
  aspect-ratio: 16/10;
  border-radius: 4px;
  overflow: hidden;
  background: #111;
  position: relative;
}
/* Scrolling inner content */
.mkl-scroll {
  position: absolute;
  top: 0; left: 0; right: 0;
  animation: pf-siteScroll 9s ease-in-out infinite alternate;
}
@keyframes pf-siteScroll {
  0%   { transform: translateY(0);    }
  100% { transform: translateY(-38%); }
}
.mkl-base {
  width: 100%; height: 6px;
  background: linear-gradient(to bottom, #202040, #181830);
  border: 1.5px solid #252545;
  border-top: none;
  border-radius: 0 0 3px 3px;
}
.mkl-foot {
  width: 92%; height: 4px;
  background: #121224;
  border-radius: 0 0 6px 6px;
  margin: 0 auto;
  box-shadow: 0 3px 12px rgba(0,0,0,.5);
}

/* ── 11. PHONE MOCKUP ───────────────────────────────────────*/
.mk-phone {
  position: absolute;
  bottom: 12px;
  right: 7%;
  width: 20%;
  max-width: 68px;
  z-index: 4;
  transition: transform .4s cubic-bezier(.2,.8,.3,1);
}
.pf-card:hover .mk-phone { transform: translateY(-7px) rotate(-2deg); }

.mkp-shell {
  background: #181830;
  border: 1.5px solid #252545;
  border-radius: 10px;
  padding: 4px 2px 4px;
  box-shadow: 0 6px 26px rgba(0,0,0,.7);
}
/* Notch */
.mkp-notch {
  width: 26px; height: 4px;
  background: #252545;
  border-radius: 3px;
  margin: 0 auto 3px;
}
/* Viewport */
.mkp-vp {
  width: 100%;
  aspect-ratio: 9/16;
  border-radius: 5px;
  overflow: hidden;
  background: #111;
  position: relative;
}
.mkp-scroll {
  position: absolute;
  top: 0; left: 0; right: 0;
  animation: pf-siteScroll 7s ease-in-out infinite alternate;
  animation-delay: -3s;
}
/* Home bar */
.mkp-bar {
  width: 22px; height: 3px;
  background: #252545;
  border-radius: 3px;
  margin: 3px auto 0;
}

/* ── 12. CARD BODY ──────────────────────────────────────────*/
.pf-body {
  padding: 1.2rem 1.4rem 1.5rem;
  position: relative;
  z-index: 5;
}

/* Category pill */
.pf-tag {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .22rem .7rem;
  border-radius: 100px;
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: .8rem;
  border: 1px solid;
}
/* Per-category colour tokens */
.pf-tag--web       { color:#6c47ff; border-color:rgba(108,71,255,.3); background:rgba(108,71,255,.1);  }
.pf-tag--branding  { color:#ff4d8d; border-color:rgba(255,77,141,.3); background:rgba(255,77,141,.1);  }
.pf-tag--uiux      { color:#00e5a0; border-color:rgba(0,229,160,.3);  background:rgba(0,229,160,.1);   }
.pf-tag--ecommerce { color:#f5a623; border-color:rgba(245,166,35,.3); background:rgba(245,166,35,.1);  }
.pf-tag--marketing { color:#38bdf8; border-color:rgba(56,189,248,.3); background:rgba(56,189,248,.1);  }

.pf-title {
  font-family: var(--font-head);
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--text);
  margin-bottom: .3rem;
  line-height: 1.25;
}
.pf-sub {
  font-size: .78rem;
  color: var(--muted);
  margin-bottom: 1rem;
  line-height: 1.5;
}

/* Bottom row */
.pf-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  flex-wrap: wrap;
}
.pf-stack { display: flex; gap: .35rem; flex-wrap: wrap; }
.pf-chip {
  font-size: .63rem;
  font-weight: 600;
  padding: .18rem .5rem;
  border-radius: 4px;
  background: rgba(108,71,255,.1);
  color: rgba(200,180,255,.85);
  border: 1px solid rgba(108,71,255,.15);
}

/* Visit / View button */
.pf-btn {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .42rem .95rem;
  border-radius: 100px;
  font-size: .75rem;
  font-weight: 700;
  color: #fff;
  text-decoration: none;
  cursor: none;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  box-shadow: 0 4px 14px rgba(108,71,255,.28);
  transition: opacity .2s, transform .2s, box-shadow .2s;
  white-space: nowrap;
  position: relative;
  z-index: 10;
}
.pf-btn:hover {
  opacity: .88;
  transform: translateY(-2px);
  box-shadow: 0 6px 22px rgba(108,71,255,.42);
}

/* ── 13. RESPONSIVE ADJUSTMENTS ─────────────────────────────*/
@media (max-width: 768px) {
  .mk-stage   { height: 195px; }
  .mk-laptop  { width: 80%; }
  .mk-phone   { width: 20%; }
}
@media (max-width: 480px) {
  .mk-stage   { height: 215px; }
  .mk-laptop  { width: 77%; }
  .mk-phone   { width: 21%; right: 4%; }
  .pf-footer  { flex-direction: column; align-items: flex-start; }
  .pf-btn     { width: 100%; justify-content: center; }
}

/* ── 14. STAGGER DELAY (set by JS via inline style) ─────────
   Adds a per-column entrance delay so cards cascade in       */