/*
 Theme Name:   @ Web By D I X Y
 Theme URI:    https://dev.dinurasellapperuma.com
 Description:  Freelance Designer & Developer
 Author:       D I X Y
 Author URI:   https://dinurasellapperuma.com
 Template:     bricks
 Version:      1.3
 Text Domain:  DIXY
*/

/* Hide scrollbar for Chrome, Safari, and Opera 
::-webkit-scrollbar {
  display: none;
}
*/

/* Hide scrollbar for IE, Edge, and Firefox 
body {
  -ms-overflow-style: none; 
  scrollbar-width: none; 
}
*/

.message,
.success {
  background-color: transparent !important;
  font-size: var(--text-s) !important;
  color: var(--dark) !important;
}

/* DIXY MICRO ANIMATIONS */

/* Avoid FUC on frontend*/
.bricks-is-frontend .dixy-animation-trigger {
  opacity: 0;
}

/* Micro Animated Class */
.dixy-animate {
  animation-name: fadeAnimation;
  animation-delay: calc(var(--delay, 0) * 150ms); /* faster start for micro */
  animation-duration: var(--duration, 250ms); /* shorter duration */
  animation-timing-function: ease-out; /* snappier feel */
  animation-fill-mode: forwards;
}

/* Smaller translate distances */
.animation--left-to-right {
  --translate: -8px, 0, 0;
}
.animation--right-to-left {
  --translate: 8px, 0, 0;
}
.animation--top-to-bottom {
  --translate: 0, -8px, 0;
}
.animation--bottom-to-top {
  --translate: 0, 8px, 0;
}

/* Keyframes remain the same */
@keyframes fadeAnimation {
  from {
    transform: translate3d(var(--translate));
    opacity: 0;
  }
  to {
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}

.bricks-mobile-menu-wrapper{
row-gap: var(--space-sm) !important;
padding-right: var(--space-sm) !important;
padding-left: var(--space-sm) !important;
padding-top: var(--space-10xl) !important;
padding-bottom: var(--space-4xl) !important;
}

/* View Transition */

@view-transition {
  navigation: auto;
}

#brx-header {
  view-transition-name: main-header;
}

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 0.3s;
  animation-timing-function: ease-in-out;
}

::view-transition-group(main-header) {
  animation: none;
}

::view-transition-old(root) {
  animation-name: fade-out;
}

::view-transition-new(root) {
  animation-name: fade-in;
}

@keyframes fade-out {
  from { opacity: 1; }
  to { opacity: 0; }
}

@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}