.ll-intro {
  background: #010103;
}

.ll-intro::before,
.ll-intro::after {
  animation: none;
}

.ll-intro::before {
  z-index: 0;
  inset: 0;
  opacity: 0;
  background:
    radial-gradient(ellipse at 50% 44%, rgba(102, 129, 146, .085), transparent 54%),
    radial-gradient(ellipse at 50% 70%, rgba(45, 78, 91, .055), transparent 58%);
  filter: blur(36px);
  transition: opacity 1.4s ease;
}

.ll-intro::after {
  z-index: 0;
  inset: 0;
  opacity: 0;
  background-image:
    radial-gradient(circle, rgba(255, 255, 255, .34) 0 .6px, transparent .9px),
    radial-gradient(circle, rgba(79, 168, 255, .3) 0 .55px, transparent .85px);
  background-size: 151px 137px, 211px 193px;
  background-position: 31px 19px, 97px 53px;
  -webkit-mask-image: radial-gradient(ellipse at 50% 46%, #000 0, transparent 70%);
  mask-image: radial-gradient(ellipse at 50% 46%, #000 0, transparent 70%);
  transition: opacity 1.4s ease;
}

.ll-cinema.ll-laser-opening-running .ll-intro::before {
  opacity: .9;
}

.ll-cinema.ll-laser-opening-running .ll-intro::after {
  opacity: .15;
}

.ll-laser-opening {
  position: absolute;
  inset: 0;
  z-index: 2;
  overflow: hidden;
  pointer-events: none;
}

.ll-laser-opening__canvas,
.ll-laser-opening__haze {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.ll-laser-opening__canvas {
  z-index: 4;
  display: block;
}

.ll-laser-opening__haze {
  z-index: 1;
  opacity: 0;
  background:
    radial-gradient(ellipse at 4% 66%, rgba(31, 119, 142, .09), transparent 32%),
    radial-gradient(ellipse at 50% 43%, rgba(221, 239, 246, .075), transparent 49%);
  filter: blur(34px);
  transform: scale(1.08) translate3d(-1.2%, 2%, 0);
  transition: opacity 1.4s ease, transform 5s cubic-bezier(.2,.8,.2,1);
}

.ll-cinema.ll-laser-opening-running .ll-laser-opening__haze {
  opacity: 1;
  transform: scale(1) translate3d(1.2%, -1%, 0);
}

.ll-laser-logo-shell {
  position: absolute;
  z-index: 3;
  left: 50%;
  top: 45%;
  width: min(76vw, 1120px);
  aspect-ratio: 2155.19 / 449.03;
  transform: translate3d(-50%, -50%, 0) scale(.985);
  filter: drop-shadow(0 0 34px rgba(0, 232, 255, .08));
}

.ll-laser-logo-final,
.ll-laser-logo-trace,
.ll-laser-logo-trace > svg,
.ll-laser-logo-sheen {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.ll-laser-logo-final {
  z-index: 1;
  display: block;
  opacity: 0;
  filter: brightness(1.06) blur(1.6px);
  transform: scale(.999);
  transition:
    opacity .42s cubic-bezier(.16,1,.3,1),
    filter .78s cubic-bezier(.16,1,.3,1),
    transform .9s cubic-bezier(.16,1,.3,1);
}

.ll-laser-logo-trace {
  z-index: 2;
  opacity: 0;
  visibility: hidden;
  filter:
    drop-shadow(0 0 2px rgba(255,255,255,.98))
    drop-shadow(0 0 8px rgba(0,232,255,.5))
    drop-shadow(0 0 18px rgba(252,3,251,.2));
  transition: filter .7s ease;
}

.ll-cinema.ll-laser-writing .ll-laser-logo-trace {
  opacity: 1;
  visibility: visible;
}

.ll-laser-logo-trace > svg {
  overflow: visible;
}

.ll-laser-logo-trace .ll-logo-trace-geometry {
  vector-effect: non-scaling-stroke;
  fill: none !important;
  stroke: rgba(248, 253, 255, .98);
  stroke-width: 2.3;
  stroke-linecap: round;
  stroke-linejoin: round;
  shape-rendering: geometricPrecision;
}

.ll-laser-logo-trace .ll-logo-trace-geometry[data-spectrum="0"] {
  stroke: #b44bf8;
}

.ll-laser-logo-trace .ll-logo-trace-geometry[data-spectrum="1"] {
  stroke: #8a7bff;
}

.ll-laser-logo-trace .ll-logo-trace-geometry[data-spectrum="2"] {
  stroke: #4fa8ff;
}

.ll-laser-logo-trace .ll-logo-trace-geometry[data-spectrum="3"] {
  stroke: #00e8ff;
}

.ll-laser-logo-trace .ll-logo-trace-geometry[data-spectrum="4"] {
  stroke: #48f06e;
}

.ll-laser-logo-trace .ll-logo-trace-geometry[data-spectrum="5"] {
  stroke: #ffeb3b;
}

.ll-laser-logo-trace .ll-logo-trace-geometry[data-spectrum="6"] {
  stroke: #ffa94d;
}

.ll-laser-logo-trace .ll-logo-trace-geometry[data-spectrum="7"] {
  stroke: #ff7a6e;
}

.ll-laser-logo-trace .ll-logo-trace-geometry[data-spectrum="8"] {
  stroke: #ff3ea0;
}

.ll-laser-logo-trace .ll-logo-trace-geometry[data-spectrum="9"] {
  stroke: #fc03fb;
}

.ll-laser-logo-sheen {
  z-index: 3;
  opacity: 0;
  background: linear-gradient(
    103deg,
    transparent 32%,
    rgba(255,255,255,.04) 44%,
    rgba(255,255,255,.72) 49.4%,
    rgba(0,232,255,.18) 51%,
    transparent 58%
  );
  transform: translateX(-82%);
  -webkit-mask: url("../../../../lumilas-design/assets/lumilas-logo-on-dark-2026.svg") center / contain no-repeat;
  mask: url("../../../../lumilas-design/assets/lumilas-logo-on-dark-2026.svg") center / contain no-repeat;
}

.ll-cinema.ll-laser-logo-complete .ll-laser-logo-final {
  opacity: 1;
  filter: brightness(1) blur(0);
  transform: scale(1);
}

.ll-cinema.ll-laser-logo-complete .ll-laser-logo-trace {
  opacity: .28;
  filter:
    drop-shadow(0 0 2px rgba(255,255,255,.55))
    drop-shadow(0 0 8px rgba(0,232,255,.18));
}

.ll-cinema.ll-laser-logo-complete .ll-laser-logo-sheen {
  animation: ll-laser-logo-sheen .72s cubic-bezier(.2,.75,.22,1) .1s both;
}

@keyframes ll-laser-logo-sheen {
  0% { opacity: 0; transform: translateX(-72%); }
  22% { opacity: .82; }
  100% { opacity: 0; transform: translateX(74%); }
}

.ll-intro h1.ll-laser-tagline {
  position: absolute;
  z-index: 7;
  left: 50%;
  top: 69%;
  width: min(90vw, 1120px);
  max-width: none;
  margin: 0;
  color: rgba(247, 248, 250, .9);
  font: 400 clamp(20px, 2.2vw, 34px) / 1.2 var(--font-display, "Michroma"), system-ui, sans-serif;
  letter-spacing: -.025em;
  text-align: center;
  opacity: 0;
  filter: blur(8px);
  transform: translate3d(-50%, 8px, 0);
  animation: none;
  transition:
    opacity .58s cubic-bezier(.16,1,.3,1),
    filter .62s cubic-bezier(.16,1,.3,1),
    transform .66s cubic-bezier(.16,1,.3,1);
}

.ll-cinema.ll-laser-tagline-visible .ll-intro h1.ll-laser-tagline {
  opacity: 1;
  filter: blur(0);
  transform: translate3d(-50%, 0, 0);
}

.ll-cinema.ll-laser-handoff .ll-intro h1.ll-laser-tagline {
  opacity: 0;
  filter: blur(5px);
  transform: translate3d(-50%, -5px, 0);
  transition-duration: .42s;
}

.ll-cinema.ll-laser-handoff .ll-laser-logo-final {
  opacity: .7;
  filter: brightness(.9) blur(.3px);
  transform: scale(.998);
}

.ll-cinema.ll-laser-opening-exit .ll-laser-logo-final,
.ll-cinema.ll-laser-opening-exit .ll-laser-logo-trace {
  opacity: 0;
  transition-duration: .48s;
}

@media (max-width: 800px) {
  .ll-laser-logo-shell {
    top: 44%;
    width: min(91vw, 720px);
  }

  .ll-intro h1.ll-laser-tagline {
    top: 61%;
    width: calc(100vw - 40px);
    font-size: clamp(18px, 5vw, 26px);
  }
}

@media (max-width: 480px) and (orientation: portrait) {
  .ll-laser-logo-shell {
    top: 43%;
    width: 92vw;
  }

  .ll-intro h1.ll-laser-tagline {
    top: 57%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ll-laser-opening__canvas,
  .ll-laser-logo-trace,
  .ll-laser-logo-sheen {
    display: none;
  }

  .ll-laser-logo-final,
  .ll-intro h1.ll-laser-tagline {
    opacity: 1;
    filter: none;
    transform: translate3d(-50%, 0, 0);
    transition: none;
  }

  .ll-laser-logo-final {
    transform: none;
  }
}