/* ==========================================================================
   TERZOHUB — EFFECTS: SHADOWS, GLOWS, TRANSITIONS, MOTION
   ========================================================================== */
:root {
  /* Elevation — cards sit on very soft shadows; modals/panels deeper */
  --shadow-card:    0 10px 30px rgba(0, 0, 0, 0.02);
  --shadow-hover:   0 20px 40px rgba(0, 0, 0, 0.06);
  --shadow-panel:   -10px 0 30px rgba(0, 0, 0, 0.10);
  --shadow-glass:   0 20px 40px rgba(0, 0, 0, 0.04), 0 1px 3px rgba(0, 0, 0, 0.02);
  --shadow-hero:    0 4px 6px rgba(0,0,0,0.05), 0 20px 60px rgba(0,0,0,0.22), 0 0 0 1px rgba(255,255,255,0.05);

  /* Brand glow — primary buttons & active nav */
  --glow-orange:       0 4px 15px rgba(255, 102, 0, 0.30);
  --glow-orange-hover: 0 8px 25px rgba(255, 102, 0, 0.40);
  --glow-active-nav:   0 10px 20px rgba(255, 102, 0, 0.20);

  /* Focus ring */
  --focus-ring: 0 0 0 3px rgba(255, 102, 0, 0.10);

  /* Transitions */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);   /* @kind other */
  --ease-bounce:   cubic-bezier(0.175, 0.885, 0.32, 1.275);  /* @kind other */
  --t-fast:   0.2s;  /* @kind other */
  --t-base:   0.3s;  /* @kind other */
  --t-slow:   0.4s;  /* @kind other */

  /* Decorative page wash — subtle orange radial top-left */
  --page-wash: radial-gradient(circle at 0% 0%, var(--terzo-orange-light) 0%, transparent 50%);  /* @kind other */
}

/* ── Shared keyframes ── */
@keyframes terzo-fade-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes terzo-row-fade {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes terzo-spin {
  100% { transform: rotate(360deg); }
}