/* ============================================================================
   "Banyo" — Digital Studio's own motion while a picture or a film is being made
   (owner, 21 Oct: "görsel donuk kalmasın … ilerlediğini hissedelim").

   A frame being made is a photograph in the developing tray: the palette's surface
   with the accent and the secondary drifting through it like an emulsion, a fine
   grain, a scanner's light crossing it as it goes, and a caption that says, in words,
   where it is. When the picture comes it does not swap in: it develops — from soft
   and pale to sharp and full colour. Every colour is the palette's (--ds-*), so the
   tray is the palette's in light and in dark. Under prefers-reduced-motion nothing
   moves; the caption and the percent stay.

   Markup (components/develop-motion.js writes it):
     <div class="ds-develop" style="--ds-develop-progress: 0.42; aspect-ratio: 3/4">
       <span class="ds-develop-emulsion"></span>
       <span class="ds-develop-grain"></span>
       <span class="ds-develop-scan"></span>
       <span class="ds-develop-caption"><b>Ayrıntılar işleniyor</b><em>42%</em></span>
     </div>
   ============================================================================ */

.ds-develop {
    position: relative;
    width: 100%;
    min-height: 120px;
    overflow: hidden;
    border-radius: inherit;
    background: var(--ds-surface-2, var(--ds-surface));
    isolation: isolate;
    --ds-develop-progress: 0;
}

/* The emulsion: two slow clouds of the accent and the secondary over the surface; they gather
   (more colour, less drift) as the frame nears its end. */
.ds-develop-emulsion {
    position: absolute;
    inset: -30%;
    background:
        radial-gradient(38% 42% at 30% 35%, rgba(var(--ds-accent-rgb), calc(0.62 + 0.3 * var(--ds-develop-progress))) 0%, transparent 72%),
        radial-gradient(34% 38% at 72% 66%, rgba(var(--ds-secondary-rgb), calc(0.52 + 0.3 * var(--ds-develop-progress))) 0%, transparent 72%),
        radial-gradient(50% 30% at 55% 20%, rgba(var(--ds-ink-rgb), 0.08) 0%, transparent 70%),
        radial-gradient(30% 34% at 18% 80%, rgba(var(--ds-accent-rgb), 0.4) 0%, transparent 70%);
    filter: blur(calc(20px - 10px * var(--ds-develop-progress))) saturate(1.25);
    animation: dsDevelopDrift 9s ease-in-out infinite alternate, dsDevelopBreath 4.5s ease-in-out infinite;
    z-index: 0;
}

@keyframes dsDevelopBreath {
    0%, 100% { opacity: 0.82; }
    50% { opacity: 1; }
}

@keyframes dsDevelopDrift {
    0% { transform: translate3d(-6%, -4%, 0) rotate(0deg) scale(1); }
    50% { transform: translate3d(5%, 3%, 0) rotate(8deg) scale(1.08); }
    100% { transform: translate3d(-2%, 6%, 0) rotate(-5deg) scale(1.02); }
}

/* Film grain: a fine noise, barely there, that keeps the tray alive even when nothing else moves fast. */
.ds-develop-grain {
    position: absolute;
    inset: -50%;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.5  0 0 0 0 0.5  0 0 0 0 0.5  0 0 0 0.55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
    opacity: 0.16;
    mix-blend-mode: overlay;
    animation: dsDevelopGrain 1.2s steps(6) infinite;
    z-index: 1;
    pointer-events: none;
}

@keyframes dsDevelopGrain {
    0% { transform: translate(0, 0); }
    20% { transform: translate(-4%, 3%); }
    40% { transform: translate(3%, -2%); }
    60% { transform: translate(-2%, -4%); }
    80% { transform: translate(4%, 2%); }
    100% { transform: translate(0, 0); }
}

/* The scanner's light: a soft band crossing the frame, top to bottom, again and again. */
.ds-develop-scan {
    position: absolute;
    left: 0;
    right: 0;
    top: -40%;
    height: 40%;
    background: linear-gradient(180deg,
        transparent 0%,
        rgba(var(--ds-accent-rgb), 0.10) 45%,
        rgba(var(--ds-ink-rgb), 0.16) 50%,
        rgba(var(--ds-accent-rgb), 0.10) 55%,
        transparent 100%);
    animation: dsDevelopScan 3.4s cubic-bezier(0.45, 0, 0.25, 1) infinite;
    z-index: 2;
    pointer-events: none;
}

@keyframes dsDevelopScan {
    0% { transform: translateY(0); opacity: 0; }
    12% { opacity: 1; }
    88% { opacity: 1; }
    100% { transform: translateY(350%); opacity: 0; }
}

/* How far it is: a hairline along the bottom that fills with the progress. */
.ds-develop::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    height: 2px;
    width: calc(100% * var(--ds-develop-progress));
    background: var(--ds-accent);
    transition: width 0.6s ease-out;
    z-index: 3;
}

/* Where it is, in words — the step and the percent, on a quiet chip of the palette. */
.ds-develop-caption {
    position: absolute;
    left: 10px;
    bottom: 10px;
    max-width: calc(100% - 20px);
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
    padding: 5px 10px;
    border-radius: 12px;
    background: rgba(var(--ds-surface-rgb), 0.78);
    border: 1px solid rgba(var(--ds-ink-rgb), 0.08);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    color: var(--ds-ink);
    font-size: 12px;
    line-height: 1.2;
    z-index: 4;
}

.ds-develop-caption b {
    font-weight: 600;
    min-width: 0;
    overflow-wrap: anywhere;
    animation: dsDevelopWord 0.5s ease-out;
}

.ds-develop-caption em {
    font-style: normal;
    font-variant-numeric: tabular-nums;
    color: var(--ds-muted);
}

@keyframes dsDevelopWord {
    from { opacity: 0; transform: translateY(3px); }
    to { opacity: 1; transform: none; }
}

/* A film: the tray with a strip of frames sliding along its top edge. */
.ds-develop.is-film .ds-develop-scan {
    top: 0;
    bottom: 0;
    left: -30%;
    right: auto;
    width: 30%;
    height: auto;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(var(--ds-accent-rgb), 0.10) 45%,
        rgba(var(--ds-ink-rgb), 0.14) 50%,
        rgba(var(--ds-accent-rgb), 0.10) 55%,
        transparent 100%);
    animation: dsDevelopPan 3.8s cubic-bezier(0.45, 0, 0.25, 1) infinite;
}

.ds-develop.is-film::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 8px;
    height: 8px;
    background: repeating-linear-gradient(90deg,
        rgba(var(--ds-ink-rgb), 0.22) 0 10px,
        transparent 10px 18px);
    animation: dsDevelopStrip 1.6s linear infinite;
    opacity: 0.6;
    z-index: 3;
}

@keyframes dsDevelopPan {
    0% { transform: translateX(0); opacity: 0; }
    12% { opacity: 1; }
    88% { opacity: 1; }
    100% { transform: translateX(430%); opacity: 0; }
}

@keyframes dsDevelopStrip {
    from { background-position: 0 0; }
    to { background-position: -36px 0; }
}

/* A small tray (a thumbnail, a row's icon): no caption, the motion only. */
.ds-develop.is-small {
    min-height: 0;
}

.ds-develop.is-small .ds-develop-caption {
    display: none;
}

/* The picture, arriving: it develops instead of swapping in. */
.ds-developed {
    animation: dsDeveloped 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

@keyframes dsDeveloped {
    0% { filter: blur(14px) saturate(0.2) brightness(1.15); opacity: 0.35; transform: scale(1.015); }
    60% { filter: blur(2px) saturate(0.85) brightness(1.03); opacity: 1; }
    100% { filter: none; opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .ds-develop-emulsion,
    .ds-develop-grain,
    .ds-develop-scan,
    .ds-develop.is-film::before,
    .ds-develop-caption b,
    .ds-developed {
        animation: none !important;
    }

    .ds-develop-scan {
        display: none;
    }
}

/* ── The panel's placeholders (creative-gen-placeholder) wear the tray ───────────────────────── */
.creative-gen-placeholder:has(> .ds-develop) {
    background: var(--ds-surface-2, var(--ds-surface));
    animation: none;
    box-shadow: inset 0 0 0 1px rgba(var(--ds-ink-rgb), 0.06);
}

.creative-gen-placeholder:has(> .ds-develop)::before,
.creative-gen-placeholder:has(> .ds-develop)::after,
.creative-gen-placeholder:has(> .ds-develop) > .gen-fog,
.creative-gen-placeholder:has(> .ds-develop) > .gen-percent,
.creative-gen-placeholder:has(> .ds-develop) > .gen-label,
.creative-gen-placeholder:has(> .ds-develop) > .gen-icon {
    display: none;
}

.creative-gen-placeholder > .ds-develop {
    position: absolute;
    inset: 0;
    min-height: 0;
    z-index: 2;
    transition: opacity 0.5s ease;
}

/* The picture has come: the tray steps back as the picture develops in under it. */
.creative-gen-placeholder.completed:not(.unified-agent-job) > .ds-develop {
    opacity: 0;
}

.creative-gen-placeholder.completed > .gen-result-img {
    z-index: 1;
}

/* An Agent run's tile its piece has filled (_unified_agent _fillUnifiedAgentTile): the tray steps
   back as the picture develops in; the tile stays until the run is filed in the folder. */
.creative-gen-placeholder.unified-agent-job.is-filled > .ds-develop {
    opacity: 0;
}

/* …and opens large (photo-viewer). */
.creative-gen-placeholder.unified-agent-job.is-filled[role="button"] {
    cursor: zoom-in;
}

/* It did not come: the tray stops, the danger edge and the reason stay. */
.creative-gen-placeholder.failed > .ds-develop .ds-develop-emulsion,
.creative-gen-placeholder.failed > .ds-develop .ds-develop-scan,
.creative-gen-placeholder.failed > .ds-develop .ds-develop-grain {
    animation: none;
    opacity: 0.35;
}

.creative-gen-placeholder.failed > .ds-develop .ds-develop-caption {
    color: var(--ds-danger);
}

.creative-gen-placeholder.failed > .gen-icon {
    display: flex;
}


/* An action started from the picture viewer (edit, 2x/4x, angle): the tray over the dimmed picture, and the
   same tray on the card's grid tile, until the new version arrives; the tray then fades off over it. */
.fullscreen-img-wrapper { position: relative; }
#fullscreenImg { transition: opacity 0.25s ease, filter 0.25s ease; }
#fullscreenImg.is-busy { opacity: 0.45; filter: saturate(0.7); }
.fs-busy {
    position: absolute;
    inset: 0;
    z-index: 5;
    pointer-events: none;
    opacity: 1;
    transition: opacity 0.25s ease;
    animation: fs-busy-in 0.2s ease both;
}
.fs-busy.is-leaving { opacity: 0; }
.fs-busy > .ds-develop { position: absolute; inset: 0; min-height: 0; background: transparent; }
#gridContainer .fs-card-busy > .ds-develop, #carouselContainer .fs-card-busy > .ds-develop { position: absolute; inset: 0; min-height: 0; }
.fs-card-busy { position: absolute; inset: 0; z-index: 4; pointer-events: none; min-height: 0; border-radius: inherit; }
@keyframes fs-busy-in { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .fs-busy { animation: none; } }