@import url('https://fonts.googleapis.com/css2?family=Crimson+Text:wght@400;600;700&family=Playfair+Display:wght@400;700;900&display=swap');

:root {
  --bg-primary: #E5E1D9;
  --bg-secondary: #F5EDDC;
  --text-primary: #524742;
  --text-dark: #524742;
  --accent-gold: #D4A574;
  --white: #FFFFFF;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Crimson Text', 'Times New Roman', serif;
  color: #524742;
  line-height: 1.6;
  background-color: var(--bg-primary);
  opacity: 0.95;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Playfair Display', serif;
  font-weight: 700;
  line-height: 1.2;
}

/* Hero styles */
.hero-text {
  font-family: 'Playfair Display', serif;
  font-size: clamp(2.5rem, 5vw, 4rem);
  font-weight: 400;
  color: #524742;
  line-height: 1.2;
  opacity: 0.9;
}

.hero-subtext {
  font-family: 'Crimson Text', serif;
  font-size: clamp(1.5rem, 3vw, 2rem);
  color: #524742;
  font-weight: 400;
  opacity: 0.85;
}

/* Navigation styles */
.nav-link {
  font-family: 'Crimson Text', serif;
  font-size: 1.25rem;
  color: #524742;
  text-decoration: none;
  transition: color 0.3s ease;
  font-weight: 400;
  opacity: 0.9;
}

.nav-link:hover {
  color: var(--accent-gold);
}

.nav-square {
  display: inline-block;
  background-color: transparent;
  border: 2px solid #524742;
  color: #524742;
  padding: 1rem 2.5rem;
  font-family: 'Crimson Text', serif;
  font-size: 1.25rem;
  text-decoration: none;
  transition: all 0.3s ease;
  letter-spacing: 0.05em;
  opacity: 0.9;
}

.nav-square:hover {
  background-color: #524742;
  color: var(--bg-primary);
  opacity: 1;
}

/* Section styles */
.section-title {
  font-family: 'Playfair Display', serif;
  font-size: clamp(2rem, 4vw, 3rem);
  color: #524742;
  font-weight: 400;
  margin-bottom: 1.5rem;
  opacity: 0.9;
}

.prose {
  font-family: 'Crimson Text', serif;
  font-size: 1.125rem;
  line-height: 1.8;
  color: #524742;
  opacity: 0.85;
}

/* Event card styles */
.event-card {
  background-color: var(--bg-secondary);
  padding: 2rem;
  border-radius: 0.5rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

/* Cast member styles */
.cast-member {
  text-align: center;
  padding: 1.5rem;
}

.cast-member img {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  object-fit: cover;
  margin: 0 auto 1rem;
  border: 3px solid var(--bg-secondary);
}

.cast-member h3 {
  font-family: 'Playfair Display', serif;
  font-size: 1.5rem;
  color: #524742;
  margin-bottom: 0.5rem;
  opacity: 0.9;
}

.cast-member .role {
  font-family: 'Crimson Text', serif;
  font-size: 1rem;
  color: var(--accent-gold);
  font-style: italic;
  margin-bottom: 0.5rem;
}

.cast-member p {
  font-family: 'Crimson Text', serif;
  font-size: 1rem;
  color: #524742;
  line-height: 1.6;
  opacity: 0.85;
}

/* Marquee Animation */
@keyframes marquee {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

.marquee {
    display: flex;
    width: max-content;
    gap: 1.5rem;
    overflow: hidden;
}

.marquee__group {
    display: flex;
    gap: 1.5rem;
    flex-shrink: 0;
    animation: marquee 30s linear infinite;
}

.marquee__image {
    height: 30rem;
    width: auto;
    border: 2px solid #fcd34d;
    border-radius: 0.5rem;
    display: block;
}

/* 3D Flip & Hover Animation for Trivia Cards */
.perspective { perspective: 1000px; }

.trivia-inner {
    transform-style: preserve-3d;
    position: relative;
    width: 100%;
    height: 300px;
    border-radius: 1.5rem;
    cursor: pointer;
    transition: transform 0.6s cubic-bezier(0.4, 0.0, 0.2, 1);
}

.trivia-front, .trivia-back {
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

.trivia-back { transform: rotateY(180deg); }

.flipped { 
    transform: rotateY(180deg);
}

.trivia-card:hover .trivia-inner:not(.flipped) { 
    transform: scale(1.05); 
}

/* Fade-in Animation for Cards */
.fade-in {
    opacity: 0;
    transform: translateY(20px);
    animation: fadeInUp 0.6s forwards;
    animation-delay: var(--delay);
}

@keyframes fadeInUp {
    to { opacity: 1; transform: translateY(0); }
}

/* Hero & Photo Overlay */
.hero-photo-container::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.25);
    z-index: 0;
}

.hero-photo-container > div {
    position: relative;
    z-index: 1;
}

/* Hero & Photo Strip Background */
.hero,
.photo-strip,
.bg-\[\#E5E1D9\] {
    background-color: #E5E1D9;
}

/* Responsive styles */
@media (max-width: 768px) {
  .hero-text {
    font-size: 2rem;
  }
  
  .hero-subtext {
    font-size: 1.25rem;
  }
  
  .nav-link {
    font-size: 1rem;
  }
}