/* ==========================================================================
   Crescent — site-wide enhancements
   1. Crescent motif cursor
   2. Image reveal + hover zoom (Lodha-style)
   3. Sticky quick actions (Call / WhatsApp / Schedule a visit)
   4. Schedule-a-visit dialog
   ========================================================================== */

:root {
    --cr-ink: #202020;
    --cr-accent: #a78272;
    --cr-accent-dark: #8d6a5b;
    --cr-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
    --cr-ease-curtain: cubic-bezier(0.77, 0, 0.175, 1);
}

/* --------------------------------------------------------------------------
   1. Cursor — the Crescent pyramid motif (light left face, dark right face).
   Only on devices with a real mouse; hotspot is the apex.
   -------------------------------------------------------------------------- */
@media (hover: hover) and (pointer: fine) {
    html,
    body {
        cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'%3E%3Cpath d='M14 1.5 2.5 21 14 26.5 25.5 21Z' fill='none' stroke='%23fff' stroke-width='3' stroke-linejoin='round'/%3E%3Cpath d='M14 1.5 2.5 21 14 26.5Z' fill='%23d4d4d4'/%3E%3Cpath d='M14 1.5 25.5 21 14 26.5Z' fill='%23767676'/%3E%3Cpath d='M14 1.5 2.5 21 14 26.5 25.5 21Z' fill='none' stroke='%23151515' stroke-width='1' stroke-linejoin='round'/%3E%3C/svg%3E") 14 2, auto;
    }

    a,
    a *,
    button,
    button *,
    label,
    select,
    summary,
    [role="button"],
    [onclick],
    .tp-btn,
    .hotspot,
    .offcanvas-open-btn,
    .back-to-top-wrapper,
    .swiper-button-next,
    .swiper-button-prev,
    .swiper-pagination-bullet {
        cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'%3E%3Cpath d='M14 1.5 2.5 21 14 26.5 25.5 21Z' fill='none' stroke='%23fff' stroke-width='3' stroke-linejoin='round'/%3E%3Cpath d='M14 1.5 2.5 21 14 26.5Z' fill='%23d9b98e'/%3E%3Cpath d='M14 1.5 25.5 21 14 26.5Z' fill='%23a78272'/%3E%3Cpath d='M14 1.5 2.5 21 14 26.5 25.5 21Z' fill='none' stroke='%23151515' stroke-width='1' stroke-linejoin='round'/%3E%3C/svg%3E") 14 2, pointer;
    }

    input:not([type="submit"]):not([type="button"]):not([type="checkbox"]):not([type="radio"]),
    textarea,
    [contenteditable="true"] {
        cursor: text;
    }
}

/* --------------------------------------------------------------------------
   2. Image reveal + hover zoom.
   JS adds .cr-reveal to content images, .is-in when they enter the viewport,
   and .is-done once the reveal has finished (hover zoom is enabled then).
   Uses the individual `scale` property so it composes with any GSAP transform.
   The hover clip-path inset cancels the scale on the box edges, so the image
   zooms inside its own frame without needing an overflow:hidden wrapper.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
    .cr-reveal {
        clip-path: inset(100% 0 0 0);
        scale: 1.15;
        transition:
            clip-path 1.3s var(--cr-ease-curtain),
            scale 1.8s var(--cr-ease-out);
        will-change: clip-path, scale;
    }

    .cr-reveal.cr-reveal--flat {
        scale: 1;
    }

    .cr-reveal.is-in {
        clip-path: inset(0 0 0 0);
        scale: 1;
    }

    /* Hover zoom, same as the homepage project cards: 3% over 0.9s.
       The clip-path inset (1.46% = (1 - 1/1.03) / 2) keeps the zoomed image
       inside its own frame. Homepage project images zoom via home-template.css. */
    .cr-reveal.is-done {
        transition: all 0.9s;
        will-change: auto;
    }

    .cr-reveal.is-done:not(.cr-projects *):hover {
        scale: 1.03;
        clip-path: inset(1.46% 1.46% 1.46% 1.46%);
    }
}

/* --------------------------------------------------------------------------
   Homepage banner: frosted-glass frame around the triangle.
   The <img> (crescent-glass.svg) supplies tint, sheen, grain and edge line;
   backdrop-filter blurs the video behind it; the mask (the original opaque
   crescent.svg) keeps the triangle itself perfectly clear. The <img> stays
   the element cstm.js scales on scroll, so the zoom animation is unchanged.
   -------------------------------------------------------------------------- */
.banner-wrapper .image-container img.cr-glass {
    /* Raster the glass layer once and only scale it during the scroll zoom.
       Without this Chrome re-renders the SVG + mask on every frame, which
       dropped frames and made the zoom stutter/flicker. */
    will-change: transform;
    -webkit-backdrop-filter: blur(20px) saturate(1.35);
    backdrop-filter: blur(20px) saturate(1.35);
    -webkit-mask: url("../img/crescent.svg") center / cover no-repeat;
    mask: url("../img/crescent.svg") center / cover no-repeat;
}

.banner-wrapper .image-container img.cr-glass--wide {
    -webkit-mask-image: url("../img/crescent-banner.svg");
    mask-image: url("../img/crescent-banner.svg");
}

/* Phones get the smaller-triangle artwork via <picture>, so match the mask. */
@media (max-width: 767px) {
    .banner-wrapper .image-container img.cr-glass--wide {
        -webkit-mask-image: url("../img/crescent.svg");
        mask-image: url("../img/crescent.svg");
    }
}

/* Flat (2D) zoom context: a 3D perspective breaks backdrop-filter. */
.banner-wrapper .image-container {
    perspective: none;
}

/* Banner video: never cropped left/right. It always spans the full width;
   on screens wider than 16:9 it covers the height and any overflow is cut
   from the top only (anchored to the bottom). On narrower screens the full
   frame shows, sitting at the bottom, and the small leftover strip at the top
   is dark and sits behind the header. */
.banner-wrapper .section.hero {
    background: #121214;
}

.banner-wrapper .section.hero video {
    object-fit: contain;
    object-position: center bottom;
}

@media (min-aspect-ratio: 16/9) {
    .banner-wrapper .section.hero video {
        object-fit: cover;
        object-position: center bottom;
    }
}

/* Portrait screens: the video is a short band across the middle, so fit the
   motif inside the screen too (contain) to keep the triangle over the video. */
@media (orientation: portrait) {
    .banner-wrapper .section.hero video {
        object-position: center center;
    }

    .banner-wrapper .image-container img {
        object-fit: contain;
    }

    .banner-wrapper .image-container img.cr-glass {
        -webkit-mask-size: contain;
        mask-size: contain;
    }
}

/* --------------------------------------------------------------------------
   3. Sticky quick actions
   -------------------------------------------------------------------------- */
.cr-sticky {
    position: fixed;
    right: 20px;
    bottom: 160px;
    z-index: 998;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
}

/* Older per-page floating buttons (Crescent T2 pages) are superseded by these. */
.t2-fab-wrap {
    display: none !important;
}

.cr-sticky__btn {
    display: inline-flex;
    flex-direction: row-reverse;
    align-items: center;
    height: 40px;
    min-width: 52px;
    padding: 0 16px;
    gap: 0;
    border: 1px solid rgba(255, 255, 255, 0.55);
    border-radius: 999px;
    background: rgba(24, 24, 24, 0.78);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    color: #ffffff;
    font-family: inherit;
    font-size: 13px;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
    transition: background-color 0.3s ease, border-color 0.3s ease, gap 0.35s var(--cr-ease-out);
}

.cr-sticky__btn svg {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
}

.cr-sticky__label {
    display: inline-block;
    max-width: 0;
    overflow: hidden;
    opacity: 0;
    letter-spacing: 0.04em;
    transition: max-width 0.4s var(--cr-ease-out), opacity 0.25s ease;
}

.cr-sticky__btn:hover,
.cr-sticky__btn:focus-visible {
    gap: 10px;
    color: #ffffff;
    background: var(--cr-accent);
    border-color: var(--cr-accent);
    outline: none;
}

.cr-sticky__btn:hover .cr-sticky__label,
.cr-sticky__btn:focus-visible .cr-sticky__label {
    max-width: 160px;
    opacity: 1;
}

/* Phones, and touch tablets up to 1199px: a full-width bar at the bottom. The
   floating buttons sat over the right edge of the content there (accordion
   toggles, distance values) and a touch screen can't hover to read them. */
@media (max-width: 767px), (max-width: 1199px) and (hover: none) {
    body {
        padding-bottom: 58px;
    }

    /* Project pages' floating "Enquire Now" sat at the very bottom, behind the
       bar; lift it above the bar, and the back-to-top button above it. */
    body .odc-float-cta {
        bottom: calc(58px + 14px + env(safe-area-inset-bottom));
    }

    body:has(.odc-float-cta) .back-to-top-wrapper.back-to-top-btn-show {
        bottom: calc(58px + 14px + 44px + 14px + env(safe-area-inset-bottom));
    }

    /* ...and the footer's last row ends above it, not under it. */
    body:has(.odc-float-cta) .cr-footer__bar {
        padding-bottom: calc(34px + 58px + 64px + env(safe-area-inset-bottom));
    }

    .cr-sticky {
        right: 0;
        bottom: 0;
        left: 0;
        flex-direction: row;
        gap: 0;
        background: #1c1c1c;
        border-top: 1px solid rgba(255, 255, 255, 0.12);
        padding-bottom: env(safe-area-inset-bottom);
    }

    .cr-sticky__btn {
        flex: 1 1 0;
        flex-direction: row;
        justify-content: center;
        height: 58px;
        gap: 8px;
        padding: 0 6px;
        border: 0;
        border-right: 1px solid rgba(255, 255, 255, 0.12);
        border-radius: 0;
        background: transparent;
        box-shadow: none;
        font-size: 12px;
    }

    .cr-sticky__btn:last-child {
        border-right: 0;
        background: var(--cr-accent);
    }

    .cr-sticky__btn:hover,
    .cr-sticky__btn:focus-visible {
        gap: 8px;
    }

    .cr-sticky__label,
    .cr-sticky__btn:hover .cr-sticky__label {
        max-width: none;
        opacity: 1;
    }
}

/* --------------------------------------------------------------------------
   4. Schedule-a-visit dialog
   -------------------------------------------------------------------------- */
.cr-visit[hidden] {
    display: none;
}

.cr-visit {
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.cr-visit__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(12, 12, 12, 0.62);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    animation: crFade 0.3s ease both;
}

.cr-visit__dialog {
    position: relative;
    width: 100%;
    max-width: 520px;
    max-height: calc(100vh - 40px);
    overflow-y: auto;
    padding: 44px 40px 36px;
    background: #ffffff;
    color: var(--cr-ink);
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.3);
    animation: crRise 0.45s var(--cr-ease-out) both;
}

.cr-visit__close {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 38px;
    height: 38px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--cr-ink);
    font-size: 26px;
    line-height: 1;
    transition: background-color 0.25s ease;
}

.cr-visit__close:hover {
    background: #f1ece9;
}

.cr-visit .cr-visit__kicker {
    display: block;
    margin-bottom: 10px;
    color: var(--cr-accent);
    font-size: 12px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.cr-visit .cr-visit__title {
    margin: 0 0 10px;
    color: var(--cr-ink);
    font-size: 30px;
    font-weight: 400;
    line-height: 1.15;
}

.cr-visit .cr-visit__intro {
    margin: 0 0 26px;
    color: #6f6f6f;
    font-size: 15px;
    line-height: 1.6 !important;
}

.cr-visit .cr-visit__field {
    margin-bottom: 18px;
}

.cr-visit .cr-visit__field label {
    display: block;
    margin-bottom: 6px;
    color: var(--cr-ink);
    font-size: 13px;
    line-height: 1.4 !important;
    letter-spacing: 0.04em;
}

.cr-visit .cr-visit__field label small {
    color: #9a9a9a;
    font-size: 12px;
}

.cr-visit .cr-visit__field input,
.cr-visit .cr-visit__field textarea {
    display: block;
    width: 100%;
    height: auto;
    padding: 12px 0;
    border: 0;
    border-bottom: 1px solid #cfcfcf;
    border-radius: 0;
    background: transparent;
    color: var(--cr-ink);
    font-family: inherit;
    font-size: 16px;
    line-height: 1.4 !important;
    box-shadow: none;
    transition: border-color 0.25s ease;
}

.cr-visit .cr-visit__field textarea {
    min-height: 84px;
    resize: vertical;
}

.cr-visit .cr-visit__field input:focus,
.cr-visit .cr-visit__field textarea:focus {
    outline: none;
    border-bottom-color: var(--cr-accent);
}

.cr-visit .cr-visit__hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.cr-visit .cr-visit__submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 50px;
    margin-top: 8px;
    border: 1px solid var(--cr-accent);
    background: var(--cr-accent);
    color: #ffffff;
    font-family: inherit;
    font-size: 15px;
    letter-spacing: 0.06em;
    transition: background-color 0.25s ease, border-color 0.25s ease;
}

.cr-visit .cr-visit__submit:hover {
    background: var(--cr-accent-dark);
    border-color: var(--cr-accent-dark);
}

.cr-visit .cr-visit__submit[disabled] {
    opacity: 0.7;
}

.cr-visit .cr-visit__status {
    min-height: 1.4em;
    margin: 12px 0 0;
    color: #b3261e;
    font-size: 14px;
    line-height: 1.4 !important;
}

html.cr-visit-open,
html.cr-visit-open body {
    overflow: hidden;
}

@keyframes crFade {
    from { opacity: 0; }
    to { opacity: 1; }
}

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

@media (max-width: 575px) {
    .cr-visit {
        padding: 12px;
    }

    .cr-visit__dialog {
        padding: 40px 22px 26px;
    }

    .cr-visit .cr-visit__title {
        font-size: 26px;
    }
}