/* =============================================================================
   HODHOD Home section illustrations — layout & optical placement
   Approved Home illustration layout & optical placement
============================================================================= */

.hx-illu {
  pointer-events: none;
  line-height: 0;
  user-select: none;
}

.hx-illu img,
.hx-illu svg {
  display: block;
  width: 100%;
  height: auto;
}

/* ---------- WORK ---------- */
.hx-work-host {
  position: relative;
  --hx-work-size: clamp(176px, 19vw, 212px);
  --hx-work-top: -32px;
  --hx-work-gap: 16px;
  --hx-work-header: 7.25rem;
}

.hx-illu--work {
  position: absolute;
  top: var(--hx-work-top);
  right: 0;
  width: var(--hx-work-size);
  opacity: 0.94;
  pointer-events: auto;
  cursor: pointer;
  border-radius: 16px;
  outline: none;
}

.hx-work-host > h2,
.hx-work-host > .section-intro {
  max-width: min(62ch, calc(100% - 13.75rem));
}

.hx-work-host > .section-intro {
  margin-bottom: max(
    24px,
    calc(var(--hx-work-size) + var(--hx-work-top) + var(--hx-work-gap) - var(--hx-work-header))
  );
}

.hx-illu--work:focus-visible {
  box-shadow: 0 0 0 2px rgba(234, 109, 30, 0.55);
}

.hx-illu--work #work-cursor,
.hx-illu--work #work-card-1,
.hx-illu--work #work-card-2,
.hx-illu--work #work-card-3,
.hx-illu--work #work-action-1,
.hx-illu--work #work-action-2 {
  transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

.hx-illu--work #work-action-1,
.hx-illu--work #work-action-2 {
  transform-box: fill-box;
  transform-origin: center;
}

.work-preview:hover .hx-illu--work {
  opacity: 1;
}

.work-preview {
  padding-bottom: 28px;
}

.hx-work-host .section-action {
  margin-top: 22px;
  margin-bottom: 0;
}

/* ---------- ABOUT ---------- */
.hx-illu--about {
  width: clamp(276px, 29.5vw, 334px);
  margin: 6px 0 16px;
  opacity: 0.96;
  pointer-events: auto;
  cursor: pointer;
  border-radius: 16px;
  outline: none;
  align-self: start;
  overflow: visible;
}

.hx-about-host .home-about-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.hx-about-host.home-about-card {
  padding-bottom: 28px;
}

.hx-about-host .home-about-panels {
  padding-bottom: 0;
}

.hx-illu--about:focus-visible {
  box-shadow: 0 0 0 2px rgba(234, 109, 30, 0.55);
}

@keyframes about-node-pulse {
  0%, 100% { transform: scale(1); }
  45% { transform: scale(1.06); }
}

.hx-illu--about #about-option-1,
.hx-illu--about #about-option-2,
.hx-illu--about #about-option-3,
.hx-illu--about #about-option-4 {
  transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: 0ms;
}

.hx-illu--about #about-path-4 {
  transition: stroke 220ms ease, stroke-opacity 220ms ease, stroke-width 220ms ease;
}

.hx-illu--about #about-option-4 rect:nth-of-type(2) {
  transition: fill 220ms ease;
}

.hx-illu--about #about-node {
  transform-box: fill-box;
  transform-origin: center;
}

.hx-illu--about:hover #about-option-1,
.hx-illu--about:focus-visible #about-option-1,
.home-about-card:hover .hx-illu--about #about-option-1 {
  transform: translate(4px, -4px);
  transition-delay: 0ms;
}

.hx-illu--about:hover #about-option-2,
.hx-illu--about:focus-visible #about-option-2,
.home-about-card:hover .hx-illu--about #about-option-2 {
  transform: translate(5px, 1px);
  transition-delay: 40ms;
}

.hx-illu--about:hover #about-option-3,
.hx-illu--about:focus-visible #about-option-3,
.home-about-card:hover .hx-illu--about #about-option-3 {
  transform: translate(-4px, 5px);
  transition-delay: 80ms;
}

.hx-illu--about:hover #about-option-4,
.hx-illu--about:focus-visible #about-option-4,
.home-about-card:hover .hx-illu--about #about-option-4 {
  transform: translate(-2px, -2px);
  transition-delay: 120ms;
}

.hx-illu--about:hover #about-option-4 rect:nth-of-type(2),
.hx-illu--about:focus-visible #about-option-4 rect:nth-of-type(2),
.home-about-card:hover .hx-illu--about #about-option-4 rect:nth-of-type(2) {
  fill: #EA6D1E;
}

.hx-illu--about:hover #about-path-4,
.hx-illu--about:focus-visible #about-path-4,
.home-about-card:hover .hx-illu--about #about-path-4 {
  stroke: #EA6D1E;
  stroke-opacity: 1;
  stroke-width: 3.5;
}

.hx-illu--about:hover #about-node,
.hx-illu--about:focus-visible #about-node,
.home-about-card:hover .hx-illu--about #about-node {
  animation: about-node-pulse 160ms ease-out 120ms 1;
}

.home-about-card:hover .hx-illu--about {
  opacity: 1;
}

/* ---------- STRENGTHS ---------- */
/* Heading + LEGO share one compact header band; cards sit close beneath.
   The SVG viewBox has ~23% empty top/bottom — collapse that so the LEGO
   does not invent a tall empty column under the heading. */
.hx-strengths-host {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--hx-str-size, clamp(200px, 21.5vw, 240px));
  grid-template-rows: auto auto auto;
  column-gap: 20px;
  row-gap: 0;
  align-items: start;
  --hx-str-size: clamp(200px, 21.5vw, 240px);
}

.portfolio-strengths-card.hx-strengths-host {
  overflow: hidden;
  padding-bottom: 26px;
}

.hx-strengths-host > .home-about-kicker {
  grid-column: 1 / -1;
  grid-row: 1;
  /* Divider → heading band: ~55–70px */
  margin-bottom: 56px;
}

.portfolio-strengths-card.hx-strengths-host > h2 {
  grid-column: 1;
  grid-row: 2;
  max-width: none;
  margin: 0;
  align-self: start;
  padding-right: 8px;
  padding-top: 2px;
}

.hx-illu--strengths {
  position: relative;
  grid-column: 2;
  grid-row: 2;
  top: auto;
  right: auto;
  width: var(--hx-str-size);
  z-index: 1;
  opacity: 0.86;
  pointer-events: auto;
  cursor: pointer;
  border-radius: 16px;
  outline: none;
  overflow: visible;
  justify-self: end;
  align-self: start;
  /* SVG has ~23% empty top/bottom — align art with heading, drop empty foot */
  margin-top: calc(var(--hx-str-size) * -0.22);
  margin-right: 0;
  margin-bottom: calc(var(--hx-str-size) * -0.22);
  margin-left: 0;
}

.hx-illu--strengths:focus-visible {
  box-shadow: 0 0 0 2px rgba(234, 109, 30, 0.55);
}

.hx-strengths-host > .strength-grid {
  grid-column: 1 / -1;
  grid-row: 3;
  /* After the LEGO block (not mid-float): ~55–75px to cards */
  margin-top: 60px;
  padding: 0;
}

.hx-illu--strengths #piece-snap,
.hx-illu--strengths #strengths-structure {
  transition: transform 280ms cubic-bezier(0.22, 1, 0.36, 1);
}

.portfolio-strengths-card:hover .hx-illu--strengths,
.portfolio-strengths-card:focus-within .hx-illu--strengths {
  opacity: 0.96;
}

.portfolio-strengths-card:hover .hx-illu--strengths #piece-snap,
.portfolio-strengths-card:focus-within .hx-illu--strengths #piece-snap {
  transform: translate(-6.3px, 8.7px);
}

.portfolio-strengths-card:hover .hx-illu--strengths #strengths-structure,
.portfolio-strengths-card:focus-within .hx-illu--strengths #strengths-structure {
  transform: translateY(1px);
}

/* ---------- CONTACT ---------- */
.hx-contact-host {
  position: relative;
}

.hx-illu--contact {
  position: static;
  width: clamp(168px, 18vw, 204px);
  margin: 6px 0 16px;
  opacity: 0.84;
  pointer-events: auto;
  cursor: pointer;
  border-radius: 16px;
  outline: none;
  align-self: start;
  overflow: visible;
}

.hx-illu--contact:focus-visible {
  box-shadow: 0 0 0 2px rgba(234, 109, 30, 0.55);
}

.hx-contact-host .home-contact-left {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.hx-contact-host.home-contact-card {
  padding-bottom: 28px;
}

.hx-contact-host .home-contact-grid {
  padding-bottom: 0;
}

.hx-illu--contact #contact-letter {
  transform-box: fill-box;
  transform-origin: center;
  transition: transform 280ms cubic-bezier(0.22, 1, 0.36, 1);
}

.hx-illu--contact #contact-receiver-accent {
  transition: fill 280ms ease;
}

.hx-illu--contact #contact-sender-accent {
  transition: fill-opacity 280ms ease;
}

.hx-illu--contact:hover #contact-letter,
.hx-illu--contact:focus-visible #contact-letter,
.home-contact-card:hover .hx-illu--contact #contact-letter {
  transform: translate(10px, 8px) rotate(3deg);
}

.hx-illu--contact:hover #contact-receiver-accent,
.hx-illu--contact:focus-visible #contact-receiver-accent,
.home-contact-card:hover .hx-illu--contact #contact-receiver-accent {
  fill: #F39A62;
}

.hx-illu--contact:hover #contact-sender-accent,
.hx-illu--contact:focus-visible #contact-sender-accent,
.home-contact-card:hover .hx-illu--contact #contact-sender-accent {
  fill-opacity: 0.55;
}

.home-contact-card:hover .hx-illu--contact {
  opacity: 1;
}

@media (max-width: 1024px) {
  .hx-work-host {
    --hx-work-size: clamp(162px, 20vw, 190px);
  }
  .hx-illu--about {
    width: clamp(243px, 30vw, 294px);
  }
  .hx-strengths-host {
    --hx-str-size: clamp(180px, 22vw, 220px);
  }
  .hx-illu--contact {
    width: clamp(156px, 20vw, 186px);
  }
}

@media (max-width: 768px) {
  .hx-strengths-host {
    display: block;
  }

  .hx-illu--work,
  .hx-illu--about,
  .hx-illu--strengths,
  .hx-illu--contact {
    position: static;
    width: clamp(100px, 32vw, 130px);
    margin: 0 0 14px;
    opacity: 0.92;
    transform: none;
    justify-self: auto;
  }

  .hx-work-host > h2,
  .hx-work-host > .section-intro,
  .hx-strengths-host > h2 {
    max-width: none;
  }

  .hx-work-host > .section-intro {
    margin-bottom: 24px;
  }

  .hx-strengths-host > h2 {
    margin: 0 0 20px;
  }

  .hx-strengths-host > .home-about-kicker {
    margin-bottom: 18px;
  }

  .hx-strengths-host > .strength-grid {
    margin-top: 0;
  }
}

@media (max-width: 390px) {
  .hx-illu--work,
  .hx-illu--about,
  .hx-illu--strengths,
  .hx-illu--contact {
    width: clamp(90px, 36vw, 120px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hx-illu {
    transition: none;
  }

  .hx-illu--work #work-cursor,
  .hx-illu--work #work-card-1,
  .hx-illu--work #work-card-2,
  .hx-illu--work #work-card-3 {
    transition: none;
  }

  .hx-illu--work:hover #work-cursor,
  .hx-illu--work:focus-visible #work-cursor,
  .work-preview:hover .hx-illu--work #work-cursor,
  .hx-illu--work:hover #work-card-1,
  .hx-illu--work:focus-visible #work-card-1,
  .work-preview:hover .hx-illu--work #work-card-1 {
    transform: none;
  }

  .hx-illu--work #work-action-1 {
    fill: #F39A62;
    transition: none;
  }

  .hx-illu--about #about-option-1,
  .hx-illu--about #about-option-2,
  .hx-illu--about #about-option-3,
  .hx-illu--about #about-option-4 {
    transition: none;
  }

  .hx-illu--about:hover #about-option-1,
  .hx-illu--about:focus-visible #about-option-1,
  .home-about-card:hover .hx-illu--about #about-option-1,
  .hx-illu--about:hover #about-option-2,
  .hx-illu--about:focus-visible #about-option-2,
  .home-about-card:hover .hx-illu--about #about-option-2,
  .hx-illu--about:hover #about-option-3,
  .hx-illu--about:focus-visible #about-option-3,
  .home-about-card:hover .hx-illu--about #about-option-3,
  .hx-illu--about:hover #about-option-4,
  .hx-illu--about:focus-visible #about-option-4,
  .home-about-card:hover .hx-illu--about #about-option-4 {
    transform: none;
    transition-delay: 0ms;
  }

  .hx-illu--about:hover #about-node,
  .hx-illu--about:focus-visible #about-node,
  .home-about-card:hover .hx-illu--about #about-node {
    animation: none;
  }

  .hx-illu--contact #contact-letter {
    transition: none;
  }

  .hx-illu--contact:hover #contact-letter,
  .hx-illu--contact:focus-visible #contact-letter,
  .home-contact-card:hover .hx-illu--contact #contact-letter {
    transform: none;
  }

  .hx-illu--strengths #piece-snap,
  .hx-illu--strengths #strengths-structure {
    transition: none;
  }

  .portfolio-strengths-card:hover .hx-illu--strengths #piece-snap,
  .portfolio-strengths-card:focus-within .hx-illu--strengths #piece-snap,
  .portfolio-strengths-card:hover .hx-illu--strengths #strengths-structure,
  .portfolio-strengths-card:focus-within .hx-illu--strengths #strengths-structure {
    transform: none;
  }
}