/* ============================================================
   Aima Eman — Portfolio Page Styles
   ============================================================ */

/* ============ PAGE HERO ============ */
.page-hero {
  position: relative; z-index: 2;
  min-height: 100vh; display: flex; align-items: center;
  padding: 140px var(--pad) 80px;
  overflow: hidden;
}
.page-hero-content { max-width: 760px; position: relative; z-index: 3; }
.page-title {
  font-family: var(--f-display); font-weight: 600;
  font-size: clamp(3rem, 8vw, 6rem); line-height: 0.95; letter-spacing: -0.01em;
  margin-bottom: 22px;
}
.page-sub {
  font-size: clamp(1rem, 2.2vw, 1.25rem); color: var(--ink-soft);
  max-width: 600px; font-weight: 300; margin-bottom: 36px;
}

/* floating orbs */
.hero-orbs { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.hero-orb {
  position: absolute; border-radius: 50%; filter: blur(2px);
  animation: orbFloat 10s ease-in-out infinite;
}
.hero-orb--1 {
  width: 180px; height: 180px; top: 15%; right: 12%;
  background: radial-gradient(circle at 35% 35%, rgba(94,234,212,0.4), rgba(45,212,191,0.1) 60%, transparent);
  animation-duration: 9s;
}
.hero-orb--2 {
  width: 120px; height: 120px; top: 55%; right: 28%;
  background: radial-gradient(circle at 35% 35%, rgba(230,192,104,0.35), rgba(201,161,74,0.08) 60%, transparent);
  animation-duration: 12s; animation-delay: -2s;
}
.hero-orb--3 {
  width: 90px; height: 90px; top: 25%; right: 40%;
  background: radial-gradient(circle at 35% 35%, rgba(94,234,212,0.3), transparent 65%);
  animation-duration: 7s; animation-delay: -4s;
}
.hero-orb--4 {
  width: 60px; height: 60px; top: 70%; right: 8%;
  background: radial-gradient(circle at 35% 35%, rgba(230,192,104,0.3), transparent 65%);
  animation-duration: 11s; animation-delay: -1s;
}
@keyframes orbFloat {
  0%, 100% { transform: translateY(0) translateX(0) scale(1); }
  33%      { transform: translateY(-30px) translateX(15px) scale(1.08); }
  66%      { transform: translateY(20px) translateX(-10px) scale(0.95); }
}

/* rotating ring decoration */
.hero-ring-deco {
  position: absolute; top: 50%; right: 8%;
  transform: translateY(-50%);
  width: 320px; height: 320px; z-index: 1; pointer-events: none;
  animation: ringSpin 30s linear infinite;
}
.hero-ring-inner {
  position: absolute; inset: 0; border-radius: 50%;
  border: 1px solid var(--line-strong);
  background: radial-gradient(circle, transparent 55%, rgba(45,212,191,0.04) 70%, transparent);
}
.hero-ring-inner::before {
  content: ''; position: absolute; inset: 30px; border-radius: 50%;
  border: 1px dashed rgba(230,192,104,0.2);
}
.hero-ring-inner::after {
  content: ''; position: absolute; inset: 60px; border-radius: 50%;
  border: 1px solid rgba(45,212,191,0.12);
}
.hero-ring-dot {
  position: absolute; top: -5px; left: 50%; transform: translateX(-50%);
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--gold); box-shadow: 0 0 20px var(--gold);
}
@keyframes ringSpin { to { transform: translateY(-50%) rotate(360deg); } }

/* hero badges */
.hero-badges {
  display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 40px;
}
.hero-badge {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 20px; border-radius: 100px;
  background: var(--glass); border: 1px solid var(--line);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  font-size: 0.85rem; color: var(--ink-soft); font-weight: 400;
  transition: transform 0.3s var(--ease), border-color 0.3s, color 0.3s;
}
.hero-badge:hover { transform: translateY(-3px); border-color: var(--gold); color: var(--ink); }
.hero-badge-ico { color: var(--teal); font-size: 0.7rem; }

/* hero stats */
.page-hero .hero-stats {
  display: flex; gap: clamp(24px, 5vw, 56px); flex-wrap: wrap; margin-bottom: 40px;
}
.page-hero .hero-stat { display: flex; flex-direction: column; }
.page-hero .hero-stat .num {
  font-family: var(--f-display); font-size: clamp(2.2rem, 5vw, 3.2rem);
  font-weight: 600; color: var(--gold); line-height: 1;
}
.page-hero .hero-stat .lbl { font-size: 0.78rem; color: var(--ink-mute); margin-top: 6px; letter-spacing: 0.04em; }

/* featured highlight card */
.hero-highlight {
  display: flex; align-items: flex-start; gap: 18px;
  background: var(--glass); border: 1px solid var(--line);
  border-radius: 18px; padding: 24px 28px; margin-bottom: 36px;
  max-width: 580px;
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  transition: border-color 0.4s, transform 0.4s var(--ease);
}
.hero-highlight:hover { border-color: var(--line-strong); transform: translateY(-3px); }
.hero-highlight-ico {
  flex-shrink: 0; width: 48px; height: 48px; border-radius: 14px;
  display: grid; place-items: center; font-size: 1.4rem; color: var(--gold);
  background: linear-gradient(135deg, rgba(230,192,104,0.16), rgba(45,212,191,0.1));
  border: 1px solid rgba(230,192,104,0.25);
}
.hero-highlight-text h3 {
  font-family: var(--f-display); font-size: 1.25rem; font-weight: 600;
  margin-bottom: 6px; color: var(--ink);
}
.hero-highlight-text p { color: var(--ink-soft); font-size: 0.92rem; line-height: 1.6; }

/* hero CTA */
.page-hero .hero-cta { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 40px; }

/* responsive */
@media (max-width: 560px) {
  .page-hero .hero-cta { flex-direction: column; align-items: stretch; }
  .page-hero .hero-cta .btn { justify-content: center; }
  .hero-highlight { flex-direction: column; gap: 14px; }
}

/* scroll indicator (reuse from main site) */
.page-hero .hero-scroll {
  position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  color: var(--ink-mute); font-size: 0.72rem; letter-spacing: 0.2em; text-transform: uppercase;
}
.page-hero .hero-scroll span {
  width: 22px; height: 36px; border: 1px solid var(--line-strong); border-radius: 12px;
  position: relative;
}
.page-hero .hero-scroll span::after {
  content: ''; position: absolute; top: 7px; left: 50%; transform: translateX(-50%);
  width: 3px; height: 7px; border-radius: 2px; background: var(--teal);
  animation: scrolldot 1.8s var(--ease) infinite;
}
@keyframes scrolldot {
  0% { opacity: 0; transform: translate(-50%, 0); }
  30% { opacity: 1; }
  70% { opacity: 1; transform: translate(-50%, 12px); }
  100% { opacity: 0; transform: translate(-50%, 14px); }
}

/* responsive */
@media (max-width: 768px) {
  .hero-ring-deco { width: 220px; height: 220px; right: -40px; opacity: 0.5; }
  .hero-orb--1 { width: 120px; height: 120px; }
  .hero-orb--2 { width: 80px; height: 80px; }
  .hero-orb--3, .hero-orb--4 { display: none; }
}

/* ============ VIDEO GRID ============ */
.video-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 24px;
}
.video-empty {
  grid-column: 1 / -1;
  text-align: center; padding: 80px 20px;
  color: var(--ink-mute);
}
.video-empty-ico {
  width: 70px; height: 70px; border-radius: 50%; margin: 0 auto 20px;
  display: grid; place-items: center; font-size: 1.8rem; color: var(--teal-soft);
  background: rgba(45,212,191,0.1); border: 1px solid var(--line);
}
.video-empty-sub { font-size: 0.88rem; margin-top: 8px; }

.video-card {
  background: var(--glass); border: 1px solid var(--line);
  border-radius: var(--radius); overflow: hidden;
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  transition: transform 0.4s var(--ease), border-color 0.4s, box-shadow 0.4s;
  cursor: pointer; display: flex; flex-direction: column;
}
.video-card:hover {
  transform: translateY(-6px); border-color: var(--line-strong);
  box-shadow: var(--shadow-soft);
}
.video-thumb {
  position: relative; aspect-ratio: 16/9; overflow: hidden;
  background: var(--bg-2);
}
.video-thumb video {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.video-thumb::after {
  content: '▶'; position: absolute; inset: 0;
  display: grid; place-items: center;
  font-size: 2.2rem; color: #fff;
  background: rgba(6,20,27,0.35);
  transition: background 0.3s, transform 0.3s;
  pointer-events: none;
}
.video-card:hover .video-thumb::after {
  background: rgba(6,20,27,0.15);
  transform: scale(1.1);
}
.video-info { padding: 20px 22px; }
.video-info .video-initials {
  display: inline-block; font-family: var(--f-display);
  font-size: 1.3rem; font-weight: 600; color: var(--gold);
  margin-bottom: 6px;
}
.video-info .video-activity {
  font-size: 0.95rem; color: var(--ink); font-weight: 500;
  display: block; margin-bottom: 6px;
}
.video-info .video-desc {
  font-size: 0.86rem; color: var(--ink-mute); line-height: 1.5;
}
.video-info .video-date {
  font-size: 0.76rem; color: var(--ink-mute); margin-top: 10px;
  letter-spacing: 0.04em;
}

/* ============ LIGHTBOX ============ */
.lightbox {
  position: fixed; inset: 0; z-index: 500;
  display: none; place-items: center;
  padding: 40px 20px;
}
.lightbox.open { display: grid; }
.lightbox-backdrop {
  position: absolute; inset: 0;
  background: rgba(4,12,17,0.92);
  backdrop-filter: blur(8px);
  animation: fadeIn 0.3s ease;
}
.lightbox-content {
  position: relative; z-index: 2;
  max-width: 900px; width: 100%;
  animation: scaleIn 0.4s var(--ease);
}
.lightbox-content video {
  width: 100%; border-radius: 16px; border: 1px solid var(--line-strong);
  background: #000; max-height: 70vh;
}
.lightbox-close {
  position: absolute; top: -44px; right: 0;
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--glass-2); border: 1px solid var(--line-strong);
  color: var(--ink); font-size: 1rem;
  display: grid; place-items: center; transition: 0.3s;
}
.lightbox-close:hover { background: var(--teal); color: var(--bg-0); transform: rotate(90deg); }
.lightbox-info { margin-top: 20px; text-align: center; }
.lightbox-info h3 { font-family: var(--f-display); font-size: 1.5rem; font-weight: 600; margin-bottom: 6px; }
.lightbox-info h3 .gold { color: var(--gold); }
.lightbox-info p { color: var(--ink-soft); font-size: 0.95rem; }

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes scaleIn { from { opacity: 0; transform: scale(0.92); } to { opacity: 1; transform: scale(1); } }

/* ============ RESPONSIVE ============ */
@media (max-width: 640px) {
  .video-grid { grid-template-columns: 1fr; }
  .lightbox { padding: 20px 10px; }
  .lightbox-content video { max-height: 50vh; }
}