/*
 * Styles for the vanilla JS replacements of React/Framer/Swiper behaviour.
 * site.css is the compiled Tailwind output from the Next.js build.
 */

/* Scroll reveal (replaces ScrollRevealWrapper / ScrollRevealItem).
   Only hidden when JS is running, so content is visible without it. */
html.js [data-reveal] {
  opacity: 0;
}
html.js [data-reveal='item'] {
  transform: translateY(var(--reveal-offset, 20px));
}
html.js [data-reveal].is-revealed {
  opacity: 1;
  transform: none;
  transition:
    opacity var(--reveal-duration, 1s) cubic-bezier(0.25, 0.1, 0.35, 1) var(--reveal-delay, 0s),
    transform var(--reveal-duration, 1s) cubic-bezier(0.25, 0.1, 0.35, 1) var(--reveal-delay, 0s);
}
html.js [data-reveal='wrap'].is-revealed {
  --reveal-duration: 0.3s;
}
html.js [data-reveal].is-instant {
  transition: none !important;
}

/* Word-by-word heading reveal (Layout484) */
html.js [data-word] {
  opacity: 0.01;
}

/* Vertical word rotator (replaces Swiper TextSlider) */
[data-rotator] {
  position: relative;
  overflow: hidden;
  vertical-align: bottom;
}
[data-rotator] .swiper-wrapper {
  display: flex;
  flex-direction: column;
  will-change: transform;
}
[data-rotator] .swiper-slide {
  flex-shrink: 0;
  height: 1.3em;
  line-height: 1.3em;
  white-space: nowrap;
}

/* Tilt cards */
[data-tilt] {
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
[data-tilt] > .z-30 {
  transition: opacity 0.3s ease;
}

/* Layout351 expanding feature panels */
[data-features] > div {
  transition: width 0.3s ease-in-out;
}
[data-features] > div > div:last-child {
  transition: height 0.3s ease-in-out;
}

/* Team bio dialogs (replaces Radix Dialog) */
dialog {
  right: auto;
  bottom: auto;
}
dialog:not([open]) {
  display: none !important;
}
dialog[open] {
  display: flex;
  animation: dialog-in 0.2s ease-out;
}
dialog::backdrop {
  background: rgb(0 0 0 / 0.8);
  animation: backdrop-in 0.2s ease-out;
}
@keyframes dialog-in {
  from {
    opacity: 0;
    transform: translate(-50%, -48%) scale(0.95);
  }
}
@keyframes backdrop-in {
  from {
    opacity: 0;
  }
}

/* Form feedback */
[data-form-status] {
  margin-top: 0.75rem;
  font-size: 0.875rem;
}
[data-form-status].is-error {
  color: rgb(248 113 113);
}

@media (prefers-reduced-motion: reduce) {
  html.js [data-reveal],
  html.js [data-word] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* Blog post body: fixed-measure content column instead of three equal columns.
   The outline sidebar keeps a usable minimum; the right column takes what's left. */
@media (min-width: 768px) {
  .blog-post-grid {
    grid-template-columns: minmax(12rem, 1fr) minmax(0, 80ch) minmax(0, 1fr);
  }
}