/* Small amount of hand-written CSS for things Tailwind utilities don't cover well. */

[data-reveal] {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
[data-reveal].is-visible {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; transform: none; transition: none; }
}

/* Aurora glow behind the hero bear */
.aurora-glow {
  background: radial-gradient(60% 60% at 50% 45%, rgba(93, 173, 226, 0.35) 0%, rgba(46, 204, 113, 0.12) 45%, rgba(11, 31, 51, 0) 75%);
}

/* Range slider styling for the VPS configurator */
input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  border-radius: 999px;
  background: #D6DEE6;
  outline: none;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 22px; height: 22px; border-radius: 50%;
  background: #0F2A52; border: 3px solid #fff;
  box-shadow: 0 1px 4px rgba(15,42,82,0.3); cursor: pointer;
}
input[type="range"]::-moz-range-thumb {
  width: 22px; height: 22px; border-radius: 50%;
  background: #0F2A52; border: 3px solid #fff;
  box-shadow: 0 1px 4px rgba(15,42,82,0.3); cursor: pointer;
}

/* Toggle switch */
.switch { position: relative; width: 44px; height: 24px; border-radius: 999px; transition: background 0.2s; }
.switch > span {
  position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.25); transition: transform 0.2s;
}

html { scroll-behavior: smooth; }