/*
 Theme Name:   Silvertoad Child
 Theme URI:    https://silvertoad.co.uk/silvertoad-child
 Description:  Silvertoad Child Theme
 Author:       Silvertoad
 Author URI:   https://silvertoad.co.uk/
 Template:     hello-elementor
 Version:      1.0.0
 Text Domain:  silvertoad-child
*/

/* Add your custom CSS below */

:root {
  --border-anim-speed: 7s;
  --border-w: 10000px;
}

/* zup line */
.border {
  --c1: #0182dd;
  --c2: #47d7ec;
  width: 100%;
  /*margin-top: 100px;*/
  height: 5px;
  background: repeating-linear-gradient(to right, var(--c1) 0, var(--c1) 80%, var(--c2) 100%);
  background-position: 0 0;
  background-size: var(--border-w) 100%;
  animation: zup var(--border-anim-speed) linear infinite;
  position: relative;
  z-index: 200;
  overflow-x: clip;
}

.border::after {
    position: absolute;
    content: '';
    left: 0;
  right: 0;
  top: -35px;
  bottom: -35px;
  animation: zup var(--border-anim-speed) linear infinite;
  background: repeating-linear-gradient(to right, transparent 0, transparent 80%, var(--c2) 100%);
  background-size: var(--border-w) 100%;
  mask-image: linear-gradient(to bottom, transparent, rgba(1, 1, 1, 0.1), rgba(1, 1, 1, 0.6), rgba(1, 1, 1, 0.1), transparent);
}

.sparks {
  position: absolute;
  animation: shift var(--border-anim-speed) linear infinite;
  top: 50%;
  left: 0;
  width: 1px;
  height: 1px;
  color: #47d7ec;
  box-shadow: 0 0 10px 5px currentColor;
}

.spark {
  position: absolute;
  width: 5px;
  height: 1px;
  background: currentColor;
  top: 0;
  left: 0;
  transform-origin: top left;
  
  animation: spark calc((1 + var(--random2)) * 0.4s) linear infinite;
  animation-delay: calc(-5.2s * (var(--random2) + 0.3 * var(--random)));
}



@keyframes spark {
  from {
    opacity: 1;
    transform: scale(1) rotate(calc(var(--random) * 360deg)) translate(0, 0);
  }  
  
  to {
    opacity: 0;
    transform: scale(3) rotate(calc(var(--random) * 360deg)) translate(10px, 0) rotate(calc(30deg * var(--random-bool)));
  }
}

@keyframes shift {
  0% {
     translate: 0 0;
  }
  
  100% {
    translate: var(--border-w) 0;
  }
}

@keyframes zup {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: var(--border-w) 0;
  }
}


/* Boxes animation*/
:root {
  --anim-speed: 5s;
  --c2: #0182dd;
  --c1: white;
}

/* Common styles for all boxes */
.elementor-element.elementor-element-1970eb4,
.elementor-100 .elementor-element.elementor-element-cf7d058,
.elementor-100 .elementor-element.elementor-element-1bbc255,
.elementor-100 .elementor-element.elementor-element-de0519a {
  position: relative;
  --border-width: 5px;
}

.elementor-element.elementor-element-1970eb4::before,
.elementor-100 .elementor-element.elementor-element-cf7d058::before,
.elementor-100 .elementor-element.elementor-element-1bbc255::before,
.elementor-100 .elementor-element.elementor-element-de0519a::before {
  pointer-events: none;
  
}

/* Specific border styles for each box */
.elementor-element.elementor-element-1970eb4 {
  --border-right: var(--border-width);
  --border-bottom: var(--border-width);
  --border-left: 0;
  --border-top: 0;
  --border-radius: 5px;
}

.elementor-100 .elementor-element.elementor-element-cf7d058 {
  --border-right: var(--border-width);
  --border-top: var(--border-width);
  --border-left: 0;
  --border-bottom: 0;
  --border-radius: 5px;	
}

.elementor-100 .elementor-element.elementor-element-1bbc255 {
  --border-right: var(--border-width);
  --border-bottom: var(--border-width);
  --border-left: 0;
  --border-top: 0;
  --border-radius: 5px;	
}

.elementor-100 .elementor-element.elementor-element-de0519a {
  --border-right: var(--border-width);
  --border-top: var(--border-width);
  --border-left: 0;
  --border-bottom: 0;
  --border-radius: 5px;	
}

/* Apply animated border to all elements */
.elementor-element.elementor-element-1970eb4::before,
.elementor-100 .elementor-element.elementor-element-cf7d058::before,
.elementor-100 .elementor-element.elementor-element-1bbc255::before,
.elementor-100 .elementor-element.elementor-element-de0519a::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: 
    repeating-linear-gradient(to right, var(--c2), var(--c1) 50%), 
    repeating-linear-gradient(to left, var(--c2), var(--c1) 50%), 
    repeating-linear-gradient(to top, var(--c2), var(--c1) 50%), 
    repeating-linear-gradient(to bottom, var(--c2), var(--c1) 50%);
  background-size: 
    200% var(--border-top), 
    200% var(--border-bottom), 
    var(--border-left) 200%, 
    var(--border-right) 200%;
  background-position: 
    calc(100% - var(--zup-percentage)) 0, 
    var(--zup-percentage) 100%, 
    0 var(--zup-percentage), 
    100% calc(100% - var(--zup-percentage));
  background-repeat: no-repeat;
  animation: zup-around var(--anim-speed) linear infinite;
  clip-path: inset(0 round 0);
}

@keyframes zup-around {
  from {
    --zup-percentage: 0%;
  }
  
  to {
    --zup-percentage: 100%;
  }
}


/* Firefox support */
@property --zup-percentage {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 0%;
}



/* Card hover effect */
/* Base styles */
.elementor-element-65f8a7c,
.elementor-element-e889e3a,
.elementor-element-42e275a1,
.elementor-element-1ec8e1bd {
    position: relative;
    cursor: pointer;
    overflow: hidden;
}

/* Pseudo-element for hover effect */
.elementor-element-65f8a7c::before,
.elementor-element-e889e3a::before,
.elementor-element-42e275a1::before,
.elementor-element-1ec8e1bd::before {
    content: "";
    position: absolute;
    top: -1px;  /* Smaller top offset */
    left: -1px;  /* Smaller left offset */
    right: -2px;  /* Keep right larger */
    bottom: -2px;  /* Keep bottom larger */
    z-index: 1;
    pointer-events: none;
    border: 0 solid #0182dd;
    transition: border-width 0s 1.5s;
}

/* Individual border animations */
.elementor-element-65f8a7c:hover::before,
.elementor-element-e889e3a:hover::before,
.elementor-element-42e275a1:hover::before,
.elementor-element-1ec8e1bd:hover::before {
    border-bottom-width: 6px;  /* Keep bottom thicker */
    border-right-width: 6px;   /* Keep right thicker */
    border-top-width: 6px;     /* Thinner top */
    border-left-width: 6px;    /* Thinner left */
    transition: 
        border-bottom-width 0.6s ease 0s,
        border-right-width 0.4s ease 0.2s,
        border-top-width 0.2s ease 0.4s,
        border-left-width 0.3s ease 0.6s;  
}
	
/* Button hover */
/* Base button styles */
.elementor-100 .elementor-element.elementor-element-bd64c1b .elementor-button {
    position: relative;
    overflow: hidden;
}

/* Pseudo-element for hover effect */
/* .elementor-button::before {
/*     content: "";
    position: absolute;
    top: -1px;
    left: -1px;
    right: -2px;
    bottom: -2px;
    z-index: 1;
    pointer-events: none;
    border: 0 solid #51AEB4;
    transition: border-width 0s 1s;
    border-radius: 999px; /* Match the button's border-radius */ */
} */

/* Individual border animations */
/* .elementor-button:hover::before {
/*     border-bottom-width: 6px;
    border-right-width: 6px;
    border-top-width: 6px;
    border-left-width: 6px;
    transition: 
        border-bottom-width 0.2s ease 0s,
        border-right-width 0.2s ease 0.2s,
        border-top-width 0.2s ease 0.4s,
        border-left-width 0.2s ease 0.6s; */
} */


/*Search bar*/
/* Highlight color */
.highlight {
    background-color: #a0eaef !important;
    padding: 2px 4px;
    border-radius: 3px;
	color: black !important;
}

/* Search bar styling */
#simple-search {
    padding: 10px;
    width: 200px;
    margin: 20px 0;
    border: 1px solid #ccc;
    border-radius: 5px;
}

/* Smooth scrolling */
html {
    scroll-behavior: smooth;
}

@property --k0 {
  syntax: "<color>";
  inherits: true;
  initial-value: transparent;
}

@property --k1 {
  syntax: "<color>";
  inherits: true;
  initial-value: transparent;
}

@property --k2 {
  syntax: "<color>";
  inherits: true;
  initial-value: transparent;
}

@property --k3 {
  syntax: "<color>";
  inherits: true;
  initial-value: transparent;
}

@property --m {
  syntax: "<color>";
  inherits: true;
  initial-value: transparent;
}

@keyframes title-header-flash {
  0%, 100% {
    --k0: white;
    --k1: transparent;
    --k2: transparent;
    --k3: transparent;
  }
  
  10% {
    --k0: white;
    --k1: transparent;
    --k2: white;
  }
  
  11% {
    --k0: transparent;
    --k1: white;
    --k2: transparent;
    --k3: white;
  }
  
  15% {
    --k1: var(--voltempo);
    --k3: transparent;
  }
  
  25% {
    --k1: white;
  }
  
  50% {
    --k3: transparent;
  }
  
  60% {
    --k0: transparent;
    --k1: white;
    --k2: transparent;
    --k3: white;
  }
  
  61% {
    --k0: white;
    --k1: transparent;
    --k2: white;
    --k3: transparent;
  }
  
  65% {
    --k2: transparent;
    --k0: var(--voltempo);
  }
  
  75% {
    --k0: white;
  }
}