/* 
 * Advanced Inverse Rounded Corners (Houdini & Masking Logic)
 * ---------------------------------------------------------
 * This utility creates a premium "notched" or "inverse" rounded corner effect 
 * on images with a matching floating caption/badge.
 */

@property --_x {
    syntax: "<length>";
    inherits: true;
    initial-value: 140px;
}

.premium-figure {
    --w: 100%;
    --r: 1.5rem; /* Corner Radius */
    --accent: var(--accent-orange, #f97316);

    display: grid;
    place-items: end end;
    font: bold 18px/1.5 var(--font-heading, sans-serif);
    transition: --_x .5s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    margin: 0;
    border-radius: var(--r);
    overflow: visible;
    background: transparent;
    padding: 0px;
}

.premium-figure.alt {
    place-items: end start;
}

.premium-figure>* {
    grid-area: 1/1;
}

.premium-figure.service-figure {
    --_x: 140px;
}

.premium-figure.service-figure:hover {
    --_x: 0px;
}

/* Directors: Reversed Logic (Close to Open) */
.premium-figure.director-figure {
    --_x: 0px;
    background: transparent;
    padding: 0;
    transition: --_x .5s cubic-bezier(0.4, 0, 0.2, 1);
}

.premium-figure.director-figure:hover {
    --_x: 160px;
    border-radius: var(--r);
}

.premium-figure img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: var(--r);
    --_m: /calc(2*var(--r)) calc(2*var(--r)) radial-gradient(#000 69%, #0000 72%);
    --_g: conic-gradient(from 90deg at calc(100% - var(--r)) calc(100% - var(--r)), #0000 25%, #000 0);
    --_d: (1.8rem + var(--r));
    mask:
        calc(100% - var(--_d) - var(--_x)) 100% var(--_m),
        100% calc(100% - var(--_d)) var(--_m),
        radial-gradient(1.8rem at 100% 100%, #0000 99%, #000 calc(100% + 1px)) calc(-1*var(--r) - var(--_x)) calc(-1*var(--r)),
        var(--_g) calc(-1*var(--_d) - var(--_x)) 0,
        var(--_g) 0 calc(-1*var(--_d));
    mask-repeat: no-repeat;
    transition: mask 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.premium-figure.alt img {
    --_g: conic-gradient(from 180deg at var(--r) calc(100% - var(--r)), #0000 25%, #000 0);
    mask:
        calc(var(--_d) + var(--_x)) 100% var(--_m),
        0% calc(100% - var(--_d)) var(--_m),
        radial-gradient(1.8rem at 0 100%, #0000 99%, #000 calc(100% + 1px)) calc(var(--r) + var(--_x)) calc(-1*var(--r)),
        var(--_g) calc(var(--_d) + var(--_x)) 0,
        var(--_g) 0 calc(-1*var(--_d));
    mask-repeat: no-repeat;
}

.premium-figure figcaption {
    height: 2.8rem;
    width: calc(2.8rem + var(--_x));
    box-sizing: border-box;
    translate: calc(var(--r) - 1.4rem) calc(var(--r) - 1.4rem);
    overflow: hidden;
    background: var(--accent);
    color: #fff;
    border-radius: 2.8rem;
    clip-path: inset(0px round 2.8rem);
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding-left: 0.8rem;
    white-space: nowrap;
    z-index: 5;
    transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.premium-figure figcaption .director-info {
    overflow: hidden;
    transition: opacity 0.3s ease, margin 0.5s ease, width 0.5s ease;
    display: flex;
    flex-direction: column;
    line-height: 1.2;
    text-align: left;
}

.premium-figure.service-figure figcaption .director-info {
    opacity: 1;
    width: auto;
    margin-left: 10px;
}

.premium-figure.director-figure figcaption .director-info {
    opacity: 0;
    width: 0;
    margin-left: 0;
}

.premium-figure figcaption .name {
    font-size: 0.9rem;
    font-weight: 700;
    display: block;
}

.premium-figure figcaption .role {
    font-size: 0.7rem;
    font-weight: 400;
    opacity: 0.8;
    display: block;
}

/* Interactive States */
.premium-figure.service-figure:hover figcaption {
    width: 2.8rem;
    justify-content: center;
    padding-left: 0;
}

.premium-figure.service-figure:hover figcaption .director-info {
    opacity: 0;
    width: 0;
    margin-left: 0;
}

.premium-figure.director-figure:hover figcaption {
    width: calc(2.8rem + var(--_x));
    justify-content: flex-start;
    padding-left: 0.8rem;
}

.premium-figure.director-figure:hover figcaption .director-info {
    opacity: 1;
    width: auto;
    margin-left: 10px;
}

/* Alternate Side Logic */
.premium-figure.alt figcaption {
    translate: calc(1.4rem - var(--r)) calc(var(--r) - 1.4rem);
    flex-direction: row-reverse;
    justify-content: flex-start;
    padding-right: 0.8rem;
    padding-left: 0;
}

.premium-figure.alt figcaption .director-info {
    margin-right: 10px;
    margin-left: 0;
    text-align: right;
}

.premium-figure.alt.service-figure:hover figcaption {
    width: 2.8rem;
    justify-content: center;
    padding-right: 0;
}

.premium-figure.alt.service-figure:hover figcaption .director-info {
    margin-right: 0;
    opacity: 0;
    width: 0;
}

.premium-figure.alt.director-figure:hover figcaption {
    width: calc(2.8rem + var(--_x));
    justify-content: flex-start;
    padding-right: 0.8rem;
}

.premium-figure.alt.director-figure:hover figcaption .director-info {
    opacity: 1;
    width: auto;
    margin-right: 10px;
}

.premium-figure.alt.director-figure figcaption .director-info {
    opacity: 0;
    width: 0;
    margin-right: 0;
}