/* Interactive Desk Section Styles
   Author: Tim
   Description: Desk workspace with clickable interactive items
--------------------------------------------- */

/* Desk Section Container */
.desk-section {
  width: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

/* Override .top constraints when combined with desk-section */
.top.desk-section {
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(-50vw + 50%);
  padding: 0;
  position: relative;
}

.top.desk-section::before,
.top.desk-section::after {
  display: none;
}

/* Main Desk Wrapper */
.desk {
  width: 100vw;
  max-width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  min-height: 60vw;
  position: relative;
  overflow: hidden;
}

.top.desk-section .desk {
  width: 100vw;
  max-width: none;
}

/* Background Desk Image */
.desk-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  margin: 0 auto;
}

/* All Desk Items - Default Styles */
.desk img:not(.desk-img),
.desk-item {
  position: absolute;
  filter: drop-shadow(-5px 5px 5px rgba(0, 0, 0, 0.5));
  cursor: pointer;
  transition: transform 0.3s ease, filter 0.3s ease;
}

/* Hover Effect - Glow */
.desk img:not(.desk-img):hover,
.desk-item:hover,
.desk-item:hover img {
  filter: drop-shadow(-5px 5px 5px rgba(0, 0, 0, 0.5)) 
          drop-shadow(0 0 20px var(--color-accent-2));
}

/* Individual Item Positioning
--------------------------------------------- */

/* Notebook - Center, main focal point */
.notebook-img,
.notebook-link {
  width: 34vw;
  left: 40%;
  top: 30%;
}

/* Address Book - Bottom left */
.address-book-img,
.address-book-link {
  width: 18vw;
  left: 2%;
  bottom: 0;
}

/* Phone - Lower left area */
.phone-img,
.phone-link {
  width: 13vw !important;
  left: 20%;
  bottom: 16%;
}

/* Headphones - Bottom center, overlaps desk */
.headphones-img,
.headphones-link {
  z-index: 9;
  width: 23vw;
  left: 32%;
  bottom: 0%;
  transform: scale(1.15);
}

.headphones-img {
  mix-blend-mode: multiply;
}

/* Book - Right side, upper */
.book-img,
.book-link {
  width: 20vw;
  left: 76%;
  top: 24%;
}

/* Plant - Top right corner */
.plant-img,
.plant-link {
  width: 12vw;
  left: 74%;
  top: 5%;
}

/* Calculator - Bottom right */
.calculator-img,
.calculator-link {
  width: 14vw;
  left: 78%;
  bottom: -6%;
  z-index: 10;
}

/* Coffee Mug - Top center */
.coffee-img,
.coffee-link {
  width: 13vw;
  left: 40%;
  top: 5%;
}

/* Quotes Book - Top left */
.quotes-img,
.quotes-link {
  width: 34vw;
  left: 0%;
  top: 0;
}

/* Desk Item Links */
.desk-item {
  display: block;
  text-decoration: none;
}

/* Make images inside links fill the link container */
.desk-item img {
  width: 100%;
  height: auto;
  display: block;
}

/* Desk Tooltips Container - sits on top of all desk items */
.desk-tooltips-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 9999;
}

/* Desk Tooltips - Base Styles */
.desk-tooltip {
  position: absolute;
  pointer-events: none;
  opacity: 0;
  font-family: var(--font-primary);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-h3);
  white-space: nowrap;
  transition: opacity 0.3s ease, transform 0.3s ease;
  color: #fff;
  background: var(--color-main);
  padding: 0.5em 1em;
  transform: translateX(-50%) translateY(5px);
  text-align: center;
}

.desk-tooltip small {
  display: block;
  font-size: var(--font-size-h5);
  font-weight: var(--font-weight-normal);
  /* opacity: 0.9; */
  /* margin-top: 0.2em; */
}

/* Show tooltips on hover OR keyboard focus - using sibling selectors */
.address-book-link:hover ~ .desk-tooltips-container .tooltip-address-book,
.address-book-link:focus ~ .desk-tooltips-container .tooltip-address-book,
.book-link:hover ~ .desk-tooltips-container .tooltip-book,
.book-link:focus ~ .desk-tooltips-container .tooltip-book,
.calculator-link:hover ~ .desk-tooltips-container .tooltip-calculator,
.calculator-link:focus ~ .desk-tooltips-container .tooltip-calculator,
.headphones-link:hover ~ .desk-tooltips-container .tooltip-headphones,
.headphones-link:focus ~ .desk-tooltips-container .tooltip-headphones,
.notebook-link:hover ~ .desk-tooltips-container .tooltip-notebook,
.notebook-link:focus ~ .desk-tooltips-container .tooltip-notebook,
.phone-link:hover ~ .desk-tooltips-container .tooltip-phone,
.phone-link:focus ~ .desk-tooltips-container .tooltip-phone,
.plant-link:hover ~ .desk-tooltips-container .tooltip-trophy,
.plant-link:focus ~ .desk-tooltips-container .tooltip-trophy,
.coffee-link:hover ~ .desk-tooltips-container .tooltip-coffee,
.coffee-link:focus ~ .desk-tooltips-container .tooltip-coffee,
.quotes-link:hover ~ .desk-tooltips-container .tooltip-quotes,
.quotes-link:focus ~ .desk-tooltips-container .tooltip-quotes {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* Position tooltips - centered on each item
   Formula: left = item_left + (item_width / 2) */

/* Address book (Subscribe) - moved up and right */
.tooltip-address-book {
  left: 16%;
  bottom: 28%;
}

/* Book (Resources) - slightly right */
.tooltip-book {
  left: 89%;
  top: 40%;
}

/* Calculator (About) - slightly right */
.tooltip-calculator {
  left: 88%;
  bottom: 15%;
}

/* Headphones (Songs) */
.tooltip-headphones {
  left: 43%;
  bottom: 35%;
}

/* Notebook (Blog) - moved up and left more */
.tooltip-notebook {
  left: 70%;
  top: 50%;
}

/* Phone (Contact) - moved up and left */
.tooltip-phone {
  left: 36%;
  bottom: 43%;
}

/* Trophy (Favorites) */
.tooltip-trophy {
  left: 80%;
  top: 15%;
}

/* Coffee (Insights) */
.tooltip-coffee {
  left: 46%;
  top: 15%;
}

/* Quotes - moved significantly right */
.tooltip-quotes {
  left: 27%;
  top: 20%;
}

/* Hide tooltips on mobile/touch devices */
@media (max-width: 768px) {
  .desk-tooltip {
    display: none;
  }
}

/* Responsive Adjustments
--------------------------------------------- */
@media (max-width: 768px) {
  .desk {
    min-height: 80vw;
  }
}

@media (max-width: 480px) {
  .desk {
    min-height: 100vw;
  }
}