/* ============================================================
   Leatherooze Exports — Theme / background picker (js/theme.js)
   Uses the same theme tokens as styles.css, so it always matches.
   ============================================================ */

/* Smooth colour change only while switching themes */
html.lz-theme-switching body,
html.lz-theme-switching body *:not(.lz-swatch):not(.lz-bgopt) {
  transition: background-color 0.35s ease, color 0.35s ease, border-color 0.35s ease !important;
}

.lz-theme-fab {
  position: fixed;
  left: max(16px, env(safe-area-inset-left));
  bottom: max(16px, env(safe-area-inset-bottom));
  z-index: 1100;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 1.35rem;
  line-height: 1;
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
  cursor: pointer;
  touch-action: manipulation;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.lz-theme-fab:hover { transform: translateY(-2px) rotate(-8deg); box-shadow: 0 10px 26px rgba(0, 0, 0, 0.22); }
.lz-theme-fab[aria-expanded="true"] { box-shadow: 0 0 0 3px var(--accent), 0 6px 20px rgba(0, 0, 0, 0.18); }
.lz-theme-fab:focus-visible,
.lz-theme-panel button:focus-visible,
.lz-tp-custom input:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}
body.nav-open .lz-theme-fab,
body.nav-open .lz-theme-panel { display: none; }

.lz-theme-panel {
  position: fixed;
  left: max(16px, env(safe-area-inset-left));
  bottom: calc(max(16px, env(safe-area-inset-bottom)) + 60px);
  z-index: 1101;
  width: min(360px, calc(100vw - 32px));
  max-height: min(78vh, 640px);
  display: flex;
  flex-direction: column;
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.28);
  font-family: var(--font-sans);
  overflow: hidden;
  animation: lz-tp-in 0.22s ease;
}
.lz-theme-panel[hidden] { display: none; }
@keyframes lz-tp-in {
  from { opacity: 0; transform: translateY(10px) scale(0.98); }
  to { opacity: 1; transform: none; }
}

.lz-tp-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.85rem 0.85rem 0.75rem 1.1rem;
  border-bottom: 1px solid var(--border);
}
.lz-tp-title {
  font-family: var(--font-serif);
  font-size: 1.35rem;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--heading);
}
.lz-tp-close {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  font-size: 1.6rem;
  line-height: 1;
  color: var(--text-muted);
  display: grid;
  place-items: center;
}
.lz-tp-close:hover { background: rgba(var(--accent-rgb), 0.1); color: var(--heading); }

.lz-tp-body {
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 0.35rem 1.1rem 1.1rem;
}

.lz-tp-label {
  margin: 0.95rem 0 0.5rem;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-ink);
}

.lz-tp-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.55rem;
}

.lz-swatch,
.lz-bgopt {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 0.35rem;
  border-radius: 10px;
  border: 1.5px solid var(--border);
  background: transparent;
  text-align: left;
  min-height: 44px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.lz-swatch:hover,
.lz-bgopt:hover { transform: translateY(-1px); border-color: rgba(var(--accent-rgb), 0.6); }
.lz-swatch[aria-pressed="true"],
.lz-bgopt[aria-pressed="true"] {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(var(--accent-rgb), 0.35);
}

.lz-sw-prev,
.lz-bg-prev {
  position: relative;
  display: block;
  height: 46px;
  border-radius: 7px;
  overflow: hidden;
  border: 1px solid rgba(0, 0, 0, 0.08);
}
.lz-sw-bar { position: absolute; left: 0; right: 0; top: 0; height: 12px; }
.lz-sw-card {
  position: absolute;
  left: 8px; right: 8px; top: 18px; bottom: 6px;
  border-radius: 4px;
  border: 1px solid;
}
.lz-sw-line { position: absolute; left: 6px; top: 6px; width: 55%; height: 3px; border-radius: 2px; opacity: 0.8; }
.lz-sw-dot { position: absolute; right: 6px; bottom: 4px; width: 14px; height: 9px; border-radius: 5px; }
.lz-swatch[aria-pressed="true"] .lz-sw-prev::after,
.lz-bgopt[aria-pressed="true"] .lz-bg-prev::after {
  content: "✓";
  position: absolute;
  top: 3px; right: 4px;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--on-accent);
  font-size: 0.65rem;
  font-weight: 700;
  display: grid;
  place-items: center;
}

.lz-sw-name {
  font-size: 0.74rem;
  font-weight: 500;
  line-height: 1.25;
  color: var(--text);
}

.lz-tp-custom {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.55rem;
}
.lz-tp-custom label {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.45rem 0.55rem;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  font-size: 0.78rem;
  cursor: pointer;
  min-height: 44px;
}
.lz-tp-custom input[type="color"] {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: none;
  cursor: pointer;
}
.lz-tp-custom input[type="color"]::-webkit-color-swatch-wrapper { padding: 2px; }
.lz-tp-custom input[type="color"]::-webkit-color-swatch { border: none; border-radius: 6px; }
.lz-tp-custom input[type="color"]::-moz-color-swatch { border: none; border-radius: 6px; }

.lz-tp-hint {
  margin-top: 0.6rem;
  font-size: 0.74rem;
  color: var(--text-muted);
  line-height: 1.45;
}

.lz-tp-reset {
  margin-top: 0.85rem;
  width: 100%;
  min-height: 44px;
  border-radius: 999px;
  border: 1.5px solid var(--heading);
  color: var(--heading);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  transition: background 0.2s ease, color 0.2s ease;
}
.lz-tp-reset:hover { background: var(--heading); color: var(--bg); }

/* Phones: panel becomes a bottom sheet */
@media (max-width: 600px) {
  .lz-theme-fab { width: 46px; height: 46px; left: max(12px, env(safe-area-inset-left)); bottom: max(12px, env(safe-area-inset-bottom)); }
  .lz-theme-panel {
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    max-height: 78vh;
    border-radius: 18px 18px 0 0;
    border-left: none;
    border-right: none;
    border-bottom: none;
    padding-bottom: env(safe-area-inset-bottom);
    animation-name: lz-tp-up;
  }
  .lz-tp-head::before {
    content: "";
    position: absolute;
    top: 6px;
    left: 50%;
    width: 40px;
    height: 4px;
    margin-left: -20px;
    border-radius: 2px;
    background: var(--border);
  }
  .lz-tp-head { position: relative; padding-top: 1rem; }
}
@keyframes lz-tp-up {
  from { transform: translateY(100%); }
  to { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .lz-theme-panel { animation: none; }
}

/* ============================================================
   Effect levels — chips in the panel
   ============================================================ */
:root { --fx-hi: 0.6; --fx-shadow-rgb: 26, 18, 11; }

.lz-chips {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.35rem;
  padding: 0.25rem;
  border-radius: 999px;
  background: rgba(var(--accent-rgb), 0.08);
  margin-bottom: 0.4rem;
}
.lz-chip {
  min-height: 34px;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}
.lz-chip:hover { color: var(--heading); }
.lz-chip[aria-pressed="true"] {
  background: var(--accent);
  color: var(--on-accent);
  box-shadow: 0 2px 8px rgba(var(--accent-rgb), 0.35);
}
.lz-tp-levelhint { margin: 0 0 0.6rem; min-height: 2.1em; }
.lz-bgopt[hidden] { display: none; }

/* swatch previews reflect the chosen effect level */
.lz-tp-grid[data-fx="3d"] .lz-sw-card,
.lz-tp-grid[data-fx="4d"] .lz-sw-card,
.lz-tp-grid[data-fx="6d"] .lz-sw-card { box-shadow: 0 4px 8px -2px rgba(0, 0, 0, 0.35); transform: translateY(-1px); }
.lz-tp-grid[data-fx="4d"] .lz-sw-dot,
.lz-tp-grid[data-fx="6d"] .lz-sw-dot { box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.35); }
.lz-tp-grid[data-fx="6d"] .lz-sw-card { transform: perspective(120px) rotateY(-10deg) rotateX(6deg); }

/* 3D / 4D / 6D background previews (static mini illustrations) */
.lz-pv { background-color: var(--bg); }
.lz-pv-badge {
  position: absolute;
  left: 4px; bottom: 4px;
  padding: 1px 5px;
  border-radius: 4px;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  background: var(--dark);
  color: var(--on-dark);
  z-index: 1;
}
.lz-pv-shapes {
  background-image:
    linear-gradient(135deg, transparent 46%, rgba(var(--accent-rgb), 0.55) 47%, rgba(var(--accent-rgb), 0.85) 60%, transparent 61%),
    radial-gradient(circle at 75% 35%, rgba(var(--accent-rgb), 0.7) 0 9px, transparent 10px),
    conic-gradient(from 45deg at 30% 55%, rgba(var(--accent-rgb), 0.9) 0 90deg, rgba(var(--accent-rgb), 0.55) 0 180deg, transparent 0);
  background-size: 50% 60%, 100% 100%, 40% 60%;
  background-position: 85% 85%, 0 0, 12% 70%;
  background-repeat: no-repeat;
}
.lz-pv-tiles {
  background-image:
    linear-gradient(135deg, rgba(255, 255, 255, 0.7), transparent 50%, rgba(0, 0, 0, 0.22));
  background-size: 16px 16px;
}
.lz-pv-floor {
  background-image:
    linear-gradient(to top, rgba(var(--accent-rgb), 0.55) 1px, transparent 1px),
    repeating-conic-gradient(from -18deg at 50% -40%, rgba(var(--accent-rgb), 0.5) 0 1deg, transparent 1deg 6deg),
    linear-gradient(to bottom, rgba(var(--accent-rgb), 0.18), transparent 40%);
  background-size: 100% 8px, 100% 100%, 100% 100%;
}
.lz-pv-orbs {
  background-image:
    radial-gradient(circle at 28% 40%, rgba(255, 255, 255, 0.6) 0 2px, rgba(var(--accent-rgb), 0.45) 3px 11px, transparent 12px),
    radial-gradient(circle at 70% 62%, rgba(255, 255, 255, 0.5) 0 2px, rgba(var(--on-dark-accent-rgb), 0.7) 3px 14px, transparent 15px),
    radial-gradient(circle at 85% 20%, rgba(var(--accent-rgb), 0.35) 0 6px, transparent 7px);
}
.lz-pv-wave {
  background-image:
    repeating-radial-gradient(ellipse 120% 60% at 50% 160%, transparent 0 5px, rgba(var(--accent-rgb), 0.55) 5px 6px);
}
.lz-pv-dust {
  background-image:
    radial-gradient(circle, rgba(var(--accent-rgb), 0.95) 0 1.5px, transparent 2px),
    radial-gradient(circle, rgba(var(--accent-rgb), 0.55) 0 1px, transparent 1.5px),
    radial-gradient(circle, rgba(var(--accent-rgb), 0.35) 0 3px, transparent 4px);
  background-size: 17px 13px, 9px 11px, 29px 23px;
  background-position: 0 0, 4px 6px, 10px 3px;
}
.lz-pv-flow {
  background-image:
    radial-gradient(ellipse at 20% 30%, rgba(var(--accent-rgb), 0.45), transparent 55%),
    radial-gradient(ellipse at 80% 70%, rgba(var(--on-dark-accent-rgb), 0.8), transparent 55%),
    linear-gradient(120deg, transparent 30%, rgba(var(--accent-rgb), 0.2) 50%, transparent 70%);
}

/* ============================================================
   THEME EFFECT LEVELS (html.lz-fx-3 / -4 / -6 set by theme.js)
   ============================================================ */

/* ---- 3D: depth ---- */
html.lz-fx-3 .card,
html.lz-fx-3 .value-card,
html.lz-fx-3 .step,
html.lz-fx-3 .capability,
html.lz-fx-3 .contact-info-card,
html.lz-fx-3 .form-card {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, var(--fx-hi)),
    0 1px 2px rgba(var(--fx-shadow-rgb), 0.10),
    0 10px 24px -8px rgba(var(--fx-shadow-rgb), 0.30),
    0 30px 50px -28px rgba(var(--fx-shadow-rgb), 0.45);
}
html.lz-fx-3 .card:hover {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, var(--fx-hi)),
    0 2px 4px rgba(var(--fx-shadow-rgb), 0.12),
    0 18px 36px -10px rgba(var(--fx-shadow-rgb), 0.38),
    0 40px 70px -30px rgba(var(--fx-shadow-rgb), 0.5);
}
html.lz-fx-3 .card-media { box-shadow: inset 0 -12px 20px -12px rgba(0, 0, 0, 0.35); }
html.lz-fx-3 .split-media { box-shadow: 0 30px 60px -25px rgba(var(--fx-shadow-rgb), 0.6), 0 10px 20px -10px rgba(var(--fx-shadow-rgb), 0.3); }

html.lz-fx-3 .btn-primary {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.28),
    inset 0 -2px 0 rgba(0, 0, 0, 0.18),
    0 4px 0 color-mix(in srgb, var(--accent-hover) 80%, #000),
    0 12px 22px -8px rgba(var(--accent-rgb), 0.6);
}
html.lz-fx-3 .btn-primary:hover { transform: translateY(-2px); }
html.lz-fx-3 .btn-primary:active {
  transform: translateY(3px);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.25), 0 1px 0 color-mix(in srgb, var(--accent-hover) 80%, #000);
}
html.lz-fx-3 .btn-light,
html.lz-fx-3 .btn-ghost,
html.lz-fx-3 .btn-secondary { box-shadow: 0 3px 0 rgba(0, 0, 0, 0.22), 0 10px 20px -10px rgba(0, 0, 0, 0.5); }

html.lz-fx-3 h1,
html.lz-fx-3 h2,
html.lz-fx-3 h3 {
  text-shadow: 0 1px 0 rgba(255, 255, 255, var(--fx-hi)), 0 3px 6px rgba(var(--fx-shadow-rgb), 0.18);
}
html.lz-fx-3 .hero h1, html.lz-fx-3 .hero h2,
html.lz-fx-3 .page-hero h1,
html.lz-fx-3 .section-dark h2, html.lz-fx-3 .section-dark h3,
html.lz-fx-3 .cta-band h2 {
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.35), 0 10px 28px rgba(0, 0, 0, 0.45);
}
html.lz-fx-3 .site-header {
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, var(--fx-hi)), 0 10px 28px -14px rgba(var(--fx-shadow-rgb), 0.45);
  border-bottom-color: var(--border);
}
html.lz-fx-3 .logo-mark,
html.lz-fx-3 .trust-icon {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -2px 0 rgba(0, 0, 0, 0.3), 0 3px 8px rgba(0, 0, 0, 0.25);
}
html.lz-fx-3 .pill { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 2px 5px rgba(0, 0, 0, 0.12); }
html.lz-fx-3 .value-card .icon { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), inset 0 -2px 0 rgba(0, 0, 0, 0.12); }

/* ---- 4D: 3D + motion ---- */
html.lz-fx-4 .btn-primary,
html.lz-fx-4 .btn-light { position: relative; overflow: hidden; isolation: isolate; }
html.lz-fx-4 .btn-primary::after,
html.lz-fx-4 .btn-light::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(110deg, transparent 38%, rgba(255, 255, 255, 0.24) 50%, transparent 62%);
  transform: translateX(-130%);
  animation: lz-shimmer 5s ease-in-out infinite;
  pointer-events: none;
}
@keyframes lz-shimmer {
  0%, 55% { transform: translateX(-130%); }
  85%, 100% { transform: translateX(130%); }
}
html.lz-fx-4 .site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, transparent, rgba(var(--accent-rgb), 0.10), transparent, rgba(var(--accent-rgb), 0.07), transparent);
  background-size: 200% 100%;
  animation: lz-flow 14s linear infinite;
  pointer-events: none;
}
html.lz-fx-4 .site-header::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  background-size: 50% 100%;
  background-repeat: no-repeat;
  animation: lz-line 7s ease-in-out infinite;
  pointer-events: none;
}
@keyframes lz-flow { from { background-position: 0% 0; } to { background-position: 200% 0; } }
@keyframes lz-line { 0% { background-position: -60% 0; } 100% { background-position: 160% 0; } }
html.lz-fx-4 .section-header h2::after {
  content: "";
  display: block;
  width: 72px;
  height: 2px;
  margin-top: 0.7rem;
  border-radius: 2px;
  background: linear-gradient(90deg, rgba(var(--accent-rgb), 0.15), var(--accent), rgba(var(--accent-rgb), 0.15));
  background-size: 200% 100%;
  animation: lz-flow 4s linear infinite;
}
html.lz-fx-4 .section-header.centered h2::after { margin-inline: auto; }
html.lz-fx-4 .section-dark .section-header h2::after {
  background: linear-gradient(90deg, rgba(var(--on-dark-accent-rgb), 0.15), var(--on-dark-accent), rgba(var(--on-dark-accent-rgb), 0.15));
  background-size: 200% 100%;
}
html.lz-fx-4 .hero-bg { animation: lz-kenburns 28s ease-in-out infinite alternate; }
@keyframes lz-kenburns { from { transform: scale(1); } to { transform: scale(1.08) translate3d(-1%, -1%, 0); } }

/* ---- 6D: 4D + interaction (tilt + glow added by js/theme-fx.js) ---- */
html.lz-fx-6 .card,
html.lz-fx-6 .value-card,
html.lz-fx-6 .step,
html.lz-fx-6 .capability,
html.lz-fx-6 .contact-info-card { position: relative; }
html.lz-fx-6 .split-media { position: relative; }
html.lz-fx-6 .lz-tilt {
  transform: perspective(900px) rotateX(var(--lz-rx, 0deg)) rotateY(var(--lz-ry, 0deg)) translateY(-4px) !important;
  transition: transform 0.12s ease-out, box-shadow 0.28s ease !important;
  will-change: transform;
}
html.lz-fx-6 .lz-tilt::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(circle at var(--lz-gx, 50%) var(--lz-gy, 50%), rgba(255, 255, 255, 0.16), transparent 55%);
  pointer-events: none;
}
.lz-cursor-glow {
  position: fixed;
  left: 0; top: 0;
  width: 520px; height: 520px;
  border-radius: 50%;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(circle, rgba(var(--accent-rgb), 0.16), transparent 62%);
  transform: translate3d(-600px, -600px, 0);
  will-change: transform;
}

/* ============================================================
   3D / 4D / 6D BACKGROUND LAYER (js/theme-fx.js)
   Fixed behind all content; never receives clicks; no layout impact.
   ============================================================ */
.lz-fx-layer {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
  contain: strict;
  --mx: 0; --my: 0; --sy: 0px;
}
.lz-fx-layer canvas { display: block; width: 100%; height: 100%; }
.lz-fx-layer::after {               /* readability scrim in the page colour */
  content: "";
  position: absolute;
  inset: 0;
  background: var(--bg);
  opacity: var(--scrim, 0.15);
}
/* let the background show through alternate sections a little */
html.lz-bg-fx .section-alt {
  background-color: color-mix(in srgb, var(--surface-alt) 80%, transparent);
  background-image: none;
}
html.lz-bg-fx body { background-image: none; }

/* Glass orbs */
.lz-orb { position: absolute; transform: translate3d(calc(var(--mx) * var(--d) * -1px), calc(var(--my) * var(--d) * -1px - var(--sy) * var(--d) / 260), 0); }
.lz-orb i {
  display: block;
  width: 100%; height: 100%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 32% 28%, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0) 24%),
    radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--c) 34%, transparent) 0%, color-mix(in srgb, var(--c) 16%, transparent) 55%, transparent 71%);
  box-shadow: inset -14px -18px 40px color-mix(in srgb, var(--c) 22%, transparent), inset 10px 12px 30px rgba(255, 255, 255, 0.18);
}
.lz-orb.o1 { --c: var(--accent); --d: 40; width: 34vmax; height: 34vmax; left: -8vmax; top: 8vh; }
.lz-orb.o2 { --c: var(--on-dark-accent); --d: 22; width: 22vmax; height: 22vmax; right: -4vmax; top: 2vh; }
.lz-orb.o3 { --c: var(--dark-mid); --d: 60; width: 16vmax; height: 16vmax; right: 18vw; bottom: 6vh; }
.lz-orb.o4 { --c: var(--accent); --d: 14; width: 10vmax; height: 10vmax; left: 36vw; top: 18vh; }
.lz-orb.o5 { --c: var(--on-dark-accent); --d: 32; width: 26vmax; height: 26vmax; left: 12vw; bottom: -12vmax; }
.lz-orb.o6 { --c: var(--accent); --d: 8; width: 6vmax; height: 6vmax; right: 8vw; top: 52vh; }
.lz-fx-layer.is-anim .lz-orb i { animation: lz-float 22s ease-in-out infinite alternate; }
.lz-fx-layer.is-anim .lz-orb.o2 i { animation-duration: 28s; animation-delay: -6s; }
.lz-fx-layer.is-anim .lz-orb.o3 i { animation-duration: 18s; animation-delay: -3s; }
.lz-fx-layer.is-anim .lz-orb.o5 i { animation-duration: 32s; animation-delay: -12s; }
@keyframes lz-float {
  0% { transform: translate3d(0, 0, 0) scale(1); }
  50% { transform: translate3d(2vw, -3vh, 0) scale(1.05); }
  100% { transform: translate3d(-1.5vw, 2vh, 0) scale(0.97); }
}

/* Perspective floor */
.lz-horizon {
  position: absolute;
  left: 0; right: 0; top: 30%;
  height: 30%;
  background: radial-gradient(ellipse 60% 50% at 50% 50%, rgba(var(--accent-rgb), 0.22), transparent 70%);
}
.lz-floor {
  position: absolute;
  left: -50%; right: -50%;
  top: 45%; bottom: -10%;
  transform: perspective(520px) rotateX(68deg) translate3d(calc(var(--mx) * -30px), 0, 0);
  transform-origin: 50% 0;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 35%);
  mask-image: linear-gradient(to bottom, transparent 0%, #000 35%);
}
.lz-floor-grid {
  position: absolute;
  left: 0; right: 0; top: -64px; bottom: 0;
  background-image:
    linear-gradient(rgba(var(--accent-rgb), 0.45) 1.5px, transparent 1.5px),
    linear-gradient(90deg, rgba(var(--accent-rgb), 0.45) 1.5px, transparent 1.5px);
  background-size: 64px 64px;
}
.lz-fx-layer.is-anim .lz-floor-grid { animation: lz-floor 3.2s linear infinite; }
@keyframes lz-floor { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(0, 64px, 0); } }

/* Embossed leather tiles */
.lz-v-tiles { perspective: 900px; }
.lz-tiles-plane {
  position: absolute;
  inset: -10%;
  background-color: color-mix(in srgb, var(--surface-soft) 55%, var(--bg));
  background-size: 96px 96px;
  transform: rotateX(calc(var(--my) * -5deg)) rotateY(calc(var(--mx) * 5deg)) translate3d(0, calc(var(--sy) * -0.04), 0);
  opacity: 0.9;
}
.lz-tiles-light {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at calc(30% + var(--mx) * 35%) calc(22% + var(--my) * 35%), rgba(255, 255, 255, 0.35), transparent 45%);
  mix-blend-mode: soft-light;
}
.lz-fx-layer.is-anim.lz-v-tiles:not(.is-interactive) .lz-tiles-light { animation: lz-sweep 14s ease-in-out infinite alternate; }

/* Flowing silk */
.lz-flow-a, .lz-flow-b, .lz-flow-c {
  position: absolute;
  width: 140vmax; height: 140vmax;
  left: 50%; top: 50%;
  margin: -70vmax 0 0 -70vmax;
  border-radius: 50%;
}
.lz-flow-a { background: conic-gradient(from 0deg, transparent, rgba(var(--accent-rgb), 0.20), transparent 30%, rgba(var(--on-dark-accent-rgb), 0.35), transparent 60%, rgba(var(--accent-rgb), 0.14), transparent); }
.lz-flow-b { background: radial-gradient(ellipse 40% 25% at 35% 40%, rgba(var(--accent-rgb), 0.18), transparent 70%), radial-gradient(ellipse 35% 22% at 65% 62%, rgba(var(--on-dark-accent-rgb), 0.35), transparent 70%); }
.lz-flow-c { background: linear-gradient(115deg, transparent 40%, rgba(255, 255, 255, 0.18) 50%, transparent 60%); }
.lz-fx-layer.is-anim .lz-flow-a { animation: lz-spin 70s linear infinite; }
.lz-fx-layer.is-anim .lz-flow-b { animation: lz-spin 46s linear infinite reverse; }
.lz-fx-layer.is-anim .lz-flow-c { animation: lz-sweep 12s ease-in-out infinite alternate; }
@keyframes lz-spin { to { transform: rotate(360deg); } }
@keyframes lz-sweep { from { transform: translate3d(-12%, 0, 0); } to { transform: translate3d(12%, 0, 0); } }

/* Phones: lighter effects */
@media (max-width: 600px) {
  html.lz-fx-4 .hero-bg { animation: none; }
  .lz-floor-grid { background-size: 48px 48px; }
}

/* Reduced motion: everything static (JS also renders a single still frame) */
@media (prefers-reduced-motion: reduce) {
  html.lz-fx-4 .btn-primary::after,
  html.lz-fx-4 .btn-light::after { animation: none; display: none; }
  html.lz-fx-4 .site-header::before,
  html.lz-fx-4 .site-header::after,
  html.lz-fx-4 .section-header h2::after,
  html.lz-fx-4 .hero-bg,
  .lz-fx-layer * { animation: none !important; }
  html.lz-fx-6 .lz-tilt { transform: none !important; }
}

/* Price (from admin dashboard) */
.product-price{font-weight:700;color:var(--accent,#c9a24a);margin:.35rem 0 .2rem}
.pd-price{font-size:1.35rem;font-weight:700;color:var(--accent,#c9a24a);margin:.4rem 0 .9rem}
.pd-price.is-request{font-size:1rem;font-weight:600;opacity:.85}
.pd-mrp{font-size:.9rem;opacity:.6;font-weight:400}

/* Product code */
.product-code{font-weight:700;letter-spacing:.04em;opacity:.85}
.pd-code{font-size:.9rem;font-weight:700;letter-spacing:.05em;opacity:.8;margin:.2rem 0 .4rem}