/* ═══════════════════════════════════════════════════════════
   ONR — The Fan Gallery V2
   Mobile-first, gather-then-scatter, tap-to-reveal
   ═══════════════════════════════════════════════════════════ */

*, *::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; }

body {
  background: var(--parchment);
  color: var(--ink);
  font-family: 'Newsreader', Georgia, serif;
  overflow: hidden;
  height: 100dvh;
  width: 100vw;
}

.grain {
  position: fixed; inset: 0; 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='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 180px;
}


/* ═══ SECTION LAYOUT ═══ */

.fan-section {
  position: relative;
  width: 100%; 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);
}

/* 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; /* Cards anchor to bottom */
  padding-bottom: 30px;
  perspective: 1200px;
}

/* Individual card container */
.fan-card {
  position: absolute;
  bottom: -20px;
  
  /* TALLER PORTRAITS, mobile first scaling */
  width: clamp(170px, 24vw, 320px);
  aspect-ratio: 10 / 15;
  
  /* Pivot from far below to create the arc */
  transform-origin: 50% 160%;
  
  /* Calculate perfect fan rotation (-25 to +25 degrees) */
  --rot: calc((var(--i) - 2.5) * 10deg);
  
  /* INIT: Hidden, slid down */
  transform: translateY(120vh) rotate(0deg);
  opacity: 0;
  z-index: 1;
  cursor: pointer;
  
  will-change: transform, opacity, z-index;
  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;
  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);
  transition: box-shadow 0.6s ease, filter 0.4s ease;
}

.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;
}

/* Hide vertical label when full overlay appears */
.fan-card.is-active .fan-card__label {
  opacity: 0;
}


/* ═══════════════════════════════════════════════════════════
   ANIMATION SEQUENCE & STATES
   ═══════════════════════════════════════════════════════════ */

/* Stage 1: GATHERED (Rapidly fly up as a single stacked deck) */
.fan-gallery.is-gathered .fan-card {
  opacity: 1;
  transform: translateY(0) rotate(0deg);
  /* Snappy entrance */
  transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1),
              opacity 0.4s ease;
}

/* Stage 2: SCATTERED (Fan out smoothly) */
.fan-gallery.is-scattered .fan-card {
  opacity: 1;
  transform: translateY(0) rotate(var(--rot));
  /* Smooth springy scatter */
  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; /* Bring to absolute front immediately */
  /* Rise up high, straighten out, scale up slightly */
  transform: translateY(-160px) rotate(0deg) scale(1.15);
  /* Ultra-smooth finesse reveal */
  transition: transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1),
              z-index 0s 0s;
  cursor: default; /* Tapping active card does nothing */
}

/* Optional: Very subtle dimming of background cards to keep focus */
.fan-gallery.has-active .fan-card:not(.is-active) .fan-card__inner {
  filter: saturate(0.85) brightness(0.9);
}

.fan-card.is-active .fan-card__inner {
  box-shadow: 
    0 24px 80px rgba(25, 22, 19, 0.25),
    0 8px 24px rgba(25, 22, 19, 0.15);
}


/* ═══ TEXT OVERLAY (Hidden until Active) ═══ */

.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;
  
  /* Hidden by default */
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.4s ease, transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* Only show on active */
.fan-card.is-active .fan-card__overlay {
  opacity: 1;
  transform: translateY(0);
  /* Slight delay so it appears as card settles */
  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) {
  /* Only apply hover if NO card is currently fully active */
  .fan-gallery:not(.has-active) .fan-card:hover {
    transform: translateY(-15px) rotate(var(--rot)) scale(1.05);
    z-index: 10;
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.4, 1);
  }
}

/* Desktop sizing tweaks */
@media (min-width: 900px) {
  .fan-card {
    /* Push pivot even lower on desktop for a wider, flatter arc */
    transform-origin: 50% 180%;
  }
  .fan-gallery .fan-card.is-active {
    /* Lift higher on big screens */
    transform: translateY(-240px) rotate(0deg) scale(1.15);
  }
}