/* ============================================================
   CAYIA — Visual Effects Layer  (effects.css)
   Loaded after themes.css. Extends the skin system.

   Architecture:
   • All values use CSS tokens — zero hardcoded colors.
   • Effects depend on [data-skin="..."] selectors.
   • CSS-only: no JavaScript timers or re-renders.
   • prefers-reduced-motion collapses all animations.
   • --fx-enabled token defined for future motion toggle in Settings.

   How to add a new skin's effects:
   1. Add [data-skin="newId"] block below to override --fx-* tokens.
   2. Add targeted animation rules in the per-skin section.
============================================================ */

/* ──────────────────────────────────────────────────────────
   SECTION 1 — EFFECT TOKEN DEFAULTS  (default skin = minimal)
────────────────────────────────────────────────────────── */
:root {
  /* Reserved for future "Motion effects" toggle in Settings */
  --fx-enabled: 1;

  /* Timing */
  --fx-duration-slow:   18s;
  --fx-duration-medium:  7s;
  --fx-duration-fast:  180ms;

  /* Gradient sources for ambient background */
  --fx-gradient-a: var(--primary, #2563EB);
  --fx-gradient-b: var(--purple,  #8B5CF6);
  --fx-gradient-c: var(--accent-2, #8B5CF6);

  /* Glow values */
  --fx-glow-primary:   none;
  --fx-glow-secondary: none;

  /* Border accent color for hover/active glow */
  --fx-border-glow: var(--border, #E5E7EB);

  /* Ambient layer (0 = hidden; skins turn this up) */
  --fx-ambient-opacity: 0;

  /* Sheen strip opacity inside buttons */
  --fx-motion-opacity: 0.30;

  /* Card hover lift & shadow */
  --fx-card-hover-transform: translateY(-3px);
  --fx-card-hover-shadow:    0 12px 32px rgba(0,0,0,.12);

  /* Surface sheen color for button ::after */
  --fx-surface-sheen: rgba(255,255,255,0.18);
}

/* ──────────────────────────────────────────────────────────
   SECTION 2 — EFFECT TOKEN OVERRIDES PER SKIN
────────────────────────────────────────────────────────── */

/* ── Cyberpunk — the most vivid skin ── */
[data-skin="cyberpunk"] {
  --fx-gradient-a:         #2F6BFF;
  --fx-gradient-b:         #B026FF;
  --fx-gradient-c:         #FF2BD6;
  --fx-glow-primary:       0 0 26px rgba(47,107,255,.52), 0 0 60px rgba(255,43,214,.22);
  --fx-glow-secondary:     0 0 34px rgba(176,38,255,.36);
  --fx-border-glow:        rgba(176,38,255,.72);
  --fx-ambient-opacity:    0.42;
  --fx-motion-opacity:     0.48;
  --fx-duration-slow:      13s;
  --fx-duration-medium:    5.5s;
  --fx-card-hover-transform: translateY(-4px);
  --fx-card-hover-shadow:  0 0 28px rgba(47,107,255,.40), 0 16px 44px rgba(0,0,0,.60);
  --fx-surface-sheen:      rgba(176,38,255,.18);
}

/* ── Modern SaaS — clean, barely-there ── */
[data-skin="modernSaas"] {
  --fx-gradient-a:      #2F6BFF;
  --fx-gradient-b:      #69A1FF;
  --fx-gradient-c:      #6D4AFF;
  --fx-glow-primary:    0 10px 28px rgba(47,107,255,.14);
  --fx-border-glow:     rgba(47,107,255,.28);
  --fx-ambient-opacity: 0.09;
  --fx-motion-opacity:  0.20;
  --fx-duration-slow:   24s;
  --fx-duration-medium: 10s;
  --fx-card-hover-shadow: 0 8px 24px rgba(47,107,255,.11);
  --fx-surface-sheen:   rgba(255,255,255,.22);
}

/* ── Traditional Business — gold, no neon ── */
[data-skin="traditionalBusiness"] {
  --fx-gradient-a:      #D6A84F;
  --fx-gradient-b:      #FFF0A8;
  --fx-gradient-c:      #0FA36B;
  --fx-glow-primary:    0 0 22px rgba(214,168,79,.28);
  --fx-border-glow:     rgba(214,168,79,.58);
  --fx-ambient-opacity: 0.13;
  --fx-motion-opacity:  0.18;
  --fx-duration-slow:   22s;
  --fx-duration-medium: 11s;
  --fx-card-hover-shadow: 0 8px 30px rgba(0,0,0,.44);
  --fx-surface-sheen:   rgba(214,168,79,.26);
}

/* ── Pink Girly — soft rose elegance ── */
[data-skin="pinkGirly"] {
  --fx-gradient-a:      #FF5C9A;
  --fx-gradient-b:      #FF9FC4;
  --fx-gradient-c:      #FFD1E2;
  --fx-glow-primary:    0 0 22px rgba(255,92,154,.28);
  --fx-border-glow:     rgba(255,92,154,.50);
  --fx-ambient-opacity: 0.16;
  --fx-motion-opacity:  0.26;
  --fx-duration-slow:   20s;
  --fx-duration-medium: 9s;
  --fx-card-hover-shadow: 0 8px 24px rgba(214,51,108,.14);
  --fx-surface-sheen:   rgba(255,138,184,.22);
}

/* ── Green Eco — natural, calm ── */
[data-skin="greenEco"] {
  --fx-gradient-a:      #159957;
  --fx-gradient-b:      #67C587;
  --fx-gradient-c:      #CCEFCF;
  --fx-glow-primary:    0 0 20px rgba(21,153,87,.20);
  --fx-border-glow:     rgba(21,153,87,.40);
  --fx-ambient-opacity: 0.13;
  --fx-motion-opacity:  0.22;
  --fx-duration-slow:   22s;
  --fx-duration-medium: 11s;
  --fx-card-hover-shadow: 0 8px 24px rgba(21,153,87,.14);
  --fx-surface-sheen:   rgba(103,197,135,.18);
}

/* ── Luxury Black — metal sheen, minimal ── */
[data-skin="luxuryBlack"] {
  --fx-gradient-a:      #FFFFFF;
  --fx-gradient-b:      #9A9A9A;
  --fx-gradient-c:      #2A2A2D;
  --fx-glow-primary:    0 0 18px rgba(255,255,255,.14);
  --fx-border-glow:     rgba(200,200,200,.28);
  --fx-ambient-opacity: 0.07;
  --fx-motion-opacity:  0.14;
  --fx-duration-slow:   26s;
  --fx-duration-medium: 14s;
  --fx-card-hover-shadow: 0 8px 36px rgba(0,0,0,.75);
  --fx-surface-sheen:   rgba(255,255,255,.12);
}

/* ──────────────────────────────────────────────────────────
   SECTION 3 — KEYFRAME DEFINITIONS
────────────────────────────────────────────────────────── */

/* Ambient background gradient drift */
@keyframes cayiaGradientShift {
  0%   { background-position: 0%   50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0%   50%; }
}

/* Neon border/glow pulse — cyberpunk cards */
@keyframes cayiaNeonPulse {
  0%, 100% {
    box-shadow:   var(--shadow, 0 1px 4px rgba(0,0,0,.10));
    border-color: var(--border);
  }
  50% {
    box-shadow:   var(--fx-glow-primary);
    border-color: var(--fx-border-glow);
  }
}

/* Slow gold/metal pulse — traditional & luxury */
@keyframes cayiaGoldPulse {
  0%, 100% {
    box-shadow:   var(--shadow, 0 2px 8px rgba(0,0,0,.25));
    border-color: var(--border);
  }
  50% {
    box-shadow:   var(--fx-glow-primary);
    border-color: var(--fx-border-glow);
  }
}

/* Sheen sweep — button highlight */
@keyframes cayiaSheen {
  0%   { transform: translateX(-130%) skewX(-18deg); opacity: 0; }
  14%  { opacity: var(--fx-motion-opacity); }
  42%  { opacity: 0; }
  100% { transform: translateX(230%)  skewX(-18deg); opacity: 0; }
}

/* Subtle float — FAB / floating elements */
@keyframes cayiaFloatSoft {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-4px); }
}

/* Cyberpunk hue rotation — color cycling accent */
@keyframes cayiaHueCycle {
  0%   { filter: hue-rotate(0deg); }
  50%  { filter: hue-rotate(20deg); }
  100% { filter: hue-rotate(0deg); }
}

/* ──────────────────────────────────────────────────────────
   SECTION 4 — AMBIENT BACKGROUND LAYER
   .main-content::before covers full viewport (position:fixed)
   with z-index:-1 inside isolated stacking context.
   Opacity controlled by --fx-ambient-opacity (0 = off).
────────────────────────────────────────────────────────── */
.main-content {
  isolation: isolate;
  position: relative;
}

.main-content::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: var(--fx-ambient-opacity, 0);
  background:
    radial-gradient(
      ellipse at 14% 10%,
      color-mix(in srgb, var(--fx-gradient-a) 48%, transparent),
      transparent 36%
    ),
    radial-gradient(
      ellipse at 90% 14%,
      color-mix(in srgb, var(--fx-gradient-b) 40%, transparent),
      transparent 32%
    ),
    radial-gradient(
      ellipse at 56% 94%,
      color-mix(in srgb, var(--fx-gradient-c) 34%, transparent),
      transparent 30%
    );
  background-size: 180% 180%;
  animation: cayiaGradientShift var(--fx-duration-slow) ease-in-out infinite;
  will-change: background-position;
  transition: opacity 600ms ease;
}

/* ──────────────────────────────────────────────────────────
   SECTION 5 — GLOBAL CARD TRANSITIONS
   Applies to all skins. Hover uses skin-aware tokens.
────────────────────────────────────────────────────────── */
.stat-card,
.action-card,
.chart-card,
.settings-card,
.activity-item,
.skin-option,
.pricing-card,
.device-item,
.browser-item {
  transition:
    transform    var(--fx-duration-fast) ease,
    box-shadow   var(--fx-duration-fast) ease,
    border-color var(--fx-duration-fast) ease;
}

/* Generic hover lift — active for ALL skins */
.stat-card:hover,
.chart-card:hover {
  transform:    var(--fx-card-hover-transform);
  box-shadow:   var(--fx-card-hover-shadow);
  border-color: var(--fx-border-glow);
}

.action-card:hover {
  transform:    var(--fx-card-hover-transform);
  box-shadow:   var(--fx-card-hover-shadow);
  border-color: var(--fx-border-glow);
}

/* Skin picker — hover & active state */
.skin-option:hover {
  transform:    var(--fx-card-hover-transform);
  box-shadow:   var(--fx-card-hover-shadow);
  border-color: var(--fx-border-glow);
}
.skin-option.active {
  border-color: var(--fx-border-glow);
  box-shadow:   var(--fx-glow-primary);
}

/* ──────────────────────────────────────────────────────────
   SECTION 6 — BUTTON SHEEN
   .btn-primary gets a sweep-sheen ::after pseudo-element.
   Timing is long by default (subtle); skins speed it up.
────────────────────────────────────────────────────────── */
.btn-primary {
  position: relative;
  overflow: hidden;
}

.btn-primary::after {
  content: "";
  position: absolute;
  top: -25%;
  bottom: -25%;
  left: 0;
  width: 38%;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    transparent,
    var(--fx-surface-sheen, rgba(255,255,255,.18)),
    transparent
  );
  animation: cayiaSheen calc(var(--fx-duration-medium) * 2.2) ease-in-out infinite;
  will-change: transform;
}

/* Suppress sheen on disabled state */
.btn-primary:disabled::after {
  animation: none;
  opacity: 0;
}

/* ──────────────────────────────────────────────────────────
   SECTION 7 — FLOATING AI BUTTON (SmartAssist .sa-fab)
────────────────────────────────────────────────────────── */
.sa-fab {
  box-shadow: var(--fx-glow-primary) !important;
  animation: cayiaFloatSoft 4.2s ease-in-out infinite;
  will-change: transform;
}

/* ──────────────────────────────────────────────────────────
   SECTION 8 — ACTIVE NAV ITEM  (all skins)
────────────────────────────────────────────────────────── */
.nav-item.active {
  transition:
    background var(--transition),
    color      var(--transition),
    box-shadow var(--fx-duration-fast) ease;
}

/* ──────────────────────────────────────────────────────────
   SECTION 9 — CYBERPUNK SPECIFIC EFFECTS
   Most vivid skin: neon pulse on cards, border glow on nav,
   hue-cycle on FAB, colorful sheen on buttons.
────────────────────────────────────────────────────────── */

/* Neon pulse — dashboard stat & action cards */
[data-skin="cyberpunk"] .stat-card,
[data-skin="cyberpunk"] .action-card {
  animation: cayiaNeonPulse 5.5s ease-in-out infinite;
}

/* Slightly offset chart-card pulse so not everything pulses in sync */
[data-skin="cyberpunk"] .chart-card {
  animation: cayiaNeonPulse 7s 1.5s ease-in-out infinite;
}

/* Active nav item — sidebar glow */
[data-skin="cyberpunk"] .nav-item.active {
  box-shadow: inset 3px 0 0 var(--sidebar-text-active),
              inset 0 0 20px rgba(47,107,255,.16);
}

/* Badge glow */
[data-skin="cyberpunk"] .badge-trial {
  box-shadow: 0 0 12px rgba(47,107,255,.45), 0 0 6px rgba(176,38,255,.30);
  transition: box-shadow var(--fx-duration-fast) ease;
}

/* FAB — float + color shift */
[data-skin="cyberpunk"] .sa-fab {
  animation:
    cayiaFloatSoft 3.6s ease-in-out infinite,
    cayiaHueCycle  9s   ease-in-out infinite;
}

/* Button sheen — colored magenta strip (faster, more vivid) */
[data-skin="cyberpunk"] .btn-primary::after {
  background: linear-gradient(
    90deg,
    transparent,
    rgba(47,107,255,.22),
    rgba(176,38,255,.24),
    rgba(255,43,214,.16),
    transparent
  );
  animation-duration: calc(var(--fx-duration-medium) * 0.85);
}

/* Skin picker active card — neon ring */
[data-skin="cyberpunk"] .skin-option.active {
  box-shadow: 0 0 0 2px rgba(47,107,255,.60),
              var(--fx-glow-primary);
  animation: cayiaNeonPulse 5.5s ease-in-out infinite;
}

/* ──────────────────────────────────────────────────────────
   SECTION 10 — TRADITIONAL BUSINESS EFFECTS
   Elegant golden pulse (slow), golden sheen on buttons.
────────────────────────────────────────────────────────── */
[data-skin="traditionalBusiness"] .stat-card,
[data-skin="traditionalBusiness"] .action-card {
  animation: cayiaGoldPulse 9s ease-in-out infinite;
}

[data-skin="traditionalBusiness"] .chart-card {
  animation: cayiaGoldPulse 11s 2s ease-in-out infinite;
}

[data-skin="traditionalBusiness"] .nav-item.active {
  box-shadow: inset 3px 0 0 rgba(214,168,79,.80);
}

[data-skin="traditionalBusiness"] .sa-fab {
  animation: cayiaFloatSoft 5.5s ease-in-out infinite;
}

/* Golden sheen (slow, regal) */
[data-skin="traditionalBusiness"] .btn-primary::after {
  animation-duration: calc(var(--fx-duration-medium) * 2.1);
}

[data-skin="traditionalBusiness"] .skin-option.active {
  box-shadow: 0 0 0 2px rgba(214,168,79,.50),
              var(--fx-glow-primary);
}

/* ──────────────────────────────────────────────────────────
   SECTION 11 — PINK GIRLY EFFECTS
   Soft rose glow, gentle lift, elegant sheen.
────────────────────────────────────────────────────────── */
[data-skin="pinkGirly"] .stat-card:hover,
[data-skin="pinkGirly"] .action-card:hover,
[data-skin="pinkGirly"] .chart-card:hover {
  box-shadow: var(--fx-glow-primary), var(--fx-card-hover-shadow);
}

[data-skin="pinkGirly"] .nav-item.active {
  box-shadow: inset 3px 0 0 rgba(255,92,154,.75);
}

[data-skin="pinkGirly"] .sa-fab {
  animation: cayiaFloatSoft 4.8s ease-in-out infinite;
}

[data-skin="pinkGirly"] .btn-primary::after {
  animation-duration: calc(var(--fx-duration-medium) * 1.7);
}

[data-skin="pinkGirly"] .skin-option.active {
  box-shadow: 0 0 0 2px rgba(255,92,154,.48),
              var(--fx-glow-primary);
}

/* ──────────────────────────────────────────────────────────
   SECTION 12 — GREEN ECO EFFECTS
   Natural calm motion, gentle hover, slow ambient.
────────────────────────────────────────────────────────── */
[data-skin="greenEco"] .stat-card:hover,
[data-skin="greenEco"] .action-card:hover,
[data-skin="greenEco"] .chart-card:hover {
  box-shadow: var(--fx-glow-primary), var(--fx-card-hover-shadow);
}

[data-skin="greenEco"] .nav-item.active {
  box-shadow: inset 3px 0 0 rgba(21,153,87,.75);
}

[data-skin="greenEco"] .sa-fab {
  animation: cayiaFloatSoft 5.4s ease-in-out infinite;
}

[data-skin="greenEco"] .btn-primary::after {
  animation-duration: calc(var(--fx-duration-medium) * 2.0);
}

[data-skin="greenEco"] .skin-option.active {
  box-shadow: 0 0 0 2px rgba(21,153,87,.45),
              var(--fx-glow-primary);
}

/* ──────────────────────────────────────────────────────────
   SECTION 13 — LUXURY BLACK EFFECTS
   Minimal. Metal sheen. Silver border pulse. Very slow.
────────────────────────────────────────────────────────── */
[data-skin="luxuryBlack"] .stat-card,
[data-skin="luxuryBlack"] .action-card {
  animation: cayiaGoldPulse 11s ease-in-out infinite;
}

[data-skin="luxuryBlack"] .chart-card {
  animation: cayiaGoldPulse 14s 3s ease-in-out infinite;
}

[data-skin="luxuryBlack"] .nav-item.active {
  box-shadow: inset 3px 0 0 rgba(200,200,200,.55);
}

[data-skin="luxuryBlack"] .sa-fab {
  animation: cayiaFloatSoft 6.5s ease-in-out infinite;
}

/* Platinum sheen (slow, sobrio) */
[data-skin="luxuryBlack"] .btn-primary::after {
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255,255,255,.12),
    rgba(255,255,255,.16),
    transparent
  );
  animation-duration: calc(var(--fx-duration-medium) * 2.4);
}

[data-skin="luxuryBlack"] .skin-option.active {
  box-shadow: 0 0 0 2px rgba(200,200,200,.30),
              var(--fx-glow-primary);
}

/* ──────────────────────────────────────────────────────────
   SECTION 14 — MODERN SAAS EFFECTS
   Clean and subtle. Light blue hover glow. No animations.
────────────────────────────────────────────────────────── */
[data-skin="modernSaas"] .stat-card:hover,
[data-skin="modernSaas"] .action-card:hover,
[data-skin="modernSaas"] .chart-card:hover {
  box-shadow: var(--fx-card-hover-shadow);
  border-color: rgba(47,107,255,.28);
}

[data-skin="modernSaas"] .nav-item.active {
  box-shadow: inset 3px 0 0 rgba(47,107,255,.70);
}

[data-skin="modernSaas"] .sa-fab {
  animation: cayiaFloatSoft 5s ease-in-out infinite;
}

/* Button sheen (lighter, slower, very clean) */
[data-skin="modernSaas"] .btn-primary::after {
  animation-duration: calc(var(--fx-duration-medium) * 2.0);
}

[data-skin="modernSaas"] .skin-option.active {
  box-shadow: 0 0 0 2px rgba(47,107,255,.40),
              var(--fx-glow-primary);
}

/* ──────────────────────────────────────────────────────────
   SECTION 15 — DEFAULT SKIN EFFECTS
   Micro-interactions only. Subtle hover lift. Slow sheen.
────────────────────────────────────────────────────────── */
/* Default is :root tokens — sheen already fires via .btn-primary::after */
/* Just slow it down further for the default skin */
:root:not([data-skin]) .btn-primary::after,
[data-skin="default"] .btn-primary::after {
  animation-duration: calc(var(--fx-duration-medium) * 2.8);
  --fx-motion-opacity: 0.22;
}

/* ──────────────────────────────────────────────────────────
   SECTION 16 — HEADER BADGES (topbar)
   Very subtle glow on trial badge & sync badge.
────────────────────────────────────────────────────────── */
.badge-trial,
.sync-badge[data-status="connected"] {
  transition: box-shadow var(--fx-duration-fast) ease;
}

[data-skin="cyberpunk"] .sync-badge[data-status="connected"] {
  box-shadow: 0 0 10px rgba(32,230,161,.40);
}

[data-skin="traditionalBusiness"] .badge-trial {
  box-shadow: 0 0 10px rgba(214,168,79,.30);
}

[data-skin="pinkGirly"] .badge-trial {
  box-shadow: 0 0 10px rgba(255,92,154,.28);
}

/* ──────────────────────────────────────────────────────────
   SECTION 17 — CHART CONTAINER BORDERS ONLY
   Subtle border glow on chart card wrapper.
   Never animate the canvas itself.
────────────────────────────────────────────────────────── */
[data-skin="cyberpunk"] .chart-card:hover {
  border-color: var(--fx-border-glow);
  box-shadow: var(--fx-card-hover-shadow), 0 0 16px rgba(47,107,255,.20);
}

[data-skin="traditionalBusiness"] .chart-card:hover,
[data-skin="luxuryBlack"] .chart-card:hover {
  border-color: var(--fx-border-glow);
}

/* ──────────────────────────────────────────────────────────
   SECTION 18 — PREFERS-REDUCED-MOTION
   Collapses all animations system-wide.
   This is mandatory per accessibility requirements.
────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration:        0.001ms !important;
    animation-iteration-count: 1       !important;
    transition-duration:       0.001ms !important;
    scroll-behavior:           auto    !important;
  }
}