/* 
Theme Name: ShoreDigital Elementor
Author: ShoreDigital
Template: hello-elementor
Version: 1.0.0
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
*/

/*Add your custom styles here */

/* Start Custom Gradient Button */
.custom-gradient-button.elementor-widget-button .elementor-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.75em 1.5em;
  border-radius: 30px;
  background: transparent !important; /* interior controlled by ::after */
  overflow: visible;
  z-index: 1;
}

/* Gradient border layer */
.custom-gradient-button.elementor-widget-button .elementor-button::before {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  background: linear-gradient(90deg, #F5742A, #E31E63, #9E2C8F);
  z-index: -2; /* far behind everything */
  transition: box-shadow 0.25s steps(1, end); /* <<< SHARPER SNAP */
}

/* Interior black layer */
.custom-gradient-button.elementor-widget-button .elementor-button::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: #000; /* true interior color */
  z-index: -1; /* above gradient, below text */
}

/* Make sure text/icon always appears on top */
.custom-gradient-button .elementor-button * {
  position: relative;
  z-index: 1;
}

/* --- Glow Animation Keyframes (sharp) --- */
@keyframes gradientButtonGlow {
  0% {
    box-shadow:
      0 0 20px rgba(255, 79, 0, 0.8),
      0 0 15px rgba(255, 79, 0, 0.8) inset;
  }
  100% {
    box-shadow:
      0 0 15px rgba(255, 79, 0, 0.8),
      0 0 15px rgba(255, 79, 0, 0.8) inset;
  }
}

/* Hover Glow + Animation */
.custom-gradient-button.elementor-widget-button .elementor-button:hover::before {
  animation: gradientButtonGlow 0.35s steps(1, end) forwards; 
}
/* End Custom Gradient Button */



/* Start Navigation Classes*/
.header-nav .e-n-menu-title .e-n-menu-title-text {
  position: relative;
  display: inline-block;
}

/* Default state: invisible underline */
.header-nav .e-n-menu-title .e-n-menu-title-text::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -3px; /* distance below text */
  height: 1px; 
  width: 0%;
  background: linear-gradient(90deg, #F5742A 0%, #E31E63 49.04%, #9E2C8F 100%);
}

.header-nav .e-n-menu-title:hover .e-n-menu-title-text::after {
  width: 100%;
}
/* End Navigation Classes */


/* Start Playfair Hover Classes */
.playfair-hover {
  position: relative;
  display: inline-block;
  z-index: 1;
}

/* Blocks container - positioned relative to .playfair-hover only */
.playfair-blocks {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: clamp(200px, 22vw, 320px);
  aspect-ratio: 288 / 191;
  pointer-events: none;
  z-index: -1;
  opacity: 0;
  transition: opacity 0.5s ease-out;
}

.playfair-hover.is-visible .playfair-blocks {
  opacity: 1;
}

/* Block A - Large filled diamond */
.playfair-block-a {
  position: absolute;
  width: 75.3%;
  transition: all 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              opacity 0.6s ease-out;
  will-change: transform, opacity;
  opacity: 0;
}

/* Block B - Medium stroked diamond */
.playfair-block-b {
  position: absolute;
  width: 50.7%;
  transition: all 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              opacity 0.6s ease-out;
  will-change: transform, opacity;
  opacity: 0;
}

/* Block C - Small filled diamond */
.playfair-block-c {
  position: absolute;
  width: 37.5%;
  transition: all 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              opacity 0.6s ease-out;
  will-change: transform, opacity;
  opacity: 0;
}

/* FRAME 1 POSITIONS */
.playfair-hover.frame-1 .playfair-block-a {
  left: 0;
  top: 17.8%;
  opacity: 0.95;
}

.playfair-hover.frame-1 .playfair-block-b {
  left: 24.3%;
  top: 0;
  opacity: 0.95;
}

.playfair-hover.frame-1 .playfair-block-c {
  left: 62.5%;
  top: 63.4%;
  opacity: 0.95;
}

/* FRAME 2 POSITIONS */
.playfair-hover.frame-2 .playfair-block-a {
  left: 15.6%;
  top: 17.8%;
  opacity: 1;
}

.playfair-hover.frame-2 .playfair-block-b {
  left: 0;
  top: 0;
  opacity: 1;
}

.playfair-hover.frame-2 .playfair-block-c {
  left: 55.6%;
  top: 12%;
  opacity: 1;
}

/* FRAME 3 POSITIONS */
.playfair-hover.frame-3 .playfair-block-a {
  left: 24.7%;
  top: 17.8%;
  opacity: 1;
}

.playfair-hover.frame-3 .playfair-block-b {
  left: 0;
  top: 48.2%;
  opacity: 1;
}

.playfair-hover.frame-3 .playfair-block-c {
  left: 10.1%;
  top: 5.8%;
  opacity: 1;
}

/* Fade out state - when removing visibility */
.playfair-hover.fading-out .playfair-block-a,
.playfair-hover.fading-out .playfair-block-b,
.playfair-hover.fading-out .playfair-block-c {
  opacity: 0 !important;
  transition: opacity 0.8s ease-out;
}

/* Hide blocks when not visible */
.playfair-hover:not(.is-visible) .playfair-block-a,
.playfair-hover:not(.is-visible) .playfair-block-b,
.playfair-hover:not(.is-visible) .playfair-block-c {
  opacity: 0;
}
/* End Playfair Hover Classes */