/**
 * Title + image reveal (Elementor widgets; mirrors naseem-hero.css).
 *
 * Display title defaults match ele/css/insync.css (section-style headings):
 * Display font / uppercase / 0.02em letter-spacing; size like .section-head__title.
 *
 * @package Naseem
 */

/* Section-style display title (ele/index.html — .section-head__title rules) */
.elementor-widget-naseem-animated-title .naseem-animated-title {
  font-family: var(--font-display, "Poppins", system-ui, sans-serif);
  font-weight: 400;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  font-size: clamp(2.5rem, 4.5vw, 3.35rem);
  line-height: 1.1;
  color: var(--text-heading, #0f172a);
}

.naseem-animated-image {
  width: 100%;
}

.naseem-animated-image__inner {
  display: inline-block;
  vertical-align: top;
  max-width: 100%;
}

/* Word-by-word title reveal */
.title-reveal__word {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  padding-bottom: 0.07em;
  margin-bottom: -0.07em;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.title-reveal__inner {
  display: inline-block;
  transform: translate3d(0, 102%, 0);
  opacity: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.title-reveal--animate .title-reveal__inner {
  animation: naseem-title-reveal-in 0.95s cubic-bezier(0.14, 0.82, 0.26, 1) forwards;
  animation-delay: calc(var(--i, 0) * 0.038s);
}

@keyframes naseem-title-reveal-in {
  from {
    transform: translate3d(0, 102%, 0);
    opacity: 0;
  }
  to {
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .title-reveal__inner {
    transform: none !important;
    opacity: 1 !important;
    animation: none !important;
  }
}

.img-reveal-frame {
  position: relative;
  width: 100%;
  border-radius: var(--radius-lg, 0.75rem);
  overflow: hidden;
  box-shadow: var(--shadow-md, 0 10px 15px -3px rgba(0, 0, 0, 0.08));
  background: var(--color-surface, #f8fafc);
}

.img-reveal {
  position: relative;
  z-index: 0;
  overflow: hidden;
  border-radius: inherit;
  min-height: 1px;
  -webkit-clip-path: circle(0% at 50% 50%);
  clip-path: circle(0% at 50% 50%);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.img-reveal.img-reveal--play {
  animation: naseem-hero-reveal-iris 1.05s cubic-bezier(0.33, 1, 0.52, 1) forwards;
}

@keyframes naseem-hero-reveal-iris {
  0% {
    -webkit-clip-path: circle(0% at 50% 50%);
    clip-path: circle(0% at 50% 50%);
  }
  100% {
    -webkit-clip-path: circle(100% at 50% 50%);
    clip-path: circle(100% at 50% 50%);
  }
}

.img-reveal.img-reveal--play img {
  animation: naseem-hero-reveal-focus 1.12s cubic-bezier(0.33, 1, 0.52, 1) forwards;
}

@keyframes naseem-hero-reveal-focus {
  0% {
    filter: blur(14px) brightness(0.72) saturate(0.88);
    transform: scale(1.06);
  }
  100% {
    filter: blur(0) brightness(1) saturate(1);
    transform: scale(1);
  }
}

.naseem-animated-image__img {
  width: 100%;
  display: block;
  border-radius: 0;
  box-shadow: none;
  object-fit: cover;
  aspect-ratio: var(--naseem-anim-img-ratio, 5 / 4);
}

/*
 * Core Elementor Image + Naseem scroll reveal: animation only.
 * Neutralize .img-reveal-frame / .img-reveal theme chrome so Elementor’s own
 * Image style controls (radius, shadow, width, etc.) stay authoritative.
 */
.elementor-widget-image.naseem-elementor-image--iris-reveal .img-reveal-frame {
  border-radius: 0;
  /* Beat .img-reveal-frame rules from naseem-hero / insync that set var(--shadow-md). */
  box-shadow: none !important;
  background: transparent;
  overflow: visible;
}

.elementor-widget-image.naseem-elementor-image--iris-reveal .img-reveal {
  border-radius: 0;
  box-shadow: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .img-reveal {
    -webkit-clip-path: none;
    clip-path: none;
    animation: none;
  }

  .img-reveal.img-reveal--play img {
    animation: none;
    filter: none;
    transform: none;
  }
}