/* =========================================
   ADDVIBES — MOBILE HERO CONTROLLER
   Mobile / Portrait only
========================================= */

.addvibes-mobile-hero-controller{
  display:none;
}

@media (max-width:900px), (orientation:portrait){

  .addvibes-mobile-hero-controller{
    position:absolute;
    inset:0;
    z-index:30;

    display:block;

    opacity:0;
    visibility:hidden;

    transition:
      opacity .24s ease,
      visibility .24s ease;

    pointer-events:none;
  }

  .addvibes-mobile-hero-controller.is-visible{
    opacity:1;
    visibility:visible;
  }

  /* =========================================
     MOBILE SCROLL HINT
  ========================================= */

  .addvibes-mobile-scroll-hint{
    position:absolute;
    left:50%;
    bottom:112px;

    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:7px;

    transform:translateX(-50%);

    color:#F2E7D8;

    opacity:0;
    visibility:hidden;

    transition:
      opacity .24s ease,
      visibility .24s ease;

    text-shadow:
      0 3px 14px rgba(0,0,0,.60);
  }

  .addvibes-mobile-scroll-hint.is-visible{
    visibility:visible;
  }

  .addvibes-mobile-scroll-hint__phone{
    position:relative;

    width:23px;
    height:38px;

    border:1px solid rgba(242,231,216,.60);
    border-radius:8px;

    background:rgba(7,20,38,.24);

    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.07),
      0 8px 20px rgba(0,0,0,.20);
  }

  .addvibes-mobile-scroll-hint__phone::after{
    content:"";

    position:absolute;
    left:50%;
    bottom:4px;

    width:5px;
    height:1px;

    border-radius:999px;

    background:rgba(242,231,216,.50);

    transform:translateX(-50%);
  }

  .addvibes-mobile-scroll-hint__finger{
    position:absolute;
    left:50%;
    top:17px;

    width:4px;
    height:11px;

    border-radius:999px;

    background:
      linear-gradient(
        180deg,
        #2FA8D9,
        #D63E9C,
        #E0A93B
      );

    transform:translateX(-50%);

    animation:
      addvibesMobileSwipe 1.45s
      ease-in-out infinite;
  }

  .addvibes-mobile-scroll-hint__arrow{
    width:9px;
    height:9px;

    border-right:1.5px solid rgba(242,231,216,.84);
    border-bottom:1.5px solid rgba(242,231,216,.84);

    transform:rotate(45deg);

    animation:
      addvibesMobileArrow 1.45s
      ease-in-out infinite;
  }

  .addvibes-mobile-scroll-hint__text{
    margin-top:1px;

    color:rgba(242,231,216,.78);

    font-family:Arial,Helvetica,sans-serif;
    font-size:8px;
    font-weight:800;
    line-height:1;

    letter-spacing:.18em;
    text-indent:.18em;
    white-space:nowrap;
  }

  /* =========================================
     COMPACT MOBILE NAV BAR
  ========================================= */

  .addvibes-mobile-hero-nav{
    position:absolute;
    left:50%;
    bottom:max(18px,env(safe-area-inset-bottom));
    z-index:3;

    display:grid;
    grid-template-columns:repeat(6,minmax(0,1fr));
    align-items:center;

    width:min(96vw,470px);

    padding:7px;

    transform:translateX(-50%) translateY(8px);

    border:1px solid rgba(242,231,216,.16);
    border-radius:18px;

    background:rgba(7,20,38,.68);

    box-shadow:
      0 14px 34px rgba(0,0,0,.34),
      inset 0 1px 0 rgba(255,255,255,.07);

    -webkit-backdrop-filter:
      blur(12px)
      saturate(118%);
    backdrop-filter:
      blur(12px)
      saturate(118%);

    opacity:0;
    visibility:hidden;

    transition:
      opacity .24s ease,
      visibility .24s ease,
      transform .24s ease;

    pointer-events:auto;
  }

  .addvibes-mobile-hero-nav.is-visible{
    opacity:1;
    visibility:visible;

    transform:translateX(-50%) translateY(0);
  }

  .addvibes-mobile-hero-nav__button{
    --mobile-load-progress:0%;

    position:relative;

    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:5px;

    min-width:0;
    min-height:43px;

    padding:5px 2px;

    border:0;
    border-radius:12px;

    background:transparent;

    color:rgba(242,231,216,.48);

    font-family:Arial,Helvetica,sans-serif;
    font-size:6.2px;
    font-weight:800;
    line-height:1;

    letter-spacing:.035em;
    white-space:nowrap;

    transition:
      color .20s ease,
      background .20s ease,
      transform .20s ease;

    touch-action:manipulation;
  }

  .addvibes-mobile-hero-nav__button--hero::before{
    display:none;
  }

  .addvibes-mobile-hero-nav__home-icon{
    display:flex;
    align-items:center;
    justify-content:center;

    width:18px;
    height:18px;

    border-radius:6px;

    background:rgba(242,231,216,.10);

    transition:
      background .20s ease,
      box-shadow .20s ease;
  }

  .addvibes-mobile-hero-nav__home-icon svg{
    width:12px;
    height:12px;

    fill:none;
    stroke:currentColor;
    stroke-width:1.7;
    stroke-linecap:round;
    stroke-linejoin:round;
  }

  .addvibes-mobile-hero-nav__button--hero.is-active
  .addvibes-mobile-hero-nav__home-icon,
  .addvibes-mobile-hero-nav__button--hero.is-back-mode
  .addvibes-mobile-hero-nav__home-icon{
    background:
      linear-gradient(
        135deg,
        rgba(47,168,217,.24),
        rgba(214,62,156,.20),
        rgba(224,169,59,.18)
      );

    box-shadow:
      0 0 14px rgba(47,168,217,.18);
  }

  .addvibes-mobile-hero-nav__button--hero.is-back-mode
  .addvibes-mobile-hero-nav__label{
    font-size:5.3px;
    letter-spacing:0;
  }

  .addvibes-mobile-hero-nav__button::before{
    content:"";

    width:8px;
    height:8px;

    border-radius:999px;

    background:rgba(242,231,216,.28);

    box-shadow:
      0 0 0 1px rgba(255,255,255,.05);

    transition:
      width .20s ease,
      background .20s ease,
      box-shadow .20s ease;
  }

  .addvibes-mobile-hero-nav__button.is-active{
    color:#F2E7D8;

    background:
      linear-gradient(
        145deg,
        rgba(47,168,217,.08),
        rgba(214,62,156,.07)
      );
  }

  .addvibes-mobile-hero-nav__button.is-active::before{
    width:22px;

    background:
      linear-gradient(
        90deg,
        #2FA8D9 0%,
        #8D63E8 34%,
        #D63E9C 68%,
        #E0A93B 100%
      );

    box-shadow:
      0 0 13px rgba(47,168,217,.30),
      0 0 18px rgba(214,62,156,.20);
  }

  .addvibes-mobile-hero-nav__button:active{
    transform:scale(.96);
  }

  .addvibes-mobile-hero-nav__button:disabled{
    opacity:.72;
  }

  .addvibes-mobile-hero-nav__loader{
    position:absolute;
    left:7px;
    right:7px;
    bottom:3px;

    display:flex;
    align-items:center;
    justify-content:center;

    height:3px;

    overflow:visible;

    border-radius:999px;

    background:rgba(242,231,216,.08);

    opacity:0;
    visibility:hidden;

    transition:
      opacity .18s ease,
      visibility .18s ease;
  }

  .addvibes-mobile-hero-nav__button.is-loading
  .addvibes-mobile-hero-nav__loader{
    opacity:1;
    visibility:visible;
  }

  .addvibes-mobile-hero-nav__loader-bar{
    position:absolute;
    inset:0 auto 0 0;

    width:var(--mobile-load-progress);

    border-radius:inherit;

    background:
      linear-gradient(
        90deg,
        #2FA8D9,
        #8D63E8,
        #D63E9C,
        #E0A93B
      );

    box-shadow:
      0 0 10px rgba(47,168,217,.30);

    transition:width .14s ease;
  }

  .addvibes-mobile-hero-nav__percent{
    position:absolute;
    left:50%;
    bottom:6px;

    color:#F2E7D8;

    font-size:6px;
    line-height:1;

    transform:translateX(-50%);

    opacity:0;
  }

  .addvibes-mobile-hero-nav__button.is-loading
  .addvibes-mobile-hero-nav__percent{
    opacity:1;
  }
}

@media (max-width:370px){
  .addvibes-mobile-hero-nav{
    width:95vw;
    padding:6px 4px;
  }

  .addvibes-mobile-hero-nav__button{
    min-height:40px;
    font-size:5.5px;
    letter-spacing:0;
  }

  .addvibes-mobile-scroll-hint{
    bottom:104px;
  }
}

@media (max-height:700px) and (max-width:900px){
  .addvibes-mobile-scroll-hint{
    bottom:101px;
  }

  .addvibes-mobile-hero-nav{
    bottom:max(10px,env(safe-area-inset-bottom));
  }
}

@media (min-width:901px) and (orientation:landscape){
  .addvibes-mobile-hero-controller{
    display:none !important;
  }
}

@keyframes addvibesMobileSwipe{
  0%{
    opacity:0;
    transform:translate(-50%,8px);
  }

  25%,
  70%{
    opacity:1;
  }

  100%{
    opacity:0;
    transform:translate(-50%,-9px);
  }
}

@keyframes addvibesMobileArrow{
  0%,
  100%{
    opacity:.35;
    transform:translateY(-2px) rotate(45deg);
  }

  50%{
    opacity:1;
    transform:translateY(3px) rotate(45deg);
  }
}

@media (prefers-reduced-motion:reduce){
  .addvibes-mobile-scroll-hint__finger,
  .addvibes-mobile-scroll-hint__arrow{
    animation:none !important;
  }

  .addvibes-mobile-hero-controller,
  .addvibes-mobile-scroll-hint,
  .addvibes-mobile-hero-nav,
  .addvibes-mobile-hero-nav__button,
  .addvibes-mobile-hero-nav__loader,
  .addvibes-mobile-hero-nav__loader-bar{
    transition:none !important;
  }
}


@media (max-width:900px), (orientation:portrait){

  .addvibes-mobile-hero-nav__button--hero{
    color:#F8EAD1;
    background:
      linear-gradient(
        145deg,
        rgba(47,168,217,.13),
        rgba(214,62,156,.11),
        rgba(224,169,59,.10)
      );

    box-shadow:
      inset 0 0 0 1px rgba(242,231,216,.10),
      0 0 13px rgba(47,168,217,.10);
  }

  .addvibes-mobile-hero-nav__button--hero
  .addvibes-mobile-hero-nav__home-icon{
    color:#FFF0D5;

    background:
      linear-gradient(
        135deg,
        rgba(47,168,217,.38),
        rgba(141,99,232,.30) 38%,
        rgba(214,62,156,.28) 70%,
        rgba(224,169,59,.30)
      );

    box-shadow:
      0 0 10px rgba(47,168,217,.28),
      0 0 16px rgba(214,62,156,.20),
      inset 0 1px 0 rgba(255,255,255,.20);
  }

  .addvibes-mobile-hero-nav__button--hero.is-active{
    color:#FFF5E4;

    box-shadow:
      inset 0 0 0 1px rgba(242,231,216,.18),
      0 0 16px rgba(47,168,217,.18),
      0 0 20px rgba(214,62,156,.12);
  }

  .addvibes-mobile-hero-nav__button--hero.is-back-mode
  .addvibes-mobile-hero-nav__label{
    font-size:5px;
    font-weight:900;
    color:#F8EAD1;
  }
}