@import url('https://fonts.googleapis.com/css2?family=Electrolize&display=swap');


html {
     box-sizing: border-box;
     width: 100%;
     overflow-x: hidden;
}

*,
*::before,
*::after {
     box-sizing: inherit;
}

:root {
     --color-bg: #fffdf3;
     --color-info-card: #e0e0e0;
     --color-info-symbol: #2d2d2d;
     --space-page: 1rem;
     --space-block: 0.75rem;
     --measure: 65ch;
     --font: 'Electrolize', sans-serif;
     --window-border: #c0c0c0;
     --window-titlebar: #c0c0c0;
     --window-body: #ffffff;
     --center-width: 100%;
     --media-world-invert: 0.9;
     --nav-height: 4rem;
}

@media (width > 768px) {
     :root {
          --space-page: 1.25rem;
          --space-block: 1rem;
          --center-width: 40rem;
     }
}

.info-icon {
     display: flex;
     align-items: center;
     justify-content: center;
     width: 2.5rem;
     height: 2.5rem;
     text-decoration: none;
}

.info-icon__symbol {
     display: flex;
     align-items: center;
     justify-content: center;
     width: 2.25rem;
     height: 2.25rem;
     border: 0.125rem rgb(255, 255, 255);
     border-radius: 50%;
     background: rgba(255, 255, 255, 0.15);
     color: rgb(255, 255, 255);
     font-size: 1.875rem;
     font-weight: 700;
     font-style: normal;
     line-height: 1;
}

body {
     font-family: var(--font);
     background-color: #000;
     min-height: 100vh;
     margin: 0;
     padding: 0;
     padding-bottom: 4rem;
     position: relative;
     width: 100%;
     max-width: 100%;
     overflow-x: hidden;
     font-size: 0.9375rem;
     display: flex;
     flex-direction: column;

}


/* Landing page */

#landing {
     height: 20vh;
     min-height:100vh;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: space-between;
     background: #000000;
     padding: 3rem 1.5rem 5rem;
     position: relative;
     z-index: 1;
}

#landing::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     background: #050505;
     z-index: -1;
}

#landing-top {
     margin-top: -2.5rem;
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 0.3rem;
     flex: 1;
}

#landing-human {
     font-family: "adobe-handwriting-tiffany", sans-serif;
     color: #F6F2E9;
     font-size: 2rem;
}

#landing-media {
     font-family: 'Electrolize', sans-serif;
     color: #00D4CB;
     font-size: 2rem;
     margin-left: -1rem;
}

#landing-gif {
     height: auto;
     display: block;
     max-width: 40vw;
}

#landing-desc {
     font-family: "Helvetica Monospaced Pro", monospace;
     color: #F6F2E9;
     text-align: justify;
     line-height: 1.6;
     opacity: 0.75;
     font-size: 0.55rem;
     max-width: 50ch;
     margin-top: -1.5rem;
     margin-bottom: 1rem;
}

#landing-scroll {
     display: flex;
     flex-direction: column;
     align-items: center;
     gap: 0.4rem;
     font-family: "Helvetica Monospaced Pro", monospace;
     color: #F6F2E9;
     opacity: 0.6;
     font-size: 0.50rem;

}

@media (width > 768px) {
     #landing {
          padding: 4rem 2rem 2.5rem;
     }

     #landing-top {
          display: flex;
          align-items: center;
          justify-content: center;
          gap: 1.5rem;
          flex: 1;
     }

     #landing-human,
     #landing-media {
          font-size: 6rem;
     }

     #landing-gif {
          max-width: 18rem;
     }

     #landing-desc {
          font-size: 0.7rem;
          max-width: 51ch;
          margin-bottom: 1.5rem;
     }

     #landing-scroll {
          font-size: 0.7rem;
          margin-top: 1.5rem;
     }
}




/* body:not(.human-world) {
     padding-bottom: 2rem;
     background-image: url('glitch3.gif');
     background-size: cover;
     background-position: center;
     background-attachment: fixed;
}

@media (width < 769px) {
     body:not(.human-world) {
          background-image: none;
     }

     body:not(.human-world)::after {
          content: '';
          position: fixed;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          background-image: url('glitch3.gif');
          background-size: cover;
          background-position: center;
          z-index: -1;
     }
} */

body:not(.human-world) {
          background-image: none;
     }

     body:not(.human-world)::after {
          content: '';
          position: fixed;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          background-image: url('glitch3.gif');
          background-size: cover;
          background-position: center;
          z-index: -1;
     }


@media (width > 768px) {
     body:not(.human-world) {
     padding-bottom: 2rem;
     background-image: url('glitch3.gif');
     background-size: cover;
     background-position: center;
     background-attachment: fixed;
}
}
     
     

     /* body:not(.human-world)::after {
          display: none;
     } */


body.human-world {
     background-image: none;
     padding-bottom: 2rem;
}

@media (width < 769px) {
     body.human-world::after {
          content: '';
          position: fixed;
          inset: 0;
          background-image: url('texture.jpg');
          background-size: contain;
          background-position: top center;
          /* background-repeat: no-repeat; */
          z-index: -1;
     }
}

@media (width > 768px) {
     body.human-world {
          background-image: none;
     }

     body.human-world::before {
          content: '';
          position: fixed;
          top: 50%;
          left: 50%;
          width: 100vh;
          height: 100vw;
          transform: translate(-50%, -50%) rotate(90deg);
          background-image: url('texture.jpg');
          background-size: cover;
          background-position: center;
          z-index: -1;
     }
}


/* Prevent background scrolling when dialog is open */
body:has(dialog[open]) {
     overflow: hidden;
}


dialog {
     background-color: var(--window-body);
     border: 0.1875rem outset var(--window-border);
     font-family: var(--font);
     gap: var(--space-page);
     justify-items: center;
     padding: var(--space-page);
     max-width: 90vw;
     width: 38ch;
     position: fixed;
     inset-block-start: 50%;
     inset-inline-start: 50%;
     translate: -50% -50%;
     z-index: 20;
}

dialog[open] {
     display: grid;
}

dialog p {
     margin: 0;
     max-width: 36ch;
     text-align: center;
     font-size: 0.9rem;
}

dialog button {
     background: var(--window-titlebar);
     border: 0.125rem outset var(--window-border);
     cursor: pointer;
     font-family: var(--font);
     padding: calc(var(--space-page) / 2) var(--space-page);
}

dialog::backdrop {
     background-color: rgb(0 0 0 / 55%);
     pointer-events: none;
}

body:not(.human-world) #dialog-media {
     background: rgba(255, 255, 255, 0.15);
     backdrop-filter: blur(7px);
     -webkit-backdrop-filter: blur(7px);
     border: none;
     color: #fff;
}

body:not(.human-world) #dialog-media p {
     color: #fff;
     line-height: 1.6;
}

body:not(.human-world) #dialog-media button {
     background: none;
     border: 0.0625rem solid rgba(0, 0, 0, 0.4);
     color: #fff;
}

@media (width > 768px) {
     dialog {
          width: 36ch;
          max-width: 36ch;
     }
     body.human-world #dialog-human {
          width: 48ch;
          max-width: 48ch;
     }
     body.human-world #dialog-human p {
          max-width: 46ch;
          line-height: 1.7;
     }
}

main {
     flex: 1;
}

footer {
     margin-top: auto;
     position: relative;
     z-index: 10;
     margin-left: 0;
     margin-right: auto;
}

@media (width > 768px) {
     body {
          padding-bottom: 4.5rem;
          font-size: 1rem;
          padding-top: 0;
     }

     header {
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          padding-top: var(--space-page);
     }

     main {
          max-width: none;
          width: 100%;
          margin-left: 0;
          margin-right: 0;
     }
}


header,
main,
footer {
     max-width: var(--center-width);
     margin-left: auto;
     margin-right: auto;
     width: 100%;
}

header {
     text-align: center;
     margin-top: 3rem;
}

header p {
     margin: 0.5em 0;
}

#channel-link {
     display: block;
     text-align: center;
     background: none;
     padding: 0;
     margin: 2.5rem 0 0 0;
     z-index: 15;
     text-decoration: underline;
}

body:not(.human-world) #channel-link {
     color: #fff;
}



body.human-world #channel-link {
     font-family: "adobe-handwriting-tiffany", sans-serif;
     color: #373737;
     font-size: 1rem;
     margin-top: 1rem;
}

body.human-world #channel-users address {
     background: none;
     font-family: "adobe-handwriting-tiffany", sans-serif;
}

body.human-world #channel-users address a {
     text-decoration: underline;
}

body.human-world footer h2 {
     background: none;
     font-family: "adobe-handwriting-tiffany", sans-serif;
}



body.human-world .info-icon__symbol {
     background: none;
     border: none;
     color: #000;
     font-family: "adobe-handwriting-tiffany", sans-serif;
}

body.human-world dialog,
body.human-world dialog button {
     font-family: "adobe-handwriting-tiffany", sans-serif;
}

header p a,
header p {
     padding: 0.25em 0.5em;
}

.header-buttons {
     position: fixed;
     top: 0;
     left: 0;
     right: 0;
     z-index: 1000;
     display: flex;
     justify-content: space-between;
     background: #fff;
     padding: 1rem 2.5rem;
     height: var(--nav-height);
     align-items: center;
     opacity: 0;
     pointer-events: none;
     transition: opacity 0.3s ease;
}

.header-buttons.is-visible {
     opacity: 1;
     pointer-events: auto;
}



#world {
     padding: var(--space-page);
     padding-top: calc(var(--nav-height) + var(--space-page));
     padding-bottom: 4rem;
}

body.human-world .header-buttons {
     background: var(--window-body);
     border-bottom: 0.1875rem outset var(--window-border);
}

body:not(.human-world) .header-buttons {
     color: #fff;
     background: rgba(255, 255, 255, 0.15);
     backdrop-filter: blur(7px);
     -webkit-backdrop-filter: blur(7px);
     /* filter: invert(var(--media-world-invert)); */
}

.header-btn {
     font-family: var(--font);
     font-size: 1.2rem;
     display: inline-block;
     cursor: pointer;
}

.header-btn[data-world="dream"] {
     font-family: "adobe-handwriting-tiffany", sans-serif;
}

.header-btn.active {
     font-weight: bold;
     border: none;
}

.header-btn[data-world="dream"].active {
     color: #C24A32;
}

.header-btn[data-world="real"].active {
     color: #00D4CB;
}

.header-btn:hover {
     background: #f0f0f0;
}

footer {
     text-align: center;
     margin-top: 3rem;
}

footer h2 {
     display: inline-block;
     background: #fff;
     padding: 0.25em 0.5em;
     margin-bottom: 0.5em;
}

body:not(.human-world) footer h2 {
     background: none;
     color: #fff;
}

#channel-users address {
     display: inline-block;
     background: #fff;
     padding: 0.35em 0.5em;
     margin: 0.25em;
     font-style: normal;
}

body:not(.human-world) #channel-users address {
     background: none;
     font-size: 0.9375rem;
     color: #fff;
}

body:not(.human-world) #channel-users address a {
     text-decoration: underline;
}

#channel-users address:first-of-type {
     margin-left: 0;
}

main section h2,
footer h2 {
     font-size: 1rem;
     margin: 0 0 0.5em;
}

@media (width > 768px) {

     main section h2,
     footer h2 {
          font-size: 1.25rem;
     }

     footer {
          margin-top: 15rem;
     }
}

main section {
     text-align: center;
}


.page {
     position: relative;
}


.page__text {
     margin: var(--space-block) 0 0;
     padding: 0;
     max-width: var(--measure);
     font-size: 0.875rem;
}

@media (width > 768px) {
     .page__text {
          font-size: 1rem;
     }
}


#channel-blocks {
     margin-top: 5rem;
     display: grid;
     grid-template-columns: 1fr;
     grid-auto-rows: minmax(2rem, auto);
     row-gap: 1rem;
     position: relative;
     margin-bottom: 0.5rem;
}

body.human-world #channel-blocks {
     grid-auto-rows: minmax(16rem, auto);



}

#channel-blocks>li {
     transition: transform 400ms ease;
     z-index: var(--z, 1);
     width: 100%;
     max-width: 15rem;
     justify-self: center;
     align-self: start;
     margin-top: 0;
     transform: rotate(var(--r, 0deg));
     position: relative;
     background: var(--window-body);
     border: 0.1875rem outset var(--window-border);


}


/* When a block becomes active or stays selected, it rotates 4 degrees more than its original rotation */
#channel-blocks>li.active-block {
     transform: rotate(calc(var(--r, 0deg) + 40deg));

}

#channel-blocks>li.stays {
     transform: rotate(calc(var(--r, 0deg) + 4deg));
}


body:not(.human-world) #channel-blocks {
     grid-template-columns: 1fr 1fr;
}

body:not(.human-world) #channel-blocks>li {
     z-index: 1;
     background: transparent;
     border: none;
     filter: invert(var(--media-world-invert));
     max-width: 100%;
     font-size: 0.65rem;
     transition: transform 200ms ease;
}

body:not(.human-world) #channel-blocks>li:hover {
     transform: rotate(var(--r, 0deg)) scale(1.08);
}

body:not(.human-world) #channel-blocks li>p:first-of-type {
     display: none;
}

body:not(.human-world) #channel-blocks li figure,
body:not(.human-world) #channel-blocks li .block-text,
body:not(.human-world) #channel-blocks li .block-embed,
body:not(.human-world) #channel-blocks li>p:not(:first-of-type),
body:not(.human-world) #channel-blocks li>video,
body:not(.human-world) #channel-blocks li>audio {
     background: transparent;
     opacity: 0.65;
}

body:not(.human-world) #channel-blocks li .block-text,
body:not(.human-world) #channel-blocks li>p a {
     font-size: 0.65rem;
}

body:not(.human-world) #channel-blocks li .block-text {
     max-width: 32ch;
     padding: 0.75rem;
}




body:not(.human-world) #channel-blocks>li.block--image {
     display: none;
}

/* When its dream world show only images */
body.human-world #channel-blocks>li:not(.block--image) {
     display: none;
}


/* I created a rotation system where every 7 blocks receive a specific rotation value. The pattern repeats every 7 elements, creating a structured but organic collage effect. Each block gets a rotation stored in a CSS variable, which is later used in the transform. */
#channel-blocks>li:nth-child(7n+1) {
     --r: -150deg;
}

#channel-blocks>li:nth-child(7n+2) {
     --r: 3deg;
}

#channel-blocks>li:nth-child(7n+3) {
     --r: -4deg;
}

#channel-blocks>li:nth-child(7n+4) {
     --r: 2deg;
}

#channel-blocks>li:nth-child(7n+5) {
     --r: -3deg;
}

#channel-blocks>li:nth-child(7n+6) {
     --r: 4deg;
}

#channel-blocks>li:nth-child(7n+7) {
     --r: -8deg;
}

#channel-blocks>li:nth-child(7n) {
     --r: 5deg;
}

/* Dream World: no rotation, blocks centered; label at bottom; Tiffany font — only for image blocks */
body.human-world #channel-blocks>li.block--image,
body.human-world #channel-blocks>li.block--image.active-block,
body.human-world #channel-blocks>li.block--image.stays {
     --r: 0deg;
     transform: rotate(0deg);
     display: flex;
     flex-direction: column-reverse;
     font-family: "adobe-handwriting-tiffany", sans-serif;
     font-size: 1.25rem;
}



@media (width > 768px) {
     body.human-world #channel-blocks {
          grid-template-columns: 1fr 1fr 1fr;
          justify-items: center;
          margin-top: 13rem;
          max-width: min(100%, 72rem);
          margin-left: auto;
          margin-right: auto;
          row-gap: 5rem;
     }

     body.human-world #channel-blocks>li.block--image {
          max-width: 17rem;
          font-size: 1.5rem;
     }

     body.human-world #channel-blocks li>p:first-of-type {
          font-size: 1.4rem;
          padding: 1rem 1.25rem;
     }

     body.human-world #channel-blocks>li:nth-child(3n+1) {
          grid-column: 1;
          justify-self: center;
          margin-top: 1.5rem;
     }

     body.human-world #channel-blocks>li:nth-child(3n+2) {
          grid-column: 2;
          justify-self: center;
          margin-top: 1.5rem;
     }

     body.human-world #channel-blocks>li:nth-child(3n) {
          grid-column: 3;
          justify-self: center;
          margin-top: 1.5rem;
     }
}


@media (width > 768px) {

     #channel-blocks {
          margin-top: 16rem;
          grid-template-columns: 1fr 1fr;
          grid-auto-rows: minmax(20rem, auto);
          /* column-gap: 0rem;
          row-gap: 2rem; */
     }

     #channel-blocks>li {
          max-width: 23rem;
          margin-top: 0;
     }

     #channel-blocks>li:nth-child(odd) {
          grid-column: 1;
          justify-self: end;
     }

     #channel-blocks>li:nth-child(even) {
          grid-column: 2;
          justify-self: start;
     }

     body:not(.human-world) #channel-blocks {
          grid-template-columns: 1fr 1fr 1fr 1fr;
     }

     /* grid column set to auto makes the blocks being able to cover for the spaces that the images were leaving when hidden in the real world */
     body:not(.human-world) #channel-blocks>li:nth-child(odd),
     body:not(.human-world) #channel-blocks>li:nth-child(even) {
          grid-column: auto;
          justify-self: center;
     }

     body:not(.human-world) #channel-blocks>li {
          max-width: 38rem;
     }
}


#channel-blocks li figure figcaption {
     display: none;
}


#channel-blocks li>p:first-of-type {
     margin: 0;
     padding: 0.375rem 0.625rem;
     background: var(--window-titlebar);
     font-size: 0.75rem;
     border-bottom: 0.0625rem solid var(--window-border);
}

body.human-world #channel-blocks li>p:first-of-type {
     padding: 0.75rem 1rem;
     font-size: 1.15rem;
     background: #ffffff;
}


#channel-blocks li figure,
#channel-blocks li .block-text,
#channel-blocks li .block-embed,
#channel-blocks li>p:not(:first-of-type),
#channel-blocks li>video,
#channel-blocks li>audio {
     margin: 0;
     padding: var(--space-block);
     background: var(--window-body);
}

#channel-blocks li .block-text {
     text-align: left;
}


main,
header,
footer,
#channel-blocks {
     max-width: 100%;
}

main img,
main video,
main iframe,
main audio,
#channel-blocks img,
#channel-blocks video,
#channel-blocks iframe,
#channel-blocks audio {
     max-width: 100%;
     height: auto;
     display: block;
}


main img,
#channel-blocks img {
     width: 100%;
     max-width: 100%;
}


@media (width > 768px) {

     #channel-blocks li figure img {
          width: 100%;
          max-width: min(100%, 35rem);
     }

     main img,
     #channel-blocks img {
          width: auto;
          max-width: min(100%, 35rem);
     }
}

main video,
#channel-blocks video {
     max-width: min(100%, 50rem);
}

main iframe,
#channel-blocks iframe {
     width: 100%;
     max-width: min(100%, 35rem);
}


.block--audio .audio-ui {
     background: #bdbdbd;
     padding: 0.25rem;
     margin: var(--space-block);
}

.block--audio .audio-controls {
     display: flex;
     justify-content: center;
     gap: 0.75rem;
     background: #c9c9c9;
     padding: 1rem;
     border: 0.125rem inset #e3e3e3;
}

.block--audio .audio-btn {
     width: 2.25rem;
     height: 1.75rem;
     background: #cfcfcf;
     border: 0.2rem outset #bfbfbf;
     font-size: 1.25rem;
     cursor: pointer;
}

body:not(.human-world) .block--audio .audio-ui {
     background: rgba(255, 0, 0, 0.09);
     backdrop-filter: blur(7px);
     -webkit-backdrop-filter: blur(7px);
}

body:not(.human-world) .block--audio .audio-controls {
     background: rgba(255, 0, 0, 0.09);
     border-color: rgba(0, 0, 0, 0.8);
}

body:not(.human-world) .block--audio .audio-btn {
     background: rgba(1, 255, 1, 0.8);
     border-color: rgba(0, 0, 0, 0.8);
     color: #000;
}

.block--audio .audio-btn:active {
     border-style: inset;
}


.block--audio .audio-el {
     display: none;
}


body.human-world #channel-blocks>li.block--image,
body.human-world #channel-blocks>li.block--image.active-block,
body.human-world #channel-blocks>li.block--image.stays {
     --r: 0deg;
     transform: rotate(0deg);
     display: flex;
     flex-direction: column-reverse;
     font-family: "adobe-handwriting-tiffany", sans-serif;
     font-size: 1.25rem;
}




#block-dialog {
     background: none;
     border: none;
     padding: 0;
     width: fit-content;
     max-width: 90vw;
     position: fixed;
     inset: 0;
     margin: auto;
     translate: none;
}

#block-dialog[open] {
     display: grid;
     gap: 0;
}

#block-dialog img {
     max-width: 60vw;
     max-height: 60vh;
     display: block;
}

#block-dialog button {
     font-family: sans-serif;
     background: none;
     border: none;
     color: #fff;
     font-size: 1.5rem;
     cursor: pointer;
     justify-self: end;
     line-height: 1;
     padding: 0;
     margin-right: -1.5rem;
     margin-bottom: -6rem;
}

#block-dialog::backdrop {
     background-color: rgba(30, 30, 30, 0.94);
}

body.human-world #channel-blocks>li.block--image {
     cursor: pointer;
}

@media (width > 768px) {
     body.human-world #channel-blocks {
          grid-template-columns: 1fr 1fr 1fr;
          row-gap: 5rem;
     }

     body.human-world #channel-blocks>li:nth-child(3n+1) {
          grid-column: 1;
          justify-self: center;
          margin-top: 1.5rem;
     }

     body.human-world #channel-blocks>li:nth-child(3n+2) {
          grid-column: 2;
          justify-self: center;
          margin-top: 1.5rem;
     }

     body.human-world #channel-blocks>li:nth-child(3n) {
          grid-column: 3;
          justify-self: center;
          margin-top: 1.5rem;
     }
}