/* Site-wide studio motion layer. */

:root {
  --okb-studio-blue: #0b57d0;
  --okb-studio-violet: #7c4dff;
  --okb-studio-rose: #d965a7;
  --okb-studio-amber: #e37400;
  --okb-studio-ink: #1f1f1f;
  --okb-studio-muted: #5f6368;
  --okb-studio-line: rgba(218, 220, 224, .72);
  --okb-studio-glow: 0 24px 70px rgba(60, 64, 67, .13);
  --okb-studio-gradient: linear-gradient(100deg, var(--okb-studio-blue) 5%, var(--okb-studio-violet) 42%, var(--okb-studio-rose) 70%, var(--okb-studio-amber) 96%);
}

body:not(.home) {
  background:
    radial-gradient(circle at 8% 0, rgba(168, 199, 250, .26), transparent 30rem),
    radial-gradient(circle at 94% 6%, rgba(196, 181, 253, .2), transparent 28rem),
    linear-gradient(180deg, #fff 0%, #f8fbff 48%, #fff 100%);
}

.site-main,
.entry-content,
.homefeed,
.ok-pricing-wrap,
.okb-policy-page,
.okb-studio-v2,
.contact-page,
.ok-product-page,
.okb404 {
  position: relative;
  isolation: isolate;
}

.homefeed::before,
.ok-pricing-wrap::before,
.okb-policy-hero::before,
.okb-anim-hero::before,
.contact-page::before,
.ok-product-page::before,
.okb404::before {
  animation: okbStudioGridDrift 18s linear infinite;
}

.homefeed::after,
.ok-pricing-wrap::after,
.ok-product-page::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(218, 220, 224, .18) 1px, transparent 1px),
    linear-gradient(180deg, rgba(218, 220, 224, .14) 1px, transparent 1px);
  background-size: 76px 76px;
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, .55), transparent 58%);
  animation: okbStudioGridDrift 20s linear infinite;
}

.ok-pricing-header h1 > strong,
.ok-pricing-header h2 > strong,
.asset-search-header h1,
.homefeed-category-head h2,
.ok-product-preview-title,
.okb-policy-hero h1::first-letter,
.okb-studio-v2-copy h1::first-letter {
  background: var(--okb-studio-gradient);
  background-size: 180% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  animation: okbStudioGradient 7s ease-in-out infinite alternate;
}

.asset-search-header h1,
.homefeed-category-head h2,
.ok-product-preview-title {
  color: var(--okb-studio-blue) !important;
  -webkit-text-fill-color: transparent;
}

.feed-item,
.homefeed-more-card,
.ok-credit-card,
.ok-on-demand-section,
.ok-enterprise-credit,
.ok-promo-panel,
.okb-policy-highlights > div,
.okb-policy-section,
.okb-studio-v2-cards article,
.okb-studio-v2-process article,
.okb-studio-v2-contact-grid a,
.contact-card,
.contact-compliance-item,
.file-upload-box,
.ok-product-preview-card,
.ok-product-panel,
.ok-product-details {
  transform: translateZ(0);
  transition:
    transform .42s cubic-bezier(.22, 1, .36, 1),
    border-color .28s ease,
    box-shadow .28s ease,
    background-position .42s ease;
}

.feed-item:hover,
.homefeed-more-card:hover,
.ok-credit-card:hover,
.okb-policy-highlights > div:hover,
.okb-studio-v2-cards article:hover,
.okb-studio-v2-process article:hover,
.okb-studio-v2-contact-grid a:hover,
.contact-compliance-item:hover,
.ok-product-preview-card:hover,
.ok-product-panel:hover,
.ok-product-details:hover {
  border-color: rgba(11, 87, 208, .42) !important;
  box-shadow: var(--okb-studio-glow) !important;
  transform: translateY(-4px);
}

.ok-buy-credit,
.okg-btn,
.okb-policy-hero-actions a,
.okb-studio-v2-actions a,
.okb-policy-closing a,
.contact-form button,
.homefeed-category-link,
.ok-product-download-btn,
.ok-product-utility button {
  position: relative;
  overflow: hidden;
}

.ok-buy-credit::after,
.okg-btn::after,
.okb-policy-hero-actions a::after,
.okb-studio-v2-actions a::after,
.okb-policy-closing a::after,
.contact-form button::after,
.homefeed-category-link::after,
.ok-product-download-btn::after,
.ok-product-utility button::after {
  content: "";
  position: absolute;
  inset: -35% auto -35% -45%;
  width: 38%;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .52), transparent);
  transform: skewX(-18deg);
  transition: left .62s cubic-bezier(.22, 1, .36, 1);
}

.ok-buy-credit:hover::after,
.okg-btn:hover::after,
.okb-policy-hero-actions a:hover::after,
.okb-studio-v2-actions a:hover::after,
.okb-policy-closing a:hover::after,
.contact-form button:hover::after,
.homefeed-category-link:hover::after,
.ok-product-download-btn:hover::after,
.ok-product-utility button:hover::after {
  left: 112%;
}

.okb-studio-reveal {
  opacity: 0;
  transform: translateY(22px);
  transition:
    opacity .7s ease,
    transform .7s cubic-bezier(.22, 1, .36, 1);
  transition-delay: var(--okb-reveal-delay, 0ms);
}

.okb-studio-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.okb-studio-pulse {
  position: relative;
}

.okb-studio-pulse::before {
  content: "";
  position: absolute;
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: #34a853;
  box-shadow: 0 0 0 0 rgba(52, 168, 83, .28);
  animation: okbStudioPulse 1.9s ease-out infinite;
}

.ok-pricing-header.okb-studio-pulse::before,
.asset-search-header.okb-studio-pulse::before,
.okb-policy-hero-copy.okb-studio-pulse::before,
.okb-studio-v2-copy.okb-studio-pulse::before,
.contact-card.okb-studio-pulse::before {
  top: -16px;
  left: 0;
}

@keyframes okbStudioGradient {
  0% {
    background-position: 0% 50%;
  }

  100% {
    background-position: 100% 50%;
  }
}

@keyframes okbStudioGridDrift {
  0% {
    background-position: 0 0;
  }

  100% {
    background-position: 76px 76px;
  }
}

@keyframes okbStudioPulse {
  0% {
    box-shadow: 0 0 0 0 rgba(52, 168, 83, .32);
  }

  72%,
  100% {
    box-shadow: 0 0 0 13px rgba(52, 168, 83, 0);
  }
}

@media (max-width: 760px) {
  .feed-item:hover,
  .homefeed-more-card:hover,
  .ok-credit-card:hover,
  .okb-policy-highlights > div:hover,
  .okb-studio-v2-cards article:hover,
  .okb-studio-v2-process article:hover,
  .okb-studio-v2-contact-grid a:hover,
  .contact-compliance-item:hover,
  .ok-product-preview-card:hover,
  .ok-product-panel:hover,
  .ok-product-details:hover {
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .homefeed::before,
  .homefeed::after,
  .ok-pricing-wrap::before,
  .ok-pricing-wrap::after,
  .okb-policy-hero::before,
  .okb-anim-hero::before,
  .contact-page::before,
  .ok-product-page::before,
  .ok-product-page::after,
  .okb404::before,
  .ok-pricing-header h1 > strong,
  .ok-pricing-header h2 > strong,
  .asset-search-header h1,
  .homefeed-category-head h2,
  .ok-product-preview-title,
  .okb-policy-hero h1::first-letter,
  .okb-studio-v2-copy h1::first-letter,
  .okb-studio-pulse::before {
    animation: none !important;
  }

  .okb-studio-reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}
