/* Canonical Moana Diving Team logo for desktop and mobile shell. */
.odin-v2-logo,.odin-v2-mobile-brand-logo{
  background-image:url('../img/logo.svg')!important;
  background-repeat:no-repeat!important;
  background-position:center!important;
  background-size:contain!important;
  background-color:transparent!important;
  color:transparent!important;
  font-size:0!important;
  text-indent:-9999px!important;
  overflow:hidden!important;
}

@media (max-width:991.98px){
  #odinMobileBar{position:fixed!important;}
  #odinMobileBar .odin-v2-mobile-scroll{position:relative!important;}

  .odin-v2-scroll-onboarding{
    position:absolute;
    inset:0;
    z-index:20;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:.8rem;
    padding:.35rem .75rem;
    border:1px solid var(--odin-accent-1,var(--odin-info));
    border-radius:8px;
    background:rgba(5,13,22,.82);
    backdrop-filter:blur(3px);
    -webkit-backdrop-filter:blur(3px);
    color:var(--odin-accent-1,var(--odin-info));
    cursor:pointer;
    touch-action:manipulation;
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transition:opacity .18s ease,visibility .18s ease;
  }

  #odinMobileBar.odin-v2-show-scroll-hint .odin-v2-scroll-onboarding{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
  }

  .odin-v2-scroll-onboarding-arrow{
    font-size:1.35rem;
    font-weight:900;
    line-height:1;
    opacity:.95;
  }

  .odin-v2-scroll-onboarding-hand{
    width:42px;
    height:42px;
    display:grid;
    place-items:center;
    border:1px solid color-mix(in srgb,var(--odin-accent-1,var(--odin-info)) 55%,transparent);
    border-radius:50%;
    background:color-mix(in srgb,var(--odin-accent-1,var(--odin-info)) 13%,transparent);
    box-shadow:0 0 0 4px color-mix(in srgb,var(--odin-accent-1,var(--odin-info)) 5%,transparent);
    font-size:1.05rem;
    animation:odinSwipeHand 1.35s ease-in-out infinite;
  }

  .odin-v2-scroll-onboarding-copy{
    position:absolute;
    left:50%;
    bottom:3px;
    transform:translateX(-50%);
    font-size:.52rem;
    font-weight:800;
    letter-spacing:.04em;
    white-space:nowrap;
    opacity:.8;
  }

  @keyframes odinSwipeHand{
    0%,100%{transform:translateX(-12px) rotate(-4deg)}
    50%{transform:translateX(12px) rotate(4deg)}
  }

  [data-bs-theme="light"] .odin-v2-scroll-onboarding{
    background:rgba(247,250,252,.88);
  }

  @media(prefers-reduced-motion:reduce){
    .odin-v2-scroll-onboarding-hand{animation:none}
  }
}
