/* ============================================================
   Datium — runtime styles that the original build injected
   via JS (styled-jsx, framer-motion, web components).
   ============================================================ */

/* --- Bento card hover beam (styled-jsx f7a4c3cc7a21aaf5) --- */
@property --beam-x {
  syntax: "<length>";
  inherits: true;
  initial-value: 0px;
}

@property --beam-y {
  syntax: "<length>";
  inherits: true;
  initial-value: 0px;
}

.beam-ring {
  padding: 1.5px;
  background: radial-gradient(420px circle at var(--beam-x, 50%) var(--beam-y, 50%),
      #7cb8ff 0%, #3d8bff 22%, rgba(61, 139, 255, .5) 45%,
      rgba(61, 139, 255, .18) 70%, transparent 92%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}

/* --- Scroll reveal (replaces framer-motion entrances) --- */
[data-reveal] {
  transition: opacity .8s cubic-bezier(.22, 1, .36, 1), transform .8s cubic-bezier(.22, 1, .36, 1);
}

[data-reveal].is-visible {
  opacity: 1 !important;
  transform: none !important;
}

/* --- Announcement bar: collapses away on scroll --- */
.dtm-annbar {
  max-height: 56px;
  overflow: hidden;
  transition: max-height .35s ease, opacity .3s ease;
}

.dtm-annbar.is-hidden {
  max-height: 0;
  opacity: 0;
}

/* --- Header state on scroll (dark nav over light sections) --- */
#dtm-nav {
  transition: background-color .3s ease, border-color .3s ease;
}

#dtm-nav.is-scrolled {
  background-color: rgba(255, 255, 255, .92);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  backdrop-filter: blur(14px) saturate(1.4);
  border-bottom: 1px solid rgba(0, 0, 0, .06);
}

#dtm-nav.is-scrolled .dtm-nav-link {
  color: rgba(23, 23, 23, .7);
}

#dtm-nav.is-scrolled .dtm-nav-link:hover {
  color: #171717;
}

#dtm-nav.is-scrolled .dtm-logo-mark {
  filter: none;
}

#dtm-nav.is-scrolled .dtm-btn-ghost {
  color: #171717;
  border-color: rgba(0, 0, 0, .15);
}

#dtm-nav.is-scrolled .dtm-btn-ghost:hover {
  background-color: rgba(0, 0, 0, .05);
}

#dtm-nav.is-scrolled .dtm-btn-solid {
  color: #fff;
  background-color: #171717;
}

#dtm-nav.is-scrolled .dtm-btn-solid:hover {
  background-color: #333;
}

#dtm-nav.is-scrolled .dtm-burger {
  color: #171717;
}

/* over dark (anthracite) sections: dark glass, keep white text */
#dtm-nav.is-dark {
  background-color: rgba(23, 23, 23, .88);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  backdrop-filter: blur(14px) saturate(1.4);
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}

/* --- Mobile menu: white floating card over blurred backdrop --- */
#dtm-mobile-menu {
  display: none;
}

#dtm-mobile-menu.is-open {
  display: block;
}

#dtm-mobile-menu .dtm-mm-backdrop {
  opacity: 0;
  transition: opacity .2s ease;
}

#dtm-mobile-menu .dtm-mm-panel {
  opacity: 0;
  transform: translateY(-20px) scale(.95);
  transition: opacity .2s ease, transform .2s cubic-bezier(.16, 1, .3, 1);
}

#dtm-mobile-menu.is-shown .dtm-mm-backdrop {
  opacity: 1;
}

#dtm-mobile-menu.is-shown .dtm-mm-panel {
  opacity: 1;
  transform: none;
}

/* hover shades the compiled tailwind doesn't carry */
.dtm-hover-soft:hover {
  background-color: #f5f5f5;
}

.dtm-hover-ghost:hover {
  background-color: #fafafa;
}

.dtm-hover-solid:hover {
  background-color: #262626;
}

/* --- Chart dot ripple rings --- */
@keyframes dtm-ripple {
  0% { transform: scale(.5); opacity: .8; }
  100% { transform: scale(2); opacity: 0; }
}

.dtm-ripple {
  transform-box: fill-box;
  transform-origin: 50% 50%;
  animation: dtm-ripple 2s ease-out infinite;
}

/* --- Blinking caret in the search-orb card --- */
@keyframes dtm-caret {
  0%, 55% { opacity: 1; }
  60%, 100% { opacity: 0; }
}

.dtm-caret {
  animation: dtm-caret 1.1s steps(1) infinite;
}

/* --- Hero video: rotated 90° on phone-width viewports --- */
#dtm-hero-video.dtm-rot {
  inset: auto;
  top: 50%;
  left: 50%;
  width: 100vh;
  width: 100svh;
  height: 100vw;
  max-width: none;
  transform: translate(-50%, -50%) rotate(90deg);
}

/* --- Cookie banner: hidden until consent is unanswered, slides in --- */
#dtm-cookies {
  opacity: 0;
  transform: translateY(14px);
  pointer-events: none;
  transition: opacity .3s ease, transform .3s cubic-bezier(.16, 1, .3, 1);
  /* the one arbitrary shadow the compiled tailwind doesn't carry */
  box-shadow: 0 12px 48px rgba(0, 0, 0, .18);
}

#dtm-cookies.is-shown {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

/* Hero chips: keep all five on one line on phones */
@media (max-width: 639px) {
  .dtm-hero-chips {
    column-gap: 9px;
  }

  .dtm-hero-chips > span {
    column-gap: 4px;
    font-size: 12px;
  }
}

/* Smooth anchor scrolling */
html {
  scroll-behavior: smooth;
}