/*
Theme Name: code-raunartisan
Template: bricks
*/

/*
 * style.css — STATIC DESIGN, loaded EVERYWHERE (live front-end + Bricks editor).
 * Keep only design that should be visible while building: theme tokens, fonts,
 * typography, base layout, scrollbar.
 *
 * All animation-related CSS (initial hidden/dimmed states + motion effects) lives
 * in animations.css, which is loaded FRONT-END ONLY (see functions.php) so the
 * editor isn't full of invisible elements. See Instructions.md → "animations.css".
 */

/* ─── Typography ─────────────────────────────────────────────────────────── */

.guide-text-purple {
    color: #bfacfb;
}

.guide-text-white {
    color: #ffffff;
}

.highlighted {
    font-family: 'Playfair Display', serif;
    font-style: italic;
    font-size: 48px;
}

.recoleta {
    font-family: 'recoleta';
    font-style: italic;
    font-weight: 400;
}

.recoleta-l {
    font-family: 'recoleta';
    font-weight: 200;
}

@media (max-width: 1366px) {
    .highlighted {
        font-size: 48px;
    }
}

@media (max-width: 1024px) {
    .highlighted {
        font-size: 48px;
    }
}

@media (max-width: 767px) {
    .highlighted {
        font-size: 8.4vw;
    }
    .project-desc,
    .project-title {
        font-size: 12px !important;
    }
    .project-image-container {
        aspect-ratio: 1 / 1;
    }
}

/* ─── Custom scrollbar (clean / minimal) ─────────────────────────────────── */

/* Reserve the scrollbar gutter at all times so the page doesn't shift horizontally
   when scroll unlocks after the hero entrance and the thumb reappears. During the
   lock (Lenis sets overflow:hidden) the gutter stays reserved but no thumb shows;
   the thumb only appears once scrolling is re-enabled. */
html {
    scrollbar-gutter: stable;
}

/* WebKit — Chrome, Edge, Safari */
::-webkit-scrollbar {
    width: 12px;
    height: 12px;              /* horizontal scrollbars too */
}
::-webkit-scrollbar-track {
    background: #1a1a1a;       /* white track */
}
::-webkit-scrollbar-thumb {
    background: #000000;       /* light-grey bar */
    border-radius: 999px;      /* fully rounded thumb */
}
::-webkit-scrollbar-thumb:hover {
    background: #e6e6e6;       /* subtle darken on hover for discoverability */
}

/* Firefox (no thumb border-radius support; uses thin track) */
html {
    scrollbar-width: thin;
    scrollbar-color: #000000 #1a1a1a;   /* thumb, track */
}

/* ─── .icon-box-big vignette overlay ─────────────────────────────────────── */

/* Required so the absolutely-positioned ::before (inset:0) anchors to the box itself
   rather than some other positioned ancestor. */
.icon-box-big {
    position: relative;
}

.icon-box-big::before {
    content: "";
    position: absolute;
    /* top is pushed up above the card so the white top glow band lands in the area the
       container clips (overflow:hidden) — hides the top-edge artifact. left/right/bottom = 0.
       -20px ≥ the 16px blur, so the top glow fully fades before the visible top edge. */
    inset: -20px 2px 2px 2px;
    pointer-events: none;
    filter: blur(2px);
    border-radius: 4px;

    /* Inset shadow */
    box-shadow: inset 0 0 14px rgba(255, 255, 255, 1);

    /* Blend mode */
    mix-blend-mode: overlay;
    z-index: 10;
}

.icon-box-big::after {
    content: "";
    position: absolute;
    inset: -20px 0 0 0;
    pointer-events: none;
    border-radius: 4px;

    /* Inset shadow */
    box-shadow: inset 0 0 0px 1px rgba(255, 255, 255, 1);

    /* Blend mode */
    mix-blend-mode: overlay;
    z-index: 11;
}

/* ─── Testimonial card glow (static; hover-dim effect lives in animations.css) ─ */

/* Inset white glow on each carousel card — the card's DEFAULT resting look. Kept on
   disk (not in Bricks) so it's in source control and still shows in the Bricks editor.
   The hover behaviour — hovering one card darkens all the OTHERS with a black overlay —
   is a front-end-only motion effect, so it lives in animations.css. Remove the
   box-shadow from this card in Bricks so this stays the single source of truth. */
.testimonial-card {
    box-shadow: inset 0 0 16px rgba(255, 255, 255, 0.1);
}