@font-face {
  font-family: 'JetBrainsMono-Regular';
  src: url('../fonts/JetBrainsMono/JetBrainsMono-Variable.woff2') format('woff2'),
       url('../fonts/JetBrainsMono/JetBrainsMono-Variable.woff') format('woff'),
       url('../fonts/JetBrainsMono/JetBrainsMono-Variable.ttf') format('truetype');
  font-weight: 400;
  font-display: swap;
  font-style: normal;
}

@font-face {
  font-family: 'anthony-master-regular';
  src: url('../fonts/anthony-master/Anthony.woff2') format('woff2'),
       url('../fonts/anthony-master/Anthony.woff') format('woff'),
       url('../fonts/anthony-master/Anthony.otf') format('opentype');
}


:root{
  --offwhite: #feffdc;
  --red-bright: #f10b0b;
  --red-dull:#5e0606;
  --off-white-low-opacity: #feffdcb8;
  --spacing: 2rem;
  --morespacing: 4rem;
  font-family: 'JetBrainsMono-Regular', monospace;
  font-size: 1.1rem;
  --text-pad: calc(var(--spacing)/2);
  --border-width-mobile: 0.08rem;
  --border-width-desktop: 0.1rem;
  --body-font: calc(var(--spacing)/2.5);
  --string-opacity: 0.8;
  --dimmer-opacity:0.5;
  --mobile-gap: calc(var(--spacing)*1.2);
  --button-spacing: calc(var(--morespacing)*0.75)
}

body{
    /* position: relative;  */
    padding: calc(var(--spacing)/8);
    background-color: var(--offwhite);
    color: var(--red-bright);
    font-size: var(--body-font);
}

/* CHANNEL GRID */

#channel-blocks {
  display: grid;
  grid-template-columns: repeat(4, 1fr); 
  gap: var(--mobile-gap); 
  list-style: none;
  padding: 0;
  margin: var(--spacing) 0;
  box-sizing: border-box;
  max-inline-size: 100%;
}

/* IMAGES START*/
.block-media {
  position: relative;
  display: inline-block; 
  height: auto;
  inline-size: 100%;
}

/* IMAGES END*/

/*TEXT BLOCK START*/

.text-block-content {
  font-size: var(--body-font);
  color: var(--red-bright);
  font-family: 'JetBrainsMono-Regular', monospace;
  background-color: var(--offwhite);
  z-index: 20;
  position: relative;
  padding: calc(var(--text-pad)/4);
  box-sizing: border-box;
  text-wrap: wrap;
}

/*TEXT BLOCK END*/

/* META DATA STYLES */

#channel-blocks li {
  padding: calc(var(--spacing)/8);
  block-size: auto; 
  align-self: start; 
  overflow: hidden; 
}

#channel-blocks img {
  inline-size: 100%;
  block-size: auto;
  display: block; 
  object-fit: cover;
}

#channel-blocks a {
  color: var(--red-bright);
  text-decoration: none;
}

#channel-blocks:hover {
  cursor: pointer;
}

#channel-description p:first-child{
  padding-block-end: var(--spacing);
}

/* BUTTONS */

#controls {
  display: flex;
  flex-wrap: nowrap; 
  overflow-x: auto; 
  overscroll-behavior-x: contain; /* Was searching how to create my nav for mobile, as Eric recommended I not wrap my buttons but make them scrollable instead. I found this on mdn: https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/overscroll-behavior . Prevents the user from accidentally swiping the whole web page "back" while scrolling the buttons */
  
  gap: var(--spacing);  
  inline-size: 100%;
  box-sizing: border-box;

  position: sticky; 
  inset-block-start: 0; 
  z-index: 30;
  
  background-color: var(--off-white-low-opacity); 
  padding-block: var(--text-pad); 
  margin-block-end: var(--spacing);
}

#controls::-webkit-scrollbar {
  display: none;
}
/* The horizontal scrollbar was looking ugly so I found out how to remove it: https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Selectors/::-webkit-scrollbar  */

#controls button{
  inline-size: var(--morespacing);
  padding-inline: var(--button-spacing)
}

button, .action-btn{
  all: unset; 
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--red-bright);
  block-size: var(--spacing);
  inline-size: 100%;
  box-sizing: border-box;
  transition: color 0.3s ease;
}

/* Because I recieved feedback that my boxed buttons seemed out of the design system, I needed to find a way to create them with broken lines - I felt that would connect well to the whole 'string' theme.  */

/* Then I decided to create 2 sets of borders (so they would be broken up) using pseudo elements.  */

/* Pseudo elements do confuse me, so when I got confused I asked Gemini for help. Gemini made it smoother by giving me the idea for the transition. */

/* Horizontal Lines (Block-axis / Top & Bottom) */
button::before, .action-btn::before{
  content: "";
  position: absolute;
  
  /* inset-block is top/bottom gap, inset-inline is left/right gap - written for my own memory*/
  inset-block: 0; 
  inset-inline: calc(var(--text-pad)/2); 
  
  border-block: var(--border-width-mobile) solid var(--red-bright);
  
  pointer-events: none;
  transition: inset 0.3s ease-in-out;
}

/* Vertical Lines (Inline-axis / Left & Right) */
button::after, .action-btn::after{
  content: "";
  position: absolute;
  
  inset-block: calc(var(--text-pad)/2); 
  inset-inline: 0; 
  
  border-inline: var(--border-width-mobile) solid var(--red-bright);
  
  pointer-events: none;
  transition: inset 0.3s ease-in-out;
}

/* HOVER STATE */
button:hover, .action-btn:hover{
  color: var(--red-bright);
}

button:hover::before, .action-btn:hover::before,
button:hover::after, .action-btn:hover::after {
  inset: 0;
}

.action-btn:active, .close-x-btn:active{
  background-color:var(--offwhite);
}

/* SPECIAL BUTTONS */
.special-btn p{
  font-style: italic;
}

.special-btn:active{
  background-color: var(--red-bright);
}

.special-btn p:active{
color: var(--offwhite);
}

/* FILTERS */

#channel-blocks {
   &.show-images {
    li {
      opacity: 0;  
      pointer-events: none;  
    }
    
    li.image-block {
      opacity: 1; 
      pointer-events: auto;
      transition: transform 0.5s ease-in-out;
    }
  }
}

#channel-blocks {
  &.show-text {
    li{
      display: none;
      pointer-events: none;  
    }
    li.text-block{
      display: block;
      pointer-events: auto;
    }
  }
}

#channel-blocks {
  &.show-links {
    li{
      opacity: 0;  
      pointer-events: none;  
    }
    
    li.link-block{
      opacity: 1; 
      pointer-events: auto;
    }
  }
}

#channel-blocks {
  &.show-audio {
    li{
      display: none;
      pointer-events: none;  
    }
    
    li.audio-block{
      display: block; 
      pointer-events: auto;
    }
  }
}

#channel-blocks {
  &.show-videos {
    li {
      display: none;  
      pointer-events: none;  
    }
    
    li.video-block {
      display: block;
      pointer-events: auto;
    }
  }
}

#channel-blocks {
  &.show-tangled {
    li {
      display: block; 
      pointer-events: auto;
      opacity: 1;
      transition: transform 0.5s ease-in-out;
    }
  }
}


/* FLOATING ANIMATION */
@keyframes float {
    0% {
        transform: translateY(0rem);
    }
    50% {
        transform: translateY(-1rem); 
    }
    100% {
        transform: translateY(0rem); 
    }
}

/* I had an appointment with the code tutor to discuss how to do the random animations and transforms, he suggested using this new n child property I didn't know about called An + B. Basically it works the same way, but you can plug in your n-number into an equation this time for more advanced calculations. */

/* https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Selectors/:nth-child#Example_selectors */

/* TARGETTING RANDOM BLOCKS  */

#channel-blocks li:nth-child(5n + 2) {
    animation: float 4s ease-in-out infinite;
}

#channel-blocks li:nth-child(7n + 4) {
    animation: float 5.5s ease-in-out infinite;
    animation-delay: 1.2s;
}

#channel-blocks li:nth-child(11n) {
    animation: float 6s ease-in-out infinite;
    animation-delay: 0.5s;
}

#channel-blocks li:hover {
    animation-play-state: paused;
}

/* TANGLED STATE: Scattering the blocks */

#channel-blocks.show-tangled li:nth-child(2n +3) {
  transform: translate(90%, -40%) rotate(30deg);
}

#channel-blocks.show-tangled li:nth-child(3n +8 ) {
  transform: translate(-65%, 80%) rotate(-60deg);
}

#channel-blocks.show-tangled li:nth-child(5n + 2) {
  transform: translate(42%, -54%) rotate(10deg);
}

#channel-blocks.show-tangled li:nth-child(7n + 4) {
  transform: translate(-25%, -60%) rotate(55deg);
}

#channel-blocks.show-tangled li:nth-child(2n + 6) {
  transform: translateY(50) rotate(80deg);
}


/* GENERAL STYLES */

ul{
  padding-block-end: var(--spacing);
  display: flex;
  flex-direction: column; 
  align-items: center;    
  text-align: center;    
  gap: var(--spacing);    

}

em{
  font-style: italic;
}

h1{
  font-size:calc(var(--spacing)*2);
  font-family: 'anthony-master-regular', serif;
  text-transform: lowercase;
  margin-inline: auto;
  color: var(--red-bright);
  text-align: center;
  line-height: 3rem;
  padding-block-end: calc(var(--morespacing)*1.5);
  padding-block-start: var(--spacing);
}

audio {
	block-size: revert;
	inline-size: 100%;
}

/* CONNECTION LINES */

/* SVG CONTAINER */
#connection-lines {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  inline-size: 100%;
  block-size: 100%;
  z-index: 10; 
  pointer-events: none; 
  overflow: visible;
}


/* For my lines coming in animation, I found out how to do this using stroke dasharray: https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/stroke-dasharray . I wanted to do this because I wanted the concept of the strings to feel more dynamic, chaotic and interactive. It is partnered with intersection observer in my JS. I found out how to do this from MDN. */

/* LINES  */
.connection-line {
  stroke: var(--red-bright); 
  stroke-width: var(--border-width-mobile);
  opacity: var(--string-opacity); 
  
  stroke-dasharray: 3000;
  stroke-dashoffset: 3000;
  transition: stroke-dashoffset 1.5s ease-in-out;
}

/* ANIMATION TRIGGER */
.connection-line.is-visible {
  stroke-dashoffset: 0;
}


/* AUDIO PLACEHOLDER */
.audio-placeholder {
  background-color: white;
  inline-size: 100%; 
  aspect-ratio: 1 / 1; 
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--red-bright); 
}

/* MODAL STYLES */

#channel-dialog[open] {
  display: grid;
  place-items: center; 
  place-content: center; 
}

dialog {
  position: fixed; 
  inset: 0; /*Instead of writing top, bottom, left, right = 0, inset is logical and shorter */
  margin: auto; 
  inline-size: auto; 
  inline-size: 80vw; 
  max-block-size: 80vh;
}

.dialog-content, .dialog-grid, .head-content, .head-grid {
  inline-size: 100%;
  max-inline-size: 100%;
  margin: auto;
}

#dialog-img{
  border-block-start: var(--border-width-mobile) solid var(--red-bright);
  border-block-end: var(--border-width-mobile) solid var(--red-bright);
  padding-block: var(--text-pad);
  max-inline-size: 100%
  
}

.dialog-grid, .head-grid{
  display: flex;
  flex-direction: column;
  padding: var(--text-pad);
  margin: auto;
  list-style: none;
  background-color:var(--red-dull);
  max-inline-size: 80%;
  box-sizing: border-box;
}

.row-header, .header-header{
  display: flex;
  justify-content: space-between;
  inline-size: 100%; 
  align-items: center; 
  box-sizing: border-box;
}

.row-media{
  border-inline-start: var(--border-width-mobile) solid var(--red-bright);
  border-inline-end: var(--border-width-mobile) solid var(--red-bright);
  padding-inline: var(--text-pad);
  inline-size: auto;
}

.row-desc #dialog-title{
  color: var(--offwhite);
}
  
iframe{
  border-block-start: var(--border-width-mobile) solid var(--red-bright);
  border-block-end: var(--border-width-mobile) solid var(--red-bright);
}

#dialog-title{
  color: var(--off-white);
}


/* I'm so happy I figured out the tiktok sizing thing myself with trial and error!! */
/* The scale thing mildly worked, but my dialog was still super huge, so I had to find a way to target that separately */
/* For the :has thing i did not use an LLM, instead just wanted to know if there was a way we could target backwards, like the parent of a child (because I vaguely remember discussing this in class last semester), then found this on mdn: https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Selectors/:has  */

dialog:has(#dialog-embed iframe[src*="tiktok"]) {
  max-block-size: 50%;
}

#dialog-embed iframe[src*="tiktok"] {
  block-size: auto;
  inline-size: 100%;
  aspect-ratio: 9/16; 
  border-radius:0;
}

#dialog-embed audio{
  inline-size: calc(var(--morespacing)*4); /* For some reason, percentages wasn't working here */
  display: block;
  block-size: calc(var(--morespacing));
  border-block-start: var(--border-width-mobile) solid var(--red-bright);
  border-block-end: var(--border-width-mobile) solid var(--red-bright);
  padding-block: var(--text-pad);

}

#dialog-title {
  padding-inline: var(--spacing); 
}

li#dialog-media-container.row-media{
  scale: 80%;
  padding-inline: var(--text-pad);
}

iframe.embedly-embed{
  padding-block: var(--text-pad);
}
.close-x-btn{
  padding: calc(var(--text-pad)/2);
  font-size: var(--text-pad);
  inline-size: auto; 
  block-size: auto;
}

.action-btn{
  padding: var(--text-pad);
}

.hidden {
    display: none;
}

.empty-state {
    opacity: 0.5;
}

dialog::backdrop {
  background-color: var(--red-bright);
  opacity: var(--dimmer-opacity);
}
/* MODAL STYLES END*/

/* MODAL STRING*/

dialog {
  /* Ensure the line can shoot out past the modal boundaries without getting cut off */
  overflow: visible; 
}

dialog::before {
  content: "";
  position: absolute;
  
  inset-inline-start: 50%;
  transform: translateX(-50%);
  
  /* Large numbers not magic numbers, have to make it go across the screen */
  inset-block-start: -100vh; 
  block-size: 300vh; 
  
  inline-size: var(--border-width-desktop);
  background-color: var(--red-bright);
  
  z-index: -1; 
  pointer-events: none; 
}

/* COLOPHON SPECIFIC STYLES */

.head-grid{
  gap:0;
  padding-inline: var(--spacing);
}

.head-grid h2 {
    margin: 0;
}

.head-grid > li {
    padding-block: calc(var(--text-pad) * 1.5);
    inline-size: 100%;
    text-align: center;
}

.head-grid p{
  color: var(--offwhite);
}

.head-grid a {

    text-decoration: underline;
    text-decoration-thickness: var(--border-width-mobile);
}

.head-grid a:hover {
    color: var(--offwhite);
}

button#open-colophon-btn.special-btn{
  inline-size: 50%;
  justify-self: center;
  block-size: 10vh;
}

#open-colophon-btn.special-btn p{
  font-family: 'anthony-master-regular';
  font-size: calc(var(--morespacing)*1.2);
  font-style: initial;  
}

#open-colophon-btn {
  animation: float 4s ease-in-out infinite;
}

#open-colophon-btn.special-btn:before, #open-colophon-btn.special-btn:after{
  border:0;
} 

h1#title{
  padding-block-start: 0;
}

#channel-users{
  padding-block-end: 0;
  color: var(--red-bright);
}

#channel-count, #last-updated{
  color: var(--offwhite);
}

/* --- THE CONNECTING LINE IN HEADER --- */

h1#title {
  position: relative; 
}

h1#title::after {
  content: "";
  position: absolute;
  
  inset-inline-start: 50%;
  transform: translateX(-50%);
  
  inset-block-end: calc(var(--text-pad)/4); 
  inline-size: calc(var(--border-width-desktop)*2); 
  block-size:var(--morespacing); 
  background-color: var(--red-bright);
}

/* OVERALL */
html{
  padding: calc(var(--spacing)/4);
}

@media (width > 700px) {

  :root{
    font-size: 1rem;
  }

/* BASE STYLES */
   body {
    display: grid;
    grid-template-columns: min-content 1fr; 
    grid-template-rows: max-content max-content 1fr; 
    align-items: start; 
    gap: var(--morespacing);
    padding: var(--spacing);
    box-sizing: border-box;
    min-block-size: 100vh;
    overflow-x: hidden; 
  }

  main {
    grid-column: 1;
    grid-row: 1;
    position: relative; 
    display: flex;
    flex-direction: column;
    gap: var(--morespacing);
  } 

/* TITLE STRINGS */
  h1 {
    inline-size: min-content;
    text-align: left;
    margin: 0;
    padding: 0;
    font-size: calc(var(--spacing) * 2.5); 
    position: relative; 
  }

  /* 1. Horizontal String  */
  h1#title::before {
    content: "";
    position: absolute;
    inset-block-start: 50%; 
    inset-inline-start: 100%; 
    
    /* This calculation was given by Gemini. I just could not find the right inline size on my own, it kept breaking. I wish there was a simpler way to do it but was short on time.*/

    inline-size: calc(100vw - 100% - (var(--spacing) * 3.5)); 
    
    block-size: var(--border-width-desktop); 
    background-color: var(--red-bright);
    z-index: 10;
    pointer-events: none; 
  }

  h1#title::after {
    content: none; 
  }

  /* 2. Vertical String (Starts from title, stops exactly at controls) */

  /* I think I stopped using this */
  /* main::after {
    content: "";
    position: absolute;
    inset-block-start: calc(var(--spacing) * 3); 
    
    inset-block-end: calc(var(--morespacing) * -1); 
    
    inset-inline-start: 50%;
    transform: translateX(-50%);
    inline-size: var(--border-width-desktop); 
    background-color: var(--red-bright);
    z-index: -1;
  } */

  main ul {
    display: flex;
    flex-direction: column;
    gap: var(--spacing);
    padding: 0;
    margin: 0;
    inline-size: 100%;
  }

  main li {
    inline-size: 100%;
    box-sizing: border-box;
    text-align: left;
    color: var(--red-bright);
    padding: var(--text-pad);
    flex: unset;
    border-radius: 0;
  }

/* BUTTONS */

  #controls {
    grid-column: 1;
    grid-row: 2;
    align-self: start;
    
    position: sticky;
    top: var(--spacing);
    z-index: 40;
    
    display: flex;
    flex-direction: column; 
    align-items: stretch; 
    gap: var(--text-pad);
    
    margin: 0;
    padding: 0;
    inline-size: 100%;
  }

  #controls button, 
  #controls .action-btn {
    inline-size: 100%;
    padding-inline: 0; 
  }
  
  /* THE PLUS SIGN - RIGHT TOP CORNER */
  button#open-colophon-btn.special-btn {
    position: fixed; 
    inset-block-start: var(--spacing); 
    inset-inline-end: var(--spacing);  
    
    inline-size: max-content; 
    block-size: max-content;
    justify-self: end; 
    margin: 0; 
    
    z-index: 50; 
  }

/* BLOCKS GRID */
  section {
    grid-column: 2;
    grid-row: 1 / span 3;
    inline-size: 100%;
    padding-block-start: calc(var(--morespacing) * 2.5); 
  }

  #channel-blocks {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--morespacing);
    inline-size: 100%;
    margin: 0;
    padding: 0;
  }

  #channel-blocks li {
    padding: 0;
    inline-size: 100%;
    block-size: auto;
    aspect-ratio: 1 / 1; 
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
  }

  #channel-description, #channel-count, #last-updated, #channel-users{
    padding: 0;
  }

/* SPECIFIC */

  dialog {
    inline-size: 50vw; 
  }

  #dialog-img {
    inline-size: 100%;       
    max-block-size: 62vh;         
  }
}

@media (width > 1000px) {

  :root{ 
    font-size: 1.2rem;
  }

  dialog {
    inline-size: 60vw; 
    block-size: 80vh;
  }
    #channel-blocks {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
  }
}


@media (width > 1400px) {

  #channel-blocks {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
  }
  
}

/* Removing animation for mobile because it doesnt seem to be working. */
@media (width < 700px) {
.connection-line {
        stroke-dashoffset: 0 !important; 
        transition: none !important; 
        animation: none !important;
    }

}

/* I have all the extra media queries specifically to tackle the number of blocks per viewport, it wasnt responsive enough with just 3. */