/* TUNDRA AI motion layer. It intentionally inherits the page's existing palette. */
html { scroll-behavior: smooth; }

html.tundra-atmosphere {
  background-color: var(--bg, #0B0A08);
  background-image:
    linear-gradient(112deg, rgba(255,138,60,.045) -10%, rgba(255,138,60,.018) 42%, rgba(255,77,28,.032) 110%),
    repeating-linear-gradient(90deg, transparent 0 79px, rgba(255,214,170,.015) 80px),
    repeating-linear-gradient(0deg, transparent 0 79px, rgba(255,214,170,.011) 80px);
  background-attachment: fixed;
  background-size: 160% 100%, 80px 80px, 80px 80px;
  scrollbar-color: rgba(255,138,60,.42) rgba(18,14,10,.72);
}

html.tundra-atmosphere::-webkit-scrollbar {
  width: 12px;
  height: 12px;
  background:
    linear-gradient(180deg, rgba(255,138,60,.08), rgba(11,10,8,.88)),
    var(--bg, #0B0A08);
}

html.tundra-atmosphere::-webkit-scrollbar-track {
  background:
    linear-gradient(180deg, rgba(255,138,60,.08), rgba(11,10,8,.88)),
    var(--bg, #0B0A08);
}

html.tundra-atmosphere::-webkit-scrollbar-thumb {
  border: 3px solid rgba(18,14,10,.9);
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255,178,100,.76), rgba(255,106,35,.48));
  background-clip: padding-box;
}

html.tundra-atmosphere body {
  isolation: isolate;
  background-color: transparent;
  background-image:
    linear-gradient(112deg, rgba(255,138,60,.045) -10%, rgba(255,138,60,.018) 42%, rgba(255,77,28,.032) 110%),
    repeating-linear-gradient(90deg, transparent 0 79px, rgba(255,214,170,.015) 80px),
    repeating-linear-gradient(0deg, transparent 0 79px, rgba(255,214,170,.011) 80px);
  background-attachment: fixed;
  background-size: 160% 100%, 80px 80px, 80px 80px;
  animation: tundra-background-drift 32s ease-in-out infinite alternate;
}

html.tundra-atmosphere body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .38;
  background-image:
    linear-gradient(112deg, rgba(255,138,60,.045) -10%, rgba(255,138,60,.018) 42%, rgba(255,77,28,.032) 110%),
    repeating-linear-gradient(90deg, transparent 0 79px, rgba(255,214,170,.015) 80px),
    repeating-linear-gradient(0deg, transparent 0 79px, rgba(255,214,170,.011) 80px);
  background-size: 160% 100%, 80px 80px, 80px 80px;
  animation: tundra-background-drift 32s ease-in-out infinite alternate;
}

html.tundra-atmosphere.tundra-canvas-active body {
  background-image: none;
  animation: none;
}

html.tundra-atmosphere.tundra-canvas-active body::before {
  opacity: .12;
}

#tundra-liquid-ether {
  position: fixed;
  inset: 0;
  z-index: -1;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  pointer-events: none;
  opacity: 1;
  transform: translateZ(0);
  will-change: contents;
}

#tundra-liquid-ether canvas {
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

html.tundra-atmosphere .glow-field,
html.tundra-atmosphere .aurora-bg {
  z-index: -2;
}

[data-motion] {
  --motion-delay: 0ms;
}

/* Large legacy reveal wrappers left empty bands during fast scrolling. */
.motion-ready .reveal {
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
  transition: none !important;
}

.motion-ready [data-motion] {
  opacity: 0;
  translate: 0 18px;
  transition:
    opacity 720ms cubic-bezier(.16, 1, .3, 1) var(--motion-delay),
    translate 720ms cubic-bezier(.16, 1, .3, 1) var(--motion-delay);
  will-change: opacity, translate;
}

.motion-ready [data-motion="soft"] {
  translate: 0 10px;
}

.motion-ready [data-motion="left"] {
  translate: -18px 0;
}

.motion-ready [data-motion="right"] {
  translate: 18px 0;
}

.motion-ready [data-motion].motion-in {
  opacity: 1;
  translate: 0 0;
  will-change: auto;
}

.motion-lift {
  transition:
    translate 260ms cubic-bezier(.2, .8, .2, 1),
    box-shadow 260ms ease,
    border-color 260ms ease,
    filter 260ms ease !important;
}

@media (hover:hover) and (pointer:fine) {
  .motion-lift:hover {
    translate: 0 -3px;
    filter: brightness(1.035);
  }

  a.btn:hover svg,
  button:hover svg,
  .nav-cta:hover svg {
    transform: translateX(2px);
  }
}

a.btn svg,
button svg,
.nav-cta svg {
  transition: transform 220ms cubic-bezier(.2, .8, .2, 1);
}

a.btn,
button,
.nav-cta,
[role="button"] {
  transition:
    transform 180ms ease,
    box-shadow 260ms ease,
    border-color 260ms ease,
    background-color 260ms ease,
    color 260ms ease !important;
}

a.btn:active,
button:active,
.nav-cta:active,
[role="button"]:active {
  transform: scale(.975);
}

.motion-scrolled .nav-bar,
.motion-scrolled header,
.motion-scrolled .topbar {
  box-shadow: 0 10px 28px rgba(8,7,5,.16);
}

.status-dot,
.dot.ok,
.ok-dot,
[data-status="ok"]::before {
  animation: tundra-status-pulse 2.4s ease-in-out infinite;
}

.logo-mark,
.brand-mark,
.logo .mark {
  animation: tundra-logo-breathe 4.8s ease-in-out infinite;
}

.code-block,
pre,
.terminal,
.codebox {
  background-position: 0 0;
  transition: border-color 260ms ease, box-shadow 260ms ease;
}

details > summary::marker {
  transition: transform 220ms ease;
}

details[open] > *:not(summary) {
  animation: tundra-details-in 280ms cubic-bezier(.2, .8, .2, 1) both;
}

@keyframes tundra-status-pulse {
  0%, 100% { opacity: .72; box-shadow: 0 0 0 0 currentColor; }
  50% { opacity: 1; box-shadow: 0 0 0 4px transparent; }
}

@keyframes tundra-logo-breathe {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.12); }
}

@keyframes tundra-details-in {
  from { opacity: 0; translate: 0 -5px; }
  to { opacity: 1; translate: 0 0; }
}

@keyframes tundra-background-drift {
  from { background-position: 0 0, 0 0, 0 0; }
  to { background-position: 100% 0, 10px 0, 0 10px; }
}

@media (max-width: 720px) {
  .motion-ready [data-motion] {
    translate: 0 11px;
    transition-duration: 520ms;
  }

  .motion-ready [data-motion="left"],
  .motion-ready [data-motion="right"] {
    translate: 0 11px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
  }

  .motion-ready [data-motion] {
    opacity: 1;
    translate: none;
  }
}