/* ==========================================================================
   Component: photo window  (<x-site.window>)
   --------------------------------------------------------------------------
   A photo inside one of the logo's letter shapes, wrapped in its concentric
   lines. Rings are spread box-shadows set per instance (--window-shadows,
   scaled by --ring-grow) so they follow the frame's curve; the arch clips
   them at its flat bottom. The optional tail draws the و's straight lines
   leaving the frame towards the inline end (left in RTL).
     .window--pill    landscape stadium (the م)
     .window--arch    portrait arch, open bottom (one of the س's arches)
     .window--circle  ring (the و)

   Motion — when js/modules/reveal.js adds .is-visible:
     rings open outwards (--ring-grow 0 → 1), the photo settles from a slight
     zoom, the tail extends from the frame, the dot drops onto its place.
     Without JS / with reduced motion: the final state, no animation.
   ========================================================================== */

@property --ring-grow {
    syntax: "<number>";
    inherits: true;
    initial-value: 1;
}

.window {
    --ring-grow: 1;
    position: relative;
    /* reserve room for the rings so they never overlap neighbours */
    margin: calc(var(--window-rings, 0) * var(--ring-gap));
    transition: --ring-grow 1.6s cubic-bezier(0.22, 1, 0.36, 1) var(--reveal-delay, 0ms);
}

.window__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: var(--window-pos, 50% 50%);
    background: var(--panel);
    box-shadow: var(--window-shadows, none);
    transition: scale 1.4s var(--ease-out) var(--reveal-delay, 0ms), filter 1.4s var(--ease-out) var(--reveal-delay, 0ms);
}

/* ── Shapes ──────────────────────────────────────────────────────────────── */
.window--pill   .window__img { aspect-ratio: 7 / 4; border-radius: var(--r-pill); }
.window--circle .window__img { aspect-ratio: 1;     border-radius: 50%; }
.window--arch   .window__img {
    aspect-ratio: 16 / 21;
    border-radius: 999px 999px 0 0;
    /* open bottom: cut the rings off at the photo's flat edge */
    clip-path: inset(calc(var(--window-rings, 0) * var(--ring-gap) * -1) calc(var(--window-rings, 0) * var(--ring-gap) * -1) 0);
}
.window--arch { margin-bottom: 0; }

.window:hover .window__img { filter: saturate(1.08); }

/* ── Tail: the و's parallel lines leaving the frame ─────────────────────── */
.window__tail {
    position: absolute;
    top: 100%;
    inset-inline-start: 50%;
    width: var(--tail-length, 100vw);
    height: calc(var(--window-rings, 0) * var(--ring-gap));
    background: repeating-linear-gradient(
        to bottom,
        transparent 0 calc(var(--ring-gap) - var(--ring-stroke)),
        var(--ring-color) calc(var(--ring-gap) - var(--ring-stroke)) var(--ring-gap)
    );
    transform-origin: right center;          /* RTL: grows from the frame towards the left */
    pointer-events: none;
    z-index: -1;
    transition: transform 1.4s cubic-bezier(0.65, 0, 0.35, 1) calc(var(--reveal-delay, 0ms) + 500ms);
}
[dir="ltr"] .window__tail { transform-origin: left center; }
.window--tail { isolation: isolate; }

/* ── Accent dot, floating above the frame like the logo's circle ────────── */
.window__dot {
    position: absolute;
    top: calc(var(--window-rings, 0) * var(--ring-gap) * -1 - 44px);
    inset-inline-end: 22%;
    background: var(--window-bg);
    transition: transform 0.7s var(--ease-spring) calc(var(--reveal-delay, 0ms) + 900ms),
                opacity 0.4s var(--ease-out) calc(var(--reveal-delay, 0ms) + 900ms);
}
.window--arch .window__dot { inset-inline-end: calc(50% - 17px); }

/* ── Before reveal (JS on, motion allowed) ───────────────────────────────── */
@media (prefers-reduced-motion: no-preference) {
    .js .window:not(.is-visible)               { --ring-grow: 0; }
    .js .window:not(.is-visible) .window__img  { scale: 1.06; filter: saturate(0.6); }
    .js .window:not(.is-visible) .window__tail { transform: scaleX(0); }
    .js .window:not(.is-visible) .window__dot  { transform: translateY(-18px) scale(0.5); opacity: 0; }
}

@media (max-width: 991.98px) {
    .window__dot { --dot-size: 24px; top: calc(var(--window-rings, 0) * var(--ring-gap) * -1 - 32px); }
}