/* Scene 02. Layout owns final placement; GSAP owns transform offsets only. */
.elementor .dc-cinematic-wrapper {
    --container-max-width: 100%;
    --content-width: 100%;
    width: 100%;
    max-width: none;
    padding: 0;
    gap: 0;
    overflow: visible;
}
.elementor .dc-cinematic-wrapper > .e-con-inner {
    max-width: none;
    padding: 0;
}
.dc-cinematic-wrapper .elementor-widget-html,
.dc-cinematic-wrapper .elementor-widget-html > .elementor-widget-container {
    width: 100%;
    min-width: 0;
    padding: 0;
}
.dc-assembly {
    position: relative;
    width: 100%;
    height: 100vh;
    height: 100svh;
    min-height: 480px;
    overflow: clip;
    isolation: isolate;
    color: #f1e8dc;
    background: radial-gradient(ellipse at 68% 52%, #211b16 0%, #100e0c 48%, #080706 88%);
}
/* Overscanned independent planes: no full-screen blur or blend-mode work. */
.dc-assembly__environment {
    position: absolute;
    inset: -5%;
    width: 110%;
    height: 110%;
    max-width: none;
    object-fit: cover;
    object-position: 60% 57%;
    transform-origin: 62% 64%;
    opacity: .38;
    pointer-events: none;
    user-select: none;
    z-index: 0;
}
/* ==========================================================
   EDITORIAL LIGHTING / TEXT CONTRAST
========================================================== */

.dc-assembly__shadow {
    position: absolute;
    inset: 0;

    z-index: 1;
    pointer-events: none;

    opacity: 1;

    background:

        /* Strong editorial darkness behind typography */
        linear-gradient(
            90deg,
            rgba(5, 14, 18, .94) 0%,
            rgba(5, 14, 18, .86) 18%,
            rgba(5, 14, 18, .58) 33%,
            rgba(5, 14, 18, .16) 51%,
            rgba(5, 14, 18, .04) 68%,
            rgba(5, 14, 18, .14) 100%
        ),

        /* Bottom cinematic falloff */
        linear-gradient(
            180deg,
            rgba(2, 7, 9, .16) 0%,
            rgba(2, 7, 9, 0) 40%,
            rgba(2, 7, 9, .48) 100%
        ),

        /* Soft vignette */
        radial-gradient(
            ellipse at 67% 47%,
            transparent 28%,
            rgba(2, 5, 7, .12) 63%,
            rgba(2, 5, 7, .58) 100%
        );
}

.dc-assembly__ambient {
    position: absolute;
    inset: 0;

    z-index: 2;
    pointer-events: none;

    opacity: 1;

    background:
        radial-gradient(
            ellipse at 67% 42%,
            rgba(208, 163, 99, .12) 0%,
            rgba(208, 163, 99, .045) 30%,
            transparent 58%
        );
}
.dc-assembly__copy {
    position: absolute;
    left: clamp(24px, 5vw, 112px);
    top: 0;
    bottom: 0;
    width: 31%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    z-index: 5;
}
.dc-assembly__eyebrow {
    margin: 0 0 clamp(20px, 3vh, 36px);
    font-family: var(--e-global-typography-text-font-family, sans-serif);
    font-size: 10px;
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: .28em;
    color: #b9a792;
}
.dc-assembly .dc-assembly__title {
    margin: 0;
    font-family: var(--e-global-typography-primary-font-family, "Cormorant Garamond"), Georgia, serif;
    font-size: clamp(36px, 4.3vw, 84px);
    font-weight: 400;
    line-height: 1.04;
    letter-spacing: -.035em;
    color: inherit;
    overflow-wrap: normal;
}
.dc-assembly__stage {
    position: absolute;
    inset: 0 3% 0 39%;
    display: grid;
    place-items: center;
    perspective: 1400px;
    z-index: 4;
    pointer-events: none;
}
.dc-assembly__dish {
    position: relative;
    width: min(100%, 880px, 112svh);
    aspect-ratio: 3 / 2;
    transform-style: preserve-3d;
}
/* Explicit selectors also support legacy markup without dc-motion-media. */
.dc-assembly__dish > img {
    position: absolute;
    display: block;
    max-width: none;
    height: auto;
    aspect-ratio: 3 / 2;
    object-fit: contain;
    transform-origin: 50% 60%;
    backface-visibility: hidden;
    pointer-events: none;
    user-select: none;
}
.dc-assembly__plate { width: 100%; left: 0; top: 0; z-index: 1; }
.dc-assembly__ingredient--steak { width: 43%; left: 26%; top: 23%; z-index: 10; }
.dc-assembly__ingredient--tomato { width: 30%; left: 54%; top: 35%; z-index: 12; }
.dc-assembly__ingredient--mushrooms { width: 27%; left: 22%; top: 45%; z-index: 13; }
.dc-assembly__ingredient--herbs { width: 20%; left: 43%; top: 25%; z-index: 15; }
.dc-assembly__ingredient--rosemary { width: 24%; left: 39%; top: 49%; z-index: 16; }
.dc-assembly__fx--oil { width: 28%; left: 36%; top: 52%; z-index: 7; transform: scaleY(.38); opacity: .7; }
.dc-assembly__fx--sauce { width: 30%; left: 49%; top: 51%; z-index: 8; transform: scaleY(.55); }
.dc-assembly__particle--salt { width: 15%; left: 37%; top: 39%; z-index: 20; opacity: .24; }
.dc-assembly__particle--pepper { width: 13%; left: 48%; top: 42%; z-index: 21; opacity: .32; }
/* Require explicit approval on replacement layers so stale Elementor markup
   cannot reactivate the former opaque assets. The reference now marks all ready. */
.dc-assembly__ingredient--mushrooms:not([data-dc-asset="ready"]),
.dc-assembly__ingredient--rosemary:not([data-dc-asset="ready"]),
.dc-assembly__fx--sauce:not([data-dc-asset="ready"]),
.dc-assembly__particle--salt:not([data-dc-asset="ready"]),
.dc-assembly__particle--pepper:not([data-dc-asset="ready"]),
.dc-assembly [data-dc-asset="disabled"] {
    display: none;
}

.dc-assembly__stage {
    display: none !important;
}
@media (max-width: 900px) {
    .dc-assembly { min-height: 600px; }
    .dc-assembly__environment { object-position: 64% 58%; transform-origin: 60% 65%; }
    .dc-assembly__copy { inset: 7% 7% auto; width: 86%; }
    .dc-assembly .dc-assembly__title { font-size: clamp(38px, 7.6vw, 64px); }
    .dc-assembly__eyebrow { margin-bottom: 16px; }
    .dc-assembly__stage { inset: 43% 3% 4%; perspective: 1000px; }
    .dc-assembly__dish { width: min(100%, 640px, 76svh); }
}
/* Tablet framing leaves more room around the protein; phone plating is tighter.
   These are final coordinates, never animated layout properties. */
@media (min-width: 601px) and (max-width: 900px) {
    .dc-assembly__ingredient--mushrooms { width: 28%; left: 21%; top: 46%; }
    .dc-assembly__ingredient--rosemary { width: 25%; left: 38%; top: 50%; }
    .dc-assembly__fx--sauce { width: 28%; left: 51%; top: 52%; }
}
@media (max-width: 600px) {
    .dc-assembly__atmosphere { display: none; }
    .dc-assembly__ingredient--steak { width: 45%; left: 25%; top: 22%; }
    .dc-assembly__ingredient--tomato { width: 28%; left: 57%; top: 36%; }
    .dc-assembly__ingredient--mushrooms { width: 29%; left: 19%; top: 46%; }
    .dc-assembly__ingredient--herbs { width: 18%; left: 43%; top: 26%; }
    .dc-assembly__ingredient--rosemary { width: 25%; left: 38%; top: 51%; }
    .dc-assembly__fx--oil { width: 23%; left: 33%; top: 55%; }
    .dc-assembly__fx--sauce { width: 27%; left: 53%; top: 52%; }
    .dc-assembly__particle--salt { width: 13%; left: 36%; top: 40%; }
    .dc-assembly__particle--pepper { width: 11%; left: 49%; top: 42%; }
}
/* Short landscape retains its own readable framing and animated sequence. */
@media (max-width: 900px) and (max-height: 500px) and (orientation: landscape) {
    .dc-assembly { min-height: 400px; }
    .dc-assembly__copy { inset: 0 auto 0 5%; width: 32%; }
    .dc-assembly .dc-assembly__title { font-size: clamp(28px, 4vw, 36px); }
    .dc-assembly__stage { inset: 0 2% 0 40%; }
    .dc-assembly__dish { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
    .dc-assembly__dish, .dc-assembly__dish > img, .dc-assembly__copy {
        will-change: auto;
    }
}