/* ══════════════════════════════════════════
   Portfolio Marquee Section
   Fonts needed : Syne (700,800) + Outfit (300,400,500)
   Scripts needed: GSAP 3 + ScrollTrigger
   ══════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Sora:wght@400;600;700;800&display=swap');

/* ── section shell ── */
.section-intro {
  position: relative;
  padding: 120px 0 120px;
  overflow: hidden;
  background: radial-gradient(circle at top, rgba(232, 147, 10, 0.14), transparent 16%), #f4f8fb;
}
.section-intro::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 20% 20%, rgba(255, 255, 255, 0.95), transparent 40%), linear-gradient(180deg, rgba(255,255,255,0.9), transparent 65%);
  pointer-events: none;
  z-index: 1;
}

.section-intro .intro-content {
  position: relative;
  z-index: 2;
  max-width: 1240px;
  margin: 0 auto;
  padding: 0;
}

/* ── section header ── */
.intro-content > h1 {
  font-family: 'Sora', sans-serif;
  font-size: clamp(2.2rem, 4vw, 4rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1.01;
  color: #1B4F72;
  text-align: center;
  margin-bottom: 18px;
  text-transform: uppercase;
}

.intro-content > p {
  font-family: 'Inter', sans-serif;
  line-height: 1.8;
  color: #475569;
  font-weight: 400;
  text-align: center;
  max-width: 680px;
  margin: 0 auto 56px;
  font-size: 1rem;
}

/* hide raw source cards — JS replaces them with marquee markup */
.section-intro .portfolio.card,
.section-intro .portfolio-card {
  display: none;
}

/* ── ambient glow blob ── */
.pf-glow {
  position: absolute;
  left: 50%; top: 52%;
  transform: translate(-50%, -50%);
  width: 68%; height: 54%;
  background: radial-gradient(
    ellipse,
    rgba(200, 66, 15, 0.08) 0%,
    rgba(26, 92, 158, 0.055) 50%,
    transparent 75%
  );
  filter: blur(72px);
  pointer-events: none;
  z-index: 0;
}

/* ── perspective viewport ── */
.pf-viewport {
  position: relative;
  overflow: hidden;
  perspective: 1100px;
}

/* ── slanted 3-D scene ── */
.pf-scene {
  transform: rotateX(9deg) rotateZ(-2.8deg);
  transform-style: preserve-3d;
  position: relative;
  z-index: 2;
  padding: 16px 0;
}

/* left/right/top/bottom vignette fade */
.pf-fade {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg,
      #f4f8fb 0%,   transparent 11%,
      transparent 89%,   #f4f8fb 100%),
    linear-gradient(180deg,
      #f4f8fb 0%,   transparent 15%,
      transparent 85%,   #f4f8fb 100%);
  pointer-events: none;
  z-index: 8;
}

/* ── marquee rows ── */
.pf-row {
  display: flex;
  gap: 24px;
  width: max-content;
  padding: 18px 0;
  will-change: transform;
}
.pf-row + .pf-row { margin-top: 24px; }

.pf-row.row-left  { animation: pfLeft  36s linear infinite; }
.pf-row.row-right { animation: pfRight 43s linear infinite; }
.pf-row:hover     { animation-play-state: paused; }

@keyframes pfLeft  { from { transform: translateX(0);    } to { transform: translateX(-50%); } }
@keyframes pfRight { from { transform: translateX(-50%); } to { transform: translateX(0);    } }

/* ══════════════════════════════════════════
   CARD  —  JS outputs class="pf-card-m"
   ══════════════════════════════════════════ */
.pf-card-m {
  flex-shrink: 0;
  width: 312px;
  background: rgba(255,255,255,0.94);
  border: 1px solid rgba(255,255,255,0.85);
  border-radius: 24px;
  overflow: hidden;
  position: relative;
  cursor: pointer;
  transform-style: preserve-3d;
  transform: translateZ(0);
  box-shadow:
    0 18px 40px rgba(16, 31, 60, 0.08),
    inset 0 1px 0 rgba(255,255,255,0.72);
  transition:
    transform  0.35s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.35s cubic-bezier(0.22, 1, 0.36, 1);
  transform-style: preserve-3d;
  perspective: 900px;
  perspective-origin: center center;
  backdrop-filter: blur(10px);
}

/* top light-catch highlight */
.pf-card-m::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.94), transparent);
  z-index: 5;
  pointer-events: none;
}

.pf-card-m:hover {
  transform: translateZ(40px) scale(1.035);
  box-shadow:
    0 12px 28px rgba(16, 31, 60, 0.14),
    0 26px 72px rgba(16, 31, 60, 0.12),
    inset 0 1px 0 rgba(255,255,255,0.8);
  z-index: 20;
}

/* ── thumbnail — JS outputs class="pf-thumb-m" ── */
.pf-thumb-m {
  height: 162px;
  position: relative;
  overflow: hidden;
  background: #ede8df;
}

/* real <img> inside thumb */
.pf-thumb-m img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.7s cubic-bezier(0.23, 1, 0.32, 1);
}
.pf-card-m:hover .pf-thumb-m img { transform: scale(1.09); }

/* hide broken images gracefully */
.pf-thumb-m img[src=""],
.pf-thumb-m img:not([src]) { display: none; }

/* fallback emoji placeholder */
.pf-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.9rem;
}

/* gradient tints */
.pf-g1 { background: linear-gradient(135deg, #fde8da, #f9c7ab); }
.pf-g2 { background: linear-gradient(135deg, #ddeeff, #b8d8f8); }
.pf-g3 { background: linear-gradient(135deg, #e2f5dd, #bfe5b8); }
.pf-g4 { background: linear-gradient(135deg, #ece0ff, #d4bcf5); }
.pf-g5 { background: linear-gradient(135deg, #fff5d6, #fce598); }
.pf-g6 { background: linear-gradient(135deg, #ffeef5, #f7c9e0); }
.pf-g7 { background: linear-gradient(135deg, #ffeedd, #ffd4aa); }
.pf-g8 { background: linear-gradient(135deg, #e0fff8, #a8edd9); }
.pf-g9 { background: linear-gradient(135deg, #e8e0ff, #c8b8f5); }

/* glossy sheen on thumb */
.pf-thumb-m::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(160deg, rgba(255,255,255,0.30) 0%, transparent 55%);
  pointer-events: none;
  z-index: 2;
}

/* type badge */

/* card number */


/* ── card body — JS outputs class="pf-body-m" ── */
.pf-body-m {
  padding: 20px 22px 22px;
}
.pf-body-m h3 {
  font-family: 'Sora', sans-serif; 
  font-size: 1.35rem;
  font-weight: 800;
  color: #11325f;
  line-height: 1.28;
  margin-bottom: 10px;
  transition: color 0.22s;
}
.pf-card-m:hover .pf-body-m h3 { color: #dd8b17; }

.pf-body-m p {
  font-family: 'Inter', sans-serif;   
  font-size: 0.92rem;
  line-height: 1.72;
  color: #475569;
  font-weight: 400;
  margin-bottom: 14px;
  min-height: 68px;
}

/* tags — JS outputs class="pf-tags-m" > "pf-tag-m ..." */
.pf-tags-m {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-top: 16px;
}
.pf-tag-m {
  font-family: 'Inter', sans-serif; 
  font-size: 0.66rem; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  padding: 6px 10px; border-radius: 999px; border: 1px solid;
}
.pf-tag-vr { background: #fff0ec; color: #b75c36; border-color: #f2c8bd; }
.pf-tag-ar { background: #eaf4ff; color: #2166a0; border-color: #bfd4ef; }
.pf-tag-i  { background: #f5f3ee; color: #68625a; border-color: #ddd7ce; }

/* ── CTA button — skeuomorphic raised key (light version) ── */
.pf-discover {
  display: block;
  margin: 56px auto 0;
  font-family: 'Inter', sans-serif; 
  font-size: 0.9rem;
  font-weight: 700;
  color: #164b70;
  padding: 14px 40px;
  border-radius: 10px;
  border: none;
  cursor: pointer;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  position: relative;
  z-index: 4;
  background: linear-gradient(145deg, #e8f2f8 0%, #d8eaf5 60%, #cce2f0 100%);
  transition: transform 0.16s ease, box-shadow 0.16s ease, color 0.16s ease;
  box-shadow:
    -1px -1px 0 rgba(255,255,255,0.9),
    inset 0 1px 0 rgba(255,255,255,0.7),
    3px 4px 0 rgba(27,79,114,0.22),
    4px 6px 12px rgba(27,79,114,0.15),
    0 0 0 1px rgba(27,79,114,0.1);
}

.pf-discover:hover {
  transform: translateY(-3px) translateX(-1px);
  color: #e8930a;
  box-shadow:
    -1px -1px 0 rgba(255,255,255,0.95),
    inset 0 1px 0 rgba(255,255,255,0.75),
    5px 6px 0 rgba(27,79,114,0.25),
    6px 9px 16px rgba(27,79,114,0.2),
    0 0 0 1px rgba(27,79,114,0.12),
    0 0 18px rgba(232,147,10,0.15);
}

.pf-discover:active {
  transform: translateY(2px) translateX(2px);
  box-shadow:
    inset 2px 2px 5px rgba(27,79,114,0.18),
    0 0 0 1px rgba(27,79,114,0.12);
  transition: transform 0.06s, box-shadow 0.06s;
}