/* Sinematik mühür — şeffaf katman (önceki boyut / konum korunur) */
.archive-intro__cinematic {
    position: absolute;
    left: 50%;
    top: clamp(28%, 36vh, 40%);
    transform: translate(-50%, -50%);
    width: min(94vw, 1080px);
    aspect-ratio: 16 / 10;
    z-index: 14;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    background: transparent;
    transition: opacity 0.55s ease, visibility 0.55s ease, top 0.8s cubic-bezier(0.22, 1, 0.36, 1), width 0.8s cubic-bezier(0.22, 1, 0.36, 1), transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

.archive-intro[data-phase="wax"] .archive-intro__cinematic,
.archive-intro[data-phase="seal"] .archive-intro__cinematic,
.archive-intro[data-phase="slogan"] .archive-intro__cinematic,
.archive-intro[data-phase="actions"] .archive-intro__cinematic {
    opacity: 1;
    visibility: visible;
}

.archive-intro[data-phase="slogan"] .archive-intro__cinematic,
.archive-intro[data-phase="actions"] .archive-intro__cinematic,
.archive-intro--cinematic-done .archive-intro__cinematic {
    top: clamp(12%, 16vh, 20%);
    top: clamp(12%, 16dvh, 20%);
    width: min(60vw, 460px, 51vh);
    width: min(60vw, 460px, 51dvh);
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

.archive-intro__cinematic-frame {
    position: relative;
    width: 100%;
    height: 100%;
    background: transparent;
    border: none;
    box-shadow: none;
    overflow: visible;
}

.archive-intro__cinematic canvas {
    display: block;
    width: 100% !important;
    height: 100% !important;
    image-rendering: auto;
    background: transparent !important;
}

@media (max-width: 991px) {
    .archive-intro[data-phase="slogan"] .archive-intro__cinematic,
    .archive-intro[data-phase="actions"] .archive-intro__cinematic,
    .archive-intro--cinematic-done .archive-intro__cinematic {
        width: min(56vw, 380px, 48vh);
        width: min(56vw, 380px, 48dvh);
    }
}

@media (max-width: 767px) {
    .archive-intro__cinematic {
        width: min(88vw, 520px);
        top: clamp(20%, 28vh, 34%);
        top: clamp(20%, 28dvh, 34%);
    }

    .archive-intro[data-phase="slogan"] .archive-intro__cinematic,
    .archive-intro[data-phase="actions"] .archive-intro__cinematic,
    .archive-intro--cinematic-done .archive-intro__cinematic {
        top: clamp(14%, 17vh, 21%);
        top: clamp(14%, 17dvh, 21%);
        width: min(68vw, 280px, 44vh);
        width: min(68vw, 280px, 44dvh);
    }
}

@media (max-width: 400px) {
    .archive-intro[data-phase="slogan"] .archive-intro__cinematic,
    .archive-intro[data-phase="actions"] .archive-intro__cinematic,
    .archive-intro--cinematic-done .archive-intro__cinematic {
        top: clamp(13%, 16vh, 20%);
        top: clamp(13%, 16dvh, 20%);
        width: min(64vw, 260px, 42vh);
        width: min(64vw, 260px, 42dvh);
    }
}

@media (max-height: 560px) {
    .archive-intro[data-phase="slogan"] .archive-intro__cinematic,
    .archive-intro[data-phase="actions"] .archive-intro__cinematic,
    .archive-intro--cinematic-done .archive-intro__cinematic {
        top: clamp(12%, 15vh, 18%);
        top: clamp(12%, 15dvh, 18%);
        width: min(44vw, 240px, 42vh);
        width: min(44vw, 240px, 42dvh);
    }
}