/*
Theme Name:  Afuorismi Twenty TwentyFive.
Description:  Theme to support tutsplus tutorial. Child theme for the Twenty Nineteen theme.
Author:  demi
Template:  twentytwentyfive
Version:  1.0
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: twentytwentyfive
*/

body:not(.loaded):not(.wp-admin):not(.login) {
  opacity: 0;
  overflow: hidden;
  background: white; /* o #000 per nero */
}
body.loaded, :not(.wp-admin):not(.login) {
  opacity: 1;
  transition: opacity 0.3s ease;
}

/* Animazioni e stili avanzati */
@keyframes neonPulse {
    0%, 100% { opacity: 0.8; }
    50% { opacity: 1; }
}

/* Stili testo */
.wp-site-blocks[class*="text-style-"] {
    font-size: 2em;
    font-weight: 800;
    text-align: center!important;
    transition: all 0.3s ease;
}


/* STILE 1 - Effetto ologramma */
.text-style-1 {
  color: #fff;
  text-shadow: 
      0 0 10px rgba(0, 243, 255, 0.5),
      0 0 20px rgba(0, 243, 255, 0.3);
  animation: hologram 2s infinite alternate;
  position: relative;
  backdrop-filter: blur(2px);
}

@keyframes hologram {
  0% { opacity: 0.8; transform: skew(-0.5deg); }
  100% { opacity: 1; transform: skew(0.5deg); }
}

/* STILE 2 - Testo liquido */
.text-style-2 {
  background: linear-gradient(90deg, #ff6b6b, #4ecdc4);
  -webkit-background-clip: text;
  background-clip: text;
  color: #fff;
  position: relative;
  transition: all 0.4s ease;
}

.text-style-2:hover {
  transform: scale(1.02);
  filter: url(#liquidDistortion);
}

/* STILE 3 - Cyberpunk Glitch */
.text-style-3 {
  color: #fff;
  text-shadow: 
    1px 1px 0 #285656, -2px -2px 0 #241c24;
  /*animation: glitch 1s infinite;*/
}
/*
@keyframes glitch {
  0% { transform: translate(0); }
  20% { transform: translate(-2px, 2px); }
  40% { transform: translate(-2px, -2px); }
  60% { transform: translate(2px, 2px); }
  80% { transform: translate(2px, -2px); }
  100% { transform: translate(0); }
}
*/
/* STILE 4 - Kinetic Typography */
.text-style-4 {
  display: inline-block;
  /*transform: perspective(500px) rotateX(25deg);*/
  transition: transform 0.5s;
  color: #fff;
  text-shadow: 0 2px 5px rgba(45, 52, 54, 0.3);
}

.text-style-14:hover {
  transform: perspective(1000px) rotateX(0);
}

/* STILE 5 - Dynamic Gradient Mask */
.text-style-5 {
  background: linear-gradient(90deg, #fc5c7d, #6a82fb);
  -webkit-background-clip: text;
  background-clip: text;
  color: #fff;
}

/* STILE 6 - 3D Layered Shadow */
.text-style-6 {
  color: #fff;
  text-shadow: 
      1px 1px 0 #c0392b,
      2px 2px 0 #2980b9;
}

.text-style-6:hover {
  transform: translate(-3px, -3px);
  text-shadow: 
      3px 3px 0 #c0392b,
      6px 6px 0 #2980b9,
      /*9px 9px 0 #27ae60;*/
}

/* STILE 7 - Magnetic Hover */
.text-style-7 {
  color: #fff;
  display: inline-block;
  text-shadow: 
      1px 1px 0 rgba(6, 106, 182, 0.3),
      2px 2px 0 rgba(3, 69, 120, 0.3),
      4px 4px 0 rgba(7, 90, 153, 0.2),
      6px 6px 10px rgba(0,0,0,0.1);
}


/* STILE 8 - Gradient Scroll Reveal */
.text-style-8 {
  position: relative;
  background: linear-gradient(90deg, #fd79a8, #a55eea);
  -webkit-background-clip: text;
  background-clip: text;
  overflow: hidden;
  color:#fff;
}

.text-style-8::before {
  content: attr(data-text);
  position: absolute;
  width: 100%;
  color: #2d3436;
  clip-path: inset(0 100% 0 0);
  transition: clip-path 1s ease;
}

.text-style-8:hover::before {
  clip-path: inset(0 0 0 0);
}

/* STILE 9 - Particle Text */
.text-style-9 {
  position: relative;
  background: radial-gradient(circle, #ff7675, #d63031);
  -webkit-background-clip: text;
  background-clip: text;
  filter: drop-shadow(0 0 10px rgba(214, 48, 49, 0.5));
  color: #CCC;
}

/*
.text-style-9::after {
  content: "";
  position: absolute;
  top: -5px;
  left: -5px;
  right: -5px;
  bottom: -5px;
  background: repeating-radial-gradient(circle, transparent 0 5px, #ff7675 5px 10px);
  mix-blend-mode: overlay;
  opacity: 0;
  transition: opacity 0.3s;
}
*/
.text-style-9:hover::after {
  opacity: 1;
  color: #fff;
  filter: drop-shadow(0 0 20px rgba(214, 48, 49, 0.5));
}

/* STILE 10 - Isometric Depth */
.text-style-10 {
  color: #fff;
  text-shadow: 
      1px 1px 0 rgba(9, 132, 227, 0.3),
      2px 2px 0 rgba(9, 132, 227, 0.3),
      4px 4px 0 rgba(9, 132, 227, 0.2),
      6px 6px 10px rgba(0,0,0,0.1);
  transition: all 0.4s ease;
}

/* Stili sfondo */
body[class*="bg-style-"] {
    height:100vh;
    width: 100vw;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Stili per gli sfondi */
body.bg-style-1 {
    background: linear-gradient(135deg, #9cded0 0%, #004676 100%);
    animation: bgPan 10s infinite alternate;
}
/*
@keyframes bgPan {
    0% { background-position: 0% 0%; }
    100% { background-position: 100% 100%; }
}
*/
body.bg-style-2 {
  background: radial-gradient(farthest-corner at top, #FFFFFF 0%, #ffb3ff 8%, #ff33ff 24.5%, #800080 62.5%, #b300b3 100%);
  animation: colorChange 5s infinite alternate linear;
  height:100vh;
  width: 100vw;

}

body.bg-style-3  {
    background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
}


body.bg-style-4 {
    animation: rotate-bg-color 100s infinite;
  }
  
  @keyframes rotate-bg-color {
    0% {
      background-color: steelblue;
    }
    10% {
      background-color: red;
    }
    20% {
      background-color: orange;
    }
    30% {
      background-color: yellow;
    }
    40% {
      background-color: green;
    }
    50% {
      background-color: blue;
    }
    60% {
      background-color: indigo;
    }
    70% {
      background-color: violet;
    }
    80% {
      background-color: pink;
    }
    90% {
      background-color: brown;
    }
    100% {
      background-color: black;
    }
  }
  
  body.bg-style-5 {
    background: linear-gradient(132deg, #000000,#00ff00, #0000ff,#e60073,#ff0000,#ffffff);
    background-size: 400% 400%;
    animation: BackgroundGradient 150s ease infinite;
  }
  
  @keyframes BackgroundGradient {
    0% {background-position: 0% 50%;}
    50% {background-position: 100% 50%;}
    100% {background-position: 0% 50%;}
  }


  @property --a{
    syntax: '<angle>';
    inherits: true;
    initial-value: 0deg;
  }
  @property --p {
    syntax: '<percentage>';
    inherits: true;
    initial-value: 0%;
  }
  @property --c1 {
    syntax: '<color>';
    inherits: true;
    initial-value: #000;
  }
  @property --c2 {
    syntax: '<color>';
    inherits: true;
    initial-value: #000;
  }
  
  @property --a{
    syntax: '<angle>';
    inherits: true;
    initial-value: 0deg;
  }
  @property --p {
    syntax: '<percentage>';
    inherits: true;
    initial-value: 0%;
  }
  @property --c1 {
    syntax: '<color>';
    inherits: true;
    initial-value: #000;
  }
  @property --c2 {
    syntax: '<color>';
    inherits: true;
    initial-value: #000;
  }
  
  body.bg-style-6 {
    background: #77dd77;
    /* background-image: linear-gradient(314deg, #77dd77 0%, #004225 74%); */
    background: radial-gradient(circle, rgb(46, 182, 71) 0%, rgb(41, 94, 72) 45%, rgb(11, 76, 36) 100%);
    
  }

  body.bg-style-7 {
    margin: auto;
    font-family: -apple-system, BlinkMacSystemFont, sans-serif;
    overflow: auto;
    background: linear-gradient(315deg, rgba(101,0,94,1) 3%, rgba(60,132,206,1) 38%, rgba(48,238,226,1) 68%, rgba(255,25,25,1) 98%);
    animation: gradient 15s ease infinite;
    background-size: 400% 400%;
    background-attachment: fixed;
}

@keyframes gradient {
    0% {
        background-position: 0% 0%;
    }
    50% {
        background-position: 100% 100%;
    }
    100% {
        background-position: 0% 0%;
    }
}

.wave {
    background: rgb(255 255 255 / 25%);
    border-radius: 1000% 1000% 0 0;
    position: fixed;
    width: 200%;
    height: 12em;
    animation: wave 10s -3s linear infinite;
    transform: translate3d(0, 0, 0);
    opacity: 0.8;
    bottom: 0;
    left: 0;
    z-index: -1;
}

.wave:nth-of-type(2) {
    bottom: -1.25em;
    animation: wave 18s linear reverse infinite;
    opacity: 0.8;
}

.wave:nth-of-type(3) {
    bottom: -2.5em;
    animation: wave 20s -1s reverse infinite;
    opacity: 0.9;
}

@keyframes wave {
    2% {
        transform: translateX(1);
    }

    25% {
        transform: translateX(-25%);
    }

    50% {
        transform: translateX(-50%);
    }

    75% {
        transform: translateX(-25%);
    }

    100% {
        transform: translateX(1);
    }
}


  body.bg-style-8 {
    background: rgb(2,0,36);
    background: radial-gradient(circle, rgba(2,0,36,1) 0%, rgba(9,9,121,1) 35%, rgba(0,212,255,1) 100%);
  }

  body.bg-style-9  {
    background: rgb(63,94,251);
    background: radial-gradient(circle, rgba(63,94,251,1) 0%, rgba(252,70,107,1) 100%);
  }


  body.bg-style-10 {
    text-shadow: 2px 2px 4px rgba(164, 123, 123, 0.6);
    background: linear-gradient(-45deg, #915e5e, #8197aa, #3a765b, #6b319a);
    background-size: 400% 400%;
    animation: gradient 15s ease infinite;
    position: relative; 
  }

  body.bg-style-10::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at center, transparent 0%, rgba(0, 0, 0, 0.05) 100%);
    pointer-events: none;
  }
  
  
  @keyframes gradient {
    0% {
      background-position: 0% 50%;
    }
    50% {
      background-position: 100% 50%;
    }
    100% {
      background-position: 0% 50%;
    }
  }