.entry-flare-layer {
  position: fixed;
  inset: 0;
  z-index: -1;            /* under the landing title/menu so it never covers or dims them */
  overflow: hidden;
  pointer-events: none;
  transition: opacity .3s ease;
  /* NO isolation: frames must screen-blend against the page behind them so the
     dark parts of each flare/frame drop out instead of showing as boxes. */
}
.entry-flare-layer.fade-out { opacity: 0; }

/* 1. WebGL glow (light points shooting outward, strobed, blue-tinted). */
.entry-flare-glow {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  mix-blend-mode: screen;
  opacity: .9;
  pointer-events: none;
}

/* Heavy bloom — big white wash that punches a few times. */
.entry-bloom {
  position: absolute;
  inset: -8%;
  background: radial-gradient(circle at 50% 46%, rgba(255,255,255,.96), rgba(200,225,255,.42) 30%, transparent 62%);
  mix-blend-mode: screen;
  opacity: 0;
  animation: entry-bloom var(--bdur,1000ms) ease-out both;
}
@keyframes entry-bloom {
  0% { opacity: 0; } 5% { opacity: .96; } 12% { opacity: .22; }
  20% { opacity: .88; } 32% { opacity: .16; } 55% { opacity: .42; } 100% { opacity: 0; }
}

/* Light-leak flashes — big soft coloured gradients that sweep + flash. */
.entry-leak {
  position: absolute;
  left: var(--lx,50%);
  top: var(--ly,50%);
  width: 74vw;
  height: 66vh;
  transform: translate(-50%,-50%) rotate(var(--lr,0deg));
  background: linear-gradient(90deg, transparent 8%, var(--lc,rgba(255,184,120,.55)) 42%, var(--lc2,rgba(150,195,255,.5)) 58%, transparent 92%);
  mix-blend-mode: screen;
  opacity: 0;
  filter: blur(42px);
  will-change: opacity, transform;
  animation: entry-leak var(--ldur,1000ms) ease-in-out var(--ldelay,0ms) both;
}
@keyframes entry-leak {
  0%   { opacity: 0;             transform: translate(-50%,-50%) rotate(var(--lr,0deg)) translateX(-32%) scale(1.1); }
  25%  { opacity: var(--lpk,.7); }
  60%  { opacity: calc(var(--lpk,.7) * .45); }
  100% { opacity: 0;             transform: translate(-50%,-50%) rotate(var(--lr,0deg)) translateX(32%)  scale(1.32); }
}

/* 3. Video-frame flipbook — the anamorphic "aspect-ratio closing" motion. */
.entry-flare-film {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(78vw, 1150px);
  height: auto;
  transform: translate(-50%,-50%);
  opacity: 0;
  visibility: hidden;
  mix-blend-mode: screen;
  object-fit: contain;
  pointer-events: none;
}
.entry-flare-film.on { opacity: 1; visibility: visible; }

/* 4. Petals + clouds. */
.entry-decor {
  position: absolute;
  height: auto;
  opacity: 0;
  mix-blend-mode: screen;
  will-change: transform, opacity, filter;
  pointer-events: none;
}

/* Petals: small, fast, carried straight off the screen on a gust — no mid pause. */
.entry-petal {
  left: 0;
  top: var(--y, 40vh);
  width: min(5vw, 48px);
  transform: translate(var(--x0,-15vw), -50%) rotate(var(--tilt,0deg)) scale(var(--sc,.6));
  filter: blur(.3px) drop-shadow(0 0 6px rgba(255,220,235,.22));
  animation: entry-petal-gust var(--dur,1000ms) cubic-bezier(.28,.12,.5,.92) var(--delay,0ms) both;
}
@keyframes entry-petal-gust {
  0%   { opacity: 0;
         transform: translate(var(--x0,-15vw), -50%) rotate(var(--tilt,0deg)) scale(var(--sc,.6)); }
  9%   { opacity: var(--pk,.9); }
  50%  { transform: translate(calc(var(--x0,-15vw) + (var(--x1,120vw) - var(--x0,-15vw)) * .5), calc(-50% + var(--ym,0vh)))
                    rotate(calc(var(--tilt,0deg) + var(--spin,540deg) * .5)) scale(var(--sc,.6)); }
  90%  { opacity: var(--pk,.9); }
  100% { opacity: 0;
         transform: translate(var(--x1,120vw), calc(-50% + var(--yd,0vh)))
                    rotate(calc(var(--tilt,0deg) + var(--spin,540deg))) scale(var(--sc,.6)); }
}

/* (Clouds + grain dissolve removed per request — petal gust only.) */

/* 2. Fast upright lens-flare flashes. */
.entry-flare-frame {
  position: absolute;
  display: block;
  width: auto;
  height: auto;
  max-width: 34vw;
  max-height: 40vh;
  opacity: 0;
  mix-blend-mode: screen;
  object-fit: contain;
  will-change: opacity, transform;
  animation: entry-flare-flash var(--life,150ms) linear both;
}
@keyframes entry-flare-flash {
  0%   { opacity: 0;                          transform: translate(-50%,-50%) scale(var(--s0,.85)); }
  18%  { opacity: var(--peak,.9);             }
  46%  { opacity: calc(var(--peak,.9) * .5);  }
  100% { opacity: 0;                          transform: translate(-50%,-50%) scale(var(--s1,1.1)); }
}

@media (prefers-reduced-motion: reduce) { .entry-flare-layer { display: none; } }