/*
 Theme Name:   SSC Skellefteå Child Theme
 Theme URI:    https://sscgroup.se/
 Description:  Use this child theme to extend Bricks.
 Author:       CCO
 Author URI:   https://sscgroup.se/
 Template:     bricks
 Version:      2.0
 Text Domain:  bricks
*/


/*** 
Header Settings
=========================================================== ***/

/* No scroll - normal state */
.x-header_sticky-inactive {
  backdrop-filter: none; /* No blur */
  -webkit-backdrop-filter: none; /* For Safari support */
  transition: backdrop-filter 0.3s ease, -webkit-backdrop-filter 0.3s ease; /* Smooth transition */
}

/* Scrolled - add blur */
.x-header_sticky-active {
  backdrop-filter: blur(10px); /* Adjust blur intensity */
  -webkit-backdrop-filter: blur(10px); /* Safari support */
	box-shadow: rgba(60, 64, 67, 0.1) 0px 1px 2px 0px, rgba(60, 64, 67, 0.05) 0px 1px 3px 1px;
}


.x-header_sticky-active .brx-nav-nested-items > .brxe-dropdown.open > .brx-dropdown-content {
	translateY(32px) !important;
}


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

.animation-trigger {
    --delay: attr(data-delay number);
}
 
/* Animated Class */
.animate {
    animation-name: fadeAnimation;
    animation-delay: calc(var(--delay, 1) * 150ms);
    animation-duration: var(--duration, 600ms);
    animation-timing-function: ease-in-out;
    animation-fill-mode: forwards;
}
 
/* Change translate Origin */
.animation--left-to-right{
  --translate: -40px,0,0;
}
.animation--right-to-left{
  --translate: 40px,0,0;
}
.animation--top-to-bottom{
  --translate: 0,-40px,0;
}
.animation--bottom-to-top{
  --translate: 0,40px,0;
}
 
/* Keyframes */
@keyframes fadeAnimation{
  from{
    transform: translate3d(var(--translate));
  }
  to{
    opacity: 1;
    transform: translate3d(0,0,0);
  }
}


/*** 
BACKGROUND IMAGE CONTROL FOR TEMPLATES
Control background position on template-generated pages.
=========================================================== ***/

[data-bg-position="Left Top"] {
	object-position: 20% 20% !important;
}

[data-bg-position="Left Center"] {
	object-position: 20% 50% !important;
}

[data-bg-position="Left Bottom"] {
	object-position: 20% 80% !important;
}

[data-bg-position="Center Top"] {
	object-position: 50% 20% !important;
}

[data-bg-position="Center Center"] {
	object-position: 50% 50% !important;
}

[data-bg-position="Center Bottom"] {
	object-position: 50% 80% !important;
}

[data-bg-position="Right Top"] {
	object-position: 80% 20% !important;
}

[data-bg-position="Right Center"] {
	object-position: 80% 50% !important;
}

[data-bg-position="Right Bottom"] {
	object-position: 80% 80% !important;
}