/*
  ADDVIBES HERO CONTROLLER UI
  STRICT DESKTOP LANDSCAPE ONLY
*/
@media (min-width:901px) and (orientation:landscape) and (hover:hover) and (pointer:fine){

/* =========================================================
   ADDVIBES — CLEAN HERO NAV / SNAP / PRELOAD UI
   Desktop only
========================================================= */

.addvibes-hero-ui{
  position:absolute;
  inset:0;
  z-index:24;
  pointer-events:none;
}

/* =========================
   DOT NAV
========================= */

.addvibes-hero-dots{
  position:absolute;
  left:50%;
  bottom:26px;

  display:flex;
  flex-direction:row-reverse;
  align-items:center;
  justify-content:center;
  gap:18px;

  width:max-content;
  min-width:660px;

  transform:translateX(-50%);

  padding:13px 22px;

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

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

  box-shadow:
    0 12px 30px rgba(0,0,0,.22),
    inset 0 1px 0 rgba(255,255,255,.06);

  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);

  opacity:0;
  visibility:hidden;

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

  pointer-events:auto;
}

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

.addvibes-hero-dot{
  position:relative;

  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;

  min-width:98px;
  height:28px;

  padding:0;

  border:0;
  border-radius:999px;

  background:transparent;

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

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

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

  cursor:pointer;
  overflow:visible;

  transition:
    color .22s ease,
    transform .22s ease,
    opacity .22s ease;
}

.addvibes-hero-dot::before{
  content:"";

  flex:0 0 auto;

  width:10px;
  height:10px;

  border-radius:50%;

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

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

  transition:
    width .22s ease,
    border-radius .22s ease,
    background .22s ease,
    box-shadow .22s ease,
    transform .22s ease;
}

.addvibes-hero-dot:hover{
  color:rgba(242,231,216,.92);
  transform:translateY(-1px);
}

.addvibes-hero-dot:hover::before{
  transform:scale(1.15);
  background:rgba(242,231,216,.72);
}

.addvibes-hero-dot.is-active{
  color:#F2E7D8;
}

.addvibes-hero-dot.is-active::before{
  width:28px;
  border-radius:999px;

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

  box-shadow:
    0 0 16px rgba(47,168,217,.34),
    0 0 22px rgba(214,62,156,.24);
}

.addvibes-hero-dot:disabled{
  cursor:wait;
}

.addvibes-hero-dot:focus-visible{
  outline:2px solid #F2E7D8;
  outline-offset:4px;
}

/* =========================
   MINI LOADER ABOVE DOT
========================= */

.addvibes-hero-dot__loader{
  position:absolute;
  left:50%;
  bottom:calc(100% + 14px);

  width:170px;

  padding:10px 11px 9px;

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

  background:
    linear-gradient(
      145deg,
      rgba(11,28,52,.96),
      rgba(7,20,38,.98)
    );

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

  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);

  transform:
    translateX(-50%)
    translateY(6px)
    scale(.96);

  opacity:0;
  visibility:hidden;
  pointer-events:none;

  transition:
    opacity .22s ease,
    visibility .22s ease,
    transform .22s ease;
}

.addvibes-hero-dot__loader::after{
  content:"";

  position:absolute;
  left:50%;
  bottom:-5px;

  width:9px;
  height:9px;

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

  background:#08172A;

  transform:
    translateX(-50%)
    rotate(45deg);
}

.addvibes-hero-dot.is-loading
.addvibes-hero-dot__loader{
  opacity:1;
  visibility:visible;

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

.addvibes-hero-dot__loader-title{
  display:block;

  color:#F2E7D8;

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

  letter-spacing:.10em;
  text-transform:uppercase;
  text-align:left;
}

.addvibes-hero-dot__loader-track{
  position:relative;

  display:block;

  width:100%;
  height:3px;

  margin-top:9px;

  overflow:hidden;

  border-radius:999px;

  background:rgba(242,231,216,.09);
}

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

  width:0%;

  border-radius:inherit;

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

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

  transition:width .16s ease;
}

.addvibes-hero-dot__loader-meta{
  display:flex;
  align-items:center;
  justify-content:space-between;

  margin-top:7px;

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

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

  letter-spacing:.08em;
  text-transform:uppercase;
}

.addvibes-hero-dot__loader-percent{
  color:rgba(242,231,216,.82);
}

/* =========================
   SCROLLBAR-ONLY POPUP
========================= */

.addvibes-scrollbar-popup{
  position:absolute;
  left:50%;
  bottom:118px;
  z-index:40;

  width:min(330px,80vw);

  padding:18px 20px 16px;

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

  background:
    linear-gradient(
      145deg,
      rgba(11,28,52,.96),
      rgba(7,20,38,.98)
    );

  box-shadow:
    0 20px 55px rgba(0,0,0,.32),
    inset 0 1px 0 rgba(255,255,255,.055);

  -webkit-backdrop-filter:blur(12px);
  backdrop-filter:blur(12px);

  transform:
    translateX(-50%)
    translateY(10px)
    scale(.97);

  opacity:0;
  visibility:hidden;
  pointer-events:none;

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

.addvibes-scrollbar-popup.is-visible{
  opacity:1;
  visibility:visible;

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

.addvibes-scrollbar-popup__eyebrow{
  margin:0 0 8px;

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

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

  letter-spacing:.18em;
  text-transform:uppercase;
  text-align:center;
}

.addvibes-scrollbar-popup__title{
  margin:0;

  color:#F2E7D8;

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

  letter-spacing:.07em;
  text-transform:uppercase;
  text-align:center;
}

.addvibes-scrollbar-popup__track{
  position:relative;

  display:block;

  width:100%;
  height:4px;

  margin-top:17px;

  overflow:hidden;
  border-radius:999px;

  background:rgba(242,231,216,.09);
}

.addvibes-scrollbar-popup__bar{
  position:absolute;
  inset:0 auto 0 0;

  width:0%;

  border-radius:inherit;

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

  box-shadow:
    0 0 16px rgba(47,168,217,.32);

  transition:width .16s ease;
}

.addvibes-scrollbar-popup__meta{
  display:flex;
  align-items:center;
  justify-content:space-between;

  margin-top:9px;

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

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

  letter-spacing:.10em;
  text-transform:uppercase;
}

.addvibes-scrollbar-popup__percent{
  color:rgba(242,231,216,.82);
}

/* =========================
   INITIAL SCROLL HINT
========================= */

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

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

  transform:translateX(-50%);

  color:#F2E7D8;

  opacity:0;
  visibility:hidden;

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

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

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

.addvibes-scroll-hint__mouse{
  position:relative;

  width:24px;
  height:38px;

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

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

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

.addvibes-scroll-hint__wheel{
  position:absolute;
  left:50%;
  top:7px;

  width:3px;
  height:7px;

  border-radius:999px;

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

  transform:translateX(-50%);

  animation:
    addvibesHintWheel 1.55s ease-in-out infinite;
}

.addvibes-scroll-hint__arrow{
  position:relative;

  width:10px;
  height:10px;

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

  transform:rotate(45deg);

  animation:
    addvibesHintArrow 1.55s ease-in-out infinite;
}

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

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

  letter-spacing:.20em;
  text-indent:.20em;

  text-transform:uppercase;

  color:rgba(242,231,216,.74);
}

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

  30%,
  75%{
    opacity:1;
  }

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

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

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

@media (min-width:901px) and (max-width:1180px){
  .addvibes-hero-dots{
    min-width:0;
    width:calc(100vw - 44px);
    gap:10px;
    padding:12px 16px;
  }

  .addvibes-hero-dot{
    min-width:0;
    flex:1 1 0;
    gap:6px;
    font-size:8px;
    letter-spacing:.04em;
  }
}

@media (max-width:900px){
  .addvibes-hero-ui{
    display:none !important;
  }
}

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

  .addvibes-hero-dots,
  .addvibes-hero-dot,
  .addvibes-scroll-hint,
  .addvibes-hero-dot__loader,
  .addvibes-hero-dot__loader-bar,
  .addvibes-scrollbar-popup,
  .addvibes-scrollbar-popup__bar{
    transition:none !important;
  }
}


/* Native scrollbar release is controlled by the browser scrollend event. */


}