/*
 * HOSTREND MOTION & ANIMATION SYSTEM v1.1
 * Reusable, token-based motion primitives.
 */

.host-motion-hover,
.host-motion-fade,
.host-motion-enter,
.host-motion-exit,
.host-motion-lift,
.host-motion-scale {
  transition-timing-function: var(--ease-standard);
  transition-duration: var(--motion-normal);
}

.host-motion-hover {
  transition-property: color, background-color, border-color, box-shadow, opacity;
}

.host-motion-fade {
  transition-property: opacity;
  transition-duration: var(--motion-fast);
  transition-timing-function: var(--ease-standard);
}

.host-motion-lift {
  transition-property: transform, box-shadow;
  transition-duration: var(--motion-medium);
}

.host-motion-lift:hover {
  transform: var(--motion-card-lift);
}

.host-motion-scale {
  transition-property: transform, opacity;
  transition-duration: var(--motion-normal);
}

.host-motion-scale:hover {
  transform: scale(1.01);
}

.host-motion-enter {
  animation: host-motion-fade-up var(--motion-medium) var(--ease-enter) both;
}

.host-motion-exit {
  animation: host-motion-fade-down var(--motion-normal) var(--ease-exit) both;
}

@keyframes host-motion-fade-up {
  from { opacity: 0; transform: translateY(var(--motion-enter-offset)); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes host-motion-fade-down {
  from { opacity: 1; transform: translateY(0); }
  to { opacity: 0; transform: translateY(var(--motion-enter-offset)); }
}

.host-motion-spin {
  animation: host-motion-spin var(--motion-spin-duration) var(--ease-linear) infinite;
}

@keyframes host-motion-spin {
  to { transform: rotate(360deg); }
}

.host-motion-shimmer {
  position: relative;
  overflow: hidden;
}

.host-motion-shimmer::after {
  content: '';
  position: absolute;
  inset: 0;
  width: 50%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.45), transparent);
  transform: translateX(-120%);
  animation: host-motion-shimmer var(--motion-shimmer-duration) var(--ease-linear) infinite;
}

@keyframes host-motion-shimmer {
  to { transform: translateX(260%); }
}

.host-motion-stagger > * {
  animation-delay: 0ms;
}

.host-transition-hover {
  transition: var(--transition-hover);
}

.host-transition-fade {
  transition: var(--transition-fade);
}

/*
 * HOSTREND GLOBAL BLUR-REVEAL — v1.1
 * Progressive enhancement: content remains visible when JS is unavailable.
 * Opt in using data-host-motion-reveal="blur-up" / "blur-scale" or the
 * reusable .host-motion-reveal--blur-up / .host-motion-reveal--blur-scale classes.
 * These classes work on headings and other semantic content without page-specific CSS.
 */
html.has-host-motion-reveal :is([data-host-motion-reveal], .host-motion-reveal--blur-up, .host-motion-reveal--blur-scale) {
  opacity: 0;
  transform: translate3d(0, var(--motion-reveal-distance-y, 18px), 0);
  filter: blur(var(--motion-reveal-blur, 8px));
  transition-property: opacity, transform, filter;
  transition-duration: var(--motion-reveal-duration, 780ms);
  transition-timing-function: var(--motion-reveal-easing, var(--ease-emphasized));
  transition-delay: var(--host-motion-reveal-delay, 0ms);
  will-change: opacity, transform, filter;
}
html.has-host-motion-reveal :is([data-host-motion-reveal="blur-scale"], .host-motion-reveal--blur-scale) {
  transform: translate3d(0, var(--motion-reveal-distance-y, 18px), 0) scale(var(--motion-reveal-scale-start, .986));
}
html.has-host-motion-reveal :is([data-host-motion-reveal], .host-motion-reveal--blur-up, .host-motion-reveal--blur-scale).is-host-motion-revealed,
html.has-host-motion-reveal :is([data-host-motion-reveal], .host-motion-reveal--blur-up, .host-motion-reveal--blur-scale):focus-within {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
  filter: blur(0);
}
html.has-host-motion-reveal :is([data-host-motion-reveal], .host-motion-reveal--blur-up, .host-motion-reveal--blur-scale).is-host-motion-revealed {
  will-change: auto;
}
@media (prefers-reduced-motion: reduce) {
  html.has-host-motion-reveal :is([data-host-motion-reveal], .host-motion-reveal--blur-up, .host-motion-reveal--blur-scale),
  html.has-host-motion-reveal :is([data-host-motion-reveal], .host-motion-reveal--blur-up, .host-motion-reveal--blur-scale).is-host-motion-revealed {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
    will-change: auto !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .host-motion-hover,
  .host-motion-fade,
  .host-motion-lift,
  .host-motion-scale,
  .host-transition-hover,
  .host-transition-fade {
    transition-duration: var(--motion-reduced-duration) !important;
  }

  .host-motion-enter,
  .host-motion-exit,
  .host-motion-spin,
  .host-motion-shimmer {
    animation-duration: var(--motion-reduced-duration) !important;
    animation-iteration-count: 1 !important;
  }

  .host-motion-lift:hover,
  .host-motion-scale:hover {
    transform: none;
  }
}


/* HOSTREND GLOBAL ANIMATED MESH GRADIENT.
   Apply .host-animated-mesh-gradient to a hero/branded surface. .host-ambient-gradient remains a
   backwards-compatible alias. The vertical blue-to-white/black base stays in place while soft,
   oversized colour fields move slowly on top, creating a CSS mesh style without sharp bands or new hues. */
.host-animated-mesh-gradient,
.host-ambient-gradient {
  position: relative;
  isolation: isolate;
  background-color: var(--gradient-hostrend-animated-mesh-end, var(--color-white));
  background-image: var(--gradient-hostrend-animated-mesh, var(--gradient-hostrend-blue-white-ambient, var(--gradient-free-website-design-hero, var(--gradient-primary))));
}
.host-animated-mesh-gradient::before,
.host-ambient-gradient::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    radial-gradient(ellipse 46% 54% at 18% 44%, var(--gradient-hostrend-animated-mesh-glow-primary, rgba(255,255,255,.18)) 0%, transparent 72%),
    radial-gradient(ellipse 48% 50% at 82% 46%, var(--gradient-hostrend-animated-mesh-glow-secondary, rgba(33,25,255,.12)) 0%, transparent 74%),
    radial-gradient(ellipse 44% 42% at 50% 86%, var(--gradient-hostrend-animated-mesh-glow-tertiary, rgba(255,255,255,.10)) 0%, transparent 74%);
  background-repeat: no-repeat;
  -webkit-mask-image: var(--gradient-hostrend-animated-mesh-overlay-mask, linear-gradient(180deg, #FFFFFF 0%, #FFFFFF 34%, transparent 82%));
  mask-image: var(--gradient-hostrend-animated-mesh-overlay-mask, linear-gradient(180deg, #FFFFFF 0%, #FFFFFF 34%, transparent 82%));
  background-size:
    var(--gradient-hostrend-animated-mesh-background-size, 260% 240%),
    var(--gradient-hostrend-animated-mesh-background-size, 260% 240%),
    var(--gradient-hostrend-animated-mesh-background-size, 260% 240%);
  background-position: 22% 42%, 78% 54%, 48% 76%;
  filter: blur(var(--gradient-hostrend-animated-mesh-blur, 36px));
  opacity: var(--gradient-hostrend-animated-mesh-overlay-opacity, .32);
  transform: translateZ(0);
  transform-origin: center;
  will-change: background-position, opacity;
  animation: hostrend-animated-mesh-drift var(--gradient-hostrend-animated-mesh-duration, 18s) var(--ease-standard, ease-in-out) infinite alternate;
}
.host-animated-mesh-gradient > *,
.host-ambient-gradient > * {
  position: relative;
  z-index: 1;
}
@keyframes hostrend-animated-mesh-drift {
  0% {
    background-position: 22% 42%, 78% 54%, 48% 76%;
    opacity: var(--gradient-hostrend-animated-mesh-overlay-opacity, .32);
  }
  52% {
    background-position: 69% 56%, 31% 42%, 56% 27%;
    opacity: calc(var(--gradient-hostrend-animated-mesh-overlay-opacity, .32) + .06);
  }
  100% {
    background-position: 34% 63%, 66% 35%, 44% 88%;
    opacity: var(--gradient-hostrend-animated-mesh-overlay-opacity, .32);
  }
}
@media (prefers-reduced-motion: reduce) {
  .host-animated-mesh-gradient::before,
  .host-ambient-gradient::before {
    animation: none !important;
    background-position: 50% 50%, 50% 50%, 50% 50% !important;
    transform: none !important;
    will-change: auto !important;
  }
}