/* 
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 */

/* Custom Gradient Tabs (Elementor) */

.custom-gradient-tabs .e-n-tab-title {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
/*   padding: 0.75em 1.5em; */
  border-radius: 30px;
  background: transparent !important;
  overflow: visible;
  border: none;
  z-index: 1;
  cursor: pointer;
}

/* Gradient border (default state) */
.custom-gradient-tabs .e-n-tab-title::before {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  background: linear-gradient(90deg, #F5742A, #E31E63, #9E2C8F);
  z-index: -2;
  transition: box-shadow 0.25s steps(1, end);
}

/* Black interior (default state) */
.custom-gradient-tabs .e-n-tab-title::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: #000;
  z-index: -1;
}

/* Keep text on top */
.custom-gradient-tabs .e-n-tab-title * {
  position: relative;
  z-index: 1;
}

/* ================================
   Glow Animation
================================ */

@keyframes gradientTabGlow {
  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 */
.custom-gradient-tabs .e-n-tab-title:hover::before {
  animation: gradientTabGlow 0.35s steps(1, end) forwards;
}

/* ================================
   ACTIVE TAB — FULL GRADIENT
================================ */

/* Remove black interior */
.custom-gradient-tabs
.e-n-tab-title[aria-selected="true"]::after {
  background: transparent;
}

/* Fill entire tab with gradient */
.custom-gradient-tabs
.e-n-tab-title[aria-selected="true"]::before {
  inset: 0; /* cover whole button */
  z-index: -1;
  animation: gradientTabGlow 0.35s steps(1, end) forwards;
}

/* End Custom Gradient Tabs */

/* Start Navigation Classes*/
/* Main Header Nav Hover */
/* Make menu-item the positioning context */
.header-nav 
.elementor-nav-menu--main 
.menu-item {
  position: relative;
}

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

/* Same hover behavior (hovering the link triggers it) */
.header-nav 
.elementor-nav-menu--main 
.menu-item:hover::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 */

/* Start LED Solutions Image Underline Glow */
.led-solutions-img.elementor-widget-image img {
  display: inline-block;
  padding-bottom: 65px;
  background:
    linear-gradient(
      to right,
      #F5742A 0%,
      #E31E63 49.0385%,
      #9E2C8F 100%
    )
    bottom / 100% 3px no-repeat;
}

.led-solutions-img.elementor-widget-image img {
  display: block;
}
/* End LED Solutions Image Underline Glow */