/*
 * TVDTheme modern experience layer.
 * Loaded last and deliberately targets the theme's public component contract.
 */

:root {
  --tvd-modern-primary: #6366f1;
  --tvd-modern-accent: #06b6d4;
  --tvd-modern-glow: rgba(99, 102, 241, 0.28);
  --tvd-modern-radius: clamp(16px, 1.7vw, 26px);
  --tvd-modern-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --tvd-modern-shadow: 0 18px 50px rgba(15, 23, 42, 0.12);
}

html {
  scroll-behavior: smooth;
}

body {
  background-image:
    radial-gradient(circle at 8% 2%, rgba(99, 102, 241, 0.08), transparent 28rem),
    radial-gradient(circle at 92% 18%, rgba(6, 182, 212, 0.07), transparent 24rem);
  background-attachment: fixed;
}

::selection {
  color: #fff;
  background: var(--tvd-modern-primary);
}

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 3px solid color-mix(in srgb, var(--tvd-modern-primary) 55%, white);
  outline-offset: 3px;
}

:where(.button, button, input[type="submit"], input[type="button"], .add_to_cart_button, .single_add_to_cart_button) {
  position: relative;
  overflow: hidden;
  border-radius: 999px;
  transition: transform 280ms var(--tvd-modern-ease), box-shadow 280ms ease, filter 280ms ease;
}

:where(.button, button, input[type="submit"], input[type="button"], .add_to_cart_button, .single_add_to_cart_button):hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px var(--tvd-modern-glow);
  filter: saturate(1.08);
}

:where(.button, button, input[type="submit"], input[type="button"]):active {
  transform: translateY(0) scale(0.98);
}

:where(input:not([type="checkbox"]):not([type="radio"]), select, textarea) {
  border-radius: 14px;
  transition: border-color 180ms ease, box-shadow 180ms ease, background-color 180ms ease;
}

:where(input:not([type="checkbox"]):not([type="radio"]), select, textarea):focus {
  border-color: var(--tvd-modern-primary);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--tvd-modern-primary) 14%, transparent);
}

:where(.box, .product-small, .post-item, .widget, .tvd-card, .tvd-dashboard-card, .tvd-wc-checkout-card) {
  border-radius: var(--tvd-modern-radius);
  transition: transform 380ms var(--tvd-modern-ease), box-shadow 380ms ease, border-color 380ms ease;
}

:where(.product-small, .post-item, .tvd-card, .tvd-dashboard-card):hover {
  transform: translateY(-7px);
  border-color: color-mix(in srgb, var(--tvd-modern-primary) 30%, transparent);
  box-shadow: var(--tvd-modern-shadow);
}

:where(.box-image, .product-gallery, .post-item .image-cover, .tvd-modern-media) {
  overflow: hidden;
  border-radius: var(--tvd-modern-radius);
}

:where(.box-image, .product-gallery, .post-item .image-cover, .tvd-modern-media) img {
  transition: transform 700ms var(--tvd-modern-ease), filter 500ms ease;
}

:where(.box, .product-small, .post-item, .tvd-modern-media):hover img {
  transform: scale(1.045);
  filter: saturate(1.05) contrast(1.02);
}

:where(.badge, .tagcloud a, .is-divider, .tvd-modern-pill) {
  border-radius: 999px;
}

/* Opt-in classes available directly inside BuildWEB. */
.tvd-modern-glass {
  border: 1px solid color-mix(in srgb, currentColor 12%, transparent);
  background: color-mix(in srgb, var(--tvdm-surface-strong, #fff) 78%, transparent);
  box-shadow: var(--tvd-modern-shadow);
  backdrop-filter: blur(18px) saturate(145%);
  -webkit-backdrop-filter: blur(18px) saturate(145%);
}

.tvd-modern-gradient-text {
  color: transparent;
  background: linear-gradient(120deg, var(--tvd-modern-primary), var(--tvd-modern-accent));
  background-clip: text;
  -webkit-background-clip: text;
}

.tvd-modern-border-glow {
  border: 1px solid transparent;
  background:
    linear-gradient(var(--tvdm-surface-strong, #fff), var(--tvdm-surface-strong, #fff)) padding-box,
    linear-gradient(120deg, var(--tvd-modern-primary), var(--tvd-modern-accent)) border-box;
  box-shadow: 0 16px 45px var(--tvd-modern-glow);
}

.tvd-modern-float {
  animation: tvd-modern-float 5s ease-in-out infinite;
}

.tvd-modern-reveal {
  animation-duration: 720ms;
  animation-timing-function: var(--tvd-modern-ease);
  animation-fill-mode: both;
}

/* JS only hides items after it is ready, so content remains visible if JS fails. */
html.tvd-modern-effects-ready body:not(.webtvd-tvdeditorz-iframe) .tvd-modern-reveal:not(.is-visible) {
  opacity: 0;
  transform: translateY(22px) scale(0.985);
}

html.tvd-modern-effects-ready body:not(.webtvd-tvdeditorz-iframe) .tvd-modern-reveal.is-visible {
  animation-name: tvd-modern-reveal;
}

.tvd-modern-stagger > .tvd-modern-reveal:nth-child(2) { animation-delay: 70ms; }
.tvd-modern-stagger > .tvd-modern-reveal:nth-child(3) { animation-delay: 140ms; }
.tvd-modern-stagger > .tvd-modern-reveal:nth-child(4) { animation-delay: 210ms; }
.tvd-modern-stagger > .tvd-modern-reveal:nth-child(5) { animation-delay: 280ms; }
.tvd-modern-stagger > .tvd-modern-reveal:nth-child(n + 6) { animation-delay: 350ms; }

.header-wrapper {
  transition: box-shadow 320ms ease, transform 320ms var(--tvd-modern-ease);
}

.header-wrapper.tvd-modern-is-scrolled {
  box-shadow: 0 14px 38px rgba(15, 23, 42, 0.12);
}

@keyframes tvd-modern-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

@keyframes tvd-modern-reveal {
  from { opacity: 0; transform: translateY(22px) scale(0.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@media (max-width: 849px) {
  body { background-attachment: scroll; }
  :where(.product-small, .post-item, .tvd-card, .tvd-dashboard-card):hover { transform: translateY(-3px); }
}

@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;
  }
}