:root {
  --clr-bg: #121010;
  --clr-primary: #f5f5f5;
  --clr-secondary: #ffffff;
}

.sr_only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.testimonials{
    --_trans-speed: 300ms;
    --_avatar-size: 4rem;
    --_quote-bg-clr: var(--clr-secondary);
    --_quote-padding: 1rem;
    --_quote-pointer-offset: 1rem;
    --_quote-offset: 1rem; /* this is to allow for the bottom arrow indicator*/
    --_quotemarks-size: 60px;
    --_quotemarks-offset-x: -1rem;
    --_quotemarks-offset-y: -2rem;
    --_clip-text: polygon(0 0, 0 0, 0 100%);
    --_clip-text-width: 80px;
    --_dots-size: 1.5rem;
    --_dots-bg-clr: var(--clr-secondary);
    --_dots-inset: 100%;
    --_dots-border-clr: var(--clr-secondary);

    width: min(calc(100% - 2rem), 600px);
    margin-inline: auto;
    background-color: rgba(0 0 0 / .5);
    border: 1px solid var(--clr-secondary);
    padding: 3rem;
    background-color: black;
}
@media (min-width:600px) {
    .testimonials {
        --_quotemarks-offset-x: -1rem;
        --_quotemarks-offset-y: -1rem;
        --_quotemarks-size: 80px;
      --_quote-padding: 1rem 1.5rem 3rem 3rem ;
        --_box-clip-start-x: 100px;
        --_clip-text: polygon(0 0, 70% 0, 0 100%);
        margin-bottom: 65px;
    }
}
@media screen and (max-width: 600px) {
    .testimonials_quotes blockquote::before{
        content: '';
        position: absolute;
        top: 0px;
        left: -15px;
        z-index: 2;
        width: 40px;
    }
}


.testimonials_quotes{
    --_box-clip: polygon(var(--_box-clip-start-x) 0,
        100%  0,
        100% calc(100% - var(--_quote-offset)),
        calc(100% - var(--_quote-pointer-offset)) calc(100% - var(--_quote-offset)),
        calc(100% - (var(--_quote-pointer-offset) + 1rem)) 100%,
        calc(100% - (var(--_quote-pointer-offset) + 2rem)) calc(100% - var(--_quote-offset)),
        0 calc(100% - var(--_quote-offset))
    );
    display: grid;
    place-content: center;
    grid-template-areas: 'stack';
    width: 100%;
    transition: width var(--_trans-speed) ease-in-out;
}

.testimonials_quotes > article {
    grid-area: stack;
    transition: all 300ms;
    margin-block-end: 1rem;
}
.testimonials_quotes .clip {
    height: 100%;
    width: var(--_clip-text-width);
    shape-outside: var(--_clip-text);
    float: left;
    display: block;
}
.testimonials_quotes blockquote{
    margin-bottom: 1rem;
    text-align: right;
    transition: scale var(--_trans-speed) ease-in-out;
    scale: var(--_scale, 0);
    display: flex;
}

/* quote mark*/
.testimonials_quotes blockquote::before{
    content: '';
    position: absolute;
    top: 5px;
    left: 5px;
    z-index: 2;
    width: var(--_quotemarks-size);
    height: var(--_quotemarks-size);
    transition: translate, opacity, top;
    transition-timing-function: ease-in-out;
    transition-rudarion: var(--_trans-speed);
    transition-delay: var(--_trans-delay-quotes, 0ms);
    opacity: var(--_opacity,0);
    scale: var(--_scale,0);
    background-image: url('data:image/svg+xml,<svg fill="white" viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"><title>quote</title><path d="M9.563 8.469l-0.813-1.25c-5.625 3.781-8.75 8.375-8.75 12.156 0 3.656 2.688 5.375 4.969 5.375 2.875 0 4.906-2.438 4.906-5 0-2.156-1.375-4-3.219-4.688-0.531-0.188-1.031-0.344-1.031-1.25 0-1.156 0.844-2.875 3.938-5.344zM21.969 8.469l-0.813-1.25c-5.563 3.781-8.75 8.375-8.75 12.156 0 3.656 2.75 5.375 5.031 5.375 2.906 0 4.969-2.438 4.969-5 0-2.156-1.406-4-3.313-4.688-0.531-0.188-1-0.344-1-1.25 0-1.156 0.875-2.875 3.875-5.344z"></path></g></svg>');
  background-repeat: no-repeat;
}


.testimonials_quotes blockquote > p{
    position: relative;
    font-weight: 300;
    font-size: 0.9rem;
    line-height: 1.5;
    padding: var(--_quote-padding);
    isolation: isolate;
    /* background: var(--_quote-bg-clr); */
    background: #c5a20f;
    clip-path: var(--_box-clip);
    text-wrap: balance;
    color: black;
}

.testimonials_quotes .user{
    display: flex;
    align-items: start;
    gap: 1rem;
    justify-content: end;
    text-align: right;
}

.testimonials_quotes .user  *{
  opacity: var(--_opacity,0);
  transition:
    translate var(--_trans-speed) ease-in-out,
    opacity var(--_trans-speed) ease-in-out,
    scale var(--_trans-speed) ease-in-out;;
}

/* user - name */
.testimonials_quotes .user p:first-child{
    font-size: 1.1rem;
    color: var(--clr-primary);
    letter-spacing: 0.2rem;
    text-transform: uppercase;
    translate: var(--_translate, 0 2rem);
    transition-delay: var(--_trans-delay-name,0ms);
}
/* user - role */
.testimonials_quotes .user p:last-child{
    font-weight: 300;
    font-size: .8rem;
    color: var(--clr-secondary);
    translate: var(--_translate, 0 2rem);
    transition-delay: var(--_trans-delay-role, 0ms);
}
/* user - image*/
.testimonials_quotes .user img{
    border-radius: 2px;
    border: 1px solid var(--clr-primary);
    width: var(--_avatar-size, 60px);
    height:var(--_avatar-size, 60px);
    object-fit: cover;
    transition-delay: var(--_trans-delay-img,0ms);
    scale: var(--_scale,0);
}
/* checked all */
input[type=radio]:checked + article{
  --_scale: 1;
  --_translate: 0 0;
  --_opacity: 1;
  --_trans-delay-quotes: 300ms;
  --_trans-delay-name: 300ms;
  --_trans-delay-role: 400ms;
  --_trans-delay-img: 500ms;
}


.testimonial_dots {
    padding: .25rem .5rem;
    border-radius: 3px;
    border: 1px dashed transparent;
    width: fit-content;
    margin-inline: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    transition: border-color 300ms ease-in-out;
}
.testimonial_dots > label {
    border-radius: 1rem;
    border: 1px solid var(--_dots-border-clr);
    position: relative;
    width: var(--_dots-size);
    height: var(--_dots-size);
    aspect-ratio: 1;
    cursor: pointer;
    transition: border-color var(--_trans-speed) ease-in-out, border-color var(--_trans-speed) ease-in-out;
}


.testimonial_dots > label::before{
    content: '';
    position: absolute;
    border-radius: inherit;
    inset: var(--_dots-inset);
    background-color: var(--_dots-bg-clr);
    transition: inset 300ms ease-in-out;
}

.testimonial_dots > label:hover::before,
.testimonials_quotes:has(input#option-1:checked) + .testimonial_dots > label:nth-child(1)::before,
.testimonials_quotes:has(input#option-2:checked) + .testimonial_dots > label:nth-child(2)::before,
.testimonials_quotes:has(input#option-3:checked) + .testimonial_dots > label:nth-child(3)::before,
.testimonials_quotes:has(input#option-4:checked) + .testimonial_dots > label:nth-child(4)::before,
.testimonials_quotes:has(input#option-5:checked) + .testimonial_dots > label:nth-child(5)::before  {
    --_dots-inset: .25rem;
}
/* focus using keyboard adds border */
.testimonials_quotes:has(input:focus-visible) + .testimonial_dots{
    border-color: var(--clr-primary);
}
/*
.quotes:has(input#option-1:focus-visible) + .dots > label:nth-child(1),
.quotes:has(input#option-2:focus-visible) + .dots > label:nth-child(2),
.quotes:has(input#option-3:focus-visible) + .dots > label:nth-child(3){
  --clr-border: var(--clr-primary);
}
*/