#phantom-layer {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
}
#phantom-watermark-layer { display: none; }

.phantom {
    position: absolute;
    width: 230px;
    text-align: center;
    color: var(--text);
    font-family: var(--arabic);

    opacity: 0;
    transform: translate(-50%, -50%) scale(0.98);
    transform-origin: 50% 50%;

    filter: brightness(0.95);
}

.phantom-img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 240px;
    object-fit: cover;
    object-position: 50% 22%;
    margin: 0 auto 10px;

    mix-blend-mode: screen;

    filter:
        sepia(0.90)
        saturate(0.25)
        contrast(0.95)
        brightness(0.65)
        blur(1.2px);

    -webkit-mask-image:
        radial-gradient(ellipse 66% 76% at 50% 42%,
            rgba(0,0,0,0.72) 25%, rgba(0,0,0,0.42) 55%, rgba(0,0,0,0.10) 82%, transparent 100%);
            mask-image:
        radial-gradient(ellipse 66% 76% at 50% 42%,
            rgba(0,0,0,0.72) 25%, rgba(0,0,0,0.42) 55%, rgba(0,0,0,0.10) 82%, transparent 100%);

    opacity: 0.35;
}

.phantom-name {
    font: 600 12px/1.3 var(--arabic), var(--mono);
    color: var(--text);
    letter-spacing: 0.04em;
    margin-top: 4px;
    text-shadow: 0 1px 0 rgba(0,0,0,0.7);
    opacity: 0.55;
}

.phantom-quote {
    display: block;
    margin: 6px auto 0;
    max-width: 280px;
    font: 400 13px/1.55 var(--arabic);
    color: var(--text);
    letter-spacing: 0.02em;
    padding: 4px 6px;
    text-shadow: 0 1px 0 rgba(0,0,0,0.55);
    opacity: 0.55;
}
.phantom-quote.en {
    font-family: var(--mono);
    font-style: italic;
    font-size: 12.5px;
}
.phantom-quote::before { content: '\u00AB\u00A0'; color: var(--red); opacity: 0.75; }
.phantom-quote::after  { content: '\u00A0\u00BB';  color: var(--red); opacity: 0.75; }

@keyframes phantom-breath {
    0%   { opacity: 0;    transform: translate(-50%, -50%) scale(0.96); }
    14%  { opacity: 0.30; transform: translate(-50%, -50%) scale(0.99); }
    30%  { opacity: 0.52; transform: translate(-50%, -50%) scale(1.00); }
    50%  { opacity: 0.58; transform: translate(-50%, -50%) scale(1.00); }
    72%  { opacity: 0.52; transform: translate(-50%, -50%) scale(1.00); }
    88%  { opacity: 0.22; transform: translate(-50%, -50%) scale(1.01); }
    100% { opacity: 0;    transform: translate(-50%, -50%) scale(1.02); }
}

@keyframes phantom-breath-img {
    0%   { opacity: 0.0;  filter: sepia(0.95) saturate(0.20) contrast(0.90) brightness(0.55) blur(6px); }
    30%  { opacity: 0.35; filter: sepia(0.90) saturate(0.25) contrast(0.95) brightness(0.65) blur(1.2px); }
    72%  { opacity: 0.30; filter: sepia(0.90) saturate(0.25) contrast(0.95) brightness(0.65) blur(1.4px); }
    100% { opacity: 0.0;  filter: sepia(0.95) saturate(0.20) contrast(0.90) brightness(0.55) blur(6px); }
}

.phantom.is-live {
    animation: phantom-breath var(--phantom-lifespan, 13s) ease-in-out forwards;
}
.phantom.is-live .phantom-img {
    animation: phantom-breath-img var(--phantom-lifespan, 13s) ease-in-out forwards;
}

.phantom.is-live.slow,
.phantom.is-live.slow .phantom-img {
    animation-duration: calc(var(--phantom-lifespan, 13s) * 1.25);
}

@media (max-width: 720px) {
    .phantom       { width: 188px; }
    .phantom-quote { max-width: 220px; font-size: 13px; }
    .phantom-img   { max-height: 210px; }
}
@media (max-width: 460px) {
    .phantom       { width: 160px; }
    .phantom-quote { max-width: 190px; font-size: 12px; }
    .phantom-img   { max-height: 180px; }
    .phantom-name  { font-size: 12px; }
}

html[lang='ar'] .phantom,
html[lang='ar'] .phantom-quote,
html[lang='ar'] .phantom-name { direction: rtl; }
html[lang='en'] .phantom,
html[lang='en'] .phantom-quote,
html[lang='en'] .phantom-name { direction: ltr; }

@media (prefers-reduced-motion: reduce) {
    .phantom.is-live,
    .phantom.is-live .phantom-img { animation-duration: 20s; }
}

body.loading #phantom-layer { visibility: hidden; }
#phantom-layer.paused .phantom.is-live,
#phantom-layer.paused .phantom.is-live .phantom-img { animation-play-state: paused; }