/*
 Theme Name:   Bricks Child Theme
 Theme URI:    https://bricksbuilder.io/
 Description:  Use this child theme to extend Bricks.
 Author:       Bricks
 Author URI:   https://bricksbuilder.io/
 Template:     bricks
 Version:      1.1
 Text Domain:  bricks
*/

body {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}

::-moz-selection { 
background: var(--at-primary);
color: var(--at-white);
}
::selection { 
background: var(--at-primary);
color: var(--at-white);
}

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

/* Animated Class */
.animate {
  animation-name: fadeAnimation;
  animation-delay: calc(var(--delay, 0) * 200ms);
  animation-duration: var(--duration, 400ms);
  animation-timing-function: ease-in-out;
  animation-fill-mode: forwards;
}

/* Change translate Origin */
.animation--left-to-right{
  --translate: -20px,0,0;
}
.animation--right-to-left{
  --translate: 20px,0,0;
}
.animation--top-to-bottom{
  --translate: 0,-20px,0;
}
.animation--bottom-to-top{
  --translate: 0,20px,0;
}

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

/* Stack divs */
.stack {
  display: grid;
  place-content: center;
  > * {
    grid-area: 1 / 1;
  }
}

/* Hover image zoom */
.hover-image {
	position: relative;
	align-self: stretch;
	height: auto;
	flex-shrink: 0;
	object-fit: cover;
	max-width: 100%;
	overflow: hidden;
	transition: transform 0.3s ease-in-out;
}
.hover-image-wrapper { overflow: clip; }
.hover-image-wrapper:hover .hover-image {
	transform: scale(1.05);
}

/* Hover background image zoom */
.zoom-in::after,
.zoom-out::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: inherit;
  background-size: cover;
  transform-origin: center;
  transition: transform 0.4s ease-in-out;
}
.zoom-in:focus::after, .zoom-in:hover::after { transform: scale(1.05); }
.zoom-out::after { transform: scale(1.05); }
.zoom-out:focus::after, .zoom-out:hover::after { transform: scale(1); }

/* Utility Classes */
.at-shadow--s { box-shadow: var(--at-shadow--s); }
.at-shadow--m { box-shadow: var(--at-shadow--m); }
.at-shadow--l { box-shadow: var(--at-shadow--l); }
.at-shadow--xl { box-shadow: var(--at-shadow--xl); }
.at-shadow--2xl { box-shadow: var(--at-shadow--2xl); }

/* Gutenberg content styles */
h4.wp-block-heading {
  font-size: var(--at-heading--s);
  margin-bottom: 1em;
}
h3.wp-block-heading {
  font-size: var(--at-heading--m);
  margin-bottom: 1em;
}
h2.wp-block-heading {
  font-size: var(--at-heading--l);
  margin-bottom: 1em;
}
ul.wp-block-list { margin-top: 0;}