/* ============================================================================
   Bhram Realty — Custom styles
   Layered on top of Tailwind (Play CDN) and the design-system config in
   js/tailwind-config.js. Keep only things Tailwind can't express cleanly.
   ============================================================================ */

html {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    scroll-behavior: smooth;
}

body {
    font-family: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
    font-feature-settings: "kern", "liga", "calt", "ss01", "cv11";
    font-weight: 400;
    color: #1b1c1b;
    min-height: 100dvh;
    -webkit-text-size-adjust: 100%;
}

.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
}

/* ----------------------------------------------------------------------------
   Editorial display typography (luxury serif)
   ---------------------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
    font-family: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
    font-feature-settings: "kern", "liga", "dlig", "lnum", "ss01";
    font-weight: 500;
    color: #1b1c1b;
}
h1 { font-weight: 500; letter-spacing: -0.028em; }
h2 { font-weight: 500; letter-spacing: -0.020em; }
h3 { font-weight: 600; letter-spacing: -0.014em; }
h4, h5, h6 { font-weight: 600; letter-spacing: -0.008em; }

p {
    font-feature-settings: "kern", "liga", "ss01";
}

/* Eyebrow / category labels — wide-tracked Manrope */
.eyebrow {
    font-family: 'Manrope', system-ui, sans-serif;
    font-weight: 600;
    font-size: 11.5px;
    line-height: 18px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    font-feature-settings: "kern", "liga";
}

/* The handwritten-feel signature accent (kept Playfair italic) */
.signature-font {
    font-family: 'Playfair Display', 'Cormorant Garamond', Georgia, serif;
    font-style: italic;
    font-weight: 400;
    letter-spacing: 0;
}

/* ----------------------------------------------------------------------------
   Inline link with animated underline (expand-from-left)
   ---------------------------------------------------------------------------- */
.link-underline {
    position: relative;
    display: inline-block;
    transition: color 0.3s ease;
}
.link-underline::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -2px;
    width: 100%;
    height: 1px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.45s cubic-bezier(.2, .7, .2, 1);
}
.link-underline:hover::after {
    transform: scaleX(1);
}

/* ----------------------------------------------------------------------------
   Primary CTA — light sheen sweep on hover
   ---------------------------------------------------------------------------- */
.btn-shine {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}
.btn-shine::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        120deg,
        transparent 30%,
        rgba(255, 255, 255, 0.28) 50%,
        transparent 70%
    );
    transform: translateX(-110%);
    transition: transform 0.75s cubic-bezier(.2, .7, .2, 1);
    z-index: 1;
    pointer-events: none;
}
.btn-shine:hover::before {
    transform: translateX(110%);
}
.btn-shine > * {
    position: relative;
    z-index: 2;
}

/* ----------------------------------------------------------------------------
   Hide scrollbars on horizontally scrolling carousels
   ---------------------------------------------------------------------------- */
.hide-scrollbar::-webkit-scrollbar { display: none; }
.hide-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* ----------------------------------------------------------------------------
   Elevation & card hover
   ---------------------------------------------------------------------------- */
.signature-shadow {
    box-shadow: 0 24px 50px -28px rgba(40, 35, 18, 0.22);
}

.card-hover {
    transition: transform .5s cubic-bezier(.2, .7, .2, 1),
                box-shadow .5s ease;
    position: relative;
}
.card-hover::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    box-shadow: 0 0 0 1px rgba(115, 92, 0, 0);
    transition: box-shadow .45s ease;
    pointer-events: none;
}
.card-hover:hover {
    transform: translateY(-6px);
    box-shadow: 0 40px 70px -32px rgba(40, 35, 18, 0.32);
}
.card-hover:hover::after {
    box-shadow: 0 0 0 1px rgba(115, 92, 0, 0.22);
}

.slide-btn {
    transition: background-color .3s ease, color .3s ease, opacity .3s ease, box-shadow .3s ease;
    box-shadow: 0 14px 30px -14px rgba(40, 35, 18, 0.35);
}

.glass-effect {
    backdrop-filter: blur(12px);
    background: rgba(255, 255, 255, 0.7);
}

/* ============================================================================
   Site Header
   ----------------------------------------------------------------------------
   Two visual states:
     - idle      : translucent cream over the hero
     - is-scrolled : more solid, taller hairline, subtle border + shadow,
                     and the inner bar shrinks slightly to feel "settled"
   ============================================================================ */
header#site-header {
    --header-border: rgba(208, 197, 181, 0.35);
    --header-shadow: 0 0 0 rgba(0, 0, 0, 0);
    background: #ffffff;
    border-bottom: 1px solid var(--header-border);
    box-shadow: var(--header-shadow);
    transition: border-color 0.35s ease, box-shadow 0.35s ease;
}
header#site-header.is-scrolled {
    --header-border: rgba(208, 197, 181, 0.6);
    --header-shadow: 0 18px 38px -28px rgba(40, 35, 18, 0.22);
}

/* Thin gold hairline pinned to the very top of the header */
.site-header__hairline {
    height: 2px;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(216, 166, 44, 0.55) 18%,
        #e9c349 50%,
        rgba(216, 166, 44, 0.55) 82%,
        transparent 100%
    );
}

.site-header__inner {
    height: 76px;
    transition: height 0.35s cubic-bezier(.2, .7, .2, 1);
}
header#site-header.is-scrolled .site-header__inner { height: 64px; }
@media (max-width: 767px) {
    .site-header__inner { height: 64px; }
    header#site-header.is-scrolled .site-header__inner { height: 56px; }
}

/* ---- Brand: single full lockup image (emblem + wordmark + tagline) ----
   The new logo PNG already contains the wordmark and tagline, so we just
   render it as one crisp horizontal image. Sizes are tuned so the lockup
   has comfortable breathing room inside the 76/64px header. */
.brand {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
}
.brand__logo {
    height: 50px;
    width: auto;
    display: block;
    transition: transform 0.35s ease, height 0.35s ease;
}
@media (min-width: 768px) {
    .brand__logo { height: 60px; }
}
header#site-header.is-scrolled .brand__logo { height: 50px; }
@media (max-width: 767px) {
    header#site-header.is-scrolled .brand__logo { height: 42px; }
}
.brand:hover .brand__logo { transform: scale(1.04); }
/* Footer (dark background) — drop a soft gold glow so the lockup lifts. */
.brand--dark .brand__logo {
    height: 72px;
    filter: drop-shadow(0 4px 14px rgba(216, 166, 44, 0.28));
}

/* ---- Desktop nav links ----------------------------------------------- */
.site-nav-link {
    position: relative;
    display: inline-block;
    font-family: 'Manrope', sans-serif;
    font-weight: 500;
    font-size: 12px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: #4d463d;
    padding: 8px 2px;
    transition: color 0.3s ease;
}
.site-nav-link::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    height: 1px;
    width: 100%;
    background: #735c00;
    transform: scaleX(0);
    transform-origin: right center;
    transition: transform 0.45s cubic-bezier(.6, .04, .2, 1);
}
.site-nav-link:hover { color: #1b1c1b; }
.site-nav-link:hover::after,
.site-nav-link:focus-visible::after {
    transform: scaleX(1);
    transform-origin: left center;
}
.site-nav-link.is-active { color: #735c00; }
.site-nav-link.is-active::after {
    transform: scaleX(1);
    transform-origin: left center;
}

/* ---- Circular icon button (search, close) ---------------------------- */
.header-icon-btn {
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #4d463d;
    border-radius: 9999px;
    transition: background-color 0.3s ease, color 0.3s ease, transform 0.15s ease;
}
.header-icon-btn:hover {
    background: rgba(115, 92, 0, 0.10);
    color: #735c00;
}
.header-icon-btn:active { transform: scale(0.94); }

/* ---- Inline "Inquire" CTA pill (desktop) ----------------------------- */
.header-cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 18px;
    background: #1b1c1b;
    color: #fff;
    border-radius: 9999px;
    font-family: 'Manrope', sans-serif;
    font-weight: 500;
    font-size: 11.5px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    transition: background-color 0.35s ease, transform 0.2s ease;
}
.header-cta:hover { background: #735c00; }
.header-cta:active { transform: scale(0.97); }
.header-cta .material-symbols-outlined {
    font-size: 18px;
    transition: transform 0.3s ease;
}
.header-cta:hover .material-symbols-outlined { transform: translateX(3px); }

/* ============================================================================
   Mobile drawer — editorial serif menu items
   ============================================================================ */
.drawer-link {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 13px 22px;
    color: #1b1c1b;
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-weight: 500;
    font-size: 20px;
    line-height: 1.15;
    letter-spacing: -0.01em;
    border-bottom: 1px solid rgba(208, 197, 181, 0.35);
    transition: color 0.25s ease,
                background-color 0.25s ease,
                padding-left 0.25s ease;
}
.drawer-link__num {
    font-family: 'Manrope', sans-serif;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.2em;
    color: #735c00;
    width: 20px;
    flex-shrink: 0;
}
.drawer-link__label { flex: 1; min-width: 0; }
.drawer-link__chev {
    font-size: 16px;
    color: #b2b3ae;
    flex-shrink: 0;
    transition: transform 0.25s ease, color 0.25s ease;
}
.drawer-link:hover,
.drawer-link:active {
    background: rgba(115, 92, 0, 0.04);
    color: #735c00;
    padding-left: 26px;
}
.drawer-link:hover .drawer-link__chev,
.drawer-link:active .drawer-link__chev {
    transform: translateX(4px);
    color: #735c00;
}

.drawer-contact {
    display: flex;
    align-items: center;
    gap: 12px;
    color: #5f5e5a;
    font-family: 'Manrope', sans-serif;
    font-size: 13px;
    transition: color 0.25s ease;
}
.drawer-contact .material-symbols-outlined {
    font-size: 18px;
    color: #735c00;
}
.drawer-contact:hover { color: #1b1c1b; }
.drawer-contact svg { width: 17px; height: 17px; fill: #735c00; flex: none; }

/* ---- Social icons (light contexts: contact + light footers) ---------- */
.social-icon {
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    border: 1px solid rgba(115, 92, 0, 0.28);
    color: #735c00;
    background: rgba(216, 166, 44, 0.06);
    transition: background-color 0.3s ease, color 0.3s ease,
                border-color 0.3s ease, transform 0.3s ease;
}
.social-icon:hover {
    background: #735c00;
    color: #fff;
    border-color: #735c00;
    transform: translateY(-2px);
}
.social-icon svg { width: 18px; height: 18px; fill: currentColor; }

/* ============================================================================
   Featured Estates — mobile pagination dots
   ============================================================================ */
.featured-dot {
    width: 6px;
    height: 6px;
    border-radius: 9999px;
    background: rgba(115, 92, 0, 0.25);
    border: 0;
    padding: 0;
    cursor: pointer;
    transition: width 0.3s ease, background-color 0.3s ease;
}
.featured-dot.is-active {
    width: 22px;
    background: #735c00;
}

/* ============================================================================
   Portfolio page — filter chips, dropdowns, project cards, dark footer
   ============================================================================ */

/* ---- Category chips ---- */
.filter-chip {
    flex-shrink: 0;
    padding: 9px 18px;
    border-radius: 9999px;
    background: transparent;
    border: 1px solid #d0c5b5;
    color: #4d463d;
    font-family: 'Manrope', sans-serif;
    font-size: 11.5px;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}
.filter-chip:hover {
    border-color: #735c00;
    color: #735c00;
}
.filter-chip.is-active {
    background: #1b1c1b;
    color: #fff;
    border-color: #1b1c1b;
}

/* ---- Filter dropdowns (custom-styled native selects) ---- */
.filter-select {
    padding: 9px 36px 9px 16px;
    border: 1px solid #d0c5b5;
    border-radius: 9999px;
    background-color: transparent;
    color: #4d463d;
    font-family: 'Manrope', sans-serif;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.04em;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path fill='%234d463d' d='M0 0l5 6 5-6z'/></svg>");
    background-repeat: no-repeat;
    background-position: right 14px center;
    transition: border-color 0.3s ease, color 0.3s ease;
    min-width: 0;
}
.filter-select:hover,
.filter-select:focus-visible {
    border-color: #735c00;
    color: #735c00;
    outline: none;
}

/* ---- Sticky filter bar wrapper ---- */
.filter-bar {
    background: rgba(250, 249, 246, 0.92);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(208, 197, 181, 0.55);
}

/* ---- Project card ----
   The portfolio cards now use the same Tailwind utility markup as the homepage
   "Featured Estates" cards (see js/portfolio-data.js), so the two pages share an
   identical card design. These rules only provide the filter show/hide hook used
   by js/portfolio.js. The legacy .project-card__* rules below are unused. */
.project-card.is-hidden { display: none !important; }

.project-card__media {
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
}
.project-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.7s cubic-bezier(.2, .7, .2, 1);
}
.project-card:hover .project-card__media img { transform: scale(1.06); }

.project-card__tag {
    position: absolute;
    top: 16px;
    left: 16px;
    padding: 7px 18px;
    border-radius: 9999px;
    background: #d8a62c;
    color: #1b1c1b;
    font-family: 'Manrope', sans-serif;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    box-shadow: 0 6px 16px -8px rgba(40, 35, 18, 0.35);
}

.project-card__body {
    padding: 22px 22px 22px;
    display: flex;
    flex-direction: column;
    flex: 1;
}
@media (min-width: 768px) {
    .project-card__body { padding: 26px 26px 24px; }
}

.project-card__loc {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #5f5e5a;
    font-family: 'Manrope', sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    margin-bottom: 12px;
}
.project-card__loc .material-symbols-outlined {
    font-size: 16px;
    color: #735c00;
}

.project-card__title {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 28px;
    font-weight: 600;
    color: #1b1c1b;
    line-height: 1.12;
    margin-bottom: 20px;
    letter-spacing: -0.014em;
}
@media (min-width: 768px) {
    .project-card__title { font-size: 32px; }
}

/* Price + spec on one row */
.project-card__row {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 22px;
}

.project-card__price-wrap {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.project-card__from {
    font-family: 'Manrope', sans-serif;
    font-size: 13px;
    font-weight: 400;
    color: #5f5e5a;
    letter-spacing: 0;
    text-transform: none;
}

.project-card__price {
    font-family: 'Manrope', system-ui, sans-serif;
    font-size: 23px;
    font-weight: 700;
    color: #735c00;
    line-height: 1;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums lining-nums;
    font-feature-settings: "tnum" 1, "lnum" 1;
}
@media (min-width: 768px) {
    .project-card__price { font-size: 25px; }
}

/* ============================================================================
   Price typography — shared across cards and the project detail page.
   Use .price on the container and the priceHTML() helper (in the page JS)
   to wrap the currency symbol and unit so "₹ 85 L" reads cleanly with
   tabular figures and a tastefully sized symbol.
   ============================================================================ */
.price {
    font-family: 'Manrope', system-ui, sans-serif;
    font-weight: 700;
    font-variant-numeric: tabular-nums lining-nums;
    font-feature-settings: "tnum" 1, "lnum" 1;
    letter-spacing: -0.02em;
    line-height: 1;
    color: #735c00;
    white-space: nowrap;
}
.price__cur {
    font-weight: 500;
    font-size: 0.62em;
    margin-right: 0.16em;
    opacity: 0.75;
    vertical-align: 0.08em;
}
.price__unit {
    font-weight: 600;
    font-size: 0.58em;
    letter-spacing: 0.09em;
    margin-left: 0.22em;
    text-transform: uppercase;
    opacity: 0.9;
}
.price__from {
    font-family: 'Manrope', system-ui, sans-serif;
    font-weight: 600;
    font-size: 0.55em;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #5f5e5a;
    margin-right: 0.5em;
    vertical-align: 0.12em;
}
.price--muted {
    color: #5f5e5a;
    font-weight: 500;
    letter-spacing: 0;
}

.project-card__spec {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #4d463d;
    font-family: 'Manrope', sans-serif;
    font-size: 12.5px;
    font-weight: 500;
    line-height: 1;
    text-align: right;
}
.project-card__spec .material-symbols-outlined {
    font-size: 18px;
    color: #4d463d;
}

.project-card__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: auto;
    padding: 14px 22px;
    width: 100%;
    background: #fff;
    color: #735c00;
    border: 1px solid rgba(115, 92, 0, 0.35);
    border-radius: 9999px;
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    transition: background-color 0.3s ease,
                color 0.3s ease,
                border-color 0.3s ease,
                transform 0.15s ease;
}
.project-card__btn:hover {
    background: #735c00;
    color: #fff;
    border-color: #735c00;
}
.project-card__btn:active { transform: scale(0.98); }

/* ============================================================================
   Dark footer (used on Portfolio page)
   ============================================================================ */
.site-footer-dark {
    background: #1b1c1b;
    color: #fff;
    padding: 64px 0 28px;
}
.site-footer-dark h1,
.site-footer-dark h2,
.site-footer-dark h3,
.site-footer-dark h4 { color: #fff; }

.site-footer-dark__h {
    font-family: 'Manrope', sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.92);
    margin-bottom: 20px;
}

.site-footer-dark__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.site-footer-dark__list a {
    color: rgba(255, 255, 255, 0.65);
    font-family: 'Manrope', sans-serif;
    font-size: 13px;
    transition: color 0.25s ease, transform 0.25s ease;
    display: inline-block;
}
.site-footer-dark__list a:hover {
    color: #d8a62c;
    transform: translateX(2px);
}

.site-footer-dark__bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.10);
    margin-top: 56px;
    padding-top: 26px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: center;
    justify-content: space-between;
}
@media (min-width: 768px) {
    .site-footer-dark__bottom { flex-direction: row; }
}

.site-footer-dark__copy {
    color: rgba(255, 255, 255, 0.55);
    font-family: 'Manrope', sans-serif;
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: 0.22em;
    text-transform: uppercase;
}

.site-footer-dark__icon {
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.7);
    border-radius: 9999px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}
.site-footer-dark__icon:hover {
    background: rgba(216, 166, 44, 0.15);
    color: #d8a62c;
    border-color: rgba(216, 166, 44, 0.4);
}
.site-footer-dark__icon svg { width: 17px; height: 17px; fill: currentColor; }

/* ---- Newsletter signup ---- */
.newsletter-form {
    display: flex;
    align-items: center;
    gap: 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.25);
    padding-bottom: 6px;
    transition: border-color 0.3s ease;
}
.newsletter-form:focus-within { border-color: #d8a62c; }

.newsletter-input {
    flex: 1;
    min-width: 0;
    background: transparent;
    border: 0;
    color: #fff;
    font-family: 'Manrope', sans-serif;
    font-size: 14px;
    padding: 8px 0;
    outline: none;
}
.newsletter-input::placeholder { color: rgba(255, 255, 255, 0.40); }

.newsletter-btn {
    background: transparent;
    border: 0;
    color: rgba(255, 255, 255, 0.7);
    cursor: pointer;
    padding: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: color 0.3s ease, transform 0.3s ease;
}
.newsletter-btn:hover {
    color: #d8a62c;
    transform: translateX(2px);
}

/* ----------------------------------------------------------------------------
   Hero headline + CTA staged entrance
   ---------------------------------------------------------------------------- */
@keyframes fadeUp {
    from { opacity: 0; transform: translateY(30px); }
    to   { opacity: 1; transform: translateY(0); }
}
.animate-fade-up {
    animation: fadeUp 0.9s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.delay-100 { animation-delay: 0.12s; }
.delay-200 { animation-delay: 0.24s; }
.delay-300 { animation-delay: 0.36s; }

/* Slow background drift on the hero — gives the photograph a sense of life
   without distracting from the content. */
@keyframes kenBurns {
    from { transform: scale(1)    translate3d(0, 0, 0); }
    to   { transform: scale(1.08) translate3d(0, -1.5%, 0); }
}
.animate-ken-burns {
    animation: kenBurns 22s ease-out forwards;
    will-change: transform;
}

/* ----------------------------------------------------------------------------
   Floating concierge CTAs — gentle vertical drift
   ---------------------------------------------------------------------------- */
@keyframes gentleFloat {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-6px); }
}
.float-cta {
    animation: gentleFloat 4.5s ease-in-out infinite;
}

/* ----------------------------------------------------------------------------
   Scroll-triggered reveals. Add `data-reveal` to any element; pair with
   optional `data-reveal-delay` (100–500 ms) and `data-reveal-direction`.
   ---------------------------------------------------------------------------- */
[data-reveal] {
    opacity: 0;
    transform: translateY(28px);
    transition:
        opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1),
        transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: opacity, transform;
}
[data-reveal][data-reveal-direction="left"]  { transform: translateX(-32px); }
[data-reveal][data-reveal-direction="right"] { transform: translateX(32px); }
[data-reveal][data-reveal-direction="none"]  { transform: none; }
[data-reveal].is-visible {
    opacity: 1;
    transform: none;
}
[data-reveal-delay="100"] { transition-delay: 0.10s; }
[data-reveal-delay="200"] { transition-delay: 0.20s; }
[data-reveal-delay="300"] { transition-delay: 0.30s; }
[data-reveal-delay="400"] { transition-delay: 0.40s; }
[data-reveal-delay="500"] { transition-delay: 0.50s; }

/* ----------------------------------------------------------------------------
   Image reveal — slight zoom + fade as it enters view
   ---------------------------------------------------------------------------- */
[data-img-reveal] {
    opacity: 0;
    transform: scale(1.04);
    transition: opacity 1.1s cubic-bezier(.2, .7, .2, 1),
                transform 1.4s cubic-bezier(.2, .7, .2, 1);
    will-change: opacity, transform;
}
[data-img-reveal].is-visible {
    opacity: 1;
    transform: scale(1);
}

/* ----------------------------------------------------------------------------
   Stat count-up — keep number element stable as digits change
   ---------------------------------------------------------------------------- */
[data-count] {
    font-variant-numeric: tabular-nums;
}

/* ----------------------------------------------------------------------------
   Partner marquee — auto-scrolling developer/client logos
   ---------------------------------------------------------------------------- */
.partner-strip {
    background: transparent;
}
.partner-track {
    width: max-content;
    gap: 56px;
    animation: partnerScroll 22s linear infinite;
    will-change: transform;
}
@media (min-width: 768px) {
    .partner-track { gap: 88px; animation-duration: 26s; }
}
.partner-strip:hover .partner-track {
    animation-play-state: paused;
}
.partner-logo {
    height: 62px;
    width: auto;
    flex: none;
    opacity: 0.92;
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.05));
    transition: opacity 0.25s ease, transform 0.25s ease;
    user-select: none;
    -webkit-user-drag: none;
    pointer-events: auto;
}
.partner-logo:hover {
    opacity: 1;
    transform: translateY(-2px);
}
@media (min-width: 768px) {
    .partner-logo { height: 88px; }
}
@keyframes partnerScroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}
.partner-fade {
    position: absolute;
    top: 0; bottom: 0;
    width: 56px;
    pointer-events: none;
    z-index: 2;
}
.partner-fade-left  { left: 0;  background: linear-gradient(to right, #faf9f6 0%, rgba(250, 249, 246, 0) 100%); }
.partner-fade-right { right: 0; background: linear-gradient(to left,  #faf9f6 0%, rgba(250, 249, 246, 0) 100%); }
@media (min-width: 768px) {
    .partner-fade { width: 96px; }
}

/* ----------------------------------------------------------------------------
   Reduced-motion preferences — disable all decorative motion
   ---------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .animate-fade-up,
    .animate-bounce,
    .animate-ken-burns,
    .float-cta,
    .partner-track { animation: none !important; }
    [data-reveal],
    [data-img-reveal] {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
    .btn-shine::before { display: none; }
    .link-underline::after { transition: none; }
}

/* ----------------------------------------------------------------------------
   Media lightbox — opens YouTube/Vimeo videos and gallery photos in an overlay
   ---------------------------------------------------------------------------- */
.media-lightbox {
    position: fixed; inset: 0; z-index: 200;
    background: rgba(0, 0, 0, 0.86); backdrop-filter: blur(6px);
    display: none; align-items: center; justify-content: center;
    padding: clamp(16px, 4vw, 56px);
    opacity: 0; transition: opacity .25s ease;
}
.media-lightbox.is-open { display: flex; opacity: 1; }
.media-lightbox-close {
    position: absolute; top: 18px; right: 18px;
    width: 44px; height: 44px; border-radius: 50%; border: 0;
    background: rgba(255, 255, 255, 0.12); color: #fff; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    transition: background .15s ease;
}
.media-lightbox-close:hover { background: rgba(255, 255, 255, 0.22); }
.media-lightbox-close .material-symbols-outlined { font-size: 24px; }
.media-lightbox-inner {
    width: 100%; max-width: 1100px;
    max-height: 86vh; display: flex; align-items: center; justify-content: center;
}
.media-lightbox-inner img {
    max-width: 100%; max-height: 86vh; object-fit: contain;
    border-radius: 10px; box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.6);
}
.media-lightbox-frame {
    width: 100%; aspect-ratio: 16 / 9; max-height: 86vh;
    background: #000; border-radius: 10px; overflow: hidden;
    box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.6);
}
.media-lightbox-frame iframe { width: 100%; height: 100%; border: 0; display: block; }