@layer reset, base, components, channel-1, channel-2, channel-3, title, helderheid-glow, media-queries;

@layer reset{
    *, *::after, *::before {
        box-sizing:border-box;  
    }
    
    *{
        margin: 0;
    }
    
    ul, li {
      list-style: none;
    }
}

@layer base {
    :root {
        container-type: style;
    }

    body {    
        --background: 
        linear-gradient(
        transparent 0 70%,
        #F99631 70%
        ),
        repeating-linear-gradient(
        90deg,
        #81D6FC 0 5%,
        #06A8EB 0 10%
        ),
    
        #032E34;
    
        background: var(--background);
    
        font-family: 'Arial', sans-serif;
        height: 100dvh;
        padding-top: 10em;
    
        --icon:"🥶";
    }
    
    .darumadrop-one-regular {
      font-family: "Darumadrop One", sans-serif;
      font-weight: 400;
      font-style: normal;
    }

    /* keyframes */

    @keyframes inzoomen {
        from { 
            scale: 0.8; 
        }

        to { 
            scale: 0.4; 
        }
    }

    @keyframes bounce {
        0%   { 
            translate: 0% 10%;
            transform: rotate(0deg); 
        }

        10%  { 
            translate: -80% -30%; 
            transform: rotate(20deg); 
        }

        30%  { 
            translate:  70% -30%; 
            transform: rotate(60deg); 
        }

        50%  { 
            translate:  -70% 60%; 
            transform: rotate(160deg); 
        }

        70%  { 
            translate: 0% -60%; 
            transform: rotate(260deg);
        }

        90% { 
            translate: 70% 60%; 
            transform: rotate(300deg);
        }

        100% { 
            translate: 0% 10%; 
            transform: rotate(360deg);
        }
    }


    @keyframes ruis {
        0%   { background-position: 0 0, 0 0, 0 0; }
        25%  { background-position: 0 2px, 3px 0, 0 0; }
        50%  { background-position: 0 1px, -2px 1px, 0 0; }
        75%  { background-position: 1px 3px, 1px -1px, 0 0; }
        100% { background-position: 0 0, 0 0, 0 0; }
    }

    @keyframes appear {
        0% { 
            opacity: 0;
            transform: scale(0);
        }
        50% { 
            opacity: 1; 
            transform: scale(1.2);
        }
        100% { 
            opacity: 1; 
            transform: scale(1);
        }
    }

    @keyframes rotate {
        from { transform: rotate(-240deg); }
        to { transform: rotate(-360deg); }
    }

    @property --from {
    syntax: "<angle>";
    inherits: true;
    initial-value: 45deg;
    }

    @keyframes draai{
        0%{
        --from:0turn;
        /* scale: 1; */
        }

        50%{
        --from:0.5turn;
            /* scale: 1.5; */
        }
        
        100%{
        --from:1turn;
            /* scale: 1; */
        }
    }

    @keyframes inschuiven {
        from { 
            transform: translateX(200%) 
            translateY(20%) 
            scale(1.8) 
            rotate(0deg); 
        }

        to   { 
            transform: translateX(32%)   
            translateY(20%) 
            scale(1.8) 
            rotate(-360deg); 
        }
    }

    @keyframes inschuiven-mobile {
        from { 
            transform: translateX(200%) 
            translateY(20%) 
            scale(1.8) 
            rotate(0deg); 
        }

        to   { 
            transform: translateX(45%)   
            translateY(20%) 
            scale(1.8) 
            rotate(-360deg); 
        }
    }

    @keyframes blijven-draaien {
        from { 
            transform: translateX(32%) 
            translateY(20%) 
            scale(1.8) 
            rotate(0deg); 
        }

        to   { 
            transform: translateX(32%) 
            translateY(20%) 
            scale(1.8) 
            rotate(-108deg); 
        }
    }

    @keyframes blijven-draaien-mobile {
        from { 
            transform: translateX(45%) 
            translateY(20%) 
            scale(1.8) 
            rotate(0deg); 
        }

        to   { 
            transform: translateX(45%)
            translateY(20%) 
            scale(1.8) 
            rotate(-108deg); 
        }
    }

    @keyframes rotate-past {
        from { 
            translate: -250% 30%;
            rotate: 0deg;
        }
        to { 
            translate: 250% 30%;
            rotate: 600deg;
        }
    }

    /* @keyframes shake {
        0%, 100% { transform: rotate(60deg) translateY(-40%); }
        25% { transform: rotate(0deg) translateY(-40%); }
        50% { transform: rotate(-60deg) translateY(-40%); }
        75% { transform: rotate(0deg) translateY(-40%); }
    } */
}

@layer components{
    body::after {
        content: '';
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0);
        pointer-events: none;
        transition: background 0.6s ease;
        z-index: 50;
    }
    body > div:nth-child(1) {
        position: relative;
        z-index: 51;
        transition: filter 0.6s ease;
    }
    
    body:has(input[name="light-btn"]:checked) > div:nth-child(1) {
        filter: brightness(0.1);
    }
    
    body:has(input[name="light-btn"]:checked)::after {
        background: rgba(0, 0, 0, 0.88);
    }
    
    /* lightswitch */
    body > div:nth-child(1){
        width: 10%;
        margin-left: 12%;
        
        aspect-ratio: 3/4;
        /* background-color: #f1ece6; */
        
        display:grid;
        grid-template-columns: repeat(16, 1fr);
        grid-template-rows: repeat(20, 1fr);
    }
    
    body > div:nth-child(1) div:nth-child(1){
        grid-column: 16/17 ;
        grid-row: 1/21 ;
        background-color: #e1d9d0;
        
        clip-path: polygon(0 0, 100% 0, 100% 95%, 0 100%);
    }
    
    body > div:nth-child(1) div:nth-child(2){
        grid-column: 1/17 ;
        grid-row: 1/2 ;
        background-color: #ebe5de;
        
        clip-path: polygon(7% 0, 100% 0, 93.5% 100%, 0 100%);
    }
    
    body > div:nth-child(1) div:nth-child(3){
        grid-column: 1/16 ;
        grid-row: 2/21 ;
        background-color: #f1ece6;
        position: relative;
    
    }
    
    /* lightswitch button */
    body > div:nth-child(1) label{
        position: relative;
        width: 100%;
        height: 100%;
    
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    body > div:nth-child(1) label:hover{
        background-color: transparent;
    }
    
    body > div:nth-child(1) div:nth-child(3) label > div{    
        aspect-ratio: 3/4;
        width: 30%;
        gap: 0;
        background-color: transparent;
        
        display:grid;
        grid-template-columns: repeat(6, 1fr);
        grid-template-rows: repeat(7, 1fr);
        clip-path: none;
        cursor: pointer;
    }
    
    body > div:nth-child(1) label > div > div:nth-child(1){
        grid-column: 5/7 ;
        grid-row: 1/8 ;
        background-color: #dbcfc2;
        
        clip-path: polygon(0 0, 100% 0, 100% 95%, 0 100%);
    }
    
    body > div:nth-child(1) label > div > div:nth-child(2){
        grid-column: 1/7 ;
        grid-row: 1/2 ;
        background-color: #d3c4b3;
    
        clip-path: polygon(7% 0, 100% 0, 85% 100%, 0 100%);
    }
    
    body > div:nth-child(1) label > div > div:nth-child(3){
        grid-column: 1/7 ;
        grid-row: 2/8 ;
        background-color: #eee6dd;
    
        clip-path: polygon(0% 0, 85% 0, 100% 100%, 15% 100%);
    }
    
    /* rotate when checked */
    body:has(input[name="light-btn"]:checked) > div:nth-child(1) div:nth-child(3) label > div {
        transform: rotate(180deg) scaleX(-1);
    }
    
    /* body:has(input[name="light-btn"]:checked){
        background: #032E34;
    } */
    
    /* tv */
    body > div:nth-child(2) {
        display:grid;
        grid-template-columns: repeat(12, 1fr);
        grid-template-rows: repeat(7, 1fr);
        margin: auto;
        margin-top: -10%;
    
        aspect-ratio: 4/3;
        max-height: 60vh;
    }
    
    div:nth-child(2) div:nth-of-type(2) {
        grid-column: 1 / 13;
        grid-row: 1 / 2;
    }
    
    div:nth-child(2) div:nth-of-type(2) div{
        width: 100%;
        height: 100%;
    
        background-color: #FF4647;
        clip-path: polygon(8.5% 0, 100% 0, 91.5% 100%, 0 100%);
    }
    
    div:nth-of-type(2) div:nth-of-type(4){
        & header{
        position: absolute;
        top: 28%;
        left: 50%;
        width: 100px;
        height: 50px;
        border-radius: 50px 50px 0 0;
        transform: translateX(-50%);
        background-color: #891f1f;
    
        z-index: 1;
        }
    }
    
    div:nth-of-type(2) div:nth-of-type(4) li {
        content: "";
        position: absolute;
        top: -140%;
        left: 20%;
        width: 7px;
        height: 80px;
        transform: translateX(-50%) rotate(-15deg);
        /* clip-path: polygon(50% 0%, 0% 100%, 100% 100%); */
        background-color: #891f1f;
    
        &:nth-of-type(2) {
            left: 75%;
            top: -100%;
            transform: translateX(-50%) rotate(15deg);
        }
    
        &::before {
            content: "";
            position: absolute;
            top: -20%;
            left: 50%;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            transform: translateX(-50%);
            background-color: #891f1f;
        }
    }
    
    div div:nth-of-type(1) {
        grid-column: 12 / 13;
        grid-row: 1 / 8;
    }
    
    div div:nth-of-type(1) div{
        width: 100%;
        height: 100%;
        background-color: #d21b27;
        clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%);
    }
    
    div div:nth-of-type(3){
        grid-column: 1 / 12;
        grid-row: 2 / 8;
    
        background-color: #FEBC39;
    
        display: flex;
        justify-content: center;
        align-items: center;
    }
    
    div div:nth-of-type(3) div{
        width: 80%;
        /* height: 80%; */
        /* border: 1px solid black; */
    
        display: grid;
        gap: 6%;
        grid-template-columns: repeat(4, 1fr);
        grid-template-rows: 1fr;
    }
    
    div div:nth-of-type(3) div div{
        display: flex;
        width: 100%;
        height: 100%;
        border: none;
    
        grid-row: 1 / 2;
        grid-column: 1 / 4;
    
    
        background-color: #FF4647;
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    }
    
    div div:nth-of-type(3) div div:nth-child(2){
        width: 100%;
        height: 100%;
        border: none;
    
        grid-row: 1 / 2;
        grid-column: 4 / 5;
    
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        
        background-color: #EE8353;
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    }
    
    div div:nth-of-type(3) div div:nth-child(2) form{
        height: 100%;
        width: 100%;
    
        display: grid;
        grid-template-rows: repeat(4,1fr);
        padding: 1em;
        gap: 1em;
        
    }
    
    input[type="checkbox"]{
        opacity: 0;
        cursor: pointer;
        position: absolute;
        inset: 0;
        margin: 0;
        aspect-ratio: 1;
    }
    
    /* styling voor de knoppen */
    
    body > div:nth-child(2) label{
        position: relative;
        width: 100%;
        height: 100%;
        /* background-color: #FFA829; */
        display: inline-block;
        border-radius: 100%;
    
        transition: 0.2s;
        aspect-ratio: 1;
    
        background: 
            radial-gradient(
                circle at 48% 50%, 
                #f5a623 40%, 
                transparent 41%),
    
            radial-gradient(
                circle at 54% 50%, 
                #cc1100 40%, 
                transparent 41%),
    
            #e8845a;
    }
    
    body > div:nth-child(2) label:hover {
        background-color: #fc9f60;
    }
    
    
    body > div:nth-child(2) label:nth-of-type(4){
        &::before {
            content: "";
    
            width: 30%;
            height: 30%;
            
            border-radius: 50%;
            border: 4px solid #cc1100;
            
    
            position: absolute;
            top: 35%;
            left: 32%;
        }
    
        &::after {
            content: "";
    
            width: 10%;
            height: 20%;
            
            border-radius: 25px;
            background-color: #cc1100;
            border: 2px solid #f5a623;
    
            position: absolute;
            top: 28%;
            left: 42%;
        }
    }
    
    /* styling voor de knop 1 */
    
    body:has(input[name="control-btn-1"]:checked) {
        --background: #ec767c;
    }
    
    label:has(input[name="control-btn-1"]:checked)  {
        background-color: #FF343C;
    } 
    
    /* styling voor de knop 2 */
    
    label:has(input[name="control-btn-2"]:checked)  {
        background-color: #FF343C;
    } 
    
    div div:nth-of-type(3) div div div{
        margin: auto;
        width: 85%;
        height: 85%;
        border: none;
    
        background-color: #EE8353;
    }
    
    div div:nth-of-type(3) div:has(input[name="control-btn-2"]:checked) div:first-child div {
        background-color: #2d35d7;
    }
    
    /* https://bennettfeely.com/clippy/ */
    
    div div:nth-of-type(3) div div div div{
        width: 70%;
        height: 70%;
        border: none;
    
        background-color: #077bd4;
        clip-path: polygon(50% 0%, 63% 31%, 98% 35%, 73% 60%, 83% 91%, 48% 75%, 15% 93%, 25% 59%, 2% 35%, 33% 30%);
    }
    
    
    /* gordijn */
    sidebar{
        width: 59vw;
        height: 100%;
    
        position: absolute;
    
        background: #d43307;
    
        &:nth-of-type(1){
            top: 0;
            left: -100px;
            bottom: 0;
    
            border-right: 6px solid #4e0000;
            box-shadow: inset -30px 0 50px rgba(0,0,0,0.5), 4px 0 0 #2a0000;
        }
    
        &:nth-of-type(2){
            top: 0;
            right: -100px;
            bottom: 0;
            border-left: 6px solid #4e0000;
            box-shadow: inset 30px 0 50px rgba(0,0,0,0.5), -4px 0 0 #2a0000;
        }
    
        background-image:
        repeating-linear-gradient(
          to right,
          #701010 0px,
          #a01015 6px,
          #c0151a 12px,
          #d42020 18px,
          #c0151a 24px,
          #a01015 30px,
          #701010 36px,
          #580d0d 40px,
          #701010 44px
        );
    }
    
    div:has(sidebar) {
        position: fixed;
        inset: 0;
        z-index: 100;
        pointer-events: none;
    }
    
    div:has(sidebar) input {
        display: none;
    }
    
    div:has(sidebar) label {
        position: fixed;
        inset: 0;
        pointer-events: all;
        cursor: pointer;
        z-index: 101;
    }
    
    div:has(sidebar) sidebar {
        transition: transform 1.5s cubic-bezier(.86,-0.36,.19,1.49);
        pointer-events: all;
    }
    
    div:has(input[name="curtain-btn"]:checked) label {
        pointer-events: none;
    }
    
    div:has(input[name="curtain-btn"]:checked) sidebar {
        &:nth-of-type(1){
            transform: translateX(-100%);
        }
    
        &:nth-of-type(2){
            transform: translateX(100%);
        }
    }
    
    
    body:has(input[name="light-btn"]:checked) > div:nth-child(1):hover {
        filter: brightness(1) !important;
    }
    
    
    body:has(input[name="light-btn"]:checked) > div:nth-child(1)::before {
        content: '';
        position: absolute;
        inset: 0px;
        border-radius: 20px;
        box-shadow: 0 0 80px 60px rgba(255, 220, 100, 0.15);
        pointer-events: none;
        z-index: -1;
    }
    
    
    /* tv scherm - het eerste grote div blok */
    div div:nth-of-type(3) div div:first-child {
        position: relative;
        /* overflow: hidden; */
        transition: background 0.4s ease;
    }
    
    body > div:nth-of-type(2) div:nth-of-type(3) div div:first-child:has(input[name="tv-zenders"]) {
        display: flex;
        background-color: transparent;
        flex-direction: column;
    }
    
    body > div:nth-of-type(2) div:nth-of-type(3) div div:first-child:has(input[name="tv-zenders"]) div {
        flex: 1;
        width: 100%;
        background-color: #FF4647;
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    
        background: repeating-linear-gradient(
            0deg,
            rgba(0,0,0,0.15) 0px,
            rgba(0,0,0,0.15) 1px,
            transparent 1px,
            transparent 4px
        ),
        repeating-linear-gradient(
            90deg,
            rgba(255,255,255,0.05) 0px,
            rgba(255,255,255,0.05) 2px,
            transparent 2px,
            transparent 6px
        ),
        #2a2a2a;
        animation: ruis 0.1s infinite;
    }
    
    /* body:has(input[name="channel"][value="1"]:checked) 
    div:nth-of-type(2) div:nth-of-type(3) div div:first-child div::after {
        content: var(--icon);
        font-size: 20vmin;
        margin: auto;
    } */
    
    /* het idee was eerst om met de slider de programma's te beheren vandaar deze @container style */
    /* @container style(--tv-zenders >= 0) {
        body{
        --bg:LawnGreen;
        --icon:"🐸";
        
        }
    } */
    
    input[name="tv-zenders"]{
        width: 100%;
    }
    
    @property --tv-zenders {
        syntax: "<number>";
        inherits: true;
        initial-value: -20;
    }
    
    /* helderheid slider aan claude gevraag voor calc: Ik heb een CSS range input met min="-20", max="40" en value="20". Ik wil dat de standaardwaarde brightness(1) geeft */
    body > div:nth-of-type(2) div:nth-of-type(3) > div > div:first-child {
        filter: brightness(calc((var(--tv-zenders) + 20) / 40));
        transition: filter 0.2s ease;
    }
    
    
    h2 {
        display: none;
    }
    
    /* tv filter voor wanneer het light aan of uit is */
    body > div:nth-of-type(2) div:nth-of-type(3) div div:first-child:has(input[name="tv-zenders"]) div {
        filter: brightness(0.5) contrast(0.8) saturate(0.7);
    }

    body:has(input[name="light-btn"]:checked) > div:nth-of-type(2) div:nth-of-type(3) div div:first-child:has(input[name="tv-zenders"]) div {
        filter: brightness(1) contrast(1) saturate(1);
    }

    body:has(input[name="curtain-btn"]:checked):not(:has(input[name="light-btn"]:checked)) > div:nth-child(3){
        position: absolute;
        top: 0;
        bottom: 0;
        z-index: 100;
        opacity: 0.3;

        pointer-events: none;
        width: 100%;
        height: 100%;

        animation: draai 60s infinite linear;

        background-image:
            radial-gradient(
            circle at 0% 0%,
            rgb(239, 165, 55) 10%,
            transparent 0
            ),

            repeating-conic-gradient(
                from var(--from) at 0% 0%,
                rgb(239, 165, 55) 0 2%,
                rgb(234, 154, 33) 0 4%    
            );
    }

    @property --from {
        syntax: "<angle>";
        inherits: true;
        initial-value: 0deg;
        }

        @keyframes draai {
        0%   { --from: 0turn; }
        100% { --from: 1turn; }
    }

    /* 'geheime animatie' voor als de slider -20 is */
    /* https://codepen.io/kellyhk/pen/yyaVPax */
    @container style(--tv-zenders: -20) {
        body > div:nth-of-type(2) div:nth-of-type(3) div div:first-child:has(input[name="tv-zenders"]) div {
            animation: tv-uit 0.5s ease-in forwards !important;
        }
    }

    @keyframes tv-uit {
        0%   { 
            clip-path: inset(0% 0% 0% 0%);
        }
        50%  { 
            clip-path: inset(47% 0% 47% 0%);
        }
        100% { 
            clip-path: inset(50% 0% 50% 0%);
        }
    }
}

@layer channel-1 {
    body:has(input[name="channel"][value="1"]:checked) 
    > div:nth-of-type(2) div:nth-of-type(3) div div:first-child:has(input[name="tv-zenders"]) div {
        animation: none;
        background-color: rgb(56, 66, 154);
    }
    
    body:has(input[name="channel"][value="1"]:checked) 
    > div:nth-of-type(2) div:nth-of-type(3) div div:first-child:has(input[name="tv-zenders"]) div h2{
        display: block;
        /* opacity: 0; */
        z-index: 10;
        margin: auto;
        /* animation: appear 1s ease-in-out forwards;
        animation-delay: 2s; */
        font-family: 'Darumadrop One', sans-serif;
        font-size: 6em;
        letter-spacing: -0.16em;
        text-shadow: 
            0.05em 0 rgb(96, 44, 24);
    
        animation: rotate 2s ease-in-out forwards 2s;
    
        & span {
            opacity: 0;
            display: inline-block;
            animation: appear 1s ease-in-out forwards;
            color: rgb(241, 184, 30);
        }
    
        & span:nth-of-type(1) {
            color: rgb(207, 101, 126);
            animation-delay: 2s;
        }
    
        & span:nth-of-type(2) {
            color: rgb(30, 47, 241);
            animation-delay: 2.2s;
        }
    
        & span:nth-of-type(3) {
            color: rgb(241, 184, 30);
            animation-delay: 2.4s;
        }
    
        & span:nth-of-type(4) {
            color: rgb(241, 30, 30);
            animation-delay: 2.6s;
        }
    
        & span:nth-of-type(5) {
            color: rgb(68, 187, 35);
            animation-delay: 2.8s;
        }
    }
    
    
    body:has(input[name="channel"][value="1"]:checked) 
    > div:nth-of-type(2) div:nth-of-type(3) div div:first-child:has(input[name="tv-zenders"]) div header {
        content: "";
        position: absolute;
        width: 200px;
        height: 200px;
        border-radius: 50%;
        opacity: 0.8;
        background: repeating-conic-gradient(
            #b48426 0deg 18deg,
            #7d3441 18deg 36deg
        );
        
        animation: 
        inschuiven 2s linear 1 forwards,
        blijven-draaien 3s cubic-bezier(0.25, 1, 0.5, 1) 2s;
    
        &::after {
            content: '';
            position: absolute;
            width: 200px;
            height: 200px;
            margin: auto;
            inset: 0;
            border-radius: 50%;
            background: repeating-radial-gradient(
                circle at 50% 50%,
                transparent 0%,
                transparent 8%,
                rgba(245, 230, 200, 0.85) 8%,
                rgba(245, 230, 200, 0.85) 15%
            );
            mix-blend-mode: overlay;
            pointer-events: none;
        }
    }
    
    body > div:nth-child(2) label:has(input[name="channel"]:checked) {
        background:
            radial-gradient(circle at 48% 50%, #f5a623 40%, transparent 41%),
            radial-gradient(circle at 54% 50%, #cc1100 40%, transparent 41%),
            #FF343C;
        box-shadow: 0 0 8px rgba(255, 52, 60, 0.6);
    }
    
    input[type="radio"] {
        opacity: 0;
        cursor: pointer;
        position: absolute;
        inset: 0;
        margin: 0;
        aspect-ratio: 1;
    }
}

@layer channel-2 {
    /* body:has(input[name="channel"][value="2"]:checked) div:nth-of-type(2) div:nth-of-type(3) div div:first-child div:first-child {
        animation: circle 3s infinite;
        background: orange;
        clip-path: circle(75%);
    }
    
    @keyframes circle {
      0% { clip-path: circle(75%); }
      50% { clip-path: circle(25%); }
      100% { clip-path: circle(75%); }
    } */

    body:has(input[name="channel"][value="2"]:checked) 
    div:nth-of-type(2) div:nth-of-type(3) > div > div:first-child {
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
    
        /* &::before {
            content: "";
            position: absolute;
            width: 30%;
            height: 22%;
            top: 5%;
            left: 50%;
            transform: translateX(-50%);
            clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
            background-color: rgb(241, 184, 30);
            z-index: 1;
        }
    
        &::after{
            content: "";
            position: absolute;
            width: 5%;
            height: 5%;
            border-radius: 50% 50%;
            top: 12%;
            background-color: rgb(216, 92, 119);
            z-index: 2;
    
            box-shadow: 0 25px 0 rgb(216, 92, 119);
        } */
    
        & header {
            margin: auto;
            width: 50%;
            height: 60%;
            background-color: rgb(249, 208, 172);
            border-radius: 50%;
            position: relative;
            z-index: 11;
            overflow: visible;
    
            /* transform: translateY(10%); */
    
            /* scale: 0.4; */
    
            animation: inzoomen 1.5s ease-in-out forwards,bounce 2.5s linear infinite 1.5s;
    
            &::before {
                content: "";
                position: absolute;
                width: 70%;
                height: 50%;
                top: -40%;
                left: 50%;
                transform: translateX(-50%);
                clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
                background-color: rgb(241, 184, 30);
                z-index: 1;
            }
    
            &::after{
                content: "";
                position: absolute;
                width: 10%;
                height: 10%;
                border-radius: 50% 50%;
                left: 50%;
                top: -25%;
                transform: translateX(-50%);
                background-color: rgb(216, 92, 119);
                z-index: 2;
    
                box-shadow: 0 30px 0 rgb(216, 92, 119);
            }
    
            & ul {
                display: flex;
                position: absolute; 
                /* gap: 10%; */
                padding: 0;
                margin: 0;
                width: 100%;
                height: 100%;
                align-items: center;
                justify-content: center;
                z-index: 3;
    
                & li:nth-of-type(1), 
                & li:nth-of-type(2) {
                    width: 30%;
                    height: 30%;
                    /* background-color: rgb(223, 154, 127); */
                    background-color: rgb(249, 208, 172);
                    border-radius: 50%;
                    flex-shrink: 0;
                } 
    
                & li:nth-of-type(1) {
                    transform: translate(-115%, 40%);
                }
    
                & li:nth-of-type(2) {
                    transform: translate(115%, 40%);
                }
    
                & li:nth-of-type(3) {
                    position: absolute;
                    width: 20%;
                    height: 20%;
                    background-color: rgb(211, 69, 69);
                    
                    border-radius: 50%;
                    transform: translate(0, 70%);
                }
    
                & li:nth-of-type(4),
                & li:nth-of-type(5) {
                    position: absolute;
                    width: 7%;
                    height: 10%;
                    top: 50%;
                    background-color: rgb(50, 48, 48);
                    border-radius: 50%;
                }
    
                & li:nth-of-type(4) {
                    left: 40%;
                    transform: translate(-50%, -50%);
                }
    
                & li:nth-of-type(5) {
                    left: 60%;
                    transform: translate(-50%, -50%);
                }
    
                & li:nth-of-type(6),
                & li:nth-of-type(7){
                    position: absolute;
                    width: 10%;
                    height: 5%;
                    background-color: rgb(50, 48, 48);
                    border-radius: 50%;
                    top: 80%;
                }
    
                & li:nth-of-type(7){
                    background-color: rgb(249, 208, 172);
                    width: 15%;
                    top: 78%;
                }
    
                & li:nth-of-type(8),
                & li:nth-of-type(9),
                & li:nth-of-type(10),
                & li:nth-of-type(11) {
                    position: absolute;
                    width: 7%;
                    height: 5%;
                    background-color: rgb(50, 48, 48);
                    border-radius: 50%;
                    top: 30%;
                }
    
                & li:nth-of-type(8),
                & li:nth-of-type(10) {
                    left: 40%;
                    transform: translate(-50%, -50%) skew(-20deg);
                }
    
                & li:nth-of-type(10),
                & li:nth-of-type(11) {
                    background-color: rgb(249, 208, 172);
                    top: 32%;
                }
    
                & li:nth-of-type(9),
                & li:nth-of-type(11) {
                    left: 60%;
                    transform: translate(-50%, -50%) skew(20deg);
                }
    
                & li:nth-of-type(12) {
                    position: absolute;
                    width: 35%;
                    height: 35%;
    
                    top: -8%;
                    right: 15%;
                    z-index: 120;
                    background-color: rgb(50, 48, 48);
                    
                    /* https://claude.ai/chat/3a286d60-531d-411f-a6ba-670d8c45e679 */
                    clip-path: polygon(
                        50%   0%,
                        54%  35%,
                        75%  15%,
                        62%  42%,
                        100% 38%,
                        70%  55%,
                        88%  80%,
                        55%  65%,
                        50% 100%,
                        45%  65%,
                        12%  80%,
                        30%  55%,
                        0%   38%,
                        38%  42%,
                        25%  15%,
                        46%  35%
                    );
                    
                }
            }
        }    
    }
}

@layer channel-3 {
    body:has(input[name="channel"][value="3"]:checked) 
    > div:nth-of-type(2) div:nth-of-type(3) div div:first-child:has(input[name="tv-zenders"]) div {
        animation: none;
        background-color: rgb(56, 66, 154);
    
    
        background:
        radial-gradient(ellipse 280px 80px at 50% 100%, #52b225 0 60%, #418b1f 60% 80%, transparent 80%),
        repeating-linear-gradient(90deg, #52b225 0 5%, #418b1f 0 10%),
        #032E34;
    }
    
    body:has(input[name="channel"][value="3"]:checked) 
    div:nth-of-type(2) div:nth-of-type(3) > div > div:first-child {
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
    
        & header {
            margin: auto;
            width: 50%;
            height: 60%;
            background-color: rgb(249, 208, 172);
            border-radius: 50%;
            position: relative;
            z-index: 11;
            overflow: visible;
    
            /* transform: translateY(120%) translateX(-250%) rotate(0deg); */
    
            scale: 0.6;
            /* transform-origin: 50% -40%; */
            /* animation: shake 2.5s cubic-bezier(0.37, 0, 0.63, 1) infinite 1.5s; */
    
            /* animation: rotate-past 1.5s ease-in-out infinite alternate; */
            
            translate: -250% 120%; 
            rotate: 0deg;
            
            animation: rotate-past 3s ease-in-out infinite alternate;
    
            &::before {
                content: "";
                position: absolute;
                width: 70%;
                height: 50%;
                top: -40%;
                left: 50%;
                transform: translateX(-50%);
                clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
                background-color: rgb(241, 184, 30);
                z-index: 1;
            }
    
            &::after{
                content: "";
                position: absolute;
                width: 10%;
                height: 10%;
                border-radius: 50% 50%;
                left: 50%;
                top: -25%;
                transform: translateX(-50%);
                background-color: rgb(216, 92, 119);
                z-index: 2;
    
                box-shadow: 0 30px 0 rgb(216, 92, 119);
            }
    
            & ul {
                display: flex;
                position: absolute; 
                /* gap: 10%; */
                padding: 0;
                margin: 0;
                width: 100%;
                height: 100%;
                align-items: center;
                justify-content: center;
                z-index: 3;
    
                & li:nth-of-type(1), 
                & li:nth-of-type(2) {
                    width: 30%;
                    height: 30%;
                    /* background-color: rgb(223, 154, 127); */
                    background-color: rgb(249, 208, 172);
                    border-radius: 50%;
                    flex-shrink: 0;
                } 
    
                & li:nth-of-type(1) {
                    transform: translate(-115%, 40%);
                }
    
                & li:nth-of-type(2) {
                    transform: translate(115%, 40%);
                }
    
                & li:nth-of-type(3) {
                    position: absolute;
                    width: 22%;
                    height: 20%;
                    background-color: rgb(211, 69, 69);
                    
                    border-radius: 50%;
                    transform: translate(0, 75%);
                    background-image:
                        radial-gradient(
                            circle,
                            rgb(218, 88, 88) 20%,
                            transparent 0
                        ),
                        repeating-conic-gradient(
                            from var(--from),
                            rgb(211, 69, 69) 0 5%,
                            rgb(160, 38, 38) 0 10%    
                        );
    
                    animation:draai 4s infinite linear;
                    z-index: 2;
                }
    
                & li:nth-of-type(4),
                & li:nth-of-type(5) {
                    position: absolute;
                    width: 7%;
                    height: 10%;
                    top: 50%;
                    background-color: rgb(50, 48, 48);
                    border-radius: 50%;
                }
    
                & li:nth-of-type(4) {
                    left: 40%;
                    transform: translate(-50%, -50%);
                }
    
                & li:nth-of-type(5) {
                    left: 60%;
                    transform: translate(-50%, -50%);
                }
    
                & li:nth-of-type(6),
                & li:nth-of-type(7){
                    position: absolute;
                    width: 10%;
                    height: 5%;
                    background-color: rgb(50, 48, 48);
                    border-radius: 50%;
                    top: 80%;
                }
    
                & li:nth-of-type(7){
                    background-color: rgb(249, 208, 172);
                    width: 15%;
                    top: 78%;
                }
    
                & li:nth-of-type(8),
                & li:nth-of-type(9),
                & li:nth-of-type(10),
                & li:nth-of-type(11) {
                    position: absolute;
                    width: 7%;
                    height: 5%;
                    background-color: rgb(50, 48, 48);
                    border-radius: 50%;
                    top: 30%;
                }
    
                & li:nth-of-type(8),
                & li:nth-of-type(10) {
                    left: 40%;
                    transform: translate(-50%, -50%) skew(-20deg);
                }
    
                & li:nth-of-type(10),
                & li:nth-of-type(11) {
                    background-color: rgb(249, 208, 172);
                    top: 32%;
                }
    
                & li:nth-of-type(9),
                & li:nth-of-type(11) {
                    left: 60%;
                    transform: translate(-50%, -50%) skew(20deg);
                }
    
                & li:nth-of-type(12) {
                    position: absolute;
                    width: 35%;
                    height: 35%;
    
                    top: -8%;
                    right: 15%;
                    z-index: 120;
                    background-color: rgb(50, 48, 48);
                    
                    /* https://claude.ai/chat/3a286d60-531d-411f-a6ba-670d8c45e679 */
                    clip-path: polygon(
                        50%   0%,
                        54%  35%,
                        75%  15%,
                        62%  42%,
                        100% 38%,
                        70%  55%,
                        88%  80%,
                        55%  65%,
                        50% 100%,
                        45%  65%,
                        12%  80%,
                        30%  55%,
                        0%   38%,
                        38%  42%,
                        25%  15%,
                        46%  35%
                    );
                    
                }
            }
        }    
    }
}

@layer helderheid-glow{
    body:has(input[name="channel"][value="3"]:checked) 
    > div:nth-of-type(2) div:nth-of-type(3) {
        filter: drop-shadow(0 0 40px rgb(82 178 37 / 0.7));
        z-index: 51;
    }
    
    body:has(input[name="channel"][value="3"]:checked):has(input[name="light-btn"]:checked)
    > div:nth-of-type(2) div:nth-of-type(3){
        filter: drop-shadow(0 0 40px rgb(82 178 37 / 0.7)) brightness(1);
    }
    
    body:has(input[name="channel"][value="2"]:checked) 
    > div:nth-of-type(2) div:nth-of-type(3),
    body:has(input[name="channel"][value="1"]:checked) 
    > div:nth-of-type(2) div:nth-of-type(3)  {
        filter: drop-shadow(0 0 40px rgba(215, 164, 25, 0.7)) ;
        z-index: 51;
    }
    
    body:has(input[name="channel"][value="2"]:checked):has(input[name="light-btn"]:checked)
    > div:nth-of-type(2) div:nth-of-type(3),
    body:has(input[name="channel"][value="1"]:checked):has(input[name="light-btn"]:checked)
    > div:nth-of-type(2) div:nth-of-type(3){
        filter: drop-shadow(0 0 40px rgba(93, 113, 216, 0.7)) brightness(1);
    
        & header {
            filter: drop-shadow(0 0 50px rgba(208, 157, 17, 0.7)) brightness(1);
        }
    }


    body:has(input[name="light-btn"]:checked) > h1 span {
        text-shadow:
            0 0 10px #ffe066,
            0 0 30px #ffaa00,
            0 0 60px #ff6600;
    }

    body:has(input[name="light-btn"]:checked)  > h1 span:nth-of-type(9),
    body:has(input[name="light-btn"]:checked)  > h1 span:nth-of-type(10) {
        text-shadow:
            0 0 10px #ff4647,
            0 0 30px #ff0000,
            0 0 60px #aa0000 !important;
    }
}

@layer media-queries {
    @media (max-width: 475px){
        body {
            padding-top: 5em;
        }
    
        body > div:nth-child(1) {
            width: 20%;
            margin-left: auto;
            margin-right: 10%;
        }
    
        sidebar {
            &:nth-of-type(1){
                left: -10%;
            }
    
            &:nth-of-type(2){
                right: -10%;
            }
        }
    
        body > div:nth-child(2){
            margin-top: 80px;
            width: 90%;
        }
    
        div:nth-of-type(2) div:nth-of-type(4) {
            & header {
                margin-top: 70px;
            }
        }
    
        body > div:nth-child(2) label:nth-of-type(4) {
            aspect-ratio: 1/1;
    
            &::before {
                width: 35%;
                height: 35%;
                top: 31%;
                border: 2px solid #cc1100;
            }
    
            &::after {
                width: 13%;
                height: 24%;
    
                top: 22%;
                left: 44%;
                border: 1px solid #f5a623;
            }
        }
        
        body:has(input[name="channel"][value="1"]:checked) div:nth-of-type(2) div:nth-of-type(3) > div > div:first-child {
            position: relative;
            display: flex;
            justify-content: center;
            align-items: center;
        }
    
        body:has(input[name="channel"][value="1"]:checked) > div:nth-of-type(2) div:nth-of-type(3) div div:first-child:has(input[name="tv-zenders"]) div {
            animation: none;
            width: max-width(100%);
            background-color: rgb(56, 66, 154);
        }
    
        body:has(input[name="channel"][value="1"]:checked) > div:nth-of-type(2) div:nth-of-type(3) div div:first-child:has(input[name="tv-zenders"]) div h2 {
            font-size: 4em;
            letter-spacing: -0.15em;
        }
    
        body:has(input[name="channel"][value="1"]:checked) > div:nth-of-type(2) div:nth-of-type(3) div div:first-child:has(input[name="tv-zenders"]) div header {
            animation: 
            inschuiven-mobile 2s linear 1 forwards,
            blijven-draaien-mobile 3s cubic-bezier(0.25, 1, 0.5, 1) 2s;
    
            width: 110px;
            height: 110px;
    
            &::after {
                width: 110px;
                height: 110px;
            }
        }
    
        body:has(input[name="channel"][value="2"]:checked) 
        div:nth-of-type(2) div:nth-of-type(3) > div > div:first-child header::after{
            box-shadow: 0 10px 0 rgb(216, 92, 119);
        }

        body > h1 {
            margin-top: 4em;
            margin-left: -2em;
            font-size: 1.5em;
        }
    }
    
    
    
    @media (max-width: 376px){
        div:nth-of-type(2) div:nth-of-type(4) {
            & header {
                margin-top: 100px;
                scale: 0.8;
            }
        }
    
        body > div:nth-child(2) {
            margin-top: 120px;
        }
    
        body:has(input[name="channel"][value="2"]:checked) 
        div:nth-of-type(2) div:nth-of-type(3) > div > div:first-child header::after{
            box-shadow: 0 10px 0 rgb(216, 92, 119);
        }
    }
    
    @media (max-width: 320px){
        div:nth-of-type(2) div:nth-of-type(4) {
            & header {
                margin-top: 90px;
                scale: 0.7;
            }
        }
    
        body > div:nth-child(2) {
            margin-top: 130px;
        }

        body > h1 {
            margin-top: 7em;
            margin-left: 0;
            font-size: 1.5em;
        }
    }
}

@layer title {
    body > h1 {
        font-family: 'Darumadrop One', sans-serif;
        text-align: center;
        font-size: 5em;
        letter-spacing: 0.05em;
        margin-bottom: 0.3em;

        opacity: 0;
        transform: translateY(-20px);
        pointer-events: none;
        position: absolute;
        width: 100%;
        
        top: 0;
        z-index: 100;
        transition: all 0.4s ease;
    }

    body > h1 span {
        display: inline-block;
        opacity: 0;
        color: #ffe066;

        /* text-shadow:
            0 0 5px #ffe066,
            0 0 10px #ffaa00,
            0 0 20px #ff6600; */
    }
    body > h1 span:nth-of-type(9){
        margin-left: 0.5em;
    }
    body > h1 span:nth-of-type(10){
        margin-right: 0.5em;
    }

    body > h1 span:nth-of-type(9),
    body > h1 span:nth-of-type(10) {
        color: #ff4647 !important;
        text-shadow:
            0 0 10px #ff4647,
            0 0 30px #ff0000,
            0 0 60px #aa0000 !important;

    }

    body:has(input[name="curtain-btn"]:checked) > h1 {
        animation: titel-in 0.6s ease forwards 1.2s;
    }

    body:has(input[name="curtain-btn"]:checked) > h1 span {
        animation: letter-glow 0.4s ease forwards, glow-pulse 2s ease-in-out infinite;
    }

    /* werkt alleen wanneer de lightbutton unchecked is en nadat de curtain is geopend */
    body:has(input[name="curtain-btn"]:checked):not(:has(input[name="light-btn"]:checked)) > h1 span {
        animation: glow-pulse-light 2s ease-in-out infinite;
    }

     body:has(input[name="curtain-btn"]:checked) > h1 span{
        &:nth-child(1)  { 
            animation-delay: 1.3s; 
        }

        &:nth-child(2)  { 
            animation-delay: 1.45s; 
        }

        &:nth-child(3)  { 
            animation-delay: 1.6s; 
        }

        &:nth-child(4)  { 
            animation-delay: 1.75s; 
        }

        &:nth-child(5)  { 
            animation-delay: 1.9s; 
        }

        &:nth-child(6)  { 
            animation-delay: 2.05s; 
        }

        &:nth-child(7)  { 
            animation-delay: 2.2s; 
        }

        &:nth-child(8)  { 
            animation-delay: 2.35s; 
        }

        &:nth-child(9)  { 
            animation-delay: 2.5s; 
        }

        &:nth-child(10) { 
            animation-delay: 2.65s; 
        }
     }

    @keyframes glow-pulse {
        0%, 100% { 
            text-shadow: 0 0 5px #ffe066, 0 0 10px #ffaa00, 0 0 20px #ff6600;
            transform: translateY(10px);
        }
        50% { 
            text-shadow: 0 0 15px #ffe066, 0 0 35px #ffaa00, 0 0 60px #ff6600;
            transform: translateY(0);
        }
    }

    @keyframes glow-pulse-light {
        0%, 100% { 
            text-shadow: 0 0 5px #ffe066, 0 0 10px #ffaa00, 0 0 20px #ff6600;
            opacity: 0.5;
            transform: translateY(10px);
        }
        50% { 
            text-shadow: 0 0 15px #ffe066, 0 0 35px #ffaa00, 0 0 60px #ff6600;
            opacity: 0.5;
            transform: translateY(0);
        }
    }


    @keyframes titel-in {
        from { 
            opacity: 0; 
            transform: translateY(-20px); 
        }

        to   { 
            opacity: 1; 
            transform: translateY(0); 
        }
    }

    @keyframes letter-glow {
        0%   { 
            opacity: 0; 
            transform: scale(0.5); 
        }

        60%  { 
            opacity: 1; 
            transform: scale(1.15); 
        }

        100% { 
            opacity: 1; 
            transform: scale(1); 
        }
    }
}