/* Ready, get set, go! */

@import url("./assets/variables.css");
@import url("./assets/normalise.css");
@import url("./assets/layout.css");
@import url("./assets/animations.css");
@import url("./assets/typography.css");

@counter-style decimal-leading-zero {
  system: fixed -9;
  symbols: "\2D\30\39""\2D\30\38""\2D\30\37""\2D\30\36""\2D\30\35""\2D\30\34""\2D\30\33""\2D\30\32""\2D\30\31""\30\30""\30\31""\30\32""\30\33""\30\34""\30\35""\30\36""\30\37""\30\38""\30\39";
}

:root {
  --max-width: 1280px;

  --bg1: hsl(220, 32%, 35%);
  --bg2: #1f2a40;
  --bg-gradient: linear-gradient(var(--bg1), var(--bg2));
}

@keyframes sky-scroller {
  from {
    background-position: left var(--sky-y), center;
  }
  to {
    background-position: var(--sky-wh) var(--sky-y), center;
  }
}

html {
  --sky-wh: 1024px;
  --sky-y: 75vh;

  display: grid;
  place-content: center;

  height: 100vh;
  overflow: hidden;
  background: url("/submissions/2primitive/assets/images/clouds.jpg"),
    linear-gradient(to bottom, var(--bg1), var(--bg2) 75vh, var(--bg2) 10vh);
  background-size: var(--sky-wh) var(--sky-wh), cover;
  background-repeat: repeat-x, no-repeat;
  background-blend-mode: soft-light, normal;
  background-position: left 85vh, center;
  background-attachment: fixed;
  color: #ccc;

  animation: sky-scroller 30s linear infinite;

  &::before {
    content: "Best viewed in WackyVision: 1280 x 960";
  }

  @media (min-width: 1280px) {
    &::before {
      content: "";
    }
  }
}

body {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;

  @media (min-width: 1280px) {
    all: unset;

    display: grid;
    grid-template-rows: repeat(12, 1fr);
    grid-template-columns: repeat(12, 1fr);
    gap: 1rem;

    height: 100vh;
    overflow: hidden;
    background: repeating-linear-gradient(
        -45deg,
        transparent,
        transparent 4rem,
        var(--bg2) 4rem,
        var(--bg2) 8rem
      ),
      repeating-linear-gradient(
        -45deg,
        transparent,
        transparent 2rem,
        var(--bg1) 2rem,
        var(--bg1) 4rem
      );
    background-size: 50vw 25vh, 100vw 25vh;
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-position: left bottom, center top;

    :is(> article, > aside, > footer) {
      position: relative;
    }

    :is(> article) {
      z-index: 2;
    }

    :is(> aside, > footer) {
      z-index: 1;
    }
  }
}

[data-gallery] {
  display: flex;
  place-content: initial;

  width: 100vw;
  max-width: initial;
  overflow: auto clip;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  background: var(--bg-gradient);

  & > figure {
    flex: 1 0 100vw;

    display: grid;
    place-content: center;
    grid-template-rows: initial;

    height: 100vh;
    scroll-snap-align: start;

    & img {
      opacity: 0;

      view-timeline-name: --revealing-image;
      view-timeline-axis: inline;

      animation: linear reveal both;
      animation-timeline: --revealing-image;
      animation-range: entry 25% cover 50%;
    }
  }
}

figure {
  display: grid;
  place-content: center;
  grid-template-rows: 1fr auto;
  grid-template-areas:
    "picture"
    "caption";

  & picture,
  & wacky-video {
    grid-area: picture;

    margin: auto;
  }

  figcaption {
    grid-area: caption;

    padding: 1rem;
    text-align: center;
    background: rgba(0, 0, 0, 0.5);
    color: #eee;
  }
}

& wacky-video {
  position: relative;

  & .controls {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;

    display: flex;
    gap: 1rem;
    padding: 1rem;
  }

  & .progress {
    flex: 1;
  }

  progress {
    width: 100%;
  }
}

article {
  grid-area: 1 / 1 / -1 / -1;

  position: relative;
  overflow: clip auto;
  scroll-behavior: smooth;
  scroll-snap-type: block mandatory;

  counter-reset: paras;

  & > * {
    display: grid;
    place-content: center;

    max-width: var(--max-width);
    height: 100vh;
    margin: auto;
    scroll-snap-align: start;
  }

  & :is(img, video) {
    filter: saturate(0);
  }

  & > figure {
    width: 100vw;
    max-width: initial;
    height: 100vh;
    overflow: clip;
    background: var(--bg-gradient);

    & img {
      opacity: 0;

      view-timeline-name: --revealing-image;
      view-timeline-axis: block;

      animation: linear reveal both;
      animation-timeline: --revealing-image;
      animation-range: entry 25% cover 50%;
    }
  }

  & > h1 {
    place-content: end start;

    width: 12ch;
    margin: 0;
    padding: 0.5rem 2rem;
    font-size: var(--font-xxxl);
    text-wrap: balance;
  }

  & > p {
    position: relative;

    margin: auto;
    padding: 0 25vw;

    line-height: 1.6;
    text-align: justify;

    background-position: center;
    background-repeat: no-repeat;

    &:not(:nth-of-type(1))::before {
      counter-increment: paras;
      content: "Scene " counter(paras, decimal-leading-zero);

      position: absolute;
      left: 0;
      bottom: 0;
      font-size: var(--font-xxl);
      font-family: var(--font-display);
      font-weight: 200;
      color: #eee;
    }

    & a {
      display: inline;
    }
  }

  /* Individual styles
  ------------------------------------------------------------------------------------------------*/
  /* Subheading */
  & > p:nth-of-type(1) {
    width: 35vw;
    margin: auto;
    padding: 0;

    text-align: center;
    text-wrap: balance;
    font-size: 2rem;
  }

  /* Author */
  /*
  & > a {
    width: 50%;
    margin: auto;
    font-family: var(--font-display);
    font-size: var(--font-xxxl);
    text-align: center;
    text-decoration: none;

    &::before,
    &::after {
      font-size: 1.5rem;
    }

    &::before,
    &::after {
      font-family: var(--font-body);
    }

    &::before {
      content: "A documentary by";
    }

    &::after {
      content: "Filmed in WackyVision";
    }
  }
  */
  & > a[rel="author"] {
    --transform: none;
    --opacity: 1;

    position: relative;

    width: 50%;
    margin: auto;
    font-family: var(--font-display);
    font-size: var(--font-xxxl);
    text-align: center;
    text-decoration: none;

    transform: var(--transform);
    opacity: var(--opacity);

    view-timeline-name: --glitching;
    view-timeline-axis: block;

    animation: glitch1 5s alternate;
    animation-timeline: --glitching;
    animation-range: cover;

    &::before,
    &::after {
      content: "Adam Lashinsky";

      position: absolute;
      inset: 0;
      place-content: center;
      transform: var(--transform);
      opacity: var(--opacity);

      animation-timeline: --glitching;
      animation-range: cover;
    }

    &::before {
      animation: glitch2 1.7s infinite alternate;
    }

    &::after {
      animation: glitch3 3.1s infinite alternate;
    }
  }

  & > time,
  & > blockquote {
    text-align: center;
    font-family: var(--font-display);
  }

  & > time {
    font-size: var(--font-xxxl);

    &::before {
      content: "In cinemas from";
      font-size: 1.5rem;
      font-family: var(--font-body);
    }
  }

  /* Ch 01: My first impression */
  & > p:nth-of-type(2) {
    padding: 0 8rem 0 40rem;
    background-image: url("/submissions/2primitive/assets/images/download-0.png");
  }

  /* Ch 02: Nevertheless, to call */
  & > p:nth-of-type(3) {
    padding: 0 24rem;
    background-image: url("/submissions/2primitive/assets/images/download-1.png");
  }

  /* Image 1: Competitors at Chuckwalla Raceway */
  & > figure:nth-of-type(1) {
  }

  /* Image 2: A 1970 Dodge Dart */
  & > figure:nth-of-type(2) {
  }

  /* Blockquote: This is our circus. These are our monkeys */
  & > blockquote {
    padding-inline: 2.2rem;
    font-size: var(--font-xl);
    text-wrap: balance;
  }

  /* Ch 03: It’s at once a legitimate race */
  & > p:nth-of-type(4) {
    padding: 0 8rem 0 28rem;
    background-image: url("/submissions/2primitive/assets/images/download-2.png");
    color: var(--bg2);
  }

  /* Video 1 */
  & > figure:nth-of-type(3) {
  }

  /* Ch 04: The race I’ve come to see */
  & > p:nth-of-type(5) {
    padding: 0 8rem 0 36rem;
    background-image: url("/submissions/2primitive/assets/images/download-3.png");
    color: var(--bg2);
  }

  /* Gallery 1: Repairs on a 1981 Rover 3500*/
  > [data-gallery]:nth-of-type(1) {
  }

  /* Ch 05: Lemons is the brainchild of Jay Lamm */
  & > p:nth-of-type(6) {
    padding: 0 8rem 0 34rem;
    background-image: url("/submissions/2primitive/assets/images/download-4.png");
  }

  > hr {
    position: relative;

    border: none;
    background-image: url("/submissions/2primitive/assets/images/lemons-store.svg");
    background-repeat: no-repeat;
    background-size: 50%;
    background-position: center;

    &::after {
      content: "Advertisement";

      position: absolute;
      left: 0;
      bottom: 0;
      font-size: var(--font-xxl);
      font-family: var(--font-display);
      font-weight: 200;
      color: #eee;
    }
  }

  /* Ch 06: It became increasingly clear */
  & > p:nth-of-type(7) {
    padding: 0 31rem 0 7rem;
    background-image: url("/submissions/2primitive/assets/images/download-5.png");
  }

  /* Gallery 2: Lemons founder Jay Lamm in South Carolina */
  & > [data-gallery]:nth-of-type(2) {
  }

  /* Ch 07: His customers enjoy being in on the joke */
  & > p:nth-of-type(8) {
    padding: 0 8rem 0 34rem;
    background-image: url("/submissions/2primitive/assets/images/download-7.png");
  }

  /* Ch 08: One entry, made up of students at Sierra College */
  & > p:nth-of-type(9) {
    padding: 0 24rem;
    background-image: url("/submissions/2primitive/assets/images/download-1.png");
  }

  /* Ch 09: The college kids have been getting some help */
  & > p:nth-of-type(10) {
    padding: 0 8rem 0 28rem;
    background-image: url("/submissions/2primitive/assets/images/download-2.png");
    color: var(--bg2);
  }

  /* Video 2 */
  & > figure:nth-of-type(4) {
  }

  /* Image: A Mercedes 300D beside the USS Alabama */
  & > figure:nth-of-type(5) {
    grid-template-rows: initial;
  }

  /* Ch 10: The happy-go-lucky car nuts */
  & > p:nth-of-type(11) {
    padding: 0 8rem 0 36rem;
    background-image: url("/submissions/2primitive/assets/images/download-3.png");
    color: var(--bg2);
  }

  /* Recommended */
  & > aside {
    position: relative;

    & a {
      text-decoration: none;
    }

    & .content {
      grid-area: 1 / 1 / -1 / -1;
      align-self: end;

      padding: 1rem;
      background: rgba(0, 0, 0, 0.75);
      color: #eee;
    }

    & > a {
      grid-area: 1 / 1 / -1 / -1;
    }

    & .title {
      position: absolute;
      left: 0;
      bottom: 0;
      font-size: var(--font-xl);
      font-family: var(--font-display);
      font-weight: 200;
      color: #eee;

      & h2,
      & a {
        display: inline-block;
        font: inherit;
      }
    }

    & img {
      display: block;
      height: 50vh;
    }
  }

  /* Ch 11: In the end, a Class A team from San Jose */
  & > p:nth-of-type(12) {
    padding: 0 8rem 0 34rem;
    background-image: url("/submissions/2primitive/assets/images/download-4.png");
  }

  /* Ch 12: Lemons is overwhelmingly male and equally middle-aged */
  & > p:nth-of-type(13) {
    padding: 0 30rem 0 8rem;
    background-image: url("/submissions/2primitive/assets/images/download-5.png");

    &::before {
      content: "The end";
    }
  }
}

aside {
  grid-area: 1 / -3 / 3 / -1;

  padding: 1rem;
  text-wrap: balance;

  & img {
    display: none;
  }
}

footer {
  grid-area: -2 / -3 / -1 / -1;

  padding: 1rem;

  & a {
    display: inline-block;
  }
}