/* Cinematic logo entrance; the final logo remains in the top-right corner. */
.brand {
  top: 22px;
  right: 34px;
  left: auto;
  width: 180px;
  transform: none;
  transform-origin: top left;
  z-index: 6;
  opacity: 1;
  visibility: visible;
  transition: none;
  isolation: isolate;
}

.brand img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 768 / 278;
}

body.section-open .brand {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.brand.intro-playing {
  pointer-events: none;
  will-change: transform, opacity;
}

/* A single wide, diagonal lavender-white slash, not repeated flashing. */
.brand::after {
  content: "";
  position: absolute;
  top: -25%;
  left: -45%;
  width: 42%;
  height: 150%;
  background: linear-gradient(90deg, transparent, #b496ed99 28%, #ffffffed 50%, #b496edaa 72%, transparent);
  transform: skewX(-22deg);
  opacity: 0;
  pointer-events: none;
  mix-blend-mode: screen;
  clip-path: polygon(20% 0, 100% 0, 80% 100%, 0 100%);
}

.brand.intro-sweep::after {
  animation: brand-slash 520ms cubic-bezier(.18, .65, .3, 1) both;
}

@keyframes brand-slash {
  0% { left: -45%; opacity: 0; }
  12% { opacity: .95; }
  78% { opacity: .95; }
  100% { left: 110%; opacity: 0; }
}

#stage-film {
  position: fixed;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  pointer-events: none;
  opacity: 0;
  transition: opacity 650ms ease;
  transform: none;
  animation: none;
}

#stage-film.is-playing { opacity: 1; }

@media (max-width: 760px) {
  .brand { top: 15px; right: 20px; left: auto; width: 120px; transform: none; }
  #background, #stage-film { object-position: 74% center; }
}

@media (prefers-reduced-motion: reduce) {
  .brand::after { display: none; }
  .brand { transform: none !important; }
  #stage-film { display: none; transition: none; }
}