/* ═══════════════════════════════════════════════════════════
   ONR — The Fan Gallery (Scroll Driven)
   ═══════════════════════════════════════════════════════════ */

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

:root {
  --parchment: #FAF6F0;
  --ink:       #191613;
  --ink-soft:  #9A8E7E;
  --accent:    #A67C52;
}

html { 
  font-size: 16px; 
  -webkit-tap-highlight-color: transparent; 
  scroll-behavior: smooth; 
  /* Enable native scroll snapping on the Y axis with 'proximity' to allow gentle catches */
  scroll-snap-type: y proximity; 
}

body {
  background: var(--parchment);
  color: var(--ink);
  font-family: 'Newsreader', Georgia, serif;
  width: 100%;
  /* Removed overflow:hidden and height:100dvh so we can scroll */
  overscroll-behavior-y: none;
}

.grain {
  position: fixed; inset: -100%; pointer-events: none; z-index: 999; opacity: .025;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 150px;
  /* Hardware acceleration to prevent repaints */
  transform: translateZ(0);
  will-change: transform;
}

/* ═══ DUMMY SECTIONS ═══ */
.dummy-section {
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 2rem;
  border-bottom: 1px solid rgba(0,0,0,0.1);
  position: relative;
  z-index: 10;
  background: var(--parchment);
  /* Ensure the user can easily snap to the top/bottom sections as well */
  scroll-snap-align: start;
}
.dummy-section h1 {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: clamp(3rem, 8vw, 6rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
  margin-bottom: 1rem;
}

/* ═══ SCROLL TRACK ARCHITECTURE ═══ */
.fan-scroll-track {
  position: relative;
  height: 350vh; /* gives us 3.5 screen heights to play out the interaction */
  width: 100%;
  z-index: 1;
}

/* The invisible catch-net to arrest fast scrolling right in the middle of the scattered zone */
.snap-target {
  position: absolute;
  top: 50%; /* Center of the 350vh track */
  height: 1px;
  width: 100%;
  /* Tells the browser to align this invisible line to the center of the viewport */
  scroll-snap-align: center;
  /* Gives the browser a slightly larger 'gravity well' to catch fast scrolls */
  scroll-margin: 50vh;
  pointer-events: none;
}

/* The visual fan section locks to the screen while scrolling through the track */
.fan-section {
  position: sticky;
  top: 0;
  width: 100%; height: 100vh; height: 100dvh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background:
    radial-gradient(circle at 50% -20%, rgba(200,169,126,.06) 0%, transparent 60%),
    var(--parchment);
  overflow: hidden;
}

/* Header Text */
.fan-text {
  text-align: center;
  padding-top: clamp(40px, 8vh, 80px);
  z-index: 10;
  pointer-events: none;
}

.fan-text__kicker {
  display: block;
  font-style: italic; font-weight: 300;
  font-size: clamp(14px, 1.8vw, 18px);
  color: var(--ink-soft);
  letter-spacing: .02em;
  margin-bottom: 2px;
}

.fan-text__title {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-weight: 800;
  font-size: clamp(34px, 6vw, 68px);
  letter-spacing: -.03em;
  line-height: 1.05;
}

.fan-text__title em {
  font-family: 'Playfair Display', Georgia, serif;
  font-style: italic; font-weight: 700;
  color: var(--accent);
}

.fan-text__sub {
  margin-top: 10px;
  font-style: italic; font-weight: 300;
  font-size: clamp(13px, 1.5vw, 16px);
  color: var(--ink-soft);
}


/* ═══ THE FAN HUB ═══ */

.fan-gallery {
  position: relative;
  width: 100%;
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  padding-bottom: 30px;
  perspective: 1200px;
}

/* Individual card container */
.fan-card {
  position: absolute;
  bottom: -20px;
  
  width: clamp(170px, 24vw, 320px);
  aspect-ratio: 10 / 15;
  
  transform-origin: 50% 160%;
  --rot: calc((var(--i) - 2.5) * 10deg);
  
  /* INIT: Hidden completely off bottom */
  transform: translateY(120vh) rotate(0deg);
  opacity: 0;
  z-index: 1;
  cursor: pointer;
  
  /* Optimize will-change to only what is actively transitioning */
  will-change: transform;
  /* Smoother, slightly faster base transitions for scroll responsiveness */
  transition: transform 0.6s cubic-bezier(0.25, 1, 0.4, 1),
              opacity 0.4s ease,
              z-index 0s 0s;
}

/* Card Visuals */
.fan-card__inner {
  width: 100%; height: 100%;
  border-radius: 18px;
  overflow: hidden;
  position: relative;
  background: #EAE3D9;
  /* Use a static, cheaper shadow. We will fake the animated shadow with a pseudo element later if needed, 
     but static shadows are much faster than animated ones */
  box-shadow: 
    0 10px 30px rgba(25, 22, 19, 0.08),
    0 2px 8px rgba(25, 22, 19, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.6);
  /* Removed expensive transition on box-shadow and filter */
  /* transition: box-shadow 0.6s ease, filter 0.4s ease; */
}

/* Pseudo element for cheap dimming (replaces expensive CSS filter) */
.fan-card__inner::after {
  content: '';
  position: absolute; inset: 0;
  background: rgba(20, 15, 10, 0.2);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
  z-index: 10;
}

.fan-card__inner img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}

/* Vertical Left Edge Label */
.fan-card__label {
  position: absolute;
  top: 0; left: 0; bottom: 0;
  width: clamp(34px, 4vw, 48px);
  background: linear-gradient(to right, rgba(0,0,0,0.5) 0%, transparent 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-family: 'Bricolage Grotesque', sans-serif;
  font-weight: 700;
  font-size: clamp(12px, 1.4vw, 16px);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #fff;
  z-index: 5;
  padding-right: 6px;
  opacity: 1;
  transition: opacity 0.4s ease;
  pointer-events: none;
}

.fan-card.is-active .fan-card__label {
  opacity: 0;
}


/* ═══════════════════════════════════════════════════════════
   ANIMATION SEQUENCE & STATES (Triggered by Scroll)
   ═══════════════════════════════════════════════════════════ */

/* Stage 1: GATHERED (Stacked Deck rising into view) */
.fan-gallery.is-gathered .fan-card {
  opacity: 1;
  transform: translateY(0) rotate(0deg);
  transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1),
              opacity 0.4s ease;
}

/* Stage 2: SCATTERED (Fanned out for interaction) */
.fan-gallery.is-scattered .fan-card {
  opacity: 1;
  transform: translateY(0) rotate(var(--rot));
  transition: transform 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Stage 3: ACTIVE (Card tapped, comes out of deck) */
.fan-gallery .fan-card.is-active {
  z-index: 50; 
  transform: translateY(-160px) rotate(0deg) scale(1.15);
  transition: transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1),
              z-index 0s 0s;
  cursor: default;
}

/* Background cards dim when one is active using cheap opacity instead of expensive filter */
.fan-gallery.has-active .fan-card:not(.is-active) .fan-card__inner::after {
  opacity: 1;
}

.fan-card.is-active .fan-card__inner {
  /* Removed expensive box shadow change on active, relying instead on scale and z-index for depth */
}


/* ═══ TEXT OVERLAY ═══ */

.fan-card__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(15, 12, 10, 0.85) 0%, rgba(15, 12, 10, 0.15) 50%, transparent 100%);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 30px 24px;
  color: #fff;
  pointer-events: none;
  
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.4s ease, transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.fan-card.is-active .fan-card__overlay {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.1s;
}

.fan-card__overlay h3 {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-weight: 800;
  font-size: clamp(22px, 3vw, 32px);
  letter-spacing: -.02em;
  margin-bottom: 6px;
}

.fan-card__overlay p {
  font-style: italic; font-weight: 300;
  font-size: clamp(14px, 1.4vw, 17px);
  color: rgba(255, 255, 255, 0.8);
  letter-spacing: .01em;
}


/* ═══ HOVER HINTS (Desktop Only) ═══ */
@media (hover: hover) {
  .fan-gallery:not(.has-active).is-scattered .fan-card:hover {
    /* Very subtle raise just to show they are alive */
    transform: translateY(-4px) rotate(var(--rot)) scale(1.02);
    /* Removed z-index: 10 so it doesn't clip through adjacent cards */
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.4, 1);
  }
}

@media (min-width: 900px) {
  .fan-card {
    transform-origin: 50% 180%;
  }
  .fan-gallery .fan-card.is-active {
    transform: translateY(-240px) rotate(0deg) scale(1.15);
  }
}