/* 
Theme Name: Hello Elementor Child
Theme URI: https://github.com/elementor/hello-theme-child/
Description: Hello Elementor Child is a child theme of Hello Elementor, created by Elementor team
Author: Elementor Team
Author URI: https://elementor.com/
Template: hello-elementor
Version: 2.0.0
Text Domain: hello-elementor-child
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/

/* Add your custom styles here */


/* Icone fluttuanti */

.icona-magica img {
  animation-name: fluttua-magica;
  animation-duration: 6s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  transform-origin: center center;
  will-change: transform;
}

.icona-magica.magia-1 img {
  animation-duration: 5.5s;
  animation-delay: -0.6s;
}

.icona-magica.magia-2 img {
  animation-duration: 7s;
  animation-delay: -2s;
}

.icona-magica.magia-3 img {
  animation-duration: 6.4s;
  animation-delay: -1.3s;
}

@keyframes fluttua-magica {
  0%, 100% {
    transform: translate3d(0, 0, 0) rotate(0deg);
  }

  25% {
    transform: translate3d(6px, -10px, 0) rotate(2deg);
  }

  50% {
    transform: translate3d(-4px, -16px, 0) rotate(-2deg);
  }

  75% {
    transform: translate3d(-7px, -6px, 0) rotate(1deg);
  }
}


/* Titoli oro */

.testo-gradiente .elementor-heading-title {
  display: inline-block;
  background: linear-gradient(
    45deg,
    #a35c1a 0%,
    #f3c75a 28%,
    #fff08a 42%,
    #9b5a18 68%,
    #f7cf58 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  line-height: 1.15;
  padding-bottom: 0.08em;
}

/* Bordo oro animato div */
@property --gradient-angle {
  syntax: "<angle>";
  initial-value: 0turn;
  inherits: false;
}

.bordodiv {
  position: relative;
  overflow: hidden;
}

.bordodiv::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 3px;
  pointer-events: none;
  z-index: 1;

  background: conic-gradient(
    from var(--gradient-angle),
    #584827,
    #c7a03c,
    #f9de90,
    #c7a03c,
    #584827
  );

  animation: bordo-oro 3s linear infinite;

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

  border-radius: inherit;
}

.bordodiv > * {
  position: relative;
  z-index: 2;
}

@keyframes bordo-oro {
  to {
    --gradient-angle: 1turn;
  }
}

/* Pulsanti con bagliori */

/* ── btnmagic: stelline sul bordo ── */
/* ── btnmagic: stelline sul bordo ── */
.btnmagic { position: relative; display: inline-block; }

.btnmagic .sp {
  position: absolute;
  pointer-events: none;
  z-index: 10;
  opacity: 0;
  transform: scale(0);
}

.btnmagic .sp svg {
  display: block;
  filter:
    drop-shadow(0 0 4px rgba(249,222,144,1))
    drop-shadow(0 0 10px rgba(199,160,60,1))
    drop-shadow(0 0 18px rgba(199,160,60,.6));
}

/* TOP */
.btnmagic .sp1  { width:13px; height:13px; top:-7px;    left:5%;    animation: btnmagic-sp 3.2s ease-in-out 0.0s infinite; }
.btnmagic .sp2  { width:9px;  height:9px;  top:-5px;    left:18%;   animation: btnmagic-sp 2.9s ease-in-out 0.5s infinite; }
.btnmagic .sp3  { width:14px; height:14px; top:-7px;    left:32%;   animation: btnmagic-sp 3.5s ease-in-out 1.1s infinite; }
.btnmagic .sp4  { width:10px; height:10px; top:-5px;    left:48%;   animation: btnmagic-sp 3.0s ease-in-out 0.3s infinite; }
.btnmagic .sp5  { width:13px; height:13px; top:-7px;    left:63%;   animation: btnmagic-sp 3.3s ease-in-out 1.8s infinite; }
.btnmagic .sp6  { width:9px;  height:9px;  top:-5px;    right:12%;  animation: btnmagic-sp 2.8s ease-in-out 0.8s infinite; }
.btnmagic .sp7  { width:11px; height:11px; top:-6px;    right:3%;   animation: btnmagic-sp 3.1s ease-in-out 2.3s infinite; }
/* BOTTOM */
.btnmagic .sp8  { width:13px; height:13px; bottom:-7px; left:8%;    animation: btnmagic-sp 3.4s ease-in-out 0.6s infinite; }
.btnmagic .sp9  { width:9px;  height:9px;  bottom:-5px; left:22%;   animation: btnmagic-sp 2.9s ease-in-out 1.4s infinite; }
.btnmagic .sp10 { width:14px; height:14px; bottom:-7px; left:40%;   animation: btnmagic-sp 3.2s ease-in-out 0.2s infinite; }
.btnmagic .sp11 { width:10px; height:10px; bottom:-5px; left:57%;   animation: btnmagic-sp 3.0s ease-in-out 2.0s infinite; }
.btnmagic .sp12 { width:12px; height:12px; bottom:-6px; right:15%;  animation: btnmagic-sp 3.5s ease-in-out 1.0s infinite; }
.btnmagic .sp13 { width:9px;  height:9px;  bottom:-5px; right:4%;   animation: btnmagic-sp 2.8s ease-in-out 2.7s infinite; }
/* LEFT */
.btnmagic .sp14 { width:9px;  height:9px;  top:15%;     left:-4px;  animation: btnmagic-sp 3.1s ease-in-out 0.4s infinite; }
.btnmagic .sp15 { width:9px;  height:9px;  top:50%;     left:-4px;  animation: btnmagic-sp 2.9s ease-in-out 1.6s infinite; }
.btnmagic .sp16 { width:9px;  height:9px;  top:78%;     left:-4px;  animation: btnmagic-sp 3.3s ease-in-out 2.2s infinite; }
/* RIGHT */
.btnmagic .sp17 { width:9px;  height:9px;  top:20%;     right:-4px; animation: btnmagic-sp 3.0s ease-in-out 0.9s infinite; }
.btnmagic .sp18 { width:9px;  height:9px;  top:53%;     right:-4px; animation: btnmagic-sp 3.2s ease-in-out 1.7s infinite; }
.btnmagic .sp19 { width:9px;  height:9px;  top:80%;     right:-4px; animation: btnmagic-sp 2.8s ease-in-out 2.5s infinite; }

@keyframes btnmagic-sp {
  0%,  45%, 100% { opacity: 0;   transform: scale(0); }
  58%            { opacity: 1;   transform: scale(1.2); }
  72%            { opacity: .15; transform: scale(.6); }
}

/* ── sectionmagic ── */
.sectionmagic.elementor-section,
.sectionmagic.e-container,
.sectionmagic.e-flex {
  position: relative;
  overflow: hidden;
}

.sectionmagic .ssp {
  position: absolute;
  pointer-events: none;
  z-index: 0;
  opacity: 0;
  transform: scale(0);
}

.sectionmagic .ssp svg {
  display: block;
  filter:
    drop-shadow(0 0 3px rgba(249,222,144,.9))
    drop-shadow(0 0 7px rgba(199,160,60,.6));
}

@keyframes sectionmagic-sp {
  0%,  20%, 100% { opacity: 0;   transform: scale(0); }
  55%            { opacity: .45; transform: scale(1); }
  70%            { opacity: 0;   transform: scale(.5); }
}


/* ── bordo oro immagini ── */

@property --gradient-angle {
  syntax: "<angle>";
  initial-value: 0turn;
  inherits: false;
}

.bordoimg {
  position: relative;
  padding: 2px;
  border-radius: 10px;
  background: conic-gradient(
    from var(--gradient-angle),
    #584827,
    #c7a03c,
    #f9de90,
    #c7a03c,
    #584827
  );
  animation: bordo-oro 3s linear infinite;
  overflow: hidden;
}

.bordoimg img {
  display: block;
  width: 100%;
  border-radius: 8px;
}

@keyframes bordo-oro {
  to {
    --gradient-angle: 1turn;
  }
}