/* Style sheet for all the CRT and retro computer terminal effects in The Archivist's Corner */

/* NOTE TO SELF : CSS uses hyphens and not camelCase,
so I'm going to try following naming conventions for once */

/* CSS for ASCII art so it doesn't fail to render : */
.ASCII-art {
    font-family: monospace;
    /* ASCII art works best with monospaced fonts and fixed width font families */
    white-space: pre;
    /* In HTML, all white space characters (remember the white space property in the string module in Python?
    e.g. line feed, tab, spaces, new line) are all collapsed into a single space when rendered.
    The CSS property white-space lets you control the rendering of white spaces, the value 'pre' means
    that it will preserve white spaces characters, which is good for ASCII art. */

    /* NOW THAT I KNOW THAT pre-wrap EXISTS, ALL STANDARD TEXT USES THAT WHILE TRUE ASCII ART USES pre */
}

/* Default terminal colours : */
.crt-terminal {
    background-color:#000;
    /* background-image: radial-gradient(
        rgba(51, 255, 0, 0.69),
        black 120%
    ); */ /* I was considering using a radial gradient as a background image but it felt weird to me. */
    color: #33ff00;
    font-family: monospace;
}

/* Hyperlink related styling */
.crt-terminal a {
    color: #00ff33;
    font-weight: bolder;
    /* Make an outline around the element. It is invisble here by being having its alpha set to 0 by default */
    outline: rgba(51, 255, 51, 0);
    outline-offset: 20px;
    /* Make all transitions take 0.3 seconds */
    transition: 0.3s;
}

.crt-terminal a:hover{
  outline: 0.5pt dashed rgba(51, 255, 51, 0.77); /* make the outline visible by setting alpha to 0.75 */
  outline-offset: 6.9px;
}

.crt-terminal a:focus{
  outline: 0.5pt dashed rgba(51, 255, 51, 0.77);
  outline-offset: 6.9px;
}

/* Sub terminal box for containing the output of a fake CLI/window */
.terminal-area {
    background: rgb(11, 11, 11);
    padding: 6.9px;
}

.terminal-area > div {
    border: dashed 1.5px;
    padding: 5px;
}
/* Remember : The CSS combinator > is for all elements that are the descendents of a certain element,
which means that all elements within it get affected by the > combinator.
E.g. here, all divs within elements of the class 'terminal-area' have dashed borders */

/* Terminal list : */
.terminal-style-list {
    list-style: none; /* Remove the default bullets entirely so I can insert my own bullets */
    padding: 0;
    margin: 0;
}

.terminal-style-list > li {
    padding-left: 16px; /* Give space */
    padding-bottom: 3px;
}

/* Custom bullets. There is the list-style property for list bullets but it doesn't allow you to make custom bullets */
.terminal-style-list > li::before {
    content: ">>>";
    padding-right: 8px; /* Give space. Putting a space on the content property isn't enough if it isn't pre or pre-wrap, which it isn't */
    color: inherit;
} /* ::before is used */

.terminal-style-list > li::after {
	  content: ";";
    padding-left: 8px; /* Same as above */
}

/* Spritesheet to ASCII art animation CSS */
.ASCII-animation-output {
    /* font-size: 11px; */ /* Setting font size made everything fly off into space */
    line-height: 60%; /* This is ok however */
}

.sprite {
    display: none;
}

.ASCII-animation-container {
    overflow: hidden;
    display: inline-block;
}

/* CRT frame */
.crt-frame {
    pointer-events: none;
    overflow: hidden;
    z-index: 9000;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-image-source: url(./Home_page_assets/crt_frame.png);
    border-image-slice: 40 fill;
    border-image-outset: 0;
    filter: brightness(0) saturate(100%) invert(76%) sepia(15%) saturate(913%) hue-rotate(12deg) brightness(88%) contrast(85%);
    /* NOTE : The brightness(0) saturate(100%) at the start is for optimal results.
    It turns whatever you're filtering black, which is the most ideal colour for the other filters to convert one colour to the other. */
}

/* Image filters */
.terminal-image {
    filter: saturate(0%) contrast(1.25) brightness(2); /* Make the image monochrome */
}

/* Image tint experiments */
.tint {
    background-color: #33ff00;
    display: inline-block
}
/* Instead of applying a filter, the image is wrapped in a span that is then given an underlay in CSS.
Does not work with images with transparency in them however, so those must be dealt with in another way.
So, crt-frame doesn't use a tint because of that. */

.tint img {
    opacity: 0.5; /* Somehow it's in reverse for underlays. If you put 0.1, it becomes opaque. If you put 1, it instead becomes clear */
}

/* My CRT effect (modified) from CahRoS : */

/* NOTE: Due to me being unable to implement a CRT monitor bulge effect, I'm going to have to rely on just
a scanline and flicker effect to simulate a CRT. All the tutorials/things I find are either dead links or WebGL
stuff (I don't know how to use WebGL nor do I know what a SVG filter is, save me please). */

/* overlay inspired by https://www.w3schools.com/howto/howto_css_overlay.asp */
.overlay {/* This is the style for an overlay ontop of the main HTML page (that suprisingly works with canvases)*/
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.05); /* RGBA - Red, Green, Blue, Alpha (Remember?) */
    z-index: 2;
    display: block;
    /* You turn the overlay on by setting the display attribute to block (like above)
    You can turn the overlay off by setting the display to none.
    (use Javascript to turn it on and off if you really want to)*/
    pointer-events: none;
    /* I have no pointer events and I must click. (allows you to click through the overlay) */
}

/* Below is an amalgam of not one, but TWO different CRT effects I have mutilated and put back together and
repurposed for this.
1st one is from: https://medium.com/@dovid11564/using-css-animations-to-mimic-the-look-of-a-crt-monitor-3919de3318e2
2nd one is from: https://aleclownes.com/2017/02/01/crt-display.html */


/* @keyframes shows CSS you're defining the key frames of an animation */
@keyframes scanlines { /* No need for a flicker effect, this seems to already unintentionally do it */
    from {
      background-position: 0 0;
    }
    to {
      background-position: 0 50%;
    }
}
/* You can use from and to (like Phaser's tween but simpler and in CSS) to tween stuff. */

/* NOTE: Flicker animation was dumped as I did not like it AT ALL */

.crt {
    background: linear-gradient(rgba(0, 0, 0, 0.02) 50%, rgba(0, 0, 0, 0.25) 50%, rgba(51, 51, 51, 0.02) 50%, rgba(51, 51, 51, 0.25) 50%),
    linear-gradient(90deg, rgba(51, 255, 0, 0.06), rgba(51, 255, 51, 0.06), rgba(0, 255, 51, 0.06));
    /* Set the background colour using two linear gradients */
    background-size: cover; /* <-- Element should cover the whole screen */
    background-size: 100% 5px, 3px 100%; /* First controls width, second controls height (seperate controls for
    each item with commas, e.g. in this one first one before comma controls first linear gradient and the
    second one controls the second linear gradient) (DON'T FORGET) */
    animation: scanlines 5s infinite linear;
    /* Seperate animations you want to play (if you're playing multiple) using commas.
    Syntax for applying animations: animationName duration iterationCount timingFunction
    (iterationCount controls how many times an animation plays before stopping, the value infinite loops it
    forever)
    (timingFunction is like the ease function in Phaser's tween) */
}

/* (THE ITEM THIS NOTE WAS ATTACHED TO NO LONGER EXISTS)
If you put things without a comma (e.g. A B) it means it'll select all instances of B in instances of A */

/* The percent things are you telling the animation what to do upon reaching that percent of completion */
@keyframes scanlineSweep {
  0% {
    transform: translate3d(0, -200%, 0); /* Start out of bounds above*/
  }
  100% {
    transform: translate3d(0, 3000%, 0); /* 2000% should be well out of bounds for most screens... I hope... (CHANGED BECAUSE IT CAUSED PROBLEMS) */
  } /* NOTE: Increased to 3000% here due to a little issue occuring with 2000%, seems to have fixed it entirely.
  When originally set to 2000%, the sweeping scanline would always cause the web page to overflow on the y-axis as it went out of bounds.
  
  Yet when set to 3000%, it doesn't and everything works as normal.
  
  WHAT? Hey, at least it worked? */
}


/* .sweepingScanline */
.sweepingScanline {
  height: 100px;
  overflow: hidden;
  z-index: 8;
  background: linear-gradient(
    0deg, /* <-- This is important, without it, the gradient appears flipped */
      rgba(0, 0, 0, 0) 0%,
      rgba(255, 255, 255, 0.2) 10%,
      rgba(0, 0, 0, 0.1) 100%
  );
  opacity: 0.3;
  background-size: 100% 100px;
  position: fixed;
  /* position: absolute; works, but lacks one thing.
  It doesn't cover the whole page if I reload and the initial size and new size are different.
  The solution?
  position: fixed; Works like a charm. */
  bottom: 100%;
  animation: scanlineSweep 12s linear infinite; /* Increased to 12s from 10s because of animation change */
  pointer-events: none; /* allow me to click through it */
}