: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-dev-card {
  display: block;
  text-decoration: none;
  color: inherit;
  cursor: url("assets/cursor/cursor-pointer.png") 23 28, pointer;
  transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

.fx-dev-card > * {
  position: absolute;
}

.fx-dev-card:hover,
.fx-dev-card:focus-visible {
  transform: translateY(-10px) scale(1.03);
}

.fx-dev-title {
  font-size: 70.732px;
  letter-spacing: 5.6585px;
}

.fx-dev-title-center {
  text-align: center;
  transform: translateX(-50%);
}

.fx-dev-subtitle {
  font-size: 35.366px;
  letter-spacing: 2.8293px;
}

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

/* ---- Mobile: colored scribble doodle behind each app icon ----
   Same doodle-tagshot.svg / doodle-smartpreview.svg the desktop cards
   draw full-size behind the icon -- each app has its own brand color baked
   into the SVG (blue / pink-red), which is why these get real per-app
   artwork here instead of the generic page-accent tint every other
   .fx-m-card-icon-wrap uses. */
.fx-m-card-doodle {
  position: absolute;
  inset: -14px;
  width: calc(100% + 28px);
  height: calc(100% + 28px);
  object-fit: contain;
  pointer-events: none;
  z-index: 0;
}

.fx-m-card-icon-wrap .fx-m-card-icon {
  position: relative;
  z-index: 1;
}