body {
  overflow: hidden;
}
.is-hidden {
  display: none !important;
}
.displace-logo.is-source-hidden {
  opacity: 0 !important;
  pointer-events: none !important;
  visibility: hidden !important;
}
html:not(:has(#bricks-builder-css, #bricks-preview)) .split__word_text,
html:not(:has(#bricks-builder-css, #bricks-preview)) .split__word_text_hero {
  visibility: hidden;
}
/* body:has([data-barba-namespace="works"]) .site-footer, #contact-section {
  display: none;
} */
body:has([data-barba-namespace="services"]) #brx-header {
  mix-blend-mode: difference;
}
body:has([data-barba-namespace="about"]) #brx-header {
  mix-blend-mode: difference;
}
body:has([data-barba-namespace="home"]) #brx-header {
  mix-blend-mode: difference;
}
body:has([data-barba-namespace="home"]) .logo-letter {
  opacity: 0;
  clip-path: inset(0 0 100% 0);
}
body:has([data-barba-namespace="home"]) .button-home-hero, .flicker-word-studio2, .flicker-word-studio1, .studio-text, .outline-text, .flicker-word, .flicker-word-about1, .flicker-word-about2, .button-home-about1, .button-home-about2 {
  visibility: hidden;
}
body:has([data-barba-namespace="home"]) .flicker-word-works1, .btn-home-works, .brand-name-1, .brand-name-2, .brand-name-3, .category-brand-1, .category-brand-2, .category-brand-3 {
  visibility: hidden;
}
body:has([data-barba-namespace="home"]) .prev-brand-1, .prev-brand-2, .prev-brand-3 {
  clip-path: inset(100% 0% 0% 0%);
}
.prev-brand-1.brxe-div,
.prev-brand-2.brxe-div,
.prev-brand-3.brxe-div {
  transition:
    all 0.6s ease;
}

.prev-brand-1.brxe-div.is-hover,
.prev-brand-2.brxe-div.is-hover,
.prev-brand-3.brxe-div.is-hover {
  padding-top: 0;
  padding-right: 0;
  padding-bottom: 0;
  padding-left: 0;
}
/* Works text initial hide - prevent flash before GSAP runs */
.branddesc__works1,
.branddesc__works2,
.branddesc__works3,
.branddesc__works4,
.brandname__works1,
.brandname__works2,
.brandname__works3,
.brandname__works4,
.brandbtn__works1,
.brandbtn__works2,
.brandbtn__works3,
.brandbtn__works4 {
  opacity: 0;
  visibility: hidden;
  will-change: opacity, visibility;
}
.loading {
  opacity: 0;
  visibility: hidden;
  will-change: opacity, visibility;
}
/* Lenis initial stop */
html.is-scroll-locked,
body.is-scroll-locked {
  overflow: hidden !important;
  height: 100% !important;
  overscroll-behavior: none;
}

body.is-scroll-locked {
  touch-action: none;
}
/* Sembunyikan scrollbar default untuk semua browser */
html {
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE dan Edge */
}

html::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Opera */
}

/* ===== SCROLL INDICATOR ===== */
.scroll-indicator {
    position: fixed;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    width: 6px;
    height: 30vh;
    background: rgba(255, 148, 243, 0.08);
    border-radius: 10px;
    z-index: 999;
    overflow: hidden;
    opacity: 0;
    transition: opacity 0.4s ease;
}

.scroll-indicator.visible {
    opacity: 1;
}

.scroll-thumb {
    width: 100%;
    background: #f156ff;
    border-radius: 10px;
    position: absolute;
    top: 0;
    left: 0;
    transition: height 0.1s ease-out, top 0.1s ease-out;
    box-shadow: 0 0 12px rgba(241, 86, 255, 0.6),
                0 0 24px rgba(241, 86, 255, 0.3);
}

/* Glow effect saat scroll */
.scroll-thumb.active {
    box-shadow: 0 0 16px rgba(241, 86, 255, 0.8),
                0 0 32px rgba(241, 86, 255, 0.5),
                0 0 48px rgba(241, 86, 255, 0.3);
}

/* Responsive */
@media (max-width: 768px) {
    .scroll-indicator {
        right: 10px;
        width: 5px;
    }
    
    .content {
        padding: 40px 20px;
    }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .scroll-indicator,
    .scroll-thumb,
    .section {
        transition: none;
    }
}
/* GLOBAL COLOR */
:root {
  --accent-color:#FFF;
  --main-color:#071B3C;
  font-size: 10px !important;
}
/* END GLOBAL COLOR */

/* GLOBAL BUTTON RIPPLE ANIMATION */
.global-ripple-button.ripple-button{
  display:inline-flex;
  align-items:center;
  width:fit-content;
  white-space:nowrap;
  line-height:normal;
  overflow:hidden;
  position:relative;
  transform:translateZ(0);
  backface-visibility:hidden;
  -webkit-font-smoothing:subpixel-antialiased;
  -webkit-perspective:1000;
  will-change:transform;
  --amplitude:5%;
  text-decoration:none;
  border:0;
  cursor:pointer;
  user-select:none;
}
.global-ripple-button .ripple-button__line{
  display: inline-flex;
  align-items: center;
  width: 100%;
  
}

.global-ripple-button .ripple-button__line--ghost{
  opacity: 0;
}
.global-ripple-button .ripple-button__pseudo{
  width:100%;
  text-align:center;
  position:relative;
  overflow:hidden;
  will-change:transform;
  display:inline-block;
}

.global-ripple-button .ripple-button__text{
  opacity:0;
  display:inline-block;
  will-change:transform;
}

.global-ripple-button .ripple-button__before{
  right:0;
  width:100%;
  text-align:center;
  line-height:inherit;
  position:absolute;
  top:0;
  left:0;
  will-change:transform;
}
.global-ripple-button .ripple-button__after svg,
.global-ripple-button .ripple-button__after svg *{
  fill: var(--accent-color) !important;
}

.global-ripple-button .ripple-button__after i{
  color: var(--accent-color); /* icon font */
}
.global-ripple-button .ripple-button__after{
  position:absolute;
  top:-300%;
  left:0;
  right:0;
  width:100%;
  text-align:center;
  line-height:inherit;
  z-index:5;
  color:rgb(255, 255, 255);
  will-change:transform;
}

.global-ripple-button .ripple-button__hover-fill{
  position:absolute;
  top:110%;
  left:calc(var(--amplitude) * -1);
  height:150%;
  width:calc(100% + var(--amplitude) * 2);
  background:#000;
  z-index:-5;
  border-radius:50% 50% 0 0;
  will-change:transform;
}
/* END GLOBAL BUTTON RIPPLE ANIMATION */

/* GLOBAL BUTTON UNDERLINE ANIMATION */
.underline-button {
  position: relative;
  display: inline-block;
  --after-scale: 0;
  --after-origin: left;
}

.underline-button::after {
  content: '';
  position: absolute;
  bottom: calc(-100vw / 500);
  left: 0;
  width: 100%;
  height: 2px;
  background-color: currentColor;
  transform: scaleX(var(--after-scale));
  transform-origin: var(--after-origin) center;
  transition: none;
  border-radius:calc(100vw/100);
}
html, body {
  overscroll-behavior: none;
  -webkit-overflow-scrolling: auto;
}
html.lenis,
html.lenis body {
  height: auto;
}

.lenis:not(.lenis-autoToggle).lenis-stopped {
  overflow: clip;
}

.lenis [data-lenis-prevent],
.lenis [data-lenis-prevent-wheel],
.lenis [data-lenis-prevent-touch] {
  overscroll-behavior: contain;
}

.lenis.lenis-smooth iframe {
  pointer-events: none;
}

.lenis.lenis-autoToggle {
  transition-property: overflow;
  transition-duration: 1ms;
  transition-behavior: allow-discrete;
}
.wrapper-line-effect {
  width: 100%;
  pointer-events: none;
}

.line-effect {
  width: 100%;
  height: 100%;
  background: transparent;
  pointer-events: none;
}

/* Class khusus untuk canvas */
.canvas-line-effect {
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
}