/*
Theme Name: Kadence Child
Template: kadence
*/

/* =======================================
   KEYFRAMES
======================================= */
@keyframes buildPop {
  0%   { transform: translateY(2px) scale(.98); letter-spacing: .3px; }
  100% { transform: none; letter-spacing: 0; }
}
@keyframes buildUnderline { to { transform: scaleX(1); } }
@keyframes fxGradient {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* =======================================
   FX-BUILD: highlight the word BUILD
   Use:
   <span class="fx-build fx-build--shimmer">BUILD</span>
   or
   <span class="fx-build fx-build--shimmer fx-build--underline">BUILD</span>
======================================= */
.fx-build {
  position: relative;
  display: inline-block;
  color: var(--global-palette1);
}

/* Underline modifier */
.fx-build--underline::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -0.2em; height: 2px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  opacity: .85;
}

/* Shimmer gradient (purple ↔ black) */
.fx-build--shimmer {
  background: linear-gradient(90deg, purple, black, purple);
  background-size: 200% 200%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: fxGradient 4s ease-in-out infinite;
}

/* On reveal: non-shimmer pops, shimmer pops + keeps shimmering */
.is-visible .fx-build:not(.fx-build--shimmer) {
  animation: buildPop 420ms cubic-bezier(.22,.61,.36,1) both;
}
.is-visible .fx-build.fx-build--shimmer {
  animation:
    buildPop 420ms cubic-bezier(.22,.61,.36,1) both,
    fxGradient 4s ease-in-out infinite;
}

/* Underline sweep when revealed */
.is-visible .fx-build--underline::after {
  animation: buildUnderline 600ms ease 120ms forwards;
}

/* =======================================
   SECTION REVEAL (safe for entire sections)
======================================= */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: transform 600ms cubic-bezier(.22,.61,.36,1), opacity 600ms ease;
  will-change: transform, opacity;
}
.reveal.is-visible { opacity: 1; transform: none; }

/* Direction helpers */
.slide-left  { transform: translateX(-32px); }
.slide-right { transform: translateX(32px); }
.slide-up    { transform: translateY(32px); }
.slide-down  { transform: translateY(-32px); }

/* Optional wipe-in for inner elements */
.wipe-in { clip-path: inset(0 100% 0 0); transition: clip-path 700ms ease; }
.is-visible .wipe-in { clip-path: inset(0 0 0 0); }

/* Stagger children inside a revealed container */
.reveal-stagger > * {
  opacity: 0;
  transform: translateY(16px);
  transition: transform 500ms cubic-bezier(.22,.61,.36,1), opacity 500ms ease;
}
.reveal-stagger.is-visible > * { opacity: 1; transform: none; }
.reveal-stagger.is-visible > *:nth-child(1){ transition-delay: 0ms; }
.reveal-stagger.is-visible > *:nth-child(2){ transition-delay: 120ms; }
.reveal-stagger.is-visible > *:nth-child(3){ transition-delay: 240ms; }
.reveal-stagger.is-visible > *:nth-child(4){ transition-delay: 360ms; }
.reveal-stagger.is-visible > *:nth-child(5){ transition-delay: 480ms; }
.reveal-stagger.is-visible > *:nth-child(6){ transition-delay: 600ms; }

/* =======================================
   ACCESSIBILITY
======================================= */
@media (prefers-reduced-motion: reduce) {
  .fx-build, .fx-build::after, .fx-build--shimmer,
  .reveal, .reveal-stagger > *, .wipe-in {
    animation: none !important;
    transition: none !important;
    transform: none !important;
    opacity: 1 !important;
    clip-path: none !important;
  }
}

.site-branding .site-title,
.site-branding .site-title a {
  font-family: "Avenir-Next", sans-serif;  /* or your font */
  font-size: 15px;
  font-weight: 400;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: #222;
}