/* VHS Rewind — a taped-off-TV VHS in an 80s wood-panelled den: browns and olive greens,
   scanlines, a rolling tracking band, ▶ PLAY, rainbow tape-label stripes and a VCR clock nobody
   ever set. */
@layer meez-preset {
  #meez-profile {
    background:
      repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.3) 0 1px, transparent 1px 3px),
      linear-gradient(
        transparent,
        rgba(255, 230, 190, 0.06) 30%,
        rgba(255, 245, 225, 0.14) 50%,
        rgba(255, 230, 190, 0.06) 70%,
        transparent
      )
      0 -160px / 100% 160px no-repeat,
      radial-gradient(ellipse at 50% 35%, #3b2918, #160e07 75%);
    background-attachment: fixed;
    /* The rainbow stripe off an 80s blank-tape sleeve, across the top. */
    box-shadow:
      inset 0 3px #e4002b,
      inset 0 6px #ff7f00,
      inset 0 9px #ffd400,
      inset 0 12px #00a651,
      inset 0 15px #0072ce;
    padding-top: 30px;
    color: #f5ecd7;
    font-family: Monaco, "Lucida Console", "Courier New", monospace;
    animation: u-vhs-tracking 9s linear infinite;
  }
  /* The tracking band rolls down the screen, then the picture holds for a few seconds. */
  @keyframes u-vhs-tracking {
    0% {
      background-position:
        0 0,
        0 -160px,
        0 0;
    }
    55%,
    100% {
      background-position:
        0 0,
        0 calc(100% + 160px),
        0 0;
    }
  }
  #meez-profile a:not(.meez-btn) {
    color: #ffd36b;
  }
  #meez-profile .nametext {
    color: #fff4dc;
    font:
      26px / 1.15 Audiowide,
      "Arial Black",
      sans-serif;
    text-shadow:
      -2px 0 rgba(255, 70, 40, 0.8),
      2px 0 rgba(140, 200, 70, 0.75);
    animation: u-vhs-jitter 6s steps(1, end) infinite;
  }
  /* The VCR's on-screen display. */
  #meez-profile .nametext::before {
    content: "\25B6\FE0E  PLAY";
    display: block;
    margin-bottom: 8px;
    font:
      16px / 1 "Press Start 2P",
      monospace;
    text-shadow: 2px 2px #000;
  }
  @keyframes u-vhs-jitter {
    0%,
    91%,
    100% {
      transform: none;
    }
    92% {
      transform: translateX(-3px) skewX(-8deg);
    }
    94% {
      transform: translateX(3px);
    }
    96% {
      transform: translateX(-1px) skewX(4deg);
    }
  }
  /* 12:00 on an amber clock, blinking, forever. */
  #meez-profile .profileContainer::after {
    content: "12:00";
    display: block;
    width: max-content;
    margin: 16px 0 0 auto;
    padding: 6px 10px;
    background: #000;
    border: 2px solid #3a2a1c;
    border-radius: 3px;
    color: #ffb000;
    font:
      16px / 1 "Press Start 2P",
      monospace;
    text-shadow: 0 0 6px rgba(255, 176, 0, 0.7);
    animation: u-vhs-blink 1s steps(1, end) infinite;
  }
  @keyframes u-vhs-blink {
    50% {
      color: transparent;
      text-shadow: none;
    }
  }
  /* Boxes are olive green, on the brown. */
  #meez-profile .userProfile,
  #meez-profile .contactTable,
  #meez-profile .userProfileURL,
  #meez-profile .interestsAndDetails,
  #meez-profile .userProfileDetail,
  #meez-profile .userProfileSchool,
  #meez-profile .userProfileCompany,
  #meez-profile .extendedNetwork,
  #meez-profile .creatorBox,
  #meez-profile .latestBlogEntry,
  #meez-profile .blurbs,
  #meez-profile .friendSpace,
  #meez-profile .friendsComments,
  #meez-profile .profileSong,
  #meez-profile .musicPlayer,
  #meez-profile .subPage,
  #meez-profile .blogEntry {
    background: linear-gradient(rgba(255, 255, 255, 0.07), transparent 45%), #464d1e;
    border: 2px solid #1c1209;
    border-radius: 4px;
    box-shadow: 0 0 16px rgba(255, 180, 80, 0.14);
    color: #f5ecd7;
  }
  /* Headers are tape labels: cream paper, marker, rainbow stripe. */
  #meez-profile .contactTable th,
  #meez-profile .interestsAndDetails th,
  #meez-profile .userProfileDetail th,
  #meez-profile .userProfileSchool th,
  #meez-profile .userProfileCompany th,
  #meez-profile .sectionHead {
    background: #f4efe0;
    border-color: #1c1209;
    color: #141414;
    padding-bottom: 15px;
    box-shadow:
      inset 0 -2px #0072ce,
      inset 0 -4px #00a651,
      inset 0 -6px #ffd400,
      inset 0 -8px #ff7f00,
      inset 0 -10px #e4002b;
  }
  #meez-profile .whitetext12,
  #meez-profile .sectionHead .orangetext15,
  #meez-profile .sectionHead .btext {
    color: #141414;
    font:
      18px / 1.2 "Sedgwick Ave Display",
      "Comic Sans MS",
      cursive;
  }
  #meez-profile .sectionHead a {
    color: #b0001f;
  }
  #meez-profile .orangetext15 {
    color: #ffb347;
    font-family: Audiowide, "Arial Black", sans-serif;
  }
  #meez-profile .blogTitle,
  #meez-profile .picsTitle,
  #meez-profile .musicTitle {
    font-family: Audiowide, "Arial Black", sans-serif;
    text-shadow:
      -2px 0 rgba(255, 70, 40, 0.8),
      2px 0 rgba(140, 200, 70, 0.75);
  }
  /* Tables: brown labels beside darker olive. */
  #meez-profile .interestsAndDetails td,
  #meez-profile .userProfileDetail td,
  #meez-profile .userProfileSchool td,
  #meez-profile .userProfileCompany td,
  #meez-profile .contactTable td {
    background: #363c16;
    color: #f5ecd7;
    border-color: #5c6428;
  }
  #meez-profile td.label {
    background: #4a2f1b;
  }
  #meez-profile .lightbluetext8 {
    color: #f2c14e;
  }
  #meez-profile .contactTable td a::before {
    color: #ffd36b;
  }
  #meez-profile .blacktext10,
  #meez-profile .blacktext12 {
    color: #f5ecd7;
  }
  #meez-profile .redbtext,
  #meez-profile .redtext {
    color: #ffb0a0;
  }
  /* The status line is a closed caption. */
  #meez-profile .profileStatus {
    width: fit-content;
    background: #000;
    color: #fff;
    padding: 3px 8px;
    font-style: normal;
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }
  /* Comment text sits on the darkest brown, so members' own bright font colours still read. */
  #meez-profile .meez-comments .meez-comment-who {
    background: #4a2f1b;
    color: #f5ecd7;
  }
  #meez-profile .meez-comments .meez-comment-body {
    background: #2a1a0f;
    color: #f5ecd7;
  }
  #meez-profile .meez-online {
    color: #9cff6b;
  }
  #meez-profile .meez-pic {
    border: 3px solid #1c1209;
    border-radius: 12px / 16px;
    filter: sepia(0.2) saturate(1.25) contrast(1.05);
  }
  @media (prefers-reduced-motion: reduce) {
    #meez-profile,
    #meez-profile .nametext,
    #meez-profile .profileContainer::after {
      animation: none;
    }
  }
}