/*
Theme Name: Spiekermann Child
Template: spiekermann
Version: 1.0
Author: Nathan Albertassi
Theme URI:    https://example.com/spiekermann-child   (optional)
Description:  My customizations for Spiekermann.
License:      GNU General Public License v2 or later
License URI:  https://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  spiekermann-child  (optional)
*/

/* Put additional CSS below */

/** CUSTOM CSS FOR LOGO **/
    .logo-container {
        cursor: pointer;
        position: relative;
        /* top: 20px;
        left: 20px;
        width: 50px;
        height: 50px; */
        cursor: pointer;
        display: flex
    ;
        align-items: center;
        justify-content: left;
        z-index: 1000;
    }
    .logo-link {
      text-decoration: none;
      display: flex;
      align-items: center;
      z-index: 1000;
      cursor: pointer;
      gap: 12px;
      /* Removed position, top, left */
    }
    .logo-shape {
      width: 50px;
      height: 50px;
      background: #fff;
      z-index: 1;
      animation: shape-rotate-morph 5s linear infinite;
      transition: border-radius 0.1s, transform 0.1s;
      flex-shrink: 0;
    }
    .logo-link:hover .logo-shape {
      animation-play-state: paused;
      border-radius: 50% 0 0 0 !important;
      transform: rotate(0deg) !important;
    }
    .logo-text {
      display: inline-block;
      width: 8em; /* Adjust this value to fit your text at max letter-spacing */
      font-family: "Alpha Lyrae", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
      font-size: 1.2rem;
      color: #fff;
      letter-spacing: 0.2em;
      white-space: nowrap;
      z-index: 2;
      pointer-events: auto;
      text-decoration: none;
      transition: letter-spacing 0.4s cubic-bezier(.77,0,.18,1);
      cursor: pointer;
      margin-left: 15px;
    }
    .logo-link:hover .logo-text {
      animation: letter-spacing-animate 0.6s cubic-bezier(.77,0,.18,1) forwards;
    }
    @keyframes shape-rotate-morph {
      0% { border-radius: 0; transform: rotate(0deg);}
      10% { border-radius: 0; transform: rotate(-90deg);}
      25% { border-radius: 0 0 25% 0; transform: rotate(-90deg);}
      35% { border-radius: 0 0 25% 0; transform: rotate(-180deg);}
      50% { border-radius: 50% 0 50% 0; transform: rotate(-180deg);}
      60% { border-radius: 50% 0 50% 0; transform: rotate(-270deg);}
      75% { border-radius: 50%; transform: rotate(-270deg);}
      85% { border-radius: 50%; transform: rotate(-360deg);}
      100% { border-radius: 0; transform: rotate(90deg);}
    }
    @keyframes letter-spacing-animate {
      0% { letter-spacing: 0.2em; }
      100% { letter-spacing: -0.1em; }
    }
/** CUSTOM CURSOS **/
.customcursor {
   position: absolute;
   top: 0;
   left: 0;
   pointer-events: none;
   z-index: 9;
   overflow: visible;
   background-color: transparent;
  mix-blend-mode: difference;
  border: 1px solid white;
  width: 40px;
  height: 40px;
  border-radius: 9999px;
 }
.customcursor2 {
   position: absolute;
   top: 0;
   left: 0;
   pointer-events: none;
   z-index: 9;
   overflow: visible;
   background-color: white;
  mix-blend-mode: difference;
  border: 1px solid white;
  width: 15px;
  height: 15px;
 }

 @media (hover: none) and (pointer: coarse) {
  .customcursor,
  .customcursor2 {
    display: none !important;
  }
}

/* 
.customcursor,
.customcursor2 {
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 9999;
}

.customcursor {
   overflow: visible;
   background-color: transparent;
  mix-blend-mode: difference;
  border: 1px solid white;
  width: 40px;
  height: 40px;
  border-radius: 9999px;
 }
.customcursor2 {
   overflow: visible;
   background-color: white;
  mix-blend-mode: difference;
  border: 1px solid white;
  width: 15px;
  height: 15px;
 } */
 

/* ---------- Zoom-in hover for post thumbnails ---------- */

.wp-block-button__link.wp-element-button {
  position: relative;
  display: inline-block;
  color: #2e3e2f;
  background: #fff !important;
  border: 2px solid #2e3e2f;
  overflow: visible; /* allows border animation to show outside */
  border-radius: 0;  /* removes rounded corners */
  z-index: 1;
  transition: color 0.2s, background 0.2s, border-color 0.2s;
}

/* Glitch border pseudo-elements */
.wp-block-button__link.wp-element-button::before,
.wp-block-button__link.wp-element-button::after {
  content: "";
  position: absolute;
  top: -2px; left: -2px; right: -2px; bottom: -2px;
  pointer-events: none;
  z-index: 2;
  border: 2px solid;
  opacity: 0.7;
  transition: opacity 0.2s;
  border-radius: 0; /* ensures sharp corners for glitch border */
}

.wp-block-button__link.wp-element-button::before {
  /* border-color: #00ffff; */
  /* mix-blend-mode: lighten; */
  border-color: rgb(255 255 255 / 50%);
  mix-blend-mode: difference;
  opacity: 0.7;
}

.wp-block-button__link.wp-element-button::after {
  /* border-color: #ff00ff; */
  /* mix-blend-mode: lighten; */
  border-color: rgb(255 255 255 / 50%);
  mix-blend-mode: difference;
  opacity: 0.7;
}

/* Keyframes for shaking/glitching */
@keyframes glitch-border-1 {
  0% { transform: translate(0,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,0); }
}

@keyframes glitch-border-2 {
  0% { transform: translate(0,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,0); }
}

/* Animate glitch borders on hover */
.wp-block-button__link.wp-element-button:hover::before {
  animation: glitch-border-1 0.3s infinite linear alternate;
}

.wp-block-button__link.wp-element-button:hover::after {
  animation: glitch-border-2 0.3s infinite linear alternate;
}

/* Animate the entire button on hover */
@keyframes glitchy {
    0%   {transform: translate(-2px, 2px);}
    25%  {transform: translate(-2px, -2px);}
    50%  {transform: translate(2px, 2px);}
    75%  {transform: translate(2px, -2px);}
    100%  {transform: translate(-2px, 2px);}
}

.wp-block-button__link.wp-element-button:hover {
  animation: glitchy 0.2s linear 1;
}

/*** end CUSTOM CSS FOR BUTTON ***/