/* ═══════════════════════════════════════════════════════════════
   Aditi Rao Hydari — Fan Tribute Site
   Main Stylesheet
   Aesthetic: Classical Elegance · Heritage Rose · Timeless Grace
   ═══════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500&family=Jost:wght@300;400;500;600&display=swap');

/* ── CSS Variables ── */
:root {
  --rose:        #c4a08a;
  --rose-light:  #ddc5b0;
  --rose-dark:   #a07860;
  --maroon:      #7a2335;
  --maroon-light:#9e3b50;
  --ivory:       #f5f0e8;
  --ivory-muted: #e8e0d0;
  --deep:        #0f0c0a;
  --deep-card:   #1c1612;
  --deep-light:  #18140f;
}

/* ── Reset & Base ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  background-color: var(--deep);
  background-image:
    radial-gradient(ellipse 80% 60% at 20% 10%, rgba(122,35,53,0.08) 0%, transparent 60%),
    radial-gradient(ellipse 60% 40% at 80% 80%, rgba(196,160,138,0.06) 0%, transparent 55%);
  color: #e0d5cc;
  font-family: 'Jost', sans-serif;
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
}

/* ── Typography ── */
h1, h2, h3, h4, h5, h6 {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 400;
  line-height: 1.15;
}

/* ── Navbar ── */
.navbar {
  background: rgba(15, 12, 10, 0.82);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(196, 160, 138, 0.1);
}

.nav-link {
  color: #9a8678;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-size: 0.68rem;
  font-family: 'Jost', sans-serif;
  font-weight: 500;
  transition: color 0.3s;
  text-decoration: none;
}
.nav-link:hover { color: var(--rose-light); }
.nav-link.active { color: var(--rose); }

/* ── Mobile Menu ── */
.mobile-menu {
  display: none;
}
.mobile-menu.open {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2.5rem;
}

/* ── Hero ── */
.hero-section {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.hero-ornament {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.hero-ornament::before {
  content: '';
  position: absolute;
  top: 12%;
  left: 50%;
  transform: translateX(-50%);
  width: 1px;
  height: 100px;
  background: linear-gradient(to bottom, transparent, rgba(196,160,138,0.35), transparent);
}
.hero-ornament::after {
  content: '';
  position: absolute;
  bottom: 12%;
  left: 50%;
  transform: translateX(-50%);
  width: 1px;
  height: 100px;
  background: linear-gradient(to bottom, transparent, rgba(196,160,138,0.35), transparent);
}
.hero-content { position: relative; z-index: 10; padding: 0 1.5rem; }

/* ── Rose Text & Shimmer ── */
.rose-text { color: var(--rose); }

.rose-shimmer {
  background: linear-gradient(135deg,
    var(--rose)       0%,
    var(--ivory)      45%,
    var(--rose)       80%,
    var(--rose-light) 100%);
  background-size: 250% 250%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: shimmer 6s ease-in-out infinite;
}
@keyframes shimmer {
  0%,100% { background-position: 0%   50%; }
  50%      { background-position: 100% 50%; }
}

/* ── Glass ── */
.glass {
  background: rgba(28, 22, 18, 0.7);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(196, 160, 138, 0.12);
}

/* ── Rose Card ── */
.rose-card {
  background: rgba(28, 22, 18, 0.6);
  border: 1px solid rgba(196, 160, 138, 0.15);
  transition: border-color 0.4s, transform 0.4s, box-shadow 0.4s;
  text-decoration: none;
  display: block;
}
.rose-card:hover {
  border-color: rgba(196, 160, 138, 0.45);
  transform: translateY(-5px);
  box-shadow: 0 24px 60px rgba(122, 35, 53, 0.15), 0 0 0 1px rgba(196,160,138,0.08);
}

/* ── Tilt Card ── */
.tilt-card {
  transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
}
.tilt-card:hover {
  transform: perspective(700px) rotateX(2deg) rotateY(-2deg) translateY(-5px);
}

/* ── Info Card ── */
.info-card {
  background: rgba(28, 22, 18, 0.7);
  border: 1px solid rgba(196, 160, 138, 0.12);
  border-radius: 1rem;
  padding: 1rem;
  text-align: center;
  transition: border-color 0.3s;
}
.info-card:hover { border-color: rgba(196, 160, 138, 0.4); }
.info-label {
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: #6b5a4e;
  margin-bottom: 0.35rem;
  font-family: 'Jost', sans-serif;
}
.info-value {
  color: var(--rose-light);
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.05rem;
  font-weight: 400;
}

/* ── Timeline ── */
.timeline-item { position: relative; padding: 2.5rem 0; }
.timeline-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--rose);
  border: 2px solid var(--deep);
  box-shadow: 0 0 0 4px rgba(196, 160, 138, 0.2), 0 0 20px rgba(196, 160, 138, 0.15);
  align-self: center;
  justify-self: center;
  flex-shrink: 0;
}
.timeline-container { position: relative; }
.timeline-container::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 1px;
  background: linear-gradient(to bottom, transparent, rgba(196,160,138,0.25), transparent);
  transform: translateX(-50%);
}

/* ── Social Card ── */
.social-card {
  background: rgba(28, 22, 18, 0.6);
  border: 1px solid rgba(196, 160, 138, 0.15);
  transition: border-color 0.4s, transform 0.4s, box-shadow 0.4s;
}
.social-card:hover {
  border-color: rgba(196, 160, 138, 0.45);
  transform: translateY(-5px);
  box-shadow: 0 24px 60px rgba(122, 35, 53, 0.15);
}

/* ── Gallery ── */
.gallery-item {
  background: rgba(28, 22, 18, 0.5);
  border: 1px solid rgba(196, 160, 138, 0.1);
  transition: border-color 0.3s, transform 0.3s, box-shadow 0.3s;
  overflow: hidden;
}
.gallery-item:hover {
  border-color: rgba(196, 160, 138, 0.4);
  transform: scale(1.02);
  box-shadow: 0 20px 40px rgba(122,35,53,0.2);
}
.gallery-item img { transition: transform 0.5s ease; display: block; width: 100%; }
.gallery-item:hover img { transform: scale(1.06); }

/* ── Lightbox ── */
.lightbox {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s;
}
.lightbox.active {
  opacity: 1;
  pointer-events: all;
}

/* ── Movie Card ── */
.movie-card {
  background: rgba(28, 22, 18, 0.7);
  border: 1px solid rgba(196, 160, 138, 0.12);
  border-radius: 1.25rem;
  overflow: hidden;
  transition: border-color 0.4s, transform 0.4s, box-shadow 0.4s;
}
.movie-card:hover {
  border-color: rgba(196, 160, 138, 0.4);
  transform: translateY(-5px);
  box-shadow: 0 24px 60px rgba(122,35,53,0.15);
}
.movie-card img { transition: transform 0.5s ease; }
.movie-card:hover img { transform: scale(1.05); }

/* ── Music Card ── */
.music-card {
  background: rgba(28, 22, 18, 0.7);
  border: 1px solid rgba(196, 160, 138, 0.12);
  border-radius: 1.25rem;
  overflow: hidden;
  transition: border-color 0.4s, transform 0.4s, box-shadow 0.4s;
}
.music-card:hover {
  border-color: rgba(196, 160, 138, 0.4);
  transform: translateY(-5px);
  box-shadow: 0 24px 60px rgba(122,35,53,0.15);
}

/* ── Scroll Reveal ── */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.85s cubic-bezier(0.16,1,0.3,1), transform 0.85s cubic-bezier(0.16,1,0.3,1);
}
.reveal.active {
  opacity: 1;
  transform: none;
}
.reveal-scale {
  opacity: 0;
  transform: scale(0.93);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.reveal-scale.active {
  opacity: 1;
  transform: scale(1);
}

/* ── Stagger ── */
.stagger-children > *:nth-child(1)  { transition-delay: 0.04s; }
.stagger-children > *:nth-child(2)  { transition-delay: 0.12s; }
.stagger-children > *:nth-child(3)  { transition-delay: 0.20s; }
.stagger-children > *:nth-child(4)  { transition-delay: 0.28s; }
.stagger-children > *:nth-child(5)  { transition-delay: 0.36s; }
.stagger-children > *:nth-child(6)  { transition-delay: 0.44s; }
.stagger-children > *:nth-child(7)  { transition-delay: 0.52s; }
.stagger-children > *:nth-child(8)  { transition-delay: 0.60s; }

/* ── Float Icon ── */
.float-icon {
  display: inline-block;
  animation: floatY 4.5s ease-in-out infinite;
}
@keyframes floatY {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-8px); }
}

/* ── Scroll Indicator ── */
.scroll-indicator {
  position: absolute;
  bottom: 2.5rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.scroll-indicator span {
  display: block;
  width: 1px;
  height: 14px;
  background: var(--rose);
  opacity: 0;
  animation: scrollDown 2s ease-in-out infinite;
}
.scroll-indicator span:nth-child(2) { animation-delay: 0.4s; }
@keyframes scrollDown {
  0%   { opacity: 0; transform: scaleY(0); transform-origin: top; }
  50%  { opacity: 1; transform: scaleY(1); }
  100% { opacity: 0; transform: scaleY(0); transform-origin: bottom; }
}

/* ── Section Divider ── */
.section-divider {
  border: none;
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(196,160,138,0.22), transparent);
  margin: 0 auto;
  max-width: 48rem;
}

/* ── CTA Glow ── */
.cta-glow {
  box-shadow: 0 0 30px rgba(196, 160, 138, 0.2);
}
.cta-glow:hover {
  box-shadow: 0 0 50px rgba(196, 160, 138, 0.4);
}

/* ── Filter Button ── */
.filter-btn {
  transition: all 0.3s;
  cursor: pointer;
  font-family: 'Jost', sans-serif;
}

/* ── Ornament Line ── */
.ornament-line {
  display: flex;
  align-items: center;
  gap: 1rem;
  justify-content: center;
  margin: 1.5rem 0;
}
.ornament-line::before,
.ornament-line::after {
  content: '';
  flex: 1;
  max-width: 120px;
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(196,160,138,0.35));
}
.ornament-line::after {
  background: linear-gradient(to left, transparent, rgba(196,160,138,0.35));
}

/* ── Page Transition ── */
body { animation: fadeIn 0.5s ease; }
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ── Scrollbar ── */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--deep); }
::-webkit-scrollbar-thumb {
  background: rgba(196,160,138,0.25);
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover { background: rgba(196,160,138,0.45); }

/* ── Selection ── */
::selection {
  background: rgba(196,160,138,0.25);
  color: var(--ivory);
}

/* ── Focus ── */
a:focus-visible, button:focus-visible {
  outline: 2px solid rgba(196,160,138,0.6);
  outline-offset: 3px;
  border-radius: 4px;
}