



/* ICONS */
  .icon {
    transition: all 0.1s ease-out;
    }
  .icon-footer {
    transition:all 0.3s;
    }
  
  #section-logo {
    transition:all 0.75s;
    }
  #logo {
    animation:logo-pulse 3s 1.5s;
    }
  #logo-image {
    transition: all 1s;
    animation: logo-squeeze 1s;
    animation-iteration-count: 1;
    animation-fill-mode: both;
    animation-play-state: paused;
    animation-delay: calc(var(--scroller,0) * -1s);
    }
  @keyframes logo-squeeze {
    10% {
      width: 100px;
      }
    100% {
      width: 100px;
      }
    }
  @keyframes logo-pulse {
    10% {
      transform:scale(100%);
      }
    13% {
      transform:scale(108%);
      }
    30% {
      transform:scale(100%);
      }
    33% {
      transform:scale(108%);
      }
    50% {
      transform:scale(100%);
      }
    53% {
      transform:scale(108%);
      }
    75% {
      transform:scale(100%);
      }
    }
  @keyframes navbar-icons {
     0% {
      opacity: 0;
      }
     1% {
      opacity: 0;
      }
     3% {
      opacity: 0.9;
      }
    100% {
      opacity: 0.9;
      } 
    }


  .section-nav {
    transition: all 1s;
    animation: navbar-squeeze 1s;
    animation-iteration-count: 1;
    animation-fill-mode: both;
    animation-play-state: paused;
    animation-delay: calc(var(--scroller,0) * -1s); 
    }

  @keyframes navbar-squeeze {
    10% {
      top:76px;
      }
    100% {
      top:76px;
      }
    }

/* SCHEDULE */
  
/* NAVBAR ITEMS */
  #stereo {
    transition: all 1s;
    }
  #frequency {
    transition: all 0.5s;
    }
  .nav-strip-buttons {
    transition: all 1s 0.3s;
    }
  #strip-buttons {
    transition: all 1s;
    animation: var(--navbar-icons);
    animation-iteration-count: 1;
    animation-fill-mode: both;
    animation-play-state: paused;
    animation-delay: calc(var(--scroller,0) * -1s);
    }
  #strip-buttons .icon {
    transition:all 0.3s;
    }
  
/* CONTENT IMAGES */
  .crew img {
    transition: all 0.3s;
    }
  
  .pivot {
    transition: all 0.3s 0.3s;
    }
  .pivot:hover {
    transform: rotateY(180deg);
    }

/* VINYL-45 */
  @keyframes disc-spin {
    100% { transform:rotate(359.9deg); }   
    }
  @keyframes disc-stop {
    to { transform:rotate(359.9deg); }
    }
  @keyframes disc-short {
    0% { transform:rotate(0deg); }
    1% { transform:rotate(1deg); }
    2.5% { transform:rotate(11deg); }
    5% { transform:rotate(45deg); }
    7.5% { transform:rotate(90deg); }
    10% { transform:rotate(150deg); }
    75% { transform:rotate(1800deg); }
    85% { transform:rotate(2000deg); }
    93% { transform:rotate(2100deg); }
    98% { transform:rotate(2155deg); }
    99% { transform:rotate(2159deg); }
    100% { transform:rotate(2160deg); }
    }
  .disc-wrap {
    transition: all 0.5s;
    }
  .disc {
    transition: all 0.5s 0.7s ease-out;
    }
  .disc img { 
    transition: all 0.5s 0.7s ease-out;
    }
  .disc-base { 
    animation: disc-stop 2.6s ease-out forwards;
    transition: all 3s ease-out;
    }
  .disc-base:hover { 
    animation: disc-short 9.3s linear .05s forwards;
    }
  @keyframes fadein {
      0% { opacity:0 }
    100% { opacity:1 }   
    }

  audio {
    transition: all 0.5s;
    }
  body:has(audio:playing) .disc-base { 
    animation: disc-spin 1.3s linear 0s infinite forwards;
    }
          
/* VU METER */

/* OVERLAYS */
  .overlay, .overlay-history-1, .overlay-history-2 {
    transition:all 0.3s ease-out;
    }

/* SIDEBAR */

/* HAMBURGER MENU (NAVBAR) */
  #label-menu {
    transition:all 0.3s, opacity 1s 0.25s, width 0.8s;
    }
  .menu-detail {
    transition:all 0.2s;
    }

/* HISTORY DETAIL (YOU ASKED FOR IT :) */
  #label-history-detail {
    transition:all 0.3s;
    }
  .history-container h3 {
    transition:all 0.75s;
    }
  .history-strip {
    transition:all 0.75s;
    }

/* BALLOON */
  .balloon {
    animation:balloon-rise 5s 10s both; 
    }
  @keyframes balloon-rise {
    0% { 
      visibility:hidden;
      opacity:0;
      transform:translate(50px,0);
      }
    1% {
      opacity:1;
      visibility:visible;
      }
    50% {
      transform:translateY(-42vh);
      }
    70% {
       transform:translateY(-28vh) rotateZ(-3deg);
      }
    90% {
      opacity:1;
      }
    100% {
      visibility:hidden;
      opacity:0;
      transform:translate(-15vw,calc(-110vh - 200px)) }
      }
          
/* POEM VERSES */
          
/* GALLERY PHOTOS */
  .gallery-photo {
    transition:width 0.9s;
    }
