/* ============================================================
   1. Arrival sequence
   ============================================================ */
.flip{
  position:fixed; inset:0; z-index:200;
  display:grid; place-items:center; align-content:center;
  background:
    radial-gradient(ellipse 70% 60% at 50% 40%, var(--stone-50), var(--stone-100) 70%);
  transition:opacity .85s ease, visibility .85s;
}
.flip.gone{opacity:0; visibility:hidden; pointer-events:none}

.flip-stage{display:grid; place-items:center}

.flip-frame{
  position:relative;
  width:min(72vw, 42vh, 400px);
  aspect-ratio:3/4;
  border-radius:50% 50% .6rem .6rem / 34% 34% .6rem .6rem;
  overflow:hidden;
  box-shadow:0 30px 70px rgba(42,33,27,.24), 0 8px 22px rgba(42,33,27,.13);
  background:var(--stone-200);
}
.flip-frame img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  opacity:0;
  transform:scale(1.11);
  filter:grayscale(1) contrast(1.05);
  transition:opacity .5s ease, transform 3.4s cubic-bezier(.22,.7,.3,1), filter 1.2s ease;
}
/* The photograph on screen drifts slowly closer while it is held. */
.flip-frame img.on{opacity:1; transform:scale(1)}
/* Ones already seen stay put underneath so the dissolve has something to sit on. */
.flip-frame img.past{opacity:0; transform:scale(1)}
.flip-frame img.last.on{filter:grayscale(0) contrast(1)}

.flip-say{margin-top:1.5rem; text-align:center; opacity:0; transform:translateY(10px);
  transition:opacity .8s ease, transform .8s cubic-bezier(.2,.8,.3,1)}
.flip.named .flip-say{opacity:1; transform:none}
.flip-cap{
  margin:0; font-family:var(--script); font-size:clamp(2.6rem,9vw,4rem);
  line-height:.95; color:var(--green); text-transform:none; letter-spacing:0;
}
.flip-cap span{font-family:var(--serif); font-style:italic; font-size:.3em;
  color:var(--terracotta); padding:0 .35em; vertical-align:.35em}
.flip-sub{
  margin:.5rem 0 0; font-family:var(--sans); font-size:.62rem;
  letter-spacing:.26em; text-transform:uppercase; color:var(--ink-faint);
}

/* Five ticks that fill as the sequence advances — a quiet progress bar. */
.flip-pips{position:absolute; bottom:4.2rem; left:50%; transform:translateX(-50%);
  display:flex; gap:.5rem}
.flip-pips i{width:16px; height:2px; background:var(--stone-300); display:block;
  transition:background .4s ease}
.flip-pips i.on{background:var(--terracotta)}

.flip-skip{
  position:absolute; bottom:1.8rem; left:50%; transform:translateX(-50%);
  background:none; border:0; cursor:pointer;
  font-family:var(--sans); font-size:.62rem; letter-spacing:.22em;
  text-transform:uppercase; color:var(--ink-faint);
  padding:.6rem 1rem; opacity:.7;
}
.flip-skip:hover{color:var(--terracotta-dark); opacity:1}

/* Hero content waits for the intro so the two never fight. */
body.intro-running{overflow:hidden}
body.intro-running .hero-inner{opacity:0}
.hero-inner{transition:opacity .9s ease}

/* ============================================================
   2. Photographic wash behind the hero
   Five frames cross-fading under a heavy scrim, so the type never
   has to compete with them.
   ============================================================ */
.hero-shots{position:absolute; inset:0; z-index:0; overflow:hidden; pointer-events:none}
.hero-shots img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; opacity:0;
  filter:grayscale(1) contrast(1.06);
  transition:opacity 2s ease;
  will-change:opacity, transform;
}
.hero-shots img.on{opacity:.24; animation:heroDrift 22s ease-in-out infinite alternate}
.hero-shots::after{
  content:''; position:absolute; inset:0;
  background:
    radial-gradient(ellipse 70% 54% at 50% 44%,
      rgba(251,247,241,.96) 0%, rgba(251,247,241,.82) 44%, rgba(244,237,227,.42) 100%),
    linear-gradient(to bottom,
      rgba(244,237,227,.94) 0%, rgba(244,237,227,.2) 32%,
      rgba(244,237,227,.3) 66%, rgba(244,237,227,.97) 100%);
}
@keyframes heroDrift{
  from{transform:scale(1.04) translate3d(0,0,0)}
  to{transform:scale(1.13) translate3d(-1.5%,-1.5%,0)}
}

/* ============================================================
   3. The photo field — three lanes, travelling

   Fixed vertical bands that never overlap each other, so two
   photographs cannot collide no matter where the animation is in
   its cycle. The middle lane is nearer, larger and travelling the
   other way, which is what reads as depth. Every photograph is
   already black and white in the file, so there is no filter to
   compute at paint time.
   ============================================================ */
.drift{
  position:relative;
  height:clamp(420px, 62vh, 600px);
  overflow:hidden;
  margin:clamp(1rem,3vw,2.5rem) 0;
  -webkit-mask-image:linear-gradient(to right,transparent,#000 9%,#000 91%,transparent);
  mask-image:linear-gradient(to right,transparent,#000 9%,#000 91%,transparent);
}
.lane{position:absolute; left:0; right:0; overflow:hidden}
.lane-run{
  display:flex; align-items:center; gap:clamp(.6rem,1.4vw,1.2rem);
  height:100%; width:max-content;
  will-change:transform;
}
.lane img{
  display:block; height:100%; width:auto; flex:none;
  border-radius:.4rem;
  transition:transform .55s cubic-bezier(.2,.8,.3,1), box-shadow .55s ease;
}
.lane:hover .lane-run{animation-play-state:paused}
.lane img:hover{transform:translateY(-8px) scale(1.03)}

/* Back rail, small and faint, drifting left. */
.lane-a{top:1%; height:26%; opacity:.5}
.lane-a .lane-run{animation:laneLeft 300s linear infinite}
.lane-a img{box-shadow:0 6px 16px rgba(42,33,27,.1)}

/* Front rail, large and solid, drifting the other way. */
.lane-b{top:31%; height:42%}
.lane-b .lane-run{animation:laneRight 200s linear infinite}
.lane-b img{box-shadow:0 14px 34px rgba(42,33,27,.17)}

/* Back rail again, slowest of the three. */
.lane-c{top:76%; height:23%; opacity:.62}
.lane-c .lane-run{animation:laneLeft 360s linear infinite}
.lane-c img{box-shadow:0 6px 16px rgba(42,33,27,.1)}

@keyframes laneLeft{
  from{transform:translate3d(0,0,0)}      to{transform:translate3d(-50%,0,0)}
}
@keyframes laneRight{
  from{transform:translate3d(-50%,0,0)}   to{transform:translate3d(0,0,0)}
}

/* ============================================================
   4. Section accent photos
   ============================================================ */
.accent{display:flex; justify-content:center; margin:2.75rem 0 .5rem}
.accent figure{margin:0; max-width:380px; width:100%}
.accent .shot{
  display:block; overflow:hidden;
  border-radius:50% 50% .5rem .5rem / 22% 22% .5rem .5rem;
  box-shadow:0 14px 38px rgba(42,33,27,.16);
}
.accent img{
  display:block; width:100%; height:auto;
  filter:grayscale(1) contrast(1.04);
  transition:filter .6s ease;
  will-change:transform;
}
.accent figure:hover img{filter:grayscale(0) contrast(1)}
.accent figcaption{
  margin:.9rem 0 0; text-align:center;
  font-family:var(--serif); font-style:italic;
  font-size:.95rem; color:var(--ink-faint);
}

/* ============================================================
   5. Arriving on scroll
   ============================================================ */
.rise{opacity:0; transform:translateY(20px);
  transition:opacity .75s ease, transform .75s cubic-bezier(.2,.8,.3,1)}
.rise.in{opacity:1; transform:none}

section{backdrop-filter:none}

@media(max-width:560px){
  .accent figure{max-width:280px}
  .flip-frame{width:min(76vw, 40vh, 300px)}
  .hero-shots img.on{opacity:.34}
  .drift{height:clamp(300px,46vh,380px)}
}

@media (prefers-reduced-motion:reduce){
  .flip{display:none}
  body.intro-running{overflow:auto}
  body.intro-running .hero-inner{opacity:1}
  .hero-shots img.on{animation:none}
  .lane-run{animation:none}
  .rise{opacity:1; transform:none; transition:none}
}