/* DOYJO animated H1 titles */
.doyjo-letter-heading {
  position: relative;
  overflow: visible;
  text-rendering: geometricPrecision;
}

.doyjo-heading-visual {
  display: inline;
  color: inherit;
}

.doyjo-heading-word {
  display: inline-block;
  white-space: nowrap;
}

.doyjo-heading-letter {
  position: relative;
  display: inline-block;
  color: var(--doyjo-heading-rest, currentColor);
  transform: translateZ(0);
  transform-origin: 50% 76%;
  backface-visibility: hidden;
  -webkit-font-smoothing: antialiased;
}

.doyjo-letter-heading.is-armed:not(.is-visible)
  .doyjo-heading-letter {
  opacity: 0;
  filter: blur(5px);
  transform: translate3d(0, 0.3em, 0) scale(0.62);
}

.doyjo-letter-heading.is-visible:not(.is-settled):not(.is-color-replay)
  .doyjo-heading-letter {
  animation: doyjo-letter-zoom-in 1120ms
    cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: var(--doyjo-letter-delay, 0ms);
  will-change: opacity, filter, color, transform;
}

.doyjo-letter-heading.is-settled
  .doyjo-heading-letter {
  opacity: 1;
  filter: none;
  color: var(--doyjo-heading-rest, currentColor);
  transform: none;
  animation: none;
  will-change: auto;
  transition: color 440ms ease;
}

@keyframes doyjo-letter-zoom-in {
  0% {
    opacity: 0;
    filter: blur(5px);
    color: var(--doyjo-letter-accent, var(--doyjo-electric));
    transform: translate3d(0, 0.3em, 0) scale(0.62);
  }

  62% {
    opacity: 1;
    filter: blur(0);
    color: var(--doyjo-letter-accent, var(--doyjo-electric));
    transform: translate3d(0, -0.035em, 0) scale(1.085);
  }

  100% {
    opacity: 1;
    filter: none;
    color: var(--doyjo-heading-rest, currentColor);
    transform: none;
  }
}

/* Hover repeats only the color wave; text stays visible and still. */
.doyjo-letter-heading.is-visible.is-settled.is-color-replay
  .doyjo-heading-letter {
  opacity: 1;
  filter: none;
  transform: none;
  animation: doyjo-letter-color-replay 1120ms ease-in-out both;
  animation-delay: var(--doyjo-letter-delay, 0ms);
  will-change: color;
  transition: none;
}

@keyframes doyjo-letter-color-replay {
  0%, 100% {
    color: var(--doyjo-heading-rest, currentColor);
  }

  28%, 62% {
    color: var(--doyjo-letter-accent, var(--doyjo-electric));
  }
}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {
  .doyjo-letter-heading .doyjo-heading-letter {
    opacity: 1 !important;
    filter: none !important;
    color: var(--doyjo-heading-rest, currentColor) !important;
    transform: none !important;
    animation: none !important;
    transition: none !important;
  }
}
.doyjo-heading-accessible {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
  user-select: none !important;
}

/* Excel Dental case study: show complete saved screenshot evidence. */
body.postid-28 .doyjo-gallery-image {
  display: flex;
  flex-direction: column;
}
body.postid-28 .doyjo-gallery-image .doyjo-browser-bar {
  flex: 0 0 24px;
}
body.postid-28 .doyjo-gallery-image img {
  flex: 1 1 auto;
  width: 100%;
  height: 0 !important;
  min-height: 0;
  aspect-ratio: auto !important;
  object-fit: contain !important;
  object-position: center;
  background: #f2f6fa;
}

body.postid-28 .doyjo-project-editor-content p:has(> a.doyjo-button) {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 18px;
}
body.postid-28 .doyjo-project-editor-content table th,
body.postid-28 .doyjo-project-editor-content table td {
  padding: 8px 3px;
  border-bottom: 1px solid #dce5ee;
}

/* WebHostXTC and WebsiteRepairmen: preserve complete screenshot evidence. */
body:is(.postid-1347, .postid-1348) .doyjo-gallery-image {
  display: flex;
  flex-direction: column;
}
body:is(.postid-1347, .postid-1348) .doyjo-gallery-image .doyjo-browser-bar {
  flex: 0 0 24px;
}
body:is(.postid-1347, .postid-1348) .doyjo-gallery-image img {
  flex: 1 1 auto;
  width: 100%;
  height: 0 !important;
  min-height: 0;
  aspect-ratio: auto !important;
  object-fit: contain !important;
  object-position: center;
  background: #f2f6fa;
}
body:is(.postid-1347, .postid-1348) .doyjo-project-editor-content table th,
body:is(.postid-1347, .postid-1348) .doyjo-project-editor-content table td {
  padding: 8px 4px;
  border-bottom: 1px solid #dce5ee;
  text-align: left;
}