/* Animated Sanam logo in the phone / tablet headers (inc/animated-logo.php). */
.sanam-alogo {
    /* Proportions of the original logo (assets/hero-logo.png): mark = .79 × wordmark height,
       gap = .17 ×, wordmark width = 1.6 ×, mark sits slightly low. Only --alogo-h changes per size. */
    --alogo-h: 52px; /* mark 41px, wordmark 83×52px */
    display: inline-flex;
    align-items: center;
    gap: calc(var(--alogo-h) * .17);
    line-height: 0;
}
.sanam-alogo__mark {
    display: block;
    flex: none;
    width: calc(var(--alogo-h) * .79);
    height: calc(var(--alogo-h) * .79);
    object-fit: contain;
    transform: translateY(calc(var(--alogo-h) * .045));
}
.sanam-alogo__word {
    position: relative;
    display: block;
    flex: none;
    width: calc(var(--alogo-h) * 1.6);
    height: var(--alogo-h);
    animation: sanam-alogo 9s cubic-bezier(.65, 0, .35, 1) infinite;
    will-change: clip-path, transform, opacity;
}
.sanam-alogo__word img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }

/* Arabic: the wordmark sits left of the mark and grows leftwards out of it. */
@keyframes sanam-alogo {
    0%, 22% { clip-path: inset(0 0 0 100%); transform: translateX(14px); opacity: 0; }
    34%, 78% { clip-path: inset(0 0 0 0); transform: none; opacity: 1; }
    90%, 100% { clip-path: inset(0 0 0 100%); transform: translateX(14px); opacity: 0; }
}
/* English: to the right of the mark, growing rightwards. */
html:not([dir="rtl"]) .sanam-alogo__word { animation-name: sanam-alogo-ltr; }
@keyframes sanam-alogo-ltr {
    0%, 22% { clip-path: inset(0 100% 0 0); transform: translateX(-14px); opacity: 0; }
    34%, 78% { clip-path: inset(0 0 0 0); transform: none; opacity: 1; }
    90%, 100% { clip-path: inset(0 100% 0 0); transform: translateX(-14px); opacity: 0; }
}

/* Theme header: a little smaller once the page has scrolled, like the old logo. */
.site-header .brand .sanam-alogo { transition: transform .25s ease; transform-origin: right center; }
html:not([dir="rtl"]) .site-header .brand .sanam-alogo { transform-origin: left center; }
.site-header.is-scrolled .brand .sanam-alogo { transform: scale(.86); }

/* Homepage Elementor header: the logo widget sizes every <img> inside it (width 148px…174px,
   max-height); undo that so the mark and the wordmark keep the logo's own sizes. */
.cedkw-logo a { display: inline-flex; align-items: center; line-height: 0; }
.cedkw-logo .sanam-alogo img.sanam-alogo__mark,
.elementor .cedkw-logo .sanam-alogo img.sanam-alogo__mark {
    width: calc(var(--alogo-h) * .79) !important;
    height: calc(var(--alogo-h) * .79) !important;
    max-width: none !important;
    max-height: none !important;
}
.cedkw-logo .sanam-alogo__word img,
.elementor .cedkw-logo .sanam-alogo__word img {
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
}

@media (max-width: 600px) {
    .sanam-alogo { --alogo-h: 46px; }
}

@media (prefers-reduced-motion: reduce) {
    .sanam-alogo__word { animation: none; } /* full logo, still */
}