/**
 * Theme Name: Blocksy Child
 * Description: Blocksy Child theme
 * Author: Creative Themes
 * Template: blocksy
 * Text Domain: blocksy
 */

/**
 * Rám okolo fotiek - náš tím
 */


.team {
  --pk-color-1: #212761;
  --pk-color-2: #C99E45;
  --pk-color-3: #8F3082;
  --pk-color-4: #3B85CB;
  --pk-bg: #FCFAF8;
  --border-width: 7px;

  position: relative;
  display: block;
  border-radius: 50px;
  overflow: hidden;
  isolation: isolate;
  background: transparent;
  box-sizing: border-box;
  animation: team-jelly-desktop 8s ease-in-out infinite alternate;
}

/* animovaný gradient border */
.team::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: var(--border-width);
  border-radius: inherit;
  z-index: 3;
  pointer-events: none;

  background: linear-gradient(
    120deg,
    var(--pk-color-1),
    var(--pk-color-2),
    var(--pk-color-3),
    var(--pk-color-4),
    var(--pk-color-1)
  );
  background-size: 300% 300%;
  background-position: 0% 50%;

  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;

  animation: team-border-flow 6s ease infinite;
}

/* jemný podklad a glow */
.team::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 16% 18%, rgba(201, 158, 69, 0.12) 0%, transparent 34%),
    radial-gradient(circle at 82% 80%, rgba(59, 133, 203, 0.08) 0%, transparent 30%),
    linear-gradient(180deg, rgba(255,255,255,0.24) 0%, rgba(255,255,255,0.04) 100%),
    var(--pk-bg);
  box-shadow: inset 0 0 20px rgba(255,255,255,0.45);
  animation: team-glow-drift 10s ease-in-out infinite alternate;
}

/* Elementor / vnútorný obal */
.team .elementor-widget-container {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
}

/* obrázok bez zmeny veľkosti */
.team img {
  position: relative;
  z-index: 2;
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
  transform: none !important;
  transition: none !important;
  filter: drop-shadow(0 10px 20px rgba(33, 39, 97, 0.10));
}

.team:hover img {
  transform: none !important;
}

/* pohyb gradientu */
@keyframes team-border-flow {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

/* jemný pohyb glowa */
@keyframes team-glow-drift {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(1.2%, -0.8%);
  }
  100% {
    transform: translate(-1%, 1%);
  }
}

/* desktop jelly wobble */
@keyframes team-jelly-desktop {
  0% {
    border-radius: 50px;
  }
  33% {
    border-radius: 45px 55px 48px 52px;
  }
  66% {
    border-radius: 55px 45px 52px 48px;
  }
  100% {
    border-radius: 48px 52px 55px 45px;
  }
}

/* tablet jelly wobble */
@keyframes team-jelly-tablet {
  0% {
    border-radius: 40px;
  }
  50% {
    border-radius: 35px 45px 38px 42px;
  }
  100% {
    border-radius: 40px;
  }
}

/* mobile jelly wobble */
@keyframes team-jelly-mobile {
  0% {
    border-radius: 28px;
  }
  50% {
    border-radius: 24px 32px 26px 30px;
  }
  100% {
    border-radius: 28px;
  }
}

@media (max-width: 1024px) {
  .team {
    border-radius: 40px;
    animation-name: team-jelly-tablet;
  }
}

@media (max-width: 767px) {
  .team {
    border-radius: 28px;
    --border-width: 6px;
    animation-name: team-jelly-mobile;
  }
}




/* 2026 premium hover pre vsetky buttony */
button,
input[type="submit"],
input[type="button"],
input[type="reset"],
.wp-element-button,
.ct-button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.elementor-button,
.elementor-widget-button .elementor-button,
.elementor-kit button,
.elementor-kit .elementor-button {
  transition:
    transform 0.2s cubic-bezier(0.2, 0, 0, 1),
    box-shadow 0.2s cubic-bezier(0.2, 0, 0, 1),
    filter 0.2s cubic-bezier(0.2, 0, 0, 1),
    background-color 0.2s cubic-bezier(0.2, 0, 0, 1),
    border-color 0.2s cubic-bezier(0.2, 0, 0, 1),
    color 0.2s cubic-bezier(0.2, 0, 0, 1);
  will-change: transform, box-shadow;
  backface-visibility: hidden;
  transform: translateY(0) scale(1);
}

/* Hover a focus */
button:hover,
button:focus-visible,
input[type="submit"]:hover,
input[type="submit"]:focus-visible,
input[type="button"]:hover,
input[type="button"]:focus-visible,
input[type="reset"]:hover,
input[type="reset"]:focus-visible,
.wp-element-button:hover,
.wp-element-button:focus-visible,
.ct-button:hover,
.ct-button:focus-visible,
.woocommerce a.button:hover,
.woocommerce a.button:focus-visible,
.woocommerce button.button:hover,
.woocommerce button.button:focus-visible,
.woocommerce input.button:hover,
.woocommerce input.button:focus-visible,
.elementor-button:hover,
.elementor-button:focus-visible,
.elementor-widget-button .elementor-button:hover,
.elementor-widget-button .elementor-button:focus-visible,
.elementor-kit button:hover,
.elementor-kit button:focus-visible,
.elementor-kit .elementor-button:hover,
.elementor-kit .elementor-button:focus-visible {
  transform: translateY(-3px) scale(1.01) !important;
  box-shadow:
    0 8px 18px rgba(15, 23, 42, 0.08),
    0 18px 42px rgba(15, 23, 42, 0.12) !important;
}

/* Active - jemne sa vrati nizsie */
button:active,
input[type="submit"]:active,
input[type="button"]:active,
input[type="reset"]:active,
.wp-element-button:active,
.ct-button:active,
.woocommerce a.button:active,
.woocommerce button.button:active,
.woocommerce input.button:active,
.elementor-button:active,
.elementor-widget-button .elementor-button:active,
.elementor-kit button:active,
.elementor-kit .elementor-button:active {
  transform: translateY(-1px) scale(0.995) !important;
  box-shadow:
    0 4px 10px rgba(15, 23, 42, 0.06),
    0 10px 22px rgba(15, 23, 42, 0.10) !important;
}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {
  button,
  input[type="submit"],
  input[type="button"],
  input[type="reset"],
  .wp-element-button,
  .ct-button,
  .woocommerce a.button,
  .woocommerce button.button,
  .woocommerce input.button,
  .elementor-button,
  .elementor-widget-button .elementor-button,
  .elementor-kit button,
  .elementor-kit .elementor-button {
    transition: none !important;
    transform: none !important;
  }

  button:hover,
  button:focus-visible,
  input[type="submit"]:hover,
  input[type="submit"]:focus-visible,
  input[type="button"]:hover,
  input[type="button"]:focus-visible,
  input[type="reset"]:hover,
  input[type="reset"]:focus-visible,
  .wp-element-button:hover,
  .wp-element-button:focus-visible,
  .ct-button:hover,
  .ct-button:focus-visible,
  .woocommerce a.button:hover,
  .woocommerce a.button:focus-visible,
  .woocommerce button.button:hover,
  .woocommerce button.button:focus-visible,
  .woocommerce input.button:hover,
  .woocommerce input.button:focus-visible,
  .elementor-button:hover,
  .elementor-button:focus-visible,
  .elementor-widget-button .elementor-button:hover,
  .elementor-widget-button .elementor-button:focus-visible,
  .elementor-kit button:hover,
  .elementor-kit button:focus-visible,
  .elementor-kit .elementor-button:hover,
  .elementor-kit .elementor-button:focus-visible {
    transform: none !important;
    box-shadow: none !important;
  }
}