/* Self-contained rainbow UI. ChromaKeyDiv remains a hook for the existing payment lock. */
.engine-ui {
    --engine-accent: var(--ColorBs, #0c578e);
    --engine-text: var(--BkColor, #000);
    --engine-tab-background: var(--ColorLt, #c0e6ff);
    --engine-surface: var(--ColorVl, #e0f5ff);
    --engine-border: var(--ColorLt, #c0e6ff);
    color: var(--engine-text);
    font-family: inherit;
    direction: rtl;
}
.engine-ui, .engine-ui *, .engine-ui *::before, .engine-ui *::after { box-sizing: border-box; }
.engine-ui button { appearance: none; font-family: inherit; text-shadow: none; cursor: pointer; }
.engine-ui button, .engine-ui button::before, .engine-ui button::after { transition: .3s; }
.engine-ui .engine-angles {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: stretch;
    padding: 8px 10px 20px;
    margin-bottom: -14px;
    border: 1px solid var(--engine-border);
    border-bottom: 0;
    border-radius: 18px 18px 0 0;
    background: var(--engine-tab-background);
    background: color-mix(in srgb, var(--engine-tab-background) 65%, transparent);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    overflow-x: auto;
}
.engine-ui .engine-angles-label { display: flex; flex: 0 0 auto; align-items: center; gap: 7px; padding: 0 8px; font-size: 9px; opacity: .65; white-space: nowrap; }
.engine-ui .engine-angles-label .fa { font-size: 15px; }
.engine-ui .engine-angle { position: relative; flex: 1 0 65px; padding: 12px 8px; min-height: 42px; margin: 0; border: 0; border-radius: 0; background: transparent; color: inherit; font-size: 11px; line-height: 1.5; opacity: .8; box-shadow: none; }
.engine-ui .engine-angle::after { content: ''; position: absolute; inset: auto 10px 0; height: 2px; border-radius: 4px; background: var(--engine-accent); opacity: 0; transform: scaleX(.5); }
.engine-ui .engine-angle:hover, .engine-ui .engine-angle.is-selected { opacity: 1; color: var(--engine-accent); }
.engine-ui .engine-angle.is-selected::after { opacity: 1; transform: scaleX(1); }
.engine-ui .engine-material-heading { display: flex; align-items: center; gap: 8px; margin: 8px auto 5px; font-size: 9px; line-height: 1.8; opacity: .7; width: 85%; }
.engine-ui .engine-material-heading .fa { font-size: 10px; }
.engine-ui .engine-material-heading::after { content: ''; flex: 1; height: 1px; margin-inline-start: 4px; background: var(--engine-border); }
.engine-ui .engine-materials { width: 100%; overflow-x: auto; overflow-y: hidden; padding: 4px 2px 14px; text-align: right; scrollbar-color: var(--engine-accent) var(--engine-surface); scrollbar-width: thin; }
.engine-ui .engine-material-row { display: flex; align-items: center; gap: 5px; width: max-content; min-width: 100%; padding: 3px 0; }
.engine-ui .engine-material-row.is-hidden { display: none; }
.engine-ui .engine-material-name { flex: 0 0 60px; font-size: 10px; line-height: 1.6; text-align: center; opacity: .75; }
.engine-ui .engine-swatch { position: relative; flex: 0 0 58px; width: 58px; height: 44px; padding: 0; margin: 0; border: 1px solid var(--engine-border); border-radius: 10px; overflow: hidden; background: var(--Back); background-size: 200px 200px; color: #fff; box-shadow: none; }
.engine-ui .engine-swatch::after { content: ''; position: absolute; inset: 0; background: linear-gradient(-30deg, #0000009e, transparent 60%); pointer-events: none; }
.engine-ui .engine-swatch::before { content: ''; position: absolute; top: 7px; left: 8px; z-index: 2; width: 11px; height: 6px; border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(-45deg) scale(.7); opacity: 0; filter: drop-shadow(0 1px 2px #000); }
.engine-ui .engine-swatch.is-selected { border-color: var(--engine-accent); box-shadow: 0 0 0 2px var(--engine-accent); }
.engine-ui .engine-swatch.is-selected::before { opacity: 1; transform: rotate(-45deg) scale(1); }
.engine-ui .engine-swatch > span { position: absolute; bottom: 4px; right: 4px; z-index: 2; font-size: 8px; line-height: 1.2; text-shadow: 0 1px 3px #000; pointer-events: none; }
.engine-ui .engine-swatch:hover { border-color: var(--engine-accent); }
.engine-ui button:focus-visible, .engine-ui .engine-materials:focus-visible { outline: 2px solid var(--engine-accent); outline-offset: -2px; }
/* Same inset-glow treatment as CrusBoot, scoped to this component. */
.engine-ui .engine-materials::-webkit-scrollbar, .engine-ui .engine-angles::-webkit-scrollbar { height: 8px !important; width: 8px !important; }
.engine-ui .engine-materials::-webkit-scrollbar-track, .engine-ui .engine-angles::-webkit-scrollbar-track { margin: 0 16px; border-radius: 4px; background: var(--engine-surface); box-shadow: inset 0 0 3px var(--engine-accent); }
.engine-ui .engine-materials::-webkit-scrollbar-track { margin-inline: 12vh; }
.engine-ui .engine-materials::-webkit-scrollbar-thumb, .engine-ui .engine-angles::-webkit-scrollbar-thumb { border-radius: 4px; background: var(--engine-tab-background); box-shadow: inset 0 0 4px var(--engine-accent); }
.engine-ui .engine-materials::-webkit-scrollbar-thumb:hover, .engine-ui .engine-angles::-webkit-scrollbar-thumb:hover { box-shadow: inset 0 0 7px var(--engine-accent); }
@supports selector(::-webkit-scrollbar) {
    .engine-ui .engine-materials, .engine-ui .engine-angles { scrollbar-color: auto; scrollbar-width: auto; }
}
@media (prefers-reduced-motion: reduce) {
    .engine-ui button, .engine-ui button::before, .engine-ui button::after { transition: none; }
}
.ChromaRoom {
    position: relative;
    max-width: 100%;
    margin: 0;
    display: block;
    /*background: var(--ColorLt);*/
    /*border-radius: 15px;*/
}

.ChromaKeyBox {
    position: relative;
    z-index: 2;
    width: 100%;
    border: 1px solid var(--engine-border);
    border-radius: 18px;
    background: var(--engine-surface);
    box-shadow: none;
    margin: 0;
    overflow: hidden;
    /* Vars */
    --ChromaAnimTime: 1.5s;
    --ChromaOut: 8%;
    --ChromaSlant: 38%;
    --ChromaEdge: -8%;
    --ChromaSkew: -34deg;
    --ChromaEase: cubic-bezier(.42, 0, .58, 1);
}

    .ChromaKeyBox:before {
        content: '';
        padding-top: 62.5%;
        position: relative;
        display: block;
        height: 0;
    }

    .ChromaKeyBox .ChromaKeyRender {
        transition: 0.7s;
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        pointer-events: none;
        transition: filter .28s ease, transform .45s ease, opacity .28s ease;
    }

    .ChromaKeyBox .DeleteChromaKey {
        position: absolute;
        font-size: 17px;
        left: 5px;
        top: 5px;
        line-height: 40px;
        width: 40px;
        z-index: 7;
        color: var(--RedVl, #e77171);
        text-shadow: 0 0 2px var(--RedBs), 0 0 10px var(--RedBs), 0 0 3px var(--RedBs);
        cursor: pointer;
    }

        .ChromaKeyBox .DeleteChromaKey:before {
            content: "\f2ed";
            font-family: "Font Awesome 6 Pro";
        }

        .ChromaKeyBox .DeleteChromaKey:hover:before {
            color: var(--RedLt, #ff9595);
            font-size: 21px;
        }

    .ChromaKeyBox .ChromaLogo {
        transition: 0.4s;
        position: absolute;
        right: 10px;
        bottom: 10px;
        width: 16%;
        max-width: 100px;
        filter: drop-shadow(0px 0px 3px #000);
        opacity: 0.5;
        z-index: 6;
    }

    .ChromaKeyBox .BackLogo {
        width: 100%;
        position: absolute;
        left: 0;
        top: 0;
        height: 100%;
        padding: 20px;
        padding-right: 40%;
        filter: blur(5px) opacity(0.8);
    }

    .ChromaKeyBox.Blur {
    }

        .ChromaKeyBox.Blur .ChromaLogo {
            transition: 0.3s;
            opacity: 1;
            width: 24%;
            max-width: 150px;
            right: 20px;
            bottom: 20px;
            filter: drop-shadow(0px 0px 10px #000);
        }

    .ChromaKeyBox .ChromaCanvas {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        /* Crop the 16:9 bitmap inside the 16:10 box; keep reveal coordinates unchanged. */
        object-fit: cover;
        object-position: center;
        pointer-events: none;
    }

        .ChromaKeyBox .ChromaCanvas.A {
            z-index: 1;
        }

        .ChromaKeyBox .ChromaCanvas.B {
            z-index: 0;
        }

/* The shared animation clock must not be delayed by global CSS transitions. */
.ChromaKeyBox .ChromaKeyRender.ChromaCanvas,
.ChromaKeyBox .ChromaSweepLight {
    transition: none;
}

.ChromaKeyBox .ChromaSweepLight::after {
    transition: none;
}

/* One shared edge positions both the reveal boundary and the center of the light. */
.ChromaCanvas.RevealLeft {
    clip-path: polygon(0 0, var(--ChromaEdge) 0, calc(var(--ChromaEdge) - var(--ChromaSlant)) 100%, 0 100%);
}

.ChromaCanvas.RevealRight {
    clip-path: polygon(var(--ChromaEdge) 0, 100% 0, 100% 100%, calc(var(--ChromaEdge) - var(--ChromaSlant)) 100%);
}

.ChromaSweepLight {
    position: absolute;
    z-index: 5;
    top: -35%;
    left: calc(var(--ChromaEdge) - var(--ChromaSlant) / 2 - 18%);
    width: 36%;
    height: 170%;
    pointer-events: none;
    opacity: 0;
    background: linear-gradient( 90deg, transparent 0%, rgba(215, 174, 99, 0.05) 10%, rgba(242, 213, 151, 0.20) 24%, rgba(255, 236, 184, 0.52) 40%, rgba(255, 245, 214, 0.92) 50%, rgba(255, 236, 184, 0.52) 60%, rgba(242, 213, 151, 0.20) 76%, rgba(215, 174, 99, 0.05) 90%, transparent 100% );
    /*filter: blur(10px);*/
    filter: drop-shadow(0 0 12px rgba(242, 213, 151, .32)) drop-shadow(0 0 28px rgba(215, 174, 99, .22));
    transform: skewX(var(--ChromaSkew));
    transform-origin: center center;
}

    .ChromaSweepLight:after {
        content: '';
        position: absolute;
        left: 47%;
        top: 0;
        width: 6%;
        height: 100%;
        pointer-events: none;
        background: linear-gradient( 90deg, transparent 0%, rgba(255, 240, 190, .65) 25%, rgba(255, 255, 245, .85) 50%, rgba(255, 240, 190, .65) 75%, transparent 100% );
        filter: blur(1.5px);
        box-shadow: 0 0 8px rgba(255, 225, 150, .9), 0 0 18px rgba(215, 174, 99, .65), 0 0 32px rgba(215, 174, 99, .35);
    }

    .ChromaSweepLight.is-revealing {
        opacity: .92;
    }

.ChromaKeyDiv {
    position: relative;
    margin: 0;
}

    .ChromaKeyDiv.NotPayVidLock {
    }

        .ChromaKeyDiv.NotPayVidLock > * {
            filter: grayscale(0.8) blur(2px);
            pointer-events: none;
        }

        .ChromaKeyDiv.NotPayVidLock .ChromaKeyBox img {
            filter: blur(10px);
            transform: scale(1.2);
            pointer-events: none;
        }

        .ChromaKeyDiv.NotPayVidLock:after {
            font-family: "Font Awesome 6 Pro";
            content: "\f023";
            position: absolute;
            left: calc(50% - 75px);
            top: calc(42% - 75px);
            z-index: 10;
            font-size: 150px;
            width: 150px;
            line-height: 150px;
            color: #ffffff;
            opacity: 0.6;
            pointer-events: none;
            text-shadow: 0 0 10px #000, 0 0 30px #000;
        }

/* Shared Details: self-contained defaults; project theme variables still take precedence. */
@font-face {
    font-family: EngineDetailsSans;
    src: url('Fonts/IranSans.woff2') format('woff2');
    font-display: swap;
}
.DetailsBox, .DetailsBox *, .DetailsBox *::before, .DetailsBox *::after {
    box-sizing: border-box;
}
.DetailsBox {
    direction: rtl;
    font-family: IranSans, EngineDetailsSans, Tahoma, sans-serif;
}
/* Keep animated text layers stable; leave the step and playback-control transitions intact. */
.DetailsBox .DetailText,
.DetailsBox .DetailIntroText,
.DetailsBox .DetailIntroAnswer,
.DetailsBox .DetailIntroNext,
.DetailsBox .DetailOutroCompany,
.DetailsBox .DetailOutroSeason {
    will-change: transform, opacity;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    transition: none;
}
.DetailsBox .DetailText *,
.DetailsBox .DetailText::before,
.DetailsBox .DetailText::after,
.DetailsBox .DetailText *::before,
.DetailsBox .DetailText *::after {
    transition: none;
}
[theme="Dark"] .DetailsBox, .DetailsBox[theme="Dark"] {
    --DetailBaseSurface: var(--WtColor,#232323);
    --DetailBaseInk: var(--BkColor,#fff);
}
.DetailsBox {
    --DetailBaseSurface: var(--WtColor,#fff);
    --DetailBaseInk: var(--BkColor,#000);
    --Gold: #d7ae63;
    --GoldLight: #f2d597;
    --DetailMainHeight: 146px;
    --DetailSubHeight: 86px;
    --DetailSafeGap: 18px;
    --DetailSurface: color-mix(in srgb,var(--DetailBaseSurface) 88%,#d7ae63 12%);
    --DetailSurfaceDeep: color-mix(in srgb,var(--DetailBaseSurface) 77%,#a97935 23%);
    --DetailInk: color-mix(in srgb,var(--DetailBaseInk) 90%,#8b641f 10%);
    --DetailEdge: color-mix(in srgb,var(--Gold) 65%,var(--GoldLight) 35%);
    --DetailPlayState: paused;
    position: relative;
    width: 100%;
    max-width: 450px;
    box-sizing: border-box;
    padding-top: calc(var(--DetailMainHeight) + var(--DetailSafeGap));
    padding-bottom: calc(var(--DetailSubHeight) + var(--DetailSafeGap));
    margin: 40px auto 30px;
    isolation: isolate;
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent
}

    .DetailsBox:before {
        content: '';
        position: absolute;
        inset: 0;
        z-index: 0;
        border-radius: 30px;
        background: radial-gradient(ellipse at center,rgba(215,174,99,.13),transparent 68%);
        pointer-events: none
    }

.DetailsCanvas {
    position: relative;
    z-index: 1;
    width: 100%;
    margin-top: calc(0px - var(--DetailMainOverlap));
    margin-bottom: var(--DetailBottomGap)
}

.DetailsBox.Play {
    --DetailPlayState: running
}

.DetailsBox.Hold {
    --DetailPlayState: paused
}

.DetailsBox.Paused {
    --DetailPlayState: paused
}

.DetailImage {
    position: relative;
    width: 100%;
    aspect-ratio: var(--DetailImageRatio);
    box-sizing: border-box;
    border-radius: 28px;
    z-index: 1;
    box-shadow: 0 15px 31px rgba(18,14,9,.22),0 0 0 1px rgba(215,174,99,.12);
    overflow: hidden;
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none
}

    .DetailImage:after {
        content: '';
        position: absolute;
        inset: 0;
        z-index: 10;
        border: 1px solid rgba(242,213,151,.72);
        border-radius: inherit;
        box-sizing: border-box;
        pointer-events: none
    }

.DetailsBox .Image {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    display: block;
    object-fit: cover;
    object-position: center;
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
    -webkit-user-drag: none;
    pointer-events: none;
    filter: brightness(.76) contrast(1.05) saturate(1.04);
    transform: scale(1)
}

.DetailIntro {
    position: absolute;
    inset: 0;
    z-index: 9;
    opacity: 1;
    pointer-events: none
}

.DetailIntroShade {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at center,rgba(0,0,0,.18),rgba(0,0,0,.40));
    opacity: 1
}

.DetailIntroFrame {
    position: absolute;
    inset: 14px;
    border: 1px solid rgba(242,213,151,.88);
    border-radius: 19px;
    box-shadow: 0 0 7px rgba(215,174,99,.20),inset 0 0 7px rgba(215,174,99,.10);
    transform: scale(.96);
    opacity: 0
}

    .DetailIntroFrame:before {
        content: '';
        position: absolute;
        inset: 5px;
        border: 1px solid rgba(215,174,99,.38);
        border-radius: 15px
    }

.DetailIntroText,
.DetailIntroAnswer,
.DetailIntroNext,
.DetailOutroCompany,
.DetailOutroSeason {
    position: absolute;
    width: 90%;
    left: 50%;
    top: 50%;
    direction: rtl;
    color: #fff;
    font-family: IranSans, EngineDetailsSans, Tahoma, sans-serif;
    font-size: 18px;
    font-weight: 800;
    line-height: 30px;
    text-align: center;
    text-shadow: 0 2px 10px rgba(0,0,0,.72);
    opacity: 0
}

.DetailIntroAccent {
    position: absolute;
    width: 120px;
    height: 3px;
    left: calc(50% - 60px);
    top: calc(50% + 22px);
    border-radius: 5px;
    background: linear-gradient(90deg,transparent,var(--GoldLight),transparent);
    box-shadow: 0 0 8px rgba(215,174,99,.65);
    transform: scaleX(0);
    opacity: 0
}

.DetailsBox.Intro .DetailIntro {
    animation: DetailIntroLife 10s ease both
}

.DetailsBox.Intro .Image {
    animation: DetailIntroZoom 10s cubic-bezier(.2,.8,.25,1) both
}

.DetailsBox.SlideZoomIn .Image {
    transform-origin: var(--DetailZoomOrigin, center);
    animation: DetailSlideZoomIn 2.4s .2s cubic-bezier(.2,.8,.25,1) both
}

.DetailsBox.SlideZoomOut .Image {
    transform-origin: var(--DetailZoomOrigin, center);
    animation: DetailSlideZoomOut 1.2s .3s cubic-bezier(.2,.8,.25,1) both
}

.DetailsBox.Final .Image {
    animation: DetailFinalZoom 2s cubic-bezier(.2,.8,.25,1) forwards
}

.DetailsBox.Final .DetailIntroShade {
    animation: DetailFinalShadeIn 1.6s ease forwards
}

.DetailsBox.Final .DetailIntroFrame {
    animation: DetailFinalFrameIn 1.35s cubic-bezier(.2,.8,.25,1) forwards
}

.DetailsBox.Final .DetailIntroText {
    top: calc(50% - 10px);
    animation: DetailFinalTextIn .9s .45s ease both
}

.DetailsBox.Final .DetailOutroCompany {
    top: calc(100% - 54px);
    font-size: 11px;
    font-weight: 600;
    line-height: 24px;
    animation: DetailFinalTextIn 1s .95s ease both;
    color: #d0bc99;
}

.DetailsBox.Final .DetailOutroSeason {
    top: calc(100% - 32px);
    font-size: 8.5px;
    font-weight: 500;
    line-height: 14px;
    color: #e5d5b8;
    animation: DetailFinalTextIn 1s 1.25s ease both
}

.DetailsBox.Final .DetailIntroAccent {
    top: calc(50% + 12px);
    animation: DetailFinalAccentIn .8s .65s ease both
}

.DetailsBox.Intro .DetailIntroShade {
    animation: DetailIntroShadeIn 10s ease both
}

.DetailsBox.Intro .DetailIntroFrame {
    animation: DetailIntroFrameIn 10s ease both
}

.DetailsBox.Intro .DetailIntroText {
    animation: DetailIntroTextIn 8s ease both
}

.DetailsBox.Intro .DetailIntroAnswer {
    animation: DetailIntroAnswerIn .9s 3.1s ease both,DetailIntroAnswerSettle .8s 5.1s ease forwards,DetailIntroSettledOut .6s 7.4s ease forwards
}

.DetailsBox.Intro .DetailIntroNext {
    animation: DetailIntroAnswerIn .9s 5.4s ease both,DetailIntroAnswerOut 1.4s 8.6s ease forwards
}

.DetailsBox.Intro .DetailIntroAccent {
    animation: DetailIntroAccentIn 10s ease both
}

.DetailSteps {
    position: absolute;
    width: 38%;
    top: -28px;
    left: 62%;
    z-index: 12;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transform: scale(1);
    transform-origin: center;
    transition: left .55s ease;
    pointer-events: none;
}

    .DetailSteps.MainRight {
        left: 0
    }

    .DetailSteps span {
        position: relative;
        width: 18px;
        height: 18px;
        box-sizing: border-box;
        border: 1px solid #d7a94f;
        border-radius: 50%;
        background: radial-gradient(circle at 35% 28%,#fff 0 18%,#fff8ea 38%,#ead8b9 100%);
        box-shadow: 0 2px 5px rgba(74,48,14,.17),inset 0 -1px 2px rgba(157,106,31,.12)
    }

        .DetailSteps span:after {
            content: '';
            position: absolute;
            inset: -1px;
            border: 1px solid #f5dda7;
            border-radius: 50%;
            box-sizing: border-box;
            background: radial-gradient(circle at 35% 28%,#fff3c8 0 10%,#e3b953 34%,#bd8022 100%);
            box-shadow: 0 2px 6px rgba(78,47,8,.28),0 0 0 2px rgba(242,213,151,.35),0 0 9px rgba(215,174,99,.58),inset 0 1px 2px rgba(255,255,255,.62);
            opacity: 0;
            transition: opacity .7s ease
        }

    .DetailSteps[data-step="0"] span:nth-child(-n+1):after,
    .DetailSteps[data-step="1"] span:nth-child(-n+2):after,
    .DetailSteps[data-step="2"] span:nth-child(-n+3):after,
    .DetailSteps[data-step="3"] span:nth-child(-n+4):after {
        opacity: 1
    }

.DetailHoldPause {
    position: absolute;
    width: 87px;
    height: 87px;
    top: 22px;
    right: 22px;
    z-index: 13;
    pointer-events: none;
    opacity: 0;
    transform: scale(.82);
    transition: opacity .32s ease .5s, transform .42s cubic-bezier(.2, .8, .25, 1) .5s;
    background: #1a0f0169;
    border-radius: 50%;
    box-shadow: 0 0 5px 1px #000;
    backdrop-filter: blur(2px);
}

    .DetailHoldPause:before {
        position: absolute;
        content: '\f04c';
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        color: var(--GoldLight);
        font-family: "Font Awesome 6 Pro";
        font-size: 40px;
        font-weight: 900;
        line-height: 87px;
        text-align: center;
        text-shadow: 0 2px 7px rgba(0,0,0,.55),0 0 10px rgba(242,213,151,.55);
        opacity: 0;
        transition: opacity .2s ease
    }

.DetailHoldPlay {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    color: var(--GoldLight);
    font-family: "Font Awesome 6 Pro";
    font-size: 40px;
    font-weight: 900;
    line-height: 87px;
    text-align: center;
    text-indent: 4px;
    text-shadow: 0 2px 7px rgba(0,0,0,.55),0 0 10px rgba(242,213,151,.55);
    opacity: 1;
    transform: scale(.94);
    transition: opacity .2s ease,transform .24s ease
}

    .DetailHoldPlay:before {
        content: '\f04b'
    }

.DetailsBox.Hold .DetailHoldPause,
.DetailsBox.Paused .DetailHoldPause,
.DetailsBox:not(.Play) .DetailHoldPause {
    opacity: 1;
    transform: scale(1);
    transition-delay: .1s
}

    .DetailsBox.Hold .DetailHoldPause:before,
    .DetailsBox.Paused .DetailHoldPause:before,
    .DetailsBox:not(.Play) .DetailHoldPause:before {
        opacity: 1
    }

.DetailsBox.Hold .DetailHoldPlay,
.DetailsBox.Paused .DetailHoldPlay,
.DetailsBox:not(.Play) .DetailHoldPlay {
    opacity: 0;
    transform: scale(.72)
}

.DetailPlayToggle {
    position: absolute;
    /*top: 11px;*/
    /*right: 11px;*/
    bottom: 25px;
    left: 25px;
    z-index: 12;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 1px solid rgba(242,213,151,.78);
    border-radius: 50%;
    background: linear-gradient(145deg,rgba(56,42,23,.94),rgba(27,22,16,.94));
    color: var(--GoldLight);
    box-shadow: 0 5px 14px rgba(0,0,0,.36),0 0 0 3px rgba(215,174,99,.17),inset 0 0 0 1px rgba(255,255,255,.14);
    cursor: pointer;
    transition: transform .2s ease,opacity .2s ease,background .2s ease,box-shadow .2s ease
}

    .DetailPlayToggle:before {
        content: '';
        position: absolute;
        width: 3px;
        height: 12px;
        left: 12px;
        top: 11px;
        border-radius: 3px;
        background: currentColor;
        box-shadow: 7px 0 0 currentColor
    }

    .DetailPlayToggle:hover {
        transform: scale(1.08);
        background: rgba(67,51,27,.78);
        box-shadow: 0 6px 17px rgba(0,0,0,.42),0 0 0 4px rgba(215,174,99,.22),0 0 13px rgba(242,213,151,.24)
    }

    .DetailPlayToggle:active {
        transform: scale(.93)
    }

    .DetailPlayToggle:focus-visible {
        outline: 2px solid #fff;
        outline-offset: 3px
    }

.DetailsBox.Paused .DetailPlayToggle {
    color: #443419;
    background: rgba(242,213,151,.92);
    box-shadow: 0 5px 14px rgba(0,0,0,.34),0 0 0 3px rgba(215,174,99,.24),0 0 15px rgba(242,213,151,.32)
}

    .DetailsBox.Paused .DetailPlayToggle:before {
        width: 0;
        height: 0;
        left: 14px;
        top: 11px;
        border-top: 7px solid transparent;
        border-bottom: 7px solid transparent;
        border-left: 11px solid currentColor;
        border-radius: 2px;
        background: transparent;
        box-shadow: none
    }

.DetailsStage {
    position: absolute;
    inset: 0;
    z-index: 2
}

.DetailsLines {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    pointer-events: none;
    overflow: visible;
    z-index: 3
}

.DetailLine {
    --LineOpacity: .99;
    fill: none;
    stroke: var(--GoldLight);
    stroke-width: 2.65;
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
    stroke-dasharray: 1;
    stroke-dashoffset: 0;
    opacity: var(--LineOpacity);
    filter: drop-shadow(0 1px 1.5px rgba(0,0,0,.48)) drop-shadow(0 0 5px rgba(215,174,99,.46))
}

    .DetailLine.Main {
        --LineOpacity: 1;
        stroke-width: 3.05
    }

.DetailPoint {
    --Place: translate(-50%,-50%);
    position: absolute;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #fff;
    border: 4px solid var(--GoldLight);
    transform: var(--Place);
    box-shadow: 0 2px 6px rgba(0,0,0,.34),0 0 0 3px rgba(215,174,99,.18),0 0 10px rgba(215,174,99,.28);
    z-index: 5
}

    .DetailPoint.Main {
        width: 21px;
        height: 21px;
        box-shadow: 0 2px 8px rgba(0,0,0,.40),0 0 0 5px rgba(215,174,99,.22),0 0 15px rgba(215,174,99,.38)
    }

.DetailText {
    --Place: translate(-50%,0);
    position: absolute;
    width: var(--DetailSubWidth,43%);
    height: var(--DetailSubHeight);
    padding: 11px 10px 9px;
    box-sizing: border-box;
    direction: rtl;
    text-align: right;
    transform: var(--Place);
    border-radius: 14px;
    border: 1px solid var(--DetailEdge);
    background: linear-gradient(145deg,var(--DetailSurface),var(--DetailSurfaceDeep));
    box-shadow: 0 8px 18px rgba(24,20,14,.14),inset 0 1px 0 rgba(255,255,255,.20);
    overflow: hidden;
    z-index: 7;
    color: var(--DetailInk);
    cursor: default
}

    .DetailText:before {
        content: var(--DetailIcon);
        position: absolute;
        left: 6px;
        top: 6px;
        width: 30px;
        line-height: 30px;
        text-align: center;
        font-family: var(--DetailIconFont,inherit);
        font-weight: 900;
        font-size: 16px;
        color: #c99636;
        text-shadow: 0 1px 0 rgba(255,255,255,.30),0 0 7px rgba(215,174,99,.18)
    }

    .DetailText:after {
        content: '';
        position: absolute;
        width: 46%;
        height: 3px;
        left: 50%;
        bottom: 0;
        transform: translateX(-50%);
        border-radius: 5px;
        background: linear-gradient(90deg,transparent,#b77d20,var(--GoldLight),#b77d20,transparent);
        box-shadow: 0 1px 5px rgba(215,174,99,.30)
    }

.DetailTitle {
    width: calc(100% - 28px);
    margin-left: 28px;
    font-family: IranSans, EngineDetailsSans, Tahoma, sans-serif;
    font-size: 12px;
    font-weight: 900;
    line-height: 19px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.DetailDesc {
    margin-top: 3px;
    font-family: IranSans, EngineDetailsSans, Tahoma, sans-serif;
    font-size: 10.5px;
    font-weight: 500;
    line-height: 14px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    opacity: .78
}

.DetailTags {
    display: flex;
    gap: 8px;
    margin-top: 5px;
    white-space: nowrap
}

    .DetailTags span {
        display: flex;
        align-items: center;
        gap: 4px;
        font-family: IranSans, EngineDetailsSans, Tahoma, sans-serif;
        font-size: 8.5px;
        font-weight: 600;
        line-height: 11px;
        opacity: .72
    }

    .DetailTags i {
        width: 4px;
        height: 4px;
        flex: 0 0 4px;
        border-radius: 50%;
        background: #cda65a;
        box-shadow: 0 0 4px rgba(205,166,90,.4)
    }

.DetailText.Main {
    --Place: translate(-50%,-100%);
    width: 60%;
    height: var(--DetailMainHeight);
    padding: 14px 16px 11px;
    border-radius: 20px;
    border-color: var(--DetailEdge);
    background: linear-gradient(155deg,color-mix(in srgb,var(--DetailBaseSurface) 93%,#f1d49b 7%),color-mix(in srgb,var(--DetailBaseSurface) 75%,#ac7733 25%));
    box-shadow: 0 15px 32px rgba(24,20,14,.19),0 0 0 1px rgba(215,174,99,.15),inset 0 1px 0 rgba(255,255,255,.22)
}

    .DetailText.Main:before {
        left: 14px;
        top: 13px;
        font-size: 20px
    }

    .DetailText.Main:after {
        width: 58%;
        top: 0;
        bottom: auto
    }

    .DetailText.Main .DetailTitle {
        width: calc(100% - 42px);
        margin-left: 42px;
        font-size: 17px;
        line-height: 22px
    }

    .DetailText.Main .DetailDesc {
        font-size: 11.5px;
        line-height: 16px;
        margin-top: 2px;
        opacity: .78
    }

    .DetailText.Main .DetailTags {
        gap: 12px
    }

        .DetailText.Main .DetailTags span {
            font-size: 9px;
            opacity: .7
        }

        .DetailText.Main .DetailTags i {
            width: 5px;
            height: 5px;
            flex-basis: 5px
        }

.DetailExtra {
    margin: 6px auto;
    padding: 5px 8px;
    border-radius: 7px;
    border: 1px solid rgba(215,174,99,.20);
    background: linear-gradient(90deg,rgba(215,174,99,.12),rgba(215,174,99,.28),rgba(215,174,99,.12));
    font-family: IranSans, EngineDetailsSans, Tahoma, sans-serif;
    font-size: 9.5px;
    font-weight: 500;
    line-height: 20px;
    opacity: .9;
    white-space: pre;
    overflow: hidden;
}

.DetailProgress {
    position: relative;
    width: 82%;
    height: 6px;
    margin: 9px auto 3px;
    border-radius: 10px;
    background: color-mix(in srgb,var(--DetailInk) 18%,transparent);
    overflow: hidden;
    box-shadow: inset 0 1px 2px rgba(24,20,14,.25),0 1px 0 rgba(255,255,255,.12)
}

    .DetailProgress:after {
        content: '';
        position: absolute;
        width: 0;
        height: 100%;
        left: 0;
        top: 0;
        border-radius: inherit;
        background: linear-gradient(90deg,#a96f19 0,#dca63e 32%,#fff0a5 55%,#d7ae63 78%,#b77b1f 100%);
        box-shadow: 0 0 6px rgba(215,174,99,.48)
    }

.DetailAnchorDot {
    --Place: translate(-50%,-50%);
    position: absolute;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--GoldLight);
    border: 2px solid #fff;
    transform: var(--Place);
    box-shadow: 0 1px 4px rgba(0,0,0,.22),0 0 0 2px rgba(215,174,99,.14);
    z-index: 8
}

    .DetailAnchorDot.Main {
        width: 11px;
        height: 11px;
        box-shadow: 0 1px 5px rgba(0,0,0,.25),0 0 0 4px rgba(215,174,99,.20),0 0 12px rgba(215,174,99,.30)
    }

/* ---------- PREP ---------- */
.DetailsStage.Prep .DetailText, .DetailsStage.Prep .DetailPoint, .DetailsStage.Prep .DetailAnchorDot {
    opacity: 0
}

.DetailsStage.Prep .DetailLine {
    stroke-dashoffset: 1;
    opacity: 0
}

.DetailsStage.Prep.Wait {
    /* Keep the slide gap independent of image zoom timing. */
    animation: DetailSlideGap .32s linear both
}

/* ---------- ENTER ---------- */
.DetailsStage.Enter .DetailPoint {
    --DetailEnterAnimation: DetailPointIn 1.08s cubic-bezier(.2,1.45,.35,1) var(--PointDelay) both;
    animation: var(--DetailEnterAnimation);
}

.DetailsStage.Enter .DetailLine {
    --DetailEnterAnimation: DetailLineIn 5s linear var(--LineDelay) both;
    animation: var(--DetailEnterAnimation);
}

.DetailsStage.Enter .DetailText {
    --DetailEnterAnimation: DetailCardIn 1.2s cubic-bezier(.2,.8,.25,1) var(--CardDelay) both;
    animation: var(--DetailEnterAnimation);
}

.DetailsStage.Enter .DetailAnchorDot {
    --DetailEnterAnimation: DetailDotIn .75s ease var(--CardDelay) both;
    animation: var(--DetailEnterAnimation);
}

/* ---------- PROGRESS CYCLE ---------- */
.DetailsStage.Enter .DetailProgress:after {
    animation: DetailProgressFill 9.25s 1.5s linear forwards;
}

/* ---------- EXIT ---------- */
.DetailsStage.DetailsExiting {
    animation: DetailStageOut 1.68s linear both;
}

    .DetailsStage.DetailsExiting .DetailText {
        animation: var(--DetailEnterAnimation), DetailCardOut .84s ease var(--OutDelay) both;
    }

    .DetailsStage.DetailsExiting .DetailAnchorDot {
        animation: var(--DetailEnterAnimation), DetailDotOut .66s ease var(--OutDelay) both;
    }

    .DetailsStage.DetailsExiting .DetailLine {
        animation: var(--DetailEnterAnimation), DetailLineOut 1.08s ease-in calc(var(--OutDelay) - 160ms) both;
    }

    .DetailsStage.DetailsExiting .DetailPoint {
        animation: var(--DetailEnterAnimation), DetailPointOut .78s ease calc(var(--OutDelay) + 510ms) both;
    }

.DetailsStage.Enter.DetailsExiting .DetailProgress:after {
    animation-play-state: paused
}

.DetailsStage.Enter .DetailPoint,
.DetailsStage.Enter .DetailLine,
.DetailsStage.Enter .DetailText,
.DetailsStage.Enter .DetailAnchorDot,
.DetailsStage.Enter .DetailProgress:after,
.DetailsBox.Intro .DetailIntro,
.DetailsBox.Intro .Image,
.DetailsBox.SlideZoomIn .Image,
.DetailsBox.SlideZoomOut .Image,
.DetailsStage.Prep.Wait,
.DetailsBox.Final .Image,
.DetailsBox.Final .DetailIntroShade,
.DetailsBox.Final .DetailIntroFrame,
.DetailsBox.Final .DetailIntroText,
.DetailsBox.Final .DetailOutroCompany,
.DetailsBox.Final .DetailOutroSeason,
.DetailsBox.Final .DetailIntroAccent,
.DetailsBox.Intro .DetailIntroShade,
.DetailsBox.Intro .DetailIntroFrame,
.DetailsBox.Intro .DetailIntroText,
.DetailsBox.Intro .DetailIntroAnswer,
.DetailsBox.Intro .DetailIntroNext,
.DetailsBox.Intro .DetailIntroAccent,
.DetailsStage.DetailsExiting,
.DetailsStage.DetailsExiting .DetailText,
.DetailsStage.DetailsExiting .DetailAnchorDot,
.DetailsStage.DetailsExiting .DetailLine,
.DetailsStage.DetailsExiting .DetailPoint {
    animation-play-state: var(--DetailPlayState)
}

/* Keep the current entrance frame underneath the exit animation. */
.DetailsStage.Enter.DetailsExiting .DetailPoint,
.DetailsStage.Enter.DetailsExiting .DetailLine,
.DetailsStage.Enter.DetailsExiting .DetailText,
.DetailsStage.Enter.DetailsExiting .DetailAnchorDot {
    animation-play-state: paused, var(--DetailPlayState)
}

@keyframes DetailIntroLife {
    from, to {
        opacity: 1
    }
}

@keyframes DetailIntroZoom {
    0% {
        transform: scale(1);
        transform-origin: 38% 50%
    }

    25% {
        transform: scale(1.22);
        transform-origin: 36% 50%;
        animation-timing-function: linear
    }

    79% {
        transform: scale(1.22);
        transform-origin: 64% 50%;
        animation-timing-function: cubic-bezier(.2,.8,.25,1)
    }

    100% {
        transform: scale(1);
        transform-origin: 64% 50%
    }
}

@keyframes DetailSlideGap {
    from, to {
        opacity: 1
    }
}

@keyframes DetailSlideZoomIn {
    from {
        transform: scale(1)
    }

    to {
        transform: scale(var(--DetailSlideZoom))
    }
}

@keyframes DetailSlideZoomOut {
    from {
        transform: var(--DetailZoomOutFrom, scale(var(--DetailSlideZoom)))
    }

    to {
        transform: scale(1)
    }
}

@keyframes DetailFinalZoom {
    from {
        transform: scale(1)
    }

    to {
        transform: scale(1.22)
    }
}

@keyframes DetailFinalShadeIn {
    from {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

@keyframes DetailFinalFrameIn {
    from {
        opacity: 0;
        transform: scale(.96)
    }

    to {
        opacity: 1;
        transform: scale(1)
    }
}

@keyframes DetailFinalTextIn {
    from {
        opacity: 0;
        transform: translate(-50%,-50%) translateY(8px) scale(.98)
    }

    to {
        opacity: 1;
        transform: translate(-50%,-50%) translateY(0) scale(1)
    }
}

@keyframes DetailFinalAccentIn {
    from {
        opacity: 0;
        transform: scaleX(0)
    }

    to {
        opacity: 1;
        transform: scaleX(1)
    }
}

@keyframes DetailIntroShadeIn {
    0% {
        opacity: 1
    }

    9%, 82.5% {
        opacity: 1
    }

    100% {
        opacity: 0
    }
}

@keyframes DetailIntroFrameIn {
    0%, 5% {
        opacity: 0;
        transform: scale(.96)
    }

    15%, 82.5% {
        opacity: 1;
        transform: scale(1)
    }

    100% {
        opacity: 0;
        transform: scale(1.08)
    }
}

@keyframes DetailIntroTextIn {
    0%, 10% {
        opacity: 0;
        transform: translate(-50%,-50%) translateY(8px) scale(.98)
    }

    21.25%, 35% {
        opacity: 1;
        transform: translate(-50%,-50%) translateY(0) scale(1)
    }

    45%, 82.5% {
        opacity: .7;
        transform: translate(-50%,-50%) translateY(-40px) scale(.66)
    }

    100% {
        opacity: 0;
        transform: translate(-50%,-50%) translateY(-40px) scale(.66)
    }
}

@keyframes DetailIntroAnswerIn {
    from {
        opacity: 0;
        transform: translate(-50%,-50%) translateY(8px) scale(.98)
    }

    to {
        opacity: 1;
        transform: translate(-50%,-50%) translateY(0) scale(1)
    }
}

@keyframes DetailIntroAnswerSettle {
    from {
        opacity: 1;
        transform: translate(-50%,-50%) translateY(0) scale(1)
    }

    to {
        opacity: .7;
        transform: translate(-50%,-50%) translateY(40px) scale(.66)
    }
}

@keyframes DetailIntroSettledOut {
    from {
        opacity: .7;
        transform: translate(-50%,-50%) translateY(40px) scale(.66)
    }

    to {
        opacity: 0;
        transform: translate(-50%,-50%) translateY(40px) scale(.66)
    }
}

@keyframes DetailIntroAnswerOut {
    from {
        opacity: 1;
        transform: translate(-50%,-50%) translateY(0) scale(1)
    }

    to {
        opacity: 0;
        transform: translate(-50%,-50%) translateY(-4px) scale(1)
    }
}

@keyframes DetailIntroAccentIn {
    0%, 18.75% {
        opacity: 0;
        transform: scaleX(0)
    }

    28.75%, 82.5% {
        opacity: 1;
        transform: scaleX(1)
    }

    100% {
        opacity: 0;
        transform: scaleX(1)
    }
}

@keyframes DetailStageOut {
    from {
        opacity: 1
    }

    to {
        opacity: .9999
    }
}

@keyframes DetailPointIn {
    from {
        opacity: 0;
        transform: var(--Place) scale(.65)
    }

    70% {
        opacity: 1;
        transform: var(--Place) scale(1.08)
    }

    to {
        opacity: 1;
        transform: var(--Place) scale(1)
    }
}

@keyframes DetailPointOut {
    to {
        opacity: 0;
        transform: var(--Place) scale(.65)
    }
}

@keyframes DetailLineIn {
    from {
        stroke-dashoffset: 1;
        opacity: var(--LineOpacity)
    }

    to {
        stroke-dashoffset: 0;
        opacity: var(--LineOpacity)
    }
}

@keyframes DetailLineOut {
    90% {
        opacity: var(--LineOpacity)
    }

    to {
        stroke-dashoffset: 1;
        opacity: 0
    }
}

@keyframes DetailCardIn {
    from {
        opacity: 0;
        transform: var(--Place) translateY(7px) scale(.965)
    }

    to {
        opacity: 1;
        transform: var(--Place) translateY(0) scale(1)
    }
}

@keyframes DetailCardOut {
    to {
        opacity: 0;
        transform: var(--Place) translateY(6px) scale(.97)
    }
}

@keyframes DetailDotIn {
    from {
        opacity: 0;
        transform: var(--Place) scale(.4)
    }

    to {
        opacity: 1;
        transform: var(--Place) scale(1)
    }
}

@keyframes DetailDotOut {
    to {
        opacity: 0;
        transform: var(--Place) scale(.4)
    }
}

@keyframes DetailProgressFill {
    to {
        width: 100%
    }
}

/* Shared Present: full-screen player; application styles are not required. */
@font-face {
    font-family: EnginePresentSignature;
    src: url('Fonts/Sarbaz2023.woff2') format('woff2');
    font-display: swap;
}
@font-face {
    font-family: EnginePresentIcons;
    src: url('Fonts/fa-solid-900.woff2?V=1') format('woff2');
    font-weight: 900;
    font-style: normal;
}
.Prezent, .Prezent *, .Prezent *::before, .Prezent *::after {
    box-sizing: border-box;
    transition: .3s;
}
.Prezent {
    font-family: IranSans, EngineDetailsSans, Tahoma, sans-serif;
    font-weight: 600;
    --PresentSafeT: var(--SafeT, env(safe-area-inset-top, 0px));
    --PresentSafeB: var(--SafeB, env(safe-area-inset-bottom, 0px));
    --PresentSafeL: var(--SafeL, env(safe-area-inset-left, 0px));
    --PresentSafeR: var(--SafeR, env(safe-area-inset-right, 0px));
}
.Prezent {
    --Gold: #d7ae63;
    --GoldLight: #eccb87;
    --Text: #eee8dfd9;
    --TextDim: #eee8dfaa;
    --GoldBorder: #d7ae63b5;
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: 100001;
    transform: translate(-50%, -50%);
    width: min(98vw, 51.75vh);
    width: min(98vw, 51.75dvh);
    aspect-ratio: 9 / 16;
    overflow: hidden;
    isolation: isolate;
    box-sizing: border-box;
    direction: rtl;
    background: #050505;
    border-radius: 20px;
    box-shadow: 0 0 3px 2px #000, 0 25px 80px #000c;
    animation: none !important;
    transition: none !important;
    opacity: 0;
}

    /* نور گرم بالا */
    .Prezent::before {
        content: '';
        position: absolute;
        z-index: 2;
        top: -12%;
        left: -25%;
        width: 75%;
        aspect-ratio: 1;
        pointer-events: none;
        background: radial-gradient(circle, #d7a14d38 0%, transparent 68%);
        filter: blur(22px);
    }

    /* نور گرم پایین */
    .Prezent::after {
        content: '';
        position: absolute;
        z-index: 2;
        right: -30%;
        bottom: -18%;
        width: 85%;
        aspect-ratio: 1;
        pointer-events: none;
        background: radial-gradient(circle, #b77b2830 0%, transparent 70%);
        filter: blur(26px);
    }

.Prezent .PresentMusic {
    display: none;
}

/* بک‌گراند مشترک همه اسلایدها */
.Prezent .PresentBack {
    position: absolute;
    z-index: 0;
    inset: -2%;
    width: 104%;
    height: 104%;
    object-fit: cover;
    opacity: 1;
    filter: blur(4px) brightness(.55) saturate(.9);
    animation: PresentBackZoom 15s ease-out forwards;
}

.Prezent .PresentDark {
    position: absolute;
    z-index: 1;
    inset: 0;
    background: linear-gradient( to bottom, #050505e8 0%, #05050570 24%, #05050542 48%, #0505057a 70%, #050505eb 100% ), linear-gradient( 90deg, #0007 0%, transparent 32%, transparent 68%, #0007 100% );
}

/* ساختار مشترک اسلایدها */
.Prezent .PresentSlide {
    position: absolute;
    z-index: 3;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translate(-50%, -50%) scale(.985);
    transition: opacity .75s ease, transform .85s ease, visibility .75s;
}

    .Prezent .PresentSlide.Active {
        opacity: 1;
        visibility: visible;
        transform: translate(-50%, -50%) scale(1);
    }

    .Prezent .PresentSlide.Out {
        opacity: 0;
        visibility: hidden;
        transform: translate(-50%, -50%) scale(1.035);
    }

/* ========================================
   اسلاید اول: اینترو
======================================== */

.Prezent .PresentIntro {
    padding: 8%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

    /* قاب طلایی دور اینترو */
    .Prezent .PresentIntro::before {
        content: '';
        position: absolute;
        inset: 28px 14px 14px 14px;
        pointer-events: none;
        border: 1px solid #d7ae6385;
        border-radius: 28px;
        box-shadow: 0 0 22px #d7ae6312, 0 0 1px #fff3 inset;
    }

.Prezent .PresentIntroGroup {
    color: #eee8dfb8;
    font-size: clamp(10px, 1.4vh, 14px);
    font-weight: 500;
    line-height: 1.8;
    opacity: 0;
}

.Prezent .PresentIntroCompany {
    max-width: 90%;
    margin-top: 5%;
    color: var(--GoldLight);
    font-size: clamp(18px, 3.2vh, 32px);
    font-weight: 700;
    line-height: 1.6;
    overflow-wrap: anywhere;
    text-shadow: 0 5px 25px #000e, 0 0 20px #d7ae6325;
    opacity: 0;
}

.Prezent .PresentIntroPresents {
    margin-top: 3%;
    color: #eee8dfb8;
    font-size: clamp(13px, 1.9vh, 19px);
    font-weight: 500;
    line-height: 1.8;
    opacity: 0;
}

.Prezent .PresentIntroCustomer {
    max-width: 92%;
    color: var(--GoldLight);
    font-size: clamp(12px, 1.8vh, 18px);
    font-weight: 700;
    line-height: 3.8;
    overflow-wrap: anywhere;
    text-shadow: 0 4px 20px #000d;
    opacity: 0;
}

.Prezent .PresentIntroSub {
    margin-top: 4%;
    color: #eee8dfc7;
    font-size: clamp(12px, 1.8vh, 18px);
    font-weight: 500;
    line-height: 1.9;
    opacity: 0;
}

.Prezent .PresentIntroEnd {
    color: #d7ae63c7;
    font-size: clamp(12px, 1.5vh, 16px);
    font-weight: 500;
    line-height: 4.5;
    opacity: 0;
}


/* ترتیب ورود اجزای اینترو */
.Prezent .PresentIntro.Active .PresentIntroGroup {
    animation: PresentIntroUp .6s .1s ease-out both;
}

.Prezent .PresentIntro.Active .PresentIntroCompany {
    animation: PresentIntroCompanyIn .8s .3s ease-out both;
}

.Prezent .PresentIntro.Active .PresentIntroPresents {
    animation: PresentIntroUp .6s .75s ease-out both;
}

.Prezent .PresentIntro.Active .PresentIntroCustomer {
    animation: PresentIntroUp .75s 1.2s ease-out both;
}

.Prezent .PresentIntro.Active .PresentIntroSub {
    animation: PresentIntroUp .65s 1.5s ease-out both;
}

.Prezent .PresentIntro.Active .PresentIntroEnd {
    animation: PresentIntroUp .65s 1.9s ease-out both;
}

/* ========================================
   اسلاید دوم: نمایش پروژه
======================================== */

.Prezent .PresentContent {
    position: relative;
    height: 100%;
    padding: 8% 4% 6%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
}

.Prezent .PresentHeader {
    text-align: center;
}

.Prezent .PresentTitle {
    color: var(--GoldLight);
    font-size: clamp(23px, 3.5vh, 36px);
    font-weight: 700;
    line-height: 1.7;
    text-shadow: 0 4px 20px #000b;
}

.Prezent .PresentSub {
    color: var(--Text);
    font-size: clamp(13px, 1.85vh, 19px);
    font-weight: 500;
    line-height: 1.8;
    text-shadow: 0 3px 12px #000c;
}

.Prezent .PresentGallery {
    position: relative;
    margin-top: 6%;
}

.Prezent .PresentPhoto {
    overflow: hidden;
    background: #111;
    border: 2px solid var(--GoldBorder);
    border-radius: 21px;
    box-shadow: 0 24px 55px #000d, 0 0 0 1px #ffffff0d inset;
}

    .Prezent .PresentPhoto img {
        width: 100%;
        height: 100%;
        display: block;
        object-fit: cover;
        object-position: center;
    }

.Prezent .PresentMainPhoto {
    width: calc(100% + 4%);
    margin-right: -2%;
    aspect-ratio: 4 / 3;
}

.Prezent .PresentSmallPhoto {
    position: relative;
    z-index: 2;
    width: 64%;
    margin-top: -12%;
    margin-right: 5%;
    margin-left: auto;
    aspect-ratio: 16 / 9;
    border-radius: 17px;
    box-shadow: 0 28px 55px #000e, 0 0 0 1px #ffffff12 inset;
}

.Prezent .PresentFooter {
    margin-top: 8%;
    text-align: center;
}

.Prezent .PresentBottomTitle {
    color: var(--GoldLight);
    font-size: clamp(18px, 2.7vh, 28px);
    font-weight: 700;
    line-height: 1.8;
    text-shadow: 0 4px 18px #000c;
}

.Prezent .PresentBottomSub {
    color: #eee8dfc9;
    font-size: clamp(12px, 1.8vh, 18px);
    font-weight: 500;
    line-height: 1.9;
    text-shadow: 0 3px 12px #000c;
}

/* انیمیشن‌های اسلاید پروژه فقط بعد از فعال‌شدن */
.Prezent .PresentProject.Active .PresentHeader {
    animation: PresentUp .8s ease-out both;
}

.Prezent .PresentProject.Active .PresentMainPhoto {
    animation: PresentMainIn .9s .15s ease-out both;
}

.Prezent .PresentProject.Active .PresentSmallPhoto {
    animation: PresentSmallIn .9s .6s ease-out both;
}

.Prezent .PresentProject.Active .PresentFooter {
    animation: PresentUp .9s .9s ease-out both;
}

.Prezent .PresentProject.Active .PresentPhoto img {
    animation: PresentImageZoom 15s ease-out forwards;
}

.Prezent .PresentProject.Active .PresentMainPhoto img {
    animation: PresentMainPan 3s .9s ease-in-out both, PresentImageZoom 15s ease-out forwards;
}

/* ========================================
   اسلاید سوم: جزئیات طراحی
======================================== */

.Prezent .PresentDetails {
    overflow: hidden;
}

.Prezent .PresentDetailText {
    position: absolute;
    z-index: 4;
    top: 26%;
    left: 5%;
    width: 50%;
    text-align: right;
    text-align: center;
    white-space: pre;
}

.Prezent .PresentDetailTitle {
    color: var(--GoldLight);
    font-size: clamp(14px, 2.2vh, 24px);
    font-weight: 700;
    line-height: 2;
    text-shadow: 0 0 15px #000;
}

.Prezent .PresentDetailSub {
    margin-top: 18px;
    color: #eee8dfc9;
    font-size: clamp(12px, 1.9vh, 18px);
    font-weight: 500;
    line-height: 2;
    text-shadow: 0 0 15px #000;
}

.Prezent .PresentDetailLine {
    width: 78%;
    margin: 16% 0 0 auto;
}

/* عکس بزرگ کج؛ عکس ورودی همچنان 16:9 است */
.Prezent .PresentDetailMainWrap {
    position: absolute;
    z-index: 1;
    top: 1%;
    right: -20%;
    width: 100%;
    height: 90%;
    filter: drop-shadow(-10px 0px 18px #000d);
}

.Prezent .PresentDetailMain {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border: 2px solid #d7ae63a8;
    border-radius: 15px;
    box-shadow: none;
    transform: skewX(8deg) skewY(-5deg);
    transform-origin: top right;
}

    .Prezent .PresentDetailMain img {
        position: absolute;
        top: 0;
        right: -12%;
        width: 124%;
        height: 100%;
        margin: 0;
        object-fit: cover;
        object-position: right center;
        transform: skewX(-8deg) skewY(5deg) scale(1.13);
        transform-origin: center;
    }
/* عکس افقی پایین */
.Prezent .PresentDetailSmall {
    position: absolute;
    z-index: 3;
    top: 62%;
    right: 6%;
    width: 88%;
    aspect-ratio: 16 / 9;
    border-width: 1px;
    border-radius: 18px;
    box-shadow: 0 28px 55px #000e;
}

.Prezent .PresentDetails.Active .PresentDetailText {
    animation: PresentUp .8s .15s ease-out both;
}

.Prezent .PresentDetails.Active .PresentDetailMainWrap {
    animation: PresentSmallIn .95s .2s ease-out both;
}

.Prezent .PresentDetails.Active .PresentDetailSmall {
    animation: PresentMainIn .9s .65s ease-out both;
}

    .Prezent .PresentDetails.Active .PresentDetailSmall img {
        /*animation: PresentImageZoom 15s ease-out forwards;*/
        animation: PresentImageZoom 4.5s .7s ease-out both;
    }

.Prezent .PresentDetails.Active .PresentDetailMain img {
    animation: PresentMainPan 4.5s 1.1s ease-in-out both reverse;
}
/* ========================================
   اسلاید چهارم: ویژگی‌های طراحی
======================================== */

.Prezent .PresentFeaturesSlide {
    overflow: hidden;
    padding: 7% 5%;
    box-sizing: border-box;
}

.Prezent .PresentFeaturePhotoWrap {
    position: relative;
    width: 96%;
    height: 46%;
    margin: 2% auto 0;
}

.Prezent .PresentFeaturePhoto {
    width: 100%;
    height: 100%;
    border-width: 1px;
    border-radius: 24px;
    transform: perspective(900px) rotateY(-3deg);
    box-shadow: 0 28px 60px #000d;
}

.Prezent .PresentFeatureHead {
    margin-top: 8%;
    text-align: center;
}

.Prezent .PresentFeatureTitle {
    color: var(--GoldLight);
    font-size: clamp(19px, 3vh, 30px);
    font-weight: 700;
    line-height: 1.8;
    text-shadow: 0 4px 18px #000d;
}

.Prezent .PresentFeatureSub {
    margin-top: 2%;
    color: #eee8dfc9;
    font-size: clamp(12px, 1.8vh, 18px);
    line-height: 1.9;
}

.Prezent .PresentFeatures {
    display: flex;
    margin-top: 8%;
    text-align: center;
    direction: rtl;
}

.Prezent .PresentFeature {
    width: 33.333%;
    padding: 0 2%;
    box-sizing: border-box;
}

    .Prezent .PresentFeature + .PresentFeature {
        border-right: 1px solid #d7ae6338;
    }

.Prezent .PresentFeatureIcon {
    height: 42px;
    color: var(--Gold);
    font-size: clamp(25px, 4vh, 40px);
    line-height: 42px;
    margin-bottom: 12%;
    text-shadow: 0 0 16px #d7ae6345;
    font-family: "Font Awesome 6 Pro", EnginePresentIcons;
}

.Prezent .PresentFeature b {
    display: block;
    color: var(--GoldLight);
    font-size: clamp(11px, 1.65vh, 16px);
    line-height: 1.8;
}

.Prezent .PresentFeature span {
    display: block;
    margin-top: 7%;
    color: var(--TextDim);
    font-size: clamp(9px, 1.35vh, 13px);
    line-height: 1.7;
}

.Prezent .PresentFeaturesSlide.Active .PresentFeaturePhotoWrap {
    animation: PresentMainIn .9s .15s ease-out both;
}

.Prezent .PresentFeaturesSlide.Active .PresentFeaturePhoto img {
    animation: PresentMainPan 4s .9s ease-in-out both;
}

.Prezent .PresentFeaturesSlide.Active .PresentFeatureHead {
    animation: PresentUp .8s .55s ease-out both;
}

.Prezent .PresentFeaturesSlide.Active .PresentFeature:nth-child(1) {
    animation: PresentUp .7s .9s ease-out both;
}

.Prezent .PresentFeaturesSlide.Active .PresentFeature:nth-child(2) {
    animation: PresentUp .7s 1.1s ease-out both;
}

.Prezent .PresentFeaturesSlide.Active .PresentFeature:nth-child(3) {
    animation: PresentUp .7s 1.3s ease-out both;
}
/* ========================================
   پایان بندی
======================================== */

.Prezent .PresentEnd {
    overflow: hidden;
}

    .Prezent .PresentEnd:before {
        content: '';
        position: absolute;
        inset: 28px 14px 14px 14px;
        pointer-events: none;
        border: 1px solid #d7ae6385;
        border-radius: 28px;
        box-shadow: 0 0 22px #d7ae6312, 0 0 1px #fff3 inset;
        background: #140b0061;
    }

.Prezent .PresentEndContent {
    position: absolute;
    z-index: 2;
    top: 47%;
    left: 50%;
    width: 88%;
    transform: translate(-50%, -50%);
    text-align: center;
}

.Prezent .PresentEndTitle {
    color: var(--GoldLight);
    font-size: clamp(14px, 2.8vh, 18px);
    font-weight: 700;
    line-height: 1.8;
    text-shadow: 0 4px 22px #000e;
}

.Prezent .PresentEndSub {
    width: 90%;
    margin: 7% auto 0;
    color: #eee8dfd9;
    font-size: clamp(12px, 1.85vh, 18px);
    font-weight: 500;
    line-height: 2;
    text-shadow: 0 3px 14px #000d;
}

.Prezent .PresentEndCompany {
    margin-top: 10%;
    color: var(--Gold);
    font-size: clamp(10px, 1.7vh, 18px);
    font-weight: 600;
    line-height: 1.8;
}

.Prezent .PresentEnd .PresentLine {
    --LineDelay: .8s;
    width: 45%;
    margin-top: 5%;
}

.Prezent .PresentDirected {
    position: absolute;
    z-index: 2;
    bottom: 5%;
    left: 0;
    width: 100%;
    text-align: center;
    color: #d7ae6390;
    font-family: 'Sarbaz', EnginePresentSignature;
    font-size: 8px;
    font-weight: normal;
    direction: ltr;
}

.Prezent .PresentEnd.Active .PresentEndTitle {
    animation: PresentUp .75s .1s ease-out both;
}

.Prezent .PresentEnd.Active .PresentEndSub {
    animation: PresentUp .75s .35s ease-out both;
}

.Prezent .PresentEnd.Active .PresentEndCompany {
    animation: PresentUp .75s .6s ease-out both;
}

.Prezent .PresentEnd.Active .PresentDirected {
    animation: PresentUp .7s 1s ease-out both;
}

/* ========================================
   خط طلایی مشترک اسلایدها
======================================== */

.Prezent .PresentLine {
    --LineDelay: .6s;
    position: relative;
    width: 48%;
    height: 42px;
    margin: 0 auto;
}

    .Prezent .PresentLine:before {
        content: '';
        position: absolute;
        top: 50%;
        left: 0;
        width: 100%;
        height: 2px;
        transform: translateY(-50%);
        background: linear-gradient(90deg, transparent, #d7ae6380, var(--Gold), #d7ae6380, transparent);
    }

    .Prezent .PresentLine:after {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        width: 10px;
        height: 10px;
        border: 1px solid var(--Gold);
        border-radius: 3px;
        background: #16120c;
        transform: translate(-50%, -50%) rotate(45deg);
        box-shadow: 0 0 12px 1px #d7ae6380, 0 0 24px 1px #d7ae6335;
    }

.Prezent .PresentSlide.Active .PresentLine {
    animation: PresentLineIn .85s var(--LineDelay) ease-out both;
}

.Prezent .PresentIntroLine {
    --LineDelay: 1s;
}

.Prezent .PresentIntroLine2 {
    --LineDelay: 1.7s;
}

@keyframes PresentLineIn {
    from {
        opacity: 0;
        clip-path: inset(0 50% 0 50%);
        transform: translateY(5px);
    }

    to {
        opacity: 1;
        clip-path: inset(0 0 0 0);
        transform: translateY(0);
    }
}

/* ========================================
   Story Progress
======================================== */

.Prezent .PresentTop {
    position: absolute;
    z-index: 20;
    top: 12px;
    left: 0;
    width: 100%;
    pointer-events: none;
}

.Prezent .PresentProgress {
    display: flex;
    gap: 4px;
    width: 75%;
    margin: 0 auto;
    direction: ltr;
}

.Prezent .PresentProgressItem {
    flex: 1;
    height: 4px;
    overflow: hidden;
    border-radius: 10px;
    background: #ffffff2b;
    box-shadow: 0 1px 5px #0007;
}

    .Prezent .PresentProgressItem i {
        display: block;
        width: 100%;
        height: 100%;
        border-radius: inherit;
        transform: scaleX(0);
        transform-origin: left center;
        background: linear-gradient( 90deg, #c99d50, var(--GoldLight) );
        box-shadow: 0 0 8px #d7ae6370;
    }

    .Prezent .PresentProgressItem.Done i {
        transform: scaleX(1);
    }

    .Prezent .PresentProgressItem.Active i {
        animation: PresentProgressFill var(--Time) linear forwards;
    }

.Prezent .PresentClose {
    position: absolute;
    top: 20px;
    left: 22px;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #ffffff20;
    border-radius: 50%;
    color: #fff7;
    background: #0007;
    backdrop-filter: blur(8px);
    font-family: "Font Awesome 6 Pro", EnginePresentIcons;
    font-size: 12px;
    pointer-events: auto;
    cursor: pointer;
    opacity: 0.75;
}

    .Prezent .PresentClose:hover {
        background: #000a;
    }

@keyframes PresentProgressFill {
    from {
        transform: scaleX(0);
    }

    to {
        transform: scaleX(1);
    }
}

/* ========================================
   انیمیشن‌ها
======================================== */

@keyframes PresentIntroUp {
    from {
        opacity: 0;
        transform: translateY(18px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes PresentIntroCompanyIn {
    from {
        opacity: 0;
        transform: translateY(18px) scale(.94);
        filter: blur(4px);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
    }
}

@keyframes PresentUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes PresentMainIn {
    from {
        opacity: 0;
        transform: translateY(30px) scale(.965);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes PresentSmallIn {
    from {
        opacity: 0;
        transform: translateX(38px) scale(.92);
    }

    to {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
}

@keyframes PresentMainPan {
    from {
        object-position: right center;
    }

    to {
        object-position: left center;
    }
}

@keyframes PresentImageZoom {
    from {
        transform: scale(1);
    }

    to {
        transform: scale(1.065);
    }
}

@keyframes PresentBackZoom {
    from {
        transform: scale(1);
    }

    to {
        transform: scale(1.055);
    }
}

@media (max-width: 700px) {
    .Prezent {
        inset: 0;
        top: 0;
        left: 0;
        transform: none;
        width: 100vw;
        height: 100vh;
        height: 100dvh;
        aspect-ratio: auto;
        border-radius: 0;
        box-shadow: none;
    }

    .Prezent .PresentSlide {
        top: calc( var(--PresentSafeT) + (100dvh - var(--PresentSafeT) - var(--PresentSafeB)) / 2 );
        left: calc( var(--PresentSafeL) + (100vw - var(--PresentSafeL) - var(--PresentSafeR)) / 2 );
        width: min( calc(100vw - var(--PresentSafeL) - var(--PresentSafeR)), calc((100dvh - var(--PresentSafeT) - var(--PresentSafeB)) * 9 / 16) );
        height: min( calc(100dvh - var(--PresentSafeT) - var(--PresentSafeB)), calc((100vw - var(--PresentSafeL) - var(--PresentSafeR)) * 16 / 9) );
    }

    .Prezent .PresentTop {
        top: calc(var(--PresentSafeT) + 13px);
    }

    .Prezent .PresentProgress {
        width: 72%;
    }

    .Prezent .PresentClose {
        top: 20px;
        left: calc(var(--PresentSafeL) + 14px);
    }
}


























/* Glyphs are local so a standalone player need not load global icon selectors. */
.Prezent .PresentClose::before { content: '\f00d'; }
.Prezent .PresentFeatureIcon.fa-grid-2::before { content: '\e196'; }
.Prezent .PresentFeatureIcon.fa-layer-group::before { content: '\f5fd'; }
.Prezent .PresentFeatureIcon.fa-lightbulb-on::before { content: '\f672'; }