/* Tiny Tomato Games — CINEMATIC SECTION TRANSITIONS
   A glowing horizon beam sweeps each section as it enters, the content gets a
   depth-split scroll parallax (stage drifts one way, copy the other), and the
   hero gently scales / fades away as you leave it. Additive + motion-safe. */

main > section { position: relative; }

/* ---- horizon beam that sweeps a section on entry ---- */
.scene-beam { position: absolute; left: 0; right: 0; top: -1px; height: 2px; z-index: 30; pointer-events: none; overflow: visible; opacity: 0; }
.scene-beam::before {
  content: ''; position: absolute; left: 50%; top: 0; width: 0; height: 2px; transform: translateX(-50%);
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  box-shadow: 0 0 22px 2px color-mix(in oklab, var(--accent) 75%, transparent);
}
.scene-beam::after {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 140px; opacity: 0;
  background: linear-gradient(180deg, color-mix(in oklab, var(--accent) 18%, transparent), transparent);
}

@media (prefers-reduced-motion: no-preference) {
  section.lit .scene-beam { opacity: 1; }
  section.lit .scene-beam::before { animation: beam-open 1.05s cubic-bezier(0.22, 1, 0.36, 1) forwards; }
  section.lit .scene-beam::after  { animation: beam-wash 1.15s ease-out forwards; }
  @keyframes beam-open { 0% { width: 0; opacity: 0; } 22% { opacity: 1; } 100% { width: 100%; opacity: 0; } }
  @keyframes beam-wash { 0% { opacity: 0.9; transform: translateY(0); } 100% { opacity: 0; transform: translateY(46px); } }

  /* parallax targets get GPU hints (transform written by JS) */
  .showcase-stage, .showcase-copy, .sec-head { will-change: transform; }

  /* hero leaves the stage with a gentle lift + fade (no blur) */
  .hero { will-change: transform, opacity; }
}