/*
   NEUROSERVER — shared visual + motion primitives / M1
   The homepage remains the visual reference. This file owns only values and
   behaviors that can be safely shared; scene-specific homepage CSS stays in
   home-convergence-final.css.
*/

:root {
  --site-display-weight: 550;
  --site-display-line: 1.02;
  --site-display-track: -0.045em;
  --site-display-h1-size: clamp(36px, 4.2vw, 108px);
  --site-display-h2-size: clamp(46px, 3.55vw, 82px);
  --site-display-h3-size: clamp(25px, 1.55vw, 38px);
  --site-service-h1-size: clamp(52px, 4.35vw, 88px);
  --site-service-h2-size: clamp(40px, 3.35vw, 68px);
  --site-service-h3-size: clamp(22px, 1.35vw, 28px);
  --site-lead-size: clamp(12.5px, 1.08vw, 21px);
  --site-body-size: clamp(16px, 1.05vw, 20px);
  --site-kicker-size: clamp(11px, 0.7vw, 14px);
  --site-motion-ease: cubic-bezier(0.22, 0.7, 0.2, 1);
  --site-motion-duration: 0.38s;
  --site-motion-fade-duration: 0.28s;
  --site-motion-control-duration: 0.24s;
  --site-motion-button-duration: 0.25s;
  --site-motion-reveal-distance: 12px;
  --site-motion-reveal-stagger: 70ms;
}

/* Progressive enhancement: without the runtime this selector never applies,
   so important content remains readable if JavaScript fails. */
html.site-motion-ready [data-site-reveal],
html.site-motion-ready [data-site-reveal-group] > [data-site-reveal-item] {
  opacity: 0;
  transform: translateY(var(--site-motion-reveal-distance));
  transition:
    opacity var(--site-motion-fade-duration) ease,
    transform var(--site-motion-duration) var(--site-motion-ease);
}

html.site-motion-ready [data-site-reveal].is-visible,
html.site-motion-ready [data-site-reveal-group].is-visible > [data-site-reveal-item].is-visible {
  opacity: 1;
  transform: none;
}

html.site-motion-ready [data-site-reveal-group].is-visible > [data-site-reveal-item] {
  transition-delay: calc(var(--site-motion-reveal-index, 0) * var(--site-motion-reveal-stagger));
}

/* Internal hero layer: related to the homepage's subtle transform language,
   without attaching the homepage canvas or scene to internal pages. */
body.oxide-production .site-motion-hero .ai-catalog-hero__visual {
  transform:
    translate3d(
      calc(var(--site-hero-pointer-x, 0) * 7px),
      calc(var(--site-hero-pointer-y, 0) * 5px - var(--site-hero-progress, 0) * 8px),
      0
    )
    scale(calc(1 - var(--site-hero-progress, 0) * 0.018));
  transition: transform 120ms linear;
  will-change: transform;
}

body.oxide-production .site-motion-hero .ai-catalog-hero__copy {
  transform: translateY(calc(var(--site-hero-progress, 0) * -4px));
  opacity: calc(1 - var(--site-hero-progress, 0) * 0.06);
  transition: transform 150ms linear, opacity 150ms linear;
  will-change: transform, opacity;
}

/* Shared FAQ presentation for the canonical AI service-detail component. The
   homepage keeps its accepted, more specific visual treatment. */
body.oxide-production .ai-faq-list .faq-item {
  min-width: 0;
  overflow: clip;
  border: 1px solid var(--site-border);
  border-radius: 18px;
  background: rgba(10, 18, 16, 0.6);
  transition: border-color var(--site-motion-control-duration) ease, background-color var(--site-motion-control-duration) ease;
}

body.oxide-production .ai-faq-list .faq-item:hover,
body.oxide-production .ai-faq-list .faq-item:has(.faq-question:focus-visible) {
  border-color: var(--site-border-strong);
  background: rgba(12, 27, 20, 0.72);
}

body.oxide-production .ai-faq-list .faq-question {
  display: flex;
  width: 100%;
  min-height: clamp(84px, 4.7vw, 94px);
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: clamp(22px, 1.5vw, 28px) clamp(24px, 1.8vw, 34px);
  border: 0;
  background: transparent;
  color: var(--site-ink);
  font-family: var(--site-body);
  font-size: clamp(19px, 1.08vw, 23px);
  font-weight: 550;
  line-height: 1.2;
  text-align: left;
  cursor: pointer;
  transition: color var(--site-motion-control-duration) ease, background-color var(--site-motion-control-duration) ease;
}

body.oxide-production .ai-faq-list .faq-question:hover,
body.oxide-production .ai-faq-list .faq-question:focus-visible,
body.oxide-production .ai-faq-list .faq-item.active .faq-question {
  color: var(--site-mint);
}

body.oxide-production .ai-faq-list .faq-answer {
  display: grid;
  grid-template-rows: 0fr;
  padding: 0 clamp(24px, 1.8vw, 34px);
  opacity: 0;
  transition:
    grid-template-rows var(--site-motion-duration) var(--site-motion-ease),
    padding-bottom var(--site-motion-duration) var(--site-motion-ease),
    opacity var(--site-motion-fade-duration) ease;
}

body.oxide-production .ai-faq-list .faq-item.active .faq-answer {
  grid-template-rows: 1fr;
  padding-bottom: clamp(20px, 1.3vw, 26px);
  opacity: 1;
}

body.oxide-production .ai-faq-list .faq-answer-content {
  min-height: 0;
  max-width: 1100px;
  overflow: hidden;
  padding-top: clamp(13px, 0.8vw, 17px);
  color: var(--site-muted);
  font-family: var(--site-body);
  font-size: clamp(16px, 0.9vw, 18px);
  line-height: 1.58;
}

body.oxide-production .ai-faq-list .faq-answer-content p {
  margin: 0;
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity var(--site-motion-fade-duration) ease, transform var(--site-motion-duration) var(--site-motion-ease);
}

body.oxide-production .ai-faq-list .faq-item.active .faq-answer-content p {
  opacity: 1;
  transform: none;
}

body.oxide-production .ai-faq-list .faq-chevron {
  position: relative;
  flex: 0 0 auto;
  width: clamp(24px, 1.6vw, 34px);
  height: clamp(24px, 1.6vw, 34px);
  color: var(--site-mint);
  font-size: 0;
  transition:
    color var(--site-motion-control-duration) ease,
    transform 0.32s var(--site-motion-ease),
    filter var(--site-motion-control-duration) ease;
}

body.oxide-production .ai-faq-list .faq-chevron::before,
body.oxide-production .ai-faq-list .faq-chevron::after {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 12px;
  height: 1px;
  background: currentColor;
  content: "";
  transform: translate(-50%, -50%);
}

body.oxide-production .ai-faq-list .faq-chevron::after {
  transform: translate(-50%, -50%) rotate(90deg);
}

body.oxide-production .ai-faq-list .faq-item.active .faq-chevron {
  transform: rotate(45deg);
}

@media (max-width: 640px) {
  body.oxide-production .ai-faq-list .faq-question {
    min-height: 70px;
    padding: 18px;
    font-size: 16px;
  }

  body.oxide-production .ai-faq-list .faq-answer {
    padding-right: 18px;
    padding-left: 18px;
  }

  body.oxide-production .ai-faq-list .faq-answer-content {
    font-size: 15px;
    line-height: 1.58;
  }
}

@media (prefers-reduced-motion: reduce) {
  html.site-motion-ready [data-site-reveal],
  html.site-motion-ready [data-site-reveal-group] > [data-site-reveal-item],
  body.oxide-production .site-motion-hero .ai-catalog-hero__visual,
  body.oxide-production .site-motion-hero .ai-catalog-hero__copy,
  body.oxide-production .ai-faq-list .faq-item,
  body.oxide-production .ai-faq-list .faq-question,
  body.oxide-production .ai-faq-list .faq-answer,
  body.oxide-production .ai-faq-list .faq-answer-content p,
  body.oxide-production .ai-faq-list .faq-chevron {
    opacity: 1;
    transform: none;
    transition: none !important;
  }

  body.oxide-production .ai-faq-list .faq-answer {
    grid-template-rows: 0fr;
  }

  body.oxide-production .ai-faq-list .faq-item.active .faq-answer {
    grid-template-rows: 1fr;
  }
}