/* ==========================================================================
   Alpha Media — صداهای ماندگار
   Homepage card grid + individual voice-artist profile pages.
   Cards are designed to look finished with OR without a photograph:
   when assets/voices/<id>.jpg is missing the monogram plate shows through.
   ========================================================================== */

/* ==========================================================================
   1. SECTION
   ========================================================================== */
.legends {
  background:
    radial-gradient(75% 60% at 82% 0%, rgba(107, 47, 143, .40), transparent 62%),
    radial-gradient(60% 55% at 8% 100%, rgba(192, 38, 211, .18), transparent 60%),
    var(--purple-950);
  position: relative;
  overflow: hidden;
}
.legends::before {
  content: '';
  position: absolute;
  inset-inline: 0;
  inset-block-start: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  opacity: .55;
}

.legends__lead {
  max-width: 620px;
  margin-block: calc(-1 * var(--s-6)) var(--s-10);
  font-size: .95rem;
  line-height: 2.1;
  color: var(--text-on-dark-muted);
}

.legends__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-6);
}

/* "همه صداها" link tucked into the section heading */
.sec-head__all {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: .82rem;
  font-weight: 600;
  color: var(--purple-100);
  white-space: nowrap;
  transition: color var(--t-fast);
}
.sec-head__all svg { width: 14px; height: 14px; fill: currentColor; }
.sec-head__all:hover { color: var(--accent); }
/* readable on the light sections too */
.section--light .sec-head__all { color: var(--text-on-light-muted); }
.section--light .sec-head__all:hover { color: var(--purple-500); }

.legends__more { display: flex; justify-content: center; margin-top: var(--s-10); }

/* ==========================================================================
   2b. SLIDER
   Cards live in a scroll-snap track; JS nudges scrollLeft on a timer.
   Native scrolling means touch swipe works for free.
   ========================================================================== */
.vslider { position: relative; }

.vslider__viewport {
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
  scroll-behavior: smooth;
  padding-block-end: var(--s-2);
}
.vslider__viewport::-webkit-scrollbar { display: none; }

.vslider__track {
  display: flex;
  gap: var(--s-6);
  /* room for the play button that overhangs the media block */
  padding-block-start: 2px;
}
/* ==========================================================================
   Card size
   --------------------------------------------------------------------------
   Roughly 30% smaller than it was: four to a row instead of three, and the
   type and padding scaled with it. Narrowing the column alone would have
   left a small card with large-card lettering inside it, which reads as a
   squeezed card rather than a smaller one.

   The section holds twelve names now instead of six, so the smaller card is
   not only a size change — it is what lets the row show a useful number of
   them before anyone has to scroll.
   ========================================================================== */
.vslider__track > .vcard {
  flex: 0 0 calc((100% - var(--s-6) * 3) / 4);
  scroll-snap-align: start;
  min-width: 0;
}
.vslider__track > .vcard .vcard__body { padding: var(--s-5) var(--s-4) var(--s-4); gap: var(--s-2); }
.vslider__track > .vcard .vcard__name { font-size: .95rem; padding-inline-end: 46px; }
.vslider__track > .vcard .vcard__tagline { font-size: .72rem; }
.vslider__track > .vcard .vcard__short { font-size: .76rem; line-height: 1.9; -webkit-line-clamp: 2; }
.vslider__track > .vcard .vcard__trait { font-size: .62rem; padding: 2px 8px; }
.vslider__track > .vcard .vcard__play { width: 42px; height: 42px; inset-block-end: -18px; }
.vslider__track > .vcard .vcard__play svg { width: 15px; height: 15px; }
.vslider__track > .vcard .vcard__mono { font-size: clamp(2.4rem, 5vw, 3.4rem); }

/* arrows */
.vslider__arrow {
  position: absolute;
  z-index: 6;
  inset-block-start: 38%;
  transform: translateY(-50%);
  width: 42px; height: 42px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: rgba(21,5,32,.82);
  backdrop-filter: blur(8px);
  border: 1px solid var(--border-dark);
  color: var(--purple-100);
  cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast), transform var(--t-fast), opacity var(--t-fast);
}
.vslider__arrow svg { width: 20px; height: 20px; fill: currentColor; }
.vslider__arrow:hover { background: var(--accent); color: var(--purple-950); border-color: transparent; }
.vslider__arrow[disabled] { opacity: .25; pointer-events: none; }
.vslider__arrow--prev { inset-inline-start: -20px; }
.vslider__arrow--next { inset-inline-end: -20px; }

/* dots */
.vslider__dots {
  display: flex;
  justify-content: center;
  gap: 7px;
  margin-top: var(--s-5);
}
.vslider__dot {
  width: 7px; height: 7px;
  border-radius: var(--r-full);
  background: rgba(192,132,252,.3);
  border: 0;
  cursor: pointer;
  padding: 0;
  transition: background var(--t-fast), width var(--t-fast);
}
.vslider__dot.is-on { background: var(--accent); width: 22px; }

/* ==========================================================================
   2c. SEARCH + FILTER (legends.html)
   ========================================================================== */
.lhero {
  background:
    radial-gradient(70% 90% at 80% 0%, rgba(107,47,143,.5), transparent 65%),
    var(--purple-950);
  padding-block: calc(var(--header-h) + var(--s-14, 56px)) var(--s-12);
  border-bottom: 1px solid var(--border-dark);
}
.lhero__title {
  font-size: clamp(1.9rem, 4.6vw, 3rem);
  font-weight: 900;
  color: var(--accent-strong);
  margin-bottom: var(--s-3);
}
.lhero__sub {
  max-width: 620px;
  font-size: .98rem;
  line-height: 2.1;
  color: var(--text-on-dark-muted);
}

.legends--index { padding-block-start: var(--s-10); }

.vfilter {
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
  margin-bottom: var(--s-6);
}

.vfilter__search {
  position: relative;
  display: flex;
  align-items: center;
  max-width: 460px;
}
.vfilter__ico {
  position: absolute;
  inset-inline-start: 16px;
  width: 18px; height: 18px;
  fill: var(--text-on-dark-muted);
  pointer-events: none;
}
.vfilter__search input {
  width: 100%;
  padding: 13px 46px 13px 46px;
  border-radius: var(--r-full);
  background: rgba(21,5,32,.6);
  border: 1px solid var(--border-dark);
  color: var(--text-on-dark);
  font-family: inherit;
  font-size: .9rem;
  transition: border-color var(--t-fast), background var(--t-fast);
}
.vfilter__search input::placeholder { color: var(--text-on-dark-muted); }
.vfilter__search input:focus {
  outline: none;
  border-color: var(--accent);
  background: rgba(21,5,32,.85);
}
.vfilter__search input::-webkit-search-cancel-button { display: none; }

.vfilter__clear {
  position: absolute;
  inset-inline-end: 12px;
  width: 26px; height: 26px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: rgba(168,85,247,.24);
  color: var(--purple-100);
  cursor: pointer;
}
.vfilter__clear svg { width: 13px; height: 13px; fill: currentColor; }
.vfilter__clear:hover { background: var(--accent); color: var(--purple-950); }

.vfilter__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.vfilter__chip {
  padding: 7px 16px;
  border-radius: var(--r-full);
  font-family: inherit;
  font-size: .8rem;
  font-weight: 600;
  color: var(--text-on-dark-muted);
  background: rgba(168,85,247,.08);
  border: 1px solid var(--border-dark);
  cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.vfilter__chip:hover { color: var(--text-on-dark); background: rgba(168,85,247,.18); }
.vfilter__chip.is-on {
  background: linear-gradient(135deg, var(--gold-300), var(--gold-500));
  color: var(--purple-950);
  border-color: transparent;
}

.vfilter__count {
  font-size: .82rem;
  color: var(--text-on-dark-muted);
  margin-bottom: var(--s-6);
}
.vfilter__empty {
  text-align: center;
  padding-block: var(--s-12);
  font-size: .95rem;
  color: var(--text-on-dark-muted);
}

/* cards hidden by a filter */
.vcard.is-hidden { display: none; }

/* ==========================================================================
   2. CARD
   ========================================================================== */
.vcard {
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: linear-gradient(168deg, var(--purple-800) 0%, var(--purple-850) 60%, var(--purple-900) 100%);
  border: 1px solid var(--border-dark);
  box-shadow: var(--sh-md);
  transition: transform var(--t), box-shadow var(--t), border-color var(--t);
  isolation: isolate;
}
.vcard:hover {
  transform: translateY(-8px);
  border-color: color-mix(in srgb, var(--vc-accent, var(--accent)) 55%, transparent);
  box-shadow: var(--sh-lg), 0 0 44px -12px var(--vc-accent, var(--accent));
}

/* a soft coloured wash keyed to each artist */
.vcard::before {
  content: '';
  position: absolute;
  inset-block-start: -30%;
  inset-inline-end: -30%;
  width: 75%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--vc-accent, var(--accent));
  opacity: .10;
  filter: blur(46px);
  z-index: -1;
  transition: opacity var(--t);
}
.vcard:hover::before { opacity: .2; }

/* ---------- portrait ---------- */
/* Square, because the source files are square.
   These portraits are face crops at 320x320. A 4/3 window over a 1/1 image
   with object-fit:cover throws away a quarter of the height, and the quarter
   it throws away is the top of the head and the chin — the two things that
   make a face recognisable. Matching the box to the source means cover has
   nothing left to crop. */
.vcard__media {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background:
    radial-gradient(120% 100% at 50% 0%, color-mix(in srgb, var(--vc-accent, var(--accent)) 22%, transparent), transparent 68%),
    linear-gradient(160deg, var(--purple-700), var(--purple-900));
}

/* monogram plate — the fallback that shows when no photo is present */
.vcard__mono {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: clamp(3.4rem, 7vw, 5rem);
  font-weight: 900;
  line-height: 1;
  color: var(--vc-accent, var(--accent));
  opacity: .3;
  user-select: none;
  transition: transform var(--t-slow), opacity var(--t);
}
.vcard:hover .vcard__mono { transform: scale(1.08); opacity: .42; }

.vcard__img {
  position: relative;
  z-index: 1;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center center;   /* square in a square — nothing is cut */
  /* duotone-ish treatment so mixed source photos read as one set */
  filter: grayscale(.55) contrast(1.08) brightness(.92);
  transition: filter var(--t-slow), transform var(--t-slow);
}
.vcard:hover .vcard__img { filter: grayscale(0) contrast(1.04) brightness(1); transform: scale(1.05); }
/* if the file is missing, script drops .is-empty and the monogram shows */
.vcard__media.is-empty .vcard__img { display: none; }

/* gradient floor so the name always sits on darkness */
.vcard__media::after {
  content: '';
  position: absolute;
  z-index: 2;
  inset: 0;
  /* Only deep enough to blend the photo into the card body. It used to climb
     to 72%, which on a square crop means shading the chin — the point of the
     square was to stop hiding the face, so the veil stops below it. */
  background: linear-gradient(0deg, var(--purple-850) 1%, rgba(37,13,54,.42) 16%, transparent 44%);
  pointer-events: none;
}

/* animated bars, bottom-left of the portrait */
.vcard__eq {
  position: absolute;
  z-index: 3;
  inset-block-end: var(--s-3);
  inset-inline-start: var(--s-4);
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 20px;
  opacity: .32;
  transition: opacity var(--t);
}
.vcard__eq i {
  width: 3px;
  border-radius: 2px;
  background: var(--vc-accent, var(--accent));
  height: 35%;
}
.vcard:hover .vcard__eq { opacity: .8; }
.vcard.is-playing .vcard__eq { opacity: 1; }
.vcard.is-playing .vcard__eq i { animation: vcEq .85s ease-in-out infinite; }
.vcard.is-playing .vcard__eq i:nth-child(2) { animation-delay: .12s; }
.vcard.is-playing .vcard__eq i:nth-child(3) { animation-delay: .24s; }
.vcard.is-playing .vcard__eq i:nth-child(4) { animation-delay: .36s; }
.vcard.is-playing .vcard__eq i:nth-child(5) { animation-delay: .48s; }
@keyframes vcEq { 0%,100% { height: 22%; } 50% { height: 100%; } }

/* play button floating over the seam */
.vcard__play {
  position: absolute;
  z-index: 4;
  inset-block-end: -22px;
  inset-inline-end: var(--s-5);
  width: 52px; height: 52px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: linear-gradient(140deg, var(--gold-300), var(--gold-500));
  color: var(--purple-950);
  border: 3px solid var(--purple-850);
  box-shadow: 0 8px 22px rgba(0,0,0,.5);
  cursor: pointer;
  transition: transform var(--t-fast), box-shadow var(--t-fast);
}
.vcard__play svg { width: 19px; height: 19px; fill: currentColor; margin-inline-start: 2px; }
.vcard__play:hover { transform: scale(1.1); box-shadow: 0 10px 28px rgba(240,180,41,.5); }
.vcard__play:active { transform: scale(.96); }

/* ---------- body ---------- */
.vcard__body {
  padding: var(--s-6) var(--s-5) var(--s-5);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  flex: 1;
}
.vcard__name {
  font-size: 1.12rem;
  font-weight: 800;
  color: var(--white);
  padding-inline-end: 56px;   /* clear the play button */
}
.vcard__tagline {
  font-size: .8rem;
  font-weight: 600;
  color: var(--vc-accent, var(--accent));
}
.vcard__short {
  font-size: .85rem;
  line-height: 2;
  color: var(--text-on-dark-muted);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* «…» — a field the studio has not filled in yet.
   Held at low contrast so it reads as pending rather than as content that
   failed to load, while keeping the line's height so the card next to it
   does not sit at a different depth. */
.vcard__tagline.is-tbd,
.vcard__short.is-tbd,
.vhero__tagline.is-tbd,
.vhero__short.is-tbd {
  color: var(--text-on-dark-muted);
  opacity: .45;
  letter-spacing: .35em;
  user-select: none;
}

.vcard__traits { display: flex; flex-wrap: wrap; gap: 6px; }
.vcard__trait {
  font-size: .68rem;
  padding: 3px 10px;
  border-radius: var(--r-full);
  color: var(--purple-100);
  background: rgba(168,85,247,.14);
  border: 1px solid var(--border-dark);
}

.vcard__foot {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  margin-top: auto;
  padding-top: var(--s-4);
  border-top: 1px solid var(--border-dark);
}
.vcard__order { flex: 1; justify-content: center; }
.vcard__more {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 9px 14px;
  border-radius: var(--r-full);
  font-size: .8rem;
  font-weight: 600;
  color: var(--purple-100);
  border: 1px solid var(--border-dark);
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
  white-space: nowrap;
}
.vcard__more svg { width: 14px; height: 14px; fill: currentColor; }
.vcard__more:hover {
  background: rgba(168,85,247,.18);
  color: #fff;
  border-color: rgba(192,132,252,.45);
}

/* whole card is clickable through to the profile */
.vcard__link {
  position: absolute;
  inset: 0;
  z-index: 3;
}
/* the play button and the footer must sit above that overlay.
   NB: do not set `position: relative` on .vcard__play here — it would
   override the absolute placement above and drop the button into flow. */
.vcard__foot { position: relative; z-index: 5; }

/* ==========================================================================
   3. PROFILE PAGE
   ========================================================================== */
.vhero {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(70% 100% at 78% 0%, color-mix(in srgb, var(--vc-accent, var(--accent)) 26%, transparent), transparent 66%),
    var(--purple-950);
  padding-block: calc(var(--header-h) + var(--s-16)) var(--s-16);
}
.vhero__grid {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: var(--s-12);
  align-items: center;
}

.vhero__portrait {
  position: relative;
  aspect-ratio: 1;
  border-radius: var(--r-xl);
  overflow: hidden;
  background:
    radial-gradient(120% 100% at 50% 0%, color-mix(in srgb, var(--vc-accent, var(--accent)) 26%, transparent), transparent 70%),
    linear-gradient(160deg, var(--purple-700), var(--purple-900));
  border: 1px solid var(--border-dark);
  box-shadow: var(--sh-lg), 0 0 60px -18px var(--vc-accent, var(--accent));
}
.vhero__portrait img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 22%;
  filter: grayscale(.35) contrast(1.06);
}
.vhero__portrait.is-empty img { display: none; }
.vhero__mono {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  font-size: 8rem; font-weight: 900; line-height: 1;
  color: var(--vc-accent, var(--accent));
  opacity: .3;
}

.vhero__role {
  display: inline-block;
  font-size: .78rem;
  font-weight: 700;
  color: var(--vc-accent, var(--accent));
  padding: 5px 16px;
  border: 1px solid color-mix(in srgb, var(--vc-accent, var(--accent)) 40%, transparent);
  border-radius: var(--r-full);
  margin-bottom: var(--s-4);
}
.vhero__name {
  font-size: clamp(1.9rem, 4.4vw, 3rem);
  font-weight: 900;
  color: var(--white);
  margin-bottom: var(--s-2);
}
.vhero__tagline {
  font-size: clamp(1rem, 1.8vw, 1.25rem);
  color: var(--vc-accent, var(--accent));
  font-weight: 600;
  margin-bottom: var(--s-5);
}
.vhero__short {
  font-size: .98rem;
  line-height: 2.1;
  color: var(--text-on-dark);
  max-width: 560px;
  margin-bottom: var(--s-6);
}

.vhero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-6);
  margin-bottom: var(--s-8);
}
.vhero__meta div { font-size: .82rem; color: var(--text-on-dark-muted); }
.vhero__meta b {
  display: block;
  font-size: 1.05rem;
  color: var(--white);
  font-weight: 700;
  margin-bottom: 2px;
}
.vhero__cta { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center; }

/* ---------- sample player strip ---------- */
.vsample {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  padding: var(--s-4) var(--s-5);
  border-radius: var(--r-md);
  background: rgba(21,5,32,.5);
  border: 1px solid var(--border-dark);
  margin-block: var(--s-8) 0;
}
.vsample__label { font-size: .82rem; font-weight: 700; color: var(--purple-100); white-space: nowrap; }
.vsample .wave { height: 34px; }

/* ---------- bio + works ---------- */
.vbody__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: var(--s-12);
  align-items: start;
}
.vbio p {
  font-size: .95rem;
  line-height: 2.3;
  color: var(--text-on-light);
  margin-bottom: var(--s-5);
}
.vbio p:first-of-type::first-letter {
  float: inline-start;
  font-size: 3.1rem;
  line-height: .82;
  font-weight: 900;
  color: var(--purple-500);
  padding-inline-end: 10px;
  padding-block-start: 6px;
}

.vworks { position: sticky; top: calc(var(--header-h) + var(--s-5)); }
.vworks__title {
  font-size: 1.02rem;
  font-weight: 800;
  color: var(--purple-500);
  margin-bottom: var(--s-4);
  padding-bottom: var(--s-3);
  border-bottom: 1px solid var(--border-light);
}
.vworks__list { display: flex; flex-direction: column; gap: var(--s-1); }
.vwork {
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-sm);
  transition: background var(--t-fast);
  border-inline-start: 2px solid transparent;
}
.vwork:hover { background: rgba(168,85,247,.08); border-inline-start-color: var(--accent); }
.vwork b { display: block; font-size: .88rem; color: var(--text-on-light); font-weight: 700; }
.vwork span { font-size: .78rem; color: var(--text-on-light-muted); }

/* ---------- other voices ---------- */
.vmore__strip {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--s-4);
}
.vmini { text-align: center; }
.vmini__disc {
  position: relative;
  aspect-ratio: 1;
  border-radius: 50%;
  overflow: hidden;
  background: linear-gradient(160deg, var(--purple-700), var(--purple-900));
  border: 2px solid var(--border-dark);
  margin-bottom: var(--s-3);
  transition: transform var(--t), border-color var(--t);
}
.vmini:hover .vmini__disc { transform: translateY(-5px); border-color: var(--accent); }
.vmini__disc img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(.4); }
.vmini__disc.is-empty img { display: none; }
.vmini__mono {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  font-size: 2rem; font-weight: 900;
  color: var(--vc-accent, var(--accent));
  opacity: .38;
}
.vmini__name { font-size: .84rem; font-weight: 700; color: var(--text-on-dark); }

/* ==========================================================================
   4. RESPONSIVE
   ========================================================================== */
@media (max-width: 1024px) {
  .legends__grid { grid-template-columns: repeat(2, 1fr); }
  /* three on a tablet, up from two — the cards are smaller now */
  .vslider__track > .vcard { flex-basis: calc((100% - var(--s-6) * 2) / 3); }
  .vslider__arrow--prev { inset-inline-start: -8px; }
  .vslider__arrow--next { inset-inline-end: -8px; }
  .vhero__grid { grid-template-columns: 240px 1fr; gap: var(--s-8); }
  .vbody__grid { grid-template-columns: 1fr; gap: var(--s-10); }
  .vworks { position: static; }
  .vmore__strip { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 768px) {
  .legends__grid { grid-template-columns: 1fr; max-width: 460px; margin-inline: auto; }
  .legends__lead { margin-block-start: calc(-1 * var(--s-4)); }

  /* one card per view, arrows out of the way — swipe is the main gesture */
  .vslider__track > .vcard { flex-basis: 86%; }
  .vslider__arrow { display: none; }
  .sec-head__all { display: none; }   /* the button below already covers it */
  .vfilter__search { max-width: none; }

  .vhero { padding-block: calc(var(--header-h) + var(--s-10)) var(--s-12); }
  .vhero__grid { grid-template-columns: 1fr; gap: var(--s-6); }
  .vhero__portrait { max-width: 220px; }
  .vhero__mono { font-size: 5rem; }
  .vhero__meta { gap: var(--s-5); }
  .vsample { flex-wrap: wrap; }
  .vsample .wave { min-width: 100%; order: 3; }

  .vmore__strip { grid-template-columns: repeat(3, 1fr); }
  .vbio p:first-of-type::first-letter { font-size: 2.6rem; }
}

@media (max-width: 480px) {
  .vmore__strip { grid-template-columns: repeat(2, 1fr); }
  .vcard__foot { flex-direction: column; align-items: stretch; }
  .vcard__more { justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .vcard, .vcard__img, .vcard__mono, .vmini__disc { transition: none; }
  .vcard.is-playing .vcard__eq i { animation: none; height: 60%; }
}