/* ============================================================
   RSB AnimatedText — vanilla port of the 21st.dev
   "animated-text" component (https://21st.dev/@anurag-mishra22/components/animated-text)
   for this PHP/Bootstrap RTL site (no React/Next/Tailwind).

   Design language kept 1:1:
     · the text reveals letter-by-letter (opacity 0→1, y 20→0,
       spring-like easing) with a per-letter stagger;
     · once the letters finish, a gradient underline grows out
       from the centre (width 0→100%, left 50%→0).
   Latin text (e-mail) is forced LTR so it never reverses in RTL.

   Markup:  <a class="rsb-atext rsb-atext--xl" data-rsb-atext="info@rsb.ir"
               href="mailto:info@rsb.ir">info@rsb.ir</a>
   The JS builds the letter spans; without JS the plain text stays.
   ============================================================ */

.rsb-atext,
.rsb-eimg{
  /* --- component props (mirror the React component's defaults) --- */
  --rsb-atext-stagger:.045s;            /* duration / delayChildren */
  --rsb-atext-duration:.5s;             /* per-letter spring */
  --rsb-atext-line-duration:.8s;        /* underline grow */
  --rsb-atext-line-height:4px;          /* underlineHeight: h-1 */
  --rsb-atext-line-offset:-9px;         /* underlineOffset: -bottom-2 */
  --rsb-atext-gradient:linear-gradient(90deg,#3b82f6 0%,#a855f7 52%,#ec4899 100%);
  display:inline-flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  color:inherit;
  text-decoration:none;
}
.rsb-atext:hover,.rsb-atext:focus{color:inherit;text-decoration:none}
.rsb-atext__wrap{position:relative;display:inline-block}
.rsb-atext__text{
  display:flex;
  overflow:hidden;
  justify-content:center;
  direction:ltr;                        /* latin e-mail must stay LTR */
  font-weight:700;
  line-height:1.5;
  letter-spacing:.01em;
  white-space:nowrap;
}
.rsb-atext__ch{
  display:inline-block;
  opacity:0;
  transform:translateY(20px);
  transition:
    opacity var(--rsb-atext-duration) cubic-bezier(.22,1.2,.36,1),
    transform var(--rsb-atext-duration) cubic-bezier(.22,1.2,.36,1);
  transition-delay:calc(var(--i,0) * var(--rsb-atext-stagger));
  will-change:opacity,transform;
}
.rsb-atext.is-in .rsb-atext__ch{opacity:1;transform:translateY(0)}

.rsb-atext__line{
  position:absolute;
  left:50%;
  bottom:var(--rsb-atext-line-offset);
  width:0;
  height:var(--rsb-atext-line-height);
  border-radius:99px;
  background:var(--rsb-atext-gradient);
  transition:
    width var(--rsb-atext-line-duration) ease-out,
    left var(--rsb-atext-line-duration) ease-out;
  transition-delay:calc(var(--n,0) * var(--rsb-atext-stagger));
}
.rsb-atext.is-in .rsb-atext__line{width:100%;left:0}

/* --- size variants --- */
.rsb-atext--xl .rsb-atext__text{font-size:clamp(1.45rem,4.2vw,2.6rem)}
.rsb-atext--lg .rsb-atext__text{font-size:clamp(1.15rem,2.6vw,1.6rem)}
.rsb-atext--md .rsb-atext__text{font-size:1.05rem}
.rsb-atext--sm .rsb-atext__text{font-size:.875rem}
.rsb-atext--sm{--rsb-atext-line-height:3px;--rsb-atext-line-offset:-6px;--rsb-atext-stagger:.035s}

/* --- gradient presets (the React prop `underlineGradient`) --- */
.rsb-atext--brand{--rsb-atext-gradient:linear-gradient(90deg,#0056b3 0%,#0088CC 100%)}
.rsb-atext--warm{--rsb-atext-gradient:linear-gradient(90deg,#D31633 0%,#FFC156 100%)}
.rsb-atext--lime{--rsb-atext-gradient:linear-gradient(90deg,#a3e635 0%,#65a30d 100%)}

/* ============================================================
   Image variant — the address rendered as a raster PNG so the
   e-mail never exists as text in the DOM (anti-harvesting).
   Same design language: a wipe reveal across the address, then
   the gradient underline grows from the centre.
   ============================================================ */
.rsb-eimg__wrap{position:relative;display:inline-block}
.rsb-eimg__img{
  display:block;
  height:var(--rsb-eimg-h,40px);
  width:auto;
  max-width:100%;
  clip-path:inset(0 100% 0 0);
  transition:clip-path .95s cubic-bezier(.22,1,.36,1);
  will-change:clip-path;
}
.rsb-eimg.is-in .rsb-eimg__img{clip-path:inset(0 0 0 0)}
.rsb-eimg__line{
  position:absolute;
  left:50%;
  bottom:var(--rsb-atext-line-offset);
  width:0;
  height:var(--rsb-atext-line-height);
  border-radius:99px;
  background:var(--rsb-atext-gradient);
  transition:width var(--rsb-atext-line-duration) ease-out,
             left var(--rsb-atext-line-duration) ease-out;
  transition-delay:.95s;
}
.rsb-eimg.is-in .rsb-eimg__line{width:100%;left:0}

/* --- size variants --- */
.rsb-eimg--xl{--rsb-eimg-h:clamp(34px,5.4vw,52px)}
.rsb-eimg--lg{--rsb-eimg-h:38px}
.rsb-eimg--sm{--rsb-eimg-h:15px;--rsb-atext-line-height:2px;--rsb-atext-line-offset:-5px}

/* --- reduced motion: show the final state, no transitions --- */
@media (prefers-reduced-motion:reduce){
  .rsb-atext__ch,
  .rsb-atext__line,
  .rsb-eimg__img,
  .rsb-eimg__line{transition:none}
  .rsb-atext__ch{opacity:1;transform:none}
  .rsb-atext__line,
  .rsb-eimg__line{width:100%;left:0}
  .rsb-eimg__img{clip-path:inset(0 0 0 0)}
}