/* Optivis self-hosted site layer — layout polish, motion, Squarespace animation fixes */

:root {
  --ov-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ov-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ov-duration-fast: 0.45s;
  --ov-duration: 0.7s;
  --ov-duration-slow: 0.95s;
  --ov-stagger: 0.08s;
  --ov-reveal-offset: 28px;
  --ov-brand: #e50915;
  --ov-brand-dark: #b81d25;
  --ov-ink: #211f20;
  --ov-muted: #6b6b6b;
  --ov-surface: #f5f6f1;
}

/* Squarespace kept sections hidden until runtime JS set data-animation-state=booted */
.tweak-global-animations-animation-type-slide footer,
.tweak-global-animations-animation-type-slide header,
.tweak-global-animations-animation-type-slide section > .content-wrapper,
.tweak-global-animations-animation-type-clip footer,
.tweak-global-animations-animation-type-clip header,
.tweak-global-animations-animation-type-clip section > .content-wrapper,
.tweak-global-animations-animation-type-fade footer,
.tweak-global-animations-animation-type-fade header,
.tweak-global-animations-animation-type-fade section > .content-wrapper,
.tweak-global-animations-animation-type-flex footer,
.tweak-global-animations-animation-type-flex header,
.tweak-global-animations-animation-type-flex section > .content-wrapper,
.tweak-global-animations-animation-type-scale footer,
.tweak-global-animations-animation-type-scale header,
.tweak-global-animations-animation-type-scale section > .content-wrapper {
  opacity: 1 !important;
  animation: none !important;
}

html.optivis-loading .preFade,
html.optivis-loading .preSlide,
html.optivis-loading .preScale {
  opacity: 1 !important;
  transform: none !important;
}

/* Header polish */
#header {
  transition:
    box-shadow var(--ov-duration-fast) var(--ov-ease-out),
    background-color var(--ov-duration-fast) var(--ov-ease-out),
    transform var(--ov-duration-fast) var(--ov-ease-out);
}

html.optivis-loaded #header {
  animation: ov-header-in var(--ov-duration-slow) var(--ov-ease-out) both;
}

html.optivis-loaded #header.header--scrolled,
html.optivis-loaded .header.header--scrolled,
html.optivis-loaded [data-section-theme="white"] #header.header--scrolled {
  box-shadow: 0 8px 32px rgba(33, 31, 32, 0.08);
}

@keyframes ov-header-in {
  from {
    opacity: 0;
    transform: translateY(-12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Page-load hero / first section */
html.optivis-loaded section:first-of-type > .content-wrapper {
  animation: ov-hero-in var(--ov-duration-slow) var(--ov-ease-out) 0.12s both;
}

@keyframes ov-hero-in {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Scroll reveal */
.ov-reveal {
  opacity: 0;
  transform: translateY(var(--ov-reveal-offset));
  transition:
    opacity var(--ov-duration) var(--ov-ease-out),
    transform var(--ov-duration) var(--ov-ease-out);
  will-change: opacity, transform;
}

.ov-reveal.ov-visible {
  opacity: 1;
  transform: translateY(0);
}

.ov-reveal--fade {
  transform: none;
}

.ov-reveal--scale {
  transform: scale(0.97);
}

.ov-reveal--scale.ov-visible {
  transform: scale(1);
}

.ov-stagger > .ov-reveal:nth-child(1) { transition-delay: calc(var(--ov-stagger) * 0); }
.ov-stagger > .ov-reveal:nth-child(2) { transition-delay: calc(var(--ov-stagger) * 1); }
.ov-stagger > .ov-reveal:nth-child(3) { transition-delay: calc(var(--ov-stagger) * 2); }
.ov-stagger > .ov-reveal:nth-child(4) { transition-delay: calc(var(--ov-stagger) * 3); }
.ov-stagger > .ov-reveal:nth-child(5) { transition-delay: calc(var(--ov-stagger) * 4); }
.ov-stagger > .ov-reveal:nth-child(6) { transition-delay: calc(var(--ov-stagger) * 5); }

/* Custom code blocks — consulting sections */
.ov-services,
.ov-meth {
  scroll-margin-top: 96px;
}

.ov-services .ov-card,
.ov-meth .ov-meth-phase,
.ov-meth .ov-meth-step {
  transition:
    transform 0.28s var(--ov-ease-out),
    box-shadow 0.28s var(--ov-ease-out),
    border-color 0.28s var(--ov-ease-out);
}

.ov-services .ov-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 40px rgba(33, 31, 32, 0.1);
}

.ov-services .ov-cta a,
.sqs-block-button-element,
.button.sqs-block-button-element {
  transition:
    background-color 0.25s ease,
    transform 0.2s var(--ov-ease-out),
    box-shadow 0.25s ease;
}

.ov-services .ov-cta a:hover,
.sqs-block-button-element:hover,
.button.sqs-block-button-element:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 24px rgba(229, 9, 21, 0.22);
}

/* Contact form */
.optivis-contact-form .field-element {
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}

.optivis-contact-form .field-element:focus {
  outline: none;
  border-color: var(--ov-brand);
  box-shadow: 0 0 0 3px rgba(229, 9, 21, 0.12);
}

.optivis-form-status {
  margin-top: 14px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ov-muted);
  min-height: 1.5em;
}

.optivis-form-status:not([hidden]) {
  animation: ov-fade-in 0.35s var(--ov-ease-out) both;
}

@keyframes ov-fade-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Blog cards (insights pages) */
.ov-insights .ov-card,
.ov-insights .ov-featured,
.ov-insights .ov-pillar-hero,
.ov-article-wrap .ov-cover,
.ov-article-wrap .ov-article-header {
  scroll-margin-top: 88px;
}

/* Section backgrounds — subtle parallax feel on scroll (transform only when visible) */
.section-background img {
  transition: transform 1.2s var(--ov-ease-out);
}

section.ov-section-visible .section-background img {
  transform: scale(1.03);
}

/* Mobile nav transition */
.header-menu-nav-wrapper {
  transition: opacity 0.3s var(--ov-ease-out), visibility 0.3s;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .ov-reveal {
    opacity: 1 !important;
    transform: none !important;
  }

  section.ov-section-visible .section-background img {
    transform: none;
  }
}