/* =========================================================================
   Design Lab branding
   - "Luvansh | Design Lab" lockup: desktop site header + mobile page header
   - Signature loader shown over the 3D viewer until the first ring is ready
   Script face: Oooh Baby (Google Fonts, subset to "Design Lab" in
   _DesignLabStyles.cshtml). Colours: Luvansh teal + champagne gold.
   ========================================================================= */

:root {
    --dl-brand-teal: #003743;
    --dl-brand-gold-dark: #002831;
    --dl-brand-gold: #003642;
    --dl-brand-gold-light: #2F6B73;
    --dl-brand-script: "Oooh Baby", cursive;
}

/* #region Lockup */

.design-lab-lockup__logo {
    display: block;
    flex: none;
    aspect-ratio: 1606 / 341;
    background: url("/v2/images/design-lab/logo-teal.svg") no-repeat center / contain;
}

.design-lab-lockup__divider {
    display: block;
    flex: none;
    width: 1px;
    background: var(--dl-brand-teal);
    opacity: 0.35;
}

.design-lab-lockup__script {
    font-family: var(--dl-brand-script);
    font-weight: 400;
    line-height: 1;
    color: var(--dl-brand-teal);
    white-space: nowrap;
    text-decoration: none;
    letter-spacing: 0;
}

/* Desktop: site header (_WebsiteHeader.cshtml, when ViewData["DesignLabBrand"] is set) */
.luvanshNewPage header .logo.logo--design-lab {
    display: flex;
    align-items: center;
}

    .luvanshNewPage header .logo.logo--design-lab .design-lab-lockup__divider {
        height: 28px;
        margin: 0 14px;
    }

    /* Oooh Baby: 28px draws "Design Lab" ~120px wide, about 80% of the 150px logo, with its
       centre on the logo's (the 40px / 3px sizes were tuned for Great Vibes). */
    .luvanshNewPage header .logo.logo--design-lab .design-lab-lockup__script {
        font-size: 28px;
        transform: translateY(1px);
    }

        .luvanshNewPage header .logo.logo--design-lab .design-lab-lockup__script:hover {
            color: var(--dl-brand-teal);
        }

/* 1025–1279px: the full menu is still shown and the inline lockup (~340px) would
   push it into the icons. "Design Lab" sits under the logo instead, so the lockup
   is no wider than the plain logo was. */
@media screen and (min-width: 1025px) and (max-width: 1279px) {
    .luvanshNewPage header .logo.logo--design-lab {
        flex-direction: column;
        align-items: flex-end;
    }

        .luvanshNewPage header .logo.logo--design-lab img {
            width: 120px;
            height: 24px;
        }

        .luvanshNewPage header .logo.logo--design-lab .design-lab-lockup__divider {
            display: none;
        }

        .luvanshNewPage header .logo.logo--design-lab .design-lab-lockup__script {
            font-size: 17px;
            margin-top: -3px;
            margin-right: -6px;
            transform: none;
        }
}

@media screen and (max-width: 600px) {
    .luvanshNewPage header .logo.logo--design-lab .design-lab-lockup__divider {
        height: 22px;
        margin: 0 10px;
    }

    .luvanshNewPage header .logo.logo--design-lab .design-lab-lockup__script {
        font-size: 22px;
    }
}

/* Mobile: Design Lab page header (Index.cshtml, mobile branch) */
.design-lab-lockup--mobile {
    display: flex;
    align-items: center;
    margin: 0;
    font-size: inherit;
    font-weight: inherit;
    line-height: 1;
}

    /* Sized to leave room for the camera / bookmark / share icons (158px) on a 375px phone */
    .design-lab-lockup--mobile .design-lab-lockup__logo {
        height: clamp(20px, 40vw, 16px); /*By Neha*/
    }

    .design-lab-lockup--mobile .design-lab-lockup__divider {
        height: clamp(13px, 4vw, 18px);
        margin: 0 6px;
    }

    .design-lab-lockup--mobile .design-lab-lockup__script {
        font-size: clamp(21px, 3.6vw, 18px); /*By Neha*/
        transform: translateY(1px);
    }

/* Very small phones: script only, so the header icons still fit */
@media screen and (max-width: 359px) {
    .design-lab-lockup--mobile .design-lab-lockup__logo,
    .design-lab-lockup--mobile .design-lab-lockup__divider {
        display: none;
    }
}

/* #endregion */

/* #region Signature loader */

.dl-brand-loader {
    position: absolute;
    inset: 0;
    z-index: 6;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: radial-gradient(120% 90% at 50% 40%, #ffffff 0%, #fbfaf7 55%, #f3f0ea 100%);
    pointer-events: none;
}

.dl-brand-loader__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: min(78%, 380px);
}

.dl-brand-loader__logo {
    width: 74%;
    opacity: 0;
    transform: translateY(8px);
}

.dl-brand-loader__sig {
    display: block;
    width: 100%;
    margin-top: 2px;
    overflow: visible;
}

    .dl-brand-loader__sig text {
        font-family: var(--dl-brand-script);
        font-size: 68px;
        fill-opacity: 0;
        stroke: var(--dl-brand-gold);
        stroke-width: 0.8;
        stroke-dasharray: 900;
        stroke-dashoffset: 900;
    }

.dl-brand-loader__bar {
    position: relative;
    width: 58%;
    height: 1px;
    margin-top: 20px;
    overflow: hidden;
    background: rgba(0, 55, 67, 0.12);
}

    .dl-brand-loader__bar i {
        position: absolute;
        inset: 0;
        background: linear-gradient(90deg, var(--dl-brand-gold-dark), var(--dl-brand-gold-light));
        transform: scaleX(0);
        transform-origin: left;
    }

.dl-brand-loader__shine {
    position: absolute;
    inset: -20%;
    background: linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, 0.85) 50%, transparent 60%);
    transform: translateX(-120%);
}

.dl-brand-loader__cap {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 28px;
    margin: 0;
    font: 500 11px/1.4 Manrope, sans-serif;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    text-align: center;
    color: #6b7a7d;
    opacity: 0;
}

/* Full intro (first visit in the session) */
.dl-brand-loader.is-playing .dl-brand-loader__logo { animation: dlBrandFadeUp 0.9s 0.1s ease forwards; }
.dl-brand-loader.is-playing .dl-brand-loader__sig text { animation: dlBrandDraw 2s 0.6s ease forwards, dlBrandFill 0.7s 2.3s ease forwards; }
.dl-brand-loader.is-playing .dl-brand-loader__bar i { animation: dlBrandProgress 3s 0.4s cubic-bezier(0.6, 0.05, 0.3, 1) forwards; }
.dl-brand-loader.is-playing .dl-brand-loader__shine { animation: dlBrandSweep 1.2s 2.9s ease forwards; }
.dl-brand-loader.is-playing .dl-brand-loader__cap { animation: dlBrandFadeIn 0.6s 0.8s ease forwards; }

/* Short version (repeat visits in the same session) */
.dl-brand-loader.is-quick.is-playing .dl-brand-loader__logo { animation: dlBrandFadeUp 0.4s ease forwards; }
.dl-brand-loader.is-quick.is-playing .dl-brand-loader__sig text { animation: dlBrandDraw 0.8s 0.15s ease forwards, dlBrandFill 0.35s 0.75s ease forwards; }
.dl-brand-loader.is-quick.is-playing .dl-brand-loader__bar i { animation: dlBrandProgress 1.1s 0.1s cubic-bezier(0.6, 0.05, 0.3, 1) forwards; }
.dl-brand-loader.is-quick.is-playing .dl-brand-loader__shine { animation: dlBrandSweep 0.9s 0.9s ease forwards; }
.dl-brand-loader.is-quick.is-playing .dl-brand-loader__cap { animation: dlBrandFadeIn 0.4s 0.2s ease forwards; }

/* Still loading after the intro: keep the light moving */
.dl-brand-loader.is-waiting .dl-brand-loader__shine { animation: dlBrandSweep 1.4s ease-in-out infinite; animation-delay: 0s; }

/* Ring ready: finish the bar, then close in a circle onto the ring */
.dl-brand-loader.is-done .dl-brand-loader__bar i { animation: none; transform: scaleX(1); transition: transform 0.3s ease; }
.dl-brand-loader.is-closing { animation: dlBrandIris 0.9s cubic-bezier(0.7, 0, 0.2, 1) forwards; }
.dl-brand-loader.is-fading { transition: opacity 0.35s ease; opacity: 0; }

/* The loader has its own caption; hide the plain status text behind it (errors still show) */
.dl-brand-loading .design-lab-viewer-status:not(.error) {
    visibility: hidden;
}

/* The viewer's own loading screen (z-index 300, inside its shadow DOM) would
   otherwise paint above the loader once the canvas becomes visible. */
.dl-brand-loading #ringCanvas {
    isolation: isolate;
}

@keyframes dlBrandFadeUp { to { opacity: 1; transform: none; } }
@keyframes dlBrandFadeIn { to { opacity: 1; } }
@keyframes dlBrandDraw { to { stroke-dashoffset: 0; } }
@keyframes dlBrandFill { to { fill-opacity: 1; stroke-opacity: 0; } }
@keyframes dlBrandProgress { to { transform: scaleX(0.86); } }
@keyframes dlBrandSweep { to { transform: translateX(120%); } }
@keyframes dlBrandIris {
    from { clip-path: circle(85% at 50% 45%); }
    to { clip-path: circle(0% at 50% 45%); }
}

@media (prefers-reduced-motion: reduce) {
    .dl-brand-loader .dl-brand-loader__logo,
    .dl-brand-loader .dl-brand-loader__cap {
        opacity: 1;
        transform: none;
        animation: none !important;
    }

    .dl-brand-loader .dl-brand-loader__sig text {
        fill-opacity: 1;
        stroke-opacity: 0;
        stroke-dashoffset: 0;
        animation: none !important;
    }

    .dl-brand-loader .dl-brand-loader__shine {
        display: none;
    }

    .dl-brand-loader .dl-brand-loader__bar i {
        animation: none !important;
        transform: scaleX(0.86);
    }

    .dl-brand-loader.is-closing {
        animation: none;
        transition: opacity 0.3s ease;
        opacity: 0;
    }
}

/* #endregion */