/* ==========================================================================
   Page Intro — Elegant overlay with per-page accent bg + cinematic images
   Accent bg → eyebrow + title reveal → images drift in → fade out
   ~2s total. JS creates the DOM, this file just styles it.
   ========================================================================== */

.page-intro {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: var(--pi-bg, var(--color-noir, #1A1118));
  display: flex;
  align-items: center;
  justify-content: center;
  will-change: opacity;
  overflow: hidden;
}

/* Per-page intro backgrounds — full-color aura, no dark/black
   Each uses its page accent as dominant + color-theory complements */

/* Modeling — warm gold center, peach + soft mint edges (complementary) */
.page-model .page-intro  {
  background:
    radial-gradient(ellipse 45% 45% at 50% 48%, #F5D060 0%, transparent 65%),
    radial-gradient(ellipse 60% 55% at 30% 35%, #E8B84D 0%, transparent 70%),
    radial-gradient(ellipse 50% 50% at 72% 60%, #F0C27A 0%, transparent 65%),
    radial-gradient(ellipse 55% 55% at 15% 70%, #C8E6C9 0%, transparent 65%),
    radial-gradient(ellipse 50% 50% at 85% 25%, #FFE0B2 0%, transparent 60%),
    radial-gradient(ellipse 70% 70% at 50% 50%, #FAEBD7 0%, #F5D89A 100%) !important;
}

/* UGC — dusty rose center, peach + soft lavender edges (analogous) */
.page-ugc .page-intro {
  background:
    radial-gradient(ellipse 45% 45% at 50% 48%, #F2A0B0 0%, transparent 65%),
    radial-gradient(ellipse 55% 55% at 28% 35%, #E888A0 0%, transparent 70%),
    radial-gradient(ellipse 50% 50% at 75% 55%, #F5C0CF 0%, transparent 65%),
    radial-gradient(ellipse 55% 55% at 80% 20%, #D4B0E0 0%, transparent 65%),
    radial-gradient(ellipse 50% 50% at 20% 75%, #FFD1A4 0%, transparent 60%),
    radial-gradient(ellipse 70% 70% at 50% 50%, #FDE4EC 0%, #F8C0D0 100%) !important;
}

/* Entertainment — soft mauve-purple center, coral + sky blue edges (triadic) */
.page-ent .page-intro {
  background:
    radial-gradient(ellipse 45% 45% at 48% 48%, #C4A0E0 0%, transparent 65%),
    radial-gradient(ellipse 55% 55% at 25% 40%, #B088D0 0%, transparent 70%),
    radial-gradient(ellipse 50% 50% at 75% 60%, #D8B8F0 0%, transparent 65%),
    radial-gradient(ellipse 50% 50% at 80% 20%, #F5A08A 0%, transparent 60%),
    radial-gradient(ellipse 55% 55% at 15% 75%, #A0D8E8 0%, transparent 65%),
    radial-gradient(ellipse 70% 70% at 50% 50%, #E8D5F5 0%, #D0B0E8 100%) !important;
}

.page-intro.out {
  opacity: 0;
  transition: opacity 300ms ease;
}

/* ── Cinematic Images ──────────────────────────────────────────────────── */
.page-intro-images {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.page-intro-img {
  position: absolute;
  width: clamp(120px, 18vw, 220px);
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: var(--radius-md, 0.75rem);
  opacity: 0;
  filter: brightness(0.6) saturate(0.8);
  will-change: opacity, transform;
  transition: opacity 500ms cubic-bezier(0.16, 1, 0.3, 1),
              transform 750ms cubic-bezier(0.16, 1, 0.3, 1);
}

.page-intro-img.in {
  opacity: 0.35;
}

/* Position variants — cinematic asymmetric layout */
.page-intro-img:nth-child(1) {
  top: 8%;
  left: 4%;
  transform: translateY(30px) rotate(-3deg);
}
.page-intro-img:nth-child(1).in {
  transform: translateY(0) rotate(-3deg);
}

.page-intro-img:nth-child(2) {
  bottom: 12%;
  right: 5%;
  transform: translateY(30px) rotate(2deg);
}
.page-intro-img:nth-child(2).in {
  transform: translateY(0) rotate(2deg);
}

.page-intro-img:nth-child(3) {
  top: 50%;
  right: 8%;
  transform: translateY(40px) translateX(10px) rotate(-1.5deg);
  margin-top: -100px;
}
.page-intro-img:nth-child(3).in {
  transform: translateY(0) translateX(0) rotate(-1.5deg);
}

.page-intro-img:nth-child(4) {
  bottom: 6%;
  left: 6%;
  transform: translateY(30px) rotate(3deg);
}
.page-intro-img:nth-child(4).in {
  transform: translateY(0) rotate(3deg);
}

/* Hide extra images on small screens */
@media (max-width: 768px) {
  .page-intro-img:nth-child(3),
  .page-intro-img:nth-child(4) {
    display: none;
  }
  .page-intro-img {
    width: clamp(80px, 22vw, 130px);
    opacity: 0;
  }
  .page-intro-img.in {
    opacity: 0.25;
  }
}

/* ── Content ────────────────────────────────────────────────────────────── */
.page-intro-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-4, 1rem);
  padding: 0 var(--space-6, 1.5rem);
}

/* ── Name (Asal Dabbaghchian) ───────────────────────────────────────────── */
.page-intro-name {
  font-family: var(--font-display, Georgia, serif);
  font-size: clamp(1.25rem, 3vw, 2rem);
  font-weight: 300;
  color: rgba(26, 17, 24, 0.55);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 200ms ease, transform 200ms ease;
}

.page-intro-name.in {
  opacity: 1;
  transform: translateY(0);
}

/* ── Title (page name — large italic) ──────────────────────────────────── */
.page-intro-title {
  font-family: var(--font-display, Georgia, serif);
  font-size: clamp(3.5rem, 12vw, 10rem);
  font-weight: 300;
  font-style: italic;
  color: var(--color-noir, #1A1118);
  letter-spacing: 0.08em;
  line-height: 1.15;
  clip-path: inset(100% 0 -10% 0);
  transition: clip-path 300ms cubic-bezier(0.16, 1, 0.3, 1);
}

.page-intro-title.in {
  clip-path: inset(0 0 -10% 0);
}

/* ── Accent Line ────────────────────────────────────────────────────────── */
.page-intro-line {
  width: 80px; /* fallback — JS sets actual width to match title */
  height: 2px;
  background: rgba(26, 17, 24, 0.35);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 250ms cubic-bezier(0.16, 1, 0.3, 1);
}

.page-intro-line.in {
  transform: scaleX(1);
}

/* ── Responsive ────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .page-intro-content {
    padding: 0 var(--space-6, 1.5rem);
  }
  .page-intro-name {
    font-size: 1.05rem;
    letter-spacing: 0.14em;
  }
  .page-intro-title {
    font-size: clamp(3.75rem, 15vw, 6rem);
  }
}

@media (max-width: 480px) {
  .page-intro-title {
    font-size: clamp(3rem, 13vw, 4.5rem);
    letter-spacing: 0.04em;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   CONTENT REVEAL (after overlay clears)
   Body gets .pi-active on load, .pi-revealed when overlay fades
   ══════════════════════════════════════════════════════════════════════════ */

/* Hide hero content during intro */
.pi-active .hero-content,
.pi-active .hero--page .hero-content {
  opacity: 0;
  transform: translateY(28px);
}

/* Reveal hero content after intro */
.pi-revealed .hero-content,
.pi-revealed .hero--page .hero-content {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 440ms var(--ease-out, ease) 100ms,
              transform 440ms var(--ease-out, ease) 100ms;
}

/* Nav slides in */
.pi-active .desktop-nav,
.pi-active header[role="banner"] {
  opacity: 0;
  transform: translateY(-100%);
}

.pi-active .mobile-nav,
.pi-active nav[aria-label="Mobile navigation"] {
  opacity: 0;
  transform: translateY(100%);
}

.pi-revealed .desktop-nav,
.pi-revealed header[role="banner"] {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 300ms ease 180ms, transform 300ms cubic-bezier(0.16, 1, 0.3, 1) 180ms;
}

.pi-revealed .mobile-nav,
.pi-revealed nav[aria-label="Mobile navigation"] {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 300ms ease 180ms, transform 300ms cubic-bezier(0.16, 1, 0.3, 1) 180ms;
}

/* ── Reduced Motion ─────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .page-intro,
  .page-intro-name,
  .page-intro-title,
  .page-intro-line {
    transition: none !important;
  }

  .pi-active .hero-content,
  .pi-active .desktop-nav,
  .pi-active header[role="banner"],
  .pi-active .mobile-nav,
  .pi-active nav[aria-label="Mobile navigation"] {
    opacity: 1 !important;
    transform: none !important;
  }
}