/*
 * Bhumi Hirapara brand layer.
 * Loaded after the Aurax theme CSS. The theme routes almost every colour through
 * CSS custom properties, so redefining them here rebrands it from the stock
 * lime/purple to the teal-on-navy palette carried over from bhumihirapara.com.
 */

:root {
    --dl-primary-color: #29a587;  /* brand teal */
    --dl-secondary-color: #1e8570; /* deeper teal */
    --dl-bg-dark: #222831;         /* brand navy */
    --dl-bg-grey: #f2f6f5;
    --brand-teal-soft: #3fcba8;
}

/* The stock hero art is a purple photographic backdrop. Sampling it shows the structure is a
   centred radial spotlight — near-black at the edges (rgb 9,9,75) with a bright glow behind the
   subject (rgb 90,84,230) — not a vertical ramp. This reproduces that value structure in the
   brand teal, which keeps the header, hero copy and the giant name on a dark ground while
   lighting the portrait from behind. */
.personal-portfolio-hero {
    background-color: #0b201c;
    background-image:
        radial-gradient(ellipse 46% 78% at 50% 54%, #34b998 0%, #218a72 32%, rgba(11, 32, 28, 0) 74%),
        radial-gradient(ellipse 90% 60% at 50% 118%, rgba(41, 165, 135, 0.3) 0%, rgba(11, 32, 28, 0) 70%);
}

/* The portrait sits in front of the oversized name, exactly as the theme intends.
   The name and the supporting copy stay behind it. */
.personal-portfolio-hero .hero-men {
    z-index: 3;
}

.personal-portfolio-hero .hero-men img {
    filter: drop-shadow(0 30px 60px rgba(0, 0, 0, 0.45));
}

/* Raise the supporting copy above the portrait without touching the theme's
   absolute positioning — it sits at the edges, clear of her. */
.personal-portfolio-hero .hero-intro,
.personal-portfolio-hero .hero-desc,
.personal-portfolio-hero .hero-social {
    z-index: 4;
}

/* Contact form status message */
#form-messages.alert {
    margin-top: 16px;
    padding: 0;
    border: 0;
    background: none;
    font-size: 15px;
}

#form-messages.alert.success {
    color: var(--dl-primary-color);
}

#form-messages.alert.error {
    color: #e0523f;
}

/* The site logo is a wide wordmark rather than the theme's small square mark. */
.site-logo img,
.offcanvas-logo img {
    max-height: 30px;
    width: auto;
}

/* The theme sizes the giant hero name at 250px on wide screens. "Bhumi Hirapara" is longer
   than the placeholder it was designed for, so this scales fluidly on the same proportion
   (250px at ~1920px wide, line-height 0.72 of the font size). The glyph width of this name
   works out at roughly 4.14x the font size, which is what sets the caps below so the second
   line never overflows. Font, weight and the 2px translucent outline are the theme's own. */
.personal-portfolio-hero .hero-title span {
    font-size: clamp(52px, 13vw, 250px);
    line-height: 0.72em;
}

.personal-portfolio-hero .hero-content {
    padding-top: 150px;
}

/* Keep the supporting copy clear of the wider name. Desktop only — below 1200px the theme
   repositions this copy itself, and under 768px it hides it entirely. */
@media only screen and (min-width: 1200px) {
    .hero-intro {
        top: 14%;
        max-width: 30%;
    }

    .personal-portfolio-hero .hero-desc {
        top: 12%;
    }
}

/* On phones the theme drops to a stacked layout with a shorter hero. 21.5vw keeps the long
   second line inside the viewport where the theme's flat 105px would overflow it. */
@media (max-width: 767px) {
    .personal-portfolio-hero .hero-title span {
        font-size: clamp(48px, 21.5vw, 175px);
        line-height: 0.76em;
    }

    .personal-portfolio-hero .hero-content {
        padding-top: 0;
    }
}
/* ---------- Tool capsules ---------- */
/* The icons carry their real brand colours (see img/tech/*.svg), so they are
   left alone here. Brands whose mark is pure black are stored white instead,
   because every surface these sit on is dark. */
.capsule-list .capsule-item img {
    opacity: 1;
}

/* Brands whose mark is pure black (Next.js, Payload) are stored in their true
   colour so they read correctly on the light "Built with" strips. Inside the
   capsules - which are near-black spheres - they would disappear, so those
   specific marks are inverted there and only there. */
.capsule-list .capsule-item[data-dark-mark] img {
    filter: invert(1);
}

/* ---------- Image hover ---------- */
/* Replaces the WebGL distortion effect, which cost 601KB of three.js for a
   hover flourish. A transform and brightness shift reads nearly as well and
   runs on the compositor, so it costs no main-thread time. */
.portfolio-thumb,
.blog-card-media,
.case-gallery-item {
    overflow: hidden;
}

.portfolio-thumb img {
    transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1), filter 0.5s ease;
    will-change: transform;
}

.portfolio-thumb:hover img {
    transform: scale(1.04);
    filter: brightness(1.06);
}

/* ---------- Layout stability ---------- */
/* Cumulative Layout Shift was 0.227. Reserving the aspect ratio for images
   that carry width/height means the space is held before the file arrives,
   so surrounding content never jumps. */
.case-gallery-item img,
.blog-card-media img,
.post-cover {
    aspect-ratio: 1600 / 1200;
    object-fit: cover;
}

.blog-card-media img,
.post-cover {
    aspect-ratio: 1200 / 630;
}

.portfolio-thumb img {
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

/* ---------- Marquee legibility ---------- */
/* The theme renders this strip as hollow outlined text: color: transparent
   with a 2px stroke. At this size the counters close up and the whole line
   reads as noise. Solid type is legible and still reads as designed - this
   strip states what Bhumi does, so it has to actually be readable. */
.dl-scroller__inner.outline li,
.dl-scroller__inner.outline.dark li {
    -webkit-text-stroke-width: 0;
    -webkit-text-stroke-color: transparent;
    color: var(--dl-bg-dark);
    letter-spacing: -0.01em;
}

/* On dark sections the same strip flips to white. */
.bg-dark .dl-scroller__inner.outline li,
.bg-dark .dl-scroller__inner.outline.dark li,
.dl-scroller__inner.outline.white li {
    color: var(--dl-white-color);
}

/* ---------- Tool capsules without physics ---------- */
/* The theme absolutely positions every capsule at 0,0 and relies on Matter.js
   to place them. Physics is desktop-only (see Layout.astro), so below that
   breakpoint they would all stack in one corner. This lays them out as an
   ordinary centred row instead. */
@media (max-width: 991px), (hover: none) {
    .capsule-wrapper {
        margin-top: 0;
    }

    .capsule-list {
        position: static;
        height: auto;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        gap: 14px;
        padding: 30px 0;
        pointer-events: auto;
    }

    .capsule-list > * {
        position: static;
        margin: 0;
    }

    .capsule-list .capsule-item span {
        transform: none;
        width: 58px;
        height: 58px;
    }

    .capsule-list .capsule-item img {
        width: 28px;
    }
}