/**
 * TinkyTown — Universal Animation + Responsive Baseline
 * Loaded on every page. Provides reveal classes, parallax scaffold,
 * and mobile-safe defaults so pages never horizontally scroll on phones.
 */

/* ── REVEAL SYSTEM ─────────────────────────────────── */
.rv, .rv-left, .rv-right, .rv-scale, .rv-glow, [data-reveal] {
  opacity: 0;
  transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}
.rv { transform: translate3d(0, 28px, 0); }
.rv-left { transform: translate3d(-40px, 0, 0); }
.rv-right { transform: translate3d(40px, 0, 0); }
.rv-scale { transform: scale(0.94); }
.rv-glow { transform: translate3d(0, 0, 0); filter: brightness(0.85); }

.rv.vis, .rv-left.vis, .rv-right.vis, .rv-scale.vis, .rv-glow.vis, [data-reveal].vis {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
  filter: none;
}

.rv-d1 { transition-delay: 0.08s; }
.rv-d2 { transition-delay: 0.16s; }
.rv-d3 { transition-delay: 0.24s; }
.rv-d4 { transition-delay: 0.32s; }
.rv-d5 { transition-delay: 0.40s; }
.rv-d6 { transition-delay: 0.48s; }

/* ── PARALLAX SCAFFOLD ─────────────────────────────── */
[data-parallax], .parallax-bg {
  will-change: transform;
  transform: translate3d(0, 0, 0);
}

/* Float/breathing loop */
@keyframes siteFloat {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50% { transform: translate3d(0, -8px, 0); }
}
.float { animation: siteFloat 4s ease-in-out infinite; }

/* Shimmer highlight */
@keyframes siteShimmer {
  0% { background-position: 0% center; }
  100% { background-position: 200% center; }
}
.shimmer {
  background: linear-gradient(90deg,
    currentColor 0%, rgba(255,255,255,0.4) 50%, currentColor 100%);
  background-size: 200% auto;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: siteShimmer 3.5s linear infinite;
}

/* ── UNIVERSAL RESPONSIVE BASELINE ─────────────────── */
html { scroll-behavior: smooth; }
html, body {
  max-width: 100%;
  overflow-x: hidden;
}
img, video, iframe, svg {
  max-width: 100%;
  height: auto;
}
table { max-width: 100%; }

/* Ensure touch-friendly buttons/links on mobile */
@media (max-width: 720px) {
  button, a[role="button"], .btn, .btn-primary, .c-nav-btn, .nav-demo-btn, .form-submit {
    min-height: 44px;
  }
  /* Prevent tiny tap targets in nav on mobile */
  nav a, .nav a, .c-nav a { min-height: 32px; display: inline-flex; align-items: center; }
}

/* Mobile-friendly type scale — guardrails, not overrides */
@media (max-width: 480px) {
  h1 { font-size: clamp(1.8rem, 7vw, 2.6rem) !important; line-height: 1.15 !important; }
  h2 { font-size: clamp(1.4rem, 5.5vw, 2rem) !important; line-height: 1.25 !important; }
  h3 { font-size: clamp(1.1rem, 4.5vw, 1.5rem) !important; }
  /* Prevent walls of text from overflowing */
  pre, code { white-space: pre-wrap; word-break: break-word; }
}

/* Grid safety — grids wider than viewport become 1-col at mobile */
@media (max-width: 540px) {
  .auto-mobile-stack,
  [data-mobile-stack] {
    grid-template-columns: 1fr !important;
  }
}

/* Reduced motion override — disable all animations */
@media (prefers-reduced-motion: reduce) {
  .rv, .rv-left, .rv-right, .rv-scale, .rv-glow, [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
  }
  .float, .shimmer { animation: none !important; }
  [data-parallax], .parallax-bg { transform: none !important; }
  html { scroll-behavior: auto; }
}