/* =========================================================================
   Section-divider flash — a brief film-burn + grain pulse that fires once as
   each <div class="section-divider"> marker scrolls into view. Same visual
   language as the scroll-logo's film-burn (assets/css/logo-header.css), reused
   as a page-wide "reel change" moment between sections instead of on the logo.
   Pairs with assets/js/section-flash.js. One shared overlay per page.
   ========================================================================= */

.page-flash {
  position: fixed;
  inset: 0;
  z-index: 140; /* above section content, below the pinned scroll-logo (150) */
  pointer-events: none;
  opacity: 0;
}
.page-flash.is-burning {
  animation: pf-burn 480ms ease-out;
}
.page-flash__glow {
  position: absolute;
  inset: -20%;
  background: radial-gradient(circle at 50% 45%, rgba(255,160,60,1) 0%, rgba(255,95,20,.55) 32%, transparent 68%);
  mix-blend-mode: screen;
}
.page-flash__grain {
  position: absolute;
  inset: -20%;
  background-image: var(--grain-media);
  background-size: 130px 130px;
  mix-blend-mode: overlay;
}
/* double-flicker like a projector shutter catching, not a single smooth pulse */
@keyframes pf-burn {
  0%   { opacity: 0; }
  7%   { opacity: .78; }
  16%  { opacity: .3; }
  26%  { opacity: .6; }
  50%  { opacity: .12; }
  100% { opacity: 0; }
}

/* Markers are invisible layout-neutral anchors — never take up visual space */
.section-divider {
  height: 0;
  margin: 0;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .page-flash { display: none; }
}