/* V56 — viewport-anchored project title, shifted left on desktop.
   The original React title remains as the live data source; the visible copy is
   rendered outside the transformed WebGL wrapper so its position is stable. */

.project-gothic-title-v56 {
  --project-title-color: #ffffff;
  position: fixed;
  z-index: 36;
  top: 43.5%;
  left: 40vw;
  width: min(66vw, 980px);
  max-width: calc(100vw - 32px);
  margin: 0;
  padding: 0 10px;
  transform: translate(-50%, -50%);
  pointer-events: none;
  user-select: none;
  text-align: center;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: visible;
  color: var(--project-title-color);
  font-family: "Copperplate Gothic Bold", "Century Gothic", "Franklin Gothic Medium", "Arial Narrow", fantasy;
  font-size: clamp(1.35rem, 3.9vw, 4.05rem);
  font-weight: 400;
  font-style: normal;
  line-height: .92;
  letter-spacing: .045em;
  text-shadow:
    0 2px 0 rgba(0, 0, 0, .76),
    0 0 12px currentColor,
    0 0 26px rgba(0, 0, 0, .6);
  -webkit-text-stroke: .35px rgba(255, 255, 255, .18);
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, .5));
  opacity: .97;
  will-change: opacity, transform, filter;
}

.project-gothic-title-v56[hidden] {
  display: none !important;
}

.project-gothic-title-v56.is-changing {
  animation: project-title-enter-v56 .46s cubic-bezier(.22, 1, .36, 1) both;
}

/* Hide the transformed React copy only after the safe viewport overlay exists. */
html.v56-project-title-ready .project-gothic-title {
  opacity: 0 !important;
  visibility: hidden !important;
  text-shadow: none !important;
  pointer-events: none !important;
}

@keyframes project-title-enter-v56 {
  0% {
    opacity: 0;
    filter: blur(7px) drop-shadow(0 6px 14px rgba(0, 0, 0, .5));
    transform: translate(calc(-50% + 28px), -50%) scale(.985);
  }
  100% {
    opacity: .97;
    filter: blur(0) drop-shadow(0 6px 14px rgba(0, 0, 0, .5));
    transform: translate(-50%, -50%) scale(1);
  }
}

@media (min-width: 1800px) {
  .project-gothic-title-v56 {
    left: 38vw;
    width: min(64vw, 1120px);
    font-size: clamp(1.5rem, 3.55vw, 4.45rem);
  }
}

@media (min-width: 768px) and (max-width: 1100px) {
  .project-gothic-title-v56 {
    left: 44vw;
    width: min(86vw, 840px);
    font-size: clamp(1.25rem, 4.6vw, 3.15rem);
  }
}

@media (max-width: 767px) {
  .project-gothic-title-v56 {
    top: 39%;
    left: 50vw;
    width: calc(100vw - 18px);
    max-width: calc(100vw - 18px);
    padding: 0 7px;
    white-space: normal;
    overflow-wrap: anywhere;
    font-size: clamp(1.04rem, 5.45vw, 1.9rem);
    line-height: .96;
    letter-spacing: .022em;
    text-shadow:
      0 1px 0 rgba(0, 0, 0, .8),
      0 0 9px currentColor,
      0 0 18px rgba(0, 0, 0, .66);
  }
}

@media (orientation: landscape) and (max-height: 600px) {
  .project-gothic-title-v56 {
    top: 40%;
    left: 43vw;
    width: min(84vw, 900px);
    white-space: nowrap;
    font-size: clamp(1rem, 3.75vw, 2.45rem);
    letter-spacing: .03em;
  }
}

@media (prefers-reduced-motion: reduce) {
  .project-gothic-title-v56 {
    animation: none !important;
    transition: none !important;
    filter: none;
  }
}