/* Scoped presentation for the ten user-supplied Montana photographs. */
.cinema-frame {
  --photo-grade: brightness(1.07) contrast(1.09) saturate(.92) sepia(.08);
  position:relative;display:block;isolation:isolate;overflow:hidden;
  max-width:100%;min-width:0;margin:28px 0 0;border-radius:12px;
  background:#0b1414;
  box-shadow:0 22px 54px -24px #000b,0 3px 12px #0005;
}
.story-image > .cinema-frame { margin:0; }
.cinema-frame > img {
  display:block;width:100%;height:auto;margin:0;border-radius:0;
  object-fit:contain;filter:var(--photo-grade);transform:none;
}
.cinema-frame--rodeo { --photo-grade:brightness(1.08) contrast(1.04) saturate(.8) sepia(.04); }
.cinema-frame--community { --photo-grade:brightness(1.08) contrast(1.05) saturate(.86) sepia(.04); }
.cinema-frame--neon { --photo-grade:brightness(1.06) contrast(1.08) saturate(1.02) sepia(.06); }
.cinema-frame--landscape { --photo-grade:brightness(1.08) contrast(1.10) saturate(.94) sepia(.06); }
.cinema-frame::before,.cinema-frame::after {
  content:'';position:absolute;inset:0;pointer-events:none;z-index:1;border-radius:inherit;
}
.cinema-frame::before {
  background:linear-gradient(145deg,#efb96d24 0%,transparent 48%,#154e5e24 100%);
  mix-blend-mode:soft-light;
}
.cinema-frame::after {
  background:radial-gradient(ellipse at 50% 42%,transparent 48%,#03141926 100%);
  box-shadow:inset 0 0 0 1px #f1e0be40,inset 0 1px 0 #fff2;
}
/* Grade only the hero photograph; keep headings and buttons on their own layer. */
.hero { overflow:hidden; }
.hero::before {
  background:url('montana-river-bridge.jpg') center 45%/cover;
  filter:brightness(1.07) contrast(1.10) saturate(.92) sepia(.08);
  opacity:1;transform:none;
}
.hero::after {
  background:linear-gradient(180deg,#071011ad 0%,#0b1315b5 46%,#10130fd1 76%,#10130f 100%),
    radial-gradient(ellipse at 20% 10%,#e7ad6540,transparent 65%);
  box-shadow:inset 0 0 100px #0003;
}
@media (prefers-reduced-motion:no-preference) {
  .cinema-frame.is-revealed > img { animation:cinema-photo-arrive 3.8s cubic-bezier(.18,.65,.3,1); }
  .hero::before { animation:cinema-hero-arrive 3.8s cubic-bezier(.18,.65,.3,1); }
  @keyframes cinema-photo-arrive { from { transform:scale(1.045); } to { transform:scale(1); } }
  @keyframes cinema-hero-arrive { from { transform:scale(1.045); } to { transform:scale(1); } }
}
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference) {
  .cinema-frame > img { transition:transform 1.4s cubic-bezier(.18,.65,.3,1); }
  .cinema-frame:hover > img { transform:scale(1.025); }
}
@media (prefers-reduced-motion:reduce) {
  .cinema-frame > img,.hero::before { animation:none!important;transition:none!important;transform:none!important; }
}
@media (forced-colors:active) {
  .cinema-frame { box-shadow:none; }
  .cinema-frame > img,.hero::before { filter:none; }
  .cinema-frame::before,.cinema-frame::after { display:none; }
}