/* =================================
   FONT
================================= */

@font-face {
  font-family: "Suisse Int'l";
  src: url("fonts/SuisseIntl-Medium.otf") format("opentype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}


/* =================================
   VARIABLES
================================= */

:root {
  --margin: 10px;

  --font-size: 16px;
  --line-height: 16px;

  --text: #111;
  --accent: #1612ff;

  --background: #fff;
  --drawer-background: rgb(255, 253, 253);

  --strip-height: calc(100vh / 3);
  --drawer-closed-width: 8px;

  --label-col: 170px;

  --drawer-duration: 0.45s;
  --drawer-ease: cubic-bezier(.76, 0, .24, 1);

  --index-column-gap: 40px;
  --index-row-gap: 20px;

  --index-max-title-width: 260px;

  --mobile-content-gap: 20px;
}


/* =================================
   RESET
================================= */

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;

  margin: 0;
  padding: 0;

  overflow: hidden;

  background: var(--background);
  color: var(--text);

  font-family: "Suisse Int'l", Arial, sans-serif;
  font-size: var(--font-size);
  line-height: var(--line-height);
  font-weight: 500;
}

button,
input,
textarea,
select {
  font: inherit;
}

button {
  margin: 0;
  padding: 0;

  border: 0;
  background: none;

  color: inherit;

  cursor: pointer;
}

p,
h1,
h2,
h3 {
  margin: 0;
}

img,
video {
  display: block;
}


/* =================================
   GLOBAL LINKS
================================= */

a {
  color: var(--text);

  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;

  transition: color 0.15s ease;
}

a:hover {
  color: var(--accent);
}


/* =================================
   SITE
================================= */

.site {
  position: relative;

  width: 100vw;
  height: 100vh;

  display: grid;
  grid-template-columns: 1fr 1fr;

  overflow: hidden;
}


/* =================================
   LEFT PANEL
================================= */

.left-panel {
  position: relative;

  width: 100%;
  height: 100vh;

  overflow: hidden;
}


/* =================================
   PROJECT HEADING
================================= */

.project-heading {
  position: absolute;

  top: var(--margin);
  left: var(--margin);
  right: var(--margin);

  display: grid;

  grid-template-columns:
    var(--label-col)
    minmax(0, 1fr);

  align-items: start;
}

#projectNumber {
  display: block;
}

.project-heading-content {
  min-width: 0;
}

#projectTitle {
  margin: 0;

  font: inherit;
  font-size: inherit;
  line-height: inherit;
  font-weight: inherit;
}


/* =================================
   PROJECT INFO BUTTON
================================= */

#openProjectInfo {
  position: fixed;

  top: var(--margin);
  right: calc(50% + var(--margin));

  z-index: 30;

  margin: 0;
  padding: 0;

  color: var(--accent);

  opacity: 1;
  visibility: visible;

  transition:
    color 0.15s ease,
    opacity 0.15s ease,
    visibility 0.15s ease;
}

#openProjectInfo:hover {
  color: var(--text);
}


/*
  Quando Project Info è aperto,
  il +Info esterno scompare.
*/

body.project-info-open
#openProjectInfo {
  opacity: 0;
  visibility: hidden;

  pointer-events: none;
}


/* =================================
   ABOUT BUTTON — DESKTOP
================================= */

#openAboutExternal {
  position: fixed;

  right: calc(50% + var(--margin));
  bottom: var(--margin);

  z-index: 30;

  margin: 0;
  padding: 0;

  color: var(--accent);

  opacity: 1;
  visibility: visible;

  transition:
    color 0.15s ease,
    opacity 0.15s ease,
    visibility 0.15s ease;
}

#openAboutExternal:hover {
  color: var(--text);
}


/*
  Quando About è aperto,
  l'About esterno scompare.
*/

body.about-open
#openAboutExternal {
  opacity: 0;
  visibility: hidden;

  pointer-events: none;
}


/* =================================
   SITE NAME
================================= */

.site-name {
  position: absolute;

  left: var(--margin);
  bottom: var(--margin);
}


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

.site-footer {
  position: absolute;

  left: calc(
    var(--margin) +
    var(--label-col)
  );

  bottom: var(--margin);
}


/* =================================
   RIGHT PANEL
================================= */

.right-panel {
  position: relative;

  width: 100%;
  height: 100vh;

  overflow: hidden;
}


/* =================================
   CAROUSEL
================================= */

.carousel {
  position: absolute;

  inset: 0;

  width: 100%;
  height: 100%;

  overflow-y: auto;
  overflow-x: hidden;

  scrollbar-width: none;

  scroll-behavior: auto;
}

.carousel::-webkit-scrollbar {
  display: none;
}


/* =================================
   MEDIA
================================= */

.media-item {
  position: relative;

  width: 100%;

  margin: 0;
  padding: 0;

  line-height: 0;
}

.media-item img,
.media-item video {
  display: block;

  width: 100%;
  height: auto;

  margin: 0;
  padding: 0;

  object-fit: contain;
}


/* =================================
   EXTERNAL VIDEO LINK
================================= */

.media-external-link {
  position: absolute;

  top: 0;
  left: 0;

  z-index: 10;

  display: block;

  width: fit-content;

  padding: var(--margin);

  background: var(--background);

  line-height: var(--line-height);
}


/* =================================
   PLACEHOLDERS
================================= */

.media-placeholder {
  width: 100%;
  min-height: 70vh;

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

  background: #eee;

  line-height: var(--line-height);
}


/* =================================
   THUMBNAILS
================================= */

/*
  DESKTOP:
  ora sono sovrapposte al carosello,
  in alto a sinistra.
*/

.thumbnails {
  position: fixed;

  top: var(--margin);

  left: calc(
    50% +
    var(--margin)
  );

  right: auto;
  bottom: auto;

  z-index: 20;

  display: flex;
  flex-direction: column;

  width: 40px;

  gap: 0;

  opacity: 1;

  pointer-events: auto;
}


/* =================================
   THUMBNAIL ITEM
================================= */

.thumbnail {
  position: relative;

  display: block;

  width: 40px;
  height: auto;

  flex: 0 0 auto;

  margin: 0;
  padding: 0;

  border: 0;

  overflow: hidden;

  opacity: 1;

  line-height: 0;
}


/* =================================
   THUMBNAIL MEDIA
================================= */

.thumbnail img,
.thumbnail video,
.thumbnail canvas {
  display: block;

  width: 100%;
  height: auto;

  object-fit: contain;

  filter: none;

  transition: filter 0.15s ease;
}


/* =================================
   BLUE THUMBNAIL OVERLAY
================================= */

.thumbnail::after {
  content: "";

  position: absolute;

  inset: 0;

  background: var(--accent);

  mix-blend-mode: multiply;

  opacity: 0;

  pointer-events: none;

  transition: opacity 0.15s ease;
}


/* =================================
   DESKTOP HOVER
================================= */

.thumbnail:hover img,
.thumbnail:hover video,
.thumbnail:hover canvas {
  filter:
    grayscale(1)
    contrast(1000%);
}

.thumbnail:hover::after {
  opacity: 1;
}


/* =================================
   ACTIVE THUMBNAIL
================================= */

.thumbnail.is-active img,
.thumbnail.is-active video,
.thumbnail.is-active canvas {
  filter:
    grayscale(1)
    contrast(1000%);
}

.thumbnail.is-active::after {
  opacity: 1;
}


/* =================================
   THUMBNAIL PLACEHOLDER
================================= */

.thumbnail-placeholder {
  width: 40px;

  aspect-ratio: 1 / 1;

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

  overflow: hidden;

  background: #ddd;

  font-size: 8px;
  line-height: 8px;
}


/* =================================
   DRAWER
================================= */

.drawer {
  position: fixed;

  top: 50%;
  left: var(--margin);

  z-index: 100;

  width: var(--drawer-closed-width);
  height: var(--strip-height);

  transform: translateY(-50%);

  overflow: hidden;

  background: var(--accent);

  cursor: pointer;

  transition:
    width var(--drawer-duration)
      var(--drawer-ease),

    background-color
      0.10s ease 0.35s;
}

.drawer.is-open {
  width: calc(
    100vw -
    var(--margin) * 2
  );

  background:
    var(--drawer-background);

  cursor: default;

  transition:
    width var(--drawer-duration)
      var(--drawer-ease),

    background-color
      0.20s ease 0.08s;
}


/* =================================
   DRAWER INTRO
================================= */

.drawer.is-intro {
  width: calc(
    100vw -
    var(--margin) * 2
  );

  background:
    var(--drawer-background);

  transition: none;
}

.drawer.is-intro
.drawer-content {
  opacity: 1;
  visibility: visible;

  pointer-events: auto;

  transition: none;
}


/* =================================
   DRAWER CONTENT
================================= */

.drawer-content {
  position: absolute;

  inset: 0;

  width: calc(
    100vw -
    var(--margin) * 2
  );

  height: 100%;

  opacity: 0;
  visibility: hidden;

  pointer-events: none;

  transition:
    opacity 0.12s ease;
}

.drawer.is-open
.drawer-content {
  opacity: 1;
  visibility: visible;

  pointer-events: auto;

  transition-delay: 0.12s;
}


/* =================================
   DRAWER VIEWS
================================= */

.drawer-view {
  position: absolute;

  inset: 0;

  display: none;

  pointer-events: none;
}

.drawer-view.is-active {
  display: block;

  pointer-events: auto;
}


/* =================================
   DRAWER SWITCH
================================= */

.drawer-switch {
  position: absolute;

  top: var(--margin);
  right: var(--margin);

  z-index: 5;

  color: var(--accent);

  transition: color 0.15s ease;
}

.drawer-switch:hover {
  color: var(--text);
}


/* =================================
   ALL PROJECTS
================================= */

.projects-grid {
  position: absolute;

  top: var(--margin);
  left: var(--margin);
  right: 120px;
  bottom: var(--margin);

  display: flex;
  flex-wrap: wrap;

  justify-content: flex-start;
  align-content: flex-start;

  column-gap:
    var(--index-column-gap);

  row-gap:
    var(--index-row-gap);
}


/* =================================
   PROJECT INDEX ITEM
================================= */

.project-index-item {
  display: grid;

  grid-template-columns:
    max-content
    max-content;

  column-gap: 5px;

  width: max-content;

  align-items: start;

  color: var(--text);

  cursor: pointer;
}

.index-number {
  color: var(--text);
}

.index-content {
  min-width: 0;

  max-width:
    var(--index-max-title-width);
}

.index-title {
  width: auto;
  max-width: 100%;

  color: var(--text);
}


/* =================================
   INDEX ACTIONS
================================= */

.index-action-container {
  min-height:
    var(--line-height);
}

.index-action {
  display: block;

  color: var(--accent);

  line-height: inherit;

  transition:
    color 0.15s ease,
    opacity 0.15s ease;
}

.index-info:hover {
  color: var(--text);
}

.index-view {
  opacity: 0;

  pointer-events: auto;

  color: var(--accent);

  transition:
    opacity 0.15s ease,
    color 0.15s ease;
}

.project-index-item:not(.is-active):hover
.index-view {
  opacity: 1;
}

.index-view:hover {
  color: var(--text);
}


/* =================================
   ABOUT
================================= */

.about-label {
  position: absolute;

  top: var(--margin);
  left: var(--margin);

  z-index: 5;
}

.about-layout {
  position: absolute;

  top: var(--margin);
  left: 0;
  right: var(--margin);
  bottom: var(--margin);

  display: grid;

  grid-template-columns:
    var(--label-col)
    minmax(0, 1fr);

  align-items: start;
}

.about-copy {
  grid-column: 2;

  max-width: 1050px;
}

.about-links {
  margin-top: calc(
    var(--line-height) * 2
  );

  display: flex;
  flex-direction: column;

  align-items: flex-start;
}

.about-contact-link {
  text-decoration: none;
}


/* =================================
   PROJECT INFO
================================= */

.project-info-label {
  position: absolute;

  top: var(--margin);
  left: var(--margin);

  z-index: 5;
}

.project-info-layout {
  position: absolute;

  top: var(--margin);
  left: 0;
  right: var(--margin);
  bottom: var(--margin);

  display: grid;

  grid-template-columns:
    var(--label-col)
    minmax(0, 1fr);

  align-items: start;
}

.project-info-main {
  grid-column: 2;

  max-width: 1050px;
}


/* =================================
   PROJECT META
================================= */

.project-meta {
  margin-top: calc(
    var(--line-height) * 2
  );
}

.project-meta p {
  margin: 0;
}


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

.drawer-footer {
  position: absolute;

  left: var(--margin);
  bottom: var(--margin);

  color: var(--text);

  opacity: 0;

  pointer-events: none;
}

.drawer-footer.is-visible {
  opacity: 1;
}


/* =================================
   DRAWER OPEN STATE
================================= */

body.drawer-open
.thumbnails {
  pointer-events: none;
}


/* =================================
   TABLET
================================= */

@media (max-width: 1000px) {

  :root {
    --label-col: 130px;
  }

}


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

@media (max-width: 700px) {

  :root {
    --margin: 10px;

    --label-col: 45px;

    --mobile-header-height: 34px;

    --mobile-footer-height: 34px;

    --mobile-drawer-strip-height: 18px;

    --mobile-content-top: 52px;
  }


  /* ===============================
     SITE
  =============================== */

  .site {
    position: relative;

    display: block;

    width: 100vw;
    height: 100dvh;

    overflow: hidden;
  }


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

  .left-panel {
    position: fixed;

    top: 0;
    left: 0;

    z-index: 60;

    width: 100%;

    height:
      var(--mobile-header-height);

    background:
      var(--background);

    overflow: visible;

    pointer-events: none;
  }


  .project-heading {
    position: absolute;

    top: var(--margin);
    left: var(--margin);
    right: var(--margin);

    display: grid;

    grid-template-columns:
      var(--label-col)
      minmax(0, 1fr);

    align-items: start;

    pointer-events: auto;
  }


  .project-heading-content {
    min-width: 0;

    padding-right: 70px;
  }


  #projectTitle {
    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;
  }


  #openProjectInfo {
    position: fixed;

    top: var(--margin);
    right: var(--margin);

    z-index: 70;

    margin: 0;
    padding: 0;

    color: var(--accent);

    pointer-events: auto;
  }


  /*
    Nessun About esterno
    nella versione mobile.
  */

  #openAboutExternal {
    display: none;
  }


  /* ===============================
     MAIN MEDIA
  =============================== */

  .right-panel {
    position: absolute;

    top:
      var(--mobile-header-height);

    left: 0;

    width: 100vw;

    height: calc(
      100dvh
      - var(--mobile-header-height)
      - var(--mobile-footer-height)
      - var(--mobile-drawer-strip-height)
    );

    overflow: hidden;
  }


  .carousel {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    overflow-x: hidden;
    overflow-y: auto;

    -webkit-overflow-scrolling:
      touch;

    scroll-behavior: auto;
  }


  /* ===============================
     THUMBNAILS
  =============================== */

  .thumbnails {
    position: fixed;

    top: calc(
      var(--mobile-header-height)
      + var(--margin)
    );

    left: var(--margin);

    right: auto;
    bottom: auto;

    z-index: 50;

    display: flex;
    flex-direction: column;

    align-items: flex-start;

    width: 40px;

    gap: 0;

    overflow: visible;

    opacity: 1;

    pointer-events: auto;
  }


  .thumbnail {
    position: relative;

    flex: 0 0 auto;

    width: 40px;
    height: auto;

    margin: 0;
    padding: 0;

    overflow: hidden;
  }


  .thumbnail:hover img,
  .thumbnail:hover video,
  .thumbnail:hover canvas {
    filter: none;
  }

  .thumbnail:hover::after {
    opacity: 0;
  }


  .thumbnail:active img,
  .thumbnail:active video,
  .thumbnail:active canvas {
    filter:
      grayscale(1)
      contrast(1000%);
  }

  .thumbnail:active::after {
    opacity: 1;
  }


  .thumbnail.is-active img,
  .thumbnail.is-active video,
  .thumbnail.is-active canvas {
    filter:
      grayscale(1)
      contrast(1000%);
  }

  .thumbnail.is-active::after {
    opacity: 1;
  }


  /* ===============================
     WHITE DRAWER STRIP
  =============================== */

  .site::after {
    content: "";

    position: fixed;

    left: 0;
    right: 0;

    bottom:
      var(--mobile-footer-height);

    z-index: 55;

    height:
      var(--mobile-drawer-strip-height);

    background:
      var(--background);

    pointer-events: none;
  }


  /* ===============================
     DRAWER
  =============================== */

  .drawer {
    position: fixed;

    top: auto;

    left: var(--margin);
    right: var(--margin);

    bottom:
      var(--mobile-footer-height);

    z-index: 100;

    width: calc(
      100vw
      - var(--margin) * 2
    );

    height: 8px;

    transform: none;

    overflow: hidden;

    background:
      var(--accent);

    cursor: pointer;

    transition:
      height
        var(--drawer-duration)
        var(--drawer-ease),

      background-color
        0.10s ease 0.35s;
  }


  .drawer.is-open {
    height: 50dvh;

    background:
      var(--drawer-background);

    cursor: default;

    transition:
      height
        var(--drawer-duration)
        var(--drawer-ease),

      background-color
        0.20s ease 0.08s;
  }


  .drawer.is-intro {
    height: 50dvh;

    background:
      var(--drawer-background);

    transition: none;
  }


  .drawer-content {
    width: 100%;
    height: 100%;
  }


  /* ===============================
     DRAWER TOP
  =============================== */

  .about-label,
  .project-info-label {
    position: absolute;

    top: var(--margin);
    left: var(--margin);

    z-index: 5;
  }


  .drawer-switch {
    position: absolute;

    top: var(--margin);
    right: var(--margin);
  }


  /* ===============================
     ALL PROJECTS
  =============================== */

  .projects-grid {
    position: absolute;

    top:
      var(--mobile-content-top);

    left: var(--margin);
    right: var(--margin);

    bottom: 55px;

    display: flex;

    flex-direction: column;
    flex-wrap: nowrap;

    justify-content: flex-start;
    align-content: flex-start;

    gap: 2px;

    overflow-y: auto;
  }


  .project-index-item {
    display: grid;

    grid-template-columns:
      max-content
      minmax(0, 1fr);

    column-gap: 5px;

    width: 100%;

    align-items: start;
  }


  .index-content {
    width: 100%;

    max-width: none;
  }


  .index-title {
    line-height:
      var(--line-height);
  }


  .index-action-container {
    min-height: 0;

    line-height:
      var(--line-height);
  }


  .project-index-item.is-active {
    margin-bottom: 2px;
  }


  .index-view {
    display: none;
  }


  /* ===============================
     ABOUT
  =============================== */

  .about-layout {
    position: absolute;

    top:
      var(--mobile-content-top);

    left: var(--margin);
    right: var(--margin);

    bottom: 55px;

    display: block;

    overflow-y: auto;
  }


  .about-copy {
    max-width: none;
  }


  /* ===============================
     PROJECT INFO
  =============================== */

  .project-info-layout {
    position: absolute;

    top:
      var(--mobile-content-top);

    left: var(--margin);
    right: var(--margin);

    bottom: 55px;

    display: block;

    overflow-y: auto;
  }


  .project-info-main {
    max-width: none;
  }


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

  .drawer-footer {
    left: var(--margin);

    bottom: var(--margin);
  }


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

  .site-name,
  .site-footer {
    display: flex;

    position: fixed;

    bottom: 0;

    z-index: 80;

    width: auto;

    height:
      var(--mobile-footer-height);

    margin: 0;
    padding: 0;

    align-items: center;

    line-height:
      var(--line-height);

    pointer-events: none;
  }


  .site-name::before {
    content: "";

    position: fixed;

    left: 0;
    right: 0;
    bottom: 0;

    z-index: -1;

    height:
      var(--mobile-footer-height);

    background:
      var(--background);
  }


  .site-name {
    left: var(--margin);
    right: auto;

    text-align: left;
  }


  .site-footer {
    left: auto;
    right: var(--margin);

    justify-content: flex-end;

    text-align: right;
  }

}