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

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  background: #f4f4f4;
  font-family: Arial, Helvetica, sans-serif;
  color: #333;
}

/* =====================
   POSTER CANVAS
===================== */

.poster {
  position: relative;
  max-width: 800px;
  margin: 0 auto;
  margin-top: 10%;
  padding: 60px 40px 80px;
}

/* =====================
   ARTWORK
===================== */

.artwork img {
  display: block;
  mix-blend-mode: multiply;
  width: 100%;
  height: auto;

}
/* =====================
   ARTWORK LAYERS
===================== */

.artwork {
  position: relative;
}

.artwork .art {
  display: block;
  width: 100%;
  height: auto;
}

/* lagen exact over elkaar */
.artwork .sketch,
.artwork .final {
  position: absolute;
  left: 0;
}

/* eindbeeld blijft zichtbaar */
.artwork .final {
  opacity: 0;
}


/* =====================
   MENU
===================== */

.menu {
  display: flex;
  gap: 18px;
  margin-top: 10px;
}

.menu a {
  text-decoration: none;
  font-family: 'Oswald', sans-serif;
  font-size: 20px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #777;
}

/* =====================
   IDENTITY
===================== */

.identity {
  margin-top: 400px;
}

.identity h1 {
  font-size: 28px;
  font-family: 'Oswald', sans-serif;
  font-weight: 600;
  letter-spacing: 0.04em;
}

.identity p {
  font-size: 14px;
  letter-spacing: 0.01em;
  color: #8a1f1f;
  text-transform: uppercase;
  /* margin-top: 6px; */
}

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

.logo {
  position: absolute;
  right: 50px;
  bottom: 80px;
  
}

.logo img {
  width: 90px;
  
  
}
.logo-lines {
  position: absolute;
  mix-blend-mode: multiply;
  right: -43px;
  bottom: -30px;
  
}

.logo-lines img {
  width: 260px;
}

@media (max-width: 700px) {

  /* =====================
     POSTER CANVAS
  ===================== */

  .poster {
    position: relative;
    max-width: 100%;
    margin: 0 auto;
    padding: 40px 20px 120px;
  }

  /* =====================
     ARTWORK (STAAND, RUSTIG)
  ===================== */

  .artwork {
    position: relative;
    height: 600px;              /* vaste posterbreedte */
    aspect-ratio: 2 / 2;
    left: -130px;
    /* margin: 0 auto; */
  }

  .artwork .art {
    position: absolute;
     transform: rotate(-90deg);
    inset: 0;                  /* exact over elkaar */
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  /* =====================
     MENU (RECHTS, GEDRAAID)
  ===================== */

  .menu {
    display: block;
    transform-origin: left bottom;
    width: 90%;
    max-width: 700px;
    gap: 60px;
    margin-left: 20px;
    margin-top: 15px;
   
  }

  .menu a {
    font-size: 20px;
    letter-spacing: 0.12em;
    padding-right: 8px;
    padding-top: 30px;
  }

  /* =====================
     IDENTITY (ONDER ARTWORK)
  ===================== */

  .identity {
    position: relative;
    margin-top: 32px;
    margin-left: 15px;
    text-align: left;
  }

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

  .logo {
    position: relative;
    left: 300px;
  }

  .logo img {
    width: 80px;
  }

  .logo-lines {
    display: none;
  }
}


/* =====================
   FADE POP ANIMATION
===================== */

.fade-pop {
  opacity: 0;
  transform: translateY(4px) scale(0.99);
  animation: fadePop var(--duration, 1.2s) ease-out forwards;
  animation-delay: var(--delay, 0s);
}

.artwork .sketch {
  animation: sketchOut var(--sketch-duration, 2.4s) ease forwards;
  animation-delay: var(--sketch-delay, 1.2s);
}

.artwork .final {
  animation: finalIn var(--final-duration, 2.6s) ease forwards;
  animation-delay: var(--final-delay, 1.6s);
}

@keyframes fadePop {
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes sketchOut {
  to {
    opacity: 0;
  }
}

@keyframes finalIn {
  from {
    opacity: 0;
    filter: blur(1px);
  }
  to {
    opacity: 1;
    filter: blur(0);
  }
}