/* =========================================================
   IMAGE SYSTEM
   documentary / floating / architectural
========================================================= */

/* =========================================================
   GLOBAL IMAGE CONTAINERS
========================================================= */

.hero-media,
.image-window,
.service-image,
.split-image,
.visual-strip,
figure {
  position: relative;
  overflow: hidden;

  background:
    linear-gradient(
      180deg,
      var(--surface),
      var(--surface-cold)
    );
}

figure {
  margin: 0;
}

/* =========================================================
   IMAGE BASE
========================================================= */

.hero-media img,
.image-window img,
.service-image img,
.split-image img,
.visual-strip img {
  width: 100%;
  height: 100%;

  object-fit: cover;

  transform: scale(1.12);

  will-change:
    transform,
    filter;

  transition:
    transform 1.2s ease,
    filter 0.8s ease;
}

/* =========================================================
   DOCUMENTARY FILTERS
========================================================= */

.v1 img {
  filter:
    grayscale(0.12)
    saturate(0.72)
    contrast(1.08)
    brightness(0.92)
    sepia(0.03);
}

.v2 img {
  filter:
    grayscale(0.2)
    saturate(0.62)
    contrast(1.12)
    brightness(0.88)
    sepia(0.04);
}

.v3 img {
  filter:
    grayscale(0.34)
    saturate(0.54)
    contrast(1.18)
    brightness(0.84)
    sepia(0.02);
}

.v4 img {
  filter:
    grayscale(0.08)
    saturate(0.78)
    contrast(1.14)
    brightness(0.9)
    sepia(0.04);
}

.v5 img {
  filter:
    grayscale(0.42)
    saturate(0.46)
    contrast(1.22)
    brightness(0.82)
    sepia(0.02);
}

/* =========================================================
   IMAGE OVERLAYS
========================================================= */

.hero-media::before,
.image-window::before,
.service-image::before,
.split-image::before,
.visual-strip::before {
  content: "";

  position: absolute;
  inset: 0;

  z-index: 2;
  pointer-events: none;

  background:

    radial-gradient(
      circle at 18% 14%,
      rgba(255,255,255,0.18),
      transparent 28%
    ),

    radial-gradient(
      circle at 84% 82%,
      rgba(0,0,0,0.38),
      transparent 48%
    ),

    linear-gradient(
      180deg,
      rgba(255,255,255,0.03),
      rgba(0,0,0,0.16)
    );

  mix-blend-mode: multiply;

  opacity: 0.72;
}

.hero-media::after,
.image-window::after,
.service-image::after,
.split-image::after,
.visual-strip::after {
  content: "";

  position: absolute;
  inset: 0;

  z-index: 3;
  pointer-events: none;

  background:

    repeating-linear-gradient(
      0deg,
      rgba(0,0,0,0.03) 0px,
      rgba(0,0,0,0.03) 1px,
      transparent 1px,
      transparent 4px
    ),

    repeating-linear-gradient(
      90deg,
      rgba(255,255,255,0.02) 0px,
      rgba(255,255,255,0.02) 1px,
      transparent 1px,
      transparent 6px
    );

  opacity: 0.48;
}

/* =========================================================
   FLOATING SYSTEM
========================================================= */

.drift-slow img {
  animation:
    driftSlow 18s ease-in-out infinite alternate;
}

.drift-medium img {
  animation:
    driftMedium 14s ease-in-out infinite alternate;
}

.drift-large img {
  animation:
    driftLarge 20s ease-in-out infinite alternate;
}

.hero-media img {
  animation:
    driftHero 24s ease-in-out infinite alternate;
}

@keyframes driftSlow {

  0% {
    transform:
      scale(1.1)
      translate(-1.5%, -1%);
  }

  100% {
    transform:
      scale(1.17)
      translate(2%, 1.5%);
  }
}

@keyframes driftMedium {

  0% {
    transform:
      scale(1.12)
      translate(-2%, -1.5%);
  }

  100% {
    transform:
      scale(1.22)
      translate(2.8%, 2%);
  }
}

@keyframes driftLarge {

  0% {
    transform:
      scale(1.15)
      translate(-3%, -2%);
  }

  100% {
    transform:
      scale(1.28)
      translate(4%, 3%);
  }
}

@keyframes driftHero {

  0% {
    transform:
      scale(1.08)
      translate(-1.5%, -1%);
  }

  100% {
    transform:
      scale(1.18)
      translate(3%, 2.5%);
  }
}

/* =========================================================
   HOVER CONTROL
========================================================= */

.hero-media:hover img,
.image-window:hover img,
.service-image:hover img,
.split-image:hover img {
  animation-play-state: paused;

  transform:
    scale(1.12)
    translate(0, 0);

  filter:
    grayscale(0.08)
    saturate(0.84)
    contrast(1.08)
    brightness(0.95);
}

/* =========================================================
   HERO
========================================================= */

.hero-media {
  min-height: 760px;

  border-left: 1px solid var(--line);
  border-right: 1px solid var(--line);

  box-shadow:
    var(--shadow-medium);
}

/* =========================================================
   IMAGE WINDOWS
========================================================= */

.image-window {
  border: 1px solid var(--line);

  min-height: 320px;

  box-shadow:
    var(--shadow-medium);
}

.visual-window-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);

  gap: 18px;
}

.visual-window-wide {
  grid-column: span 12;
  min-height: 340px;
}

.visual-window-half {
  grid-column: span 6;
  min-height: 440px;
}

.visual-window-third {
  grid-column: span 4;
  min-height: 360px;
}

.visual-window-tall {
  min-height: 640px;
}

/* =========================================================
   SPLIT IMAGES
========================================================= */

.split-image {
  min-height: 680px;

  box-shadow:
    var(--shadow-medium);
}

/* =========================================================
   STRIPS
========================================================= */

.visual-strip {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

/* =========================================================
   UPLOAD PREVIEW
========================================================= */

.photo-preview {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));

  gap: 12px;

  margin-top: 20px;
}

.photo-preview img {
  aspect-ratio: 1 / 1;

  object-fit: cover;

  border-radius: var(--radius-sm);

  border: 1px solid var(--line);

  background: var(--surface-soft);
}

/* =========================================================
   MISSING IMAGE STATE
========================================================= */

.image-missing {
  background:
    linear-gradient(
      135deg,
      var(--surface-cold),
      var(--graphite-soft)
    );
}

.image-missing img {
  opacity: 0;
}

.image-missing::before {
  content: "IMAGE MISSING";

  position: absolute;
  inset: 0;

  z-index: 10;

  display: flex;
  align-items: center;
  justify-content: center;

  color:
    rgba(255,255,255,0.62);

  font-size: 11px;

  letter-spacing: 0.2em;

  text-transform: uppercase;

  background:
    linear-gradient(
      135deg,
      rgba(32,35,33,0.92),
      rgba(111,124,114,0.72)
    );
}

/* =========================================================
   LOGO
========================================================= */

.brand-logo {
  width: auto;
  max-width: 220px;
  height: 40px;

  object-fit: contain;

  transition:
    opacity var(--transition-fast),
    transform var(--transition-fast);
}

.brand-logo:hover {
  opacity: 0.86;
}

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

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

  .hero-media img,
  .image-window img,
  .service-image img,
  .split-image img,
  .visual-strip img {
    animation: none !important;

    transform:
      scale(1.08);
  }
}

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

@media (max-width: 1100px) {

  .hero-media {
    min-height: 520px;
  }

  .split-image {
    min-height: 460px;
  }

  .visual-window-half {
    min-height: 360px;
  }

  .visual-window-third {
    min-height: 320px;
  }
}

@media (max-width: 760px) {

  .visual-window-grid {
    grid-template-columns: 1fr;
  }

  .visual-window-wide,
  .visual-window-half,
  .visual-window-third {
    grid-column: auto;
  }

  .hero-media {
    min-height: 380px;
  }

  .split-image {
    min-height: 340px;
  }

  .image-window {
    min-height: 280px;
  }

  .visual-window-half,
  .visual-window-third,
  .visual-window-wide {
    min-height: 280px;
  }

  .hero-media::before,
  .image-window::before,
  .split-image::before {
    opacity: 0.54;
  }
}

@media (max-width: 480px) {

  .brand-logo {
    max-width: 170px;
    height: 32px;
  }

  .hero-media {
    min-height: 320px;
  }

  .split-image {
    min-height: 280px;
  }

  .image-window {
    min-height: 240px;
  }
}