/*
Theme Name: Rotoscopia
Theme URI: https://rotoscope.band
Template: twentytwentyfive
Author: Timb Volpert
Author URI: https://timvolpert.com
Description: Custom theme for Rotoscope, the band. Child theme of Twenty Twenty Five
Version: 0.2
Updated: 2025-09-15 15:06:15

*/
:root {
    /* --- Colors --- */
    --purp: #ac4bff;
    --mage: #e103db;
    --teal: #09ffff;
    --yell: #ffe62a;
    --pink: #fc5e9b;
    --orng: #ee5824;
    --dark-purp: #504758;
}

body {
    /* --- background graphic --- */
    background-color: #191919;
    background-size: 100px;
    background-image: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23949494' fill-opacity='0.07' fill-rule='evenodd'%3E%3Cpath d='M0 40L40 0H20L0 20M40 40V20L20 40'/%3E%3C/g%3E%3C/svg%3E");
    
}



.wp-element-caption {
    color: var(--teal);
    text-align: center;
    font-weight: bold;
    font-size: 1.5rem;
    text-transform: uppercase;
    margin: 0;
    margin-bottom: -44px;
    z-index: 1;
    transform: rotate(-9deg);
}

.wp-block-video {
    display: flex;
    flex-direction: column-reverse;
}

figure.wp-block-video video {
    clip-path: polygon(5% 0%, 100% 0%, 95% 100%, 0% 100%);
    clip-path: polygon(5% 25%, 100% 0%, 95% 100%, 0% 100%);
}

/* -------- profiles ------- */

.wp-block-group.bandmate .headshot  {
    position:relative;
    margin: 0;
	cursor: pointer;
  
}

.wp-block-group.bandmate .headshot img {
   aspect-ratio: 3 / 4;
    object-fit: cover;
}

.wp-block-group.bandmate .headshot.real {
    position:absolute;
    top:0;
    z-index:0;
}

.wp-block-group.bandmate .headshot.cartoon {
    position: relative;
    z-index: 1;
    transition: opacity 2s linear;
} 

.wp-block-group.bandmate .headshot.cartoon.clicked {
    opacity: 0;
}

.img-wrap {
    margin: 0 auto!important;
}


@media (max-width:600px) {
    .wp-block-column:has(.headshot) {
        order: -1;
    }
    .img-wrap {
        margin: -0 auto!important;
    }
    .wp-block-columns {
        padding: 1px 0 50px 0;
    }
}

@media (min-width:601px) {
    .wp-block-columns {
        flex-wrap: nowrap !important;
    }
}

h1.band-name {
    text-shadow: 5px -5px 0 var(--teal),  -5px 5px 0 var(--mage), 5px 5px 0 var(--yell);
}

.wp-block-group.has-background {
    clip-path: polygon(0% 0%,100% 2rem,100% calc(100% - 2rem),0% 100%);
}

.wp-block-group.has-background:nth-child(even) {

    clip-path: polygon(0% 2rem,100% 0%,100% 100%,0% calc(100% - 2rem));
}