/*  Z-Index Index
 *    02: screen background
 *    03: screen text
 *    45: phosphor scanlines
 *    46: phosphor mask
 *    48: crt scanflick
 *    49: crt flicker
 *    50: tv svg overlay
 *    55: tv button
 */  
/* variables */
  :root {
    --tv-brightness: 1;
    --tv-saturation: 1;
    --dot-multiplier: 1;
    --dot-size: calc(100% / 768);
    --phosphor-opacity: 0.1;
    --mask-opacity: 0.1;
    --scanflickDuration: .9s;
    --redP: -49.723%, -50.382%;
    --greenP: -50.813%, -49.739%;
    --blueP: -50.275%, -50.884%;
  }

/* base */
  @font-face { font-family: "avaluna"; src: url("../fonts/avaluna.ttf"); font-weight: normal; font-style: normal; }
  input { display: none; }
  .clickthrough { pointer-events: none; }
  html { font-size: 1px; }
  body {
    background: #000000;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    position: relative;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
  }

/* screen */
  #tv {
    aspect-ratio: 4 / 3;
    position: relative;
    overflow: hidden;
  }
  @media (max-aspect-ratio: 4/3) /* portrait */  {
    #tv {
      width: 100vmin;
    }
  }
  @media (min-aspect-ratio: 4/3) /* landscape */ { 
    #tv {
      height: 100vmin;
    }
  }
  #tv-overlay {
    position: absolute;
    z-index: 50;
    width: calc(100% + 1px); 
    height: calc(100% + 1px); 
    margin: 0;
    padding: 0;
    box-shadow: 0px 0px 8vmin 4vmin rgba(0,0,0,0.6) inset;
  }
  #screen {
    position: relative;
    width: calc(100% - 2em);
    height: calc(100% - 2em);
    margin: 1em;
    background: #101010;
  }

/* content */
  #content {
    width: 100%;
    height: 100%;
    background: #101010;
  }
  #background {
    position: absolute;
    z-index: 2;
    width: 100%;
    height: 100%;
    background: url("../media/little-prince.jpg");
    background-size: contain;
    filter: blur(1.2px);
  }
  #text {
    z-index: 3;
    position: relative;
    width: 1px;
    height: 1px;
    top: 50%;
    left: 50%;
  }
  .text {
    text-align: center;
    white-space: pre;
    font-family: "avaluna";
    font-size: 18vmin;
    padding: 0;
    position: absolute;
    opacity: 0.6;
    mix-blend-mode: lighten;
    transform: translate(-50%, -50%);
  }
  .text::before, .text::after {
    content: attr(data-text);
    position: absolute;
    width: 105%;
    opacity: 0.8;
    transform: translateX(-2.5%);
  }
  #r {
    color:#f00;
    animation: channelR 62s cubic-bezier( 0.80, -0.01, 0.20, 1.00 ) infinite;
    filter: blur(0.5px) drop-shadow(0 0px 3px #ff0000A0);
  }
  #g {
    color:#0f0;
    animation: channelG 56s cubic-bezier( 0.80, -0.01, 0.20, 1.00 ) infinite;
    filter: blur(0.5px) drop-shadow(0 0px 3px #00ff00A0);
  }
  #b {
    color:#00f;
    animation: channelB 60s cubic-bezier( 0.80, -0.01, 0.20, 1.00 ) infinite;
    filter: blur(0.5px) drop-shadow(0 0px 3px #0000ffA0);
  }
  #w {
    opacity: 0.9;
    color:#ffffffff;
    filter: blur(3px);
  }

  .text span {
    animation: paths 180s step-end infinite;
  }

  .text::before {
    animation: paths 59s step-end infinite, opacity 58s step-end infinite,
      font 54s step-end infinite, movement 2s step-end infinite;
  }

  .text::after {
    animation: paths 58s step-end infinite, opacity 57s step-end infinite,
      font 57s step-end infinite, movement 3s step-end infinite;
  }

  @keyframes paths {
    0% {
      clip-path: polygon(
        0% 43%,
        83% 43%,
        83% 22%,
        23% 22%,
        23% 24%,
        91% 24%,
        91% 26%,
        18% 26%,
        18% 83%,
        29% 83%,
        29% 17%,
        41% 17%,
        41% 39%,
        18% 39%,
        18% 82%,
        54% 82%,
        54% 88%,
        19% 88%,
        19% 4%,
        39% 4%,
        39% 14%,
        76% 14%,
        76% 52%,
        23% 52%,
        23% 35%,
        19% 35%,
        19% 8%,
        36% 8%,
        36% 31%,
        73% 31%,
        73% 16%,
        1% 16%,
        1% 56%,
        50% 56%,
        50% 8%
      );
    }
    5% {
      clip-path: polygon(
        0% 29%,
        44% 29%,
        44% 83%,
        94% 83%,
        94% 56%,
        11% 56%,
        11% 64%,
        94% 64%,
        94% 70%,
        88% 70%,
        88% 32%,
        18% 32%,
        18% 96%,
        10% 96%,
        10% 62%,
        9% 62%,
        9% 84%,
        68% 84%,
        68% 50%,
        52% 50%,
        52% 55%,
        35% 55%,
        35% 87%,
        25% 87%,
        25% 39%,
        15% 39%,
        15% 88%,
        52% 88%
      );
    }
    30% {
      clip-path: polygon(
        0% 53%,
        93% 53%,
        93% 62%,
        68% 62%,
        68% 37%,
        97% 37%,
        97% 89%,
        13% 89%,
        13% 45%,
        51% 45%,
        51% 88%,
        17% 88%,
        17% 54%,
        81% 54%,
        81% 75%,
        79% 75%,
        79% 76%,
        38% 76%,
        38% 28%,
        61% 28%,
        61% 12%,
        55% 12%,
        55% 62%,
        68% 62%,
        68% 51%,
        0% 51%,
        0% 92%,
        63% 92%,
        63% 4%,
        65% 4%
      );
    }
    45% {
      clip-path: polygon(
        0% 33%,
        2% 33%,
        2% 69%,
        58% 69%,
        58% 94%,
        55% 94%,
        55% 25%,
        33% 25%,
        33% 85%,
        16% 85%,
        16% 19%,
        5% 19%,
        5% 20%,
        79% 20%,
        79% 96%,
        93% 96%,
        93% 50%,
        5% 50%,
        5% 74%,
        55% 74%,
        55% 57%,
        96% 57%,
        96% 59%,
        87% 59%,
        87% 65%,
        82% 65%,
        82% 39%,
        63% 39%,
        63% 92%,
        4% 92%,
        4% 36%,
        24% 36%,
        24% 70%,
        1% 70%,
        1% 43%,
        15% 43%,
        15% 28%,
        23% 28%,
        23% 71%,
        90% 71%,
        90% 86%,
        97% 86%,
        97% 1%,
        60% 1%,
        60% 67%,
        71% 67%,
        71% 91%,
        17% 91%,
        17% 14%,
        39% 14%,
        39% 30%,
        58% 30%,
        58% 11%,
        52% 11%,
        52% 83%,
        68% 83%
      );
    }
    76% {
      clip-path: polygon(
        0% 26%,
        15% 26%,
        15% 73%,
        72% 73%,
        72% 70%,
        77% 70%,
        77% 75%,
        8% 75%,
        8% 42%,
        4% 42%,
        4% 61%,
        17% 61%,
        17% 12%,
        26% 12%,
        26% 63%,
        73% 63%,
        73% 43%,
        90% 43%,
        90% 67%,
        50% 67%,
        50% 41%,
        42% 41%,
        42% 46%,
        50% 46%,
        50% 84%,
        96% 84%,
        96% 78%,
        49% 78%,
        49% 25%,
        63% 25%,
        63% 14%
      );
    }
    90% {
      clip-path: polygon(
        0% 41%,
        13% 41%,
        13% 6%,
        87% 6%,
        87% 93%,
        10% 93%,
        10% 13%,
        89% 13%,
        89% 6%,
        3% 6%,
        3% 8%,
        16% 8%,
        16% 79%,
        0% 79%,
        0% 99%,
        92% 99%,
        92% 90%,
        5% 90%,
        5% 60%,
        0% 60%,
        0% 48%,
        89% 48%,
        89% 13%,
        80% 13%,
        80% 43%,
        95% 43%,
        95% 19%,
        80% 19%,
        80% 85%,
        38% 85%,
        38% 62%
      );
    }
    0.22%,
    5.46%,
    30.35%,
    45.38%,
    76.33%,
    90.29% {
      clip-path: none;
    }
  }

  @keyframes movement {
    0% {
      top: 0;
      left: -.02vmin;
    }
    15% {
      top: .01vmin;
      left: .015vmin;
    }
    60% {
      top: .008vmin;
      left: -.012vmin;
    }
    75% {
      top: -.014vmin;
      left: .008vmin;
    }
    100% {
      top: .03vmin;
      left: .01vmin;
    }
  }

  @keyframes channelR {
    20% {
      transform: translate(-51.23%, -49.78%);
    }
    30% {
      transform: translate(-49.84%, -50.14%);
    }
    65% {
      transform: translate(-50.07%, -51.27%);
    }
    75% {
      transform: translate(-49.61%, -50%);
    }
    80% {
      transform: translate(-48.79%, -49.93%);
    }
    95% {
      transform: translate(-51.14%, -49.92%);
    }
    0%, 22%, 68%, 88% {
      transform: translate(-49.95%, -49.88%);
    }
  }

  @keyframes channelG {
    20% {
      transform: translate(-50.23%, -48.78%);
    }
    30% {
      transform: translate(-49.84%, -51.14%);
    }
    65% {
      transform: translate(-50.07%, -51.27%);
    }
    75% {
      transform: translate(-48.61%, -50%);
    }
    80% {
      transform: translate(-49.79%, -48.93%);
    }
    95% {
      transform: translate(-50.14%, -49.92%);
    }
    0%, 22%, 68%, 88% {
      transform: translate(-49.35%, -49.88%);
    }
  }

  @keyframes channelB {
    20% {
      transform: translate(-49.23%, -49.78%);
    }
    30% {
      transform: translate(-50.84%, -49.14%);
    }
    65% {
      transform: translate(-50.07%, -50.27%);
    }
    75% {
      transform: translate(-49.61%, -51%);
    }
    80% {
      transform: translate(-50%, -49.93%);
    }
    95% {
      transform: translate(-51.14%, -49.92%);
    }
    0%, 22%, 68%, 88% {
      transform: translate(-50.95%, -48.88%);
    }
  }

  @keyframes opacity {
    0% {
      opacity: 0.1;
    }

    5% {
      opacity: 0.6;
    }

    30% {
      opacity: 0.4;
    }

    45% {
      opacity: 0.6;
    }

    76% {
      opacity: 0.4;
    }

    90% {
      opacity: 0.3;
    }

    0.4%,
    5.6%,
    30.5%,
    45.35%,
    76.45%,
    90.4% {
      opacity: 0;
    }
  }

  @keyframes font {
    0% {
      font-weight: 100;
      color: #ff000020;
      filter: blur(3px);
    }

    20% {
      font-weight: 500;
      color: #ffffffff;
      filter: blur(0);
    }

    50% {
      font-weight: 300;
      color: #0000ff20;
      filter: blur(2px);
    }

    60% {
      font-weight: 700;
      color: #ffffffff;
      filter: blur(0);
    }

    80% {
      font-weight: 500;
      color: #00ff0020;
      filter: blur(6px);
    }
  }


/* crt */
  #phosphors {
    width: 100%;
    height: 100%;
    position: absolute;
  }
  #scanlines {
    image-rendering: pixelated;
    z-index: 45;
    opacity: var(--phosphor-opacity);
    filter: contrast(100) brightness(5)  blur(2px);
    mix-blend-mode: darken;
    position: absolute;
    width: 100%;
    height: 100%;
    background: url(../media/crt-rgbg.png);
    background-attachment: fixed;
    background-size: calc(var(--dot-multiplier) * var(--dot-size));
    background-position: top left;
    background-repeat: repeat;
  }
  #mask {
    image-rendering: pixelated;
    z-index: 46;
    opacity: var(--mask-opacity);
    filter: blur(0.7);
    mix-blend-mode: darken;
    position: absolute;
    width: 100%;
    height: 100%;
    background: url(../media/crt-mask.png);
    background-attachment: fixed;
    background-size: calc(var(--dot-multiplier) * var(--dot-size));
    background-position: top left;
    background-repeat: repeat;
  }
/* button */
  #button{
    display: block;
    position: absolute;
    z-index: 55;
    right: 5px;
    bottom: 10px;
    padding: 25px;
    cursor: pointer;
    &::after{
      content: "";
      display: block;
      position: absolute;
      transform: translate3d(-50%, -50%, 0);
      width: 10px;
      height: 10px;
      border-radius: 100%;
      border: 5px solid #202020;
    }
    &::before{
      content: "";
      display: block;
      position: absolute;
      transform: translate3d(-50%, -50%, 0);
      width: 10px;
      height: 10px;
      background:#A03010;
      border-radius: 100%;
      box-shadow: 0 0 10px 2px #A03010;
    }
  }
  #switch:checked~#button{
    &::before{
      background:#22ff55;
      box-shadow: 0 0 10px 2px #22ff55;
    }
  }
/* animations */
  #flicker { 
    z-index: 49;
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0;
    mix-blend-mode: lighten;
    background-color: rgb(255, 255, 255);
  }
  #scanflick , #scanflick::before, #scanflick::after {
    z-index: 48;
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0;
    mix-blend-mode: lighten;
  }
  #switch~#screen #scanflick { 
    content: none;
  }
  #switch~#screen #scanflick::before { 
    content: none;
  }
  #switch~#screen #scanflick::after { 
    content: none;
  }
  #switch~#screen #content {
    animation: turnOff 0.55s cubic-bezier(0.230, 1.000, 0.320, 1.000);
    animation-fill-mode: forwards;
  }
  #switch:checked~#screen #content {
    animation: turnOn 2s linear;
    animation-fill-mode: forwards;
  }
  #switch:checked~#screen #flicker {
    animation: flickW 10ms;
    animation-iteration-count: infinite;
    animation-delay: 1200ms;
  }
  #switch:checked~#screen #scanflick { 
    background-color: #FF0000;
    animation: flickR var(--scanflickDuration) linear;
    animation-iteration-count: infinite;
    animation-delay: 1200ms;
  }
  #switch:checked~#screen #scanflick::before { 
    content: "";
    background-color: #00FF00; 
    animation: flickG var(--scanflickDuration) linear;
    animation-iteration-count: infinite;
    animation-delay: 1200ms;
  }
  #switch:checked~#screen #scanflick::after { 
    content: "";
    background-color: #000000;
    animation: flickB var(--scanflickDuration) linear;
    animation-iteration-count: infinite;
    animation-delay: 1200ms;
  }
  @keyframes flickW {
    from {
      opacity: .02;
      filter: blur(100px);
    }
  }
  @keyframes flickR {
    from {
      transform: scale(1, 0.08) translate3D(0, -1000%, 0);
      filter: blur(100px);
      opacity: 0.02;
    }
    50% {
      filter: blur(130px);
      opacity: 0.005;
    }
    to {
      transform: scale(1, 0.04) translate3D(0, 1200%, 0);
      filter: blur(100px);
      opacity: 0.02;
    }
  } 
  @keyframes flickG {
    from {
      opacity: 1;
    }
    to {
      transform: scale(1, 1) translate3D(0, 30%, 0);
      filter: blur(100px);
      opacity: 1;
    }
  } 
  @keyframes flickB {
    from {
      transform: scale(1, 1) translate3D(0, -30%, 0);
      filter: blur(100px);
      opacity: 1;
    }
    to {
      transform: scale(1, 1) translate3D(0, -30%, 0);
      filter: blur(100px);
      opacity: 1;
    }
  } 
  @keyframes turnOn{
    0%{
      transform:scale(1,0.8) translate3d(0,0,0);
      filter:brightness(3);
      opacity:0.8;
    }
    8%{
      transform:scale(1,0.8) translate3d(0,100%,0);
    }
    8.1%{
      transform:scale(1,0.8) translate3d(0,-100%,0);
      opacity:0.9;
    }   
    15%{
      transform:scale(1.3,0.6) translate3d(0,100%,0);
      filter:brightness(3);
      opacity:0.5;
    }
    16%{
      transform:scale(1.3,0.5) translate3d(0,0,0);
      filter:brightness(3);
      opacity:0.5;
    }
    20%{
      transform:scale(1.1,1) translate3d(0,0,0);
      filter:contrast(0.4) brightness(0) saturate(3);
      opacity:0;
    }
    25%{
      transform:scale(1.05,1) translate3d(0,0,0);
      filter:contrast(0.85) brightness(0.9) saturate(3);
      opacity:0;
    }
    35%{
      transform:scale(1,1) translate3d(0,0,0);
      filter:contrast(0.92) brightness(1.1) saturate(2.7);
      opacity:0.2;
    }
    100%{
      transform:scale(1,1) translate3d(0,0,0);
      filter:contrast(1) brightness(var(--tv-brightness)) saturate(var(--tv-saturation));
      opacity:1;
    }
  }
  @keyframes turnOff{
    0%{
      transform:scale(1,1.3) translate3d(0,0,0);
      opacity:1;
    }
    60%{
      transform:scale(1,0.001) translate3d(0,0,0);
      filter:brightness(10);
    }
    100%{
      animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
      transform:scale(0.000,0.0001) translate3d(0,0,0);
      filter:brightness(50);
    }
  }