/**
 * Liquid Glass — an Apple-style frosted-glass material layered over the
 * template's existing structure, colours and copy. Nothing in this file
 * changes layout, spacing, content order or brand colour: it only restyles
 * the surfaces (backgrounds, borders, shadows, blur) of components that
 * already exist, using the selectors the template itself defines.
 *
 * Loaded after main.css and rtl.css, so equal-specificity rules here win by
 * source order without needing !important. Every colour is derived from the
 * three admin-configured brand variables (--rlz-lime, --rlz-green, --rlz-bg —
 * see app/Support/Theme.php) via color-mix(), so the glass automatically
 * re-tints itself if the client ever changes their palette.
 *
 * On/off and intensity are controlled from Theme Settings → Interface style.
 * The three intensity presets below are just the "balanced" defaults — a
 * non-default choice is applied by App\Support\LiquidGlass::styleTag(),
 * which overrides these same custom properties inline, right after this
 * file loads, so it always wins on source order without needing !important.
 */

:root {
    /* Percentage of white mixed into "transparent" to make the glass fill.
       Theme Settings' intensity control only ever changes this one number. */
    --rlz-glass-opacity: 16%;
    --rlz-glass-opacity-hover: 24%;
    --rlz-glass-blur: 28px;
    --rlz-glass-blur-lg: 36px;
    --rlz-glass-radius: 22px;
    --rlz-glass-radius-lg: 28px;

    --rlz-glass-bg: color-mix(in srgb, white var(--rlz-glass-opacity), transparent);
    --rlz-glass-bg-hover: color-mix(in srgb, white var(--rlz-glass-opacity-hover), transparent);
    --rlz-glass-border: color-mix(in srgb, white 22%, transparent);
    --rlz-glass-border-hover: color-mix(in srgb, white 38%, transparent);
    --rlz-glass-highlight: color-mix(in srgb, white 45%, transparent);

    /* Two-layer shadow: a tight contact shadow plus a large soft one, both
       tinted toward the page background instead of pure black, which is what
       makes a shadow read as "resting on this surface" rather than generic. */
    --rlz-glass-shadow:
        0 1px 1px color-mix(in srgb, var(--rlz-bg, #0d2620) 40%, transparent),
        0 10px 30px -10px color-mix(in srgb, var(--rlz-bg, #0d2620) 70%, transparent),
        0 2px 10px color-mix(in srgb, var(--rlz-bg, #0d2620) 45%, transparent);
    --rlz-glass-shadow-hover:
        0 1px 1px color-mix(in srgb, var(--rlz-bg, #0d2620) 45%, transparent),
        0 22px 46px -12px color-mix(in srgb, var(--rlz-bg, #0d2620) 75%, transparent),
        0 4px 18px color-mix(in srgb, var(--rlz-bg, #0d2620) 50%, transparent);

    --rlz-glass-ease: var(--tft-ease, cubic-bezier(0.22, 1, 0.36, 1));
}


/* Sections the template itself painted white (about, home-2, services). The
   custom properties above are redeclared here so every glass component
   nested inside — cards, buttons, the FAQ — inherits light-appropriate glass
   without a single extra selector, matching the design-system pattern already
   used for RTL: redefine tokens in one place, style everything through them. */
section.bg-white,
.bg-white {
    --rlz-glass-bg: color-mix(in srgb, var(--rlz-green, #094030) 6%, white);
    --rlz-glass-bg-hover: color-mix(in srgb, var(--rlz-green, #094030) 10%, white);
    --rlz-glass-border: color-mix(in srgb, var(--rlz-green, #094030) 14%, transparent);
    --rlz-glass-border-hover: color-mix(in srgb, var(--rlz-green, #094030) 24%, transparent);
    --rlz-glass-highlight: color-mix(in srgb, white 70%, transparent);
    --rlz-glass-shadow:
        0 1px 1px color-mix(in srgb, var(--rlz-green, #094030) 8%, transparent),
        0 10px 30px -12px color-mix(in srgb, var(--rlz-green, #094030) 22%, transparent),
        0 2px 10px color-mix(in srgb, var(--rlz-green, #094030) 10%, transparent);
    --rlz-glass-shadow-hover:
        0 1px 1px color-mix(in srgb, var(--rlz-green, #094030) 10%, transparent),
        0 22px 46px -14px color-mix(in srgb, var(--rlz-green, #094030) 28%, transparent),
        0 4px 18px color-mix(in srgb, var(--rlz-green, #094030) 14%, transparent);
}

/* ---------------------------------------------------------------------
 * The glass material itself, as one reusable rule. A plain class list, not
 * :where() — main.css already gives several of these a solid background at
 * ordinary (0,1,0) specificity (e.g. .tft-stat-card-new's brand-green fill),
 * and a zero-specificity :where() rule loses to that regardless of load
 * order. Matching its specificity and loading after is what lets this win.
 * ------------------------------------------------------------------- */
.tft-bento__item, .tft-stat-card-new, .tft-acc-item, .h3-card,
.faq-panel, .tft-team-card-elite, .blog-card, .tft-card,
.tft-h2-vanguard__frame, .tft-comp-shell,
.rlz-glass-sidebar, .rlz-glass-header, #menu-panel,
.tft-contact-input, .tft-footer-newsletter, .tft-sidebar-search-wrap,
.tft-vanguard-footer,
/* main.css gives these five a background at page-scoped (0,2,0) specificity
   (".tft-page-home-2 .tft-bento__item" and friends) — matching that exact
   compound selector is what lets this rule win instead of losing outright. */
.tft-page-home-2 .tft-bento__item,
.tft-page-home-2 .tft-acc-item,
.tft-page-services .faq-panel,
.tft-page-works .tft-card,
.tft-page-contact .tft-contact-input {
    position: relative;
    background: var(--rlz-glass-bg);
    -webkit-backdrop-filter: saturate(160%) blur(var(--rlz-glass-blur));
    backdrop-filter: saturate(160%) blur(var(--rlz-glass-blur));
    border: 1px solid var(--rlz-glass-border);
    box-shadow: var(--rlz-glass-shadow);
    transition: background-color .5s var(--rlz-glass-ease), border-color .5s var(--rlz-glass-ease), box-shadow .5s var(--rlz-glass-ease);
}

/* A soft highlight along the top edge — the "light catching the rim of the
   glass" cue that reads as depth rather than a flat tinted rectangle. Built as
   a pseudo-element so it needs no markup change and stays correct under RTL
   (inset is a logical property; it does not mirror direction, which is fine —
   a top highlight has no left/right meaning to mirror).
   .tft-stat-card-new and .faq-panel already own their ::before for a bespoke
   lime hover-glow the template shipped; adding a second, competing ::before
   there would either fight it on specificity or silently replace it, so both
   keep their own accent instead of this generic one. */
:where(
    .tft-bento__item, .h3-card,
    .tft-team-card-elite, .blog-card, .tft-card, .tft-comp-shell
)::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(180deg, var(--rlz-glass-highlight), transparent 40%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}

/* ---------------------------------------------------------------------
 * Corner radius. Left off components whose shape is load-bearing to the
 * design (a slider frame that has to match a mask, an accordion row that has
 * to align with its neighbours) and applied to the free-standing cards.
 * ------------------------------------------------------------------- */
.tft-bento__item, .tft-stat-card-new, .h3-card, .faq-panel,
.blog-card, .tft-card, .tft-comp-shell, #menu-panel {
    border-radius: var(--rlz-glass-radius) !important;
}

.tft-h2-vanguard__frame, .rlz-glass-sidebar {
    border-radius: 0; /* these butt against the viewport edge; a glass frame
                          still reads as glass without rounding a corner that
                          nothing will ever reveal. */
}

/* ---------------------------------------------------------------------
 * Fixed chrome — sidebar, mobile header, slide-out menu.
 * ------------------------------------------------------------------- */
.rlz-glass-sidebar,
.rlz-glass-header {
    /* Tailwind's own `.fixed` utility class (from the markup) and this rule
       are the same specificity; without restating `fixed` here, this rule's
       `position: relative` — inherited from the shared base rule above, which
       every glass component needs for its own ::before highlight to anchor
       to — wins on load order and unpins the sidebar/header from the
       viewport entirely. Confirmed live: without this line both scroll away
       with the page instead of staying put. */
    position: fixed;
    /* These sit beside/above the page rather than over it, so blur has
       nothing to blur — the material still needs to read as translucent,
       not as a slightly-transparent version of the original white. */
    background: color-mix(in srgb, white 82%, transparent);
    border-color: color-mix(in srgb, var(--rlz-green, #094030) 10%, transparent);
    box-shadow:
        1px 0 1px color-mix(in srgb, var(--rlz-green, #094030) 6%, transparent),
        10px 0 40px -12px color-mix(in srgb, var(--rlz-green, #094030) 18%, transparent);
}

/* home-2 carries its own "safety" shadow/border-right on the sidebar as
   !important — matched here, at the same specificity home-2 uses, so the
   glass shadow applies there too instead of the two silently fighting. */
.tft-page-home-2 .rlz-glass-sidebar {
    box-shadow:
        1px 0 1px color-mix(in srgb, var(--rlz-green, #094030) 6%, transparent),
        10px 0 40px -12px color-mix(in srgb, var(--rlz-green, #094030) 18%, transparent) !important;
    border-right: 1px solid color-mix(in srgb, var(--rlz-green, #094030) 10%, transparent) !important;
}

.rlz-glass-header {
    box-shadow:
        0 1px 1px color-mix(in srgb, var(--rlz-green, #094030) 6%, transparent),
        0 10px 40px -12px color-mix(in srgb, var(--rlz-green, #094030) 18%, transparent);
}

#menu-panel {
    /* This panel slides fully over the page, so its blur has real content
       underneath to soften — the clearest "liquid glass" moment on the site.
       position MUST stay fixed: the shared base rule earlier in this file sets
       `position: relative` (so its own ::before highlight has something to
       anchor to), and #menu-panel was swept into that same selector list —
       without reasserting fixed here, the slide-out panel renders inline in
       the document instead of pinned over the viewport. */
    position: fixed;
    background: color-mix(in srgb, var(--rlz-green, #094030) 78%, transparent) !important;
    -webkit-backdrop-filter: saturate(180%) blur(var(--rlz-glass-blur-lg));
    backdrop-filter: saturate(180%) blur(var(--rlz-glass-blur-lg));
    border-inline-end-color: color-mix(in srgb, white 12%, transparent);
    border-radius: 0;
}

#menu-panel .js-accordion-toggle {
    border-radius: 14px;
    transition: background-color .35s var(--rlz-glass-ease);
}

#menu-panel .js-accordion-toggle:hover {
    background: color-mix(in srgb, white 6%, transparent);
}

/* ---------------------------------------------------------------------
 * Buttons. Two treatments: the prominent CTAs get a resting brand-colour
 * glow (the brief's "primary buttons should subtly glow"); the small round
 * icon/nav buttons stay quiet until hovered or focused, which is what makes
 * the CTA glow read as intentional rather than every button looking the same.
 * ------------------------------------------------------------------- */
.tft-btn-view, .tft-btn-discover, .tft-btn-submit-contact,
.tft-footer-submit-btn, .filter-tab.active {
    position: relative;
    -webkit-backdrop-filter: blur(var(--rlz-glass-blur));
    backdrop-filter: blur(var(--rlz-glass-blur));
    border: 1px solid color-mix(in srgb, var(--rlz-lime, #d4f54c) 45%, transparent);
    box-shadow:
        0 0 0 1px color-mix(in srgb, var(--rlz-lime, #d4f54c) 12%, transparent) inset,
        0 6px 20px -6px color-mix(in srgb, var(--rlz-lime, #d4f54c) 55%, transparent);
    transition: box-shadow .4s var(--rlz-glass-ease), transform .35s var(--rlz-glass-ease), border-color .4s var(--rlz-glass-ease);
}

.tft-btn-view:hover, .tft-btn-discover:hover, .tft-btn-submit-contact:hover,
.tft-footer-submit-btn:hover, .filter-tab.active:hover {
    box-shadow:
        0 0 0 1px color-mix(in srgb, var(--rlz-lime, #d4f54c) 20%, transparent) inset,
        0 10px 32px -6px color-mix(in srgb, var(--rlz-lime, #d4f54c) 70%, transparent);
    transform: translateY(-2px);
}

/* A few of these CTAs carry their own page-scoped border/shadow in main.css
   at the same (0,2,0) specificity a bare page class + button class produces —
   matched here so the glow wins there too, the same fix pattern used above
   for the bento grid and stat cards. */
.tft-page-contact .tft-btn-submit-contact {
    box-shadow:
        0 0 0 1px color-mix(in srgb, var(--rlz-lime, #d4f54c) 12%, transparent) inset,
        0 6px 20px -6px color-mix(in srgb, var(--rlz-lime, #d4f54c) 55%, transparent);
}

.tft-page-contact .tft-btn-submit-contact:hover {
    box-shadow:
        0 0 0 1px color-mix(in srgb, var(--rlz-lime, #d4f54c) 20%, transparent) inset,
        0 10px 32px -6px color-mix(in srgb, var(--rlz-lime, #d4f54c) 70%, transparent);
}

.tft-page-index .tft-btn-view {
    border-color: color-mix(in srgb, var(--rlz-lime, #d4f54c) 45%, transparent);
}

.tft-page-index .tft-btn-view:hover {
    border-color: color-mix(in srgb, var(--rlz-lime, #d4f54c) 65%, transparent);
}

.tft-nav-btn, .tft-h2-vanguard__nav-btn, .tft-aurora__nav-btn,
#slider-next, #slider-prev, #btn-next, #btn-prev, #aurora-next, #aurora-prev,
.faq-orb, .tft-sidebar-search-btn, .menu-toggle, .filter-tab:not(.active) {
    -webkit-backdrop-filter: blur(var(--rlz-glass-blur));
    backdrop-filter: blur(var(--rlz-glass-blur));
    background: var(--rlz-glass-bg);
    border: 1px solid var(--rlz-glass-border);
    transition: background-color .35s var(--rlz-glass-ease), border-color .35s var(--rlz-glass-ease), box-shadow .35s var(--rlz-glass-ease), transform .3s var(--rlz-glass-ease);
}

.tft-nav-btn:hover, .tft-h2-vanguard__nav-btn:hover, .tft-aurora__nav-btn:hover,
#slider-next:hover, #slider-prev:hover, #btn-next:hover, #btn-prev:hover,
#aurora-next:hover, #aurora-prev:hover, .faq-orb:hover,
.tft-sidebar-search-btn:hover, .filter-tab:not(.active):hover {
    background: var(--rlz-glass-bg-hover);
    border-color: color-mix(in srgb, var(--rlz-lime, #d4f54c) 55%, transparent);
    box-shadow: 0 8px 24px -8px color-mix(in srgb, var(--rlz-lime, #d4f54c) 35%, transparent);
    transform: translateY(-1px);
}

/* Keyboard focus needs to read clearly against a blurred, low-contrast
   background — a default browser outline can vanish against glass. */
.tft-btn-view:focus-visible, .tft-btn-discover:focus-visible,
.tft-btn-submit-contact:focus-visible, .tft-footer-submit-btn:focus-visible,
.tft-nav-btn:focus-visible, .tft-h2-vanguard__nav-btn:focus-visible,
.tft-aurora__nav-btn:focus-visible, .menu-toggle:focus-visible,
.filter-tab:focus-visible, .faq-trigger:focus-visible,
.tft-contact-input:focus-visible {
    outline: 2px solid var(--rlz-lime, #d4f54c);
    outline-offset: 3px;
}

/* ---------------------------------------------------------------------
 * Cards. The glass fill/border/shadow/highlight already came from the
 * :where() blocks above; this adds the per-card hover elevation.
 * ------------------------------------------------------------------- */
.tft-bento__item, .tft-stat-card-new, .tft-acc-item, .h3-card,
.faq-panel, .tft-team-card-elite, .blog-card, .tft-card {
    transition: background-color .5s var(--rlz-glass-ease), border-color .5s var(--rlz-glass-ease),
                box-shadow .5s var(--rlz-glass-ease), transform .5s var(--rlz-glass-ease);
}

.tft-bento__item:hover, .tft-stat-card-new:hover, .h3-card:hover,
.faq-panel:hover, .tft-team-card-elite:hover, .blog-card:hover {
    background: var(--rlz-glass-bg-hover);
    border-color: var(--rlz-glass-border-hover);
    box-shadow: var(--rlz-glass-shadow-hover);
    transform: translateY(-4px);
}

/* The bento grid sits on the dark page background, but every tile in it is
   its own white or brand-tinted card (main.css's own design, not something
   this file introduces) — so unlike the rest of the dark-context default,
   these read as light glass. Restated at the same page-scoped selector
   main.css uses, later in THIS file, so it wins the tie without needing
   extra specificity. */
.tft-page-home-2 .tft-bento__item {
    background: color-mix(in srgb, var(--rlz-green, #094030) 6%, white);
    border-color: color-mix(in srgb, var(--rlz-green, #094030) 14%, transparent);
}

/* The dark and feature tiles are deliberate emphasis — one solid brand-dark,
   one lime-tinted — and diluting either into the generic translucent fill
   would erase exactly the contrast they exist for. They keep their original
   fill exactly and only borrow the glass border, blur and shadow. */
.tft-page-home-2 .tft-bento__item--dark {
    background: var(--tft-h2-dark, var(--rlz-green-s1, #0a3d2e));
    border-color: color-mix(in srgb, white 14%, transparent);
}

.tft-page-home-2 .tft-bento__item--feature {
    background: linear-gradient(135deg, color-mix(in srgb, var(--rlz-lime, #d4f54c) 28%, transparent), color-mix(in srgb, white 92%, transparent) 58%), white;
    border-color: color-mix(in srgb, var(--rlz-lime, #d4f54c) 30%, transparent);
}

/* The stat cards carry a client-requested "deep green" fix in main.css
   (search "TFT-FIX: DARK PREMIUM STAT CARDS") that sets background, border
   and box-shadow with !important — deliberately, this is their real design,
   a dark card standing out against the white section around it, the same
   way the bento tiles above stay solid on purpose. Nothing short of another
   !important reaches it, so this is the one place that tool is warranted.
   Read from --rlz-bg/--rlz-green directly rather than the --rlz-glass-*
   tokens: this section is `.bg-white`, so those resolve to the LIGHT variant
   here, and this card is exactly the element that must not go light. */
.tft-stat-card-new {
    background: color-mix(in srgb, var(--rlz-green-s3, #0c4232) 88%, transparent) !important;
    border: 1px solid color-mix(in srgb, white 8%, transparent) !important;
    box-shadow:
        0 1px 1px color-mix(in srgb, black 20%, transparent),
        0 20px 50px -14px color-mix(in srgb, black 45%, transparent) !important;
}

.tft-stat-card-new:hover {
    border-color: color-mix(in srgb, var(--rlz-lime, #d4f54c) 55%, transparent) !important;
    background: color-mix(in srgb, var(--rlz-green-s5, #0d4d3a) 90%, transparent) !important;
    box-shadow:
        0 1px 1px color-mix(in srgb, black 24%, transparent),
        0 28px 60px -14px color-mix(in srgb, black 50%, transparent) !important;
}

/* The team photo's own glass caption (the template already named this class
   "__glass" — the one place it anticipated this treatment) gets the same
   material so it now matches rather than merely resembling the rest. */
.tft-team-card-elite__glass {
    -webkit-backdrop-filter: saturate(160%) blur(var(--rlz-glass-blur));
    backdrop-filter: saturate(160%) blur(var(--rlz-glass-blur));
    background: color-mix(in srgb, black 35%, transparent);
    border-top: 1px solid var(--rlz-glass-highlight);
}

/* ---------------------------------------------------------------------
 * Forms.
 * ------------------------------------------------------------------- */
.tft-contact-input {
    border-radius: 14px;
    padding-inline: 1rem;
    border-bottom: none !important; /* replaces the template's underline input
                                        with a full glass field, consistent
                                        with the rest of this system. */
}

.tft-contact-input:focus {
    background: var(--rlz-glass-bg-hover);
    border-color: color-mix(in srgb, var(--rlz-lime, #d4f54c) 60%, transparent);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--rlz-lime, #d4f54c) 18%, transparent);
}

.tft-footer-newsletter-input, .tft-sidebar-search-input {
    background: transparent;
    border: 1px solid var(--rlz-glass-border);
    border-radius: 999px;
    transition: border-color .35s var(--rlz-glass-ease), box-shadow .35s var(--rlz-glass-ease);
}

.tft-footer-newsletter-input:focus, .tft-sidebar-search-input:focus {
    outline: none;
    border-color: color-mix(in srgb, var(--rlz-lime, #d4f54c) 55%, transparent);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--rlz-lime, #d4f54c) 16%, transparent);
}

.tft-sidebar-search-wrap {
    border-radius: 999px;
    padding: 2px;
}

/* ---------------------------------------------------------------------
 * Footer — kept lightweight per the brief: a glass top edge and a glass
 * newsletter capsule, not a heavy blurred panel under every column.
 * ------------------------------------------------------------------- */
.tft-vanguard-footer {
    border-top: 1px solid var(--rlz-glass-border);
    background: linear-gradient(180deg, var(--rlz-glass-bg), transparent 30%);
    -webkit-backdrop-filter: none; /* nothing scrolls under the footer; a
                                       backdrop-filter here would cost paint
                                       time for zero visible effect. */
    backdrop-filter: none;
    box-shadow: none;
    border-radius: 0;
}

.tft-footer-newsletter {
    display: flex;
    border-radius: 999px;
    padding: 4px;
}

/* ---------------------------------------------------------------------
 * Motion. Entrance blur layers onto the reveal choreography the site already
 * runs (main.js toggles these exact classes on scroll) — no new JS, no new
 * observer, the glass simply arrives with the reveal that was already there.
 * ------------------------------------------------------------------- */
.blog-card.reveal-up, .faq-panel.reveal-up, .tft-team-card-elite.reveal-up {
    filter: blur(14px);
    transition: opacity 1.2s var(--rlz-glass-ease), transform 1.2s var(--rlz-glass-ease), filter 1.2s var(--rlz-glass-ease);
}

.blog-card.reveal-up.active, .faq-panel.reveal-up.active, .tft-team-card-elite.reveal-up.active {
    filter: blur(0);
}

.tft-page-home-2 .tft-bento__item.tft-reveal,
.tft-page-home-2 .tft-acc-item.tft-reveal {
    filter: blur(14px);
}

.tft-page-home-2 .tft-bento__item.tft-reveal--active,
.tft-page-home-2 .tft-acc-item.tft-reveal--active {
    filter: blur(0);
}

@media (prefers-reduced-motion: reduce) {
    :where(.tft-bento__item, .tft-stat-card-new, .tft-acc-item, .h3-card,
           .faq-panel, .tft-team-card-elite, .blog-card, .tft-card,
           .tft-btn-view, .tft-btn-discover, .tft-btn-submit-contact,
           .tft-footer-submit-btn, .tft-nav-btn, .menu-toggle, .filter-tab) {
        transition-duration: .01ms !important;
        filter: none !important;
        transform: none !important;
    }
}

/* Backdrop-filter support is universal in evergreen browsers, but the one
   browser that still ships without it should get a plain, still-legible
   surface rather than a see-through one with no blur to soften it. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    :where(.tft-bento__item, .tft-stat-card-new, .h3-card, .faq-panel,
           .tft-team-card-elite, .blog-card, .tft-card, #menu-panel,
           .rlz-glass-sidebar, .rlz-glass-header) {
        background: color-mix(in srgb, var(--rlz-bg, #0d2620) 92%, white);
    }
}