:root {
  --accent: #3a6524;
}

.figma-stage img {
  pointer-events: none;
}

.fx-home-hit {
  display: block;
  cursor: url("assets/cursor/cursor-pointer.png") 23 28, pointer;
}

.fx-home-hit > * {
  position: absolute;
}

.fx-home-label {
  font-size: 21.951px;
  letter-spacing: 1.7561px;
  transition: color 180ms ease;
}

.fx-home-hit:hover .fx-home-label,
.fx-home-hit:focus-visible .fx-home-label {
  color: var(--accent);
}

.fx-home-hit:hover img,
.fx-home-hit:focus-visible img {
  transform: translateY(-4px);
  transition: transform 180ms ease;
}

.fx-welcome {
  font-family: "Griun Simsimche", cursive;
  font-size: 30px;
  letter-spacing: 2.4px;
}

.fx-tab-group {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.fx-tab-group > * {
  position: absolute;
}

.fx-tab-hit {
  display: block;
  border: 0;
  margin: 0;
  padding: 0;
  background: transparent;
  pointer-events: auto;
  cursor: url("assets/cursor/cursor-pointer.png") 23 28, pointer;
}

.fx-tab-icon {
  width: 100%;
  height: 100%;
  display: block;
  transition: transform 180ms ease;
}

.fx-tab-group[data-active-tab="photos"] [data-tab="photos"] .fx-tab-icon,
.fx-tab-group[data-active-tab="film"] [data-tab="film"] .fx-tab-icon,
.fx-tab-group[data-active-tab="design"] [data-tab="design"] .fx-tab-icon,
.fx-tab-group[data-active-tab="development"] [data-tab="development"] .fx-tab-icon,
.fx-tab-group[data-active-tab="contact"] [data-tab="contact"] .fx-tab-icon {
  transform: translateY(-4px) scale(1.08);
}

.fx-tab-label {
  position: absolute;
  left: 50%;
  top: calc(100% + 14px);
  transform: translateX(-50%);
  white-space: nowrap;
  font-family: "Griun Simsimche", cursive;
  font-size: 21.951px;
  letter-spacing: 1.7561px;
  opacity: 0;
  transition: opacity 160ms ease;
  pointer-events: none;
  z-index: 1;
}

.fx-tab-group[data-active-tab="photos"] [data-label="photos"],
.fx-tab-group[data-active-tab="film"] [data-label="film"],
.fx-tab-group[data-active-tab="design"] [data-label="design"],
.fx-tab-group[data-active-tab="development"] [data-label="development"],
.fx-tab-group[data-active-tab="contact"] [data-label="contact"] {
  opacity: 1;
}

.fx-design-card {
  display: block;
  cursor: url("assets/cursor/cursor-pointer.png") 23 28, pointer;
  transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

.fx-design-card:hover,
.fx-design-card:focus-visible {
  transform: translateY(-8px);
}

/* Each category gets its own idle-time "surprise" on hover, playing on
   what the category actually means (3D spins in space, 2D stays flat and
   just wobbles, commission jiggles like a product on a shelf). */
.fx-design-card[data-card="3d"] {
  perspective: 1200px;
}

.fx-design-icon {
  width: 100%;
  height: 100%;
  display: block;
  /* The card boxes are sized to each icon's own original aspect ratio
     (3D/2D/Commission were each a differently-proportioned hand-drawn shape) --
     contain keeps a replacement icon centered and undistorted even if its
     own native aspect ratio doesn't match the box exactly. */
  object-fit: contain;
  pointer-events: none;
  opacity: 1;
  transition: opacity 220ms ease;
}

.fx-design-card[data-card="3d"] .fx-design-icon {
  transform-style: preserve-3d;
}

.fx-design-card[data-card="3d"]:hover .fx-design-icon,
.fx-design-card[data-card="3d"]:focus-visible .fx-design-icon {
  animation: fx-spin-3d 1.6s linear infinite;
}

.fx-design-card[data-card="2d"]:hover .fx-design-icon,
.fx-design-card[data-card="2d"]:focus-visible .fx-design-icon {
  animation: fx-wobble-2d 0.85s ease-in-out infinite;
}

.fx-design-card[data-card="commission"]:hover .fx-design-icon,
.fx-design-card[data-card="commission"]:focus-visible .fx-design-icon {
  animation: fx-jiggle-commission 0.6s ease-in-out infinite;
}

@keyframes fx-spin-3d {
  from { transform: rotateY(0deg); }
  to { transform: rotateY(360deg); }
}

@keyframes fx-wobble-2d {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(-5deg); }
  75% { transform: rotate(5deg); }
}

@keyframes fx-jiggle-commission {
  0%, 100% { transform: translateY(0) rotate(0deg) scale(1); }
  50% { transform: translateY(-8px) rotate(-3deg) scale(1.05); }
}

.fx-design-label {
  font-family: "Griun Simsimche", cursive;
  font-size: 30px;
  letter-spacing: 2.4px;
  color: #242424;
  opacity: 1;
  transition: color 220ms ease, opacity 220ms ease;
}

/* Hovering one card dims the other two — icon fades to 30% opacity (its
   black artwork), label fades to 30% opacity, matching the Figma hover
   states exactly. */
.figma-stage[data-hover-card="3d"] .fx-design-icon:not([data-idle*="3d"]),
.figma-stage[data-hover-card="3d"] .fx-design-label:not([data-card="3d"]),
.figma-stage[data-hover-card="2d"] .fx-design-icon:not([data-idle*="2d"]),
.figma-stage[data-hover-card="2d"] .fx-design-label:not([data-card="2d"]),
.figma-stage[data-hover-card="commission"] .fx-design-icon:not([data-idle*="commission"]),
.figma-stage[data-hover-card="commission"] .fx-design-label:not([data-card="commission"]) {
  opacity: 0.3;
}

.figma-stage[data-hover-card="3d"] .fx-design-label[data-card="3d"],
.figma-stage[data-hover-card="2d"] .fx-design-label[data-card="2d"],
.figma-stage[data-hover-card="commission"] .fx-design-label[data-card="commission"] {
  color: #ff2890;
}

@media (prefers-reduced-motion: reduce) {
  .fx-design-card {
    transition: none;
  }

  .fx-design-icon {
    animation: none !important;
  }
}