/* ════════════════════════════════════════════════════════════
   AMBER & BARK — film_archive.css
   Unique 35mm film-strip vintage photo presentation.
   Anatomy:
     .film-archive       — outer wrapper, dark bg
     .film-sprockets     — top/bottom rows of holes
     .sprocket           — individual punched hole
     .film-frames        — flex row of photo frames
     .film-frame         — one photo + caption
     .film-frame-inner   — image + CSS grain overlay
     .film-grain         — CSS noise texture overlay
     .film-caption       — typewriter-style annotation
     .film-tagline       — closing line beneath strip
════════════════════════════════════════════════════════════ */

/* ── Outer strip ── */
.film-archive {
  width: 100%;
  background: #0e0a06;
  padding: 3.5rem 0 2.5rem;
  position: relative;
  overflow: hidden;
}

/* Subtle warm glow in the centre */
.film-archive::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 60%, rgba(180,100,30,0.08) 0%, transparent 65%);
  pointer-events: none;
}

/* ── Sprocket holes strip ── */
.film-sprockets {
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 0 1.5rem;
  height: 28px;
}
.film-sprockets-top    { margin-bottom: 1rem; border-bottom: 1px solid rgba(255,255,255,0.06); }
.film-sprockets-bottom { margin-top: 1rem;    border-top:    1px solid rgba(255,255,255,0.06); }

.sprocket {
  display: block;
  width: 14px;
  height: 11px;
  border-radius: 2px;
  background: #0e0a06;
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.6);
  flex-shrink: 0;
}

/* ── Frames row ── */
.film-frames {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 0;
  padding: 0 2.5rem;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.film-frames::-webkit-scrollbar { display: none; }

/* ── Single frame ── */
.film-frame {
  flex: 0 0 clamp(200px, 28vw, 370px);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 1.4rem;
  position: relative;
  /* CSS-only staggered entrance — no JS needed */
  animation: frameReveal 0.75s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.film-frame:nth-child(1) { animation-delay: 0.1s; }
.film-frame:nth-child(2) { animation-delay: 0.28s; }
.film-frame:nth-child(3) { animation-delay: 0.46s; }
@keyframes frameReveal {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Frame inner — image + grain ── */
.film-frame-inner {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1.15;
  overflow: hidden;
  /* White border simulating photo print */
  border: 7px solid #f5ede0;
  box-shadow:
    0 2px 0 rgba(0,0,0,0.15),
    0 6px 32px rgba(0,0,0,0.55),
    inset 0 0 0 1px rgba(0,0,0,0.08);
}
.film-frame-inner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  /* Vintage photo grade */
  filter: sepia(0.45) contrast(1.08) brightness(0.88) saturate(0.7);
  transition: filter 0.5s ease;
  display: block;
}
.film-frame:hover .film-frame-inner img {
  filter: sepia(0.25) contrast(1.05) brightness(0.95) saturate(0.85);
}

/* CSS film grain overlay */
.film-grain {
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.04'/%3E%3C/svg%3E");
  background-size: 128px 128px;
  opacity: 0.38;
  mix-blend-mode: overlay;
  pointer-events: none;
}

/* Vignette corners on each photo */
.film-frame-inner::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,0.45) 100%);
  pointer-events: none;
}

/* ── Caption ── */
.film-caption {
  margin-top: 0.9rem;
  text-align: center;
  width: 100%;
}
.fc-year {
  display: block;
  font-family: 'Courier New', Courier, monospace;
  font-size: 0.62rem;
  color: rgba(201,168,76,0.55);
  letter-spacing: 0.12em;
  margin-bottom: 0.3rem;
}
.fc-text {
  display: block;
  font-family: var(--font-sans);
  font-size: 0.72rem;
  font-weight: 400;
  letter-spacing: 0.1em;
  color: rgba(245,237,216,0.55);
  line-height: 1.4;
}

/* ── Closing tagline ── */
.film-tagline {
  text-align: center;
  margin-top: 1.4rem;
  font-family: var(--font-sans);
  font-size: 0.65rem;
  font-weight: 400;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(201,168,76,0.35);
}

/* ── History-intro → film-archive spacing ── */
.history .container {
  padding-bottom: 3.5rem;
}

/* ── Mobile ── */
@media (max-width: 768px) {
  .film-frames { padding: 0 0.5rem; gap: 0; justify-content: flex-start; }
  .film-frame  { flex: 0 0 clamp(180px, 72vw, 280px); padding: 0 0.9rem; }
  .film-archive { padding: 2.5rem 0 2rem; }
  .sprocket { width: 11px; height: 9px; }
}
@media (max-width: 480px) {
  .film-frame { flex: 0 0 82vw; }
  .film-frames { padding: 0 0.4rem; }
}