/* =========================================================
   IMAGES PAGE
   ========================================================= */

* {
  box-sizing: border-box;
}


html,
body {
  margin: 0;
  padding: 0;

  color: #ddd;

  font-family:
    Arial,
    Helvetica,
    sans-serif;
}


/* =========================================================
   PAGE
   ========================================================= */

.images-page {

  width: 720px;

  margin: 0 auto;

  padding:
    34px
    28px
    60px;

  background:
    linear-gradient(
      180deg,
      #090a0a 0%,
      #050606 45%,
      #030303 100%
    );

  border-top:
    1px solid
    rgba(255,255,255,.035);

  border-left:
    1px solid
    rgba(255,255,255,.035);

  border-right:
    1px solid
    rgba(255,255,255,.035);

  box-shadow:
    0 0 35px rgba(0,0,0,.8);

}



/* =========================================================
   PAGE VISIBILITY / REVEAL
   ========================================================= */

.images-hidden {

  opacity: 0;

  visibility: hidden;

  pointer-events: none;

}


.images-visible {

  visibility: visible;

  pointer-events: auto;

  animation:
    imagesAppear
    .65s
    cubic-bezier(.22,.8,.25,1)
    forwards;

}


/* =========================================================
   PAGE HEADER
   ========================================================= */

.images-header {

  margin-bottom: 30px;

}


.images-title {

  display: flex;

  align-items: center;

  justify-content: space-between;

  padding-bottom: 10px;

  border-bottom:
    1px solid
    #303334;

  color: #eee;

  font-size: 15px;

  font-weight: 700;

  letter-spacing: 4px;

}


.images-code {

  color: #555;

  font-size: 7px;

  font-weight: 400;

  letter-spacing: 2px;

}


.images-intro {

  display: grid;

  grid-template-columns:
    190px
    1fr;

  gap: 25px;

  padding:
    17px
    0
    12px;

  border-bottom:
    1px solid
    #181a1b;

}


.images-intro-label {

  color: #777;

  font-size: 7px;

  letter-spacing: 1.5px;

}


.images-intro p {

  margin: 0;

  color: #8c8f91;

  font-size: 10px;

  line-height: 1.7;

  transform: translateY(-4px);

}



/* =========================================================
   FEATURED IMAGE
   ========================================================= */

.image-featured {

  margin-bottom: 35px;

}


.image-featured-label {

  margin-bottom: 8px;

  color: #555;

  font-size: 7px;

  letter-spacing: 2px;

}


.image-featured-frame {

  position: relative;

  width: 100%;

  height: 280px;

  overflow: hidden;

  background: #020202;

  border:
    1px solid
    #292b2c;

}


.image-featured-frame::after {

  content: "";

  position: absolute;

  inset: 0;

  pointer-events: none;

  background:
    linear-gradient(
      180deg,
      transparent 55%,
      rgba(0,0,0,.7) 100%
    );

}


.image-featured-frame img {

  display: block;

  width: 100%;

  height: 100%;

  object-fit: cover;

  filter:
    grayscale(.25)
    contrast(1.05)
    brightness(.82);

  transition:
    transform .45s ease,
    filter .45s ease;

}


.image-featured-frame:hover img {

  transform: scale(1.025);

  filter:
    grayscale(0)
    contrast(1.08)
    brightness(.95);

}


.image-featured-overlay {

  position: absolute;

  left: 12px;
  right: 12px;
  bottom: 10px;

  z-index: 2;

  display: flex;

  justify-content: space-between;

  color: #aaa;

  font-size: 7px;

  letter-spacing: 2px;

}


.image-featured-info {

  display: grid;

  grid-template-columns:
    130px
    1fr;

  gap: 20px;

  padding:
    14px
    0
    0;

}


.image-featured-category {

  color: #666;

  font-size: 7px;

  letter-spacing: 1.5px;

}


.image-featured-info h1 {

  margin:
    0
    0
    6px;

  color: #ddd;

  font-size: 14px;

  font-weight: 600;

  letter-spacing: 3px;

}


.image-featured-info p {

  grid-column: 2;

  margin: 0;

  color: #777;

  font-size: 9px;

  line-height: 1.6;

}


/* =========================================================
   IMAGE ARCHIVE
   ========================================================= */

.image-archive {

  margin-top: 10px;

}


.images-bar {

  display: flex;

  align-items: center;

  justify-content: space-between;

  height: 30px;

  padding:
    0
    10px;

  background:
    linear-gradient(
      180deg,
      #181b1c,
      #0b0c0d
    );

  border:
    1px solid
    #2d3031;

  color: #aaa;

  font-size: 8px;

  font-weight: 700;

  letter-spacing: 2px;

}


.images-bar-code {

  color: #555;

  font-size: 6px;

  font-weight: 400;

}


/* =========================================================
   IMAGE GRID
   ========================================================= */

.image-grid {

  display: grid;

  grid-template-columns:
    repeat(3, 1fr);

  gap: 12px;

  margin-top: 14px;

}


/* =========================================================
   IMAGE CARD
   ========================================================= */

.image-card {

  min-width: 0;

  background:
    linear-gradient(
      180deg,
      #0d0e0e,
      #080909
    );

  border:
    1px solid
    #222526;

  transition:
    border-color .2s ease,
    transform .2s ease,
    background .2s ease;

}


.image-card:hover {

  border-color: #4a4d4e;

  background: #111313;

  transform: translateY(-2px);

}


/* =========================================================
   IMAGE THUMB
   ========================================================= */

.image-thumb {

  position: relative;

  display: block;

  width: 100%;

  aspect-ratio: 1 / 1;

  overflow: hidden;

  background: #020202;

}


.image-thumb::after {

  content: "";

  position: absolute;

  inset: 0;

  pointer-events: none;

  border:
    1px solid
    rgba(255,255,255,.04);

}


.image-thumb img {

  display: block;

  width: 100%;

  height: 100%;

  object-fit: cover;

  filter:
    grayscale(.4)
    brightness(.72)
    contrast(1.05);

  transition:
    transform .35s ease,
    filter .35s ease;

}


.image-card:hover .image-thumb img {

  transform: scale(1.06);

  filter:
    grayscale(.05)
    brightness(.92)
    contrast(1.08);

}


/* =========================================================
   IMAGE NUMBER
   ========================================================= */

.image-number {

  position: absolute;

  top: 7px;
  left: 7px;

  z-index: 2;

  padding:
    4px
    5px;

  background:
    rgba(0,0,0,.75);

  border:
    1px solid
    rgba(255,255,255,.12);

  color: #aaa;

  font-size: 6px;

  letter-spacing: 1px;

}


/* =========================================================
   IMAGE INFO
   ========================================================= */

.image-info {

  position: relative;

  padding:
    10px
    10px
    12px;

}


.image-category {

  display: block;

  margin-bottom: 5px;

  color: #555;

  font-size: 6px;

  letter-spacing: 1.5px;

}


.image-info h2 {

  margin: 0;

  color: #bbb;

  font-size: 9px;

  font-weight: 600;

  letter-spacing: 1.5px;

}


.image-year {

  display: block;

  margin-top: 7px;

  color: #444;

  font-size: 6px;

  letter-spacing: 1px;

}


/* =========================================================
   PAGE REVEAL ANIMATIONS
   ========================================================= */

.images-visible .images-header {

  animation:
    imagesFade
    .55s
    ease-out
    .05s
    both;

}


.images-visible .image-featured {

  animation:
    imagesFade
    .6s
    cubic-bezier(.22,.8,.25,1)
    .18s
    both;

}


.images-visible .image-archive {

  animation:
    imagesFade
    .55s
    ease-out
    .38s
    both;

}


.images-visible .image-card {

  animation:
    imageCardAppear
    .55s
    cubic-bezier(.22,.8,.25,1)
    both;

}


.images-visible
.image-card:nth-child(1) {

  animation-delay:
    .45s;

}


.images-visible
.image-card:nth-child(2) {

  animation-delay:
    .52s;

}


.images-visible
.image-card:nth-child(3) {

  animation-delay:
    .59s;

}


.images-visible
.image-card:nth-child(4) {

  animation-delay:
    .66s;

}


.images-visible
.image-card:nth-child(5) {

  animation-delay:
    .73s;

}


.images-visible
.image-card:nth-child(6) {

  animation-delay:
    .80s;

}


.images-visible .images-end {

  animation:
    imagesFade
    .5s
    ease-out
    .95s
    both;

}


.images-visible + .images-footer {

  animation:
    imagesFade
    .5s
    ease-out
    1.05s
    both;

}


/* =========================================================
   KEYFRAMES
   ========================================================= */

@keyframes imagesAppear {

  from {

    opacity: 0;

  }

  to {

    opacity: 1;

  }

}


@keyframes imagesFade {

  from {

    opacity: 0;

    transform:
      translateY(12px);

  }

  to {

    opacity: 1;

    transform:
      translateY(0);

  }

}


@keyframes imageCardAppear {

  from {

    opacity: 0;

    transform:
      translateY(20px)
      scale(.975);

  }

  to {

    opacity: 1;

    transform:
      translateY(0)
      scale(1);

  }

}


/* =========================================================
   END
   ========================================================= */

.images-end {

  margin-top: 35px;

  padding-top: 15px;

  border-top:
    1px solid
    #1b1d1e;

  color: #444;

  text-align: center;

  font-size: 6px;

  letter-spacing: 2px;

}


/* =========================================================
   FOOTER
   ========================================================= */

.images-footer {

  width: 720px;

  margin: 0 auto;

  padding:
    18px
    0
    40px;

  color: #3f4142;

  text-align: center;

  font-size: 6px;

  letter-spacing: 2px;

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 720px) {


  .images-page {

    width: 100vw;

    padding:
      6vw
      4vw
      12vw;

  }


  .images-title {

    font-size: 2.8vw;

    letter-spacing: .8vw;

  }


  .images-code {

    font-size: 1.5vw;

    letter-spacing: .35vw;

  }


  .images-intro {

    grid-template-columns:
      1fr;

    gap: 3vw;

    padding:
      3vw
      0
      3vw;

  }


  .images-intro-label {

    font-size: 1.7vw;

    letter-spacing: .35vw;

  }


  .images-intro p {

    font-size: 2.2vw;

    line-height: 1.6;

  }


  .image-featured-frame {

    height: 42vw;

  }


  .image-featured-label {

    font-size: 1.6vw;

  }


  .image-featured-info {

    grid-template-columns:
      1fr;

    gap: 2vw;

  }


  .image-featured-category {

    font-size: 1.6vw;

  }


  .image-featured-info h1 {

    font-size: 3vw;

    letter-spacing: .6vw;

  }


  .image-featured-info p {

    grid-column: auto;

    font-size: 2vw;

  }


  .images-bar {

    height: 7vw;

    padding:
      0
      2vw;

    font-size: 2vw;

    letter-spacing: .4vw;

  }


  .images-bar-code {

    font-size: 1.4vw;

  }


  .image-grid {

    grid-template-columns:
      repeat(2, 1fr);

    gap: 2vw;

    margin-top: 2.5vw;

  }


  .image-number {

    top: 1.5vw;
    left: 1.5vw;

    padding:
      1vw
      1.2vw;

    font-size: 1.5vw;

  }


  .image-info {

    padding:
      2vw
      2vw
      2.5vw;

  }


  .image-category {

    margin-bottom: 1vw;

    font-size: 1.4vw;

    letter-spacing: .3vw;

  }


  .image-info h2 {

    font-size: 1.9vw;

    letter-spacing: .3vw;

  }


  .image-year {

    margin-top: 1.5vw;

    font-size: 1.4vw;

  }


  .images-end {

    margin-top: 7vw;

    padding-top: 3vw;

    font-size: 1.5vw;

    letter-spacing: .4vw;

  }


  .images-footer {

    width: 100vw;

    padding:
      4vw
      0
      8vw;

    font-size: 1.5vw;

    letter-spacing: .4vw;

  }

}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

  .images-visible,
  .images-visible *,
  .images-visible .images-header,
  .images-visible .image-featured,
  .images-visible .image-archive,
  .images-visible .image-card,
  .images-visible .images-end,
  .images-visible + .images-footer {

    animation: none !important;

    opacity: 1;

    visibility: visible;

    transform: none;

  }

}