: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;
}

/* ---- Scrolling gallery viewport ----
   Unlike the rest of the site (a fixed 2560x1440 canvas scaled to fit and
   never scrolled), this page's content can run past one screen once more
   than 6 works exist, so it scrolls — the stage is scaled to fit the
   window WIDTH only and a sizer element carries the real scroll height. */
.fx-gallery-viewport {
  position: fixed;
  inset: 0;
  overflow-y: auto;
  overflow-x: hidden;
  background: #fff;
  cursor: url("assets/cursor/cursor.png") 32 25, auto;
}

.fx-gallery-sizer {
  position: relative;
  width: 100%;
}

.fx-gallery-viewport .figma-stage {
  position: absolute;
  left: 50%;
  top: 0;
  width: 2560px;
  transform-origin: top center;
}

.fx-gallery-viewport .figma-stage > * {
  position: absolute;
}

.fx-gallery-card {
  position: absolute;
  display: block;
  width: 650px;
  height: 491px;
  border: 0;
  margin: 0;
  padding: 0;
  background: transparent;
  cursor: url("assets/cursor/cursor-pointer.png") 23 28, pointer;
  opacity: 0;
  transform: translateY(36px);
  transition: opacity 620ms cubic-bezier(0.22, 1, 0.36, 1), transform 620ms cubic-bezier(0.22, 1, 0.36, 1);
}

.fx-gallery-card.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.fx-gallery-card img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* Admin-registered works don't come pre-cropped like the hand-torn X2D
   thumbnail PNG, so they get the same torn-paper silhouette applied live
   via a reusable mask -- every new work reads as "the same treatment",
   without needing the admin to pre-edit each photo. */
.fx-gallery-card--masked img {
  object-fit: cover;
  mask-image: url("assets/figma/design/gallery-torn-mask.svg");
  -webkit-mask-image: url("assets/figma/design/gallery-torn-mask.svg");
  mask-size: cover;
  -webkit-mask-size: cover;
  mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;
  mask-position: center;
  -webkit-mask-position: center;
}

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

.fx-gallery-badge {
  position: absolute;
  pointer-events: none;
  transition: transform 260ms cubic-bezier(0.22, 1, 0.36, 1);
}

.fx-gallery-card:hover .fx-gallery-badge,
.fx-gallery-card:focus-visible .fx-gallery-badge {
  transform: rotate(-10deg) scale(1.1);
}

.fx-gallery-caption {
  position: absolute;
  width: 650px;
  margin: 0;
  text-align: center;
  font-family: "Griun Simsimche", cursive;
  font-size: 30px;
  letter-spacing: 2.4px;
  color: #242424;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 620ms cubic-bezier(0.22, 1, 0.36, 1), transform 620ms cubic-bezier(0.22, 1, 0.36, 1), color 200ms ease;
}

.fx-gallery-caption.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.fx-gallery-card:hover + .fx-gallery-caption,
.fx-gallery-card:focus-visible + .fx-gallery-caption {
  color: var(--accent, #3a6524);
}

.fx-gallery-card--placeholder {
  cursor: default;
}

.fx-gallery-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 3px dashed #d8d8d8;
  border-radius: 12px;
  font-family: "Griun Simsimche", cursive;
  font-size: 28px;
  letter-spacing: 2px;
  color: #b8b8b8;
  transition: border-color 260ms ease, color 260ms ease;
}

.fx-gallery-card--placeholder:hover .fx-gallery-placeholder,
.fx-gallery-card--placeholder:focus-visible .fx-gallery-placeholder {
  border-color: var(--accent, #3a6524);
  color: var(--accent, #3a6524);
}

.fx-gallery-empty {
  position: absolute;
  left: 0;
  width: 2560px;
  text-align: center;
  font-family: "Ownglyph okticon", cursive;
  font-size: 60px;
  color: #a8a8a8;
}

@media (prefers-reduced-motion: reduce) {
  .fx-gallery-card,
  .fx-gallery-caption,
  .fx-gallery-badge,
  .fx-gallery-card img {
    transition: none;
  }
}

/* Persistent bottom-center category switcher -- the same visual "always-on
   bottom icon" component the case-study back button uses (.fx-story-back in
   design-story.css), but on the 2D/3D/Commission gallery pages it always means
   "current category" and hovering near it reveals the two sibling
   categories to either side so you can jump directly between them, rather
   than always meaning "go back". Content (icons/hrefs) is filled in by
   initDesignNav() in design-gallery.js from the page's own
   window.GALLERY_CATEGORY. */
.fx-design-nav {
  position: fixed;
  left: 50%;
  bottom: 16px;
  transform: translateX(-50%);
  z-index: 30;
  width: 280px;
  height: 96px;
  /* Was pointer-events:none (relying only on the current/side icons'
     own pointer-events:auto), but that left a dead strip between the
     center icon and each side icon with no hoverable element at all --
     moving the pointer from center toward a side icon crossed that gap
     first, which read as leaving .fx-design-nav entirely and closed the
     cluster before a click could land. The whole box is the intended
     hover/hit area, so it needs pointer-events itself. */
  pointer-events: auto;
}

.fx-design-nav-current,
.fx-design-nav-side {
  position: absolute;
  top: 50%;
  display: block;
  pointer-events: auto;
  cursor: url("assets/cursor/cursor-pointer.png") 23 28, pointer;
}

.fx-design-nav-current {
  left: 50%;
  transform: translate(-50%, -50%);
  transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

.fx-design-nav:hover .fx-design-nav-current,
.fx-design-nav:focus-within .fx-design-nav-current {
  transform: translate(-50%, -50%) scale(1.12);
}

.fx-design-nav-current img,
.fx-design-nav-side img {
  display: block;
  width: 52px;
  height: 52px;
  object-fit: contain;
  pointer-events: none;
  transition: transform 200ms ease;
}

/* Sibling categories stay invisible and non-interactive until the whole
   cluster is hovered/focused, then fade+slide in from just behind the
   center icon -- and reverse smoothly (not an instant hide) on mouse-out. */
.fx-design-nav-prev,
.fx-design-nav-next {
  opacity: 0;
  pointer-events: none;
  transition: opacity 260ms ease, transform 260ms cubic-bezier(0.22, 1, 0.36, 1);
}

.fx-design-nav-prev {
  right: calc(50% + 44px);
  transform: translate(18px, -50%);
}

.fx-design-nav-next {
  left: calc(50% + 44px);
  transform: translate(-18px, -50%);
}

.fx-design-nav:hover .fx-design-nav-prev,
.fx-design-nav:focus-within .fx-design-nav-prev {
  opacity: 1;
  pointer-events: auto;
  transform: translate(0, -50%);
}

.fx-design-nav:hover .fx-design-nav-next,
.fx-design-nav:focus-within .fx-design-nav-next {
  opacity: 1;
  pointer-events: auto;
  transform: translate(0, -50%);
}

/* Point-color hover reaction on whichever side icon the pointer is actually
   over (src swapped black->pink by initDesignNav, same idle/active pattern
   design.html's category cards already use) plus a small lift, distinct
   from the whole-cluster reveal above. */
.fx-design-nav-side:hover img,
.fx-design-nav-side:focus-visible img {
  transform: scale(1.14);
}

/* Category-name hint, same fade-in-a-pill treatment as the case-study back
   button's "돌아가기" tooltip (.fx-story-back-tip in design-story.css) --
   here each of the three icons gets its own label above itself. */
.fx-design-nav-tip {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 12px);
  transform: translateX(-50%) translateY(6px);
  white-space: nowrap;
  background: #242424;
  color: #fff;
  font-family: "Griun Simsimche", cursive;
  font-size: 14px;
  letter-spacing: 0.5px;
  padding: 5px 14px;
  border-radius: 999px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 220ms ease, transform 220ms ease;
}

.fx-design-nav-current:hover .fx-design-nav-tip,
.fx-design-nav-current:focus-visible .fx-design-nav-tip,
.fx-design-nav-side:hover .fx-design-nav-tip,
.fx-design-nav-side:focus-visible .fx-design-nav-tip {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

@media (max-width: 768px) {
  /* Hover-to-reveal doesn't translate to touch, and the mobile layout
     already has its own "‹ Design" text back-link -- so this stays a
     desktop-only affordance. */
  .fx-design-nav {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .fx-design-nav-current,
  .fx-design-nav-prev,
  .fx-design-nav-next,
  .fx-design-nav-current img,
  .fx-design-nav-side img,
  .fx-design-nav-tip {
    transition: none;
  }
}