@font-face {
  font-family: "Lu Entrance";
  src: url("/fonts/bodoni-moda-600.woff2") format("woff2");
  font-style: normal;
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: "Lu Entrance";
  src: url("/fonts/bodoni-moda-600-italic.woff2") format("woff2");
  font-style: italic;
  font-weight: 600;
  font-display: swap;
}
@property --lu-aperture {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}
#lu-cinema {
  --wine: #651d2a;
  --cream: #f4efe6;
  --lu-aperture: 0px;
  position: fixed;
  inset: 0;
  z-index: 1000;
  overflow: hidden;
  isolation: isolate;
  background: var(--wine);
  color: var(--cream);
  font-family: Arial, sans-serif;
  mask-image: radial-gradient(
    circle at 50% 44%,
    transparent 0 var(--lu-aperture),
    #000 calc(var(--lu-aperture) + 1px)
  );
  -webkit-mask-image: radial-gradient(
    circle at 50% 44%,
    transparent 0 var(--lu-aperture),
    #000 calc(var(--lu-aperture) + 1px)
  );
  animation: lu-film 5.8s linear forwards;
}
#lu-cinema *,
#lu-cinema *::before,
#lu-cinema *::after {
  box-sizing: border-box;
}
#lu-cinema .lu-film-atmosphere {
  position: absolute;
  inset: -20%;
  background:
    radial-gradient(ellipse at 45% 40%, #a9475a70, transparent 42%),
    radial-gradient(ellipse at 80% 65%, #250b1480, transparent 55%),
    radial-gradient(ellipse at 10% 20%, #250b1460, transparent 40%);
  animation: lu-atmosphere 5.8s ease-in-out both;
  pointer-events: none;
}
#lu-cinema .lu-film-halo {
  position: absolute;
  left: 50%;
  top: 44%;
  width: min(90vw, 800px);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(
    circle,
    #f4efe609 0%,
    #f4efe610 25%,
    transparent 58%
  );
  animation: lu-halo 5.8s ease-in-out both;
  pointer-events: none;
}
#lu-cinema canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
#lu-cinema .lu-film-watermark {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}
#lu-cinema .lu-film-watermark::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 140vmax;
  aspect-ratio: 769/447;
  background: var(--cream);
  mask: url("/brand/cafe-lu-logo.webp") center/contain no-repeat;
  -webkit-mask: url("/brand/cafe-lu-logo.webp") center/contain no-repeat;
  animation: lu-ghost 5.8s cubic-bezier(0.16, 1, 0.3, 1) both;
  opacity: 0.03;
}
#lu-cinema .lu-film-orbits {
  position: absolute;
  left: 50%;
  top: 44%;
  width: min(88vw, 780px);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  perspective: 850px;
  pointer-events: none;
  animation: lu-orbit-stage 5.8s ease-in-out both;
}
#lu-cinema .lu-film-ring {
  position: absolute;
  inset: 2%;
  border-radius: 50%;
  border: 1px solid #f4efe661;
  box-shadow:
    0 0 16px #f4efe60e,
    inset 0 0 24px #f4efe606;
  transform-style: preserve-3d;
  animation: lu-ring-a 5.8s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}
#lu-cinema .lu-film-ring::after {
  content: "";
  position: absolute;
  inset: 8%;
  border-radius: 50%;
  border: 1px solid #f4efe626;
}
#lu-cinema .lu-film-ring:nth-child(2) {
  inset: -7%;
  border-color: #f4efe62e;
  animation-name: lu-ring-b;
}
#lu-cinema .lu-film-ring:nth-child(3) {
  inset: 12%;
  border-color: #f4efe62e;
  animation-name: lu-ring-c;
}
#lu-cinema .lu-film-ribbon {
  position: absolute;
  left: -25%;
  top: 18%;
  width: 150%;
  height: 55%;
  border: 2px solid transparent;
  border-top-color: #f4efe62e;
  border-bottom-color: #f4efe609;
  border-radius: 50%;
  transform: rotate(-20deg);
  animation: lu-ribbon 5.8s cubic-bezier(0.16, 1, 0.3, 1) both;
  pointer-events: none;
}
#lu-cinema .lu-film-ribbon:nth-of-type(2) {
  top: 26%;
  transform: rotate(25deg);
  animation-name: lu-ribbon-reverse;
}
#lu-cinema .lu-film-caption {
  position: absolute;
  left: 50%;
  top: 10%;
  transform: translateX(-50%);
  font-size: 10px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  white-space: nowrap;
  animation: lu-caption 5.8s ease both;
}
#lu-cinema .lu-film-center {
  position: absolute;
  left: 50%;
  top: 44%;
  width: min(80vw, 550px);
  transform: translate(-50%, -50%);
  text-align: center;
  pointer-events: none;
}
#lu-cinema .lu-film-logo {
  position: relative;
  width: clamp(220px, 28vw, 380px);
  aspect-ratio: 769/447;
  margin: 0 auto;
  perspective: 900px;
  animation: lu-mark-stage 5.8s cubic-bezier(0.16, 1, 0.3, 1) both;
}
#lu-cinema .lu-film-signature {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
#lu-cinema .lu-pen {
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
}
#lu-cinema .lu-nib {
  opacity: 0;
  offset-rotate: 0deg;
}
#lu-cinema .lu-film-logo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--cream);
  mask: url("/brand/cafe-lu-logo.webp") center/contain no-repeat;
  -webkit-mask: url("/brand/cafe-lu-logo.webp") center/contain no-repeat;
  animation: lu-mark-solid 5.8s linear both;
}
#lu-cinema .lu-film-title {
  font-family: "Lu Entrance", "Bodoni MT", Georgia, serif;
  font-size: clamp(37px, 4.2vw, 60px);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.03em;
  margin: 25px 0 0;
}
#lu-cinema .lu-film-line {
  display: block;
  overflow: hidden;
  padding: 0 6px 9px;
  margin-bottom: -5px;
}
#lu-cinema .lu-film-line span {
  display: block;
  animation: lu-word-one 5.8s cubic-bezier(0.16, 1, 0.3, 1) both;
}
#lu-cinema .lu-film-line em {
  display: block;
  font-weight: 600;
  animation: lu-word-two 5.8s cubic-bezier(0.16, 1, 0.3, 1) both;
}
#lu-cinema .lu-film-descriptor {
  font-size: 10px;
  letter-spacing: 0.17em;
  line-height: 1.5;
  margin: 24px 0 0;
  animation: lu-descriptor 5.8s ease both;
}
#lu-cinema .lu-film-star {
  position: absolute;
  left: 50%;
  top: 44%;
  width: 40px;
  height: 40px;
  transform: translate(-50%, -50%);
  pointer-events: none;
  animation: lu-star 5.8s cubic-bezier(0.16, 1, 0.3, 1) both;
}
#lu-cinema .lu-film-star::before,
#lu-cinema .lu-film-star::after {
  content: "";
  position: absolute;
  background: var(--cream);
  border-radius: 50%;
}
#lu-cinema .lu-film-star::before {
  left: 50%;
  top: 0;
  width: 1px;
  height: 100%;
}
#lu-cinema .lu-film-star::after {
  left: 0;
  top: 50%;
  height: 1px;
  width: 100%;
}
#lu-cinema .lu-film-progress {
  position: absolute;
  left: 32px;
  right: 32px;
  bottom: 31px;
  height: 1px;
  background: #f4efe622;
  pointer-events: none;
}
#lu-cinema .lu-film-progress::after {
  content: "";
  position: absolute;
  inset: 0;
  background: #f4efe699;
  transform-origin: left;
  animation: lu-progress 5.8s linear both;
}
#lu-cinema .lu-film-skip {
  position: absolute;
  right: 32px;
  bottom: 48px;
  min-height: 44px;
  padding: 10px 0 10px 18px;
  border: 0;
  background: none;
  color: var(--cream);
  font-family: Arial, sans-serif;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  z-index: 5;
  opacity: 0.7;
}
#lu-cinema .lu-film-skip:hover {
  opacity: 1;
}
#lu-cinema .lu-film-skip:focus-visible {
  outline: 1px solid var(--cream);
  outline-offset: 5px;
}
#lu-cinema .lu-film-edition {
  position: absolute;
  left: 32px;
  bottom: 63px;
  font-size: 9px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: #f4efe68c;
}
#lu-content[data-cinematic="playing"] {
  animation: lu-home-arrive 5.8s cubic-bezier(0.16, 1, 0.3, 1) both;
  transform-origin: 50% 20%;
}
@keyframes lu-film {
  0%,
  81% {
    --lu-aperture: 0px;
    opacity: 1;
    visibility: visible;
  }
  99% {
    --lu-aperture: 150vmax;
    opacity: 1;
    visibility: visible;
  }
  100% {
    --lu-aperture: 150vmax;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }
}
@keyframes lu-atmosphere {
  0% {
    transform: scale(1.5) rotate(-15deg);
    opacity: 0.45;
  }
  45% {
    transform: scale(1) rotate(0);
    opacity: 1;
  }
  80% {
    transform: scale(1.12) rotate(7deg);
    opacity: 1;
  }
  100% {
    transform: scale(1.6) rotate(12deg);
    opacity: 0;
  }
}
@keyframes lu-halo {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.1);
  }
  25% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.1);
  }
  70% {
    opacity: 0.5;
    transform: translate(-50%, -50%) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(2);
  }
}
@keyframes lu-ghost {
  0% {
    transform: translate(-50%, -50%) rotate(-15deg) scale(1.4);
    opacity: 0;
  }
  30% {
    opacity: 0.035;
  }
  70% {
    transform: translate(-50%, -50%) rotate(8deg) scale(1);
    opacity: 0.028;
  }
  100% {
    transform: translate(-50%, -50%) rotate(14deg) scale(0.8);
    opacity: 0;
  }
}
@keyframes lu-orbit-stage {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.25);
  }
  15% {
    opacity: 1;
  }
  35% {
    transform: translate(-50%, -50%) scale(1);
  }
  65% {
    opacity: 0.7;
  }
  82% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.35);
  }
  100% {
    opacity: 0;
  }
}
@keyframes lu-ring-a {
  0% {
    transform: rotateX(82deg) rotateY(-40deg) rotateZ(-100deg);
  }
  40% {
    transform: rotateX(58deg) rotateY(10deg) rotateZ(80deg);
  }
  80%,
  100% {
    transform: rotateX(0deg) rotateY(0deg) rotateZ(230deg);
  }
}
@keyframes lu-ring-b {
  0% {
    transform: rotateX(30deg) rotateY(74deg) rotateZ(80deg);
  }
  40% {
    transform: rotateX(-25deg) rotateY(50deg) rotateZ(-100deg);
  }
  80%,
  100% {
    transform: rotateX(0deg) rotateY(0deg) rotateZ(-260deg);
  }
}
@keyframes lu-ring-c {
  0% {
    transform: rotateX(-75deg) rotateY(10deg) rotateZ(50deg);
  }
  40% {
    transform: rotateX(-50deg) rotateY(-28deg) rotateZ(-60deg);
  }
  80%,
  100% {
    transform: rotateX(0deg) rotateY(0deg) rotateZ(-190deg);
  }
}
@keyframes lu-ribbon {
  0% {
    transform: translate(-40%, 70%) rotate(-45deg);
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
  60% {
    transform: translate(12%, -10%) rotate(18deg);
    opacity: 0.65;
  }
  85%,
  100% {
    transform: translate(45%, -60%) rotate(35deg);
    opacity: 0;
  }
}
@keyframes lu-ribbon-reverse {
  0% {
    transform: translate(45%, -60%) rotate(45deg);
    opacity: 0;
  }
  20% {
    opacity: 0.8;
  }
  60% {
    transform: translate(-12%, 10%) rotate(-18deg);
    opacity: 0.4;
  }
  85%,
  100% {
    transform: translate(-45%, 60%) rotate(-35deg);
    opacity: 0;
  }
}
@keyframes lu-caption {
  0%,
  10% {
    opacity: 0;
    letter-spacing: 0.65em;
  }
  25%,
  70% {
    opacity: 0.65;
    letter-spacing: 0.32em;
  }
  85%,
  100% {
    opacity: 0;
  }
}
@keyframes lu-mark-stage {
  0% {
    opacity: 0;
    transform: scale(1);
  }
  7%,
  73% {
    opacity: 1;
    transform: scale(1);
  }
  84%,
  100% {
    opacity: 0;
    transform: scale(1.03);
  }
}
@keyframes lu-mark-solid {
  0%,
  66% {
    opacity: 0;
  }
  70%,
  74% {
    opacity: 1;
  }
  85%,
  100% {
    opacity: 0;
  }
}
@keyframes lu-word-one {
  0%,
  36% {
    opacity: 0;
    transform: translateY(110%) rotate(5deg);
  }
  53%,
  73% {
    opacity: 1;
    transform: translateY(0) rotate(0);
  }
  84%,
  100% {
    opacity: 0;
    transform: translateY(-110%);
  }
}
@keyframes lu-word-two {
  0%,
  42% {
    opacity: 0;
    transform: translateY(110%) rotate(-5deg);
  }
  59%,
  74% {
    opacity: 1;
    transform: translateY(0) rotate(0);
  }
  86%,
  100% {
    opacity: 0;
    transform: translateY(-110%);
  }
}
@keyframes lu-descriptor {
  0%,
  52% {
    opacity: 0;
    transform: translateY(18px);
    letter-spacing: 0.35em;
  }
  66%,
  76% {
    opacity: 0.8;
    transform: translateY(0);
    letter-spacing: 0.17em;
  }
  87%,
  100% {
    opacity: 0;
    transform: translateY(-10px);
  }
}
@keyframes lu-star {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.1) rotate(0);
  }
  10% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(3) rotate(90deg);
  }
  28%,
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(9) rotate(180deg);
  }
}
@keyframes lu-progress {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}
@keyframes lu-home-arrive {
  0%,
  81% {
    transform: scale(1.035);
  }
  100% {
    transform: scale(1);
  }
}
@media (max-width: 640px) {
  #lu-cinema .lu-film-center {
    width: 84vw;
  }
  #lu-cinema .lu-film-logo {
    width: clamp(210px, 64vw, 280px);
  }
  #lu-cinema .lu-film-title {
    font-size: clamp(37px, 10.8vw, 47px);
    margin-top: 24px;
  }
  #lu-cinema .lu-film-descriptor {
    font-size: 9px;
    letter-spacing: 0.11em;
  }
  #lu-cinema .lu-film-caption {
    top: 11%;
    font-size: 8px;
    letter-spacing: 0.22em;
  }
  #lu-cinema .lu-film-orbits {
    width: 116vw;
  }
  #lu-cinema .lu-film-progress {
    left: 22px;
    right: 22px;
    bottom: 24px;
  }
  #lu-cinema .lu-film-skip {
    right: 22px;
    bottom: 39px;
  }
  #lu-cinema .lu-film-edition {
    left: 22px;
    bottom: 54px;
    font-size: 8px;
  }
  #lu-cinema .lu-film-ribbon {
    width: 180%;
    left: -40%;
  }
}
@media (prefers-reduced-motion: reduce) {
  #lu-cinema {
    display: none !important;
  }
  #lu-cinema *,
  #lu-cinema *::before,
  #lu-cinema *::after,
  #lu-content[data-cinematic="playing"] {
    animation: none !important;
    transition: none !important;
  }
}

/* Each nib follows the supplied letterform; all strokes share the original film clock. */
#lu-cinema .lu-pen-0 {
  animation: lu-pen-0 5.8s linear both;
}
@keyframes lu-pen-0 {
  0%,
  9.4828% {
    stroke-dashoffset: 100;
    opacity: 0;
  }
  9.4838% {
    stroke-dashoffset: 100;
    opacity: 1;
  }
  16.3793%,
  100% {
    stroke-dashoffset: 0;
    opacity: 1;
  }
}
#lu-cinema .lu-nib-0 {
  offset-path: path(
    "M146 185 C143 157 113 143 86 153 C48 162 35 186 42 222 C46 257 69 274 99 273 C123 273 140 262 150 251"
  );
  animation: lu-nib-0 5.8s linear both;
}
@keyframes lu-nib-0 {
  0%,
  9.4828% {
    offset-distance: 0%;
    opacity: 0;
  }
  9.5628% {
    opacity: 0.85;
  }
  16.2993% {
    offset-distance: 100%;
    opacity: 0.85;
  }
  16.3793%,
  100% {
    offset-distance: 100%;
    opacity: 0;
  }
}
#lu-cinema .lu-pen-1 {
  animation: lu-pen-1 5.8s linear both;
}
@keyframes lu-pen-1 {
  0%,
  16.3793% {
    stroke-dashoffset: 100;
    opacity: 0;
  }
  16.3803% {
    stroke-dashoffset: 100;
    opacity: 1;
  }
  21.2069%,
  100% {
    stroke-dashoffset: 0;
    opacity: 1;
  }
}
#lu-cinema .lu-nib-1 {
  offset-path: path(
    "M179 214 C164 197 182 190 200 199 C220 211 216 235 191 239 C166 244 166 264 183 270 C203 279 218 258 216 233 L216 267 Q227 282 237 267"
  );
  animation: lu-nib-1 5.8s linear both;
}
@keyframes lu-nib-1 {
  0%,
  16.3793% {
    offset-distance: 0%;
    opacity: 0;
  }
  16.4593% {
    opacity: 0.85;
  }
  21.1269% {
    offset-distance: 100%;
    opacity: 0.85;
  }
  21.2069%,
  100% {
    offset-distance: 100%;
    opacity: 0;
  }
}
#lu-cinema .lu-pen-2 {
  animation: lu-pen-2 5.8s linear both;
}
@keyframes lu-pen-2 {
  0%,
  21.2069% {
    stroke-dashoffset: 100;
    opacity: 0;
  }
  21.2079% {
    stroke-dashoffset: 100;
    opacity: 1;
  }
  25.5172%,
  100% {
    stroke-dashoffset: 0;
    opacity: 1;
  }
}
#lu-cinema .lu-nib-2 {
  offset-path: path(
    "M296 161 C291 146 274 146 267 155 C259 166 261 196 261 222 L261 272"
  );
  animation: lu-nib-2 5.8s linear both;
}
@keyframes lu-nib-2 {
  0%,
  21.2069% {
    offset-distance: 0%;
    opacity: 0;
  }
  21.2869% {
    opacity: 0.85;
  }
  25.4372% {
    offset-distance: 100%;
    opacity: 0.85;
  }
  25.5172%,
  100% {
    offset-distance: 100%;
    opacity: 0;
  }
}
#lu-cinema .lu-pen-3 {
  animation: lu-pen-3 5.8s linear both;
}
@keyframes lu-pen-3 {
  0%,
  25.5172% {
    stroke-dashoffset: 100;
    opacity: 0;
  }
  25.5182% {
    stroke-dashoffset: 100;
    opacity: 1;
  }
  26.8966%,
  100% {
    stroke-dashoffset: 0;
    opacity: 1;
  }
}
#lu-cinema .lu-nib-3 {
  offset-path: path("M246 198 L296 198 M246 271 L282 271");
  animation: lu-nib-3 5.8s linear both;
}
@keyframes lu-nib-3 {
  0%,
  25.5172% {
    offset-distance: 0%;
    opacity: 0;
  }
  25.5972% {
    opacity: 0.85;
  }
  26.8166% {
    offset-distance: 100%;
    opacity: 0.85;
  }
  26.8966%,
  100% {
    offset-distance: 100%;
    opacity: 0;
  }
}
#lu-cinema .lu-pen-4 {
  animation: lu-pen-4 5.8s linear both;
}
@keyframes lu-pen-4 {
  0%,
  26.8966% {
    stroke-dashoffset: 100;
    opacity: 0;
  }
  26.8976% {
    stroke-dashoffset: 100;
    opacity: 1;
  }
  33.2759%,
  100% {
    stroke-dashoffset: 0;
    opacity: 1;
  }
}
#lu-cinema .lu-nib-4 {
  offset-path: path(
    "M373 251 C356 278 325 278 314 258 C300 233 314 196 336 196 C356 193 369 208 368 224 L310 224"
  );
  animation: lu-nib-4 5.8s linear both;
}
@keyframes lu-nib-4 {
  0%,
  26.8966% {
    offset-distance: 0%;
    opacity: 0;
  }
  26.9766% {
    opacity: 0.85;
  }
  33.1959% {
    offset-distance: 100%;
    opacity: 0.85;
  }
  33.2759%,
  100% {
    offset-distance: 100%;
    opacity: 0;
  }
}
#lu-cinema .lu-pen-5 {
  animation: lu-pen-5 5.8s linear both;
}
@keyframes lu-pen-5 {
  0%,
  33.2759% {
    stroke-dashoffset: 100;
    opacity: 0;
  }
  33.2769% {
    stroke-dashoffset: 100;
    opacity: 1;
  }
  34.8276%,
  100% {
    stroke-dashoffset: 0;
    opacity: 1;
  }
}
#lu-cinema .lu-nib-5 {
  offset-path: path("M334 177 L352 163");
  animation: lu-nib-5 5.8s linear both;
}
@keyframes lu-nib-5 {
  0%,
  33.2759% {
    offset-distance: 0%;
    opacity: 0;
  }
  33.3559% {
    opacity: 0.85;
  }
  34.7476% {
    offset-distance: 100%;
    opacity: 0.85;
  }
  34.8276%,
  100% {
    offset-distance: 100%;
    opacity: 0;
  }
}
#lu-cinema .lu-pen-6 {
  animation: lu-pen-6 5.8s linear both;
}
@keyframes lu-pen-6 {
  0%,
  34.8276% {
    stroke-dashoffset: 100;
    opacity: 0;
  }
  34.8286% {
    stroke-dashoffset: 100;
    opacity: 1;
  }
  55.1724%,
  100% {
    stroke-dashoffset: 0;
    opacity: 1;
  }
}
#lu-cinema .lu-nib-6 {
  offset-path: path(
    "M448 116 C405 124 398 160 426 186 C459 219 527 202 580 174 C626 151 656 108 655 67 C656 41 632 26 608 40 C572 60 550 93 521 142 C492 192 466 247 435 291 C405 333 368 359 335 361 C306 364 284 343 302 320 C319 297 352 292 383 299 C431 309 475 333 521 352 C571 373 629 384 673 351"
  );
  animation: lu-nib-6 5.8s linear both;
}
@keyframes lu-nib-6 {
  0%,
  34.8276% {
    offset-distance: 0%;
    opacity: 0;
  }
  34.9076% {
    opacity: 0.85;
  }
  55.0924% {
    offset-distance: 100%;
    opacity: 0.85;
  }
  55.1724%,
  100% {
    offset-distance: 100%;
    opacity: 0;
  }
}
#lu-cinema .lu-pen-7 {
  animation: lu-pen-7 5.8s linear both;
}
@keyframes lu-pen-7 {
  0%,
  55.1724% {
    stroke-dashoffset: 100;
    opacity: 0;
  }
  55.1734% {
    stroke-dashoffset: 100;
    opacity: 1;
  }
  59.8276%,
  100% {
    stroke-dashoffset: 0;
    opacity: 1;
  }
}
#lu-cinema .lu-nib-7 {
  offset-path: path(
    "M574 223 L578 272 C578 300 587 314 608 315 C633 317 646 302 645 274 L645 223 M560 221 L596 221 M627 221 L660 221"
  );
  animation: lu-nib-7 5.8s linear both;
}
@keyframes lu-nib-7 {
  0%,
  55.1724% {
    offset-distance: 0%;
    opacity: 0;
  }
  55.2524% {
    opacity: 0.85;
  }
  59.7476% {
    offset-distance: 100%;
    opacity: 0.85;
  }
  59.8276%,
  100% {
    offset-distance: 100%;
    opacity: 0;
  }
}
#lu-cinema .lu-pen-8 {
  animation: lu-pen-8 5.8s linear both;
}
@keyframes lu-pen-8 {
  0%,
  59.8276% {
    stroke-dashoffset: 100;
    opacity: 0;
  }
  59.8286% {
    stroke-dashoffset: 100;
    opacity: 1;
  }
  66.3793%,
  100% {
    stroke-dashoffset: 0;
    opacity: 1;
  }
}
#lu-cinema .lu-nib-8 {
  offset-path: path(
    "M419 309 C463 340 503 370 552 391 C605 414 657 421 697 398 C738 375 741 336 708 304"
  );
  animation: lu-nib-8 5.8s linear both;
}
@keyframes lu-nib-8 {
  0%,
  59.8276% {
    offset-distance: 0%;
    opacity: 0;
  }
  59.9076% {
    opacity: 0.85;
  }
  66.2993% {
    offset-distance: 100%;
    opacity: 0.85;
  }
  66.3793%,
  100% {
    offset-distance: 100%;
    opacity: 0;
  }
}