/* Shared interaction and accessibility polish across Turbolu Studios. */
html {
  scroll-behavior: smooth;
  scroll-padding-top: 5rem;
  -webkit-tap-highlight-color: transparent;
}

body {
  isolation: isolate;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  background-color: #0b1018;
  background-image:
    linear-gradient(180deg, rgba(7, 12, 20, 0.42), rgba(7, 12, 20, 0.68)),
    url('/img/bigsur-wallpaper.webp');
  background-size: 100% 100%, cover;
  background-position: center;
  background-attachment: fixed;
  background-repeat: no-repeat;
}

.light body {
  background-color: #e7edf2;
  background-image:
    linear-gradient(180deg, rgba(242, 246, 249, 0.44), rgba(242, 246, 249, 0.62)),
    url('/img/bigsur-wallpaper.webp');
}

/* The portal uses its own scene layer; swap the old illustration for the
   downloaded Big Sur wallpaper while keeping the text-friendly overlay. */
.bigsur {
  position: fixed;
  inset: 0;
  height: auto;
  overflow: hidden;
  background-color: #111;
}

/* The wallpaper drifts behind the vignette, so the dark contrast layer
   stays still while the Big Sur colour bands slowly flow. */
.bigsur::before {
  content: "";
  position: absolute;
  inset: -8%;
  background-image: url('/img/bigsur-wallpaper.webp');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  animation: bigSurWallpaperDrift 12s ease-in-out infinite alternate;
  will-change: transform;
}

@keyframes bigSurWallpaperDrift {
  0%   { transform: translate3d(-2.5%, -1.5%, 0) scale(1.06); }
  50%  { transform: translate3d(2.5%, 1.5%, 0) scale(1.12); }
  100% { transform: translate3d(1.2%, -2%, 0) scale(1.08); }
}

body:has(> .bigsur) { position: relative; }

/* Moving light bands echo Big Sur's flowing colour contours. Only the
   transform is animated so the fixed wallpaper is never repainted. */
body::after {
  content: "";
  position: fixed;
  z-index: -1;
  inset: -15%;
  pointer-events: none;
  opacity: 0.60;
  background:
    radial-gradient(ellipse 42% 24% at 22% 32%, rgba(255, 124, 170, 0.62), transparent 70%),
    radial-gradient(ellipse 52% 26% at 78% 44%, rgba(92, 216, 255, 0.52), transparent 72%),
    radial-gradient(ellipse 46% 22% at 38% 78%, rgba(255, 184, 96, 0.46), transparent 72%),
    radial-gradient(ellipse 38% 20% at 68% 84%, rgba(178, 138, 255, 0.40), transparent 74%),
    linear-gradient(112deg, transparent 12%, rgba(255, 140, 190, 0.14) 28%, transparent 44%, rgba(100, 220, 255, 0.12) 60%, transparent 76%);
  mix-blend-mode: screen;
  transform: translate3d(-3%, 2%, 0) rotate(-1deg) scale(1.02);
  animation: bigSurWave 9s ease-in-out infinite alternate;
  will-change: transform;
}

.light body::after {
  opacity: 0.30;
  mix-blend-mode: normal;
}

@keyframes bigSurWave {
  0%   { transform: translate3d(-3%, 2%, 0) rotate(-1deg) scale(1.02); }
  33%  { transform: translate3d(2.5%, -2%, 0) rotate(0.8deg) scale(1.06); }
  66%  { transform: translate3d(3.5%, 2.5%, 0) rotate(1.4deg) scale(1.04); }
  100% { transform: translate3d(-2%, -1.5%, 0) rotate(-0.6deg) scale(1.07); }
}

.bigsur-art { display: none; }

.bigsur-vignette {
  background: linear-gradient(180deg, rgba(5, 8, 20, 0.28), rgba(5, 8, 20, 0.60));
}

.light .bigsur-vignette {
  display: block;
  background: linear-gradient(180deg, rgba(244, 247, 250, 0.24), rgba(244, 247, 250, 0.40));
}

:where(a, button, input, textarea, select) {
  -webkit-tap-highlight-color: transparent;
}

:where(a, button, input, textarea, select):focus-visible {
  outline: 3px solid var(--accent, #22c55e);
  outline-offset: 3px;
}

:where(button, .btn, .btn-primary, .btn-ghost, .download-btn, .quick-card, .feature-item,
  .faq-item, .mac-window, .card, .glass-card, .announcement-item, .news-item) {
  transition-duration: 180ms;
}

:where(button, .btn, .download-btn):not(:disabled):active {
  transform: translateY(1px) scale(0.985);
}

/* Soft, clear hover feedback; content remains calm when the pointer is idle. */
:where(.quick-card, .feature-item, .faq-item, .announcement-item, .news-item):hover {
  border-color: var(--accent-border, rgba(34, 197, 94, 0.32));
}

:where(.glass-card, .tikla-section, .card, .faq-item, .quick-card, .feature-item) {
  transition-property: transform, border-color, box-shadow, background-color;
  transition-timing-function: cubic-bezier(0.2, 0.7, 0.2, 1);
}

:where(input, textarea, select) {
  accent-color: var(--accent, #22c55e);
}

::selection {
  color: var(--text, #f8fafc);
  background: var(--accent-soft, rgba(34, 197, 94, 0.24));
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  :where(.quick-card, .feature-item, .faq-item, .card):hover {
    transform: translateY(-2px);
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}