/* Intro Screen Styles */

@layer intro {

   #intro {
      position: fixed;
      inset: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      background: #323232;
      z-index: 9999;
   }

   .logo-wrapper {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
   }

   #logo-text {
      width: 424px;
      opacity: 0;
   }

   #film-wheel {
      position: absolute;
      width: 141px;
      left: 0;
      transform: translateX(-138.5px);
      /* visually start in the same spot */
      opacity: 0;
   }

   #film-trail {
      position: absolute;
      left: 0;
      width: 0;
      height: var(--film-trail-height, 2px);
      top: calc(var(--film-trail-top, calc(100% - 20px)) + var(--film-trail-top-adjust, 6px));
      background: #c10000;
      /* reel red */
      border-radius: calc(var(--film-trail-height, 2px) / 2);
      opacity: 0;
      box-shadow: 0 0 6px #c10000;
   }

   #page {
      opacity: 0;
      transition: opacity 1s ease-out;
   }

}